@edvisor/product-language 0.2.0 → 0.3.1

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

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

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

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

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

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

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

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

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

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

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

package/src/lib/components/typography/storybook/components.tsx

@@ -1,256 +0,0 @@
-import { Actions, Borders, Surface, Text } from 'foundations/color-system'
-import { Margin, Padding } from 'foundations/spacing'
-import styled from 'styled-components'
-import { is } from '@helpers'
-import {
-  Display,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  BodyLarge,
-  Body,
-  Caption,
-  Label1,
-  Label2,
-} from '../typography'
-import { Typography } from '@foundations'
-import { Flex } from 'components/layout'
-import { useState } from 'react'
-import { StoryComponent } from '@stories'
-
-const Table = styled.div`
-  background: ${Surface.Default};
-  border-radius: 6px;
-`
-
-const Row = styled.div<{ gray?: boolean }>`
-  display: flex;
-  flex-direction: row;
-  background-color: ${(props) => (is(props.gray) ? Surface.Default.Subdued : Surface.Default)};
-  border-bottom: 1px solid ${Borders.Default.Subdued};
-`
-
-const Column = styled.div`
-  ${Typography.Body}
-  display: flex;
-  padding: ${Padding.l};
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  justify-content: space-between;
-  &:nth-child(1) {
-    flex: 2;
-  }
-`
-
-const HeaderColumn = styled(Column)`
-  color: ${Text.Subdued};
-`
-
-export const Button = styled.div<{ critical?: boolean, primary?: boolean }>`
-  background: ${({ critical, primary }) => {
-    if (is(critical)) {
-      return Actions.Critical.Default
-    } else if (is(primary)) {
-      return Actions.Primary.Default
-    } else {
-      return Actions.Secondary.Default
-    }
-  }};
-  border: 1px solid ${({ critical, primary }) => {
-    if (is(critical)) {
-      return 'none'
-    } else if (is(primary)) {
-      return 'none'
-    } else {
-      return Borders.Default
-    }
-  }};
-  box-sizing: border-box;
-  cursor: pointer;
-
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: ${Padding.xs} ${Padding.m};
-
-  border-radius: 6px;
-  margin-right: ${Margin.s};
-`
-
-const Header = () => (
-  <Row>
-    <HeaderColumn><Label1 subdued>Typographic System</Label1></HeaderColumn>
-    <HeaderColumn><Label1 subdued>Weight</Label1></HeaderColumn>
-    <HeaderColumn><Label1 subdued>Size</Label1></HeaderColumn>
-    <HeaderColumn><Label1 subdued>Line Height</Label1></HeaderColumn>
-    <HeaderColumn><Label1 subdued>Spacing</Label1></HeaderColumn>
-  </Row>
-)
-
-const toTextAspectProps = (aspect: string) => {
-  switch (aspect) {
-    case 'subdued': return { subdued: true }
-    case 'light': return { light: true }
-    case 'critical': return { critical: true }
-    case 'success': return { success: true }
-    case 'onPrimary': return { onPrimary: true }
-    case 'onCritical': return { onCritical: true }
-    default: return {}
-  }
-}
-
-const toButtonProps = (aspect: string) => {
-  switch (aspect) {
-    case 'onPrimary': return { primary: true }
-    case 'onCritical': return { critical: true }
-    default: return {}
-  }
-}
-
-export const TypographyTable: StoryComponent = () => {
-  const [aspect, setAspect] = useState('')
-
-  return (
-    <div>
-      <Flex>
-        <Button onClick={() => setAspect('default')}>
-          <Body>Default</Body>
-        </Button>
-        <Button onClick={() => setAspect('subdued')}>
-          <Body subdued>Subdued</Body>
-        </Button>
-        <Button onClick={() => setAspect('light')}>
-          <Body light>Light</Body>
-        </Button>
-        <Button onClick={() => setAspect('critical')}>
-          <Body critical>Critical</Body>
-        </Button>
-        <Button onClick={() => setAspect('success')}>
-          <Body success>Success</Body>
-        </Button>
-        <Button primary onClick={() => setAspect('onPrimary')}>
-          <Body onPrimary>OnPrimary</Body>
-        </Button>
-        <Button critical onClick={() => setAspect('onCritical')}>
-          <Body onCritical>OnCritical</Body>
-        </Button>
-      </Flex>
-      <Table>
-        <Header />
-        <Row gray>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Display {...toTextAspectProps(aspect)}>Display1</Display>
-            </Button>
-          </Column>
-          <Column>Regular 400</Column>
-          <Column>36px (2.25rem)</Column>
-          <Column>44px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Heading1 {...toTextAspectProps(aspect)}>Heading1</Heading1>
-            </Button>
-          </Column>
-          <Column>Semibold 600</Column>
-          <Column>28px (1.75rem)</Column>
-          <Column>32px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Heading2 {...toTextAspectProps(aspect)}>Heading2</Heading2>
-            </Button>
-          </Column>
-          <Column>Semibold 600</Column>
-          <Column>20px (1.25rem)</Column>
-          <Column>28px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Heading3 {...toTextAspectProps(aspect)}>Heading3</Heading3>
-            </Button>
-          </Column>
-          <Column>Semibold 600</Column>
-          <Column>16px (1 rem)</Column>
-          <Column>24px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Heading4 {...toTextAspectProps(aspect)}>Heading4</Heading4>
-            </Button>
-          </Column>
-          <Column>Semibold 600</Column>
-          <Column>14px (0.875rem)</Column>
-          <Column>20px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row gray>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <BodyLarge {...toTextAspectProps(aspect)}>BodyLarge</BodyLarge>
-            </Button>
-          </Column>
-          <Column>Reg 400 / Semibold 600</Column>
-          <Column>18px (1.125rem)</Column>
-          <Column>28px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row gray>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Body {...toTextAspectProps(aspect)}>Body</Body>
-            </Button>
-          </Column>
-          <Column>Reg 400 / Medium 500</Column>
-          <Column>14px (0.875rem)</Column>
-          <Column>20px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row gray>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Caption {...toTextAspectProps(aspect)}>Caption</Caption>
-            </Button>
-          </Column>
-          <Column>Regular 400</Column>
-          <Column>13px (0.8125rem)</Column>
-          <Column>16px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Label1 {...toTextAspectProps(aspect)}>Label1</Label1>
-            </Button>
-          </Column>
-          <Column>Reg 400 / Medium 500</Column>
-          <Column>14px (0.875rem)</Column>
-          <Column>20px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Label2 {...toTextAspectProps(aspect)}>Label2</Label2>
-            </Button>
-          </Column>
-          <Column>Regular 400</Column>
-          <Column>13px (0.8125rem)</Column>
-          <Column>16px</Column>
-          <Column>0 px</Column>
-        </Row>
-      </Table>
-    </div>
-  )
-}

package/src/lib/components/typography/storybook/typography.stories.mdx

@@ -1,88 +0,0 @@
-import { Canvas, Meta } from '@storybook/addon-docs';
-import { TypographyTable, Button } from './components'
-import { Heading3, Label1, Body } from '../typography'
-
-<Meta title="Components/Typography" />
-
-# Typography
-
-All text that appears in the front-end should be wrapped by one of these components.
-
-## Basic usage
-
-When you are building from a mockup you will be clicking on elements and checking in the figma inspector to see what components you should use, and how you should configure them. With typography there are two relevant sections: Typography and Color.
-
-### Typography: Ag
-
-When you see text in a mockup you can click that text to see what kind of typographic component it represents. In the typography section of the figma inspector you will see a label Ag with a value like "Label1" or "Label1/emphasis". This is the name of the component you should use, and whether you should set the emphasis flag.
-
-For example if you see "Ag Heading3".
-
-<Canvas>
-  <Heading3>Heading 3, no modifiers</Heading3>
-</Canvas>
-
-If you see "Ag Label 1/emphasis" you should use a Label1 with emphasis set.
-
-<Canvas>
-  <Label1 emphasis>Label 1, emphasis</Label1>
-</Canvas>
-
-### Colors: Text
-
-Below the Typography section in the figma inspector you will see the Colors section. Here you will see a color swatch and a label like "Text/Default" or "Text/Subdued". In most cases you will see "Text/Default" and can proceed without any modifiers. When you do see a modifier you will be able to use it as is to configure your component.
-
-<Canvas>
-  <Button><Body>Text/Default</Body></Button>
-  <Button><Body subdued>Text/Subdued</Body></Button>
-  <Button><Body light>Text/Light</Body></Button>
-  <Button primary><Body onPrimary>Text/onPrimary</Body></Button>
-  <Button critical><Body onCritical>Text/onCritical</Body></Button>
-</Canvas>
-
-In addition there are two less commonly used text colors: Text/Critical and Text/Success. These appear from time to time in mockups to indicate some problems (like an invalid field) or some big win (like a discount on a price).
-
-<Canvas>
-  <Body critical>Text/Critical</Body>
-  <Body success>Text/Success</Body>
-</Canvas>
-
-## Recommended usage with i18n
-
-In practice you will not be using these typographic components without i18n. In our previous projects i18n has usually looked something like this:
-
-```tsx
-<Body critical><T.Trans>YOU_LOSE</T.Trans></Body>
-<Body success><T.Trans>YOU_WIN</T.Trans></Body>
-```
-
-Or like this,
-
-```tsx
-<Body critical>{t(YOU_LOSE)}</Body>
-<Body success>{t(YOU_WIN)}</Body>
-```
-
-Instead we recommend wrapping the typographic components with i18n helpers and re-exporting them in your project.
-
-```tsx
-// my/typography.tsx
-import { Body as _Body, IBodyProps } from '@edvisor/product-language'
-import { useI18n } from 'your-i18n-library'
-
-// something like this:
-export const Body = (props: IBodyProps) => {
-  const { t } = useI18n()
-
-  return (
-    <_Body {...props}>{t(props.children)}</_Body>
-  )
-}
-
-// then you can use it like this:
-<Body success>YOU_WIN</Body>
-```
-
-## Typography Table
-
-<TypographyTable />