@edvisor/product-language 0.3.0 → 0.3.1

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

@@ -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)

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

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

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

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

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

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

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

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

package/src/lib/foundations/index.ts

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

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

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

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

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

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

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

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

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

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