@edvisor/product-language 0.10.0 → 0.10.2

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

@@ -0,0 +1,367 @@
+import styled from 'styled-components'
+import { useForm } from 'react-hook-form'
+
+import { Margin } from '@foundations'
+import { Playground } from '@stories'
+
+import { SpaceBetween } from 'components/layout'
+import { IconMinor } from 'components/icon'
+
+import { InputField as InputFieldBase } from '../input-field'
+import { InputNumber as InputNumberBase } from '../input-number'
+import { InputText as InputTextBase } from '../input-text'
+
+const InputField = styled(InputFieldBase)`
+  margin-bottom: ${Margin.xxs}
+`
+
+const InputNumber = styled(InputNumberBase)`
+  margin-bottom: ${Margin.xxs}
+`
+
+const InputText = styled(InputTextBase)`
+  margin-bottom: ${Margin.xxs}
+`
+
+export const PlainHTMLFormExample = () => (
+  <Playground
+    code={`
+/* Edit this code sample! */
+const [invalid, setInvalid] = useState(false);
+
+<form onSubmit={(e) => e.preventDefault()}>
+  <label htmlFor="country_code">Country code*</label>
+  {/* try replacing this element with an <input /> */}
+  <InputField
+    // try setting the prefix, suffix, and invalid props
+    type="text"
+    placeholder="Enter a country code..."
+    id="country_code"
+    name="country_code"
+    pattern="[A-Za-z]{3}"
+    onInvalid={setInvalid}
+    invalid={invalid}
+    onChange={() => setInvalid(false)}
+    title="Three letter country code"
+    required
+  />
+  <input type="submit"/>
+</form>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputField,
+      },
+    }}
+  />
+)
+
+export const InnerLabelExample = () => (
+  <Playground
+    code={`
+<InputField
+  type="text"
+  label="Country Code"
+  placeholder="Enter a country code..."
+/>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputField,
+      },
+    }}
+  />
+)
+
+export const InnerLabelPositionExample = () => (
+  <Playground
+    code={`
+<form>
+  <InputField
+    label="Side label"
+    labelPosition='side'
+    required
+  />
+  <InputField
+    label="Top label"
+    labelPosition='top'
+  />
+  <InputField
+    label="Default top label"
+  />
+</form>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputField,
+        useForm,
+      },
+    }}
+  />
+)
+
+export const ReactFormHookExample = () => (
+  <Playground
+    code={`
+const { register, formState: { errors }, handleSubmit } = useForm();
+const onSubmit = data => alert(data);
+
+<form onSubmit={handleSubmit(onSubmit)}>
+  <InputField
+    label="First name"
+    invalid={errors.firstName}
+    required
+    {...register("firstName", { required: true, maxLength: 20 })}
+  />
+  <InputField
+    label="Last name"
+    invalid={errors.lastName}
+    {...register("lastName", { pattern: /^[A-Za-z]+$/i })}
+  />
+  <InputField
+    label="Age"
+    type="number"
+    invalid={errors.age}
+    {...register("age", { min: 18, max: 99 })}
+    />
+  <input type="submit" />
+</form>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputField,
+        useForm,
+      },
+    }}
+  />
+)
+
+export const SimpleInputExample = () => (
+  <Playground
+    code={`
+const [state, setState] = useState({
+  firstName: '',
+  lastName: '',
+  age: 18
+});
+
+const onChange = (change) => setState({
+  ...state,
+  ...change
+});
+
+<>
+  <InputText
+    label="First name"
+    value={state.firstName}
+    onChange={(firstName) => onChange({ firstName })}
+  />
+  <InputText
+    label="Last name"
+    value={state.lastName}
+    onChange={(lastName) => onChange({ lastName })}
+  />
+  <InputNumber
+    label="Age"
+    value={state.age}
+    onChange={(age) => onChange({ age })}
+    required
+  />
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputNumber,
+        InputText,
+      },
+    }}
+  />
+)
+
+export const IconExample = () => (
+  <Playground
+    code={`
+<InputField
+  label="Search"
+  type="text"
+  prefix="🍺"
+>
+  <InputField.Icon>
+    <IconMinor.FolderOpen title="Icons render before the input" />
+  </InputField.Icon>
+</InputField>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputField,
+        IconMinor,
+      },
+    }}
+  />
+)
+
+export const ControlsExample = () => (
+  <Playground
+    code={`
+const [likes, setLikes] = useState(0);
+
+const onLike = () => setLikes(likes + 1);
+const onDislike = () => setLikes(Math.max(likes - 1, 0));
+
+<InputField
+  label="Do you like this storybook?"
+  value={likes}
+  onChange={() => undefined}
+  type="number"
+  suffix="🍺"
+>
+  <InputField.Controls>
+    <SpaceBetween>
+      <div onClick={onLike}>️👍</div>
+      <div>/</div>
+      <div onClick={onDislike}>👎️</div>
+    </SpaceBetween>
+  </InputField.Controls>
+</InputField>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputField,
+        IconMinor,
+        styled,
+        SpaceBetween,
+      },
+    }}
+  />
+)
+
+export const OuterLabelExample = () => (
+  <Playground
+    code={`
+const [value, setValue] = useState('');
+const [errors, setErrors] = useState([]);
+
+const handleChange = (change: string) => {
+  const errors = [];
+
+  if (!change) {
+    errors.push({ message: 'This field is required' });
+  }
+
+  if (!change.match(/[A-Za-z]{3}/)) {
+    errors.push({ message: 'Input was not a 3 letter country code' });
+  }
+
+  setValue(change);
+  setErrors(errors);
+}
+
+<InputText.Label
+  label="Country Code"
+  helpText="Please enter a 3 letter country code"
+  errors={errors}
+>
+  <InputText
+    value={value}
+    invalid={errors.length > 0}
+    placeholder="e.g. AUD"
+    onChange={handleChange}
+  />
+</InputText.Label>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputText,
+        IconMinor,
+      },
+    }}
+  />
+)
+
+export const StepperExample = () => (
+  <Playground
+    code={`
+const [age, setAge] = useState(0);
+const onUp = () => setAge(Math.min(age + 1, 99));
+const onDown = () => setAge(Math.max(age - 1, 0));
+const errors = []
+
+if (0 > age || age > 100) {
+  errors.push({ message: 'Please choose an age between 0 and 99' })
+}
+
+<form onSubmit={(e) => e.preventDefault()}>
+  <InputNumber.Label
+    helpText='Age should be a number between 0 and 99'
+    errors={errors}
+  >
+    <InputNumber
+      label='Age'
+      onChange={setAge}
+      value={age}
+      invalid={errors.length > 0}
+      placeholder="Enter your age..."
+    >
+      <InputNumber.Controls>
+        <InputNumber.Stepper onUpClick={onUp} onDownClick={onDown} />
+      </InputNumber.Controls>
+    </InputNumber>
+  </InputNumber.Label>
+  <input type="submit"/>
+</form>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputNumber,
+        styled,
+      },
+    }}
+  />
+)
+
+export const AllDressedExample = () => (
+  <Playground
+    code={`
+<InputField.Label
+  label='Price'
+  helpText='Enter a price in AUD'
+  errors={[{ message: 'Too many UI decorations!' }]}
+>
+  <InputField
+    type="number"
+    label='Price'
+    // prefix and suffix render immediately
+    // before and after the input field
+    prefix="$"
+    suffix="AUD"
+    step={0.01}
+    min={0.00}
+    placeholder="Enter an amount..."
+  >
+    <InputField.Icon>
+      <IconMinor.CircleDollar title="Icons render before the input" />
+    </InputField.Icon>
+    <InputField.Controls>
+      <IconMinor.FolderOpen title="Controls render after the input" />
+    </InputField.Controls>
+  </InputField>
+</InputField.Label>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        InputField,
+        IconMinor,
+      },
+    }}
+  />
+)

package/src/lib/components/input-field/storybook/input-field.stories.mdx

@@ -0,0 +1,120 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Card, SpaceBetween } from '@components'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { InputField } from '../input-field'
+import { PlainHTMLFormExample, ReactFormHookExample, SimpleInputExample, AllDressedExample, OuterLabelExample, IconExample, ControlsExample, StepperExample, InnerLabelExample, InnerLabelPositionExample } from './components'
+
+<Meta title="Components/input-field"/>
+
+# Input Field
+
+An Input Field is a component that users can type into. It has a range of options and supports several text formats including numbers.
+
+### Table of Contents
+1. [Familiar HTML Input API](#familiar-html-input-api)
+2. [Slots and sub-components](#slots-and-sub-components)
+
+<div id='familiar-html-input-api'/>
+
+## Familiar HTML input API
+
+The input field is a drop-in replacement for the common HTML input element. It accepts all of the usual props for such an element. As you can see in the code sample below, you can simple use InputField the same way as you could a normal HTML input field. It has a few additional properties which can be used to style the component.
+
+The available optional properties are as follows, try them out in the editable code sample below!
+
+| Prop                | Type            | Description                                                              |
+| --------------------| ----------------| ------------------------------------------------------------------------ |
+| `prefix?`           | `string`        | add a small text before the input                                        |
+| `suffix?`           | `string`        | add a small text after the input                                         |
+| `label?`            | `string`        | a label to be displayed inside the input element, above the input itself |
+| `labelPosition?`    | `top` \| `side` | The position where the label should be rendered                          |
+| `invalid?`          | `boolean`       | indicate that the input is invalid                                       |
+
+<PlainHTMLFormExample />
+
+Notice that in this example (and only this example) we are using HTML's native "constraint validation API" to detect and display errors. Doing this involves watching the `onInvalid` event, and setting the invalid flag on the input if it fires.
+
+### `props.label`
+
+Passing a label will add a name inside the input field, above where the input will appear. This is a fancy new way people like to do inputs, and we might be adopting this style, so for now the examples will mostly all have inner labels.
+
+<InnerLabelExample />
+
+### `props.labelPosition`
+
+Passing a labelPosition will change the position that the label should be displayed. Default value is `top`.
+
+<InnerLabelPositionExample />
+
+### Managing State
+
+Because the input field can be used just like a regular HTML input, you can use common state-management libraries. For example, we used react-form-hook to implement the following code sample. Try it out!
+
+<ReactFormHookExample />
+
+
+### Simple Input API
+
+The input-field module also exposes a set of components with more stream-lined APIs for implementing common UIs. These can be used instead of the base `InputField`` when you don't need all the bells and whistles of a raw HTML input, or when you aren't in the context of a form and just want to manage state with useState. The main motivation for providing these is to give the user a simple "string goes in, string comes out" API, so that they do not need to deal with HTML events.
+
+These simple components obey the following API. In addition they have all the same optional properties described above:
+
+| Prop        | Type                  | Description                                                                       |
+| ----------- | --------------------- | --------------------------------------------------------------------------------- |
+| `value`     | `T`                   | The value of the controlled input                                                 |
+| `onChange`  | `(change: T) => void` | Called when the value changes                                                     |
+| `required?` | `boolean`             | Passed to the inner HTML element, renders an * (asterisk) next to the inner-label |
+
+<SimpleInputExample />
+
+<div id='slots-and-sub-components'/>
+
+## Slots and sub-components
+
+Using a combination of slots, sub-components, and the optional properties described above, it is possible to customize the components quite a bit. The available components include:
+
+| Slot                  | Type    | Description                                                                                       |
+| --------------------- | ------- | ------------------------------------------------------------------------------------------------- |
+| `InputField.Icon`     | Slot    | Places the children after the input, children should be icons                                     |
+| `InputField.Controls` | Slot    | Places the children after the input, children should be small and interactive                     |
+| `InputField.Label`    | Wrapper | A wrapper for the input field that renders labels, help text, and error messages around the input |
+
+### `InputField.Icon`
+
+The `Icon` slot provides a convenient way to add a small icon (typically 20 x 20 pixel) to the right of the input, after the suffix and before the controls. In the examples below the icon is a folder, and the prefix is a 🍺.
+
+<IconExample />
+
+### `InputField.Controls`
+
+The `Controls` slot is used to add a small icon or other component to the right side of the input, after the suffix. This is useful for adding steppers to number inputs, or a little grey X that clears the input when clicked. You can supply anything you like, but the intention is for this element to be clickable. In this example, the suffix is set to a 🍺 and notice that it is lined up with the input and prefix on the left-side, _not_ the controls on the right-side.
+
+<ControlsExample />
+
+### `InputField.Label`
+
+The `Label` sub-component is used to wrap the `InputField` component. It provides the eponymous "label" for the wrapped input element, as an outer later. It is also used to provide additional label adjacent texts such as help text and error messages. Since we have begun to adopt an inner labelling system, this outer label will primarily be used to provide help text and errors. Since it is an HTML label element, you can click on any of these labels to focus the input.
+
+The Label's API is given below.
+
+| Prop        | Type                    | Description                                                      |
+| ----------- | ----------------------- | ---------------------------------------------------------------- |
+| `label?`    | `string`                | The primary label, title, or "name" of the wrapped input element |
+| `helpText?` | `string`                | A string of help text to be displayed below the input            |
+| `errors?`   | `{ message: string }[]` | An array of error messages to be displayed below the input.      |
+
+Also note that the example below uses `InputText.Label` rather than `InputField.Label`. All of the sub-components and slots available on the `InputField` are also available on the simple inputs, unless otherwise mentioned.
+
+<OuterLabelExample />
+
+### `InputNumber.Stepper`
+
+Not mentioned in the general API above, but worthy of note, the stepper is such a common control for number inputs that we have provided it as a sub-component of the `InputNumber` simple input. It can be dropped into any input, not only the `InputNumber`, as you can see in the example below.
+
+<StepperExample />
+
+### All Dressed
+
+Finally, just for fun, here is an example of an input with everything! Never actually do this, it's awful.
+
+<AllDressedExample />

package/src/lib/components/layout/flex.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import { is } from '@helpers'
+
+export const Flex = styled.div<{ column?: boolean, center?: boolean }>`
+  display: flex;
+  ${({ center }) => is(center) ? 'align-items: center;' : '' }
+  flex-direction: ${({ column }) => is(column) ? 'column' : 'row'}
+`
+
+export const SpaceBetween = styled(Flex)`
+  justify-content: space-between;
+`
+
+export const SpaceAround = styled(Flex)`
+  justify-content: space-around;
+`
+
+export const Center = styled(Flex)`
+  align-items: center;
+  justify-content: space-around;
+`
+

package/src/lib/components/layout/grid-layout.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+import { isDefined } from '@helpers'
+
+interface IGridLayoutGeneratorProps {
+  columns?: number
+  rows?: number
+  columnGutter?: number
+  rowGutter?: number
+}
+
+const DEFAULT: IGridLayoutGeneratorProps = {
+  columns: 12,
+  columnGutter: 24,
+  rowGutter: 24,
+}
+
+export function gridLayoutGenerator (props: IGridLayoutGeneratorProps = {}) {
+  const options = {
+    ...DEFAULT,
+    ...props,
+  }
+
+  const Grid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(${options.columns}, 1fr);
+    ${isDefined(options.rows) 
+      ? `grid-template-rows: repeat(${options.rows}, 1fr);` 
+      : ''}
+    grid-column-gap: ${options.columnGutter}px;
+    grid-row-gap: ${options.rowGutter}px;
+  `
+
+  const Cell = styled.div`
+  `
+
+  return {
+    Grid,
+    Cell,
+  }
+}

package/src/lib/components/layout/index.ts

@@ -0,0 +1,3 @@
+export * from './left-right-layout'
+export * from './flex'
+export * from './grid-layout'

package/src/lib/components/layout/left-right-layout.tsx

@@ -0,0 +1,67 @@
+import { Margin } from '@foundations'
+import { FC, PropsWithChildren } from '@helpers'
+import { Body, Heading3 } from 'components/typography'
+import styled from 'styled-components'
+
+interface ILeftRightLayoutGeneratorProps {
+  columns?: number
+  columnGutter?: number
+  rowGutter?: number
+}
+
+const DEFAULT: ILeftRightLayoutGeneratorProps = {
+  columns: 12,
+  columnGutter: 24,
+  rowGutter: 0,
+}
+
+export function leftRightLayoutGenerator (layoutProps: ILeftRightLayoutGeneratorProps = {}) {
+  const options = {
+    ...DEFAULT,
+    ...layoutProps,
+  }
+
+  const LayoutFrame = styled.div`
+    display: grid;
+    grid-template-columns: repeat(${options.columns}, 1fr);
+    grid-column-gap: ${options.columnGutter}px;
+    grid-row-gap: ${options.rowGutter}px;
+  `
+
+  const Left = styled.div`
+    grid-column: 1 / span 4;
+    grid-row: third-line / 4;
+  `
+
+  const Right = styled.div`
+    grid-column: 5 / span 8;
+    grid-row: third-line / 4;
+  `
+
+  const Slots = {
+    Left,
+    Right,
+    HeadingText: styled(Heading3)`
+      margin-bottom: ${Margin.m};
+    `,
+    HelpText: styled(Body).attrs({ subdued: true })``,
+    BodyText: Body,
+  }
+  
+  const Layout: FC<PropsWithChildren, typeof Slots> = (props) => {
+    return <LayoutFrame>{props.children}</LayoutFrame>
+  }
+
+  Layout.Left = Left
+  Layout.Right = Right
+  Layout.HeadingText = Slots.HeadingText 
+  Layout.BodyText = Slots.BodyText
+  Layout.HelpText = Slots.HelpText
+
+  return {
+    LeftRightLayout: Layout,
+    Layout,
+    Left,
+    Right,
+  }
+}

package/src/lib/components/link/index.ts

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

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

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import { Link } from '.'
+import { Interactive } from '@foundations'
+
+describe('Link', () => {
+  it('should render the component Link with default color', async () => {
+    render(
+      <Link label="Edvisor" aria-label="red" href="https://app.edvisor.io/" />
+    )
+    expect(screen.getByRole('link')).toBeInTheDocument()
+    expect(screen.getByText('Edvisor')).toBeInTheDocument()
+    expect(screen.getByRole('link')).toHaveStyle(`color: ${Interactive.Default.Default}`)
+  })
+  it('should render the component Link with subtle color', async () => {
+    render(<Link href="https://app.edvisor.io/" label="Edvisor" subtle />)
+    expect(screen.getByRole('link')).toBeInTheDocument()
+    expect(screen.getByText('Edvisor')).toBeInTheDocument()
+    expect(screen.getByRole('link')).toHaveStyle(`color: ${Interactive.Subtle.Default}`)
+  })
+  it('should render the component Link with disabled color even if it has default or subtle attributes color', async () => {
+    render(
+      <Link subtle disabled label="Edvisor" href="https://app.edvisor.io/" />
+    )
+
+    expect(screen.getByRole('link')).toBeInTheDocument()
+    expect(screen.getByText('Edvisor')).toBeInTheDocument()
+    expect(screen.getByRole('link')).toHaveStyle(`color: ${Interactive.Default.Disabled}`)
+  })
+})