@edvisor/product-language 0.3.0 → 0.3.1

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

@@ -1,63 +0,0 @@
-import { InputHTMLAttributes } from 'react'
-import styled from 'styled-components'
-import { Margin, Padding, Focused } from '@foundations'
-import { FC, is } from '@helpers'
-import {
-  getDisabledStyles,
-  getInvalidStyles,
-  getDefaultStyles,
-} from './helpers'
-
-const CustomizedCheckbox = styled.input<{ error?: boolean }>`
-  appearance: none;
-  position: relative;
-  box-sizing: content-box;
-  width: 18px;
-  height: 18px;
-  margin: ${Margin.none};
-  padding: ${Padding.none};
-  border-radius: 4px;
-  user-select: none;
-  vertical-align: bottom;
-  display: inline-block;
-
-  ${({ disabled, error }) => {
-    if (is(disabled)) {
-      return getDisabledStyles()
-    } else if (is(error)) {
-      return getInvalidStyles()
-    } else {
-      return getDefaultStyles()
-    }
-  }}
-
-  :focus-visible {
-    outline: 2px solid ${Focused.Default};
-    outline-offset: 1px;
-  }
-`
-
-export interface ICheckboxProps {
-  disabled?: boolean
-  checked?: boolean
-  error?: boolean
-  className?: string
-}
-
-export type IProps = ICheckboxProps & InputHTMLAttributes<HTMLInputElement>
-
-export const Checkbox: FC<IProps> = (props: IProps) => {
-  const {
-    error = false,
-    ...htmlProps
-  } = props
-
-  return (
-    <CustomizedCheckbox
-      {...htmlProps}
-
-      type='checkbox'
-      error={error}
-    />
-  )
-}

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

@@ -1,100 +0,0 @@
-import { css } from 'styled-components'
-import { Surface, Borders, Actions, Interactive, Icons } from '@foundations'
-import { Hex, isNil } from '@helpers'
-
-interface ICheckedProps {
-  checked?: boolean;
-}
-
-const WIDTH = 12
-const HEIGHT = 10
-
-/** no magic here, just copy/pasted the svg from the mockup 
- * I had to tweak the width and height though
-*/
-const svg = `
-<svg xmlns='http://www.w3.org/2000/svg' width='${WIDTH}' height='${HEIGHT}' 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'/>
-</svg>
-`
-
-function getCheckMark () {
-  return css`
-    ::before {
-      position: absolute;
-      content: url("data:image/svg+xml,${svg}");
-      top: 3px;
-      left: 3px;
-    }
-  `
-}
-
-/** the reason I have this isNil to test
- * whether `checked` was passes is this:
- * 
- * if the user passed "checked" then
- * they expect the checked styles to be
- * seen if and only if checked is true.
- * In that case I don't add the :checked
- * selector because the user doesn't want
- * the styles to depend on the browser's
- * idea of the state of the button.
-  */
-function getCheckedStyles (color: Hex) {
-  return css<{ checked?: boolean }>`
-    ${({ checked }) => isNil(checked) 
-      ? css`
-          :checked {
-            background: ${color};
-            border: 2px solid ${color};
-            ${getCheckMark()}
-          }
-        `
-      : checked
-      ? css`
-          background: ${color};
-          border: 2px solid ${color};
-          ${getCheckMark()}
-        `
-    : ''
-    }
-  `
-}
-
-export const getHoverStyles = () => css`
-  background: ${Surface.Default.Hover};
-
-  ${getCheckedStyles(Interactive.Default.Hover)}
-`
-
-export const getDisabledStyles = () => css`
-  pointer-events: none;
-  background: ${(props: ICheckedProps) =>
-    props.checked === true
-      ? `${Borders.Default.Default}`
-      : `${Surface.Default.Subdued}`};
-  border: 2px solid ${Borders.Default.Default};
-
-  ${getCheckedStyles(Icons.Disabled)}
-`
-
-export const getDefaultStyles = () => css`
-  background: ${Surface.Default.Default};
-  border: 2px solid ${Interactive.Default.Disabled};
-
-  ${getCheckedStyles(Interactive.Default.Default)}
-
-  :hover {
-    ${getHoverStyles}
-  }
-`
-
-export const getInvalidStyles = () => css`
-  background: ${(props: ICheckedProps) =>
-    props.checked === true
-      ? `${Actions.Critical.Default}`
-      : `${Surface.Critical.Subdued}`};
-  border: 2px solid ${Borders.Critical.Default};
-
-  ${getCheckedStyles(Icons.Critical)}
-`

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

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

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

@@ -1,57 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Checkbox } from '../checkbox'
-import { IntegratedExample, CheckboxExample, LimitationsExample } from './components'
-
-<Meta
-  title="Components/Checkbox"
-  component={Checkbox}
-/>
-
-# Checkbox
-
-Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have users indicate they agree to specific terms and services.
-
-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
-
-```tsx
-import { Checkbox } from './index'
-
-<Checkbox />
-```
-
-### Typical Usage
-
-Checkbox is "drop-in" compatible with an html input checkbox.
-
-<IntegratedExample />
-
-### Modifiers
-
-Control the appearance of the checkbox with its modifiers.
-
-<CheckboxExample />
-
-## API
-
-Extends `HTMLAttributes<HTMLInputElement>`
-
-| Name        | Type      | Description                                                         |
-| ----------- | --------- | ------------------------------------------------------------------- |
-| `checked?`  | `boolean` | Set checkbox as filled                                              |
-| `disabled?` | `boolean` | Set checkbox as a disabled way (can't click or interact with that)  |
-| `error?`    | `boolean` | Useful to work inside a form or show some feedback from user action |
-| `onChange?` | `event`   | You can listen the changes from the component                       |
-
-## Changelog
-
-### [0.1.0]
- - replace the checkbox implementation with an input type=checkbox styled to look like what we need
-
-### [0.0.1]
- - update checkbox to behave more like html input with type='checkbox'
-
-### [0.0.0]
- - 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,84 +0,0 @@
-import { Margin, } from '@foundations'
-import { If } from '@helpers'
-import { Button } from 'components/molecules/button'
-import { Caption, Label } from 'components/typography'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import styled from 'styled-components'
-import { Checkbox as Base } from '../checkbox'
-
-const Checkbox = styled(Base)`
-  display: inline-block;
-`
-
-export const CheckboxExample = () => (
-  <Playground
-    code={`
-<>
-  <Checkbox />
-  <Checkbox checked readOnly />
-  <Checkbox disabled />
-  <Checkbox checked disabled readOnly />
-  <Checkbox error />
-  <Checkbox checked error readOnly />
-</>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Checkbox,
-      },
-    }}
-  />
-)
-
-const Fields = styled.div`
-  margin-bottom: ${Margin.s};
-`
-
-export const IntegratedExample = () => (
-  <Playground
-    code={`
-/* Edit this code sample! */
-const [withError, setWithError] = useState(false);
-const [accepted, setAccepted] = useState(false);
-
-<form onSubmit={(e) => {
-    e.preventDefault()
-  }}
->
-  <Fields>
-    {/* try replacing Checkbox with input */}
-    <Checkbox
-      id="accept_terms"
-      type="checkbox"
-      checked={accepted}
-      onInvalid={(e) => {
-        setWithError(true)
-      }}
-      error={withError}
-      onChange={(e) => {
-        setAccepted(!accepted)
-        setWithError(false)
-      }}
-      required 
-    />
-    <label htmlFor="accept_terms"><Label as='span'>I accept these terms.</Label></label>
-    <If is={accepted}><Caption subdued>You have accepted the terms.</Caption></If>
-  </Fields>
-  <Button type='button' onClick={() => setAccepted(false)}>Clear</Button>
-  <Button primary type="submit">Submit</Button>
-</form>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Checkbox,
-        Caption,
-        Button,
-        If,
-        Label,
-        Fields,
-      },
-    }}
-  />
-)

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,44 +0,0 @@
-import { Canvas, Meta } 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>
-  <WrapperStories>
-    <Divider default/>
-  </WrapperStories>
-</Canvas>
-
-Subdued Divider
-<Canvas>
-  <WrapperStories>
-    <Divider subdued/>
-  </WrapperStories>
-</Canvas>
-

package/src/lib/components/flag/flag-size-flags.tsx

@@ -1,55 +0,0 @@
-import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
-
-export const enum FlagSize {
-  small = 1,
-  medium = 2,
-  large = 4,
-}
-
-type FlagSizes<T> = MappedEnum<typeof FlagSize, T>
-
-function toFlag(n: number): FlagSize {
-  switch (n) {
-    case FlagSize.small:
-      return FlagSize.small
-    case FlagSize.medium:
-      return FlagSize.medium
-    case FlagSize.large:
-      return FlagSize.large
-    default:
-      return FlagSize.medium
-  }
-}
-
-const FlagWidthValues = {
-  [FlagSize.small]: '20',
-  [FlagSize.medium]: '20',
-  [FlagSize.large]: '32',
-}
-
-const FlagHeightValues = {
-  [FlagSize.small]: '20',
-  [FlagSize.medium]: '20',
-  [FlagSize.large]: '24',
-}
-
-export type FlagProps = Partial<RequireOnlyOne<FlagSizes<boolean>>> &
-  PropsWithChildren
-
-export function getHeigthBySize(props: FlagProps): string {
-  return FlagHeightValues[
-    getFlagSize(props)
-  ]
-}
-
-export function getWidthBySize(props: FlagProps): string {
-  return FlagWidthValues[
-    getFlagSize(props)
-  ]
-}
-
-export function getFlagSize(props: FlagProps) {
-  return toFlag(
-    bitwiseOr([props.small, props.medium, props.large])
-  )
-}