npm - @edvisor/product-language - Versions diffs - 0.5.7 → 0.7.0-rc1 - Mend

@edvisor/product-language 0.5.7 → 0.7.0-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (356) hide show

package/src/lib/components/organisms/multi-choice-list/multi-choice-list.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+import styled from 'styled-components'
+import { FC, isDefined, isEmpty, Nothing } from '@helpers'
+import { Margin } from '@foundations'
+import { Flex } from 'components/layout'
+import { Label } from 'components/typography'
+import { IInputCheckboxProps, InputCheckbox } from 'components/molecules/input-checkbox'
+const HelpfulMessage = styled(Label)`
+  margin-top: ${Margin.xxs};
+  margin-left: ${Margin.xl};
+  user-select: none;
+`
+const Group = styled(Flex)`
+  width: 100%;
+  flex-direction: column;
+  gap: 18px;
+`
+interface IOption extends IInputCheckboxProps {
+  helpfulMessage?: string
+}
+interface IMultiChoiceList {
+  options: IOption[]
+  className?: string
+}
+export const MultiChoiceList: FC<IMultiChoiceList> = (props: IMultiChoiceList) => {
+  const { options, className = '' } = props
+  if (isEmpty(options)) {
+    return <Nothing />
+  }
+  return (
+    <Group role="group" className={className}>
+      {options.map((option:IOption) => (
+        <div key={option.id}>
+          <InputCheckbox
+            aria-describedby={isDefined(option.helpfulMessage)
+              ? `${option.id}-id`
+              : ''
+            }
+            {...option}
+          />
+          {isDefined(option.helpfulMessage) && (
+            <HelpfulMessage subdued id={`${option.id}-id`}>
+              {option.helpfulMessage}
+            </HelpfulMessage>
+          )}
+        </div>
+      ))}
+    </Group>
+  )
+}

package/src/lib/components/organisms/multi-choice-list/stories/components.tsx ADDED Viewed

@@ -0,0 +1,124 @@
+import { Body, Heading4 } from '@components'
+import { isDefined } from '@helpers'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { MultiChoiceList } from '../index'
+export const PlainHTMLFormExample = () => (
+  <Playground
+    code={`
+/* Edit this code sample! */
+const [withError, setWithError] = useState(false);
+<form onSubmit={(e) => {
+    e.preventDefault()
+  }}
+>
+  <MultiChoiceList options={[
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 1',
+      required: true,
+      error: withError,
+      helpfulMessage: 'Alternative text here',
+      onInvalid: function(e){
+        setWithError(true);
+      },
+      onChange: function(e){
+        setWithError(false);
+      }
+    },
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 2',
+      helpfulMessage: 'Alternative text here',
+    },
+  ]}
+  />
+  <input type="submit"/>
+</form>
+`}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        MultiChoiceList,
+      },
+    }}
+  />
+)
+export const ExampleWithStateManagement = () => (
+  <Playground
+    code={`
+/* Edit this code sample! */
+const Locations = [
+  {
+    label: "Vancouver, BC",
+    id: 1,
+  },
+  {
+    label: "Toronto, ON",
+    id: 2,
+  },
+  {
+    label: "Quebec, QC",
+    id: 3,
+  },
+  {
+    label: "Montreal, QC",
+    id: 4,
+  },
+];
+const [locations, setLocations] = useState([]);
+const [withError, setWithError] = useState(false);
+const options = Locations.map((location) => {
+  return {
+    ...location,
+    checked: isDefined(locations.find((l) => l.id === location.id)),
+    onChange: (checked) => {
+      if (checked) {
+        setLocations([
+          ...locations,
+          location,
+        ])
+      } else {
+        const i = locations.findIndex((l) => l.id === location.id)
+        locations.splice(i, 1)
+        setLocations([
+          ...locations
+        ])
+      }
+    }
+  }
+});
+<>
+  <form onSubmit={(e) => {
+      e.preventDefault()
+    }}
+  >
+    <MultiChoiceList options={options}
+    />
+    <input type="submit"/>
+  </form>
+  <div>
+    <Heading4>Your Selection</Heading4>
+    {locations.map((location) => {
+      return (
+        <Body key={location.id}>{location.label}</Body>
+      )
+    })}
+  </div>
+</>
+`}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        MultiChoiceList,
+        Heading4,
+        Body,
+        isDefined,
+      },
+    }}
+  />
+)

package/src/lib/components/organisms/multi-choice-list/stories/multi-choice-list.stories.mdx ADDED Viewed

@@ -0,0 +1,99 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { MultiChoiceList } from '../multi-choice-list'
+import { PlainHTMLFormExample, ExampleWithStateManagement } from './components'
+<Meta
+  title="Components/MultiChoiceList"
+  component={MultiChoiceList}
+/>
+# MultiChoiceList
+This is a organism, composed by checkbox molecule and some atoms.
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1097%3A2349)
+## How to use
+```javascript
+// Import the component
+import { MultiChoiceList } from './index'
+// Render the component sending the required parameters
+<MultiChoiceList options={[
+  {
+    label: 'My Awesome label',
+    checked: true,
+    id: '1',
+  }]
+/>
+```
+## Examples
+<Canvas>
+  <MultiChoiceList options={[
+    {
+      label: "My Awesome label",
+      defaultChecked: true,
+      id: '1',
+    },
+    {
+      label: "My label",
+      id: '2',
+    },
+    {
+      label: "My label",
+      id: '3',
+    },
+    {
+      label: "My label",
+      id: '4',
+    },
+  ]}/>
+</Canvas>
+Also, you can send the altive text in order to helping user
+<Canvas>
+  <MultiChoiceList options={[
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 1',
+      defaultChecked: true,
+      error: true,
+      helpfulMessage: 'Alternative text here',
+    },
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 2',
+      helpfulMessage: 'Alternative text here',
+    },
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 3',
+      helpfulMessage: 'Alternative text here',
+    }
+  ]}/>
+</Canvas>
+## API
+This component receive a list (`options` parameter) from N amount of Checkbox if you'd like to render.
+So all the possible values from Checkbox component can be passed here.
+Also, you can sen this parameters:
+| Name | Type | Description | Required (Y/N)|
+| ---- | ----- | ------ | ----- |
+| `id` | `string` | `The id from each checkbox in the list` | `Y` |
+| `helpfulMessage` | `string` | `Message that will be render bellow each checkbox field` | `N` |
+## Playground
+<PlainHTMLFormExample />
+### With State Management Example
+<ExampleWithStateManagement />
+## Changelog
+ - Offer the "indeterminate" behavior to render this list nesting

package/{lib/components/spinner/index.d.ts → src/lib/components/radio-button/index.tsx} RENAMED Viewed

	@@ -1 +1 @@
1	- export * from './~~spinner~~';
1	+ export * from './radio-button'

package/src/lib/components/radio-button/radio-button.tsx ADDED Viewed

@@ -0,0 +1,135 @@
+import { InputHTMLAttributes } from 'react'
+import styled from 'styled-components'
+import {
+  Margin,
+  Padding,
+  Focused,
+  Borders,
+  Icons,
+  Surface,
+  Typography
+} from '@foundations'
+import { FC, is } from '@helpers'
+export const Radio = styled.input`
+  -webkit-appearance: none;
+  appearance: none;
+  margin: ${Margin.none};
+  width: 1.5em;
+  height: 1.5em;
+  border: 2px solid ${Borders.Default.Dark};
+  border-radius: 50%;
+  transition: all 0.1s ease-in-out;
+  cursor: pointer;
+  ::after {
+    content: "";
+    display: block;
+    border-radius: 50%;
+    width: 0.75em;
+    height: 0.75em;
+    margin: ${3}px;
+  }
+  :checked {
+    border-color: ${Borders.Highlight.Default};
+    ::after {
+      background-color: ${Icons.Highlight};
+    }
+    :hover {
+      background-color: ${Surface.Default.Default};
+      border: 2px solid ${Icons.Highlight};
+      ::after {
+        background-color: ${Icons.Highlight};
+      }
+    }
+  }
+  :hover {
+    ::after {
+      background-color: ${Focused.Default};
+    }
+  }
+  :focus {
+    outline: 2px auto ${Focused.Default};
+    outline-offset: 4px;
+  }
+  :disabled {
+    cursor: not-allowed;
+    border: 2px solid ${Borders.Default.Default};
+    background-color: ${Surface.Default.Default};
+    :hover {
+      ::after {
+        background-color: ${Surface.Default.Default};
+      }
+    }
+    :checked {
+      ::after {
+        background-color: ${Borders.Default.Default};
+      }
+      :hover {
+        border-color: ${Borders.Default.Default};
+        background-color: ${Surface.Default.Default};
+        ::after {
+          background-color: ${Borders.Default.Default};
+        }
+      }
+    }
+  }
+`
+const Label = styled.label<{disabled: boolean}>`
+  ${Typography.Label}
+  padding: ${Padding.xxs} ${Padding.none};
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  cursor: ${(props) => is(props.disabled) ? 'not-allowed' : 'pointer'};
+`
+const LabelText = styled.span`
+  margin-left: ${Margin.xs};
+`
+export interface InputElementProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  id: string;
+  key?: string;
+  disabled?: boolean;
+}
+interface IRadioProps {
+  label?: string
+  disabled?: boolean
+  checked?: boolean
+  className?: string
+}
+type IProps = IRadioProps & InputHTMLAttributes<HTMLInputElement>
+export const RadioButton: FC<InputElementProps> = (props: IProps) => {
+  const {
+    className,
+    label,
+    disabled,
+    ...htmlProps
+  } = props
+  return (
+    <Label
+      disabled={is(disabled)}
+      className={className}
+    >
+      <Radio
+        type="radio"
+        disabled={disabled}
+        {...htmlProps}
+      />
+      <LabelText>
+        {label}
+      </LabelText>
+    </Label>
+  )
+}

package/src/lib/components/radio-button/radio.test.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { RadioButton } from './radio-button'
+describe('RadioButton Input Tests', () => {
+  const option = {
+    id: '1',
+    label: 'Canada',
+    value: 'CA'
+  }
+  it('should render the radio button and handle event after click', async () => {
+    const spyOnChange = jest.fn()
+    render(
+      <RadioButton
+        onChange={spyOnChange}
+        label={option.label}
+        value={option.value}
+        id={option.id}
+      />
+    )
+    expect(spyOnChange).not.toHaveBeenCalled()
+    const myComponent = screen.getByRole('radio')
+    expect(myComponent).toBeInTheDocument()
+    await userEvent.click(myComponent)
+    expect(spyOnChange).toHaveBeenCalled()
+    expect(spyOnChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({
+          value: 'CA',
+          id: '1'
+        })
+      })
+    )
+  })
+  it('should not handle event after click if radio button has disabled', async () => {
+    const spyOnChange = jest.fn()
+    render(
+      <RadioButton
+        disabled
+        onChange={spyOnChange}
+        label={''}
+        id={''}
+      />
+    )
+    expect(spyOnChange).not.toHaveBeenCalled()
+    const myComponent = screen.getByRole('radio')
+    userEvent.click(myComponent)
+    expect(spyOnChange).not.toHaveBeenCalled()
+  })
+})

package/src/lib/components/radio-button/stories/components.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { RadioButton as Radio } from '../radio-button'
+export const RadioExample = () => (
+  <Playground
+    code={`<>
+  <Radio />
+  <Radio checked readOnly/>
+  <Radio disabled />
+  <Radio checked disabled readOnly/>
+</>`}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Radio,
+      },
+    }}
+  />
+)
+export const RadioExampleWithLabels = () => (
+  <Playground
+    code={`<>
+  <Radio label='Option 1' />
+  <Radio label='Option 2' checked readOnly/>
+  <Radio label='Option 3' disabled />
+  <Radio label='Option 4' checked disabled readOnly/>
+</>`}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Radio,
+      },
+    }}
+  />
+)

package/src/lib/components/radio-button/stories/radio-button.stories.mdx ADDED Viewed

@@ -0,0 +1,44 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { RadioExample, RadioExampleWithLabels } from './components'
+import { RadioButton } from '../index'
+<Meta
+  title="Components/RadioButton"
+  component={RadioButton}
+/>
+# RadioButton
+RadioButton are most commonly used to give users a way to make a single selection in a range of options.
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7377&t=pe4mhKIwje5ozRJp-0)
+## How to use
+```tsx
+import { RadioButton } from '@edvisor/product-language'
+<RadioButton />
+```
+### Typical Usage
+RadioButton is "drop-in" compatible with an html input radio.
+<RadioExample />
+### With Labels
+<RadioExampleWithLabels />
+## API
+Extends `HTMLAttributes<HTMLInputElement>`
+| Name        | Type      | Description                                                             |
+| ----------- | --------- | ----------------------------------------------------------------------- |
+| `checked?`  | `boolean` | Set radio button as filled (only one can be filled)                     |
+| `disabled?` | `boolean` | Set radio button as a disabled way (can't click or interact with that)  |
+| `onChange?` | `event`   | You can listen the changes from the component                           |

package/src/lib/components/range-slider/components/bar-chart.tsx ADDED Viewed

@@ -0,0 +1,50 @@
+import { FC, isDefined } from '@helpers'
+import { BarChart, Bar, ResponsiveContainer } from 'recharts'
+import { Surface } from '@foundations'
+interface IProps {
+  data: number[]
+  highlight: number[]
+  domain: number[]
+}
+const getChartData = (data: number[], highlight: number[]) => {
+  const occurrences = data.reduce<number[]>((_data: number[], current: number) => {
+    return (
+      isDefined(_data[current-1])
+        ? ++_data[current-1]
+        : (_data[current-1] = 1), _data)
+  }, [])
+  return occurrences.map((occurrence, index) => {
+    return {
+      value: index,
+      occurrences: occurrence,
+      fill: (index + 1) >= highlight[0] && index <= highlight[1]
+        ? Surface.Selected.Hover
+        : Surface.Neutral.Subdued
+    }
+  })
+}
+export const BarChartComponent: FC<IProps> = (props) => {
+  const {
+    data,
+    highlight,
+  } = props
+  const chartData = getChartData(data, highlight)
+  return (
+    <ResponsiveContainer height='100%' width='100%'>
+      <BarChart
+        data={chartData}
+        margin={{ top: 0, right: 1, bottom: 0, left: 1 }}
+        barCategoryGap={'5%'}
+      >
+        <Bar dataKey="occurrences" />
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}

package/src/lib/components/range-slider/components/handle.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+import { CSSProperties, memo } from 'react'
+import styled from 'styled-components'
+import { FC } from '@helpers'
+import { Actions } from '@foundations'
+import { GetHandleProps, SliderItem } from 'react-compound-slider'
+const HandleContainer = styled.div<{left: number, thumbHeight: number}>`
+  background-color: ${Actions.Primary.Default};
+  margin-left: -6px;
+  margin-top: -6px;
+  width: ${({thumbHeight}) => thumbHeight}px;
+  height: ${({thumbHeight}) => thumbHeight}px;
+  border: 0;
+  border-radius: 50%;
+  white-space: nowrap;
+  position: absolute;
+  z-index: 2;
+  cursor: pointer;
+  left: ${({left}) => `${left}%`};
+`
+interface IHandleComponent {
+  domain: number[]
+  handle: SliderItem
+  classes?: CSSProperties
+  thumbHeight: number
+  getHandleProps: GetHandleProps
+}
+export const HandleComponent: FC<IHandleComponent> = memo((props) => {
+  const {
+    domain,
+    handle,
+    thumbHeight,
+    getHandleProps
+  } = props
+  const [min, max] = domain
+  return (
+    <HandleContainer
+      left={handle.percent}
+      thumbHeight={thumbHeight}
+      role="slider"
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={handle.value}
+      {...getHandleProps(handle.id)}
+    />
+  )
+}, arePropsEqual)
+function arePropsEqual(oldProps: IHandleComponent, newProps: IHandleComponent) {
+  return  oldProps.handle.value === newProps.handle.value
+    && oldProps.handle.percent === newProps.handle.percent
+}

package/src/lib/components/range-slider/components/rail.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import { memo, Fragment } from 'react'
+import { FC } from '@helpers'
+import { Surface } from '@foundations'
+import styled from 'styled-components'
+import { GetRailProps } from 'react-compound-slider'
+interface IRailComponent {
+  getRailProps: GetRailProps
+  trackHeight: number
+  thumbHeight: number
+}
+const RailContainer = styled.div<{trackHeight: number}>`
+  background-color: ${Surface.Neutral.Default};
+  width: 100%;
+  height: ${({trackHeight}) => trackHeight}px;
+  position: absolute;
+  pointer-events: none;
+  border-radius: 2px;
+`
+const RailHotSpot = styled.div<{thumbHeight: number}>`
+  width: 100%;
+  height: ${({thumbHeight}) => thumbHeight * 2}px;
+  top: ${({thumbHeight}) => thumbHeight * -1}px;
+  position: absolute;
+  cursor: pointer;
+`
+export const RailComponent: FC<IRailComponent> = memo((props) => {
+  const {
+    trackHeight,
+    thumbHeight,
+    getRailProps
+  } = props
+  return (
+    <Fragment>
+      <RailHotSpot thumbHeight={thumbHeight} {...getRailProps()} />
+      <RailContainer trackHeight={trackHeight} />
+    </Fragment>
+  )
+})