npm - @edvisor/product-language - Versions diffs - 0.1.0 → 0.1.1 - Mend

@edvisor/product-language 0.1.0 → 0.1.1

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

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

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

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

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

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

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

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

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

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

package/src/lib/components/input-field/input-field.tsx DELETED Viewed

@@ -1,126 +0,0 @@
-import styled from 'styled-components'
-import { InputHTMLAttributes } from 'react'
-import { Borders, Focused, Margin, Padding, Surface, Typography, _Typography } from '@foundations'
-import { getSlot, Slot, is, forwardRef, If } from '@helpers'
-import { Flex, SpaceBetween } from '../layout'
-import { LabeledInput } from './components'
-import { Label1, Label2 } from 'components/typography'
-const FancyBorder = styled(SpaceBetween)<{ invalid?: boolean }>`
-  background: ${({ invalid }) => is(invalid) ? Surface.Critical.Subdued : Surface.Default.Default };
-  border: 1px solid ${({ invalid }) => is(invalid) ? Borders.Critical.Default : Borders.Default.Default  };
-  border-radius: 6px;
-  box-sizing: border-box;
-  margin-bottom: ${Margin.xxs};
-  padding-left: ${Padding.s};
-  user-select: none;
-  :focus, :focus-within, :active {
-    border: ${({ invalid }) => is(invalid)
-      ? `1px solid ${Borders.Critical.Default}`
-      : `2px solid ${Focused.Default}`
-    };
-  }
-`
-const InputLayout = styled(Flex)`
-  width: 100%;
-`
-export const HTMLInput = styled.input`
-  all: unset;
-  padding: ${Padding.none} ${Padding.none} ${Padding.xs} ${Padding.none};
-  width: 100%;
-  ::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: ${Margin.none};
-  }
-  ${Typography.Body}
-  ::placeholder {
-    ${_Typography.LightText}
-  }
-`
-const PrefixFrame = styled(Label1)`
-  margin-right: ${Margin.xs};
-`
-const SuffixFrame = styled(Label1)`
-  margin-right: ${Margin.xs};
-`
-class IconSlot extends Slot {}
-class ControlsSlot extends Slot {}
-export type InputFieldSlots = {
-  Icon: typeof IconSlot,
-  Controls: typeof ControlsSlot,
-  Label: typeof LabeledInput,
-}
-interface IInputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
-  invalid?: boolean
-  prefix?: string
-  suffix?: string
-  label?: string
-}
-const InputFrame = styled.label`
-  width: 100%;
-  padding: ${Padding.xs} ${Padding.none} ${Padding.none} ${Padding.none};
-  flex-direction: column;
-  display: flex;
-`
-const ControlsFrame = Flex
-const Label = styled(Label2)`
-  margin-bottom: ${Margin.xxs};
-`
-export const InputField = forwardRef<
-  HTMLInputElement,
-  IInputFieldProps,
-  InputFieldSlots
->((props: IInputFieldProps, ref) => {
-  const { children, prefix, suffix, label, className, ...inputProps } = props
-  const icon = getSlot(IconSlot, children)
-  const controls = getSlot(ControlsSlot, children)
-  const required = is(props.required) ? '*' : ''
-  return (
-    <FancyBorder invalid={props.invalid} className={className}>
-      <InputFrame>
-        <If is={label}>
-          <Label subdued>
-            {label}
-            {required}
-          </Label>
-        </If>
-        <InputLayout>
-          {icon}
-          <If is={prefix}>
-            <PrefixFrame subdued>{prefix}</PrefixFrame>
-          </If>
-          <HTMLInput ref={ref} {...inputProps} />
-          <If is={suffix}>
-            <SuffixFrame subdued>{suffix}</SuffixFrame>
-          </If>
-        </InputLayout>
-      </InputFrame>
-      <ControlsFrame center>{controls}</ControlsFrame>
-    </FancyBorder>
-  )
-})
-InputField.Icon = IconSlot
-InputField.Controls = ControlsSlot
-InputField.Label = LabeledInput

package/src/lib/components/input-field/input-number.tsx DELETED Viewed

@@ -1,41 +0,0 @@
-import { FC, isNil } from '@helpers'
-import { InputField, InputFieldSlots } from './input-field'
-import { Stepper } from './components'
-interface IInputNumberProps {
-  value?: number
-  onChange: (change?: number) => void
-  label?: string
-  placeholder?: string
-  invalid?: boolean
-  prefix?: string
-  suffix?: string
-  required?: boolean
-}
-type IInputNumberSlots = InputFieldSlots & {
-  Stepper: typeof Stepper
-}
-export const InputNumber: FC<IInputNumberProps, IInputNumberSlots> = (props) => {
-  const { onChange, value, ...inputFieldProps } = props
-  return (
-    <InputField
-      type='number'
-      value={isNil(value) || isNaN(value) ? '' : value}
-      onChange={(e) => {
-        const next = e.target.value === '' ? undefined : parseFloat(e.target.value)
-        onChange(next)
-      }}
-      {...inputFieldProps}
-    />
-  )
-}
-InputNumber.Icon = InputField.Icon
-InputNumber.Controls = InputField.Controls
-InputNumber.Label = InputField.Label
-InputNumber.Stepper = Stepper

package/src/lib/components/input-field/input-text.tsx DELETED Viewed

@@ -1,30 +0,0 @@
-import { FC } from '@helpers'
-import { InputField, InputFieldSlots } from './input-field'
-interface IInputTextProps {
-  value: string
-  onChange: (change: string) => void
-  label?: string
-  invalid?: boolean
-  placeholder?: string
-  prefix?: string
-  suffix?: string
-  required?: boolean
-}
-export const InputText: FC<IInputTextProps, InputFieldSlots> = (props) => {
-  const { onChange, ...inputFieldProps } = props
-  return (
-    <InputField
-      type='text'
-      onChange={(e) => onChange(e.target.value)}
-      {...inputFieldProps}
-    />
-  )
-}
-InputText.Icon = InputField.Icon
-InputText.Controls = InputField.Controls
-InputText.Label = InputField.Label