diff options
Diffstat (limited to 'src/components/atoms')
34 files changed, 431 insertions, 62 deletions
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 672440c..e0041cc 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -8,3 +8,4 @@ export * from './links'; export * from './lists'; export * from './loaders'; export * from './modal'; +export * from './sidebar'; diff --git a/src/components/atoms/layout/article/article.stories.tsx b/src/components/atoms/layout/article/article.stories.tsx new file mode 100644 index 0000000..4c5b158 --- /dev/null +++ b/src/components/atoms/layout/article/article.stories.tsx @@ -0,0 +1,34 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Article as ArticleComponent } from './article'; + +/** + * Article - Storybook Meta + */ +export default { + title: 'Atoms/Layout', + component: ArticleComponent, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The contents.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof ArticleComponent>; + +const Template: ComponentStory<typeof ArticleComponent> = (args) => ( + <ArticleComponent {...args} /> +); + +/** + * Layout Stories - Article + */ +export const Article = Template.bind({}); +Article.args = { + children: 'The article content.', +}; diff --git a/src/components/atoms/layout/article/article.test.tsx b/src/components/atoms/layout/article/article.test.tsx new file mode 100644 index 0000000..2412fe3 --- /dev/null +++ b/src/components/atoms/layout/article/article.test.tsx @@ -0,0 +1,13 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { Article } from './article'; + +describe('Article', () => { + it('renders the contents of an article', () => { + const children = 'The article content.'; + + render(<Article>{children}</Article>); + + expect(rtlScreen.getByRole('article')).toHaveTextContent(children); + }); +}); diff --git a/src/components/atoms/layout/article/article.tsx b/src/components/atoms/layout/article/article.tsx new file mode 100644 index 0000000..8611e20 --- /dev/null +++ b/src/components/atoms/layout/article/article.tsx @@ -0,0 +1,23 @@ +import { + type ForwardRefRenderFunction, + type HTMLAttributes, + type ReactNode, + forwardRef, +} from 'react'; + +export type ArticleProps = HTMLAttributes<HTMLElement> & { + /** + * The article contents. + */ + children: ReactNode; +}; + +const ArticleWithRef: ForwardRefRenderFunction<HTMLElement, ArticleProps> = ( + props, + ref +) => <article {...props} ref={ref} />; + +/** + * Article component. + */ +export const Article = forwardRef(ArticleWithRef); diff --git a/src/components/atoms/layout/article/index.ts b/src/components/atoms/layout/article/index.ts new file mode 100644 index 0000000..a8e7c14 --- /dev/null +++ b/src/components/atoms/layout/article/index.ts @@ -0,0 +1 @@ +export * from './article'; diff --git a/src/components/atoms/layout/aside/aside.stories.tsx b/src/components/atoms/layout/aside/aside.stories.tsx new file mode 100644 index 0000000..a394d1b --- /dev/null +++ b/src/components/atoms/layout/aside/aside.stories.tsx @@ -0,0 +1,34 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Aside as AsideComponent } from './aside'; + +/** + * Aside - Storybook Meta + */ +export default { + title: 'Atoms/Layout', + component: AsideComponent, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The contents.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof AsideComponent>; + +const Template: ComponentStory<typeof AsideComponent> = (args) => ( + <AsideComponent {...args} /> +); + +/** + * Layout Stories - Aside + */ +export const Aside = Template.bind({}); +Aside.args = { + children: 'The aside content.', +}; diff --git a/src/components/atoms/layout/aside/aside.test.tsx b/src/components/atoms/layout/aside/aside.test.tsx new file mode 100644 index 0000000..5c55589 --- /dev/null +++ b/src/components/atoms/layout/aside/aside.test.tsx @@ -0,0 +1,13 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { Aside } from './aside'; + +describe('Aside', () => { + it('renders the contents of an aside', () => { + const children = 'The aside content.'; + + render(<Aside>{children}</Aside>); + + expect(rtlScreen.getByRole('complementary')).toHaveTextContent(children); + }); +}); diff --git a/src/components/atoms/layout/aside/aside.tsx b/src/components/atoms/layout/aside/aside.tsx new file mode 100644 index 0000000..92a9bf2 --- /dev/null +++ b/src/components/atoms/layout/aside/aside.tsx @@ -0,0 +1,23 @@ +import { + type ForwardRefRenderFunction, + type HTMLAttributes, + type ReactNode, + forwardRef, +} from 'react'; + +export type AsideProps = HTMLAttributes<HTMLElement> & { + /** + * The aside contents. + */ + children: ReactNode; +}; + +const AsideWithRef: ForwardRefRenderFunction<HTMLElement, AsideProps> = ( + props, + ref +) => <aside {...props} ref={ref} />; + +/** + * Aside component. + */ +export const Aside = forwardRef(AsideWithRef); diff --git a/src/components/atoms/layout/aside/index.ts b/src/components/atoms/layout/aside/index.ts new file mode 100644 index 0000000..dc3bc0b --- /dev/null +++ b/src/components/atoms/layout/aside/index.ts @@ -0,0 +1 @@ +export * from './aside'; diff --git a/src/components/atoms/layout/footer/footer.stories.tsx b/src/components/atoms/layout/footer/footer.stories.tsx new file mode 100644 index 0000000..0df1647 --- /dev/null +++ b/src/components/atoms/layout/footer/footer.stories.tsx @@ -0,0 +1,34 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Footer as FooterComponent } from './footer'; + +/** + * Footer - Storybook Meta + */ +export default { + title: 'Atoms/Layout', + component: FooterComponent, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The contents.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof FooterComponent>; + +const Template: ComponentStory<typeof FooterComponent> = (args) => ( + <FooterComponent {...args} /> +); + +/** + * Layout Stories - Footer + */ +export const Footer = Template.bind({}); +Footer.args = { + children: 'The footer content.', +}; diff --git a/src/components/atoms/layout/footer/footer.test.tsx b/src/components/atoms/layout/footer/footer.test.tsx new file mode 100644 index 0000000..15c6e6d --- /dev/null +++ b/src/components/atoms/layout/footer/footer.test.tsx @@ -0,0 +1,13 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { Footer } from './footer'; + +describe('Footer', () => { + it('renders the contents of a footer', () => { + const children = 'The footer content.'; + + render(<Footer>{children}</Footer>); + + expect(rtlScreen.getByRole('contentinfo')).toHaveTextContent(children); + }); +}); diff --git a/src/components/atoms/layout/footer/footer.tsx b/src/components/atoms/layout/footer/footer.tsx new file mode 100644 index 0000000..deb3956 --- /dev/null +++ b/src/components/atoms/layout/footer/footer.tsx @@ -0,0 +1,23 @@ +import { + type ForwardRefRenderFunction, + type HTMLAttributes, + type ReactNode, + forwardRef, +} from 'react'; + +export type FooterProps = HTMLAttributes<HTMLElement> & { + /** + * The footer contents. + */ + children: ReactNode; +}; + +const FooterWithRef: ForwardRefRenderFunction<HTMLElement, FooterProps> = ( + props, + ref +) => <footer {...props} ref={ref} />; + +/** + * Footer component. + */ +export const Footer = forwardRef(FooterWithRef); diff --git a/src/components/atoms/layout/footer/index.ts b/src/components/atoms/layout/footer/index.ts new file mode 100644 index 0000000..a058eae --- /dev/null +++ b/src/components/atoms/layout/footer/index.ts @@ -0,0 +1 @@ +export * from './footer'; diff --git a/src/components/atoms/layout/header/header.stories.tsx b/src/components/atoms/layout/header/header.stories.tsx new file mode 100644 index 0000000..3d98263 --- /dev/null +++ b/src/components/atoms/layout/header/header.stories.tsx @@ -0,0 +1,34 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Header as HeaderComponent } from './header'; + +/** + * Header - Storybook Meta + */ +export default { + title: 'Atoms/Layout', + component: HeaderComponent, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The contents.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof HeaderComponent>; + +const Template: ComponentStory<typeof HeaderComponent> = (args) => ( + <HeaderComponent {...args} /> +); + +/** + * Layout Stories - Header + */ +export const Header = Template.bind({}); +Header.args = { + children: 'The header content.', +}; diff --git a/src/components/atoms/layout/header/header.test.tsx b/src/components/atoms/layout/header/header.test.tsx new file mode 100644 index 0000000..412073f --- /dev/null +++ b/src/components/atoms/layout/header/header.test.tsx @@ -0,0 +1,13 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { Header } from './header'; + +describe('Header', () => { + it('renders the contents of a header', () => { + const children = 'The header content.'; + + render(<Header>{children}</Header>); + + expect(rtlScreen.getByRole('banner')).toHaveTextContent(children); + }); +}); diff --git a/src/components/atoms/layout/header/header.tsx b/src/components/atoms/layout/header/header.tsx new file mode 100644 index 0000000..e4837a6 --- /dev/null +++ b/src/components/atoms/layout/header/header.tsx @@ -0,0 +1,23 @@ +import { + type ForwardRefRenderFunction, + type HTMLAttributes, + type ReactNode, + forwardRef, +} from 'react'; + +export type HeaderProps = HTMLAttributes<HTMLElement> & { + /** + * The header contents. + */ + children: ReactNode; +}; + +const HeaderWithRef: ForwardRefRenderFunction<HTMLElement, HeaderProps> = ( + props, + ref +) => <header {...props} ref={ref} />; + +/** + * Header component. + */ +export const Header = forwardRef(HeaderWithRef); diff --git a/src/components/atoms/layout/header/index.ts b/src/components/atoms/layout/header/index.ts new file mode 100644 index 0000000..677ca79 --- /dev/null +++ b/src/components/atoms/layout/header/index.ts @@ -0,0 +1 @@ +export * from './header'; diff --git a/src/components/atoms/layout/index.ts b/src/components/atoms/layout/index.ts index 8cbc597..c53671a 100644 --- a/src/components/atoms/layout/index.ts +++ b/src/components/atoms/layout/index.ts @@ -1,7 +1,11 @@ +export * from './article'; +export * from './aside'; export * from './column'; export * from './copyright'; +export * from './footer'; +export * from './header'; export * from './main'; +export * from './nav'; export * from './no-script'; export * from './notice'; export * from './section'; -export * from './sidebar'; diff --git a/src/components/atoms/layout/main.test.tsx b/src/components/atoms/layout/main.test.tsx deleted file mode 100644 index 58dc660..0000000 --- a/src/components/atoms/layout/main.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { Main } from './main'; - -const id = 'main'; -const children = 'The main content.'; - -describe('Main', () => { - it('renders the content of main element', () => { - render(<Main id={id}>{children}</Main>); - expect(screen.getByRole('main')).toHaveTextContent(children); - }); -}); diff --git a/src/components/atoms/layout/main.tsx b/src/components/atoms/layout/main.tsx deleted file mode 100644 index 919b25a..0000000 --- a/src/components/atoms/layout/main.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { FC, HTMLAttributes, ReactNode } from 'react'; - -export type MainProps = HTMLAttributes<HTMLElement> & { - /** - * The main body. - */ - children: ReactNode; -}; - -/** - * Main component - * - * Render a main element. - */ -export const Main: FC<MainProps> = ({ children, ...props }) => { - return <main {...props}>{children}</main>; -}; diff --git a/src/components/atoms/layout/main/index.ts b/src/components/atoms/layout/main/index.ts new file mode 100644 index 0000000..aad1ca8 --- /dev/null +++ b/src/components/atoms/layout/main/index.ts @@ -0,0 +1 @@ +export * from './main'; diff --git a/src/components/atoms/layout/main.stories.tsx b/src/components/atoms/layout/main/main.stories.tsx index ef4d728..6a22ed5 100644 --- a/src/components/atoms/layout/main.stories.tsx +++ b/src/components/atoms/layout/main/main.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { Main as MainComponent } from './main'; /** @@ -54,5 +54,4 @@ const Template: ComponentStory<typeof MainComponent> = (args) => ( export const Main = Template.bind({}); Main.args = { children: 'The main content.', - id: '#main', }; diff --git a/src/components/atoms/layout/main/main.test.tsx b/src/components/atoms/layout/main/main.test.tsx new file mode 100644 index 0000000..ffd4e2d --- /dev/null +++ b/src/components/atoms/layout/main/main.test.tsx @@ -0,0 +1,13 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { Main } from './main'; + +describe('Main', () => { + it('renders the contents of the main element', () => { + const children = 'The main content.'; + + render(<Main>{children}</Main>); + + expect(rtlScreen.getByRole('main')).toHaveTextContent(children); + }); +}); diff --git a/src/components/atoms/layout/main/main.tsx b/src/components/atoms/layout/main/main.tsx new file mode 100644 index 0000000..5854900 --- /dev/null +++ b/src/components/atoms/layout/main/main.tsx @@ -0,0 +1,29 @@ +import { + forwardRef, + type HTMLAttributes, + type ReactNode, + type ForwardRefRenderFunction, +} from 'react'; + +export type MainProps = HTMLAttributes<HTMLElement> & { + /** + * The main body. + */ + children: ReactNode; +}; + +const MainWithRef: ForwardRefRenderFunction<HTMLElement, MainProps> = ( + { children, ...props }, + ref +) => ( + <main {...props} ref={ref}> + {children} + </main> +); + +/** + * Main component + * + * Render a main element. + */ +export const Main = forwardRef(MainWithRef); diff --git a/src/components/atoms/layout/nav/index.ts b/src/components/atoms/layout/nav/index.ts new file mode 100644 index 0000000..38d6745 --- /dev/null +++ b/src/components/atoms/layout/nav/index.ts @@ -0,0 +1 @@ +export * from './nav'; diff --git a/src/components/atoms/layout/nav/nav.stories.tsx b/src/components/atoms/layout/nav/nav.stories.tsx new file mode 100644 index 0000000..5649abf --- /dev/null +++ b/src/components/atoms/layout/nav/nav.stories.tsx @@ -0,0 +1,34 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Nav as NavComponent } from './nav'; + +/** + * Nav - Storybook Meta + */ +export default { + title: 'Atoms/Layout', + component: NavComponent, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The contents.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta<typeof NavComponent>; + +const Template: ComponentStory<typeof NavComponent> = (args) => ( + <NavComponent {...args} /> +); + +/** + * Layout Stories - Nav + */ +export const Nav = Template.bind({}); +Nav.args = { + children: 'The nav content.', +}; diff --git a/src/components/atoms/layout/nav/nav.test.tsx b/src/components/atoms/layout/nav/nav.test.tsx new file mode 100644 index 0000000..4d8c942 --- /dev/null +++ b/src/components/atoms/layout/nav/nav.test.tsx @@ -0,0 +1,13 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { Nav } from './nav'; + +describe('Nav', () => { + it('renders the contents of a nav', () => { + const children = 'The nav content.'; + + render(<Nav>{children}</Nav>); + + expect(rtlScreen.getByRole('navigation')).toHaveTextContent(children); + }); +}); diff --git a/src/components/atoms/layout/nav/nav.tsx b/src/components/atoms/layout/nav/nav.tsx new file mode 100644 index 0000000..38969de --- /dev/null +++ b/src/components/atoms/layout/nav/nav.tsx @@ -0,0 +1,23 @@ +import { + type ForwardRefRenderFunction, + type HTMLAttributes, + type ReactNode, + forwardRef, +} from 'react'; + +export type NavProps = HTMLAttributes<HTMLElement> & { + /** + * The nav contents. + */ + children: ReactNode; +}; + +const NavWithRef: ForwardRefRenderFunction<HTMLElement, NavProps> = ( + props, + ref +) => <nav {...props} ref={ref} />; + +/** + * Nav component. + */ +export const Nav = forwardRef(NavWithRef); diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx deleted file mode 100644 index d290069..0000000 --- a/src/components/atoms/layout/sidebar.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { FC, HTMLAttributes, ReactNode } from 'react'; -import styles from './sidebar.module.scss'; - -export type SidebarProps = HTMLAttributes<HTMLElement> & { - /** - * The sidebar body. - */ - children: ReactNode; -}; - -/** - * Sidebar component - * - * Render an aside element. - */ -export const Sidebar: FC<SidebarProps> = ({ - children, - className = '', - ...props -}) => { - return ( - <aside {...props} className={`${styles.wrapper} ${className}`}> - <div className={styles.body}>{children}</div> - </aside> - ); -}; diff --git a/src/components/atoms/sidebar/index.ts b/src/components/atoms/sidebar/index.ts new file mode 100644 index 0000000..b2ba9a4 --- /dev/null +++ b/src/components/atoms/sidebar/index.ts @@ -0,0 +1 @@ +export * from './sidebar'; diff --git a/src/components/atoms/layout/sidebar.module.scss b/src/components/atoms/sidebar/sidebar.module.scss index 31adb6f..31adb6f 100644 --- a/src/components/atoms/layout/sidebar.module.scss +++ b/src/components/atoms/sidebar/sidebar.module.scss diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/sidebar/sidebar.stories.tsx index f85e468..4debb41 100644 --- a/src/components/atoms/layout/sidebar.stories.tsx +++ b/src/components/atoms/sidebar/sidebar.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { Sidebar as SidebarComponent } from './sidebar'; /** diff --git a/src/components/atoms/layout/sidebar.test.tsx b/src/components/atoms/sidebar/sidebar.test.tsx index 12b2f61..13ee03a 100644 --- a/src/components/atoms/layout/sidebar.test.tsx +++ b/src/components/atoms/sidebar/sidebar.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { Sidebar } from './sidebar'; const children = 'A widget'; @@ -7,6 +7,6 @@ const children = 'A widget'; describe('Sidebar', () => { it('renders an aside element', () => { render(<Sidebar>{children}</Sidebar>); - expect(screen.getByRole('complementary')).toHaveTextContent(children); + expect(rtlScreen.getByRole('complementary')).toHaveTextContent(children); }); }); diff --git a/src/components/atoms/sidebar/sidebar.tsx b/src/components/atoms/sidebar/sidebar.tsx new file mode 100644 index 0000000..2ee53c6 --- /dev/null +++ b/src/components/atoms/sidebar/sidebar.tsx @@ -0,0 +1,22 @@ +import type { FC } from 'react'; +import { Aside, type AsideProps } from '../layout'; +import styles from './sidebar.module.scss'; + +export type SidebarProps = AsideProps; + +/** + * Sidebar component + */ +export const Sidebar: FC<SidebarProps> = ({ + children, + className = '', + ...props +}) => { + const sidebarClass = `${styles.wrapper} ${className}`; + + return ( + <Aside {...props} className={sidebarClass}> + <div className={styles.body}>{children}</div> + </Aside> + ); +}; |