@edvisor/product-language 0.9.0 → 0.10.2

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

@@ -0,0 +1,86 @@
+import styled from 'styled-components'
+import { Margin } from '@foundations'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Tabs, Tab } from './index'
+
+describe('Tabs', () => {
+  it('renders both tabs and the currently selected content', async () => {
+    render(
+      <Tabs selected={0}>
+        <Tabs.TabList>
+          <Tab>One</Tab>
+          <Tab>Two</Tab>
+        </Tabs.TabList>
+        <Tabs.Content>ONE</Tabs.Content>
+        <Tabs.Content>TWO</Tabs.Content>
+      </Tabs>
+    )
+
+    expect(screen.getAllByRole('tab')).toHaveLength(2)
+    expect(screen.getAllByRole('tabpanel')).toHaveLength(1)
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('ONE')
+  })
+
+  it('does not render the unselected tabs', async () => {
+    render(
+      <Tabs selected={2}>
+        <Tabs.TabList>
+          <Tab>One</Tab>
+          <Tab>Two</Tab>
+          <Tab>Three</Tab>
+        </Tabs.TabList>
+        <Tabs.Content>ONE</Tabs.Content>
+        <Tabs.Content>TWO</Tabs.Content>
+        <Tabs.Content>THREE</Tabs.Content>
+      </Tabs>
+    )
+
+    expect(screen.getAllByRole('tab')).toHaveLength(3)
+    expect(screen.getAllByRole('tabpanel', { hidden: true })).toHaveLength(3)
+
+    expect(screen.getByText('ONE')).toHaveAttribute('aria-hidden', 'true')
+    expect(screen.getByText('TWO')).toHaveAttribute('aria-hidden', 'true')
+    expect(screen.getByText('ONE')).not.toBeVisible()
+    expect(screen.getByText('TWO')).not.toBeVisible()
+  })
+
+  /**
+   * this test just ensures that the programmer did not
+   * forget to add className? to the props and then pass
+   * it to the wrapping element so that users downstream
+   * can style the component
+   */
+  it('accepts styles', () => {
+    const NiceTab = styled(Tab)`
+      margin-bottom: ${Margin.l};
+    `
+
+    const { container } = render(<NiceTab>Contents</NiceTab>)
+
+    expect(container.firstChild).toHaveStyle(`margin-bottom: ${Margin.l}`)
+    expect(screen.getByText('Contents')).toBeInTheDocument()
+  })
+
+  it('calls onChange when a tab is clicked', async () => {
+    const handleChange = jest.fn()
+
+    render(
+      <Tabs selected={0} onChange={handleChange}>
+        <Tabs.TabList>
+          <Tab>One</Tab>
+          <Tab>Two</Tab>
+        </Tabs.TabList>
+        <Tabs.Content>ONE</Tabs.Content>
+        <Tabs.Content>TWO</Tabs.Content>
+      </Tabs>
+    )
+
+    await userEvent.click(screen.getByText('Two'))
+
+    expect(handleChange).toHaveBeenCalledTimes(1)
+
+    expect(screen.getByText('ONE')).toBeVisible()
+    expect(screen.getByText('TWO')).not.toBeVisible()
+  })
+})

package/src/lib/components/tabs/tabs.tsx

@@ -0,0 +1,115 @@
+import { Children, ReactElement } from 'react'
+import styled from 'styled-components'
+
+import { Borders, Margin, Padding } from '@foundations'
+import { applyProps, applyStyle, FC, is, isReactElementOfType, PropsWithChildren, safeCallback, Slot, StylableSlot } from '@helpers'
+
+import { Flex } from 'components/layout'
+import { ITabProps, Tab as TabBase } from './components'
+
+const Tab = styled(TabBase)``
+
+const TabList = styled(Flex)`
+  padding-left: ${Padding.m};
+
+  ${Tab} {
+    margin-right: ${Margin.m};
+    margin-bottom: -1px;
+    flex-shrink: 0;
+  }
+`
+
+const TabListSecondary = styled(TabList)`
+  ${Tab} {
+    margin-right: ${Margin.xs};
+  }
+`
+
+const TabListPrimary = styled(TabList) `
+  border-bottom: 1px solid ${Borders.Default.Subdued};
+`
+
+class Content extends StylableSlot {}
+class Navigation extends Slot {}
+
+type SubComponents = {
+  Content: typeof Content
+  TabList: typeof Navigation
+}
+
+interface ITabsProps extends PropsWithChildren {
+  secondary?: boolean
+  selected: number
+  onChange?: (selected: number) => void
+}
+
+const isTab = isReactElementOfType(Tab)
+const isTabList = isReactElementOfType(Navigation)
+const isContent = isReactElementOfType(Content)
+
+export const Tabs: FC<ITabsProps, SubComponents> = (props) => {
+  /** iterate over the children, wiring up the tabs and contents */
+  let contentCount = 0
+  let tabCount = 0
+  const children = Children.map(props.children, (child) => {
+    if (isContent(child)) {
+      return decorateContent(child, props, contentCount++)
+    } if (isTabList(child)) {
+      const tabs = Children.map(child.props.children, (tab) => {
+        return isTab(tab) ? decorateTab(tab, props, tabCount++) : tab
+      })
+      if(is(props.secondary) && props.secondary === true) {
+        return <TabListSecondary>{tabs}</TabListSecondary>
+      }
+      return <TabListPrimary>{tabs}</TabListPrimary>
+
+    } else {
+      return child
+    }
+  })
+
+  return <>{children}</>
+}
+
+function decorateTab(
+  tab: ReactElement<ITabProps>,
+  { selected, secondary, onChange = () => undefined }: ITabsProps,
+  index: number
+) {
+  return (
+    <Tab
+      {...tab.props}
+      secondary={secondary}
+      selected={
+        is(tab.props.selected) ? tab.props.selected : index === selected
+      }
+      onFocus={(e) => {
+        safeCallback(tab.props.onFocus, e)
+
+        if (index !== selected) {
+          onChange(index)
+        }
+      }}
+    >
+      {tab.props.children}
+    </Tab>
+  )
+}
+
+/** content could be anything, but it needs to at least show and hide appropriately */
+function decorateContent (child: ReactElement, props: ITabsProps, index: number) {
+  return applyProps(
+    applyStyle(child, {
+      display: index === props.selected ? 'inherit' : 'none',
+    }),
+    {
+      role: 'tabpanel',
+      'aria-hidden': !(index === props.selected),
+    }
+  )
+}
+
+Tabs.Content = Content
+Tabs.TabList = Navigation
+
+export { Tab } from './components'

package/src/lib/components/tag/components/close-button.tsx

@@ -0,0 +1,85 @@
+//close-button.tsx
+import styled from 'styled-components'
+import { Flex } from 'components/layout'
+import { Surface, Padding, Icons } from '@foundations'
+import { FC, is, isDefined, PropsWithChildren } from '@helpers'
+import { HTMLAttributes } from 'react'
+
+const ClosableWrapper = styled(Flex)<{
+  disabled: boolean
+}>`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: ${Padding.xxxs} ${Padding.xxs};
+  gap: 8px;
+  width: 28px;
+
+  background: ${(props) =>
+    props.disabled ? Surface.Neutral.Subdued : Surface.Neutral.Default};
+  border-radius: 0px 4px 4px 0px;
+
+  ${(props) =>
+    !props.disabled
+      ? `
+    &:hover {
+      background: ${Surface.Neutral.Hover};
+      cursor: pointer;
+
+      svg {
+        path {
+          fill: ${Icons.Hover}
+        }
+      }
+    }
+
+    &:active {
+      background: ${Surface.Neutral.Pressed};
+
+      svg {
+        path {
+          fill: ${Icons.Pressed};
+        }
+      }
+    }
+  `
+      : `
+      svg {
+        path {
+          fill: ${Icons.Disabled};
+        }
+      }`}
+`
+
+const ClosableIcon = styled.svg`
+  path {
+    fill: ${Icons.Default};
+  }
+`
+
+interface IProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+  disabled?: boolean
+  onClick?: () => void
+}
+
+export const CloseButton: FC<IProps> = (props) => {
+  const disabled = is(props.disabled)
+
+  const onClickHandler = () => {
+    if (!disabled && isDefined(props.onClick)) {
+      props.onClick()
+    }
+  }
+  return (
+    <ClosableWrapper disabled={disabled} onClick={onClickHandler} role="button">
+      <ClosableIcon
+        width="12.5"
+        height="12.5"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M8.00451 6.79303L14.5439 0.251124C14.8798 -0.0837079 15.423 -0.0837079 15.7267 0.251124C16.0912 0.585955 16.0912 1.12912 15.7267 1.46395L9.21591 8.00442L15.7267 14.5438C16.0912 14.8797 16.0912 15.4229 15.7267 15.7266C15.423 16.0911 14.8798 16.0911 14.5439 15.7266L8.00451 9.21582L1.46404 15.7266C1.12921 16.0911 0.586045 16.0911 0.251177 15.7266C-0.0837258 15.4229 -0.0837258 14.8797 0.251177 14.5438L6.79312 8.00442L0.251177 1.46395C-0.0837258 1.12912 -0.0837258 0.585955 0.251177 0.251124C0.586045 -0.0837079 1.12921 -0.0837079 1.46404 0.251124L8.00451 6.79303Z" />
+      </ClosableIcon>
+    </ClosableWrapper>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './close-button' 
+export * from './tag-label' 

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

@@ -0,0 +1,45 @@
+import styled from 'styled-components'
+import { Flex } from 'components/layout'
+import { Surface, Padding, Text } from '@foundations'
+import { Label } from 'components/typography'
+import { FC, is, PropsWithChildren } from '@helpers'
+import { HTMLAttributes } from 'react'
+
+const LabelFrame = styled(Flex)<{
+  disabled: boolean
+  closable: boolean
+}>`
+  background: ${(props) =>
+    props.disabled ? Surface.Neutral.Subdued : Surface.Neutral.Default};
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: ${Padding.xxxs} ${Padding.xs} ${Padding.xxxs} ${Padding.xs};
+  width: 100%;
+  min-height: 24px;
+  border-radius: ${(props) => (props.closable ? '4px 0px 0px 4px' : '4px')};
+  word-break: break-all;
+`
+
+const LabelText = styled(Label)<{
+  disabled: boolean
+}>`
+  color: ${(props) => (props.disabled ? Text.Light : Text.Default)};
+`
+
+interface IProps extends HTMLAttributes<HTMLLabelElement>, PropsWithChildren {
+  closable?: boolean
+  disabled?: boolean
+}
+
+export const TagLabel: FC<IProps> = (props) => {
+  const disabled = is(props.disabled)
+  const closable = is(props.closable)
+
+  return (
+    <LabelFrame disabled={disabled} closable={closable}>
+      <LabelText disabled={disabled}>{props.children}</LabelText>
+    </LabelFrame>
+  )
+}

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

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

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,44 @@
+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
+
+Thumbnail images will scale the inner image down so that its width is contained but its aspect ratio is preserved. 
+
+<Canvas>
+    <Thumbnail large  imageUrl='https://blog.edvisor.io/hs-fs/hubfs/Nomade.png?width=215&height=108&name=Nomade.png'/>
+    <Thumbnail medium  imageUrl='https://blog.edvisor.io/hs-fs/hubfs/Nomade.png?width=215&height=108&name=Nomade.png'/>
+    <Thumbnail small  imageUrl='https://blog.edvisor.io/hs-fs/hubfs/Nomade.png?width=215&height=108&name=Nomade.png'/>
+</Canvas>
+
+Thumbnails have no padding. If you need padding your should edit your image so that it has padding, rather than trying to add padding to the Thumbnail in CSS.
+
+<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()
+    })
+  })
+})