@edvisor/product-language 0.2.0 → 0.3.0

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,101 @@
+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};
+  border-bottom: 1px solid ${Borders.Default.Subdued};
+
+  ${Tab} {
+    margin-right: ${Margin.m};
+    margin-bottom: -1px;
+    flex-shrink: 0;
+  }
+`
+
+class Content extends StylableSlot {}
+class Navigation extends Slot {}
+
+type SubComponents = {
+  Content: typeof Content
+  TabList: typeof Navigation
+}
+
+interface ITabsProps extends PropsWithChildren {
+  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
+      })
+
+      return <TabList>{tabs}</TabList>
+    } else {
+      return child
+    }
+  })
+
+  return <>{children}</>
+}
+
+function decorateTab(
+  tab: ReactElement<ITabProps>,
+  { selected, onChange = () => undefined }: ITabsProps,
+  index: number
+) {
+  return (
+    <Tab
+      {...tab.props}
+      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,44 @@
+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')};
+`
+
+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/thumbnail.tsx

@@ -21,11 +21,12 @@ const Image = styled.img`
 interface IThumbnailProps {
   imageUrl?: string;
   imageLabel?: string;
+  className?: string;
 }
 type IProps = IThumbnailProps & ThumbnailSizeProps
 
 export const Thumbnail: FC<IProps> = (props) => {
-  const { imageUrl, imageLabel = imageUrl } = props
+  const { imageUrl, imageLabel = imageUrl, className = '' } = props
   const size = getValuesBySize(props)
 
   if (isNil(imageUrl)) {
@@ -33,7 +34,11 @@ export const Thumbnail: FC<IProps> = (props) => {
   }
 
   return (
-    <Box size={size} data-testid="thumbnail-test">
+    <Box
+      size={size}
+      data-testid="thumbnail-test"
+      className={className}
+    >
       <Image src={imageUrl} alt={imageLabel}/>
     </Box>
   )

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

@@ -8,11 +8,10 @@ import {
   Heading2,
   Heading3,
   Heading4,
-  BodyLarge,
   Body,
+  BodyLarge,
   Caption,
-  Label1,
-  Label2,
+  Label,
 } from '../typography'
 import { Typography } from '@foundations'
 import { Flex } from 'components/layout'
@@ -82,11 +81,11 @@ export const Button = styled.div<{ critical?: boolean, primary?: boolean }>`
 
 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>
+    <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>
 )
 
@@ -198,10 +197,10 @@ export const TypographyTable: StoryComponent = () => {
         <Row gray>
           <Column>
             <Button {...toButtonProps(aspect)}>
-              <BodyLarge {...toTextAspectProps(aspect)}>BodyLarge</BodyLarge>
+              <BodyLarge strong {...toTextAspectProps(aspect)}>BodyLarge/Strong</BodyLarge>
             </Button>
           </Column>
-          <Column>Reg 400 / Semibold 600</Column>
+          <Column>Semibold 600</Column>
           <Column>18px (1.125rem)</Column>
           <Column>28px</Column>
           <Column>0 px</Column>
@@ -209,10 +208,32 @@ export const TypographyTable: StoryComponent = () => {
         <Row gray>
           <Column>
             <Button {...toButtonProps(aspect)}>
-              <Body {...toTextAspectProps(aspect)}>Body</Body>
+              <BodyLarge {...toTextAspectProps(aspect)}>BodyLarge/Default</BodyLarge>
             </Button>
           </Column>
-          <Column>Reg 400 / Medium 500</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>
@@ -231,10 +252,21 @@ export const TypographyTable: StoryComponent = () => {
         <Row>
           <Column>
             <Button {...toButtonProps(aspect)}>
-              <Label1 {...toTextAspectProps(aspect)}>Label1</Label1>
+              <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>Reg 400 / Medium 500</Column>
+          <Column>Regular 400</Column>
           <Column>14px (0.875rem)</Column>
           <Column>20px</Column>
           <Column>0 px</Column>
@@ -242,7 +274,7 @@ export const TypographyTable: StoryComponent = () => {
         <Row>
           <Column>
             <Button {...toButtonProps(aspect)}>
-              <Label2 {...toTextAspectProps(aspect)}>Label2</Label2>
+              <Label subtle {...toTextAspectProps(aspect)}>Label/Subtle</Label>
             </Button>
           </Column>
           <Column>Regular 400</Column>