@edvisor/product-language 0.1.1 → 0.2.0

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

@@ -0,0 +1,77 @@
+import { Actions } from '@foundations'
+import {render, screen } from '@testing-library/react'
+import { ButtonBasic, ButtonPrimary, ButtonDestructive, ButtonOutline, ButtonPlain } from './index'
+
+describe('Button Tests', () => {
+  describe('ButtonBasic Tests', () => {
+    it('should render Button with given Text', async () => {
+      render(
+        <ButtonBasic>Test Button</ButtonBasic>
+      )
+
+      expect(screen.getByText('Test Button')).toBeInTheDocument()
+      expect(screen.queryByRole('button')).toBeInTheDocument()
+    })
+    
+  })
+
+  describe('ButtonPrimary Tests', () => {
+    it('should render Button with given Text', async () => {
+      render(
+        <ButtonPrimary>Test Button</ButtonPrimary>
+      )
+
+      expect(screen.getByText('Test Button')).toBeInTheDocument()
+      expect(screen.queryByRole('button')).toBeInTheDocument()
+    })
+    
+  })
+
+  describe('ButtonDestructive Tests', () => {
+    it('should render Button with given Text', async () => {
+      render(
+        <ButtonDestructive>Test Button</ButtonDestructive>
+      )
+
+      expect(screen.getByText('Test Button')).toBeInTheDocument()
+      expect(screen.queryByRole('button')).toBeInTheDocument()
+      expect(screen.getByTestId('button-test')).toHaveStyle('background: none')
+    })
+    
+    it('should render Button with given Text', async () => {
+      render(
+        <ButtonDestructive primary>Test Button</ButtonDestructive>
+      )
+
+      expect(screen.getByText('Test Button')).toBeInTheDocument()
+      expect(screen.queryByRole('button')).toBeInTheDocument()
+      expect(screen.getByTestId('button-test')).toHaveStyle(`background: ${Actions.Critical.Default}`)
+    })
+    
+
+  })
+
+  describe('ButtonOutline Tests', () => {
+    it('should render Button with given Text', async () => {
+      render(
+        <ButtonOutline>Test Button</ButtonOutline>
+      )
+
+      expect(screen.getByText('Test Button')).toBeInTheDocument()
+      expect(screen.queryByRole('button')).toBeInTheDocument()
+    })
+    
+  })
+
+  describe('ButtonPlain Tests', () => {
+    it('should render Button with given Text', async () => {
+      render(
+        <ButtonPlain>Test Button</ButtonPlain>
+      )
+
+      expect(screen.getByText('Test Button')).toBeInTheDocument()
+      expect(screen.queryByRole('button')).toBeInTheDocument()
+    })
+  })
+
+})

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

@@ -0,0 +1,231 @@
+import styled from 'styled-components'
+import { FC, is, isDefined } from '@helpers'
+import { Focused } from '@foundations'
+import {
+  ButtonSizeProps,
+  getBackgroundColorByType,
+  getIsDisabled,
+  getTextColorByType,
+  getTextColorIfDisabled,
+  getCursor,
+  getPaddingBySize,
+  getBackgroundColorHoverByType,
+  getTextColorOnHoverByType,
+  getBorderByType,
+  getPaddingByType,
+  getBackgroundColorDisabledByType,
+  getBorderDisabledByType,
+  ButtonType,
+  getBackgroundColorPressedByType,
+} from './button-flags'
+import { ComponentType } from 'react'
+import { Label1 } from 'components/typography'
+import { Spinner } from 'components/spinner'
+
+const ButtonFrame = styled.button<{
+  backgroundColor: string
+  buttonSize: string
+  cursor: string
+  backgroundHover: string
+  backgroundPressed: string
+  textColorHover: string
+  buttonBorder: string
+  isDisabled: boolean
+}>`
+  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;
+
+  ${(props) =>
+    !props.isDisabled
+      ? `
+    &:hover {
+      background: ${props.backgroundHover};
+      
+      div {
+        color: ${props.textColorHover};
+      }
+    }
+
+    &:focus  {
+      outline: 2px solid ${Focused.Default}
+    }
+
+    &:focus-visible  {
+      border: 2px solid ${Focused.Default}
+    }
+
+    &:active {
+      background: ${props.backgroundPressed}
+    }
+  `
+      : ''}
+`
+
+const ButtonText = styled(Label1)<{
+  textColor: string
+  textColorDisabled: string
+  isLoading: boolean
+}>`
+  color: ${(props) =>
+    props.textColorDisabled !== '' ? props.textColorDisabled : props.textColor};
+
+  ${(props) =>
+    props.isLoading
+      ? `
+    opacity: 0;
+  `
+      : ''}
+`
+
+const Loading = styled(Spinner)`
+    position: absolute;
+`
+
+interface DummyIconProps {
+  type: ButtonType
+}
+
+interface IButtonProps {
+  loading?: boolean
+  IconPrefix?: ComponentType<DummyIconProps>
+  IconSuffix?: ComponentType<DummyIconProps>
+  children?: string
+}
+
+interface IButtonDestructiveProps extends IButtonProps {
+  primary?: boolean
+}
+
+interface IButtonPlainProps extends IButtonProps {
+  subtle?: boolean
+}
+
+interface ISecretInnerButtonProps
+  extends IButtonPlainProps,
+    IButtonDestructiveProps {
+  buttonType: ButtonType
+}
+
+function makeButtonConfig(props: ISecretInnerButtonProps & ButtonSizeProps) {
+  const { buttonType } = 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 backgroundPressed = getBackgroundColorPressedByType(buttonType)
+  const textColorHover = getTextColorOnHoverByType(buttonType)
+  const buttonBorder = isDisabled
+    ? getBorderDisabledByType(buttonType)
+    : getBorderByType(buttonType)
+  const buttonSize =
+    buttonOverridePadding !== '' ? buttonOverridePadding : buttonPadding
+  const textColor = getTextColorByType(buttonType)
+  const textColorDisabled = getTextColorIfDisabled(props)
+
+  return {
+    backgroundColor,
+    buttonSize,
+    cursor,
+    backgroundHover,
+    backgroundPressed,
+    textColorHover,
+    buttonBorder,
+    isDisabled,
+    textColor,
+    textColorDisabled,
+  }
+}
+
+const SecretInnerButton: FC<ISecretInnerButtonProps & ButtonSizeProps> = (
+  props
+) => {
+  const {
+    children,
+    buttonType,
+    loading,
+    IconPrefix,
+    IconSuffix,
+    ...htmlProps
+  } = props
+  const { textColor, textColorDisabled, ...buttonConfig } =
+    makeButtonConfig(props)
+
+  return (
+    <ButtonFrame {...htmlProps} {...buttonConfig} data-testid="button-test">
+      {isDefined(IconPrefix) ? <IconPrefix type={buttonType} /> : ''}
+
+      <ButtonText
+        textColor={textColor}
+        textColorDisabled={textColorDisabled}
+        isLoading={is(loading)}
+      >
+        {children}
+      </ButtonText>
+      {is(loading) ? (
+        <Loading
+          small
+          onPrimary={
+            buttonType === ButtonType.primary ||
+            buttonType === ButtonType.primaryDestructive
+          }
+        />
+      ) : (
+        ''
+      )}
+
+      {isDefined(IconSuffix) ? <IconSuffix type={buttonType} /> : ''}
+    </ButtonFrame>
+  )
+}
+
+export const ButtonBasic: FC<IButtonProps> = (props) => {
+  return <SecretInnerButton buttonType={ButtonType.basic} {...props} />
+}
+
+export const ButtonPrimary: FC<IButtonProps> = (props) => {
+  return <SecretInnerButton buttonType={ButtonType.primary} {...props} />
+}
+
+export const ButtonDestructive: FC<IButtonDestructiveProps> = (props) => {
+  const { primary } = props
+  return (
+    <SecretInnerButton
+      buttonType={
+        isDefined(primary) && primary
+          ? ButtonType.primaryDestructive
+          : ButtonType.destructive
+      }
+      {...props}
+    />
+  )
+}
+
+export const ButtonOutline: FC<IButtonProps> = (props) => {
+  return <SecretInnerButton buttonType={ButtonType.outline} {...props} />
+}
+
+export const ButtonPlain: FC<IButtonPlainProps> = (props) => {
+  const { subtle } = props
+
+  return (
+    <SecretInnerButton
+      buttonType={
+        isDefined(subtle) && subtle ? ButtonType.plainSubtle : ButtonType.plain
+      }
+      {...props}
+    />
+  )
+}

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,104 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { ButtonPrimary, ButtonBasic, ButtonDestructive, ButtonOutline, ButtonPlain, DummyIcon } from '../index'
+import { PlainHTMLFormExample, DisabledLoadingExample } from './components'
+
+<Meta
+  title="Components/Button"
+  component={ButtonPrimary}
+/>
+
+# 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 { ButtonPrimary } from './index'
+
+
+// Render the component sending the required parameters
+<ButtonPrimary 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>
+  <ButtonBasic type="submit">Basic</ButtonBasic>
+  <ButtonPrimary>Primary</ButtonPrimary>
+  <ButtonDestructive>Destructive</ButtonDestructive>
+  <ButtonDestructive primary>Primary Destructive</ButtonDestructive>
+  <ButtonOutline>Outline</ButtonOutline>
+  <ButtonPlain>Plain</ButtonPlain>
+  <ButtonPlain subtle >Plain Subtle</ButtonPlain>
+</Canvas>
+
+Disabled
+<Canvas>
+  <ButtonBasic disabled>Basic</ButtonBasic>
+  <ButtonPrimary disabled>Primary</ButtonPrimary>
+  <ButtonDestructive disabled>Destructive</ButtonDestructive>
+  <ButtonDestructive primary disabled>Primary Destructive</ButtonDestructive>
+  <ButtonOutline disabled>Outline</ButtonOutline>
+  <ButtonPlain disabled>Plain</ButtonPlain>
+  <ButtonPlain subtle disabled>Plain Subtle</ButtonPlain>
+</Canvas>
+
+Loading
+<Canvas>
+  <ButtonBasic loading>Basic</ButtonBasic>
+  <ButtonPrimary loading>Primary</ButtonPrimary>
+  <ButtonDestructive loading>Destructive</ButtonDestructive>
+  <ButtonDestructive primary loading>Primary Destructive</ButtonDestructive>
+  <ButtonOutline loading>Outline</ButtonOutline>
+  <ButtonPlain loading>Plain</ButtonPlain>
+  <ButtonPlain subtle loading>Plain Subtle</ButtonPlain>
+</Canvas>
+
+Icons
+<Canvas>
+  <ButtonBasic IconPrefix={DummyIcon}>Basic</ButtonBasic>
+  <ButtonPrimary IconPrefix={DummyIcon}>Primary</ButtonPrimary>
+  <ButtonDestructive IconPrefix={DummyIcon}>Destructive</ButtonDestructive>
+  <ButtonDestructive primary IconPrefix={DummyIcon}>Primary Destructive</ButtonDestructive>
+  <ButtonOutline IconPrefix={DummyIcon}>Outline</ButtonOutline>
+  <ButtonPlain IconPrefix={DummyIcon}>Plain</ButtonPlain>
+  <ButtonPlain subtle IconPrefix={DummyIcon}>Plain Subtle</ButtonPlain>
+</Canvas>
+
+<Canvas>
+  <ButtonBasic IconSuffix={DummyIcon}>Basic</ButtonBasic>
+  <ButtonPrimary IconSuffix={DummyIcon}>Primary</ButtonPrimary>
+  <ButtonDestructive IconSuffix={DummyIcon}>Destructive</ButtonDestructive>
+  <ButtonDestructive primary IconSuffix={DummyIcon}>Primary Destructive</ButtonDestructive>
+  <ButtonOutline IconSuffix={DummyIcon}>Outline</ButtonOutline>
+  <ButtonPlain IconSuffix={DummyIcon}>Plain</ButtonPlain>
+  <ButtonPlain subtle IconSuffix={DummyIcon}>Plain Subtle</ButtonPlain>
+</Canvas>
+
+<Canvas>
+  <ButtonBasic large>Large</ButtonBasic>
+  <ButtonBasic>Default</ButtonBasic>
+  <ButtonBasic small>Small</ButtonBasic>
+</Canvas>
+

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

@@ -0,0 +1,86 @@
+
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { InputField } from '../../../input-field'
+import { Button, ButtonPrimary } 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'}}>
+    <ButtonBasic type="reset">Clear</ButtonBasic>
+    <ButtonPrimary type="submit">Send</ButtonPrimary>
+  </div>
+</form>  
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputField,
+        ButtonBasic: Button,
+        ButtonPrimary
+      },
+    }}
+  />
+)
+
+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'}}>
+    <ButtonPrimary type="submit" disabled={disabled} loading={loading}>Send</ButtonPrimary>
+  </div>
+</form>  
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputField,
+        ButtonBasic: Button,
+        ButtonPrimary
+      },
+    }}
+  />
+)

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,50 @@
+import { useState } from 'react'
+import styled from 'styled-components'
+import { FC, isDefined, isEmpty, Nothing } from '@helpers'
+import { Margin } from '@foundations'
+import { Checkbox, ICheckboxProps } from '../../checkbox'
+import { Label1 } from 'components/typography'
+import { Flex } from 'components/layout'
+
+const Text = styled(Label1)`
+  margin-left: ${Margin.s};
+  user-select: none;
+`
+const Wrapper = styled(Flex)`
+  width: 100%;
+  align-items: center;
+`
+interface IInputCheckboxProps {
+  label: string
+}
+
+export type IInputCheckbox = IInputCheckboxProps & ICheckboxProps
+
+export const InputCheckbox: FC<IInputCheckbox> = (props) => {
+  const { onChange, label = '', disabled = false, error = false, checked = false } = props
+  const [isChecked, setIsChecked] = useState(checked)
+  if (isEmpty(label)) {
+    return <Nothing />
+  }
+
+  const handleOnChange = () => {
+    setIsChecked(!isChecked)
+    if(isDefined(onChange)){
+      onChange(!isChecked)
+    }
+  }
+
+  return (
+    <Wrapper>
+      <Checkbox
+        {...props}
+        onChange={handleOnChange}
+        onClick={handleOnChange}
+        disabled={disabled}
+        error={error}
+        checked={isChecked}
+      />
+      <Text>{label}</Text>
+    </Wrapper>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { InputCheckbox } from '../index'
+
+export const PlainHTMLFormExample = () => (
+  <Playground
+    code={`
+/* Edit this code sample! */
+const [withError, setWithError] = useState(false);
+
+<form onSubmit={(e) => {
+    e.preventDefault()
+    console.log('form submitted')
+  }}
+>
+  <InputCheckbox
+    onInvalid={(e) => {
+      setWithError(true)
+    }}
+    error={withError}
+    onChange={(e) => {
+      console.log('at stories', e)
+      setWithError(false)
+    }}
+    label="My label"
+    required />
+  <input type="submit"/>
+</form>
+`}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputCheckbox,
+      },
+    }}
+  />
+)

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

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

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

@@ -0,0 +1,51 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { InputCheckbox } from '../index'
+import { PlainHTMLFormExample } from './index'
+
+<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="My label" onChange={(e) => console.log('at stories', e)} />
+  <InputCheckbox label="My label" disabled />
+  <InputCheckbox label="My label" error />
+  <InputCheckbox label="My label" checked />
+  <InputCheckbox label="My label" error checked />
+</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
+
+<PlainHTMLFormExample />

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'