@edvisor/product-language 0.10.2 → 0.10.3

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

@@ -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()
-  })
-})

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

@@ -1,70 +0,0 @@
-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)
-        }
-      }}
-    />
-  )
-}

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

@@ -1,98 +0,0 @@
-import { css } from 'styled-components'
-import { Surface, Borders, Actions, Interactive, Icons } from '@foundations'
-import { Hex, is, isNil } from '@helpers'
-
-interface ICheckedProps {
-  checked?: boolean;
-}
-
-const indeterminateSvg = `
-  <svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 10 8'>
-    <rect fill='white' width='10' height='2' rx='1'/>
-  </svg>
-`
-const checkSvg = `
-  <svg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 8'>
-    <path d='M4.50846 7.37941C4.0689 7.81898 3.35108 7.81898 2.91151 7.37941L0.330581 4.79848C-0.110194 4.35892 -0.110194 3.64109 0.330581 3.20153C0.770146 2.76196 1.48797 2.76196 1.92753 3.20153L3.70999 4.98399L8.07338 0.620598C8.51294 0.181033 9.23076 0.181033 9.67033 0.620598C10.1099 1.06016 10.1099 1.77798 9.67033 2.21755L4.50846 7.37941Z' fill='white'/>
-  </svg>`
-
-function getCheckMark (indeterminate: boolean) {
-  return css`
-    ::before {
-      position: absolute;
-      content: url("data:image/svg+xml,${indeterminate ? indeterminateSvg : checkSvg}");
-      left: ${indeterminate ? 3 : 4}px;
-      top: ${indeterminate ? 6 : 3}px;
-    }
-  `
-}
-
-/** the reason I have this isNil to test
- * whether `checked` was passes is this:
- * 
- * if the user passed "checked" then
- * they expect the checked styles to be
- * seen if and only if checked is true.
- * In that case I don't add the :checked
- * selector because the user doesn't want
- * the styles to depend on the browser's
- * idea of the state of the button.
-  */
- function getCheckedStyles (indeterminate: boolean, color: Hex) {
-  return css<{ checked?: boolean }>`
-    ${({ checked }) => isNil(checked) 
-      ? css`
-          :checked {
-            background: ${color};
-            border: 2px solid ${color};
-            ${getCheckMark(indeterminate)}
-          }
-        `
-      : is(checked) || is(indeterminate)
-      ? css`
-          background: ${color};
-          border: 2px solid ${color};
-          ${getCheckMark(indeterminate)}
-        `
-    : ''
-    }
-  `
-}
-
-export const getHoverStyles = (indeterminate: boolean) => css`
-  background: ${Surface.Default.Hover};
-
-  ${getCheckedStyles(indeterminate, Interactive.Default.Hover)}
-`
-
-export const getDisabledStyles = (indeterminate: boolean) => css`
-  pointer-events: none;
-  background: ${(props: ICheckedProps) =>
-    is(props.checked) || is(indeterminate)
-      ? `${Borders.Default.Default}`
-      : `${Surface.Default.Subdued}`};
-  border: 2px solid ${Borders.Default.Default};
-
-  ${getCheckedStyles(indeterminate, Icons.Disabled)}
-`
-
-export const getDefaultStyles = (indeterminate: boolean) => css`
-  background: ${Surface.Default.Default};
-  border: 2px solid ${Interactive.Default.Disabled};
-
-  ${getCheckedStyles(indeterminate, Interactive.Default.Default)}
-
-  :hover {
-    ${getHoverStyles(indeterminate)}
-  }
-`
-
-export const getInvalidStyles = (indeterminate: boolean) => css`
-  background: ${(props: ICheckedProps) =>
-    (is(props.checked) || is(indeterminate))
-      ? `${Actions.Critical.Default}`
-      : `${Surface.Critical.Subdued}`};
-  border: 2px solid ${Borders.Critical.Default};
-
-  ${getCheckedStyles(indeterminate, Icons.Critical)}
-`

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

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