@edvisor/product-language 0.9.0 → 0.10.2

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)
+        }
+      }}
+    />
+  )
+}

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

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

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

package/src/lib/components/checkbox/stories/checkbox.stories.mdx

@@ -0,0 +1,57 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Checkbox } from '../checkbox'
+import { IntegratedExample, CheckboxExample, LimitationsExample } from './components'
+
+<Meta
+  title="Components/Checkbox"
+  component={Checkbox}
+/>
+
+# Checkbox
+
+Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have users indicate they agree to specific terms and services.
+
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1008%3A1257)
+
+## How to use
+
+```tsx
+import { Checkbox } from './index'
+
+<Checkbox />
+```
+
+### Typical Usage
+
+Checkbox is "drop-in" compatible with an html input checkbox.
+
+<IntegratedExample />
+
+### Modifiers
+
+Control the appearance of the checkbox with its modifiers.
+
+<CheckboxExample />
+
+## API
+
+Extends `HTMLAttributes<HTMLInputElement>`
+
+| Name        | Type      | Description                                                         |
+| ----------- | --------- | ------------------------------------------------------------------- |
+| `checked?`  | `boolean` | Set checkbox as filled                                              |
+| `disabled?` | `boolean` | Set checkbox as a disabled way (can't click or interact with that)  |
+| `error?`    | `boolean` | Useful to work inside a form or show some feedback from user action |
+| `onChange?` | `event`   | You can listen the changes from the component                       |
+
+## Changelog
+
+### [0.1.0]
+ - replace the checkbox implementation with an input type=checkbox styled to look like what we need
+
+### [0.0.1]
+ - update checkbox to behave more like html input with type='checkbox'
+
+### [0.0.0]
+ - Offer the "indeterminate" style
+ - Get feedback from the component usage (we can migrate to just rendering with css pseudo elements if necessary)

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

@@ -0,0 +1,84 @@
+import { Margin, } from '@foundations'
+import { If } from '@helpers'
+import { Button } from 'components/molecules/button'
+import { Caption, Label } from 'components/typography'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import styled from 'styled-components'
+import { Checkbox as Base } from '../checkbox'
+
+const Checkbox = styled(Base)`
+  display: inline-block;
+`
+
+export const CheckboxExample = () => (
+  <Playground
+    code={`
+<>
+  <Checkbox />
+  <Checkbox checked readOnly />
+  <Checkbox disabled />
+  <Checkbox checked disabled readOnly />
+  <Checkbox error />
+  <Checkbox checked error readOnly />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Checkbox,
+      },
+    }}
+  />
+)
+
+const Fields = styled.div`
+  margin-bottom: ${Margin.s};
+`
+
+export const IntegratedExample = () => (
+  <Playground
+    code={`
+/* Edit this code sample! */
+const [withError, setWithError] = useState(false);
+const [accepted, setAccepted] = useState(false);
+
+<form onSubmit={(e) => {
+    e.preventDefault()
+  }}
+>
+  <Fields>
+    {/* try replacing Checkbox with input */}
+    <Checkbox
+      id="accept_terms"
+      type="checkbox"
+      checked={accepted}
+      onInvalid={(e) => {
+        setWithError(true)
+      }}
+      error={withError}
+      onChange={(e) => {
+        setAccepted(!accepted)
+        setWithError(false)
+      }}
+      required 
+    />
+    <label htmlFor="accept_terms"><Label as='span'>I accept these terms.</Label></label>
+    <If is={accepted}><Caption subdued>You have accepted the terms.</Caption></If>
+  </Fields>
+  <Button type='button' onClick={() => setAccepted(false)}>Clear</Button>
+  <Button primary type="submit">Submit</Button>
+</form>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Checkbox,
+        Caption,
+        Button,
+        If,
+        Label,
+        Fields,
+      },
+    }}
+  />
+)