@edvisor/product-language 0.3.0 → 0.3.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                      |

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

@@ -1,223 +0,0 @@
-import styled from 'styled-components'
-
-import { Surface } from '@foundations'
-import { CardPlayground } from '@stories'
-
-import { leftRightLayoutGenerator } from 'components/layout'
-import { Body, Heading3 } from 'components/typography'
-import { InputField } from 'components/input-field'
-
-import { Card } from '../card'
-import { LeftRightCard } from '../molecules/left-right-card'
-
-export const CardExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading'>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-export const SectionsExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Sections!'>
-  If you include section slots, plain children won't render.
-  <Card.Section heading='Subheading 1'>
-    This is a section.
-  </Card.Section>
-  <Card.Section heading='Subheading 2'>
-    This is another section.
-  </Card.Section>
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-export const CardControlsExample = () => (
-  <CardPlayground
-    code={`
-const handleCancel = () => alert('Cancel');
-const handleConfirm = () => alert('Confirm');
-
-<Card heading='Controls!'>
-  <Card.Controls>
-    <button onClick={handleCancel}>Cancel</button>
-    <button onClick={handleConfirm}>Confirm</button>
-  </Card.Controls>
-  Notice that the controls render below this text, even though they are above this text in the JSX. That's because Controls is a slot, it is only telling Card what we want to render, not where we want to render it.
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-export const CardHeadingActionExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading Actions!'>
-  If you include section slots, plain children won't render.
-  <Card.HeadingAction><button>Activate</button></Card.HeadingAction>
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-export const SectionsHeadingActionsExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading Actions'>
-  <Card.HeadingAction><button>Action</button></Card.HeadingAction>
-
-  <Card.Section heading='Subheading 1'>
-    This is a section.
-    <Card.HeadingAction><button>Action</button></Card.HeadingAction>
-  </Card.Section>
-
-  <Card.Section heading='Subheading 2'>
-    This is another section.
-    <Card.HeadingAction><button>Action</button></Card.HeadingAction>
-  </Card.Section>
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-export const AlertBannerExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading'>
-  <Card.AlertBanner info>Seriously though, if you change the student's age or nationality you will regret it.</Card.AlertBanner>
-  Disaster can strike at any moment.
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-const { Layout } = leftRightLayoutGenerator()
-
-const GreyBox = styled.div`
-  background-color: ${Surface.Neutral};
-  height: 100%;
-`
-
-export const LeftRightLayoutExample = () => (
-  <CardPlayground
-    code={`
-<Card>
-  <Layout>
-    <Layout.Left>
-      <Heading3>Personal Information</Heading3>
-      <Body subdued>This information will be seen by your colleagues and students.</Body>
-    </Layout.Left>
-    <Layout.Right>
-      <form id='my-form' onSubmit={(e) => e.preventDefault()}>
-        <InputField 
-          label='First name'
-        />
-        <InputField 
-          label='Last name'
-        />
-        <InputField 
-          type='email'
-          required
-          label='Email'
-        />
-      </form>
-    </Layout.Right>
-  </Layout>
-  <Card.Controls>
-    <button>Cancel</button>
-    <button form='my-form' type='submit'>Confirm</button>
-  </Card.Controls>
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-        Layout,
-        InputField,
-        Heading3,
-        Body,
-      },
-    }}
-  />
-)
-
-export const LeftRightCardExample = () => (
-  <CardPlayground
-    code={`
-  <LeftRightCard 
-    heading='Personal Information'
-    helpText='This information will be seen by your colleagues and students.'
-  >
-    <LeftRightCard.Right>
-      <form id='my-form-2' onSubmit={(e) => e.preventDefault()}>
-        <InputField 
-          label='First name'
-        />
-        <InputField 
-          label='Last name'
-        />
-        <InputField 
-          type='email'
-          required
-          label='Email'
-        />
-      </form>
-    </LeftRightCard.Right>
-    <LeftRightCard.Controls>
-      <button>Cancel</button>
-      <button form='my-form-2' type='submit'>Confirm</button>
-    </LeftRightCard.Controls>
-  </LeftRightCard>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        LeftRightCard,
-        GreyBox,
-        Body,
-        InputField,
-      },
-    }}
-  />
-)

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

@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { Checkbox } from './checkbox'
-
-describe('Checkbox Input Tests', () => {
-  it('should render the component and handle event after click', async () => {
-    const spyOnChange = jest.fn()
-    render(
-      <Checkbox
-        onChange={spyOnChange}
-      />
-    )
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-    const myComponent = screen.getByRole('checkbox')
-
-    expect(myComponent).toBeInTheDocument()
-
-    await userEvent.click(myComponent)
-    expect(spyOnChange).toHaveBeenCalled()
-  })
-
-  it('should not handle event after click if checkbox has disabled', async () => {
-    const spyOnChange = jest.fn()
-    render(
-      <Checkbox
-        disabled
-        onChange={spyOnChange}
-      />
-    )
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-    const myComponent = screen.getByRole('checkbox')
-
-    userEvent.click(myComponent)
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-  })
-})