@edvisor/product-language 0.9.0 → 0.10.2

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,85 @@
+import { CSSProperties, HTMLAttributes, useEffect, useRef } from 'react'
+import { FC, isDefined, Nothing, PropsWithChildren } from '@helpers'
+import { Borders, Margin, Padding, Surface } from '@foundations'
+import { Label } from 'components/typography'
+
+const getStylesToTypePrimary: (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}`
+  },
+})
+
+const getStylesToTypeSecondary: (props: { selected: boolean }) => CSSProperties = ({ selected }) => ({
+  display: 'flex',
+  padding: `${Padding.xs} ${Padding.m}`,
+  border: !selected ? `1px solid ${Surface.Default.Depressed}` : '1px solid transparent',
+  cursor: 'pointer',
+  outline: 'none',
+  boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)',
+  background: selected ? `${Surface.Default.Depressed}` : `${Surface.Default.Default}`,
+  borderRadius: '18px',
+  alignItems: 'center'
+})
+
+const getStylesByType = (secondary: boolean, selected: boolean): CSSProperties => {
+  if (secondary) {
+    return getStylesToTypeSecondary({ selected })
+  }
+  return getStylesToTypePrimary({ selected })
+}
+
+export interface ITabProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
+  Prefix?: FC<HTMLAttributes<HTMLElement>>
+  selected?: boolean
+  secondary?: boolean
+}
+
+export const Tab: FC<ITabProps> = (props) => {
+  const {
+    Prefix,
+    selected = false,
+    secondary = 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={getStylesByType(secondary, selected)}
+    >
+      {isDefined(Prefix) ? <Prefix style={{ marginRight: Margin.xs}} /> : <Nothing />}
+      <Label
+        strong
+        subdued={!selected && !secondary}>
+        {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,317 @@
+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,
+      },
+    }}
+  />
+)
+
+export const RenderingSecondaryTabExample = () => (
+  <Playground
+    code={`
+const [selected, setSelected] = useState(0);
+
+<Tabs selected={selected} onChange={setSelected} secondary>
+  <Tabs.TabList>
+    <Tab>No Icon</Tab>
+    <Tab Prefix={Icon.Comment}>With Icon</Tab>
+    <Tab>No Icon as Well</Tab>
+  </Tabs.TabList>
+  <ContentFrame>
+    One
+  </ContentFrame>
+  <ContentFrame>
+    Two
+  </ContentFrame>
+  <ContentFrame>
+    Three
+  </ContentFrame>
+</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,105 @@
+import { Meta } from '@storybook/addon-docs';
+import { TabsExample, TabsWithIconsExample, RenderingContentExample, AdditionalControlsExample, StateManagementExample, CrazyTabsExample, RenderingSecondaryTabExample } 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 />
+
+### Secondary
+
+Send the secondary parameter in order to render tabs component as secondary
+variation
+
+<RenderingSecondaryTabExample />
+
+
+### 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                                             |
+| ---------- | ---------------------------- | ------------------------------------------------------- |
+| `secondary`| `boolean`                    | Determines if should render as secondary variation      |
+| `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]
+ - 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