@edvisor/product-language 0.1.1 → 0.2.0

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,37 @@
+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

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

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,14 @@
+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

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

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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,6 @@
+// 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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,30 @@
+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