@edvisor/product-language 0.3.0 → 0.4.0

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

@@ -1,162 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,89 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

package/src/lib/components/card/storybook/card.stories.mdx

@@ -1,100 +0,0 @@
-import { Meta, Canvas } from '@storybook/addon-docs';
-import { AlertBanner } from 'components/alert-banner'
-import { 
-  CardExample, 
-  SectionsExample, 
-  AlertBannerExample, 
-  LeftRightLayoutExample,
-  CardControlsExample,
-  SectionsHeadingActionsExample,
-} from './components'
-
-<Meta title="Components/Card"/>
-
-# Card
-
-Cards are used to group similar things together.
-
-## How to Use It
-
-```tsx
-import { Card } from '@edvisor/product-language'
-
-<Card heading='Heading'>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</Card>
-```
-
-### Card
-
-A simple card with a heading and content.
-
-<CardExample />
-
-### Card with Sections
-
-You can divide a card's body up into sections.
-
-<SectionsExample />
-
-### Card with Heading Actions
-
-Any heading in a Card can have an action
-
-<AlertBanner warning>
-HeadingAction is a slot, so its children will always render in the same place regardless of where you use it.
-</AlertBanner>
-
-<SectionsHeadingActionsExample />
-
-### Card with Controls
-
-Primary controls go on the bottom of the card.
-
-<AlertBanner warning>
-Controls is a slot, so its children will always render in the same place regardless of where you use it.
-</AlertBanner>
-
-<CardControlsExample />
-
-### Card with Alert Banner
-
-You can grab the user's attention with a banner.
-
-<AlertBanner warning>
-AlertBanner is a slot, so its children will always render in the same place regardless of where you use it.
-</AlertBanner>
-
-<AlertBannerExample />
-
-### Card with a Layout
-
-You can add a layout to a card. In this case we've added a 1:2 ratio "left/right" layout.
-
-<LeftRightLayoutExample />
-
-## API
-
-### `Card`
-
-Extends `HTMLAttributes<HTMLDivElement>`
-
-| Prop      | Type       | Description                |
-| --------- | ---------- | -------------------------- |
-| `heading` | `boolean?` | Adds a heading to the card |
-
-### `Card.Section`
-
-Extends `HTMLAttributes<HTMLDivElement>`
-
-| Prop      | Type       | Description                     |
-| --------- | ---------- | ------------------------------- |
-| `heading` | `boolean?` | Adds a heading to the section   |
-
-### Slots
-
-| Slot            | Description                                                 |
-| --------------- | ----------------------------------------------------------- |
-| `Controls`      | Adds controls to the bottom of the card                     |
-| `HeadingAction` | Adds UI directly across from the card or sections's heading |
-| `AlertBanner`   | Adds an alert banner above the heading                      |