@edvisor/product-language 0.5.7 → 0.7.0-rc1

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+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 === '',
+})