@edvisor/product-language 0.3.0 → 0.4.0

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

@@ -1,214 +0,0 @@
-import styled from 'styled-components'
-import { FC, is, isDefined, Nothing } from '@helpers'
-import { Focused } from '@foundations'
-import {
-  ButtonSizeProps,
-  getBackgroundColorByType,
-  getIsDisabled,
-  getTextColorByType,
-  getIconColorByType,
-  getTextColorIfDisabled,
-  getCursor,
-  getPaddingBySize,
-  getBackgroundColorHoverByType,
-  getTextDecorationHoverByType,
-  getTextColorOnHoverByType,
-  getIconColorOnHoverByType,
-  getBorderByType,
-  getPaddingByType,
-  getBackgroundColorDisabledByType,
-  getBorderDisabledByType,
-  ButtonType,
-  getBackgroundColorPressedByType,
-  getButtonType,
-  ButtonTypeProps,
-} from './button-flags'
-import { ComponentType } from 'react'
-import { Label } from 'components/typography'
-import { Spinner } from 'components/spinner'
-
-const ButtonFrame = styled.button<{
-  backgroundColor: string
-  buttonSize: string
-  cursor: string
-  backgroundHover: string
-  textDecorationHover: string,
-  backgroundPressed: string
-  textColorHover: string
-  buttonBorder: string
-  isDisabled: boolean
-  iconColor: string
-  iconColorHover: string
-}>`
-  padding: ${(props) => props.buttonSize};
-  border: ${(props) => props.buttonBorder};
-  border-radius: 6px;
-  background: ${(props) => props.backgroundColor};
-  cursor: ${(props) => props.cursor};
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 8px;
-  align-items: center;
-  position: relative;
-  svg[role='icon'] {
-    path {
-      fill: ${(props) => props.iconColor};
-    }
-  }
-  
-
-  ${(props) =>
-    !props.isDisabled
-      ? `
-    &:hover {
-      background: ${props.backgroundHover};
-      text-decoration:  ${props.textDecorationHover};
-      div {
-        color: ${props.textColorHover};
-      }
-      svg[role='icon'] {
-        path {
-          fill: ${props.iconColorHover};
-        }
-      }
-    }
-
-    &:focus  {
-      outline: 2px solid ${Focused.Default}
-    }
-
-    &:focus-visible  {
-      border: 2px solid ${Focused.Default}
-    }
-
-    &:active {
-      text-decoration: 'none'
-      background: ${props.backgroundPressed}
-    }
-  `
-      : ''}
-`
-
-const ButtonText = styled(Label)<{ textColor: string, textColorDisabled: string, isLoading: boolean }>`
-  color: ${(props) =>
-    props.textColorDisabled !== '' ? props.textColorDisabled : props.textColor};
-
-  ${(props) =>
-    props.isLoading
-      ? `
-    opacity: 0;
-  `
-      : ''}
-`
-
-const IconContainer = styled.div<{ isLoading: boolean }>`
-  width: 20px;
-  ${(props) =>
-    props.isLoading
-      ? 'visibility: hidden;'
-      : ''
-  }
-`
-
-const Loading = styled(Spinner)`
-  position: absolute;
-`
-
-interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  loading?: boolean
-  IconPrefix?: ComponentType
-  IconSuffix?: ComponentType
-  children?: string
-  subtle?: boolean
-}
-
-function makeButtonConfig(props: IButtonProps & ButtonTypeProps & ButtonSizeProps) {
-  const buttonType  = getButtonType(props)
-  const isDisabled = getIsDisabled(props)
-  const backgroundColor = isDisabled
-    ? getBackgroundColorDisabledByType(buttonType)
-    : getBackgroundColorByType(buttonType)
-  const buttonPadding = getPaddingBySize(props)
-  const buttonOverridePadding = getPaddingByType(buttonType)
-  const cursor = getCursor(props)
-  const backgroundHover = getBackgroundColorHoverByType(buttonType)
-  const textDecorationHover = getTextDecorationHoverByType(buttonType)
-  const backgroundPressed = getBackgroundColorPressedByType(buttonType)
-  const textColorHover = getTextColorOnHoverByType(buttonType)
-  const iconColorHover = getIconColorOnHoverByType(buttonType)
-  const buttonBorder = isDisabled
-    ? getBorderDisabledByType(buttonType)
-    : getBorderByType(buttonType)
-  const buttonSize =
-    buttonOverridePadding !== '' ? buttonOverridePadding : buttonPadding
-  const textColor = getTextColorByType(buttonType)
-  const iconColor = getIconColorByType(buttonType)
-  const textColorDisabled = getTextColorIfDisabled(props)
-
-  return {
-    backgroundColor,
-    buttonSize,
-    cursor,
-    backgroundHover,
-    textDecorationHover,
-    backgroundPressed,
-    textColorHover,
-    iconColorHover,
-    buttonBorder,
-    isDisabled,
-    textColor,
-    iconColor,
-    textColorDisabled,
-    buttonType,
-  }
-}
-
-export const Button: FC<IButtonProps & ButtonTypeProps & ButtonSizeProps> = (
-  props
-) => {
-  const {
-    children,
-    loading,
-    IconPrefix,
-    IconSuffix,
-    type = 'button',
-    ...htmlProps
-  } = props
-  const { textColor, textColorDisabled, buttonType, ...buttonConfig } =
-    makeButtonConfig(props)
-  return (
-    <ButtonFrame {...htmlProps} type={type} {...buttonConfig} data-testid="button-test">
-      {isDefined(IconPrefix) ? (
-        <IconContainer isLoading={is(loading)}>
-          <IconPrefix />
-        </IconContainer>
-      ) : <Nothing />}
-      <ButtonText
-        textColor={textColor}
-        textColorDisabled={textColorDisabled}
-        isLoading={is(loading)}
-      >
-        {children}
-      </ButtonText>
-      {is(loading) ? (
-        <Loading
-          small
-          onPrimary={
-            buttonType === ButtonType.primary ||
-            buttonType === ButtonType.destructivePrimary
-          }
-        />
-      ) : (
-        ''
-      )}
-
-      {isDefined(IconSuffix) ? (
-        <IconContainer isLoading={is(loading)}>
-          <IconSuffix />
-        </IconContainer>
-      ) : <Nothing />}
-    </ButtonFrame>
-  )
-}
-

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

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

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,84 +0,0 @@
-
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { InputField } from '../../../input-field'
-import { Button } from '../button'
-
-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,49 +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;
-`
-
-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 {
-    onChange,
-    label = '',
-  } = props
-
-  if (isEmpty(label)) {
-    return <Nothing />
-  }
-
-  return (
-    <Wrapper>
-      <Checkbox
-        {...props}
-        onChange={(e) => {
-          if (isDefined(onChange)) {
-            onChange(e.target.checked)
-          }
-        }}
-        name={isDefined(props.name) ? props.name : label}
-      />
-      <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/index.ts

@@ -1 +0,0 @@
-export * from './multi-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)
-  })
-})

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

@@ -1,52 +0,0 @@
-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[]
-}
-
-export const MultiChoiceList: FC<IMultiChoiceList> = (props: IMultiChoiceList) => {
-  const { options } = props
-
-  if (isEmpty(options)) {
-    return <Nothing />
-  }
-
-  return (
-    <Group role="group">
-      {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>
-  )
-}