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

@edvisor/product-language 0.1.1 → 0.2.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 (230) hide show

package/src/lib/components/typography/storybook/components.tsx ADDED Viewed

@@ -0,0 +1,256 @@
+import { Actions, Borders, Surface, Text } from 'foundations/color-system'
+import { Margin, Padding } from 'foundations/spacing'
+import styled from 'styled-components'
+import { is } from '@helpers'
+import {
+  Display,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  BodyLarge,
+  Body,
+  Caption,
+  Label1,
+  Label2,
+} from '../typography'
+import { Typography } from '@foundations'
+import { Flex } from 'components/layout'
+import { useState } from 'react'
+import { StoryComponent } from '@stories'
+const Table = styled.div`
+  background: ${Surface.Default};
+  border-radius: 6px;
+`
+const Row = styled.div<{ gray?: boolean }>`
+  display: flex;
+  flex-direction: row;
+  background-color: ${(props) => (is(props.gray) ? Surface.Default.Subdued : Surface.Default)};
+  border-bottom: 1px solid ${Borders.Default.Subdued};
+`
+const Column = styled.div`
+  ${Typography.Body}
+  display: flex;
+  padding: ${Padding.l};
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  justify-content: space-between;
+  &:nth-child(1) {
+    flex: 2;
+  }
+`
+const HeaderColumn = styled(Column)`
+  color: ${Text.Subdued};
+`
+export const Button = styled.div<{ critical?: boolean, primary?: boolean }>`
+  background: ${({ critical, primary }) => {
+    if (is(critical)) {
+      return Actions.Critical.Default
+    } else if (is(primary)) {
+      return Actions.Primary.Default
+    } else {
+      return Actions.Secondary.Default
+    }
+  }};
+  border: 1px solid ${({ critical, primary }) => {
+    if (is(critical)) {
+      return 'none'
+    } else if (is(primary)) {
+      return 'none'
+    } else {
+      return Borders.Default
+    }
+  }};
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: ${Padding.xs} ${Padding.m};
+  border-radius: 6px;
+  margin-right: ${Margin.s};
+`
+const Header = () => (
+  <Row>
+    <HeaderColumn><Label1 subdued>Typographic System</Label1></HeaderColumn>
+    <HeaderColumn><Label1 subdued>Weight</Label1></HeaderColumn>
+    <HeaderColumn><Label1 subdued>Size</Label1></HeaderColumn>
+    <HeaderColumn><Label1 subdued>Line Height</Label1></HeaderColumn>
+    <HeaderColumn><Label1 subdued>Spacing</Label1></HeaderColumn>
+  </Row>
+)
+const toTextAspectProps = (aspect: string) => {
+  switch (aspect) {
+    case 'subdued': return { subdued: true }
+    case 'light': return { light: true }
+    case 'critical': return { critical: true }
+    case 'success': return { success: true }
+    case 'onPrimary': return { onPrimary: true }
+    case 'onCritical': return { onCritical: true }
+    default: return {}
+  }
+}
+const toButtonProps = (aspect: string) => {
+  switch (aspect) {
+    case 'onPrimary': return { primary: true }
+    case 'onCritical': return { critical: true }
+    default: return {}
+  }
+}
+export const TypographyTable: StoryComponent = () => {
+  const [aspect, setAspect] = useState('')
+  return (
+    <div>
+      <Flex>
+        <Button onClick={() => setAspect('default')}>
+          <Body>Default</Body>
+        </Button>
+        <Button onClick={() => setAspect('subdued')}>
+          <Body subdued>Subdued</Body>
+        </Button>
+        <Button onClick={() => setAspect('light')}>
+          <Body light>Light</Body>
+        </Button>
+        <Button onClick={() => setAspect('critical')}>
+          <Body critical>Critical</Body>
+        </Button>
+        <Button onClick={() => setAspect('success')}>
+          <Body success>Success</Body>
+        </Button>
+        <Button primary onClick={() => setAspect('onPrimary')}>
+          <Body onPrimary>OnPrimary</Body>
+        </Button>
+        <Button critical onClick={() => setAspect('onCritical')}>
+          <Body onCritical>OnCritical</Body>
+        </Button>
+      </Flex>
+      <Table>
+        <Header />
+        <Row gray>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <Display {...toTextAspectProps(aspect)}>Display1</Display>
+            </Button>
+          </Column>
+          <Column>Regular 400</Column>
+          <Column>36px (2.25rem)</Column>
+          <Column>44px</Column>
+          <Column>0 px</Column>
+        </Row>
+        <Row>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <Heading1 {...toTextAspectProps(aspect)}>Heading1</Heading1>
+            </Button>
+          </Column>
+          <Column>Semibold 600</Column>
+          <Column>28px (1.75rem)</Column>
+          <Column>32px</Column>
+          <Column>0 px</Column>
+        </Row>
+        <Row>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <Heading2 {...toTextAspectProps(aspect)}>Heading2</Heading2>
+            </Button>
+          </Column>
+          <Column>Semibold 600</Column>
+          <Column>20px (1.25rem)</Column>
+          <Column>28px</Column>
+          <Column>0 px</Column>
+        </Row>
+        <Row>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <Heading3 {...toTextAspectProps(aspect)}>Heading3</Heading3>
+            </Button>
+          </Column>
+          <Column>Semibold 600</Column>
+          <Column>16px (1 rem)</Column>
+          <Column>24px</Column>
+          <Column>0 px</Column>
+        </Row>
+        <Row>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <Heading4 {...toTextAspectProps(aspect)}>Heading4</Heading4>
+            </Button>
+          </Column>
+          <Column>Semibold 600</Column>
+          <Column>14px (0.875rem)</Column>
+          <Column>20px</Column>
+          <Column>0 px</Column>
+        </Row>
+        <Row gray>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <BodyLarge {...toTextAspectProps(aspect)}>BodyLarge</BodyLarge>
+            </Button>
+          </Column>
+          <Column>Reg 400 / Semibold 600</Column>
+          <Column>18px (1.125rem)</Column>
+          <Column>28px</Column>
+          <Column>0 px</Column>
+        </Row>
+        <Row gray>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <Body {...toTextAspectProps(aspect)}>Body</Body>
+            </Button>
+          </Column>
+          <Column>Reg 400 / Medium 500</Column>
+          <Column>14px (0.875rem)</Column>
+          <Column>20px</Column>
+          <Column>0 px</Column>
+        </Row>
+        <Row gray>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <Caption {...toTextAspectProps(aspect)}>Caption</Caption>
+            </Button>
+          </Column>
+          <Column>Regular 400</Column>
+          <Column>13px (0.8125rem)</Column>
+          <Column>16px</Column>
+          <Column>0 px</Column>
+        </Row>
+        <Row>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <Label1 {...toTextAspectProps(aspect)}>Label1</Label1>
+            </Button>
+          </Column>
+          <Column>Reg 400 / Medium 500</Column>
+          <Column>14px (0.875rem)</Column>
+          <Column>20px</Column>
+          <Column>0 px</Column>
+        </Row>
+        <Row>
+          <Column>
+            <Button {...toButtonProps(aspect)}>
+              <Label2 {...toTextAspectProps(aspect)}>Label2</Label2>
+            </Button>
+          </Column>
+          <Column>Regular 400</Column>
+          <Column>13px (0.8125rem)</Column>
+          <Column>16px</Column>
+          <Column>0 px</Column>
+        </Row>
+      </Table>
+    </div>
+  )
+}

package/src/lib/components/typography/storybook/typography.stories.mdx ADDED Viewed

@@ -0,0 +1,88 @@
+import { Canvas, Meta } from '@storybook/addon-docs';
+import { TypographyTable, Button } from './components'
+import { Heading3, Label1, Body } from '../typography'
+<Meta title="Components/Typography" />
+# Typography
+All text that appears in the front-end should be wrapped by one of these components.
+## Basic usage
+When you are building from a mockup you will be clicking on elements and checking in the figma inspector to see what components you should use, and how you should configure them. With typography there are two relevant sections: Typography and Color.
+### Typography: Ag
+When you see text in a mockup you can click that text to see what kind of typographic component it represents. In the typography section of the figma inspector you will see a label Ag with a value like "Label1" or "Label1/emphasis". This is the name of the component you should use, and whether you should set the emphasis flag.
+For example if you see "Ag Heading3".
+<Canvas>
+  <Heading3>Heading 3, no modifiers</Heading3>
+</Canvas>
+If you see "Ag Label 1/emphasis" you should use a Label1 with emphasis set.
+<Canvas>
+  <Label1 emphasis>Label 1, emphasis</Label1>
+</Canvas>
+### Colors: Text
+Below the Typography section in the figma inspector you will see the Colors section. Here you will see a color swatch and a label like "Text/Default" or "Text/Subdued". In most cases you will see "Text/Default" and can proceed without any modifiers. When you do see a modifier you will be able to use it as is to configure your component.
+<Canvas>
+  <Button><Body>Text/Default</Body></Button>
+  <Button><Body subdued>Text/Subdued</Body></Button>
+  <Button><Body light>Text/Light</Body></Button>
+  <Button primary><Body onPrimary>Text/onPrimary</Body></Button>
+  <Button critical><Body onCritical>Text/onCritical</Body></Button>
+</Canvas>
+In addition there are two less commonly used text colors: Text/Critical and Text/Success. These appear from time to time in mockups to indicate some problems (like an invalid field) or some big win (like a discount on a price).
+<Canvas>
+  <Body critical>Text/Critical</Body>
+  <Body success>Text/Success</Body>
+</Canvas>
+## Recommended usage with i18n
+In practice you will not be using these typographic components without i18n. In our previous projects i18n has usually looked something like this:
+```tsx
+<Body critical><T.Trans>YOU_LOSE</T.Trans></Body>
+<Body success><T.Trans>YOU_WIN</T.Trans></Body>
+```
+Or like this,
+```tsx
+<Body critical>{t(YOU_LOSE)}</Body>
+<Body success>{t(YOU_WIN)}</Body>
+```
+Instead we recommend wrapping the typographic components with i18n helpers and re-exporting them in your project.
+```tsx
+// my/typography.tsx
+import { Body as _Body, IBodyProps } from '@edvisor/product-language'
+import { useI18n } from 'your-i18n-library'
+// something like this:
+export const Body = (props: IBodyProps) => {
+  const { t } = useI18n()
+  return (
+    <_Body {...props}>{t(props.children)}</_Body>
+  )
+}
+// then you can use it like this:
+<Body success>YOU_WIN</Body>
+```
+## Typography Table
+<TypographyTable />

package/src/lib/components/typography/typography.test.tsx ADDED Viewed

@@ -0,0 +1,93 @@
+import { render, screen } from '@testing-library/react'
+import {
+  Display,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  BodyLarge,
+  Body,
+  Caption,
+  Label1,
+  Label2,
+} from './typography'
+describe('Typography', () => {
+  it('should render Display successfully', () => {
+    const { baseElement } = render(<Display>My Text Here</Display>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Heading1 successfully', () => {
+    const { baseElement } = render(<Heading1>My Text Here</Heading1>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Heading2 successfully', () => {
+    const { baseElement } = render(<Heading2>My Text Here</Heading2>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Heading3 successfully', () => {
+    const { baseElement } = render(<Heading3>My Text Here</Heading3>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Heading4 successfully', () => {
+    const { baseElement } = render(<Heading4>My Text Here</Heading4>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render BodyLarge successfully', () => {
+    const { baseElement } = render(<BodyLarge>My Text Here</BodyLarge>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Body successfully', () => {
+    const { baseElement } = render(<Body>My Text Here</Body>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Subdued successfully', () => {
+    const { baseElement } = render(<Body subdued>My Text Here</Body>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Light successfully', () => {
+    const { baseElement } = render(<Body light>My Text Here</Body>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render White successfully', () => {
+    const { baseElement } = render(<Body onPrimary>My Text Here</Body>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Caption successfully', () => {
+    const { baseElement } = render(<Caption>My Text Here</Caption>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Label1 successfully', () => {
+    const { baseElement } = render(<Label1>My Text Here</Label1>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+  it('should render Label2 successfully', () => {
+    const { baseElement } = render(<Label2>My Text Here</Label2>)
+    expect(baseElement).toBeTruthy()
+    expect(screen.getByText('My Text Here')).toBeTruthy()
+  })
+})

package/src/lib/components/typography/typography.tsx ADDED Viewed

@@ -0,0 +1,57 @@
+import { Typography, ITextProps, Margin } from '@foundations'
+import { PropsWithChildren } from '@helpers'
+import styled from 'styled-components'
+type Semibold = { semibold?: boolean }
+type Regular = { regular?: boolean }
+type Medium = { medium?: boolean }
+type ITextComponentProps = ITextProps & PropsWithChildren
+export const Display = styled.div<ITextComponentProps & Regular>`
+  ${Typography.Display};
+`
+export const Heading1 = styled.h1<ITextComponentProps & Semibold>`
+  ${Typography.Heading1};
+  margin: ${Margin.none};
+  margin-bottom: ${Margin.l};
+`
+export const Heading2 = styled.h2<ITextComponentProps & Semibold>`
+  ${Typography.Heading2};
+  margin: ${Margin.none};
+  margin-bottom: ${Margin.m};
+`
+export const Heading3 = styled.h3<ITextComponentProps & Semibold>`
+  ${Typography.Heading3};
+  margin: ${Margin.none};
+  margin-bottom: ${Margin.l};
+`
+export const Heading4 = styled.h4<ITextComponentProps & Semibold>`
+  ${Typography.Heading4};
+  margin: ${Margin.none};
+  margin-bottom: ${Margin.m};
+`
+export const BodyLarge = styled.div<ITextComponentProps & Regular & Semibold>`
+  ${Typography.BodyLarge};
+`
+export const Body = styled.div<ITextComponentProps & Regular & Medium>`
+  ${Typography.Body};
+`
+export const Caption = styled.div<ITextComponentProps & Regular>`
+  ${Typography.Caption};
+`
+export const Label1 = styled.div<ITextComponentProps & Regular & Medium>`
+  ${Typography.Label1};
+`
+export const Label2 = styled.div<ITextComponentProps & Regular>`
+  ${Typography.Label2};
+`

package/src/lib/foundations/color-system/base-palette/base-palette.stories.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+import { Card, gridLayoutGenerator, leftRightLayoutGenerator } from '@components'
+import { FC } from '@helpers'
+import { BLUE, BRAND, ColorPalette, GRAY, GREEN, ORANGE, RED, SHADES } from './base-palette'
+import { ColorRectangle } from '../components'
+import { StoryComponent, talesOf } from '@stories'
+const Story: StoryComponent = () => {
+  return (
+    <Card
+      heading={'Color System: Base Palette'}
+    >
+      <Card.Section>
+        <Hue
+          colorName={'Gray'}
+          colorPalette={GRAY}
+          description={
+            'These colors are used as supporting colors in backgrounds, text colors, seperators, modals, etc.'
+          }
+        />
+      </Card.Section>
+      <Card.Section>
+        <Hue
+          colorName={'Blue'}
+          colorPalette={BLUE}
+          description={
+            'These colors are used as across all the interactive elements such as CTAs, links, active states, etc.'
+          }
+        />
+      </Card.Section>
+      <Card.Section>
+        <Hue
+          colorName={'Green'}
+          colorPalette={GREEN}
+          description={
+            'These colors are used to depict the emotion of positivity. Generally used across success and complete states.'
+          }
+        />
+      </Card.Section>
+      <Card.Section>
+        <Hue
+          colorName={'Orange'}
+          colorPalette={ORANGE}
+          description={
+            'These colors are used to depict the emotion of caution. Generally used across warning states.'
+          }
+        />
+      </Card.Section>
+      <Card.Section>
+        <Hue
+          colorName={'Red'}
+          colorPalette={RED}
+          description={
+            'These colors decpict the emotion of negativity. Generally used across critical or destructive states.'
+          }
+        />
+      </Card.Section>
+      <Card.Section>
+        <Hue
+          colorName={'Shades'}
+          colorPalette={SHADES}
+          description={
+            'White is generally used to color text on surfaces such as primary buttons. Various opacities of black are used for shadows.'
+          }
+        />
+      </Card.Section>
+      <Card.Section>
+        <Hue
+          colorName={'Brand'}
+          colorPalette={BRAND}
+          description={
+            'Edvisor brand color.'
+          }
+        />
+      </Card.Section>
+    </Card>
+  )
+}
+const { Layout } = leftRightLayoutGenerator()
+interface IHueProps {
+  colorName: string
+  colorPalette: ColorPalette
+  description: string
+}
+/** a "hue" is a color like "green" or "red" without saturation or value */
+const Hue: FC<IHueProps> = (props) => {
+  return (
+    <Layout>
+      <Layout.Left>
+        <Layout.HeadingText>{props.colorName}</Layout.HeadingText>
+        <Layout.HelpText>{props.description}</Layout.HelpText>
+      </Layout.Left>
+      <Layout.Right>
+        <Palette colors={props.colorPalette} />
+      </Layout.Right>
+    </Layout>
+  )
+}
+const { Grid } = gridLayoutGenerator({
+  columns: 5,
+  rows: 2,
+  columnGutter: 16,
+  rowGutter: 24,
+})
+interface IPaletteProps {
+  colors: ColorPalette
+}
+const Palette: FC<IPaletteProps> = (props) => {
+  return (
+    <Grid>
+      {Object.entries(props.colors).map(([name, hex]) =>
+        <ColorRectangle key={hex} name={name} hex={hex}/>
+      )}
+    </Grid>
+  )
+}
+talesOf(__filename, module, Story)