@edvisor/product-language 0.1.1 → 0.3.0

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,160 @@
+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],
+    Depressed: BLUE[900],
+    Disabled: DisabledGray,
+  },
+  Secondary: {
+    Default: WHITE,
+    Hover: DisabledGray,
+    Pressed: PressedGray,
+    Depressed: GRAY[500],
+    Disabled: DisabledGray,
+  },
+  Critical: {
+    Default: RED[600],
+    Hover: RED[700],
+    Pressed: RED[800],
+    Disabled: DisabledGray,
+  },
+  SecondaryCritical: {
+    Default: WHITE,
+    Hover: RED[700],
+    Pressed: RED[800],
+    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, Label } 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(Label)`
+  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 strong>{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'

package/src/lib/foundations/shadows/components.tsx

@@ -0,0 +1,59 @@
+import styled from 'styled-components'
+import { Surface } from '../color-system'
+import { Padding } from '../spacing'
+import {
+  shadowSm,
+  shadow,
+  shadowMd,
+  shadowLg,
+  shadowXl,
+  shadow2Xl,
+  shadowInner,
+} from './shadows'
+
+const Container = styled.div`
+  width: 128px;
+  height: 128px;
+  background: ${Surface.Default};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: ${Padding.none};
+`
+
+const ShadowSm = styled(Container)`
+  ${shadowSm}
+`
+const Shadow = styled(Container)`
+  ${shadow}
+`
+
+const ShadowMd = styled(Container)`
+  ${shadowMd}
+`
+const ShadowLg = styled(Container)`
+  ${shadowLg}
+`
+
+const ShadowXl = styled(Container)`
+  ${shadowXl}
+`
+
+const Shadow2Xl = styled(Container)`
+  ${shadow2Xl}
+`
+
+const ShadowInner = styled(Container)`
+  ${shadowInner}
+`
+
+export {
+  ShadowSm,
+  Shadow,
+  ShadowLg,
+  ShadowMd,
+  ShadowXl,
+  Shadow2Xl,
+  ShadowInner,
+}

package/src/lib/foundations/shadows/index.ts

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

package/src/lib/foundations/shadows/shadows.stories.mdx

@@ -0,0 +1,71 @@
+import { Canvas, Meta } from '@storybook/addon-docs';
+import {
+  ShadowSm,
+  Shadow,
+  Shadow2Xl,
+  ShadowInner,
+  ShadowMd,
+  ShadowLg,
+  ShadowXl
+} from './components'
+
+<Meta title="Foundations/Shadows"/>
+
+# Shadows
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/UI-Library-(in-progress)?node-id=743%3A7913)
+
+## How to use
+
+```javascript
+// Import the shadow that we'd like to use.
+import {
+  shadowSm,
+} from './shadows';
+
+import styled from 'styled-components';
+
+// Add them to the styled strucute that you'd like to add the shadow
+const ShadowSm = styled.div`
+  ${shadowSm}
+`
+```
+
+## Examples
+
+<Canvas>
+  <ShadowSm>
+    .shadow-sm
+  </ShadowSm>
+  <Shadow>
+    .shadow
+  </Shadow>
+  <ShadowMd>
+    .shadow-md
+  </ShadowMd>
+  <ShadowLg>
+    .shadow-lg
+  </ShadowLg>
+  <ShadowXl>
+    .shadow-xl
+  </ShadowXl>
+  <Shadow2Xl>
+    .shadow-2xl
+  </Shadow2Xl>
+  <ShadowInner>
+    .shadow-inner
+  </ShadowInner>
+</Canvas>
+
+## List of Values
+
+| Name |
+| ---- |
+| `shadowSm` |
+| `shadow` |
+| `shadowMd` |
+| `shadowLg` |
+| `shadowXl` |
+| `shadow2Xl` |
+| `shadowInner` |
+

package/src/lib/foundations/shadows/shadows.tsx

@@ -0,0 +1,47 @@
+import { css } from 'styled-components'
+
+const shadowSm = css`
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  border-radius: 6px;
+`
+
+const shadow = css`
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
+  border-radius: 6px;
+`
+
+const shadowMd = css`
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+`
+
+const shadowLg = css`
+  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-radius: 6px;
+`
+
+const shadowXl = css`
+  box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
+  border-radius: 6px;
+`
+
+const shadow2Xl = css`
+  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border-radius: 6px;
+`
+
+const shadowInner = css`
+  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.06);
+  border-radius: 6px;
+`
+
+export {
+  shadowSm,
+  shadow,
+  shadowMd,
+  shadowLg,
+  shadowXl,
+  shadow2Xl,
+  shadowInner,
+}
+

package/src/lib/foundations/spacing/index.ts

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

package/src/lib/foundations/spacing/spacing-guidelines.ts

@@ -0,0 +1,24 @@
+import { SPACING } from './spacing'
+
+export const Padding = {
+  none: 0,
+  xxxs: SPACING.Size2,
+  xxs: SPACING.Size4,
+  xs: SPACING.Size8,
+  s: SPACING.Size12,
+  m: SPACING.Size16,
+  l: SPACING.Size24,
+  xl: SPACING.Size32,
+} as const
+
+export const Margin = {
+  none: 0,
+  xxxs: SPACING.Size2,
+  xxs: SPACING.Size4,
+  xs: SPACING.Size8,
+  s: SPACING.Size12,
+  m: SPACING.Size16,
+  l: SPACING.Size24,
+  xl: SPACING.Size32,
+  xxl: SPACING.Size64,
+} as const