@edvisor/product-language 0.1.0

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 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

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

@@ -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,124 @@
+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>
+  )
+}

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

@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components'
+import { Padding, Surface, Borders, Actions } from '@foundations'
+
+interface ICheckedProps {
+  checked: boolean;
+}
+
+export const getHoverStyles = () => css`
+  background: ${Surface.Default.Hover};
+`
+
+export const getDisabledStyles = () => css`
+  pointer-events: none;
+  background: ${(props: ICheckedProps) => (props.checked === true ? `${Borders.Default.Default}`: `${Surface.Default.Subdued}` )};
+  border-color: ${Borders.Default.Default};
+`
+
+export const getInvalidStyles = () => css`
+  background: ${(props: ICheckedProps) => (props.checked === true ? `${Actions.Critical.Default}`: `${Surface.Critical.Subdued}`)};
+  border: 2px solid ${Borders.Critical.Default};
+`
+
+export const HiddenCheckbox = styled.input`
+  border: 0;
+  clip: rect(0 0 0 0);
+  clippath: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: ${Padding.none};
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`
+
+export const Icon = styled.svg`
+  width: 100%;
+  height: 50%;
+`
+
+export const Wrapper = styled.div`
+  width: 18px;
+  height: 100%;
+`
+
+export const getTabIndexValue = (
+  disabled: boolean
+): number => {
+  return disabled ? -1 : 0
+}
+
+export const getCheckedIcon = () => (
+  <Icon width="10" height="8" 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"
+    />
+  </Icon>
+)

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,54 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Checkbox } from '../index'
+import { PlainHTMLFormExample } from './index'
+
+<Meta
+  title="Components/Checkbox"
+  component={Checkbox}
+/>
+
+# Checkbox
+
+This is an atom.
+
+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
+
+```javascript
+// Import the component
+import { Checkbox } from './index'
+
+
+// Render the component sending the required parameters
+<Checkbox />
+```
+
+## Examples
+
+<Canvas>
+  <Checkbox onChange={(e) => console.log('at stories', e)} />
+  <Checkbox disabled />
+  <Checkbox error />
+  <Checkbox checked />
+  <Checkbox error checked />
+</Canvas>
+
+
+## API
+
+| Name | Type | Description | Required (Y/N)|
+| ---- | ----- | ------ | ------- |
+| `checked` | `boolean` | `Set checkbox as filled` | `N` |
+| `disabled` | `boolean` | `Set checkbox as a disabled way (can't click or interact with that)` | `N` |
+| `error` | `boolean` | `Useful to work inside a form or show some feedback from user action` | `N` |
+| `onChange` | `event` | `You can listen the changes from the component` | `N` |
+
+
+## Playground
+
+<PlainHTMLFormExample />
+
+## Changelog
+ - 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,36 @@
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { Checkbox } from '../checkbox'
+
+export const PlainHTMLFormExample = () => (
+  <Playground
+    code={`
+/* Edit this code sample! */
+const [withError, setWithError] = useState(false);
+
+<form onSubmit={(e) => {
+    e.preventDefault()
+    console.log('form submitted')
+  }}
+>
+  <label htmlFor="accept_terms">Accept the terms:</label>
+  <Checkbox
+    onInvalid={(e) => {
+      setWithError(true)
+    }}
+    error={withError}
+    onChange={(e) => {
+      console.log('at stories', e)
+      setWithError(false)
+    }}
+    required />
+  <input type="submit"/>
+</form>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Checkbox,
+      },
+    }}
+  />
+)

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

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

package/src/lib/components/divider/divider-type-flags.tsx

@@ -0,0 +1,37 @@
+// this file was generated, but it is safe to modify
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+import { Borders } from '@foundations'
+
+const enum DividerType {
+  default = 1,
+  subdued = 2,
+}
+
+type DividerTypes<T> = MappedEnum<typeof DividerType, T>
+
+function toDividerType(n: number): DividerType {
+  switch (n) {
+    case DividerType.default:
+      return DividerType.default
+    case DividerType.subdued:
+      return DividerType.subdued
+    default:
+      return DividerType.default
+  }
+}
+
+const DividerTypeColor = {
+  [DividerType.default]: Borders.Default.Default,
+  [DividerType.subdued]: Borders.Default.Subdued,
+}
+
+export type DivideTypeProps = Partial<RequireOnlyOne<DividerTypes<boolean>>> &
+  PropsWithChildren
+
+export function getColor(props: DivideTypeProps): string {
+  return DividerTypeColor[
+    toDividerType(
+      bitwiseOr([props.default, props.subdued])
+    )
+  ]
+}