diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx b/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx index 1cc8b39300..c5b24d7d54 100644 --- a/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx +++ b/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx @@ -6,7 +6,7 @@ import * as stories from './Sidebar.stories'; const { Default } = composeStories(stories); -describe('[Throbber Component]', () => { +describe('[Sidebar Component]', () => { it('renders without crashing', () => { render(); }); diff --git a/packages/fuselage/src/components/Sidebar/SidebarActions.tsx b/packages/fuselage/src/components/Sidebar/SidebarActions.tsx index 026a7559e9..165a562c7e 100644 --- a/packages/fuselage/src/components/Sidebar/SidebarActions.tsx +++ b/packages/fuselage/src/components/Sidebar/SidebarActions.tsx @@ -6,9 +6,12 @@ import { ButtonGroup } from '../ButtonGroup'; type SidebarActionsProps = ComponentProps; -export const SidebarActions = (props: SidebarActionsProps) => ( - -); +export const SidebarActions = forwardRef(function SidebarActions( + props: SidebarActionsProps, + ref: Ref +) { + return ; +}); type SidebarActionProps = ComponentProps; diff --git a/packages/fuselage/src/components/Sidebar/TopBar.tsx b/packages/fuselage/src/components/Sidebar/TopBar.tsx deleted file mode 100644 index 712b1ba5d6..0000000000 --- a/packages/fuselage/src/components/Sidebar/TopBar.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import type { ComponentProps, ReactNode, Ref } from 'react'; -import React, { forwardRef } from 'react'; - -import Box from '../Box'; -import { SidebarAction, SidebarActions } from './SidebarActions'; -import { SidebarDivider } from './SidebarDivider'; - -const Avatar: { size: 'x24' } = { size: 'x24' }; - -type TopBarProps = { - children?: ReactNode; - className?: string; -}; - -const TopBar = ({ className, ...props }: TopBarProps) => ( -
-); - -type TopBarWrapperProps = { - children?: ReactNode; -}; - -const TopBarWrapper = ({ children }: TopBarWrapperProps) => ( -
-); - -type TopBarToolBoxProps = { - children?: ReactNode; - className?: string; -}; - -export const TopBarToolBox = ({ - children, - className, - ...props -}: TopBarToolBoxProps) => ( - - - - -); - -type TopBarSectionProps = { - children?: React.ReactNode; - className?: string; -}; - -export const TopBarSection = ({ - className, - children, - ...props -}: TopBarSectionProps) => ( - - - - -); - -export const TopBarAvatar = Avatar; - -export const TopBarActions = SidebarActions; - -type TopBarActionProps = ComponentProps; - -export const TopBarAction = forwardRef(function TopBarAction( - props: TopBarActionProps, - ref: Ref -) { - return ; -}); - -type TopBarTitleProps = { - children?: ReactNode; -}; - -export const TopBarTitle = (props: TopBarTitleProps) => ( - -); - -export default Object.assign(TopBar, { - Section: TopBarSection, - ToolBox: TopBarToolBox, - Wrapper: TopBarWrapper, - Avatar: TopBarAvatar, - Actions: TopBarActions, - Action: TopBarAction, - Divider: SidebarDivider, - Title: TopBarTitle, -}); diff --git a/packages/fuselage/src/components/Sidebar/TopBar/TopBar.spec.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBar.spec.tsx new file mode 100644 index 0000000000..7e4909209c --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBar.spec.tsx @@ -0,0 +1,31 @@ +import { composeStories } from '@storybook/testing-react'; +import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; +import React from 'react'; + +import * as stories from './TopBar.stories'; + +const testCases = Object.values(composeStories(stories)).map((Story) => [ + Story.storyName || 'Story', + Story, +]); + +describe('[TopBar Rendering]', () => { + test.each(testCases)( + `renders %s without crashing`, + async (_storyname, Story) => { + const tree = render(); + expect(tree.baseElement).toMatchSnapshot(); + } + ); + + test.each(testCases)( + '%s should have no a11y violations', + async (_storyname, Story) => { + const { container } = render(); + + const results = await axe(container); + expect(results).toHaveNoViolations(); + } + ); +}); diff --git a/packages/fuselage/src/components/Sidebar/TopBar.stories.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBar.stories.tsx similarity index 67% rename from packages/fuselage/src/components/Sidebar/TopBar.stories.tsx rename to packages/fuselage/src/components/Sidebar/TopBar/TopBar.stories.tsx index 5dadd322dc..655d37ac34 100644 --- a/packages/fuselage/src/components/Sidebar/TopBar.stories.tsx +++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBar.stories.tsx @@ -2,10 +2,16 @@ import { Title, Description, Primary, Stories } from '@storybook/addon-docs'; import type { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; -import { SidebarSection } from '.'; -import { TopBarToolBox } from '..'; +import { + TopBar, + TopBarAction, + TopBarActions, + TopBarAvatar, + TopBarTitle, + TopBarToolBox, +} from '.'; +import { SidebarSection } from '..'; import { Avatar } from '../..'; -import TopBar from './TopBar'; export default { title: 'Sidebar/TopBar', @@ -31,40 +37,41 @@ export const Default: ComponentStory = () => ( <> - - - - - - - + + + + + + + - Title - - - - + Title + + + + - + Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title - - - - - - - - + + + + + + + + ); diff --git a/packages/fuselage/src/components/Sidebar/TopBar/TopBar.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBar.tsx new file mode 100644 index 0000000000..1790b28c09 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBar.tsx @@ -0,0 +1,16 @@ +import type { ReactNode } from 'react'; +import React from 'react'; + +type TopBarProps = { + children?: ReactNode; + className?: string; +}; + +export const TopBar = ({ className, ...props }: TopBarProps) => ( +
+); diff --git a/packages/fuselage/src/components/Sidebar/TopBar/TopBarAction.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBarAction.tsx new file mode 100644 index 0000000000..28aff50bd0 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBarAction.tsx @@ -0,0 +1,13 @@ +import type { ComponentProps, Ref } from 'react'; +import React, { forwardRef } from 'react'; + +import { SidebarAction } from '../SidebarActions'; + +type TopBarActionProps = ComponentProps; + +export const TopBarAction = forwardRef(function TopBarAction( + props: TopBarActionProps, + ref: Ref +) { + return ; +}); diff --git a/packages/fuselage/src/components/Sidebar/TopBar/TopBarActions.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBarActions.tsx new file mode 100644 index 0000000000..e8db9a728b --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBarActions.tsx @@ -0,0 +1,13 @@ +import type { ComponentProps, Ref } from 'react'; +import React, { forwardRef } from 'react'; + +import { SidebarActions } from '../SidebarActions'; + +type TopBarActionsProps = ComponentProps; + +export const TopBarActions = forwardRef(function TopBarActions( + props: TopBarActionsProps, + ref: Ref +) { + return ; +}); diff --git a/packages/fuselage/src/components/Sidebar/TopBar/TopBarSection.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBarSection.tsx new file mode 100644 index 0000000000..b181180da3 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBarSection.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import { SidebarDivider } from '../SidebarDivider'; +import { TopBar } from './TopBar'; +import { TopBarWrapper } from './TopBarWrapper'; + +type TopBarSectionProps = { + children?: React.ReactNode; + className?: string; +}; + +export const TopBarSection = ({ + className, + children, + ...props +}: TopBarSectionProps) => ( + + + + +); diff --git a/packages/fuselage/src/components/Sidebar/TopBar/TopBarTitle.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBarTitle.tsx new file mode 100644 index 0000000000..d0ef933c91 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBarTitle.tsx @@ -0,0 +1,12 @@ +import type { ReactNode } from 'react'; +import React from 'react'; + +import Box from '../../Box'; + +type TopBarTitleProps = { + children?: ReactNode; +}; + +export const TopBarTitle = (props: TopBarTitleProps) => ( + +); diff --git a/packages/fuselage/src/components/Sidebar/TopBar/TopBarToolBox.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBarToolBox.tsx new file mode 100644 index 0000000000..4283ef0b18 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBarToolBox.tsx @@ -0,0 +1,27 @@ +import type { ReactNode } from 'react'; +import React from 'react'; + +import { SidebarDivider } from '../SidebarDivider'; +import { TopBar } from './TopBar'; +import { TopBarWrapper } from './TopBarWrapper'; + +type TopBarToolBoxProps = { + children?: ReactNode; + className?: string; +}; + +export const TopBarToolBox = ({ + children, + className, + ...props +}: TopBarToolBoxProps) => ( + + + + +); diff --git a/packages/fuselage/src/components/Sidebar/TopBar/TopBarWrapper.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBarWrapper.tsx new file mode 100644 index 0000000000..4886882b68 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBarWrapper.tsx @@ -0,0 +1,13 @@ +import type { ReactNode } from 'react'; +import React from 'react'; + +type TopBarWrapperProps = { + children?: ReactNode; +}; + +export const TopBarWrapper = ({ children }: TopBarWrapperProps) => ( +
+); diff --git a/packages/fuselage/src/components/Sidebar/TopBar/__snapshots__/TopBar.spec.tsx.snap b/packages/fuselage/src/components/Sidebar/TopBar/__snapshots__/TopBar.spec.tsx.snap new file mode 100644 index 0000000000..c88801cd45 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/__snapshots__/TopBar.spec.tsx.snap @@ -0,0 +1,212 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[TopBar Rendering] renders Default without crashing 1`] = ` + +
+
+
+ +
+
+ + + + + +
+
+
+
+
+ Title +
+
+ + +
+
+
+
+
+
+
+ Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title +
+
+ + + + + +
+
+
+
+
+ +`; diff --git a/packages/fuselage/src/components/Sidebar/TopBar/index.ts b/packages/fuselage/src/components/Sidebar/TopBar/index.ts new file mode 100644 index 0000000000..0f5a46d59f --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/TopBar/index.ts @@ -0,0 +1,39 @@ +import { SidebarDivider as TopBarDivider } from '../SidebarDivider'; +import { TopBar } from './TopBar'; +import { TopBarAction } from './TopBarAction'; +import { TopBarActions } from './TopBarActions'; +import { TopBarSection } from './TopBarSection'; +import { TopBarTitle } from './TopBarTitle'; +import { TopBarToolBox } from './TopBarToolBox'; +import { TopBarWrapper } from './TopBarWrapper'; + +const Avatar: { size: 'x24' } = { size: 'x24' }; + +export const TopBarAvatar = Avatar; + +export default Object.assign(TopBar, { + /** @deprecated use named import instead */ + Section: TopBarSection, + /** @deprecated use named import instead */ + ToolBox: TopBarToolBox, + /** @deprecated use named import instead */ + Wrapper: TopBarWrapper, + /** @deprecated use named import instead */ + Avatar: TopBarAvatar, + /** @deprecated use named import instead */ + Actions: TopBarActions, + /** @deprecated use named import instead */ + Action: TopBarAction, + /** @deprecated use named import instead */ + Divider: TopBarDivider, + /** @deprecated use named import instead */ + Title: TopBarTitle, +}); + +export * from './TopBar'; +export * from './TopBarAction'; +export * from './TopBarActions'; +export * from './TopBarSection'; +export * from './TopBarTitle'; +export * from './TopBarToolBox'; +export * from './TopBarWrapper'; diff --git a/packages/fuselage/src/components/Sidebar/index.tsx b/packages/fuselage/src/components/Sidebar/index.tsx index a0638957a5..1948367f00 100644 --- a/packages/fuselage/src/components/Sidebar/index.tsx +++ b/packages/fuselage/src/components/Sidebar/index.tsx @@ -27,7 +27,6 @@ export * from './Section'; export { default as SidebarTopBar } from './TopBar'; export * from './TopBar'; export * from './SidebarBanner'; - export * from './SidebarFooter'; export { SidebarDivider };