@edvisor/product-language 0.2.0 → 0.3.0

package/src/lib/components/organisms/multi-choice-list/stories/components.tsx

@@ -1,4 +1,5 @@
 import { Body, Heading4 } from '@components'
+import { isDefined } from '@helpers'
 import { Playground } from 'storybook-addon-jarle-monaco'
 import { MultiChoiceList } from '../index'
 
@@ -10,7 +11,6 @@ const [withError, setWithError] = useState(false);
 
 <form onSubmit={(e) => {
     e.preventDefault()
-    console.log('form submitted')
   }}
 >
   <MultiChoiceList options={[
@@ -24,14 +24,12 @@ const [withError, setWithError] = useState(false);
         setWithError(true);
       },
       onChange: function(e){
-        console.log('at stories', e);
         setWithError(false);
       }
     },
     {
       label: "My Awesome label",
       id: 'My checkbox 2',
-      checked: true,
       helpfulMessage: 'Alternative text here',
     },
   ]}
@@ -76,7 +74,7 @@ const [withError, setWithError] = useState(false);
 const options = Locations.map((location) => {
   return {
     ...location,
-    checked: locations.find((l) => l.id === location.id),
+    checked: isDefined(locations.find((l) => l.id === location.id)),
     onChange: (checked) => {
       if (checked) {
         setLocations([
@@ -97,7 +95,6 @@ const options = Locations.map((location) => {
 <>
   <form onSubmit={(e) => {
       e.preventDefault()
-      console.log('locations', locations)
     }}
   >
     <MultiChoiceList options={options}
@@ -120,6 +117,7 @@ const options = Locations.map((location) => {
         MultiChoiceList,
         Heading4,
         Body,
+        isDefined,
       },
     }}
   />

package/src/lib/components/organisms/multi-choice-list/stories/multi-choice-list.stories.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { MultiChoiceList } from '../index'
-import { PlainHTMLFormExample, ExampleWithStateManagement } from './index'
+import { MultiChoiceList } from '../multi-choice-list'
+import { PlainHTMLFormExample, ExampleWithStateManagement } from './components'
 
 <Meta
   title="Components/MultiChoiceList"
@@ -35,7 +35,7 @@ import { MultiChoiceList } from './index'
   <MultiChoiceList options={[
     {
       label: "My Awesome label",
-      checked: true,
+      defaultChecked: true,
       id: '1',
     },
     {
@@ -59,7 +59,7 @@ Also, you can send the altive text in order to helping user
     {
       label: "My Awesome label",
       id: 'My checkbox 1',
-      checked: true,
+      defaultChecked: true,
       error: true,
       helpfulMessage: 'Alternative text here',
     },

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

@@ -8,7 +8,7 @@ describe('Spinner Tests', () => {
         <Spinner />
       )
 
-      const spinner = screen.getByRole('progressbar')
+      const spinner = screen.getByRole('icon')
 
       expect(spinner).toBeInTheDocument()
       expect(spinner).toHaveStyle('height: 40px')
@@ -20,7 +20,7 @@ describe('Spinner Tests', () => {
         <Spinner small/>
       )
 
-      const spinner = screen.getByRole('progressbar')
+      const spinner = screen.getByRole('icon')
 
       expect(spinner).toBeInTheDocument()
       expect(spinner).toHaveStyle('height: 18px')

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

@@ -2,6 +2,7 @@ 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% {
@@ -18,26 +19,15 @@ const spinAnimation = keyframes`
   }
 `
 
-const Spin = styled.svg<{ size: string, onPrimary: boolean, onCritical: boolean }>`
-  width: ${({ size }) => size};
-  height: ${({ size }) => size};
-  fill: none;
-  path {
-    fill-rule: evenodd;
-    clip-rule: evenodd;
-    fill: ${({ onPrimary, onCritical }) => (onPrimary || onCritical) ? Icons.OnPrimary : Icons.Default};
-    stroke: ${({ onPrimary, onCritical }) => (onPrimary || onCritical) ? Icons.OnPrimary : Icons.Default};
-    -webkit-transform-origin: 20px 20 0;
-    -moz-transform-origin: 20px 20px 0;
-    -ms-transform-origin: 20px 20px 0;
-    -o-transform-origin: 20px 20px 0;
-    transform-origin: 20px 20px 0;
-    -webkit-animation: spinner 2s linear infinite;
-    -moz-animation: spinner 2s linear infinite;
-    -ms-animation: spinner 2s linear infinite;
-    -o-animation: spinner 2s linear infinite;
-    animation: spinner 2s linear infinite;
-    animation-name: ${spinAnimation};  
+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;
   }   
 `
 
@@ -52,15 +42,12 @@ export const Spinner : FC<IProps> = (props) => {
 
   return (
     <Spin
-      onPrimary={is(props.onPrimary)}
-      onCritical={is(props.onCritical)}
-      className={props.className}
-      size={size}
-      role="progressbar"
-      viewBox="0 0 40 40"
-      xmlns="http://www.w3.org/2000/svg"
+      $onPrimary={is(props.onPrimary)}
+      $onCritical={is(props.onCritical)}
+      $size={size}
+      className={props.className}      
     >
-      <path d="M20 3.5C10.8873 3.5 3.5 10.8873 3.5 20C3.5 29.1127 10.8873 36.5 20 36.5C20.2593 36.5 20.517 36.494 20.7732 36.4822C21.6007 36.4441 22.3578 37.0111 22.4704 37.8319C22.5831 38.6526 22.0089 39.4152 21.182 39.4647C20.7908 39.4881 20.3967 39.5 20 39.5C9.23045 39.5 0.5 30.7696 0.5 20C0.5 9.23045 9.23045 0.5 20 0.5C26.0299 0.5 31.4203 3.23815 34.9953 7.53374C35.5252 8.17049 35.3622 9.11117 34.6867 9.59078C34.0113 10.0704 33.0798 9.90641 32.5411 9.27701C29.5131 5.73882 25.018 3.5 20 3.5Z" />
+      <IconMinor.Spinner />
     </Spin>
   )
 }

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

@@ -1,8 +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 WrapperStories = styled.div`
-  width: 100%;
+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

@@ -1,9 +1,9 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { StoryComponent, talesOf, StorybookFrame } from '@stories'
 import { Spinner } from '../index'
-import { ButtonPrimary, ButtonDestructive } from 'components/molecules/button'
+import { Button } from 'components/molecules/button'
 
-import { WrapperStories } from './components'
+import { SpinnerCodeExample } from './components'
 
 <Meta title="Components/Spinner" />
 
@@ -32,11 +32,4 @@ import { Spinner } from './index'
 
 When rendering the spinner on a primary or critical surface, use onPrimary or onCritical.
 
-<Canvas>
-  <ButtonPrimary>
-    <Spinner onPrimary />
-  </ButtonPrimary>
-  <ButtonDestructive primary>
-    <Spinner onCritical />
-  </ButtonDestructive> 
-</Canvas>
+<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