@edvisor/product-language 0.2.0 → 0.3.1

package/src/lib/components/checkbox/components/components.tsx

@@ -1,59 +0,0 @@
-import styled, { css } from 'styled-components'
-import { Padding, Surface, Borders, Actions } from '@foundations'
-
-interface ICheckedProps {
-  checked: boolean;
-}
-
-export const getHoverStyles = () => css`
-  background: ${Surface.Default.Hover};
-`
-
-export const getDisabledStyles = () => css`
-  pointer-events: none;
-  background: ${(props: ICheckedProps) => (props.checked === true ? `${Borders.Default.Default}`: `${Surface.Default.Subdued}` )};
-  border-color: ${Borders.Default.Default};
-`
-
-export const getInvalidStyles = () => css`
-  background: ${(props: ICheckedProps) => (props.checked === true ? `${Actions.Critical.Default}`: `${Surface.Critical.Subdued}`)};
-  border: 2px solid ${Borders.Critical.Default};
-`
-
-export const HiddenCheckbox = styled.input`
-  border: 0;
-  clip: rect(0 0 0 0);
-  clippath: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: ${Padding.none};
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-`
-
-export const Icon = styled.svg`
-  width: 100%;
-  height: 50%;
-`
-
-export const Wrapper = styled.div`
-  width: 18px;
-  height: 100%;
-`
-
-export const getTabIndexValue = (
-  disabled: boolean
-): number => {
-  return disabled ? -1 : 0
-}
-
-export const getCheckedIcon = () => (
-  <Icon width="10" height="8" viewBox="0 0 10 8">
-    <path
-      d="M4.50846 7.37941C4.0689 7.81898 3.35108 7.81898 2.91151 7.37941L0.330581 4.79848C-0.110194 4.35892 -0.110194 3.64109 0.330581 3.20153C0.770146 2.76196 1.48797 2.76196 1.92753 3.20153L3.70999 4.98399L8.07338 0.620598C8.51294 0.181033 9.23076 0.181033 9.67033 0.620598C10.1099 1.06016 10.1099 1.77798 9.67033 2.21755L4.50846 7.37941Z"
-      fill="white"
-    />
-  </Icon>
-)

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

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

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

@@ -1,54 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Checkbox } from '../index'
-import { PlainHTMLFormExample } from './index'
-
-<Meta
-  title="Components/Checkbox"
-  component={Checkbox}
-/>
-
-# Checkbox
-
-This is an atom.
-
-For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1008%3A1257)
-
-## How to use
-
-```javascript
-// Import the component
-import { Checkbox } from './index'
-
-
-// Render the component sending the required parameters
-<Checkbox />
-```
-
-## Examples
-
-<Canvas>
-  <Checkbox onChange={(e) => console.log('at stories', e)} />
-  <Checkbox disabled />
-  <Checkbox error />
-  <Checkbox checked />
-  <Checkbox error checked />
-</Canvas>
-
-
-## API
-
-| Name | Type | Description | Required (Y/N)|
-| ---- | ----- | ------ | ------- |
-| `checked` | `boolean` | `Set checkbox as filled` | `N` |
-| `disabled` | `boolean` | `Set checkbox as a disabled way (can't click or interact with that)` | `N` |
-| `error` | `boolean` | `Useful to work inside a form or show some feedback from user action` | `N` |
-| `onChange` | `event` | `You can listen the changes from the component` | `N` |
-
-
-## Playground
-
-<PlainHTMLFormExample />
-
-## Changelog
- - Offer the "indeterminate" style
- - Get feedback from the component usage (we can migrate to just rendering with css pseudo elements if necessary)

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

@@ -1,36 +0,0 @@
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { Checkbox } from '../checkbox'
-
-export const PlainHTMLFormExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [withError, setWithError] = useState(false);
-
-<form onSubmit={(e) => {
-    e.preventDefault()
-    console.log('form submitted')
-  }}
->
-  <label htmlFor="accept_terms">Accept the terms:</label>
-  <Checkbox
-    onInvalid={(e) => {
-      setWithError(true)
-    }}
-    error={withError}
-    onChange={(e) => {
-      console.log('at stories', e)
-      setWithError(false)
-    }}
-    required />
-  <input type="submit"/>
-</form>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Checkbox,
-      },
-    }}
-  />
-)

package/src/lib/components/checkbox/stories/index.tsx

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

package/src/lib/components/divider/divider-type-flags.tsx

@@ -1,37 +0,0 @@
-// this file was generated, but it is safe to modify
-import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
-import { Borders } from '@foundations'
-
-const enum DividerType {
-  default = 1,
-  subdued = 2,
-}
-
-type DividerTypes<T> = MappedEnum<typeof DividerType, T>
-
-function toDividerType(n: number): DividerType {
-  switch (n) {
-    case DividerType.default:
-      return DividerType.default
-    case DividerType.subdued:
-      return DividerType.subdued
-    default:
-      return DividerType.default
-  }
-}
-
-const DividerTypeColor = {
-  [DividerType.default]: Borders.Default.Default,
-  [DividerType.subdued]: Borders.Default.Subdued,
-}
-
-export type DivideTypeProps = Partial<RequireOnlyOne<DividerTypes<boolean>>> &
-  PropsWithChildren
-
-export function getColor(props: DivideTypeProps): string {
-  return DividerTypeColor[
-    toDividerType(
-      bitwiseOr([props.default, props.subdued])
-    )
-  ]
-}

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

@@ -1,34 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { Divider } from './index'
-import { Borders } from '@foundations'
-
-describe('Divider Tests', () => {
-  describe('Divider Tests', () => {
-    it('should render the Divider with default color', async () => {
-      render(
-        <Divider/>
-      )
-
-      expect(screen.getByTestId('divider-test')).toBeInTheDocument()
-      expect(screen.getByTestId('divider-test')).toHaveStyle(`border: 1px solid ${Borders.Default.Default}`)
-    })
-
-    it('should render the Divider with default color using parameter', async () => {
-      render(
-        <Divider default/>
-      )
-
-      expect(screen.getByTestId('divider-test')).toBeInTheDocument()
-      expect(screen.getByTestId('divider-test')).toHaveStyle(`border: 1px solid ${Borders.Default.Default}`)
-    })
-
-    it('should render the Divider with subdued color', async () => {
-      render(
-        <Divider subdued/>
-      )
-
-      expect(screen.getByTestId('divider-test')).toBeInTheDocument()
-      expect(screen.getByTestId('divider-test')).toHaveStyle(`border: 1px solid ${Borders.Default.Subdued}`)
-    })
-  })
-})

package/src/lib/components/divider/divider.tsx

@@ -1,37 +0,0 @@
-import styled from 'styled-components'
-import { FC } from '@helpers'
-import { DivideTypeProps, getColor } from './divider-type-flags'
-
-/** 
- * @TODO I added flex here because without it the bottom margin was
- * being collapsed with the next sibling (when I applied margins to the divider,
- * which I expect we basically _always_ will)
- * 
- * I'm not confident with reasoning about margin-collapse so if you see
- * this comment and feel like experimenting, go crazy. Check out the
- * card stories for an example of the divider (it's way at the bottom)
- */
-const DividerWrapper = styled.div`
-  position: relative;
-  width:100%;
-`
-
-const DividerLine = styled.hr<{ color: string }>`
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin: unset;
-  border: 1px solid ${({ color }) => color};
-`
-
-type IProps = { className?: string } & DivideTypeProps
-
-export const Divider: FC<IProps> = (props) => {
-  const color = getColor(props)
-
-  return (
-    <DividerWrapper className={props.className}>
-      <DividerLine color={color} data-testid="divider-test"/>
-    </DividerWrapper>
-  )
-}

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

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

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

@@ -1,13 +0,0 @@
-import styled from 'styled-components'
-import { Padding, Surface } from '@foundations'
-
-
-const WrapperStories = styled.div`
-  width: 390px;
-  padding: ${Padding.l};
-  background: ${Surface.Default.Default};
-`
-
-export {
-  WrapperStories
-}

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

@@ -1,50 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Divider } from '../index'
-import { WrapperStories, AvatarsWithText, AvatarsWithImage, WrapperStoriesWithLabel } from './components'
-
-<Meta
-  title="Components/Divider"
-  component={Divider}
-/>
-
-# Divider
-
-For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1194%3A1611)
-
-## How to use
-
-```javascript
-// Import the component
-import { Divider } from './index'
-
-
-// Render the component sending the parameters
-<Divider default/>
-
-//or
-
-<Divider subdued/>
-```
-
-## Examples
-
-Default Divider
-
-<Canvas>
-  <Story name="default">
-    <WrapperStories>
-      <Divider default/>
-    </WrapperStories>
-  </Story>
-</Canvas>
-
-Subdued Divider
-
-<Canvas>
-  <Story name="subdued">
-    <WrapperStories>
-      <Divider subdued/>
-    </WrapperStories>
-  </Story>
-</Canvas>
-

package/src/lib/components/index.ts

@@ -1,14 +0,0 @@
-export * from './alert-banner'
-export * from './badge'
-export * from './card'
-export * from './checkbox'
-export * from './divider'
-export * from './input-field'
-export * from './layout'
-export * from './link'
-export * from './thumbnail'
-export * from './typography'
-
-//Adding everything in molecules
-export * from './molecules'
-export * from './organisms'

package/src/lib/components/input-field/components/index.ts

@@ -1,2 +0,0 @@
-export * from './labeled-input'
-export * from './stepper'

package/src/lib/components/input-field/components/labeled-input.tsx

@@ -1,61 +0,0 @@
-import styled from 'styled-components'
-
-import { Icons, Margin } from '@foundations'
-import { PropsWithChildren, FC, maybeRender, safeArray } from '@helpers'
-import { Flex } from 'components/layout'
-import { Body, Label1 } from 'components/typography'
-
-export const Icon = styled.div`
-  height: 16px;
-  width: 16px;
-  border: 2px solid ${Icons.Default};
-  border-radius: 50%;
-  margin-right: ${Margin.s};
-`
-
-const ErrorIcon = styled(Icon)`
-  border: 2px solid ${Icons.Critical};
-`
-
-const HTMLLabel = styled.label`
-  all: unset;
-`
-
-const LabelText = styled(Label1)`
-  margin-bottom: ${Margin.xxs};
-`
-
-const HelpText = styled(Body)`
-  margin-bottom: ${Margin.xxs};
-`
-
-const ErrorMessage = styled(Flex)`
-  margin-bottom: ${Margin.xxs};
-`
-
-interface ILabeledInputProps extends PropsWithChildren {
-  label?: string
-  helpText?: string
-  errors?: { message: string }[]
-}
-
-export const LabeledInput: FC<ILabeledInputProps> = (props) => {
-  return (
-    <HTMLLabel>
-      <label>
-        {maybeRender(props.label, <LabelText>{props.label}</LabelText>)}
-        {props.children}
-      </label>
-      {safeArray(props.errors).map((e) => (
-        <ErrorMessage center key={e.message}>
-          <ErrorIcon />
-          <Body>{e.message}</Body>
-        </ErrorMessage>
-      ))}
-      {maybeRender(
-        props.helpText,
-        <HelpText subdued>{props.helpText}</HelpText>
-      )}
-    </HTMLLabel>
-  )
-}

package/src/lib/components/input-field/components/stepper.tsx

@@ -1,59 +0,0 @@
-import { Margin, Padding, Surface } from '@foundations'
-import { FC } from '@helpers'
-import { Center } from 'components/layout'
-import styled from 'styled-components'
-
-const Controls = styled.div`
-  height: 34px;
-  width: 26px;
-  padding: ${Padding.xxxs} ${Padding.xxxs};
-  box-sizing: border-box;
-`
-
-const Up = styled(Center)`
-  background: ${Surface.Neutral.Default};
-  width: 22px;
-  height: 14px;
-  border-radius: 3px 3px 0px 0px;
-  margin-bottom: ${Margin.xxxs};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-const TriangleUp = styled.div`
-  width: 0px;
-  height: 0px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid black;
-`
-
-const TriangleDown = styled.div`
-  width: 0px;
-  height: 0px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid black;
-`
-
-const Down = styled(Center)`
-  background: ${Surface.Neutral.Default};
-  width: 22px;
-  height: 14px;
-  border-radius: 0px 0px 3px 3px;
-`
-
-interface IStepperProps {
-  onUpClick?: () => void
-  onDownClick?: () => void
-}
-
-export const Stepper: FC<IStepperProps> = (props: IStepperProps) => {
-  return (
-    <Controls>
-      <Up onClick={props.onUpClick}><TriangleUp /></Up>
-      <Down onClick={props.onDownClick}><TriangleDown /></Down>
-    </Controls>
-  )
-}

package/src/lib/components/input-field/index.ts

@@ -1,6 +0,0 @@
-// the html input
-export * from './input-field'
-
-// the simple inputs
-export * from './input-number'
-export * from './input-text'

package/src/lib/components/input-field/input-field.test.tsx

@@ -1,108 +0,0 @@
-import {fireEvent, render, screen } from '@testing-library/react'
-import { InputField } from './index'
-
-describe('InputField', () => {
-  describe('the inner input element', () => {
-    it('should receive nice html props', async () => {
-      render(
-        <InputField
-          value="value"
-          onChange={() => undefined}
-          type="text"
-          label="Label"
-          placeholder="placeholder"
-        />
-      )
-
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByPlaceholderText('placeholder')).toBeInTheDocument()
-      expect(screen.getByDisplayValue('value')).toBeInTheDocument()
-    })
-
-    it('should call the onChange callback on change events', async () => {
-      const handleChange = jest.fn()
-
-      render(<InputField value="value" onChange={handleChange} />)
-
-      fireEvent.change(screen.getByRole('textbox'), {
-        target: { value: 'JavaScript' },
-      })
-  
-      expect(handleChange).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  describe('Label', () => {
-    it('should render when given', async () => {
-      render(<InputField label="Label" />)
-
-      expect(screen.getByLabelText('Label')).toBeInTheDocument()
-    })
-
-    it('should not render when not given', async () => {
-      render(<InputField />)
-
-      expect(screen.queryByLabelText('Label')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Prefix', () => {
-    it('should render when given', async () => {
-      render(<InputField prefix="$" />)
-
-      expect(screen.getByText('$')).toBeInTheDocument()
-    })
-
-    it('should not render when not given', async () => {
-      render(<InputField />)
-
-      expect(screen.queryByText('$')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Suffix', () => {
-    it('should render when given', async () => {
-      render(<InputField suffix="%" />)
-
-      expect(screen.getByText('%')).toBeInTheDocument()
-    })
-
-    it('should not render when not given', async () => {
-      render(<InputField />)
-
-      expect(screen.queryByText('&')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Slots', () => {
-    it('should render the Icon slot', async () => {
-      render(
-        <InputField>
-          <InputField.Icon>Icon</InputField.Icon>
-        </InputField>
-      )
-
-      expect(screen.getByText('Icon')).toBeInTheDocument()
-    })
-
-    it('should render the Controls slot', async () => {
-      render(
-        <InputField>
-          <InputField.Controls>Controls</InputField.Controls>
-        </InputField>
-      )
-
-      expect(screen.getByText('Controls')).toBeInTheDocument()
-    })
-
-    it('should not render other kinds of children', () => {
-      render(
-        <InputField>
-          <div>Other Children</div>
-        </InputField>
-      )
-
-      expect(screen.queryByText('Other Children')).not.toBeInTheDocument()
-    })
-  })
-})