@edvisor/product-language 0.1.1 → 0.3.0

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

@@ -0,0 +1,282 @@
+import styled from 'styled-components'
+
+import { Padding, Margin } from '@foundations'
+import { CardPlayground, Playground } from '@stories'
+
+import { CardFrame } from 'components/card/atoms'
+import { Tab, Tabs } from '../tabs'
+import { InputField as InputFieldBase } from 'components/input-field'
+import { Button } from 'components/molecules'
+import { Flex } from 'components/layout'
+import { Label } from 'components/typography'
+import { FC, Nothing } from '@helpers'
+import { Card } from 'components/card'
+import { IconMinor as Icon } from 'components/icon'
+
+const ContentFrame = styled(Tabs.Content)`
+  padding: ${Padding.l};
+`
+
+export const AdditionalControlsExample = () => (
+  <Playground
+    code={`
+const [selected, setSelected] = useState(0);
+
+<Tabs selected={selected} onChange={setSelected}>
+  <Tabs.TabList>
+    <div>This is not a tab.</div>
+    <Tab>No Icon</Tab>
+    <Tab Prefix={Icon.Comment}>With Icon</Tab>
+    <div>This is also not a tab.</div>
+  </Tabs.TabList>
+  <ContentFrame>
+    One
+  </ContentFrame>
+  <ContentFrame>
+    Two
+  </ContentFrame>
+</Tabs>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Tabs,
+        Tab,
+        ContentFrame,
+        Icon,
+        Card,
+      },
+    }}
+  />
+)
+
+export const CrazyTabsExample = () => (
+  <Playground
+    code={`
+const [selected, setSelected] = useState(0);
+
+<Tabs selected={selected} onChange={setSelected}>
+  <ContentFrame>
+    One
+  </ContentFrame>
+  <ContentFrame>
+    Two
+  </ContentFrame>
+  <div>This message will render on every tab</div>
+  <Tabs.TabList>
+    <Tab>No Icon</Tab>
+    <Tab Prefix={Icon.Comment}>With Icon</Tab>
+  </Tabs.TabList>
+</Tabs>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Tabs,
+        Tab,
+        ContentFrame,
+        Icon,
+        Card,
+      },
+    }}
+  />
+)
+
+export const TabsWithIconsExample = () => (
+  <Playground
+    code={`
+const [selected, setSelected] = useState(0);
+
+<Tabs selected={selected} onChange={setSelected}>
+  <Tabs.TabList>
+    <Tab>No Icon</Tab>
+    <Tab Prefix={Icon.Comment}>With Icon</Tab>
+  </Tabs.TabList>
+  <ContentFrame>
+    One
+  </ContentFrame>
+  <ContentFrame>
+    Two
+  </ContentFrame>
+</Tabs>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Tabs,
+        Tab,
+        ContentFrame,
+        Icon,
+        Card,
+      },
+    }}
+  />
+)
+
+export const RenderingContentExample = () => (
+  <Playground
+    code={`
+const [selected, setSelected] = useState(0);
+
+<Tabs selected={selected} onChange={setSelected}>
+  <Tabs.TabList>
+    <Tab Prefix={Icon.Comment}>Style Directly</Tab>
+    <Tab Prefix={Icon.GraduationCap}>Use sub-components</Tab>
+  </Tabs.TabList>
+  <ContentFrame>
+    This was styled directly.
+  </ContentFrame>
+  <Tabs.Content>
+    <Card>This is in a Card.</Card>
+  </Tabs.Content>
+</Tabs>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Tabs,
+        Tab,
+        ContentFrame,
+        Icon,
+        Card,
+      },
+    }}
+  />
+)
+
+const InputField = styled(InputFieldBase)`
+  margin-right: ${Margin.s};
+  flex-grow: 1;
+`
+
+const Controls = styled(Flex)`
+  width: 100%;
+  justify-content: end;
+  align-items: center;
+  padding-right: ${Padding.l};
+`
+
+const NationalityButton = styled(Button)`
+  display: flex;
+`
+
+const NationalityButtonPrefix: FC = () => {
+  return (
+    <Flex>
+      <Icon.Comment />
+      <Icon.GraduationCap />
+    </Flex>
+  )
+}
+
+export const TabsExample = () => (
+  <CardPlayground
+    code={`
+const [selected, setSelected] = useState(0);
+
+<Card>
+  <Tabs selected={selected} onChange={setSelected}>
+    <Tabs.TabList>
+      <Tab Prefix={Icon.Comment}>Language</Tab>
+      <Tab Prefix={Icon.GraduationCap}>Higher Ed.</Tab>
+      <Controls>
+        <NationalityButton 
+          plain subtle 
+          IconPrefix={NationalityButtonPrefix}
+        >
+          Brazil, Onshore
+        </NationalityButton>
+      </Controls>
+    </Tabs.TabList>
+    <ContentFrame>
+      <Flex center>
+        <InputField
+          label='Destination'
+          placeholder='Search'
+        />
+        <InputField
+          label='Provider'
+          placeholder='Any'
+        />
+        <InputField
+          label='Min. Number of Weeks'
+          placeholder='4'
+        />
+        <Button large primary>Search</Button>
+      </Flex>
+    </ContentFrame>
+    <ContentFrame>
+      In progress...
+    </ContentFrame>
+  </Tabs>
+</Card>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Tabs,
+        ContentFrame,
+        Tab,
+        InputField,
+        Flex,
+        Controls,
+        NationalityButton,
+        Label,
+        NationalityButtonPrefix,
+        Button,
+        Card: CardFrame,
+        Icon,
+      },
+    }}
+  />
+)
+
+export const StateManagementExample = () => (
+  <CardPlayground
+    code={`
+const [selected, setSelected] = useState(0);
+
+<Card>
+  <Tabs selected={selected} onChange={setSelected}>
+    <Tabs.TabList>
+      <Tab Prefix={Icon.Comment}>One</Tab>
+      <Tab Prefix={Icon.GraduationCap}>Two</Tab>
+      <Tab Prefix={Icon.Check}>Three</Tab>
+      {selected > 0 ? <Button onClick={() => setSelected(0)}>Reset</Button> : <Nothing />}
+    </Tabs.TabList>
+    <ContentFrame>
+      ONE
+      <Button onClick={() => setSelected(1)}>Next</Button>
+    </ContentFrame>
+    <ContentFrame>
+      TWO
+      <Button onClick={() => setSelected(2)}>Next</Button>
+      <Button onClick={() => setSelected(0)}>Back</Button>
+    </ContentFrame>
+    <ContentFrame>
+      THREE
+      <Button onClick={() => setSelected(1)}>Back</Button>
+    </ContentFrame>
+  </Tabs>
+</Card>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Tabs,
+        ContentFrame,
+        Tab,
+        InputField,
+        Flex,
+        Controls,
+        NationalityButton,
+        Label,
+        NationalityButtonPrefix,
+        Nothing,
+        Button,
+        Card: CardFrame,
+        Icon,
+      },
+    }}
+  />
+)

package/src/lib/components/tabs/storybook/tabs.stories.mdx

@@ -0,0 +1,97 @@
+import { Meta } from '@storybook/addon-docs';
+import { TabsExample, TabsWithIconsExample, RenderingContentExample, AdditionalControlsExample, StateManagementExample, CrazyTabsExample } from './components';
+
+<Meta title="Components/Tabs"/>
+
+# Tabs
+
+Tabs are used to organize content on a page into sections.
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7384)
+
+## How to Use It
+
+```tsx
+import { Tabs, Tab } from '@edvisor/product-language'
+
+const [selected, setSelected] = useState(0)
+
+<Tabs selected={selected} onChange={setSelected}>
+  <Tabs.TabList>
+    <Tab>One</Tab>
+    <Tab>Two</Tab>
+  </Tabs.TabList>
+
+  <Tabs.Content>
+    One
+  </Tabs.Content>
+  <Tabs.Content>
+    Two
+  </Tabs.Content>
+</Tabs>
+```
+
+### Rendering Content
+
+Put whatever you want in the `Content` part of the `Tabs` layout, or style the `Content` slot directly.
+
+```tsx
+// Add padding to the content slot
+const ContentFrame = styled(Tabs.Content)`
+  padding: ${Padding.l};
+`
+```
+
+<RenderingContentExample />
+
+### Tabs with Icons
+
+Add an icon of other simple components to the left of the `Tab` label.
+
+<TabsWithIconsExample />
+
+### Tabs with additional layout
+
+The `Tabs.TabList` slot will render all of its children. Only `Tab` children will be used to control the tabs.
+
+<AdditionalControlsExample />
+
+Use this to implement additional controls and configuration shared by the tabs.
+
+<TabsExample />
+
+### Content with additional layout
+
+The Tabs component will render any and all children in the order they are given. You can add children between the tabs and content, or you can put the tabs on the bottom.
+
+<CrazyTabsExample />
+
+### Managing State
+
+Pass an integer into the `selected` property of `Tabs` to manage its state.
+
+<StateManagementExample />
+
+## API
+
+### `Tabs`
+
+| Prop       | Type                         | Description                                             |
+| ---------- | ---------------------------- | ------------------------------------------------------- |
+| `selected` | `number`                     | Determines which tab is selected                        |
+| `onChange` | `(selected: number) => void` | Announces when the currently selected tab should change |
+
+### `Tab`
+
+Extends `HTMLAttributes<HTMLDivElement>`
+
+| Prop       | Type         | Description                                 |
+| ---------- | ------------ | ------------------------------------------- |
+| `selected` | `boolean?`   | Whether this tab is selected                |
+| `Prefix`   | `Component?` | A component to render in front of the label |
+
+## Changelog
+
+### [0.0.1]
+ - add primary tabs
+ - currently we can control the tabs with the "tab" key, but later we should implement the UX described here: https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic

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'