@edvisor/product-language 0.10.2 → 0.10.3

package/src/lib/components/molecules/button/stories/button.stories.mdx

@@ -1,105 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Button } from '../index'
-import { IconMinor } from 'components/icon'
-import { PlainHTMLFormExample, DisabledLoadingExample } from './components'
-
-<Meta
-  title="Components/Button"
-  component={Button}
-/>
-
-# Button
-
-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 { Button } from './index'
-
-
-// Render the component sending the required parameters
-<Button primary label="SOME-label-HERE" />
-```
-
-## Properties 
-
-The Buttons accepts the same properties as a normal button and has some additional ones.
-
-The available optional properties are as follows, try them out in the editable code sample below!
-
-| Prop          | Type      | Description                                                              |
-| ----------    | --------- | ------------------------------------------------------------------------ |
-| `IconPrefix?`  | `Icon`  | It will add the given Icon before the text                                        |
-| `IconSuffix?`  | `Icon`  | It will add the given Icon after the text                                         |
-| `loading?`     | `boolean`  | Replaces the text for a loading icon |
-| `size?`    | `small / large` | Changes the size of the button. Leave it empty for the default size    |
-
-### Using as form controls 
-<PlainHTMLFormExample />
-
-### Disabled until something is typed then loading until response
-<DisabledLoadingExample />
-
-## Examples
-
-<Canvas>
-  <Button type="submit">Basic</Button>
-  <Button primary>Primary</Button>
-  <Button destructive>Destructive</Button>
-  <Button destructive primary>Destructive Primary</Button>
-  <Button outline>Outline</Button>
-  <Button plain>Plain</Button>
-  <Button plain subtle >Plain Subtle</Button>
-</Canvas>
-
-Disabled
-<Canvas>
-  <Button disabled>Basic</Button>
-  <Button primary disabled>Primary</Button>
-  <Button destructive disabled>Destructive</Button>
-  <Button destructive primary disabled>Destructive Primary</Button>
-  <Button outline disabled>Outline</Button>
-  <Button plain disabled>Plain</Button>
-  <Button plain subtle disabled>Plain Subtle</Button>
-</Canvas>
-
-Loading
-<Canvas>
-  <Button loading>Basic</Button>
-  <Button primary loading>Primary</Button>
-  <Button destructive loading>Destructive</Button>
-  <Button destructive primary loading>Destructive Primary</Button>
-  <Button outline loading>Outline</Button>
-  <Button plain loading>Plain</Button>
-  <Button plain subtle loading>Plain Subtle</Button>
-</Canvas>
-
-Icons
-<Canvas>
-  <Button IconPrefix={IconMinor.Fire}>Basic</Button>
-  <Button primary IconPrefix={IconMinor.Fire}>Primary</Button>
-  <Button destructive IconPrefix={IconMinor.Fire}>Destructive</Button>
-  <Button destructive primary IconPrefix={IconMinor.Fire}>Destructive Primary</Button>
-  <Button outline IconPrefix={IconMinor.Fire}>Outline</Button>
-  <Button plain IconPrefix={IconMinor.Fire}>Plain</Button>
-  <Button plain subtle IconPrefix={IconMinor.Fire}>Plain Subtle</Button>
-</Canvas>
-
-<Canvas>
-  <Button IconSuffix={IconMinor.Fire}>Basic</Button>
-  <Button primary IconSuffix={IconMinor.Fire}>Primary</Button>
-  <Button destructive IconSuffix={IconMinor.Fire}>Destructive</Button>
-  <Button destructive primary IconSuffix={IconMinor.Fire}>Destructive Primary</Button>
-  <Button outline IconSuffix={IconMinor.Fire}>Outline</Button>
-  <Button plain IconSuffix={IconMinor.Fire}>Plain</Button>
-  <Button plain subtle IconSuffix={IconMinor.Fire}>Plain Subtle</Button>
-</Canvas>
-
-<Canvas>
-  <Button large>Large</Button>
-  <Button>Default</Button>
-  <Button small>Small</Button>
-</Canvas>
-

package/src/lib/components/molecules/button/stories/components.tsx

@@ -1,90 +0,0 @@
-
-import { Margin } from '@foundations'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import styled from 'styled-components'
-import { InputField as InputFieldBase } from '../../../input-field'
-import { Button } from '../button'
-
-const InputField = styled(InputFieldBase)`
-  margin-bottom: ${Margin.xxs}
-`
-
-export const PlainHTMLFormExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [invalid, setInvalid] = useState(false);
-
-<form onSubmit={(e) => e.preventDefault()}>
-  <label htmlFor="country_code">Country code:</label>
-  <InputField 
-    type="text" 
-    placeholder="Enter a country code..."
-    id="country_code"
-    name="country_code"
-    pattern="[A-Za-z]{3}"
-    onInvalid={setInvalid}
-    invalid={invalid}
-    onChange={() => setInvalid(false)}
-    title="Three letter country code"
-    required
-  />
-  <div style={{display:'flex', gap:'8px'}}>
-    <Button type="reset">Clear</Button>
-    <Button primary type="submit">Send</Button>
-  </div>
-</form>  
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-        Button
-      },
-    }}
-  />
-)
-
-export const DisabledLoadingExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [invalid, setInvalid] = useState(false);
-const [disabled, setDisabled] = useState(true);
-const [loading, setLoading] = useState(false);
-
-<form onSubmit={(e) => {
-  e.preventDefault();
-  setLoading(true)
-  setTimeout(() => setLoading(false), 2000)
-}}>
-  <label htmlFor="country_code">Country code:</label>
-  <InputField 
-    type="text" 
-    placeholder="Enter a country code..."
-    id="country_code"
-    name="country_code"
-    pattern="[A-Za-z]{3}"
-    onInvalid={setInvalid}
-    invalid={invalid}
-    onChange={() => { 
-      setInvalid(false);
-      setDisabled(false); 
-    }}
-    title="Three letter country code"
-    required
-  />
-  <div style={{display:'flex', gap:'8px'}}>
-    <Button primary type="submit" disabled={disabled} loading={loading}>Send</Button>
-  </div>
-</form>  
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputField,
-        Button
-      },
-    }}
-  />
-)

package/src/lib/components/molecules/index.ts

@@ -1,3 +0,0 @@
-export * from './avatar'
-export * from './button'
-export * from './input-checkbox'

package/src/lib/components/molecules/input-checkbox/index.tsx

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

package/src/lib/components/molecules/input-checkbox/input-checkbox.test.tsx

@@ -1,34 +0,0 @@
-import {render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { InputCheckbox } from './input-checkbox'
-
-describe('InputCheckbox Tests', () => {
-  it('should render the component and handle event after click', async () => {
-    const spyOnChange = jest.fn()
-    render(
-      <InputCheckbox
-        label='My Checkbox'
-        onChange={spyOnChange}
-      />
-    )
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-    const myComponent = screen.getByRole('checkbox')
-    expect(screen.getByText('My Checkbox')).toBeInTheDocument()
-    expect(myComponent).toBeInTheDocument()
-
-    await userEvent.click(myComponent)
-
-    expect(spyOnChange).toHaveBeenCalled()
-  })
-  it('should not render the component if dont receive a label', async () => {
-    const { container } = render(
-      <InputCheckbox
-        label=''
-      />
-    )
-
-
-    expect(container).toBeEmptyDOMElement()
-  })
-})

package/src/lib/components/molecules/input-checkbox/input-checkbox.tsx

@@ -1,50 +0,0 @@
-import { InputHTMLAttributes } from 'react'
-import styled from 'styled-components'
-import { FC, isDefined, isEmpty, Nothing } from '@helpers'
-import { Margin } from '@foundations'
-import { Checkbox } from '../../checkbox'
-import { Label } from 'components/typography'
-
-const Text = styled(Label)`
-  margin-left: ${Margin.xs};
-  user-select: none;
-  flex: 1;
-`
-
-const Wrapper = styled.label`
-  display: flex;
-  width: 100%;
-  align-items: center;
-`
-
-export type IInputCheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
-  label: string
-  error?: boolean
-  onChange?: (change: boolean) => void
-}
-
-export const InputCheckbox: FC<IInputCheckboxProps> = (props) => {
-  const {
-    label = '',
-    onChange,
-  } = props
-
-  if (isEmpty(label)) {
-    return <Nothing />
-  }
-
-  return (
-    <Wrapper>
-      <Checkbox
-        {...props}
-        name={isDefined(props.name) ? props.name : label}
-        onChange={(e) => {
-          if (isDefined(onChange)) {
-            onChange(e.target.checked)
-          }
-        }}
-      />
-      <Text>{label}</Text>
-    </Wrapper>
-  )
-}

package/src/lib/components/molecules/input-checkbox/stories/components.tsx

@@ -1,53 +0,0 @@
-import { Playground } from 'storybook-addon-jarle-monaco'
-import styled from 'styled-components'
-import { Margin } from '@foundations'
-import { If } from '@helpers'
-import { Button } from 'components/molecules/button'
-import { Caption } from 'components/typography'
-import { InputCheckbox } from '../input-checkbox'
-
-const Fields = styled.div`
-  margin-bottom: ${Margin.s};
-`
-
-export const InputCheckboxExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [withError, setWithError] = useState(false);
-const [accepted, setAccepted] = useState(false);
-
-<form onSubmit={(e) => {
-    e.preventDefault()
-  }}
->
-  <Fields>
-    <InputCheckbox
-      onInvalid={(e) => {
-        setWithError(true)
-      }}
-      error={withError}
-      onChange={(e) => {
-        setAccepted(!accepted)
-        setWithError(false)
-      }}
-      label="I accept the terms."
-      required />
-    <If is={accepted}><Caption subdued>You have accepted the terms.</Caption></If>
-  </Fields>
-  <Button primary type="submit">Submit</Button>
-</form>
-`}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        InputCheckbox,
-        Caption,
-        Button,
-        If,
-        Fields,
-      },
-    }}
-  />
-)
-

package/src/lib/components/molecules/input-checkbox/stories/input-checkbox.stories.mdx

@@ -1,49 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { InputCheckbox } from '../input-checkbox'
-import { InputCheckboxExample } from './components'
-
-<Meta
-  title="Components/InputCheckbox"
-  component={InputCheckbox}
-/>
-
-# InputCheckbox
-
-This is a molecule, composed by the atoms checkbox input and typography as well.
-
-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 { InputCheckbox } from './index'
-
-
-// Render the component sending the required parameters
-<InputCheckbox label="MY-TEXT-HERE" />
-```
-
-## Examples
-
-<Canvas>
-  <InputCheckbox label="Burger" />
-  <InputCheckbox label="Fries" disabled />
-  <InputCheckbox label="Drink" error />
-</Canvas>
-
-
-## API
-You can send all the possible values from Checkbox component.
-Also, you can sen this parameters:
-
-
-| Name | Type | Description | Required (Y/N)|
-| ---- | ----- | ------ | ------- |
-| `label` | `string` | `The label from the checkbox` | `Y` |
-| `onChange` | `event` | `You can listen the changes from the component` | `N` |
-
-
-## Playground
-
-<InputCheckboxExample />

package/src/lib/components/organisms/choice-list/choice-list.test.tsx

@@ -1,36 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { ChoiceList } from './choice-list'
-
-describe('ChoiceList Tests', () => {
-  it('should render the amount of radio buttons matching with the options size', async () => {
-    render(
-      <ChoiceList options={[
-        {
-          label: 'My Awesome label',
-          value: '1',
-          id: 'My radio 1',
-          checked: true,
-        },
-        {
-          label: 'My Awesome label',
-          value: '2',
-          id: 'My radio 2'
-        }]}
-        selected={undefined}
-        onChange={() => undefined}
-      />
-    )
-
-    expect(screen.getAllByRole('radio').length).toBe(2)
-  })
-  it('should not render anything if dont send valid options', async () => {
-    render(
-      <ChoiceList
-        options={[]}
-        selected={undefined}
-        onChange={() => undefined}
-      />
-    )
-    expect(screen.queryAllByRole('radio').length).toBe(0)
-  })
-})

package/src/lib/components/organisms/choice-list/choice-list.tsx

@@ -1,72 +0,0 @@
-import { Margin } from '@foundations'
-import { defaultTo, FC } from '@helpers'
-import { RadioButton as RadioButtonBase } from 'components/radio-button'
-import { IOption } from 'components/select/types'
-import styled from 'styled-components'
-
-const Container = styled.div`
-  div:last-child {
-    margin-bottom: ${Margin.none};
-  }
-`
-
-const RadioButton = styled(RadioButtonBase)`
-  margin-bottom: ${Margin.xxs};
-`
-
-export interface IOptionGroup {
-  selected: unknown
-  options: IOption[]
-  onChange: (value: string) => void
-  name?: string
-}
-
-interface IRadioGroupProps {
-  options: IOption[]
-  selected: unknown
-  name?: string
-  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-}
-
-const RadioGroup = (props: IRadioGroupProps) => {
-  return (
-    <>
-      {
-        props.options.map((option: IOption, index: number) => {
-          const shortenedOptionLabel = defaultTo(props.name, '').replace(/\s+/g, '')
-          const optionId = `radio-option-${index}-${shortenedOptionLabel}`
-
-          return (
-            <RadioButton
-              value={option.value}
-              label={option.label}
-              key={optionId}
-              id={optionId}
-              name={props.name}
-              disabled={option.disabled}
-              checked={option.value === props.selected}
-              onChange={props.handleChange}
-            />
-          )
-        })
-      }
-    </>
-  )
-}
-
-export const ChoiceList: FC<IOptionGroup> = (props: IOptionGroup) => {
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    props.onChange(event.target.value)
-  }
-
-  return (
-    <Container>
-      <RadioGroup
-        options={props.options}
-        selected={props.selected}
-        name={props.name}
-        handleChange={handleChange}
-      />
-    </Container>
-  )
-}

package/src/lib/components/organisms/choice-list/index.tsx

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

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

@@ -1,57 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { ChoiceList } from '../choice-list'
-import {
-  PlainHTMLFormExample,
-} from './components'
-
-<Meta
-  title="Components/ChoiceList"
-  component={ChoiceList}
-/>
-
-# ChoiceList
-
-This is a organism, composed by radio button 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=734%3A7377&t=pe4mhKIwje5ozRJp-0)
-
-## How to use
-
-```javascript
-// Import the component
-import { ChoiceList } from './index'
-
-const [selected, setSelected] = useState('')
-const handleChange = (value: string) => setSelected(value)
-const options = [
-  {
-    label: 'My Awesome label',
-    value: '1'
-    id: '1',
-  }
-]
-
-// Render the component sending the required parameters
-<ChoiceList
-  options={options}
-  onChange={handleChange}
-  selected={selectedState}
-/>
-```
-## Examples
-
-<PlainHTMLFormExample />
-
-
-## API
-This component receive a list (`options` parameter) from N amount of Radio Buttons if you'd like to render.
-So all the possible values from Radio Buttons component can be passed here.
-Also, you can sen this parameters:
-
-| Name | Type | Description | Required (Y/N)|
-| ---- | ----- | ------ | ----- |
-| `options` | `IOption[]` | `The items that are going to be rendered inside the list` | `Y` |
-| `onChange` | `function` | `Function that will return the value of the option that was chosen` | `Y` |
-| `selected` | `string` | `Variable that contains the value of the selected item` | `Y` |
-| `name` | `string` | `The name that will represent the group of radios, in order to render more instances and they not affect each other` | `N` |
-

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

@@ -1,45 +0,0 @@
-import { Playground } from 'storybook-addon-jarle-monaco'
-import styled from 'styled-components'
-import { ChoiceList as Base } from '../choice-list'
-
-const ChoiceList = styled(Base)``
-
-export const PlainHTMLFormExample = () => (
-  <Playground
-    code={`
-const [ selected, setSelected ] = useState('')
-const values = [
-  {
-    label: 'Item 1',
-    value: 'ITEM_1',
-  },
-  {
-    label: 'Item 2',
-    value: 'ITEM_2',
-  },
-  {
-    label: 'Item 3',
-    value: 'ITEM_3',
-  },
-];
-const handleChange = (value: string) => {
-  setSelected(value)
-}
-
-<>
-  <ChoiceList
-    label="Select Type:"
-    options={values}
-    selected={selected}
-    onChange={handleChange}
-  />
-</>
-`}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        ChoiceList,
-      },
-    }}
-  />
-)

package/src/lib/components/organisms/index.ts

@@ -1,2 +0,0 @@
-export * from './multi-choice-list'
-export * from './choice-list'

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

@@ -1 +0,0 @@
-export * from './multi-choice-list'

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

@@ -1,33 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { MultiChoiceList } from './multi-choice-list'
-
-describe('MultiChoiceList Tests', () => {
-  it('should render the amount of checkbox matching with the options size', async () => {
-    render(
-      <MultiChoiceList options={[
-        {
-          label: 'My Awesome label',
-          id: 'My checkbox 1',
-          checked: true,
-          error: true,
-          helpfulMessage: 'Alternative text here',
-        },
-        {
-          label: 'My Awesome label',
-          id: 'My checkbox 2'
-        },
-      ]}
-      />
-    )
-
-    expect(screen.getByText('Alternative text here')).toBeInTheDocument()
-    expect(screen.getAllByRole('checkbox').length).toBe(2)
-  })
-  it('should not render anything if dont send valid options', async () => {
-    render(
-      <MultiChoiceList options={[]}
-      />
-    )
-    expect(screen.queryAllByRole('checkbox').length).toBe(0)
-  })
-})