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

@edvisor/product-language 0.2.0 → 0.3.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 (248) hide show

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

@@ -1,93 +0,0 @@
-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 DELETED Viewed

@@ -1,57 +0,0 @@
-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 DELETED Viewed

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

package/src/lib/foundations/color-system/base-palette/base-palette.ts DELETED Viewed

@@ -1,94 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import { Hex } from '@helpers'
-export type ColorPalette = {
-  [key in string]: Hex
-}
-export const WHITE = '#FFFFFF' as const
-export const BLACK = '#000000' as const
-export const GRAY = {
-  50: '#F9FAFB',
-  100: '#F3F4F6',
-  200: '#E5E7EB',
-  300: '#D1D5DB',
-  400: '#9CA3AF',
-  500: '#6B7280',
-  600: '#46505D',
-  700: '#374151',
-  800: '#1F2937',
-  900: '#111827',
-} as const
-export const BLUE = {
-  50: '#F0F6FF',
-  100: '#DBEAFE',
-  200: '#BFDBFE',
-  300: '#93C5FD',
-  400: '#60A5FA',
-  500: '#3B82F6',
-  600: '#2563EB',
-  700: '#1D4ED8',
-  800: '#1E40AF',
-  900: '#1E3A8A',
-} as const
-export const GREEN = {
-  50: '#F1FEF8',
-  100: '#D1FAE5',
-  200: '#A7F3D0',
-  300: '#6EE7B7',
-  400: '#34D399',
-  500: '#10B981',
-  600: '#059669',
-  700: '#047857',
-  800: '#065F46',
-  900: '#064E3B',
-} as const
-export const ORANGE = {
-  50: '#FFFAF5',
-  100: '#FFEDD5',
-  200: '#FED7AA',
-  300: '#FDBA74',
-  400: '#FB923C',
-  500: '#F97316',
-  600: '#EA580C',
-  700: '#C2410C',
-  800: '#9A3412',
-  900: '#7C2D12',
-} as const
-export const RED = {
-  50: '#FEF6F6',
-  100: '#FEE2E2',
-  200: '#FECACA',
-  300: '#FCA5A5', // @TODO we should update the current structure with the figma updates
-  3300: '#FEF6F6',
-  400: '#F87171',
-  500: '#EF4444',
-  600: '#DC2626',
-  700: '#B91C1C',
-  800: '#991B1B',
-  900: '#7F1D1D',
-} as const
-export const SHADES = {
-  White: WHITE,
-  Black: BLACK,
-} as const
-export const BRAND = {
-  Brand: '#0792D4',
-} as const
-type ValuesOf<T> = T[keyof T]
-export type COLOR = ValuesOf<typeof BRAND>
-  | ValuesOf<typeof BLUE>
-  | ValuesOf<typeof SHADES>
-  | ValuesOf<typeof RED>
-  | ValuesOf<typeof ORANGE>
-  | ValuesOf<typeof GREEN>
-  | ValuesOf<typeof GRAY>

package/src/lib/foundations/color-system/base-palette/index.ts DELETED Viewed

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

package/src/lib/foundations/color-system/color-guidelines/color-guidelines.stories.mdx DELETED Viewed

@@ -1,85 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Card, AlertBanner } from '@components'
-import { Background, Surface, Borders } from './color-guidelines'
-import {
-  BackgroundStory,
-  SurfaceStory,
-  BordersStory,
-} from './color-guidelines.stories.tsx'
-<Meta title="Foundations/ColorSystem"/>
-# Color Guidelines
-The Color Guidelines give names and functions to the colors defined in out base palette.
-All colors used in our app are namespaced according to their context in which they should be used (eg the background color is namespaces by "Background") and named after their role within the namespace (eg `Background.Default`, the default background color).
-```ts
-import { Background, Critical } from '@foundations'
-// the default background color
-const color = Background.Default
-// the color of a critical surface
-const color = Surface.Critical
-```
-## Examples
-What follow are guidelines for the usage of each color.
-<BackgroundStory />
-The background color is used to define negative space in our app. Note the grey background surrounding the Card below.
-<Canvas>
-  <div style={{ padding: '24px', background: Background.Default }}>
-    <Card heading='Heading'>
-      Body
-    </Card>
-  </div>
-</Canvas>
----
-<SurfaceStory />
-Surfaces make up the positive space in our app. We call them surfaces because you can put things on them, typically text and other UI elements. The Card you saw in the example above used `Surface.Default`. The Card below also uses `Surface.Default` for its background, but the alert-banner inside the card is using `Surface.Info`.
-<Canvas>
-  <div style={{ padding: '24px', background: Background.Default }}>
-    <Card heading='Heading'>
-      <Card.AlertBanner>Some helpful info</Card.AlertBanner>
-      Body
-    </Card>
-  </div>
-</Canvas>
-Colorful surfaces such as `Surface.Critical` are used to draw the eye to important information:
-<Canvas>
-  <AlertBanner>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</AlertBanner>
-  <AlertBanner info>There will be a raffle later today</AlertBanner>
-  <AlertBanner success>You won! You won the raffle!</AlertBanner>
-  <AlertBanner warning>Please put down your weapon.</AlertBanner>
-  <AlertBanner critical>Please put down your weapon. You have twenty seconds to comply.</AlertBanner>
-</Canvas>
----
-<BordersStory />
-Borders surround an element, be it a Card or a Button. The color of a border is typically chosen to complement the surface color, and is named the same as the surface it complements.
-<Canvas>
-  <div style={{ padding: '24px', background: Background.Default }}>
-    <div style={{ background: Surface.Critical.Subdued, border: `1px solid ${Borders.Critical.Subdued}`, borderRadius: '6px', padding: '24px' }}>
-      Oh Oh
-    </div>
-  </div>
-</Canvas>
-# Roadmap
- - Add new subdoad colors
- - Add boarder styles colors

package/src/lib/foundations/color-system/color-guidelines/color-guidelines.stories.tsx DELETED Viewed

@@ -1,231 +0,0 @@
-import styled from 'styled-components'
-import { Flex, Heading2 } from '@components'
-import { FC, Hex, isDefined, Nothing, isEmpty, isNil } from '@helpers'
-import { StoryComponent, talesOf } from '@stories'
-import { Margin } from 'foundations/spacing/spacing-guidelines'
-import { BLACK, BLUE, BRAND, ColorPalette, GRAY, GREEN, ORANGE, RED, SHADES, WHITE } from '../base-palette'
-import { ColorSquare } from '../components'
-import { Background, Surface, Borders, Focused, Text, Icons, Interactive, Actions } from './color-guidelines'
-export const BackgroundStory: FC = () => {
-  return (
-    <SemanticCategory
-      name={'Background'}
-      subCategories={[
-        { name: '', palette: Background },
-      ]}
-    />
-  )
-}
-export const SurfaceStory: FC = () => {
-  return (
-    <SemanticCategory
-      name={'Surface'}
-      subCategories={[
-        { name: '', palette: Surface.Default },
-        { name: 'Selected', palette: Surface.Selected },
-        { name: 'Critical', palette: Surface.Critical },
-        { name: 'Warning', palette: Surface.Warning },
-        { name: 'Success', palette: Surface.Success },
-        { name: 'Highlight', palette: Surface.Highlight },
-        { name: 'Neutral', palette: Surface.Neutral },
-      ]}
-    />
-  )
-}
-export const BordersStory: FC = () => {
-  return (
-    <SemanticCategory
-      name={'Borders'}
-      subCategories={[
-        { name: '', border: Surface.Default.Default, palette: Borders.Default },
-        { name: 'Critical', border: Surface.Critical.Subdued, palette: Borders.Critical },
-        { name: 'Warning', border: Surface.Warning.Subdued, palette: Borders.Warning },
-        { name: 'Success', border: Surface.Success.Subdued, palette: Borders.Success },
-        { name: 'Highlight', border: Surface.Highlight.Subdued, palette: Borders.Highlight },
-      ]}
-    />
-  )
-}
-const FocusedStory: FC = () => {
-  return (
-    <SemanticCategory
-      name={'Focused'}
-      subCategories={[
-        { name: '', palette: Focused, border: Background.Default },
-      ]}
-    />
-  )
-}
-const TextStory: FC = () => {
-  const { Default, Subdued, Light, Critical, Success, OnPrimary, OnCritical } =
-    Text
-  return (
-    <SemanticCategory
-      name={'Text'}
-      subCategories={[
-        { name: '', palette: { Default, Subdued, Light } },
-        { name: '', palette: { Critical, Success } },
-        { name: '', palette: { OnPrimary, OnCritical } },
-      ]}
-    />
-  )
-}
-const IconsStory: FC = () => {
-  const { Default, Subdued, Hover, Pressed, Disabled, Critical, Success, Warning, Highlight, OnPrimary, OnCritical } =
-    Icons
-  return (
-    <SemanticCategory
-      name={'Icons'}
-      subCategories={[
-        { name: '', palette: { Default, Subdued, Hover, Pressed, Disabled } },
-        { name: '', palette: { Critical, Warning, Success, Highlight  } },
-        { name: '', palette: { OnPrimary, OnCritical } },
-      ]}
-    />
-  )
-}
-const InteractionsStory: FC = () => {
-  return (
-    <SemanticCategory
-      name={'Interactions'}
-      subCategories={[
-        { name: '', palette: Interactive.Default },
-        { name: 'Subtle', palette: Interactive.Subtle },
-      ]}
-    />
-  )
-}
-const ActionsStory: FC = () => {
-  return (
-    <SemanticCategory
-      name={'Actions'}
-      subCategories={[
-        { name: 'Primary', palette: Actions.Primary },
-        { name: 'Secondary', palette: Actions.Secondary },
-        { name: 'Critical', palette: Actions.Critical },
-        { name: 'Secondary Critical', palette: Actions.SecondaryCritical },
-      ]}
-    />
-  )
-}
-const Story: StoryComponent = () => {
-  return (
-    <>
-      <BackgroundStory />
-      <SurfaceStory />
-      <BordersStory />
-      <FocusedStory />
-      <TextStory />
-      <IconsStory />
-      <InteractionsStory />
-      <ActionsStory />
-    </>
-  )
-}
-const SemanticCategoryHeading = styled(Heading2)`
-  margin-bottom: ${Margin.xl};
-`
-const COLOR_SYSTEM = { GRAY, BLUE, GREEN, ORANGE, RED, SHADES, BRAND } as const
-function getColorId (color: Hex) {
-  if (color === WHITE) {
-    return 'white'
-  }
-  if (color === BLACK) {
-    return 'black'
-  }
-  const colorHex = color.slice(0, 7)
-  const fadeHex = color.slice(7, 9)
-  const colorId = Object.keys(COLOR_SYSTEM).reduce((acc, COLOR_NAME) => {
-    const COLOR = COLOR_SYSTEM[COLOR_NAME as keyof typeof COLOR_SYSTEM]
-    const id = Object.keys(COLOR).find((_id) => COLOR[_id as keyof typeof COLOR] === colorHex)
-    if (isDefined(id)) {
-      return `${COLOR_NAME.toLowerCase()}-${id}`
-    }
-    return acc
-  }, undefined as string | undefined)
-  if (isNil(colorId)) {
-    return color
-  }
-  if (isEmpty(fadeHex)) {
-    return colorId
-  }
-  return `${colorId} - ${toPercentage(fadeHex)}`
-}
-// convert a hex string like 1E to a percentage
-// by dividing out of 255
-function toPercentage (hex: string) {
-  const dec = parseInt(hex, 16)
-  return dec === 0 ? '' : `${Math.round((dec / 255) * 100)}%`
-}
-interface ISemanticCategoryProps {
-  name: string
-  subCategories: {
-    name: string,
-    palette: ColorPalette,
-    border?: Hex,
-  }[]
-}
-/** a semantic group is a kind of categorization based on meaning */
-const SemanticCategory: FC<ISemanticCategoryProps> = (props) => {
-  return (
-    <>
-      <SemanticCategoryHeading>{props.name}</SemanticCategoryHeading>
-      <Flex>
-        {props.subCategories.map((subCategory, index) => {
-          return (
-            <div key={index}>
-              {Object.keys(subCategory.palette).map((name) => {
-                if (name === 'border') {
-                  return <Nothing />
-                }
-                const hex = subCategory.palette[name]
-                const colorId = getColorId(hex)
-                return (
-                  <ColorSquare
-                    key={`${subCategory.name} ${name}`}
-                    colorId={colorId}
-                    name={`${subCategory.name} ${name}`}
-                    hex={hex}
-                    border={subCategory.border}
-                  />
-                )
-              })}
-            </div>
-          )
-        })}
-      </Flex>
-    </>
-  )
-}
-talesOf(__filename, module, Story)