npm - @edvisor/product-language - Versions diffs - 0.9.0 → 0.10.2 - Mend

@edvisor/product-language 0.9.0 → 0.10.2

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 (407) hide show

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

@@ -0,0 +1,53 @@
+import styled from 'styled-components'
+import { FC, isDefined, isEmpty, Nothing } from '@helpers'
+import { Margin } from '@foundations'
+import { Flex } from 'components/layout'
+import { Label } from 'components/typography'
+import { IInputCheckboxProps, InputCheckbox } from 'components/molecules/input-checkbox'
+const HelpfulMessage = styled(Label)`
+  margin-top: ${Margin.xxs};
+  margin-left: ${Margin.xl};
+  user-select: none;
+`
+const Group = styled(Flex)`
+  width: 100%;
+  flex-direction: column;
+  gap: 18px;
+`
+interface IOption extends IInputCheckboxProps {
+  helpfulMessage?: string
+}
+interface IMultiChoiceList {
+  options: IOption[]
+  className?: string
+}
+export const MultiChoiceList: FC<IMultiChoiceList> = (props: IMultiChoiceList) => {
+  const { options, className = '' } = props
+  if (isEmpty(options)) {
+    return <Nothing />
+  }
+  return (
+    <Group role="group" className={className}>
+      {options.map((option:IOption) => (
+        <div key={option.id}>
+          <InputCheckbox
+            aria-describedby={isDefined(option.helpfulMessage)
+              ? `${option.id}-id`
+              : ''
+            }
+            {...option}
+          />
+          {isDefined(option.helpfulMessage) && (
+            <HelpfulMessage subdued id={`${option.id}-id`}>
+              {option.helpfulMessage}
+            </HelpfulMessage>
+          )}
+        </div>
+      ))}
+    </Group>
+  )
+}

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/progress-bar/index.ts ADDED Viewed

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

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

@@ -0,0 +1,37 @@
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+const enum ProgressBarSize {
+  small = 1,
+  medium = 2,
+  large = 4,
+}
+type ProgressBarSizes<T> = MappedEnum<typeof ProgressBarSize, T>
+function toProgressBarSize(n: number): ProgressBarSize {
+  switch (n) {
+    case ProgressBarSize.medium:
+      return ProgressBarSize.medium
+    case ProgressBarSize.large:
+      return ProgressBarSize.large
+    case ProgressBarSize.small:
+    default:
+      return ProgressBarSize.small
+  }
+}
+const ProgressBarValues = {
+  [ProgressBarSize.small]: '8px',
+  [ProgressBarSize.medium]: '16px',
+  [ProgressBarSize.large]: '32px',
+}
+export type IProgressBarSizeProps = Partial<RequireOnlyOne<ProgressBarSizes<boolean>>>
+export function getValuesBySize(props: IProgressBarSizeProps): string {
+  return ProgressBarValues[
+    toProgressBarSize(
+      bitwiseOr([props.small, props.medium, props.large])
+    )
+  ]
+}

package/src/lib/components/progress-bar/progress-bar.test.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+import {render, screen } from '@testing-library/react'
+import { ProgressBar } from './index'
+describe('ProgressBar Tests', () => {
+  describe('ProgressBar Tests', () => {
+    it('should render the ProgressBar with default size', async () => {
+      render(
+        <ProgressBar progress={10} />
+      )
+      const progressBar = screen.getByRole('progressbar')
+      expect(progressBar).toBeInTheDocument()
+    })
+    it('should render the ProgressBar with large size', async () => {
+      render(
+        <ProgressBar progress={4} large />
+      )
+      const progressBar = screen.getByRole('progressbar')
+      expect(progressBar).toBeInTheDocument()
+      expect(progressBar).toHaveStyle('height: 32px')
+    })
+    it('should render the ProgressBar with small size', async () => {
+      render(
+        <ProgressBar progress={4} small />
+      )
+      const progressBar = screen.getByRole('progressbar')
+      expect(progressBar).toBeInTheDocument()
+      expect(progressBar).toHaveStyle('height: 8px')
+    })
+    it('should render the ProgressBar with medium size', async () => {
+      render(
+        <ProgressBar progress={4} medium />
+      )
+      const progressBar = screen.getByRole('progressbar')
+      expect(progressBar).toBeInTheDocument()
+      expect(progressBar).toHaveStyle('height: 16px')
+    })
+    it('should render the ProgressBar with its width reflecting the progress', async () => {
+      render(
+        <ProgressBar progress={85} large />
+      )
+      const progressBar = screen.getByRole('progressbar')
+      expect(progressBar).toBeInTheDocument()
+      expect(progressBar).toHaveStyle('width: 85%')
+    })
+  })
+})

package/src/lib/components/progress-bar/progress-bar.tsx ADDED Viewed

@@ -0,0 +1,42 @@
+import { InputHTMLAttributes } from 'react'
+import { Surface, Actions } from '@foundations'
+import { FC } from '@helpers'
+import styled from 'styled-components'
+import { getValuesBySize, IProgressBarSizeProps } from './progress-bar-size-flags'
+const ProgressContainerBar = styled.div`
+  background-color: ${Surface.Neutral.Default};
+  width: 100%;
+  height: fit-content;
+  border-radius: 6px;
+  overflow: hidden;
+  `
+const ProgressContentBar = styled.div<{progress: number, size: string}>`
+  background-color: ${Actions.Primary.Default};
+  height: ${({size}) => size};
+  width: ${({progress}) => progress}%;
+  border-radius: 6px;
+`
+export interface IProgressBarProps {
+  progress: number
+}
+export type IProgressBar = IProgressBarProps & IProgressBarSizeProps & InputHTMLAttributes<HTMLInputElement>
+export const ProgressBar: FC<IProgressBar> = (props: IProgressBar) => {
+  const size = getValuesBySize(props)
+  const {
+    progress = 0
+  } = props
+  return (
+    <ProgressContainerBar >
+      <ProgressContentBar size={size} aria-valuenow={progress} progress={progress} role="progressbar"></ProgressContentBar>
+    </ProgressContainerBar>
+  )
+}

package/src/lib/components/progress-bar/storybook/components.tsx ADDED Viewed

@@ -0,0 +1,62 @@
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { ProgressBar } from '../progress-bar'
+import styled from 'styled-components'
+import { Padding } from '@foundations'
+const Container = styled.div`
+  padding: ${Padding.m} ${Padding.none};
+`
+export const ProgressBarExample = () => (
+  <Playground
+    code={`
+<ProgressBar
+  small
+  progress={40}
+/>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        ProgressBar,
+      },
+    }}
+  />
+)
+export const ProgressBarSizesExample = () => (
+  <Playground
+    code={`
+<>
+  <Container>
+    <ProgressBar
+      small
+      progress={67}
+    />
+  </Container>
+  <Container>
+    <ProgressBar
+      medium
+      progress={67}
+    />
+  </Container>
+  <Container>
+    <ProgressBar
+      large
+      progress={67}
+    />
+  </Container>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Container,
+        ProgressBar,
+      },
+    }}
+  />
+)

package/src/lib/components/progress-bar/storybook/progress-bar.stories.mdx ADDED Viewed

@@ -0,0 +1,43 @@
+import { Canvas } from '@storybook/addon-docs';
+import { ProgressBar } from '../progress-bar'
+import { ProgressBarExample, ProgressBarSizesExample } from './components'
+<Meta title="Components/ProgressBar" component={ProgressBar}/>
+# Progress Bar
+The progress bar component is used to visually represent the completion of a task or operation. It shows how much of the task has been completed and how much is still left.
+Use the size option when you need to increase or decrease the visual weight of the progress bar.
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=2023%3A5186&t=6zKIyjhCtOGTsM1C-0)
+## How to use it
+```jsx
+// Import the component
+import { ProgressBar } from '@edvisor/product-language'
+// Render the component sending the required parameters
+<ProgressBar
+  progress={40}
+>
+  <Body>Modal text</Body>
+</ProgressBar>
+```
+## Example
+<ProgressBarExample />
+## Diferent sizes
+<ProgressBarSizesExample />
+## API
+| Prop       | Type                | Description                                                     |
+| -----------| ------------------- | --------------------------------------------------------------- |
+| `progress` | `number`            | a number between 0 and 100 indicating the progress percentage   |
+| `size`     | `string`            | The size of the Progress Bar (small \| medium \| large)                 |

package/{lib/components/spinner/index.d.ts → src/lib/components/radio-button/index.tsx} RENAMED Viewed

	@@ -1 +1 @@
1	- export * from './~~spinner~~';
1	+ export * from './radio-button'

package/src/lib/components/radio-button/radio-button.tsx ADDED Viewed

@@ -0,0 +1,135 @@
+import { InputHTMLAttributes } from 'react'
+import styled from 'styled-components'
+import {
+  Margin,
+  Padding,
+  Focused,
+  Borders,
+  Icons,
+  Surface,
+  Typography
+} from '@foundations'
+import { FC, is } from '@helpers'
+export const Radio = styled.input`
+  -webkit-appearance: none;
+  appearance: none;
+  margin: ${Margin.none};
+  width: 1.5em;
+  height: 1.5em;
+  border: 2px solid ${Borders.Default.Dark};
+  border-radius: 50%;
+  transition: all 0.1s ease-in-out;
+  cursor: pointer;
+  ::after {
+    content: "";
+    display: block;
+    border-radius: 50%;
+    width: 0.75em;
+    height: 0.75em;
+    margin: ${3}px;
+  }
+  :checked {
+    border-color: ${Borders.Highlight.Default};
+    ::after {
+      background-color: ${Icons.Highlight};
+    }
+    :hover {
+      background-color: ${Surface.Default.Default};
+      border: 2px solid ${Icons.Highlight};
+      ::after {
+        background-color: ${Icons.Highlight};
+      }
+    }
+  }
+  :hover {
+    ::after {
+      background-color: ${Focused.Default};
+    }
+  }
+  :focus {
+    outline: 2px auto ${Focused.Default};
+    outline-offset: 4px;
+  }
+  :disabled {
+    cursor: not-allowed;
+    border: 2px solid ${Borders.Default.Default};
+    background-color: ${Surface.Default.Default};
+    :hover {
+      ::after {
+        background-color: ${Surface.Default.Default};
+      }
+    }
+    :checked {
+      ::after {
+        background-color: ${Borders.Default.Default};
+      }
+      :hover {
+        border-color: ${Borders.Default.Default};
+        background-color: ${Surface.Default.Default};
+        ::after {
+          background-color: ${Borders.Default.Default};
+        }
+      }
+    }
+  }
+`
+const Label = styled.label<{disabled: boolean}>`
+  ${Typography.Label}
+  padding: ${Padding.xxs} ${Padding.none};
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  cursor: ${(props) => is(props.disabled) ? 'not-allowed' : 'pointer'};
+`
+const LabelText = styled.span`
+  margin-left: ${Margin.xs};
+`
+export interface InputElementProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  id: string;
+  key?: string;
+  disabled?: boolean;
+}
+interface IRadioProps {
+  label?: string
+  disabled?: boolean
+  checked?: boolean
+  className?: string
+}
+type IProps = IRadioProps & InputHTMLAttributes<HTMLInputElement>
+export const RadioButton: FC<InputElementProps> = (props: IProps) => {
+  const {
+    className,
+    label,
+    disabled,
+    ...htmlProps
+  } = props
+  return (
+    <Label
+      disabled={is(disabled)}
+      className={className}
+    >
+      <Radio
+        type="radio"
+        disabled={disabled}
+        {...htmlProps}
+      />
+      <LabelText>
+        {label}
+      </LabelText>
+    </Label>
+  )
+}