@edvisor/product-language 0.3.0 → 0.4.0

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

@@ -1,86 +0,0 @@
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { Canvas } from '@storybook/addon-docs'
-import { Tag } from '../tag'
-import { Card } from 'components/card'
-import styled from 'styled-components'
-import { Margin, Padding, Surface } from '@foundations'
-
-const WrapperStories = styled(Card)`
-  width: 240px;
-  height: 238px;
-  padding: ${Padding.l};
-  background: ${Surface.Default.Default};
-`
-const TagMarginBottom24 = styled(Tag)`
-  margin-bottom: ${Margin.l};
-`
-
-const onClickHandler = () => {
-  alert('Close button clicked')
-}
-
-export const SelectedTagHTMLExample = () => {  
-  return (
-    <WrapperStories heading="Selected (2)">
-      <TagMarginBottom24  closable onClick={onClickHandler}>Toronto, ON, Canada</TagMarginBottom24>
-      <TagMarginBottom24 closable onClick={onClickHandler}>Melbourne NSW, Australia</TagMarginBottom24>
-    </WrapperStories>
-  )
-}
-
-export const TagExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-<div style={{display:'flex', gap:'24px'}}>
-  <Tag >Label</Tag>
-  <Tag disabled >Label</Tag>
-  <Tag closable onClick={onClickHandler}>Label</Tag>
-  <Tag closable disabled>Label</Tag>
-</div>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Tag,
-        Canvas,
-        onClickHandler
-      },
-    }}
-  />
-)
-
-export const WorkedExample = () => (
-  <Playground
-    code={`
-const [selectedCities, setSelected] = useState([
-  { id: 1, name: 'Vancouver, BC', disabled: true },
-  { id: 2, name: 'Montreal, QC'},
-  { id: 3, name: 'Toronto, ON'},
-]);
-
-<div style={{display:'flex', gap:'24px'}}>
-  {selectedCities.map((city, index) => {
-    return (
-      <Tag 
-        closable
-        disabled={city.disabled}
-        key={city.id} 
-        onClick={() => {
-          setSelected( prevCities => prevCities.filter( filteredCity => filteredCity.id !== city.id ) )
-        }}
-      >{city.name}</Tag>
-    )
-  })}
-</div>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Tag,
-        Canvas,
-        onClickHandler
-      },
-    }}
-  />
-)

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

@@ -1,42 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs'
-import { Tag } from '../index'
-import { TagExample, SelectedTagHTMLExample, WorkedExample } from './components'
-
-<Meta title="Components/Tag" component={Tag} />
-
-# Tag
-
-For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1545%3A4278)
-
-## How to use
-
-```javascript
-// Import the component
-import { Tag } from '@edvisor/product-language'
-
-// Render the default component
-<Tag>Label</Tag>
-
-```
-
-## Properties
-
-The available optional properties are as follows.
-
-| Prop         | Type       | Description                                          |
-| ------------ | ---------- | ---------------------------------------------------- |
-| `closable?`  | `boolean`  | Add a close button to the tag                |
-| `disabled?`  | `boolean`  | Disabled the tag                             |
-| `className?` | `string`   | Add the class to the tag                             |
-| `onClick?`   | `function` | Called when the close button is clicked              |
-
-## Example
-
-<SelectedTagHTMLExample />
-
-
-## Playground
-
-Tags
-
-<WorkedExample />

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

@@ -1,36 +0,0 @@
-//tag.test
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { Tag } from './index'
-
-describe('Tag Tests', () => {
-  it('should render Tag with given Text', async () => {
-    render(<Tag>Test</Tag>)
-    expect(screen.getByText('Test')).toBeInTheDocument()
-    expect(screen.queryByRole('button')).not.toBeInTheDocument()
-  })
-
-  it('should render a disabled Tag with the close button and with given Text', async () => {
-    render(
-      <Tag disabled closable>
-        Close
-      </Tag>
-    )
-    expect(screen.getByText('Close')).toBeInTheDocument()
-    expect(screen.queryByRole('button')).toBeInTheDocument()
-  })
-
-  it('should render the Tag with close button and handle event after click', async () => {
-    const spyOnClick = jest.fn()
-    render(
-      <Tag closable onClick={spyOnClick}>
-        Clicked
-      </Tag>
-    )
-    expect(screen.getByText('Clicked')).toBeInTheDocument()
-
-    const closeIcon = screen.queryByRole('button') as HTMLElement
-    await userEvent.click(closeIcon)
-    expect(spyOnClick).toHaveBeenCalled()
-  })
-})

package/src/lib/components/tag/tag.tsx

@@ -1,33 +0,0 @@
-import { FC, PropsWithChildren, is } from '@helpers'
-import { Padding } from '@foundations'
-import styled from 'styled-components'
-import { Flex } from 'components/layout'
-import { CloseButton, TagLabel } from './components'
-import { HTMLAttributes } from 'react'
-
-const TagFrame = styled(Flex)`
-  flex-direction: row;
-  align-items: stretch;
-  padding: ${Padding.none};
-  width: fit-content;
-`
-
-interface IProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
-  closable?: boolean
-  disabled?: boolean
-  className?: string
-  onClick?: () => void
-}
-
-export const Tag: FC<IProps> = (props) => {
-  const { disabled, closable, onClick, ...domProps } = props
-
-  return (
-    <TagFrame {...domProps} className={props.className}>
-      <TagLabel disabled={disabled} closable={closable}>
-        {props.children}
-      </TagLabel>
-      {is(closable) && <CloseButton {...props} />}
-    </TagFrame>
-  )
-}

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,45 +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;
-  className?: string;
-}
-type IProps = IThumbnailProps & ThumbnailSizeProps
-
-export const Thumbnail: FC<IProps> = (props) => {
-  const { imageUrl, imageLabel = imageUrl, className = '' } = props
-  const size = getValuesBySize(props)
-
-  if (isNil(imageUrl)) {
-    return <Nothing/>
-  }
-
-  return (
-    <Box
-      size={size}
-      data-testid="thumbnail-test"
-      className={className}
-    >
-      <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,288 +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,
-  Body,
-  BodyLarge,
-  Caption,
-  Label,
-} 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><Label subdued>Typographic System</Label></HeaderColumn>
-    <HeaderColumn><Label subdued>Weight</Label></HeaderColumn>
-    <HeaderColumn><Label subdued>Size</Label></HeaderColumn>
-    <HeaderColumn><Label subdued>Line Height</Label></HeaderColumn>
-    <HeaderColumn><Label subdued>Spacing</Label></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 strong {...toTextAspectProps(aspect)}>BodyLarge/Strong</BodyLarge>
-            </Button>
-          </Column>
-          <Column>Semibold 600</Column>
-          <Column>18px (1.125rem)</Column>
-          <Column>28px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row gray>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <BodyLarge {...toTextAspectProps(aspect)}>BodyLarge/Default</BodyLarge>
-            </Button>
-          </Column>
-          <Column>Regular 400</Column>
-          <Column>18px (1.125rem)</Column>
-          <Column>28px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row gray>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Body strong {...toTextAspectProps(aspect)}>Body Strong</Body>
-            </Button>
-          </Column>
-          <Column>Medium 500</Column>
-          <Column>14px (0.875rem)</Column>
-          <Column>20px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row gray>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Body {...toTextAspectProps(aspect)}>Body default</Body>
-            </Button>
-          </Column>
-          <Column>Regular 400</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)}>
-              <Label strong {...toTextAspectProps(aspect)}>Label/Strong</Label>
-            </Button>
-          </Column>
-          <Column>Medium 500</Column>
-          <Column>14px (0.875rem)</Column>
-          <Column>20px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Label {...toTextAspectProps(aspect)}>Label/Default</Label>
-            </Button>
-          </Column>
-          <Column>Regular 400</Column>
-          <Column>14px (0.875rem)</Column>
-          <Column>20px</Column>
-          <Column>0 px</Column>
-        </Row>
-        <Row>
-          <Column>
-            <Button {...toButtonProps(aspect)}>
-              <Label subtle {...toTextAspectProps(aspect)}>Label/Subtle</Label>
-            </Button>
-          </Column>
-          <Column>Regular 400</Column>
-          <Column>13px (0.8125rem)</Column>
-          <Column>16px</Column>
-          <Column>0 px</Column>
-        </Row>
-      </Table>
-    </div>
-  )
-}