@edvisor/product-language 0.10.2 → 0.10.4

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

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

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

package/src/lib/components/date-picker/components/custom-calendar.tsx

@@ -1,193 +0,0 @@
-import styled from 'styled-components'
-import { Calendar } from 'react-multi-date-picker'
-
-import { Interactive, Surface, Typography, Text, Padding, Margin, Actions } from '@foundations'
-
-/**
- * For a reasonable description of the class names etc,
- * @see https://shahabyazdi.github.io/react-multi-date-picker/classes-&-styles/
- */
-export const CustomCalendar = styled(Calendar)`
-  .rmdp-week-day {
-    ${Typography.Caption}
-    color: ${Text.Subdued};
-  }
-
-  .rmdp-header {
-    font-size: inherit;
-    line-height: inherit;
-    height: inherit;
-    margin-top: ${Margin.none};
-
-    .rmdp-header-values span {
-      ${Typography.Heading3}
-      color: ${Text.Default};
-    }
-
-    button {
-      background-color: ${Surface.Default.Default};
-      border: none;
-      cursor: pointer;
-    }
-  }
-
-  .rmdp-day-picker {
-    padding: ${Padding.none};
-  }
-
-  .rmdp-month-picker {
-    padding: ${Padding.none};
-  }
-
-  .rmdp-year-picker {
-    padding: ${Padding.none};
-  }
-
-  .rmdp-calendar {
-    padding: ${Padding.m};
-  }
-
-  .rmdp-day.rmdp-disabled {
-    border-radius: 6px;
-    background-color: ${Actions.Secondary.Disabled};
-    box-shadow: none;
-    ${Typography.Body}
-    color: ${Text.Light};
-
-    &:not(.rmdp-disabled):not(.rmdp-day-hidden):not(.start):not(.end):hover {
-      background-color: ${Actions.Secondary.Hover};
-    }
-
-    &:active {
-      background-color: ${Actions.Secondary.Disabled};
-    }
-
-    span {
-      background-color: unset;
-    }
-
-    &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
-      background-color: unset;
-      color: ${Text.Default};
-    }
-
-    &.rmdp-today {
-      border-radius: 6px;
-    }
-  }
-
-  .rmdp-day.rmdp-range {
-    border-radius: 0px;
-    background-color: ${Surface.Neutral.Subdued};
-    box-shadow: none;
-    ${Typography.Body}
-
-    margin-bottom: ${'1px'};
-
-    &:first-of-type {
-      border-radius: 6px 0 0 6px;
-    }
-
-    &:last-of-type {
-      border-radius: 0 6px 6px 0;
-    }
-
-    &:not(.rmdp-disabled):not(.rmdp-day-hidden):not(.start):not(.end):hover {
-      background-color: ${Actions.Secondary.Hover};
-    }
-
-    &:active {
-      background-color: ${Actions.Secondary.Pressed};
-    }
-
-    span {
-      background-color: unset;
-    }
-
-    &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
-      background-color: unset;
-      color: ${Text.Default};
-    }
-
-    &.rmdp-today {
-      border-radius: 6px;
-    }
-
-    &.start {
-      border-radius: 18px 0px 0px 18px;
-    }
-
-    &.end {
-      border-radius: 0px 18px 18px 0px;
-    }
-
-    &.start, &.end {
-      background-color: ${Interactive.Subtle.Default};
-      box-shadow: none;
-      ${Typography.Heading4}
-      color: ${Text.OnPrimary};
-
-      &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
-        background-color: unset;
-        color: ${Text.OnPrimary};
-      }
-
-      &:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
-        background-color: unset;
-        color: ${Text.OnPrimary};
-      }
-    }
-
-    &.rmdp-selected span:not(.highlight) {
-      background-color: inherit;
-      border-radius: none;
-      box-shadow: none;
-    }
-  }
-
-  .rmdp-day {
-    border-radius: 6px;
-    ${Typography.Body}
-
-    &:not(.rmdp-disabled):not(.rmdp-day-hidden):not(.start):not(.end):not(.rmdp-selected):hover {
-      background-color: ${Actions.Secondary.Hover};
-    }
-
-    &:active {
-      background-color: ${Actions.Secondary.Pressed};
-    }
-
-    span {
-      background-color: unset;
-    }
-
-    &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
-      background-color: unset;
-      color: ${Text.Default};
-    }
-
-    &.rmdp-selected {
-      background-color: ${Interactive.Subtle.Default};
-      border-radius: 6px;
-      box-shadow: none;
-      ${Typography.Heading4}
-      color: ${Text.OnPrimary};
-
-      &:not(.rmdp-disabled):not(.rmdp-day-hidden) span {
-        background-color: unset;
-        color: ${Text.OnPrimary};
-      }
-
-      &:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
-        background-color: unset;
-        color: ${Text.OnPrimary};
-      }
-    }
-
-    &.rmdp-selected span:not(.highlight) {
-      background-color: inherit;
-      border-radius: none;
-      box-shadow: none;
-    }
-  }
-`

package/src/lib/components/date-picker/components/index.ts

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

package/src/lib/components/date-picker/data-picker.test.tsx

@@ -1,220 +0,0 @@
-import { render, screen, within } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { isNil } from 'lodash'
-import { DatePicker } from './index'
-
-describe('DatePicker', () => {
-  describe('Controls', () => {
-    it('renders the controls you pass with the role button', () => {
-      render(
-        <DatePicker>
-          <DatePicker.Controls>
-            <div>Hello</div>
-          </DatePicker.Controls>
-        </DatePicker>
-      )
-
-      const controls = screen.getByRole('combobox')
-
-      expect(controls).toBeInTheDocument()
-      expect(within(controls).getByText('Hello')).toBeInTheDocument()
-    })
-
-    it('clicking the controls you pass in opens the Calendar', async () => {
-      render(
-        <DatePicker>
-          <DatePicker.Controls>
-            <div>Hello</div>
-          </DatePicker.Controls>
-        </DatePicker>
-      )
-
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-      await userEvent.click(screen.getByRole('combobox'))
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
-    })
-
-    it('calls the onClick you passed in to your controls', async () => {
-      const handleClick = jest.fn()
-
-      render(
-        <DatePicker>
-          <DatePicker.Controls>
-            <div onClick={handleClick}>Hello</div>
-          </DatePicker.Controls>
-        </DatePicker>
-      )
-
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-      await userEvent.click(screen.getByRole('combobox'))
-      expect(handleClick).toHaveBeenCalled()
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-    })
-
-    it('renders an input by default with the role button', () => {
-      render(<DatePicker label="Start Date" />)
-
-      expect(screen.getByLabelText('Start Date')).toBeInTheDocument()
-      expect(screen.getByRole('combobox')).toBeInTheDocument()
-    })
-
-    describe('the default controls', () => {
-      it('shows a placeholder when there is no value', () => {
-        render(<DatePicker label="Start Date" />)
-
-        expect(screen.getByLabelText('Start Date')).toHaveAttribute(
-          'placeholder',
-          'YYYY-MM-DD'
-        )
-      })
-
-      it('shows a value when there is a value', () => {
-        render(
-          <DatePicker
-            value="2022-12-03"
-            onChange={() => undefined}
-            label="Start Date"
-          />
-        )
-
-        expect(screen.getByLabelText('Start Date')).toHaveAttribute(
-          'value',
-          expect.stringMatching(/2022-12-(02|03|04)/)
-        )
-      })
-
-      it('formats the value with the given format string', () => {
-        const date = '2022-12-03'
-        const today = new Date(date)
-
-        /** formats dates like D/MM/YYYY */
-        const formatted = `${today.getDate()}/${
-          today.getMonth() + 1
-        }/${today.getFullYear()}`
-
-        render(
-          <DatePicker
-            value={date}
-            format="D/MM/YYYY"
-            onChange={() => undefined}
-            label="Start Date"
-          />
-        )
-
-        expect(screen.getByLabelText('Start Date')).toHaveAttribute(
-          'value',
-          formatted
-        )
-      })
-
-      it('formats the value with the given format function', () => {
-        const date = '2022-12-03'
-        const today = new Date(date)
-
-        /** formats dates like D/MM/YYYY */
-        const formatted = `${today.getDate()}/${
-          today.getMonth() + 1
-        }/${today.getFullYear()}`
-
-        render(
-          <DatePicker
-            value={date}
-            onChange={() => undefined}
-            format={({ date, defaultFormatter }) =>
-              isNil(date)
-                ? 'Next Available'
-                : `Date: ${defaultFormatter(date, 'D/MM/YYYY')}`
-            }
-            label="Start Date"
-          />
-        )
-
-        expect(screen.getByLabelText('Start Date')).toHaveAttribute(
-          'value',
-          `Date: ${formatted}`
-        )
-      })
-
-      test.todo('formats the value with a default')
-
-      it('opens the calendar on click', async () => {
-        render(<DatePicker />)
-
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-        expect(screen.queryByRole('combobox')).toBeInTheDocument()
-        await userEvent.click(screen.getByRole('combobox'))
-        expect(screen.queryByRole('dialog')).toBeInTheDocument()
-      })
-
-      test.todo('renders the given label')
-      test.todo('you can override the placeholder')
-      test.todo('you can mark the input required')
-      test.todo('you can mark the input disabled')
-
-      it('the input respects the required property', async () => {
-        render(
-          <form onSubmit={(e) => e.preventDefault()} data-testid="form">
-            <DatePicker label="Start Date" required />
-            <button type="submit">Click Me</button>
-          </form>
-        )
-
-        // it is initially empty
-        expect(screen.getByLabelText('Start Date*')).toHaveAttribute(
-          'value',
-          ''
-        )
-
-        // try to submit
-        await userEvent.click(screen.getByText('Click Me'))
-
-        // we can't
-        expect(document.querySelectorAll(':invalid').length).not.toBe(0)
-
-        // click to open the dialog
-        await userEvent.click(screen.getByLabelText('Start Date*'))
-
-        // click the date... 12
-        await userEvent.click(screen.getByText('12'))
-
-        // now the inpupt has a value
-        expect(screen.getByLabelText('Start Date*')).toHaveAttribute(
-          'value',
-          expect.stringContaining('12')
-        )
-
-        // try to submit again
-        await userEvent.click(screen.getByText('Click Me'))
-
-        // we can!
-        expect(document.querySelectorAll(':invalid').length).toBe(0)
-      })
-    })
-  })
-
-  it('renders a calendar when open', () => {
-    render(<DatePicker defaultOpen label="Start Date" />)
-
-    expect(screen.queryByRole('dialog')).toBeInTheDocument()
-  })
-
-  it('renders no calendar when closed', () => {
-    render(<DatePicker label="Start Date" />)
-
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
-  })
-
-  it('passes children to the Calendar', () => {
-    render(<DatePicker defaultOpen><div>WHOA</div></DatePicker>)
-
-    const calendar = screen.getByRole('dialog')
-    expect(within(calendar).getByText('WHOA')).toBeInTheDocument()
-  })
-
-  describe('Calendar', () => {
-    test.todo('disables dates in the given min and max range')
-    test.todo('disables dates when isAvailable is false for those dates')
-    test.todo('calls onChange when the selected date changes')
-  })
-})
-

package/src/lib/components/date-picker/date-picker.tsx

@@ -1,10 +0,0 @@
-import { FC, isDefined } from '@helpers'
-import { datePickerFactory, IDatePickerProps as IBaseProps, IDatePickerSlots } from './helpers/date-picker-factory'
-
-export type IDatePickerProps = IBaseProps<string>
-
-export const DatePicker: FC<IDatePickerProps, IDatePickerSlots> = datePickerFactory({
-  toDate: (str) => new Date(str),
-  fromDate: (date) => isDefined(date) ? date.toISOString() : '',
-  empty: (str) => str === '',
-})