From 90f4bbeb4788398a8739107f1113440c54d64f9c Mon Sep 17 00:00:00 2001 From: Meis Date: Thu, 15 Jun 2023 14:55:17 -0600 Subject: [PATCH 1/3] feat: List component --- src/components/List/List.stories.tsx | 71 ++++++++++++++++++++++++++++ src/components/List/List.tsx | 28 +++++++++++ src/components/List/ListItem.tsx | 9 ++++ 3 files changed, 108 insertions(+) create mode 100644 src/components/List/List.stories.tsx create mode 100644 src/components/List/List.tsx create mode 100644 src/components/List/ListItem.tsx diff --git a/src/components/List/List.stories.tsx b/src/components/List/List.stories.tsx new file mode 100644 index 00000000..980c9bf5 --- /dev/null +++ b/src/components/List/List.stories.tsx @@ -0,0 +1,71 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import List from './List'; +import ListItem from './ListItem'; + +const meta: Meta = { + component: List, + argTypes: {} +}; + +export default meta; + +type Story = StoryObj; + +export const Unordered: Story = { + args: { + children: ( + <> + First + Second + Third + + ) + } +}; + +export const Ordered: Story = { + args: { + ...Unordered.args, + isOrdered: true + } +}; + +export const Unstyled: Story = { + args: { + ...Unordered.args, + isUnstyled: true + } +}; + +export const Horizontal: Story = { + args: { + ...Unordered.args, + isHorizontal: true + } +}; + +export const Spaced: Story = { + args: { + ...Unordered.args, + isSpaced: true + } +}; + +export const Links: Story = { + args: { + isLinks: true, + children: ( + <> + + First Link + + + Second Link + + + Third Link + + + ) + } +}; diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx new file mode 100644 index 00000000..f730e71a --- /dev/null +++ b/src/components/List/List.tsx @@ -0,0 +1,28 @@ +import classnames from 'classnames'; + +interface ListProperties { + isHorizontal?: boolean; + isLinks?: boolean; + isOrdered?: boolean; + isUnstyled?: boolean; + isSpaced?: boolean; + children: JSX.Element | JSX.Element[]; +} + +export default function List({ + children, + isHorizontal, + isLinks = false, + isOrdered, + isSpaced, + isUnstyled +}: ListProperties): JSX.Element { + const cnames = ['m-list']; + if (isHorizontal) cnames.push('m-list__horizontal'); + if (isLinks) cnames.push('m-list__links'); + if (isSpaced) cnames.push('m-list__spaced'); + if (isUnstyled) cnames.push('m-list__unstyled'); + + if (isOrdered) return
    {children}
; + return
    {children}
; +} diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx new file mode 100644 index 00000000..6d56d5cb --- /dev/null +++ b/src/components/List/ListItem.tsx @@ -0,0 +1,9 @@ +interface ListItemProperties { + children: JSX.Element | string; +} + +export default function ListItem({ + children +}: ListItemProperties): JSX.Element { + return
  • {children}
    • ; +} From da66d9d07176211c906d54153b0c4fd7b526a21f Mon Sep 17 00:00:00 2001 From: Meis Date: Thu, 15 Jun 2023 14:57:26 -0600 Subject: [PATCH 2/3] feat: Well component --- src/components/Well/Well.less | 14 +++++++++ src/components/Well/Well.stories.tsx | 44 ++++++++++++++++++++++++++++ src/components/Well/Well.tsx | 32 ++++++++++++++++++++ 3 files changed, 90 insertions(+) create mode 100644 src/components/Well/Well.less create mode 100644 src/components/Well/Well.stories.tsx create mode 100644 src/components/Well/Well.tsx diff --git a/src/components/Well/Well.less b/src/components/Well/Well.less new file mode 100644 index 00000000..31879cb2 --- /dev/null +++ b/src/components/Well/Well.less @@ -0,0 +1,14 @@ +// @import (reference) '../../assets/styles/variables.less'; +// @import (reference) url('@cfpb/cfpb-core/src/brand-colors.less'); + +// .call-to-action { +// padding: @space-md; +// margin: 0 auto @space-xl; +// border: 1px solid @gray-50; +// background-color: @gray-5; + +// .a-link { +// display: block; +// margin-top: @space-sm; +// } +// } \ No newline at end of file diff --git a/src/components/Well/Well.stories.tsx b/src/components/Well/Well.stories.tsx new file mode 100644 index 00000000..f5c968e0 --- /dev/null +++ b/src/components/Well/Well.stories.tsx @@ -0,0 +1,44 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import Well from './Well'; + +const meta: Meta = { + component: Well, + argTypes: {} +}; + +export default meta; + +type Story = StoryObj; + +export const Standard: Story = { + args: { + heading: 'Well title', + text: ( + <> + Lorem ipsum dolor sit amet consectetur adipisicing elit. At quae dolor + distinctio tenetur quibusdam rem debitis, voluptate nesciunt culpa + officiis quos perspiciatis nostrum illo libero autem beatae temporibus + ratione reprehenderit? Example link. + + ) + } +}; + +export const CallToAction: Story = { + args: { + heading: 'Well title', + text: ( + <> + Lorem ipsum dolor sit amet consectetur adipisicing elit. At quae dolor + distinctio tenetur quibusdam rem debitis, voluptate nesciunt culpa + officiis quos perspiciatis nostrum illo libero autem beatae temporibus + ratione reprehenderit? + + ), + links: [ + + Example link + + ] + } +}; diff --git a/src/components/Well/Well.tsx b/src/components/Well/Well.tsx new file mode 100644 index 00000000..a7c640d8 --- /dev/null +++ b/src/components/Well/Well.tsx @@ -0,0 +1,32 @@ +import type { HeadingLevel } from '../../types/headingLevel'; +import List from '../List/List'; +import ListItem from '../List/ListItem'; +import './Well.less'; + +interface WellProperties { + heading: string; + text: JSX.Element | string; + links?: JSX.Element[]; + headingLevel: HeadingLevel; +} + +export default function Well({ + heading, + headingLevel = 'h4', + links, + text +}: WellProperties): JSX.Element { + const callsToAction = []; + if (links) + for (const link of links) { + callsToAction.push({link}); + } + + return ( +
    +

    {heading}

    +

    {text}

    + {callsToAction.length > 0 ? {callsToAction} : null} +
    + ); +} From 7c70fd296c3cea92ffab3b00cdb361a8b8d2c902 Mon Sep 17 00:00:00 2001 From: Meis Date: Wed, 21 Jun 2023 09:45:30 -0600 Subject: [PATCH 3/3] fix: Cleanup unused Well.less --- src/components/Well/Well.less | 14 -------------- src/components/Well/Well.tsx | 1 - 2 files changed, 15 deletions(-) delete mode 100644 src/components/Well/Well.less diff --git a/src/components/Well/Well.less b/src/components/Well/Well.less deleted file mode 100644 index 31879cb2..00000000 --- a/src/components/Well/Well.less +++ /dev/null @@ -1,14 +0,0 @@ -// @import (reference) '../../assets/styles/variables.less'; -// @import (reference) url('@cfpb/cfpb-core/src/brand-colors.less'); - -// .call-to-action { -// padding: @space-md; -// margin: 0 auto @space-xl; -// border: 1px solid @gray-50; -// background-color: @gray-5; - -// .a-link { -// display: block; -// margin-top: @space-sm; -// } -// } \ No newline at end of file diff --git a/src/components/Well/Well.tsx b/src/components/Well/Well.tsx index a7c640d8..c6062cf8 100644 --- a/src/components/Well/Well.tsx +++ b/src/components/Well/Well.tsx @@ -1,7 +1,6 @@ import type { HeadingLevel } from '../../types/headingLevel'; import List from '../List/List'; import ListItem from '../List/ListItem'; -import './Well.less'; interface WellProperties { heading: string;