@edvisor/product-language 0.1.1 → 0.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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