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

@edvisor/product-language 0.3.0 → 0.4.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 (290) hide show

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

@@ -1,223 +0,0 @@
-import styled from 'styled-components'
-import { Surface } from '@foundations'
-import { CardPlayground } from '@stories'
-import { leftRightLayoutGenerator } from 'components/layout'
-import { Body, Heading3 } from 'components/typography'
-import { InputField } from 'components/input-field'
-import { Card } from '../card'
-import { LeftRightCard } from '../molecules/left-right-card'
-export const CardExample = () => (
-  <CardPlayground
-    code={`
-<Card heading='Heading'>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</Card>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Card,
-      },
-    }}
-  />
-)
-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 DELETED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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