@edvisor/product-language 0.2.0 → 0.3.1

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 slots, 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,240 +0,0 @@
-import styled from 'styled-components'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { Margin, Surface, Text } from '@foundations'
-import { leftRightLayoutGenerator } from 'components/layout'
-import { Body, Heading3 } from 'components/typography'
-import { Divider } from 'components/divider'
-import { Card } from '../card'
-import { LeftRightCard } from '../molecules/left-right-card'
-import { InputField } from 'components/input-field'
-
-const CardPlayground = styled(Playground)`
-  background: ${Surface.Neutral.Default};
-
-  margin-bottom: ${Margin.xxl};
-
-  > div:nth-of-type(2) {
-    background: ${Surface.Default.Inverse}; // Surface.Inverse
-    color: ${Text.OnPrimary};
-  }
-`
-
-const Bar = styled(Divider)`
-  margin-bottom: ${Margin.l};
-  margin-top: ${Margin.l};
-`
-
-export const CardExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading'>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-<Bar />
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-        Bar,
-      },
-    }}
-  />
-)
-
-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,124 +0,0 @@
-import { InputHTMLAttributes, useState } from 'react'
-import styled, { css } from 'styled-components'
-import { Surface, Borders, Margin, Padding, Interactive, Actions, Focused } from '@foundations'
-import { FC, is, isDefined } from '@helpers'
-import {
-  getHoverStyles,
-  getDisabledStyles,
-  getInvalidStyles,
-  getTabIndexValue,
-  getCheckedIcon,
-  HiddenCheckbox,
-  Icon,
-  Wrapper,
-} from './components/components'
-
-const CustomizedCheckbox = styled.div<{
-  checked: boolean;
-  disabled: boolean;
-  error: boolean;
-}>`
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  margin: ${Margin.none};
-  padding: ${Padding.none};
-  border-radius: 4px;
-
-  ${props => is(props.checked)
-    ? css`
-        background: ${Interactive.Default.Default};
-        border: 2px solid ${Interactive.Default.Default};
-        &:hover {
-          background: ${Actions.Primary.Pressed};
-          border: 2px solid ${Interactive.Default.Hover};
-        }
-      `
-    : css`
-        background: ${Surface.Default.Default};
-        border: 2px solid ${Interactive.Default.Disabled};
-        &:hover {
-          ${getHoverStyles}
-        }
-      `
-  }
-
-  ${props => is(props.disabled) ? getDisabledStyles() : ''}
-  ${props => is(props.error)
-    ? css`
-        ${getInvalidStyles()}
-        &:hover {
-          background: ${({ checked }) => (is(checked)
-            ? `${Actions.Critical.Pressed}`
-            : `${Surface.Default.Default}`
-          )};
-          border: 2px solid ${Borders.Critical.Default};
-        }
-        ${HiddenCheckbox}:invalid {
-          ${getInvalidStyles()}
-        }
-      `
-    : ''
-  }
-
-  ${HiddenCheckbox}:focus + &  {
-    outline: 2px solid ${Focused.Default};
-    outline-offset: 1px;
-  }
-  ${Icon} {
-    visibility: ${(props) => (is(props.checked) ? 'visible' : 'hidden')};
-  }
-`
-
-export interface ICheckboxProps {
-  disabled?: boolean;
-  checked?: boolean;
-  error?: boolean;
-  className?: string;
-  onChange?: (value: boolean) => void;
-}
-
-export type IProps = ICheckboxProps & InputHTMLAttributes<HTMLInputElement>
-
-export const Checkbox: FC<IProps> = (props: IProps) => {
-  const {
-    className,
-    onChange,
-    disabled = false,
-    error = false,
-    checked = false,
-  } = props
-  const [isChecked, setIsChecked] = useState<boolean>(checked)
-  const handleOnChange = () => {
-    const newCheckedValue = !isChecked
-    setIsChecked(newCheckedValue)
-    if(isDefined(onChange)){
-      onChange(newCheckedValue)
-    }
-  }
-
-  return (
-    <Wrapper
-      className={className}
-    >
-      <HiddenCheckbox
-        {...props}
-        tabIndex={getTabIndexValue(disabled)}
-        checked={isChecked}
-        disabled={disabled}
-        onChange={handleOnChange}
-        type='checkbox'
-      />
-      <CustomizedCheckbox
-        {...props}
-        data-testid='checkbox-id'
-        checked={isChecked}
-        disabled={disabled}
-        error={error}
-        onClick={handleOnChange}
-      >
-        {getCheckedIcon()}
-      </CustomizedCheckbox>
-    </Wrapper>
-  )
-}