@edvisor/product-language 0.1.1 → 0.3.0

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

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

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

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

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

@@ -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,45 @@
+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

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

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

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