@edvisor/product-language 0.6.0 → 0.7.0-rc1

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

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

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

@@ -0,0 +1,227 @@
+import styled from 'styled-components'
+
+import { Margin, Surface } from '@foundations'
+import { CardPlayground } from '@stories'
+
+import { leftRightLayoutGenerator } from 'components/layout'
+import { Body, Heading3 } from 'components/typography'
+import { InputField as InputFieldBase } from 'components/input-field'
+
+import { Card } from '../card'
+import { LeftRightCard } from '../molecules/left-right-card'
+
+const InputField = styled(InputFieldBase)`
+  margin-bottom: ${Margin.xxs}
+`
+
+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

@@ -0,0 +1,39 @@
+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()
+  })
+})

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

@@ -0,0 +1,70 @@
+import { InputHTMLAttributes } from 'react'
+import styled from 'styled-components'
+import { Margin, Padding, Focused } from '@foundations'
+import { FC, is, isDefined } from '@helpers'
+import {
+  getDisabledStyles,
+  getInvalidStyles,
+  getDefaultStyles,
+} from './helpers'
+
+const CustomizedCheckbox = styled.input<{indeterminate: boolean, error?: boolean}>`
+  appearance: none;
+  position: relative;
+  box-sizing: content-box;
+  width: 18px;
+  height: 18px;
+  margin: ${Margin.none};
+  padding: ${Padding.none};
+  border-radius: 4px;
+  user-select: none;
+  vertical-align: bottom;
+  display: inline-block;
+
+  ${({ disabled, indeterminate, error }) => {
+    if (is(disabled)) {
+      return getDisabledStyles(indeterminate)
+    } else if (is(error)) {
+      return getInvalidStyles(indeterminate)
+    } else {
+      return getDefaultStyles(indeterminate)
+    }
+  }}
+
+  :focus-visible {
+    outline: 2px solid ${Focused.Default};
+    outline-offset: 1px;
+  }
+`
+
+export interface ICheckboxProps {
+  disabled?: boolean
+  checked?: boolean
+  indeterminate?: boolean
+  error?: boolean
+  className?: string
+}
+
+export type IProps = ICheckboxProps & InputHTMLAttributes<HTMLInputElement>
+
+export const Checkbox: FC<IProps> = (props: IProps) => {
+  const {
+    error,
+    indeterminate,
+    ...htmlProps
+  } = props
+
+  return (
+    <CustomizedCheckbox
+      {...htmlProps}
+      type='checkbox'
+      error={error}
+      indeterminate={is(indeterminate)}
+      ref={input => {
+        if (isDefined(input)) {
+          input.indeterminate = is(props.indeterminate)
+        }
+      }}
+    />
+  )
+}