diff --git a/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebar.stories.tsx b/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebar.stories.tsx new file mode 100644 index 0000000..5de273a --- /dev/null +++ b/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebar.stories.tsx @@ -0,0 +1,60 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +import type { ComponentStory, ComponentMeta } from "@storybook/react"; +import { SecondarySidebar } from "./SecondarySidebar"; +import { SecondarySidebarItem } from "./SecondarySidebarItem"; + +export default { + title: "atoms/SecondarySidebar", + component: SecondarySidebar, +} as ComponentMeta; + +const menu = [ + { + label: "Payment Accounts", + isActive: true, + }, + { + label: "Node Settings", + }, + { + label: "Security", + }, + { + label: "Wallet", + }, + { + label: "Back", + }, +]; + +const Template: ComponentStory = () => { + return ( + + {menu.map((item) => ( + + ))} + + ); +}; + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebar.test.tsx b/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebar.test.tsx new file mode 100644 index 0000000..663a6ce --- /dev/null +++ b/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebar.test.tsx @@ -0,0 +1,35 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +import { describe, expect, it } from "vitest"; +import { render } from "@testing-library/react"; +import { SecondarySidebar, SecondarySidebarItem } from "./"; +import { ThemeProvider } from "@atoms/AppProviders/ThemeProvider"; + +describe("molecules::SecondarySidebar", () => { + it("renders without exploding", () => { + const { asFragment } = render( + + + + + + + + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebar.tsx b/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebar.tsx new file mode 100644 index 0000000..bc81546 --- /dev/null +++ b/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebar.tsx @@ -0,0 +1,34 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +import { Stack, Navbar } from "@mantine/core"; + +interface SecondarySidebarProps { + children: Array; +} + +/** + * Secondary sidebar. + * @param {SecondarySidebarProps} + * @returns {JSX.Element} + */ +export function SecondarySidebar({ children }: SecondarySidebarProps) { + return ( + + {children} + + ); +} diff --git a/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebarItem.tsx b/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebarItem.tsx new file mode 100644 index 0000000..175972a --- /dev/null +++ b/packages/renderer/src/components/molecules/SecondarySidebar/SecondarySidebarItem.tsx @@ -0,0 +1,77 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +import { UnstyledButton, Group, Text, createStyles } from "@mantine/core"; + +interface SecondarySidebarItemProps { + isActive?: boolean; + label: string; +} + +/** + * Secondary sidebar menu item. + * @param {SecondarySidebarItemProps} + * @returns {JSX.Element} + */ +export function SecondarySidebarItem({ + isActive = false, + label, +}: SecondarySidebarItemProps) { + const { classes } = useStyles({ isActive }); + return ( + + + {label} + + + ); +} + +const useStyles = createStyles( + (theme, { isActive }) => ({ + button: { + padding: `${theme.spacing.lg}px 0`, + color: isActive ? theme.colors.dark[9] : theme.colors.gray[6], + transition: "color 0.1s ease-in-out", + + "&:hover": { + color: theme.colors.dark[9], + }, + }, + group: { + position: "relative", + }, + text: { + textTransform: "uppercase", + fontSize: theme.fontSizes.xs, + fontWeight: 700, + paddingLeft: isActive ? 20 : "0", + + "&:before": { + content: '""', + display: "inline-block", + width: isActive ? "12px" : "0", + height: 3, + backgroundColor: theme.colors.blue[6], + position: "absolute", + top: "50%", + marginTop: "-1.5px", + left: 0, + borderRadius: 3, + }, + }, + }) +); diff --git a/packages/renderer/src/components/molecules/SecondarySidebar/__snapshots__/SecondarySidebar.test.tsx.snap b/packages/renderer/src/components/molecules/SecondarySidebar/__snapshots__/SecondarySidebar.test.tsx.snap new file mode 100644 index 0000000..273d2ff --- /dev/null +++ b/packages/renderer/src/components/molecules/SecondarySidebar/__snapshots__/SecondarySidebar.test.tsx.snap @@ -0,0 +1,56 @@ +// Vitest Snapshot v1 + +exports[`molecules::SecondarySidebar > renders without exploding 1`] = ` + +
+ +
+ +`; diff --git a/packages/renderer/src/components/molecules/SecondarySidebar/index.ts b/packages/renderer/src/components/molecules/SecondarySidebar/index.ts new file mode 100644 index 0000000..ffa0742 --- /dev/null +++ b/packages/renderer/src/components/molecules/SecondarySidebar/index.ts @@ -0,0 +1,18 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +export * from "./SecondarySidebar"; +export * from "./SecondarySidebarItem";