@edvisor/product-language 0.6.0 → 0.7.0-rc1

package/src/lib/components/spinner/spinner.tsx

@@ -0,0 +1,54 @@
+import { getValuesBySize, SpinnerProps } from './spinner-size-flags'
+import { FC, is } from '@helpers'
+import styled, { keyframes } from 'styled-components'
+import { Icons } from '@foundations'
+import { IconMinor } from 'components/icon'
+
+const spinAnimation = keyframes`
+  0% {
+    transform: rotate(0deg);
+    stroke-dashoffset: 25;
+  }
+  50% {
+    transform: rotate(720deg);
+    stroke-dashoffset: 125;
+  }
+  100% {
+    transform: rotate(1080deg);
+    stroke-dashoffset: 25;
+  }
+`
+
+const Spin = styled.div<{ $size: string, $onPrimary: boolean, $onCritical: boolean }>`
+  svg {
+    width: ${({ $size }) => $size};
+    height: ${({ $size }) => $size};
+    position: unset;
+    path {
+      fill: ${({ $onPrimary, $onCritical }) => ($onPrimary || $onCritical) ? Icons.OnPrimary : Icons.Default}; 
+    }
+    animation: ${spinAnimation} infinite 2s linear;
+  }   
+`
+
+type IProps = SpinnerProps & {
+  onPrimary?: boolean
+  onCritical?: boolean
+  className?: string
+}
+
+export const Spinner : FC<IProps> = (props) => {
+  const size = getValuesBySize(props)
+
+  return (
+    <Spin
+      $onPrimary={is(props.onPrimary)}
+      $onCritical={is(props.onCritical)}
+      $size={size}
+      className={props.className}      
+    >
+      <IconMinor.Spinner />
+    </Spin>
+  )
+}
+

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

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+import { Padding, Surface } from '@foundations'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { Button } from 'components/molecules'
+import { Spinner } from '../spinner'
+
+export const Div = styled.div`
+  padding: ${Padding.s};
+  background: ${Surface.Default.Default};
+  display: flex;
+  gap: 20px;
+`
+
+export const SpinnerCodeExample = () => (
+  <Playground
+    code={`
+      // Try replacing the Button types.
+      <Div>
+        <Button primary>
+          <Spinner onPrimary />
+        </Button>
+        <Button destructive primary>
+          <Spinner onCritical />
+        </Button> 
+        <Button destructive>
+          <Spinner onCritical />
+        </Button>
+      </Div>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Button,
+        Spinner,
+        Div,
+      },
+    }}
+  />
+) 

package/src/lib/components/spinner/stories/spinner.stories.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { StoryComponent, talesOf, StorybookFrame } from '@stories'
+import { Spinner } from '../index'
+import { Button } from 'components/molecules/button'
+
+import { SpinnerCodeExample } from './components'
+
+<Meta title="Components/Spinner" />
+
+# Spinner
+
+Spinners are used to notify users that their action is being processed.
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7380)
+
+## How to Use
+
+```tsx
+import { Spinner } from './index'
+
+<Spinner />
+```
+
+### Size
+ 
+<Canvas>
+  <Spinner small/>
+  <Spinner />
+</Canvas>
+
+### On primary
+
+When rendering the spinner on a primary or critical surface, use onPrimary or onCritical.
+
+<SpinnerCodeExample/>

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

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

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

@@ -0,0 +1,62 @@
+import { CSSProperties, HTMLAttributes, useEffect, useRef } from 'react'
+import { FC, isDefined, Nothing, PropsWithChildren } from '@helpers'
+import { Borders, Margin, Padding } from '@foundations'
+import { Label } from 'components/typography'
+
+const styles: (props: { selected: boolean }) => CSSProperties = ({ selected }) => ({
+  display: 'flex',
+  padding: Padding.m,
+  cursor: 'pointer',
+  outline: 'none',
+  borderBottom: selected ? `3px solid ${Borders.Highlight.Default}` : '',
+  ':focus': {
+    borderBottom: `3px solid ${Borders.Highlight.Default}`
+  },
+})
+
+export interface ITabProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
+  Prefix?: FC<HTMLAttributes<HTMLElement>>
+  selected?: boolean
+}
+
+export const Tab: FC<ITabProps> = (props) => {
+  const {
+    Prefix,
+    selected = false,
+    ...rest
+  } = props
+
+  // eslint-disable-next-line no-null/no-null
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    selected ? ref.current?.focus() : ref.current?.blur()
+  }, [selected])
+
+  /** 
+   * @TODO this is a hack to be able to use the ref in react-web-client
+   * RWC uses styled-components < v4 and expects the ref to be passes as
+   * "innerRef" not just "ref", but product-language uses > v4 and wants
+   * to use ref. So for some components that need a ref, like this one
+   * we will have to use a div and style it the old fashioned way until
+   * we upgrade rwc's styled-components or drop rwc
+   */
+  return (
+    <div
+      {...rest}
+      tabIndex={0}
+      onClick={() => {
+        ref.current?.focus()
+      }}
+      role={'tab'}
+      aria-selected={selected}
+      ref={ref}
+      style={styles({ selected })}
+    >
+      {isDefined(Prefix) ? <Prefix style={{ marginRight: Margin.xs}} /> : <Nothing />}
+      <Label strong subdued={!selected}>
+        {props.children}
+      </Label>
+    </div>
+  )
+}

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

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

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