@edvisor/product-language 0.2.0 → 0.3.1

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

@@ -1,159 +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],
-    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

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

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

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

@@ -1,51 +0,0 @@
-import { Meta, Description } from '@storybook/addon-docs';
-
-
-<Meta title="Foundations/Spacing" />
-
-# Spacing System
-
-All spacing for components and typography is done in increments of 8 pixels.
-This forms the basic unit of measurement for spacing.
-
-For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/UI-Library-(in-progress)?node-id=388%3A364)
-
-## How to use
-
-```javascript
-import SPACING from './spacing'
-
-//get the token value
-SPACING.[`YOUR-VALUE-HERE`]
-```
-
-## When to use
-
-You can set this values from this props:
-
-- width
-- heigth
-- margin
-- padding
-
-
-## List of Values
-
-| Name | Value |
-| ---- | ----- |
-| `Size2` | 2px|
-| `Size4` | 4px|
-| `Size8` | 8px|
-| `Size12` | 12px|
-| `Size16` | 16px|
-| `Size24` | 24px|
-| `Size32` | 32px|
-| `Size64` | 64px|
-| `Size96` | 96px|
-| `Size128` | 128px|
-| `Size192` | 192px|
-| `Size256` | 256px|
-| `Size384` | 384px|
-| `Size512` | 512px|
-| `Size640` | 640px|
-| `Size768` | 768px|

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

@@ -1,18 +0,0 @@
-export enum SPACING {
-  Size2 = '2px',
-  Size4 = '4px',
-  Size8 = '8px',
-  Size12 = '12px',
-  Size16 = '16px',
-  Size24 = '24px',
-  Size32 = '32px',
-  Size64 = '64px',
-  Size96 = '96px',
-  Size128 = '128px',
-  Size192 = '192px',
-  Size256 = '256px',
-  Size384 = '384px',
-  Size512 = '512px',
-  Size640 = '640px',
-  Size768 = '768px',
-}

package/src/lib/foundations/typography/constants.ts

@@ -1,25 +0,0 @@
-
-export const enum FontWeight {
-  Regular = '400',
-  Medium = '500',
-  SemiBold = '600',
-}
-
-export const FontSize = {
-  a: '13px',
-  b: '14px',
-  c: '16px',
-  d: '18px',
-  e: '20px',
-  f: '28px',
-  g: '36px',
-} as const
-
-export const LineHeight = {
-  a: '16px',
-  b: '20px',
-  c: '24px',
-  d: '28px',
-  e: '32px',
-  f: '44px',
-} as const

package/src/lib/foundations/typography/index.tsx

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

package/src/lib/foundations/typography/text-aspect-flags.ts

@@ -1,54 +0,0 @@
-import { bitwiseOr, MappedEnum, PropsWithChildren, RequireOnlyOne } from '@helpers'
-import { Text } from '../color-system'
-
-export const enum TextAspects {
-  default = 1,
-  subdued = 2,
-  light = 4,
-  critical = 8,
-  success = 16,
-  onPrimary = 32,
-  onCritical = 64,
-}
-
-type TextOptions<T> = MappedEnum<typeof TextAspects, T>
-
-function toTextAspect(n: number): TextAspects {
-  switch (n) {
-    case TextAspects.subdued: return TextAspects.subdued
-    case TextAspects.light: return TextAspects.light
-    case TextAspects.critical: return TextAspects.critical
-    case TextAspects.success: return TextAspects.success
-    case TextAspects.onPrimary: return TextAspects.onPrimary
-    case TextAspects.onCritical: return TextAspects.onCritical
-    default: return TextAspects.default
-  }
-}
-
-const TextAspectColors = {
-  [TextAspects.default]: Text.Default,
-  [TextAspects.subdued]: Text.Subdued,
-  [TextAspects.light]: Text.Light,
-  [TextAspects.onPrimary]: Text.OnPrimary,
-  [TextAspects.onCritical]: Text.OnPrimary,
-  [TextAspects.success]: Text.Success,
-  [TextAspects.critical]: Text.Critical,
-}
-
-export type ITextAspectProps = Partial<RequireOnlyOne<TextOptions<boolean>>> & PropsWithChildren
-
-export function getTextAspect(props: ITextAspectProps) {
-  return TextAspectColors[
-    toTextAspect(
-      bitwiseOr([
-        props.default,
-        props.subdued,
-        props.light,
-        props.critical,
-        props.success,
-        props.onPrimary,
-        props.onCritical,
-      ])
-    )
-  ]
-}