@edvisor/product-language 0.9.0 → 0.10.2

package/src/lib/components/badge/stories/badge.stories.mdx

@@ -0,0 +1,44 @@
+import { Badge } from '../badge'
+import { Meta } from '@storybook/addon-docs'
+import { BadgeExample } from './components'
+
+<Meta
+  title="Components/Badge"
+  component={Badge}
+/>
+
+# Badge
+
+This is an atom.
+
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1008%3A1257)
+
+## How to use
+
+```tsx
+import { Badge } from '@edvisor/product-language'
+
+<Badge>Contents</Badge>
+```
+
+### Attitudes
+
+The badge can be rendered with various attitudes.
+
+<BadgeExample />
+
+## API
+
+| Name        | Type      | Description               |
+| ----------- | --------- | ------------------------- |
+| `neutral?`  | `boolean` | renders the neutral badge |
+| `info?`     | `boolean` | renders the info badge    |
+| `warning?`  | `boolean` | renders the info warning  |
+| `success?`  | `boolean` | renders the info success  |
+| `critical?` | `boolean` | renders the info critical |
+
+## Changelog
+
+### [0.0.0]
+ - adopt the preferred storybook style
+ - removed a containing div, adjusted styles to match figma

package/src/lib/components/badge/stories/components.tsx

@@ -0,0 +1,49 @@
+import { Margin } from '@foundations'
+import { Flex } from 'components/layout'
+import { Heading1 } from 'components/typography'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import styled from 'styled-components'
+import { Badge } from '../badge'
+
+const Heading = styled(Heading1)`
+  margin-bottom: ${Margin.none};
+  margin-right: ${Margin.s};
+`
+
+const Header = styled(Flex)`
+  margin-bottom: ${Margin.l};
+  align-items: center;
+`
+
+export const BadgeExample = () => (
+  <Playground
+    code={`
+<>
+  <Header>
+    <Heading>Booking &#x23;1123</Heading>
+    <Badge warning>Pending</Badge>
+  </Header>
+  <Header>
+    <Heading>Booking &#x23;1124</Heading>
+    <Badge success>Accepted</Badge>
+  </Header>
+  <Header>
+    <Heading>Booking &#x23;1125</Heading>
+    <Badge info>Processing</Badge>
+  </Header>
+  <Header>
+    <Heading>Booking &#x23;1126</Heading>
+    <Badge critical>Declined</Badge>
+  </Header>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Badge,
+        Heading,
+        Header,
+      },
+    }}
+  />
+)

package/{lib/components/card/atoms/card-frame.d.ts → src/lib/components/card/atoms/card-frame.tsx}

@@ -1,7 +1,16 @@
-/** this is the frame that is used to implement the Card component
- * importantly it does not have any padding, which means it can be
- * used to implement a broader range of components than just the card.
- *
- * We might use it to implement the AlertBanner, or put a table in it.
-*/
-export declare const CardFrame: import("styled-components").StyledComponent<"section", any, {}, never>;
+
+import styled from 'styled-components'
+import { Surface, Margin } from '@foundations'
+
+/** this is the frame that is used to implement the Card component 
+ * importantly it does not have any padding, which means it can be
+ * used to implement a broader range of components than just the card.
+ * 
+ * We might use it to implement the AlertBanner, or put a table in it.
+*/
+export const CardFrame = styled.section`
+  background: ${Surface.Default.Default};
+
+  border-radius: 6px;
+  margin-bottom: ${Margin.m};
+`

package/src/lib/components/card/atoms/index.ts

@@ -0,0 +1 @@
+export * from './card-frame'

package/src/lib/components/card/card.test.tsx

@@ -0,0 +1,162 @@
+import { Margin } from '@foundations'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import styled from 'styled-components'
+
+import { Card } from './card'
+
+describe('Card', () => {
+  it('renders with the heading', () => {
+    render(
+      <Card heading='Heading'>Contents</Card>
+    )
+
+    expect(screen.getByRole('heading')).toBeInTheDocument()
+    expect(screen.getByText('Heading')).toBeInTheDocument()
+    expect(screen.getByText('Contents')).toBeInTheDocument()
+  })
+
+  it('renders without the heading', () => {
+    render(
+      <Card>Contents</Card>
+    )
+
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument()
+    expect(screen.getByText('Contents')).toBeInTheDocument()
+  })
+
+  /** 
+   * this test just ensures that the programmer did not
+   * forget to add className? to the props and then pass
+   * it to the wrapping element so that users downstream
+   * can style the component
+   */
+  it('accepts styles', () => {
+    const NiceCard = styled(Card)`
+      margin-bottom: ${Margin.l};
+    `
+
+    const { container } = render(<NiceCard>Contents</NiceCard>)
+
+    expect(container.firstChild).toHaveStyle(`margin-bottom: ${Margin.l}`)
+    expect(screen.getByText('Contents')).toBeInTheDocument()
+  })
+
+  describe('slots', () => {
+    it('renders no regions if it has no headings', () => {
+      render(
+        <Card>Contents</Card>
+      )
+
+      expect(screen.queryByRole('region')).not.toBeInTheDocument()
+      expect(screen.getByText('Contents')).toBeInTheDocument()
+    })
+
+    it('renders one region if the card has a heading', () => {
+      render(
+        <Card heading='Heading'>Contents</Card>
+      )
+
+      expect(screen.getByRole('region')).toBeInTheDocument()
+      expect(screen.getAllByRole('region').length).toBe(1)
+      expect(screen.getByText('Contents')).toBeInTheDocument()
+    })
+
+    it('renders one region per heading', () => {
+      render(
+        <Card heading='Heading'>
+          <Card.Section heading='Subheading 1'>Section 1</Card.Section>
+          <Card.Section heading='Subheading 2'>Section 2</Card.Section>
+          <Card.Section>Section 3</Card.Section>
+          <Card.Section>Section 4</Card.Section>
+        </Card>
+      )
+
+      expect(screen.getAllByRole('region').length).toBe(3)
+    })
+
+    it('renders all the given sections', () => {
+      render(
+        <Card heading='Heading'>
+          <Card.Section heading='Subheading 1'>Section 1</Card.Section>
+          <Card.Section heading='Subheading 2'>Section 2</Card.Section>
+          <Card.Section>Section 3</Card.Section>
+          <Card.Section>Section 4</Card.Section>
+        </Card>
+      )
+
+      expect(screen.getByText('Section 1')).toBeInTheDocument()
+      expect(screen.getByText('Section 2')).toBeInTheDocument()
+      expect(screen.getByText('Section 3')).toBeInTheDocument()
+      expect(screen.getByText('Section 4')).toBeInTheDocument()
+    })
+
+    it('does not render plain children if you give it sections', () => {
+      render(
+        <Card>
+          <Card.Section>Section 1</Card.Section>
+          <div data-testid='plain-children'>PLAIN CHILDREN</div>
+        </Card>
+      )
+
+      expect(screen.getByText('Section 1')).toBeInTheDocument()
+      expect(screen.queryByTestId('plain-children')).not.toBeInTheDocument()
+    })
+
+    it('renders the heading actions if there is a heading', () => {
+      render(
+        <Card heading='Heading'>
+          <Card.Section>Section 1</Card.Section>
+          <Card.HeadingAction>
+            <button>Click Me</button>
+          </Card.HeadingAction>
+        </Card>
+      )
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('does not render heading actions if there is no heading', () => {
+      render(
+        <Card>
+          <Card.Section>Section 1</Card.Section>
+          <Card.HeadingAction>
+            <button>Click Me</button>
+          </Card.HeadingAction>
+        </Card>
+      )
+
+      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    })
+
+    it('renders the controls when they are provided', () => {
+      render(
+        <Card heading='Heading'>
+          <Card.Section>Section 1</Card.Section>
+          <Card.Controls>
+            <button>Click Me</button>
+          </Card.Controls>
+        </Card>
+      )
+
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('does not stop the user from clicking the controls', async () => {
+      const handleClick = jest.fn()
+
+      render(
+        <Card heading='Heading'>
+          <Card.Section>Section 1</Card.Section>
+          <Card.Controls>
+            <button onClick={handleClick}>Click Me</button>
+          </Card.Controls>
+        </Card>
+      )
+
+      await userEvent.click(screen.getByText('Click Me'))
+  
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/lib/components/card/card.tsx

@@ -0,0 +1,78 @@
+import styled from 'styled-components'
+import { isDefined, isEmpty, getSlots, getOtherChildren, FC, PropsWithChildren, If, getSlot, toKebabCase } from '@helpers'
+import { Padding, Margin, shadow } from '@foundations'
+import { CardFrame as CardFrameBase } from './atoms'
+import { Heading3 } from 'components/typography'
+import { SpaceBetween } from 'components/layout'
+import { CardAlertBannerSlot, CardControlsSlot, CardHeadingActionSlot, CardSectionSlot } from './components'
+import { HTMLAttributes } from 'react'
+
+const CardHeading = styled(SpaceBetween)`
+  margin: ${Margin.none} ${Margin.l} ${Margin.none} ${Margin.l};
+  padding-top: ${Padding.l};
+`
+
+/** remove the margin bottom here since the frame handles it */
+const CardHeadingText = styled(Heading3)`
+  margin-bottom: ${Margin.none};
+`
+
+const CardFrame = styled(CardFrameBase)`
+  ${shadow};
+
+  > section:nth-of-type(1) {
+    border: none;
+  }
+`
+
+export interface ICardProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+  heading?: string
+}
+
+const SubComponents = {
+  Section: CardSectionSlot,
+  Controls: CardControlsSlot,
+  HeadingAction: CardHeadingActionSlot,
+  AlertBanner: CardAlertBannerSlot,
+}
+
+export const Card: FC<ICardProps, typeof SubComponents> = (props) => {
+  const { children, heading, ...htmlProps } = props
+
+  const sections = getSlots(CardSectionSlot, children)
+  const controls = getSlot(CardControlsSlot, children)
+  const headingAction = getSlot(CardHeadingActionSlot, children)
+  const alertBanners = getSlots(CardAlertBannerSlot, children)
+  const otherChildren = getOtherChildren(children)
+
+  const headingId = isDefined(heading)
+    ? toKebabCase(heading)
+    : undefined
+
+  return (
+    <CardFrame
+      aria-labelledby={headingId}
+      {...htmlProps}
+    >
+      <If is={alertBanners}>{alertBanners}</If>
+      <If is={heading}>
+        <CardHeading>
+          <CardHeadingText id={headingId}>{heading}</CardHeadingText>
+          <If is={headingAction}>{headingAction}</If>
+        </CardHeading>
+      </If>
+      {isEmpty(sections) ? (
+        <CardSectionSlot>{otherChildren}</CardSectionSlot>
+      ) : (
+        sections
+      )}
+      <If is={controls}>{controls}</If>
+    </CardFrame>
+  )
+}
+
+/** export the slots and some sub-components */
+Card.Section = CardSectionSlot
+Card.Controls = CardControlsSlot
+Card.HeadingAction = CardHeadingActionSlot
+Card.AlertBanner = CardAlertBannerSlot

package/src/lib/components/card/components/card-alert-banner-slot.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+import { Slot } from '@helpers'
+import { Margin } from '@foundations'
+import { AlertBanner, AlertBannerProps } from 'components/alert-banner'
+
+const CardAlertBanner = styled(AlertBanner)`
+  margin: ${Margin.l} ${Margin.l} ${Margin.none} ${Margin.l};
+`
+
+export class CardAlertBannerSlot extends Slot<AlertBannerProps> {
+  override render () {
+    return (
+      <CardAlertBanner {...this.props}>{this.props.children}</CardAlertBanner>
+    )
+  }
+}

package/src/lib/components/card/components/card-controls-slot.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+import { Slot, PropsWithChildren } from '@helpers'
+import { Padding } from '@foundations'
+import { Flex } from 'components/layout'
+
+const ControlsFrame = styled(Flex)`
+  justify-content: end;
+  padding: ${Padding.none} ${Padding.l} ${Padding.l} ${Padding.l};
+`
+
+export class CardControlsSlot extends Slot<PropsWithChildren> {
+  override render () {
+    return (
+      <ControlsFrame>
+        {this.props.children}
+      </ControlsFrame>
+    )
+  }
+}

package/src/lib/components/card/components/card-section-slot.tsx

@@ -0,0 +1,51 @@
+import { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+import { isDefined, Slot, getOtherChildren, PropsWithChildren, If, getSlot, toKebabCase } from '@helpers'
+import { Borders, Padding, Margin } from '@foundations'
+import { Heading4 } from 'components/typography'
+import { SpaceBetween } from 'components/layout'
+
+export class CardHeadingActionSlot extends Slot {}
+
+interface ICardSectionProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+  heading?: string
+}
+
+const Subheading = styled(Heading4)`
+  margin: ${Margin.none};
+`
+
+const SectionFrame = styled.section`
+  border-top: 1px solid ${Borders.Default.Subdued};
+
+  padding: ${Padding.l};
+`
+
+const SubheadingFrame = styled(SpaceBetween)`
+  margin: ${Margin.none} ${Margin.none} ${Margin.m} ${Margin.none};
+`
+
+export class CardSectionSlot extends Slot<ICardSectionProps> { 
+  override render () {
+    const headingAction = getSlot(CardHeadingActionSlot, this.props.children)
+    const children = getOtherChildren(this.props.children)
+    const headingId = isDefined(this.props.heading)
+      ? toKebabCase(this.props.heading)
+      : undefined
+
+    return (
+      <SectionFrame
+        aria-labelledby={headingId}
+        {...this.props}
+      >
+        <If is={this.props.heading}>
+          <SubheadingFrame>
+            <Subheading id={headingId}>{this.props.heading}</Subheading>
+            <If is={headingAction}>{headingAction}</If>
+          </SubheadingFrame>
+        </If>
+        {children}
+      </SectionFrame>
+    )
+  }
+}

package/src/lib/components/card/components/index.ts

@@ -0,0 +1,3 @@
+export * from './card-alert-banner-slot'
+export * from './card-controls-slot'
+export * from './card-section-slot'

package/src/lib/components/card/index.ts

@@ -0,0 +1,3 @@
+export * from './card'
+export * from './molecules/left-right-card'
+export * from './atoms'

package/src/lib/components/card/molecules/index.ts

@@ -0,0 +1 @@
+export * from './left-right-card'

package/src/lib/components/card/molecules/left-right-card.test.tsx

@@ -0,0 +1,89 @@
+import { Margin } from '@foundations'
+import { render, screen } from '@testing-library/react'
+import styled from 'styled-components'
+import { LeftRightCard } from './left-right-card'
+
+describe('LeftRightCard', () => {
+  it('renders the content in the Right slot', () => {
+    render(
+      <LeftRightCard>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('does not render other children', () => {
+    render(
+      <LeftRightCard>
+        <div>Other Children</div>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.queryByText('Other Children')).not.toBeInTheDocument()
+  })
+
+  it('renders a region labelled by the given heading', () => {
+    render(
+      <LeftRightCard heading='Heading'>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.getByRole('region')).toBeInTheDocument()
+    expect(screen.getByLabelText('Heading')).toBeInTheDocument()
+    expect(screen.getByLabelText('Heading')).toHaveTextContent('Content')
+  })
+
+  it('renders no region without a heading', () => {
+    render(
+      <LeftRightCard>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.queryByRole('region')).not.toBeInTheDocument()
+    expect(screen.queryByLabelText('Heading')).not.toBeInTheDocument()
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('describes the children by the given help text', () => {
+    render(
+      <LeftRightCard helpText='Helpful Text'>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.getByText('Helpful Text')).toBeInTheDocument()
+    expect(screen.getByText('Content')).toHaveAccessibleDescription('Helpful Text')
+  })
+
+  it('still renders without the helpful text, but it is not as helpful', () => {
+    render(
+      <LeftRightCard>
+        <LeftRightCard.Right>Content</LeftRightCard.Right>
+      </LeftRightCard>
+    )
+
+    expect(screen.queryByText('Helpful Text')).not.toBeInTheDocument()
+    expect(screen.getByText('Content')).not.toHaveAccessibleDescription('Helpful Text')
+  })
+
+  /** 
+   * this test just ensures that the programmer did not
+   * forget to add className? to the props and then pass
+   * it to the wrapping element so that users downstream
+   * can style the component
+   */
+  it('accepts styles', () => {
+    const Component = styled(LeftRightCard)`
+      margin-bottom: ${Margin.l};
+    `
+
+    const { container } = render(<Component>Contents</Component>)
+
+    expect(container.firstChild).toHaveStyle(`margin-bottom: ${Margin.l}`)
+  })
+})

package/src/lib/components/card/molecules/left-right-card.tsx

@@ -0,0 +1,63 @@
+import { FC, getSlot, If, isDefined, Slot, toKebabCase } from '@helpers'
+import { leftRightLayoutGenerator } from 'components/layout'
+import { Card, ICardProps } from '../card'
+
+const { Layout } = leftRightLayoutGenerator()
+
+class Right extends Slot {}
+class Controls extends Slot {}
+
+type SubComponents = {
+  Right: typeof Right
+  Controls: typeof Controls
+}
+
+interface ILeftRightCardProps extends ICardProps {
+  helpText?: string
+  className?: string
+}
+
+export const LeftRightCard: FC<ILeftRightCardProps, SubComponents> = (
+  props
+) => {
+  const right = getSlot(Right, props.children)
+  const controls = getSlot(Controls, props.children)
+
+  const headingId = isDefined(props.heading)
+    ? toKebabCase(props.heading)
+    : undefined
+
+  const helpTextId = isDefined(props.helpText)
+    ? toKebabCase(props.helpText)
+    : undefined
+
+  return (
+    <Card className={props.className}>
+      <Card.Section aria-labelledby={headingId}>
+        <Layout>
+          <Layout.Left>
+            <If is={props.heading}>
+              <Layout.HeadingText id={headingId}>
+                {props.heading}
+              </Layout.HeadingText>
+            </If>
+            <If is={props.helpText}>
+              <Layout.HelpText id={helpTextId}>
+                {props.helpText}
+              </Layout.HelpText>
+            </If>
+          </Layout.Left>
+          <Layout.Right>
+            <div aria-describedby={helpTextId}>{right}</div>
+          </Layout.Right>
+        </Layout>
+      </Card.Section>
+      <Card.Controls>
+        {controls}
+      </Card.Controls>
+    </Card>
+  )
+}
+
+LeftRightCard.Right = Right
+LeftRightCard.Controls = Controls