@edvisor/product-language 0.10.2 → 0.10.3

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

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

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

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

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

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

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

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

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,44 +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
-
-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

@@ -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()
-    })
-  })
-})