npm - @edvisor/product-language - Versions diffs - 0.1.1 → 0.3.0 - Mend

@edvisor/product-language 0.1.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (261) hide show

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

@@ -0,0 +1,124 @@
+import { Body, Heading4 } from '@components'
+import { isDefined } from '@helpers'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { MultiChoiceList } from '../index'
+export const PlainHTMLFormExample = () => (
+  <Playground
+    code={`
+/* Edit this code sample! */
+const [withError, setWithError] = useState(false);
+<form onSubmit={(e) => {
+    e.preventDefault()
+  }}
+>
+  <MultiChoiceList options={[
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 1',
+      required: true,
+      error: withError,
+      helpfulMessage: 'Alternative text here',
+      onInvalid: function(e){
+        setWithError(true);
+      },
+      onChange: function(e){
+        setWithError(false);
+      }
+    },
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 2',
+      helpfulMessage: 'Alternative text here',
+    },
+  ]}
+  />
+  <input type="submit"/>
+</form>
+`}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        MultiChoiceList,
+      },
+    }}
+  />
+)
+export const ExampleWithStateManagement = () => (
+  <Playground
+    code={`
+/* Edit this code sample! */
+const Locations = [
+  {
+    label: "Vancouver, BC",
+    id: 1,
+  },
+  {
+    label: "Toronto, ON",
+    id: 2,
+  },
+  {
+    label: "Quebec, QC",
+    id: 3,
+  },
+  {
+    label: "Montreal, QC",
+    id: 4,
+  },
+];
+const [locations, setLocations] = useState([]);
+const [withError, setWithError] = useState(false);
+const options = Locations.map((location) => {
+  return {
+    ...location,
+    checked: isDefined(locations.find((l) => l.id === location.id)),
+    onChange: (checked) => {
+      if (checked) {
+        setLocations([
+          ...locations,
+          location,
+        ])
+      } else {
+        const i = locations.findIndex((l) => l.id === location.id)
+        locations.splice(i, 1)
+        setLocations([
+          ...locations
+        ])
+      }
+    }
+  }
+});
+<>
+  <form onSubmit={(e) => {
+      e.preventDefault()
+    }}
+  >
+    <MultiChoiceList options={options}
+    />
+    <input type="submit"/>
+  </form>
+  <div>
+    <Heading4>Your Selection</Heading4>
+    {locations.map((location) => {
+      return (
+        <Body key={location.id}>{location.label}</Body>
+      )
+    })}
+  </div>
+</>
+`}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        MultiChoiceList,
+        Heading4,
+        Body,
+        isDefined,
+      },
+    }}
+  />
+)

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

@@ -0,0 +1,99 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { MultiChoiceList } from '../multi-choice-list'
+import { PlainHTMLFormExample, ExampleWithStateManagement } from './components'
+<Meta
+  title="Components/MultiChoiceList"
+  component={MultiChoiceList}
+/>
+# MultiChoiceList
+This is a organism, composed by checkbox molecule and some atoms.
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1097%3A2349)
+## How to use
+```javascript
+// Import the component
+import { MultiChoiceList } from './index'
+// Render the component sending the required parameters
+<MultiChoiceList options={[
+  {
+    label: 'My Awesome label',
+    checked: true,
+    id: '1',
+  }]
+/>
+```
+## Examples
+<Canvas>
+  <MultiChoiceList options={[
+    {
+      label: "My Awesome label",
+      defaultChecked: true,
+      id: '1',
+    },
+    {
+      label: "My label",
+      id: '2',
+    },
+    {
+      label: "My label",
+      id: '3',
+    },
+    {
+      label: "My label",
+      id: '4',
+    },
+  ]}/>
+</Canvas>
+Also, you can send the altive text in order to helping user
+<Canvas>
+  <MultiChoiceList options={[
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 1',
+      defaultChecked: true,
+      error: true,
+      helpfulMessage: 'Alternative text here',
+    },
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 2',
+      helpfulMessage: 'Alternative text here',
+    },
+    {
+      label: "My Awesome label",
+      id: 'My checkbox 3',
+      helpfulMessage: 'Alternative text here',
+    }
+  ]}/>
+</Canvas>
+## API
+This component receive a list (`options` parameter) from N amount of Checkbox if you'd like to render.
+So all the possible values from Checkbox component can be passed here.
+Also, you can sen this parameters:
+| Name | Type | Description | Required (Y/N)|
+| ---- | ----- | ------ | ----- |
+| `id` | `string` | `The id from each checkbox in the list` | `Y` |
+| `helpfulMessage` | `string` | `Message that will be render bellow each checkbox field` | `N` |
+## Playground
+<PlainHTMLFormExample />
+### With State Management Example
+<ExampleWithStateManagement />
+## Changelog
+ - Offer the "indeterminate" behavior to render this list nesting

package/src/lib/components/spinner/index.tsx ADDED Viewed

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

package/src/lib/components/spinner/spinner-size-flags.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+const enum SpinnerSize {
+  small = 1,
+  medium = 2,
+  large = 4,
+}
+type SpinnerSizes<T> = MappedEnum<typeof SpinnerSize, T>
+function toSpinner(n: number): SpinnerSize {
+  switch (n) {
+    case SpinnerSize.small:
+      return SpinnerSize.small
+    case SpinnerSize.medium:
+      return SpinnerSize.medium
+    case SpinnerSize.large:
+      return SpinnerSize.large
+    default:
+      return SpinnerSize.medium
+  }
+}
+const SpinnerValues = {
+  [SpinnerSize.small]: '18px',
+  [SpinnerSize.medium]: '40px',
+  [SpinnerSize.large]: '60px',
+}
+export type SpinnerProps = Partial<RequireOnlyOne<SpinnerSizes<boolean>>> &
+  PropsWithChildren
+export function getValuesBySize(props: SpinnerProps): string {
+  return SpinnerValues[
+    toSpinner(
+      bitwiseOr([props.small, props.medium, props.large])
+    )
+  ]
+}

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

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { Spinner } from './index'
+describe('Spinner Tests', () => {
+  describe('Spinner Tests', () => {
+    it('should render the Spinner with default size', async () => {
+      render(
+        <Spinner />
+      )
+      const spinner = screen.getByRole('icon')
+      expect(spinner).toBeInTheDocument()
+      expect(spinner).toHaveStyle('height: 40px')
+    })
+    it('should render the Spinner with small size', async () => {
+      render(
+        <Spinner small/>
+      )
+      const spinner = screen.getByRole('icon')
+      expect(spinner).toBeInTheDocument()
+      expect(spinner).toHaveStyle('height: 18px')
+    })
+  })
+})

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

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