@edvisor/product-language 0.1.0 → 0.1.1

package/src/lib/components/card/storybook/components.tsx

@@ -1,240 +0,0 @@
-import styled from 'styled-components'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { Margin, Surface, Text } from '@foundations'
-import { leftRightLayoutGenerator } from 'components/layout'
-import { Body, Heading3 } from 'components/typography'
-import { Divider } from 'components/divider'
-import { Card } from '../card'
-import { LeftRightCard } from '../molecules/left-right-card'
-import { InputField } from 'components/input-field'
-
-const CardPlayground = styled(Playground)`
-  background: ${Surface.Neutral.Default};
-
-  margin-bottom: ${Margin.xxl};
-
-  > div:nth-of-type(2) {
-    background: ${Surface.Default.Inverse}; // Surface.Inverse
-    color: ${Text.OnPrimary};
-  }
-`
-
-const Bar = styled(Divider)`
-  margin-bottom: ${Margin.l};
-  margin-top: ${Margin.l};
-`
-
-export const CardExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading'>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-<Bar />
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-        Bar,
-      },
-    }}
-  />
-)
-
-export const SectionsExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Sections!'>
-  If you include section slots, plain children won't render.
-  <Card.Section heading='Subheading 1'>
-    This is a section.
-  </Card.Section>
-  <Card.Section heading='Subheading 2'>
-    This is another section.
-  </Card.Section>
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-export const CardControlsExample = () => (
-  <CardPlayground
-    code={`
-const handleCancel = () => alert('Cancel');
-const handleConfirm = () => alert('Confirm');
-
-<Card heading='Controls!'>
-  <Card.Controls>
-    <button onClick={handleCancel}>Cancel</button>
-    <button onClick={handleConfirm}>Confirm</button>
-  </Card.Controls>
-  Notice that the controls render below this text, even though they are above this text in the JSX. That's because Controls is a slot, it is only telling Card what we want to render, not where we want to render it.
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-export const CardHeadingActionExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading Actions!'>
-  If you include section slots, plain children won't render.
-  <Card.HeadingAction><button>Activate</button></Card.HeadingAction>
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-export const SectionsHeadingActionsExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading Actions'>
-  <Card.HeadingAction><button>Action</button></Card.HeadingAction>
-
-  <Card.Section heading='Subheading 1'>
-    This is a section.
-    <Card.HeadingAction><button>Action</button></Card.HeadingAction>
-  </Card.Section>
-
-  <Card.Section heading='Subheading 2'>
-    This is another section.
-    <Card.HeadingAction><button>Action</button></Card.HeadingAction>
-  </Card.Section>
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-export const AlertBannerExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading'>
-  <Card.AlertBanner info>Seriously though, if you change the student's age or nationality you will regret it.</Card.AlertBanner>
-  Disaster can strike at any moment.
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-
-const { Layout } = leftRightLayoutGenerator()
-
-const GreyBox = styled.div`
-  background-color: ${Surface.Neutral};
-  height: 100%;
-`
-
-export const LeftRightLayoutExample = () => (
-  <CardPlayground
-    code={`
-<Card>
-  <Layout>
-    <Layout.Left>
-      <Heading3>Personal Information</Heading3>
-      <Body subdued>This information will be seen by your colleagues and students.</Body>
-    </Layout.Left>
-    <Layout.Right>
-      <form id='my-form' onSubmit={(e) => e.preventDefault()}>
-        <InputField 
-          label='First name'
-        />
-        <InputField 
-          label='Last name'
-        />
-        <InputField 
-          type='email'
-          required
-          label='Email'
-        />
-      </form>
-    </Layout.Right>
-  </Layout>
-  <Card.Controls>
-    <button>Cancel</button>
-    <button form='my-form' type='submit'>Confirm</button>
-  </Card.Controls>
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-        Layout,
-        InputField,
-        Heading3,
-        Body,
-      },
-    }}
-  />
-)
-
-export const LeftRightCardExample = () => (
-  <CardPlayground
-    code={`
-  <LeftRightCard 
-    heading='Personal Information'
-    helpText='This information will be seen by your colleagues and students.'
-  >
-    <LeftRightCard.Right>
-      <form id='my-form-2' onSubmit={(e) => e.preventDefault()}>
-        <InputField 
-          label='First name'
-        />
-        <InputField 
-          label='Last name'
-        />
-        <InputField 
-          type='email'
-          required
-          label='Email'
-        />
-      </form>
-    </LeftRightCard.Right>
-    <LeftRightCard.Controls>
-      <button>Cancel</button>
-      <button form='my-form-2' type='submit'>Confirm</button>
-    </LeftRightCard.Controls>
-  </LeftRightCard>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        LeftRightCard,
-        GreyBox,
-        Body,
-        InputField,
-      },
-    }}
-  />
-)

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

@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { Checkbox } from './checkbox'
-
-describe('Checkbox Input Tests', () => {
-  it('should render the component and handle event after click', async () => {
-    const spyOnChange = jest.fn()
-    render(
-      <Checkbox
-        onChange={spyOnChange}
-      />
-    )
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-    const myComponent = screen.getByRole('checkbox')
-
-    expect(myComponent).toBeInTheDocument()
-
-    await userEvent.click(myComponent)
-    expect(spyOnChange).toHaveBeenCalled()
-  })
-
-  it('should not handle event after click if checkbox has disabled', async () => {
-    const spyOnChange = jest.fn()
-    render(
-      <Checkbox
-        disabled
-        onChange={spyOnChange}
-      />
-    )
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-    const myComponent = screen.getByRole('checkbox')
-
-    userEvent.click(myComponent)
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-  })
-})

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

@@ -1,124 +0,0 @@
-import { InputHTMLAttributes, useState } from 'react'
-import styled, { css } from 'styled-components'
-import { Surface, Borders, Margin, Padding, Interactive, Actions, Focused } from '@foundations'
-import { FC, is, isDefined } from '@helpers'
-import {
-  getHoverStyles,
-  getDisabledStyles,
-  getInvalidStyles,
-  getTabIndexValue,
-  getCheckedIcon,
-  HiddenCheckbox,
-  Icon,
-  Wrapper,
-} from './components/components'
-
-const CustomizedCheckbox = styled.div<{
-  checked: boolean;
-  disabled: boolean;
-  error: boolean;
-}>`
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  margin: ${Margin.none};
-  padding: ${Padding.none};
-  border-radius: 4px;
-
-  ${props => is(props.checked)
-    ? css`
-        background: ${Interactive.Default.Default};
-        border: 2px solid ${Interactive.Default.Default};
-        &:hover {
-          background: ${Actions.Primary.Pressed};
-          border: 2px solid ${Interactive.Default.Hover};
-        }
-      `
-    : css`
-        background: ${Surface.Default.Default};
-        border: 2px solid ${Interactive.Default.Disabled};
-        &:hover {
-          ${getHoverStyles}
-        }
-      `
-  }
-
-  ${props => is(props.disabled) ? getDisabledStyles() : ''}
-  ${props => is(props.error)
-    ? css`
-        ${getInvalidStyles()}
-        &:hover {
-          background: ${({ checked }) => (is(checked)
-            ? `${Actions.Critical.Pressed}`
-            : `${Surface.Default.Default}`
-          )};
-          border: 2px solid ${Borders.Critical.Default};
-        }
-        ${HiddenCheckbox}:invalid {
-          ${getInvalidStyles()}
-        }
-      `
-    : ''
-  }
-
-  ${HiddenCheckbox}:focus + &  {
-    outline: 2px solid ${Focused.Default};
-    outline-offset: 1px;
-  }
-  ${Icon} {
-    visibility: ${(props) => (is(props.checked) ? 'visible' : 'hidden')};
-  }
-`
-
-export interface ICheckboxProps {
-  disabled?: boolean;
-  checked?: boolean;
-  error?: boolean;
-  className?: string;
-  onChange?: (value: boolean) => void;
-}
-
-export type IProps = ICheckboxProps & InputHTMLAttributes<HTMLInputElement>
-
-export const Checkbox: FC<IProps> = (props: IProps) => {
-  const {
-    className,
-    onChange,
-    disabled = false,
-    error = false,
-    checked = false,
-  } = props
-  const [isChecked, setIsChecked] = useState<boolean>(checked)
-  const handleOnChange = () => {
-    const newCheckedValue = !isChecked
-    setIsChecked(newCheckedValue)
-    if(isDefined(onChange)){
-      onChange(newCheckedValue)
-    }
-  }
-
-  return (
-    <Wrapper
-      className={className}
-    >
-      <HiddenCheckbox
-        {...props}
-        tabIndex={getTabIndexValue(disabled)}
-        checked={isChecked}
-        disabled={disabled}
-        onChange={handleOnChange}
-        type='checkbox'
-      />
-      <CustomizedCheckbox
-        {...props}
-        data-testid='checkbox-id'
-        checked={isChecked}
-        disabled={disabled}
-        error={error}
-        onClick={handleOnChange}
-      >
-        {getCheckedIcon()}
-      </CustomizedCheckbox>
-    </Wrapper>
-  )
-}

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
-}