@edvisor/product-language 0.1.1 → 0.2.0

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

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

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

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

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

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

package/src/lib/foundations/color-system/color-guidelines/color-guidelines.ts

@@ -0,0 +1,159 @@
+import { clamp, concatHex, Hex, toHex } from '@helpers'
+import { GRAY, RED, ORANGE, GREEN, BLUE, WHITE } from '../base-palette'
+
+export const Background = {
+  Default: GRAY[100],
+} as const
+
+export const Surface = {
+  Default: {
+    Default: WHITE,
+    Subdued: GRAY[50],
+    Hover: GRAY[100],
+    Pressed: GRAY[200],
+    Depressed: GRAY[200],
+    Inverse: GRAY[800],
+  },
+
+  Selected: {
+    Default: BLUE[50],
+    Hover: BLUE[100],
+    Pressed: BLUE[200],
+  },
+
+  Critical: {
+    Default: RED[200],
+    Subdued: RED[50],
+    Hover: RED[50],
+    Pressed: RED[100],
+  },
+
+  Warning: {
+    Default: ORANGE[200],
+    Subdued: ORANGE[50],
+  },
+
+  Success: {
+    Default: GREEN[200],
+    Subdued: GREEN[50],
+    Depressed: GREEN[500],
+
+  },
+
+  Highlight: {
+    Default: BLUE[200],
+    Subdued: BLUE[50],
+  },
+
+  Neutral: {
+    Default: GRAY[200],
+    Subdued: GRAY[100],
+    Hover: GRAY[300],
+    Pressed: GRAY[400],
+  },
+}
+
+export const Borders = {
+  Default: {
+    Default: GRAY[300],
+    Subdued: GRAY[200],
+    Light: WHITE,
+    Dark: GRAY[400],
+  },
+  Critical: {
+    Default: RED[600],
+    Subdued: RED[300],
+  },
+  Warning: {
+    Subdued: ORANGE[300],
+  },
+  Success: {
+    Subdued: GREEN[300],
+  },
+  Highlight: {
+    Default: BLUE[600],
+    Subdued: BLUE[300],
+  },
+}
+
+export const Focused = {
+  Default: BLUE[400],
+}
+
+export const Text = {
+  Default: GRAY[800],
+  Subdued: GRAY[500],
+  Light: GRAY[400],
+  Critical: RED[600],
+  Success: GREEN[600],
+  OnPrimary: WHITE,
+  OnCritical: WHITE,
+}
+
+export const Icons = {
+  Default: GRAY[500],
+  Subdued: GRAY[400],
+  Hover: GRAY[800],
+  Pressed: GRAY[600],
+  Disabled: GRAY[300],
+  Critical: RED[600],
+  Warning: ORANGE[500],
+  Success: GREEN[600],
+  Highlight: BLUE[600],
+  OnPrimary: WHITE,
+  OnCritical: WHITE,
+}
+
+export const Interactive = {
+  Default: {
+    Default: BLUE[600],
+    Hover: BLUE[800],
+    Pressed: BLUE[800],
+    Disabled: GRAY[400],
+  },
+  Subtle: {
+    Default: GRAY[800],
+    Hover: GRAY[800],
+    Pressed: GRAY[800],
+    Disabled: GRAY[400],
+  }
+}
+
+function addOpacity(hex: Hex, opacity: number): Hex {
+  const opacityHex = toHex(clamp(0, Math.floor(0xFF * opacity), 0xFF), 2)
+
+  return concatHex(hex, opacityHex)
+}
+
+/** in order for disabled to appear light gray on any background
+ * we have to give a darker gray some opacity */
+const DisabledGray = addOpacity(GRAY[800], 0.06) 
+const PressedGray = addOpacity(GRAY[800], 0.12) 
+
+export const Actions = {
+  Primary: {
+    Default: BLUE[600],
+    Hover: BLUE[700],
+    Pressed: BLUE[800],
+    Disabled: DisabledGray,
+  },
+  Secondary: {
+    Default: WHITE,
+    Hover: DisabledGray,
+    Pressed: PressedGray,
+    Depressed: GRAY[500],
+    Disabled: DisabledGray,
+  },
+  Critical: {
+    Default: RED[600],
+    Hover: RED[500],
+    Pressed: RED[700],
+    Disabled: DisabledGray,
+  },
+  SecondaryCritical: {
+    Default: WHITE,
+    Hover: RED[500],
+    Pressed: RED[700],
+    Disabled: DisabledGray,
+  },
+}

package/src/lib/foundations/color-system/color-guidelines/index.ts

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

package/src/lib/foundations/color-system/components/color-sample.tsx

@@ -0,0 +1,99 @@
+import styled from 'styled-components'
+
+import { FC, Hex, isDefined } from '@helpers'
+import { Flex, SpaceBetween } from '@components'
+
+import { GRAY, WHITE } from '../base-palette'
+import { Caption, Label1 } from 'components/typography'
+import { Margin } from '../../spacing'
+
+function isPale (color: string) {
+  return color === WHITE || color === GRAY[50] || color === GRAY[100]
+}
+
+/** a ColorSample is a rectangular area with a uniform color */
+const ColorSample = styled.div<{ color: string; border?: Hex }>`
+  ${({ border, color }) => 
+    isDefined(border) ? '' : `background-color: ${color};`  }
+  ${({ border, color }) =>
+    isDefined(border) ? `border: 1px solid ${color};` : ''}
+  ${({ border, color }) =>
+    !isDefined(border) && isPale(color) ? `border: 1px solid ${GRAY[200]};` : ''}
+
+  height: 40px;
+  border-radius: 4px;
+`
+
+const RectangularColorSample = styled(ColorSample)`
+  max-width: 122px;
+  margin-bottom: ${Margin.xxs};
+`
+
+const SquareColorSample = styled(ColorSample)`
+  width: 40px;
+  flex-shrink: 0;
+  margin-right: ${Margin.s};
+  border-radius: 6px;
+
+  ${({ border, color }) => 
+    isDefined(border) ? `background-color: ${border};` : `background-color: ${color};`  }
+  ${({ border, color }) =>
+    isDefined(border) ? `border: 1px solid ${color};` : `border: 2px solid ${WHITE};`}
+`
+
+interface IColorRectangleProps {
+  name: string
+  hex: Hex
+  border?: Hex
+} 
+
+export const ColorRectangle: FC<IColorRectangleProps> = (props) => {
+  return (
+    <div>
+      <RectangularColorSample color={props.hex} border={props.border} />
+      <SpaceBetween>
+        <Caption>{props.name}</Caption>
+        <Caption subdued>{props.hex}</Caption>
+      </SpaceBetween>
+    </div>
+  )
+}
+
+const ColorFrame = styled(Flex)`
+  margin-bottom: ${Margin.l};
+  margin-right: ${Margin.xxl};
+`
+
+const Details = styled(Flex)`
+  justify-content: center;
+`
+
+const ColorName = styled(Label1)`
+  white-space: nowrap;
+  margin-bottom: ${Margin.xxxs};
+`
+
+const ColorId = styled(Caption)`
+  white-space: nowrap;
+`
+
+interface IColorSquareProps {
+  name: string, 
+  colorId: string
+  hex: Hex, 
+  /** if true the color will only show in the border 
+   * rather than as a fill color */
+  border?: Hex,
+}
+
+export const ColorSquare: FC<IColorSquareProps> = (props) => {
+  return (
+    <ColorFrame>
+      <SquareColorSample color={props.hex} border={props.border} />
+      <Details column>
+        <ColorName emphasis>{props.name}</ColorName>
+        <ColorId subdued>{props.colorId}</ColorId>
+      </Details>
+    </ColorFrame>
+  )
+}

package/src/lib/foundations/color-system/components/index.ts

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

package/src/lib/foundations/color-system/index.ts

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

package/src/lib/foundations/index.ts

@@ -0,0 +1,4 @@
+export * from './color-system'
+export * from './typography'
+export * from './spacing'
+export * from './shadows'