@edvisor/product-language 0.1.1 → 0.2.0

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,53 @@
+import styled from 'styled-components'
+import { FC, isDefined, isEmpty, Nothing } from '@helpers'
+import { Text , Margin } from '@foundations'
+import { Flex } from 'components/layout'
+import { Label1 } from 'components/typography'
+import { InputCheckbox, IInputCheckbox } from '../../molecules/input-checkbox'
+
+const HelpfulMessage = styled(Label1)`
+  margin-top: ${Margin.xxs};
+  margin-left: ${Margin.xl};
+  color: ${Text.Subdued};
+  user-select: none;
+`
+const Group = styled(Flex)`
+  width: 100%;
+  flex-direction: column;
+  gap: 18px;
+`
+interface IOption extends IInputCheckbox {
+  id: string
+  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 id={`${option.id}-id`}>
+              {option.helpfulMessage}
+            </HelpfulMessage>
+          )}
+        </div>
+      ))}
+    </Group>
+  )
+}

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

@@ -0,0 +1,126 @@
+import { Body, Heading4 } from '@components'
+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()
+    console.log('form submitted')
+  }}
+>
+  <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){
+        console.log('at stories', e);
+        setWithError(false);
+      }
+    },
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 2',
+      checked: true,
+      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: 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()
+      console.log('locations', locations)
+    }}
+  >
+    <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,
+      },
+    }}
+  />
+)

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

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

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

@@ -0,0 +1,99 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { MultiChoiceList } from '../index'
+import { PlainHTMLFormExample, ExampleWithStateManagement } from './index'
+
+<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",
+      checked: 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',
+      checked: 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/src/lib/components/spinner/index.tsx

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

package/src/lib/components/spinner/spinner-size-flags.tsx

@@ -0,0 +1,39 @@
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+
+const enum SpinnerSize {
+  small = 1,
+  medium = 2,
+  large = 4,
+}
+
+type SpinnerSizes<T> = MappedEnum<typeof SpinnerSize, T>
+
+function toSpinner(n: number): SpinnerSize {
+  switch (n) {
+    case SpinnerSize.small:
+      return SpinnerSize.small
+    case SpinnerSize.medium:
+      return SpinnerSize.medium
+    case SpinnerSize.large:
+      return SpinnerSize.large
+    default:
+      return SpinnerSize.medium
+  }
+}
+
+const SpinnerValues = {
+  [SpinnerSize.small]: '18px',
+  [SpinnerSize.medium]: '40px',
+  [SpinnerSize.large]: '60px',
+}
+
+export type SpinnerProps = Partial<RequireOnlyOne<SpinnerSizes<boolean>>> &
+  PropsWithChildren
+
+export function getValuesBySize(props: SpinnerProps): string {
+  return SpinnerValues[
+    toSpinner(
+      bitwiseOr([props.small, props.medium, props.large])
+    )
+  ]
+}

package/src/lib/components/spinner/spinner.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { Spinner } from './index'
+
+describe('Spinner Tests', () => {
+  describe('Spinner Tests', () => {
+    it('should render the Spinner with default size', async () => {
+      render(
+        <Spinner />
+      )
+
+      const spinner = screen.getByRole('progressbar')
+
+      expect(spinner).toBeInTheDocument()
+      expect(spinner).toHaveStyle('height: 40px')
+      
+    })
+
+    it('should render the Spinner with small size', async () => {
+      render(
+        <Spinner small/>
+      )
+
+      const spinner = screen.getByRole('progressbar')
+
+      expect(spinner).toBeInTheDocument()
+      expect(spinner).toHaveStyle('height: 18px')
+      
+    })
+
+  })
+})

package/src/lib/components/spinner/spinner.tsx

@@ -0,0 +1,67 @@
+import { getValuesBySize, SpinnerProps } from './spinner-size-flags'
+import { FC, is } from '@helpers'
+import styled, { keyframes } from 'styled-components'
+import { Icons } from '@foundations'
+
+const spinAnimation = keyframes`
+  0% {
+    transform: rotate(0deg);
+    stroke-dashoffset: 25;
+  }
+  50% {
+    transform: rotate(720deg);
+    stroke-dashoffset: 125;
+  }
+  100% {
+    transform: rotate(1080deg);
+    stroke-dashoffset: 25;
+  }
+`
+
+const Spin = styled.svg<{ size: string, onPrimary: boolean, onCritical: boolean }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  fill: none;
+  path {
+    fill-rule: evenodd;
+    clip-rule: evenodd;
+    fill: ${({ onPrimary, onCritical }) => (onPrimary || onCritical) ? Icons.OnPrimary : Icons.Default};
+    stroke: ${({ onPrimary, onCritical }) => (onPrimary || onCritical) ? Icons.OnPrimary : Icons.Default};
+    -webkit-transform-origin: 20px 20 0;
+    -moz-transform-origin: 20px 20px 0;
+    -ms-transform-origin: 20px 20px 0;
+    -o-transform-origin: 20px 20px 0;
+    transform-origin: 20px 20px 0;
+    -webkit-animation: spinner 2s linear infinite;
+    -moz-animation: spinner 2s linear infinite;
+    -ms-animation: spinner 2s linear infinite;
+    -o-animation: spinner 2s linear infinite;
+    animation: spinner 2s linear infinite;
+    animation-name: ${spinAnimation};  
+  }   
+`
+
+type IProps = SpinnerProps & {
+  onPrimary?: boolean
+  onCritical?: boolean
+  className?: string
+}
+
+export const Spinner : FC<IProps> = (props) => {
+  const size = getValuesBySize(props)
+
+  return (
+    <Spin
+      onPrimary={is(props.onPrimary)}
+      onCritical={is(props.onCritical)}
+      className={props.className}
+      size={size}
+      role="progressbar"
+      viewBox="0 0 40 40"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M20 3.5C10.8873 3.5 3.5 10.8873 3.5 20C3.5 29.1127 10.8873 36.5 20 36.5C20.2593 36.5 20.517 36.494 20.7732 36.4822C21.6007 36.4441 22.3578 37.0111 22.4704 37.8319C22.5831 38.6526 22.0089 39.4152 21.182 39.4647C20.7908 39.4881 20.3967 39.5 20 39.5C9.23045 39.5 0.5 30.7696 0.5 20C0.5 9.23045 9.23045 0.5 20 0.5C26.0299 0.5 31.4203 3.23815 34.9953 7.53374C35.5252 8.17049 35.3622 9.11117 34.6867 9.59078C34.0113 10.0704 33.0798 9.90641 32.5411 9.27701C29.5131 5.73882 25.018 3.5 20 3.5Z" />
+    </Spin>
+  )
+}
+

package/src/lib/components/spinner/stories/components.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+import { Padding, Surface } from '@foundations'
+
+export const WrapperStories = styled.div`
+  width: 100%;
+  padding: ${Padding.s};
+  background: ${Surface.Default.Default};
+`

package/src/lib/components/spinner/stories/spinner.stories.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { StoryComponent, talesOf, StorybookFrame } from '@stories'
+import { Spinner } from '../index'
+import { ButtonPrimary, ButtonDestructive } from 'components/molecules/button'
+
+import { WrapperStories } from './components'
+
+<Meta title="Components/Spinner" />
+
+# Spinner
+
+Spinners are used to notify users that their action is being processed.
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7380)
+
+## How to Use
+
+```tsx
+import { Spinner } from './index'
+
+<Spinner />
+```
+
+### Size
+ 
+<Canvas>
+  <Spinner small/>
+  <Spinner />
+</Canvas>
+
+### On primary
+
+When rendering the spinner on a primary or critical surface, use onPrimary or onCritical.
+
+<Canvas>
+  <ButtonPrimary>
+    <Spinner onPrimary />
+  </ButtonPrimary>
+  <ButtonDestructive primary>
+    <Spinner onCritical />
+  </ButtonDestructive> 
+</Canvas>

package/src/lib/components/thumbnail/index.tsx

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

package/src/lib/components/thumbnail/stories/thumbnail.stories.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Thumbnail } from '../index'
+import { SpaceAround } from '../../layout'
+
+<Meta
+  title="Components/Thumbnail"
+  component={Thumbnail}
+/>
+
+# Thumbnail
+
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1545%3A4445)
+
+## How to use
+
+```javascript
+// Import the component
+import { Thumbnail } from './index'
+
+
+// Render the component sending the required parameters
+<Thumbnail imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'/>
+```
+## Good Practices
+- You can send the `imageLabel` propertie as an `alt` propertie in order to set and alternative text to image
+
+## Examples
+
+<Canvas>
+    <Thumbnail large  imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'/>
+    <Thumbnail medium imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'/>
+    <Thumbnail small  imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'/>
+</Canvas>
+

package/src/lib/components/thumbnail/thumbnail-size-flags.tsx

@@ -0,0 +1,41 @@
+// this file was generated, but it is safe to modify
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+
+const enum ThumbnailSize {
+  small = 1,
+  medium = 2,
+  large = 4,
+}
+
+type ThumbnailSizes<T> = MappedEnum<typeof ThumbnailSize, T>
+
+function toThumbnailSize(n: number): ThumbnailSize {
+  switch (n) {
+    case ThumbnailSize.small:
+      return ThumbnailSize.small
+    case ThumbnailSize.medium:
+      return ThumbnailSize.medium
+    case ThumbnailSize.large:
+      return ThumbnailSize.large
+    default:
+      return ThumbnailSize.medium
+  }
+}
+
+const ThumbnailSizeValues = {
+  [ThumbnailSize.small]: '40px',
+  [ThumbnailSize.medium]: '60px',
+  [ThumbnailSize.large]: '80px',
+}
+
+
+export type ThumbnailSizeProps = Partial<RequireOnlyOne<ThumbnailSizes<boolean>>> &
+  PropsWithChildren
+
+export function getValuesBySize(props: ThumbnailSizeProps): string {
+  return ThumbnailSizeValues[
+    toThumbnailSize(
+      bitwiseOr([props.small, props.medium, props.large])
+    )
+  ]
+}

package/src/lib/components/thumbnail/thumbnail.test.tsx

@@ -0,0 +1,51 @@
+import {render, screen } from '@testing-library/react'
+import { Thumbnail } from './index'
+
+describe('Thumbnail Tests', () => {
+  describe('Thumbnail Tests', () => {
+    it('should render the Thumbnail with size small', () => {
+      render(
+        <Thumbnail
+          imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'
+          small
+        />
+      )
+
+      expect(screen.getByRole('img')).toBeInTheDocument()
+      expect(screen.getByTestId('thumbnail-test')).toHaveStyle('height: 40px')
+    })
+
+    it('should render the Thumbnail with size medium', () => {
+      render(
+        <Thumbnail
+          imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'
+          medium
+        />
+      )
+
+      expect(screen.getByRole('img')).toBeInTheDocument()
+      expect(screen.getByTestId('thumbnail-test')).toHaveStyle('height: 60px')
+    })
+
+    it('should render the Thumbnail with size large', () => {
+      render(
+        <Thumbnail
+          imageUrl='https://blog.edvisor.io/hubfs/Edvisor%20Smi.png'
+          large
+        />
+      )
+
+      expect(screen.getByRole('img')).toBeInTheDocument()
+      expect(screen.getByTestId('thumbnail-test')).toHaveStyle('height: 80px')
+    })
+
+    it('should not render the Thumbnail without imageUrl', () => {
+      render(
+        <Thumbnail />
+      )
+
+      const thumbnailElement = screen.queryByText('thumbnail-test')
+      expect(thumbnailElement).not.toBeInTheDocument()
+    })
+  })
+})

package/src/lib/components/thumbnail/thumbnail.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+import { FC, isNil, Nothing } from '@helpers'
+import { Borders, Padding } from '@foundations'
+import { SpaceAround } from '../layout/'
+import { ThumbnailSizeProps, getValuesBySize } from './thumbnail-size-flags'
+
+const Box = styled(SpaceAround)<{ size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border-radius: 6px;
+  border: 1px solid ${Borders.Default};
+  padding: ${Padding.xs};
+  box-sizing: border-box;
+`
+
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+`
+
+interface IThumbnailProps {
+  imageUrl?: string;
+  imageLabel?: string;
+}
+type IProps = IThumbnailProps & ThumbnailSizeProps
+
+export const Thumbnail: FC<IProps> = (props) => {
+  const { imageUrl, imageLabel = imageUrl } = props
+  const size = getValuesBySize(props)
+
+  if (isNil(imageUrl)) {
+    return <Nothing/>
+  }
+
+  return (
+    <Box size={size} data-testid="thumbnail-test">
+      <Image src={imageUrl} alt={imageLabel}/>
+    </Box>
+  )
+}

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

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