playbook_ui 10.22.0 → 10.23.0.pre.cachetest

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js

@@ -1,215 +0,0 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
-
-import Highcharts from 'highcharts'
-
-const highchartsDarkTheme = {
-  lang: {
-    thousandsSep: ',',
-  },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  chart: {
-    borderWidth: 0,
-    borderRadius: 0,
-    plotBackgroundColor: null,
-    plotShadow: false,
-    plotBorderWidth: 0,
-  },
-  title: {
-    style: {
-      color: colors.text_dk_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  xAxis: {
-    gridLineWidth: 0,
-    lineColor: colors.border_dark,
-    tickColor: colors.border_dark,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        color: colors.text_dk_default,
-        fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_4,
-      },
-    },
-  },
-  yAxis: {
-    alternateGridColor: null,
-    minorTickInterval: null,
-    gridLineColor: colors.border_dark,
-    minorGridLineColor: colors.border_dark,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  },
-  legend: {
-    layout: 'horizontal',
-    align: 'center',
-    verticalAlign: 'bottom',
-    itemStyle: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-    itemHoverStyle: {
-      color: colors.text_dk_default,
-    },
-    itemHiddenStyle: {
-      color: colors.text_dk_lighter,
-    },
-  },
-  labels: {
-    style: {
-      color: colors.primary,
-    },
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.card_light],
-        [1, colors.card_light],
-      ],
-    },
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  // specific to gauge
-  // unfilled gauge color
-  pane: {
-    background: {
-      borderColor: colors.border_dark,
-    },
-  },
-
-  plotOptions: {
-    series: {
-      type: 'area',
-      nullColor: colors.text_dk_lighter,
-      fillColor: {
-        linearGradient: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 1,
-        },
-        stops: [
-          [0, Highcharts.getOptions().colors[0]],
-          [1, 'white'],
-        ],
-      },
-      threshold: null,
-    },
-
-    // GAUGE STYLES
-    solidgauge: {
-      borderColor: colors.primary,
-      borderWidth: 20,
-      radius: 90,
-      innerRadius: '90%',
-      dataLabels: {
-        borderWidth: 0,
-        color: colors.text_dk_default,
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.regular,
-          fontSize: typography.heading_2,
-        },
-        y: -26,
-      },
-    },
-
-    // PIE STYLES
-    pie: {
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-      dataLabels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_dk_light,
-          fontWeight: typography.regular,
-        },
-      },
-    },
-
-    // LINE CHART STYLES
-    line: {
-      dataLabels: {
-        color: colors.text_dk_light,
-      },
-      marker: {
-        lineColor: colors.border_dark,
-      },
-      area: {
-        shadow: false,
-        states: {
-          hover: {
-            lineWidth: 1,
-          },
-        },
-        threshold: null,
-      },
-    },
-  },
-}
-
-export { highchartsDarkTheme }

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js

@@ -1,40 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import FileUpload from './_file_upload'
-
-const testid = 'fileupload-test'
-
-test('returns namespaced class name', () => {
-  render(
-    <FileUpload
-        data={{ testid: testid }}
-    />
-  )
-
-  const kit = screen.getByTestId(testid)
-  expect(kit).toHaveClass('pb_file_upload_kit')
-})
-
-test('shows default drag text', () => {
-  render(
-    <FileUpload
-        data={{ testid: testid }}
-    />
-  )
-
-  const kit = screen.getByTestId(testid)
-  expect(kit).toHaveTextContent('Choose a file or drag it here')
-})
-
-test('shows type-specific drag text', () => {
-  render(
-    <FileUpload
-        accept={['image/svg+xml']}
-        data={{ testid: testid }}
-    />
-  )
-
-  const kit = screen.getByTestId(testid)
-  expect(kit).toHaveTextContent('Choose a file or drag it here. The accepted file types are: svg+xml')
-})

data/app/pb_kits/playbook/utilities/_align_content.scss

@@ -1,29 +0,0 @@
-.align_content_start {
-  display: flex;
-  align-content: start !important;
-}
-
-.align_content_end {
-  display: flex;
-  align-content: end !important;
-}
-
-.align_content_center {
-  display: flex;
-  align-content: center !important;
-}
-
-.align_content_space_between {
-  display: flex;
-  align-content: space-between !important;
-}
-
-.align_content_space_around {
-  display: flex;
-  align-content: space-around !important;
-}
-
-.align_content_space_evenly {
-  display: flex;
-  align-content: space-evenly !important;
-}

data/app/pb_kits/playbook/utilities/_align_items.scss

@@ -1,35 +0,0 @@
-.align_items_flex_start {
-  display: flex;
-  align-items: flex-start !important;
-}
-
-.align_items_flex_end {
-  display: flex;
-  align-items: flex-end !important;
-}
-
-.align_items_start {
-  display: flex;
-  align-items: start !important;
-}
-
-.align_items_end {
-  display: flex;
-  align-items: end !important;
-}
-
-
-.align_items_center {
-  display: flex;
-  align-items: center !important;
-}
-
-.align_items_baseline {
-  display: flex;
-  align-items: baseline !important;
-}
-
-.align_items_stretch {
-  display: flex;
-  align-items: stretch !important;
-}

data/app/pb_kits/playbook/utilities/_align_self.scss

@@ -1,29 +0,0 @@
-.align_self_start {
-  display: flex;
-  align-self: start !important;
-}
-
-.align_self_end {
-  display: flex;
-  align-self: end !important;
-}
-
-.align_self_auto {
-  display: flex;
-  align-self: auto !important;
-}
-
-.align_self_center {
-  display: flex;
-  align-self: center !important;
-}
-
-.align_self_stretch {
-  display: flex;
-  align-self: stretch !important;
-}
-
-.align_self_baseline {
-  display: flex;
-  align-self: baseline !important;
-}

data/app/pb_kits/playbook/utilities/_flex.scss

@@ -1,15 +0,0 @@
-.flex_auto {
-  flex: auto !important;
-}
-
-.flex_initial {
-  flex: initial !important;
-}
-
-.flex_none {
-  flex: none !important;
-}
-
-.flex_1 {
-  flex: 1 !important;
-}

data/app/pb_kits/playbook/utilities/_flex_direction.scss

@@ -1,19 +0,0 @@
-.flex_direction_row {
-  display: flex;
-  flex-direction: row !important;
-}
-
-.flex_direction_column {
-  display: flex;
-  flex-direction: column !important;
-}
-
-.flex_direction_row_reverse {
-  display: flex;
-  flex-direction: row-reverse !important;
-}
-
-.flex_direction_column_reverse {
-  display: flex;
-  flex-direction: column-reverse !important;
-}

data/app/pb_kits/playbook/utilities/_flex_grow.scss

@@ -1,9 +0,0 @@
-.flex_grow_1 {
-  display: flex;
-  flex-grow: 1 !important;
-}
-
-.flex_grow_0 {
-  display: flex;
-  flex-grow: 0 !important;
-}

data/app/pb_kits/playbook/utilities/_flex_shrink.scss

@@ -1,9 +0,0 @@
-.flex_shrink_1 {
-  display: flex;
-  flex-shrink: 1 !important;
-}
-
-.flex_shrink_0 {
-  display: flex;
-  flex-shrink: 0 !important;
-}

data/app/pb_kits/playbook/utilities/_flex_wrap.scss

@@ -1,14 +0,0 @@
-.flex_wrap_wrap {
-  display: flex;
-  flex-wrap: wrap !important;
-}
-
-.flex_wrap_nowrap {
-  display: flex;
-  flex-wrap: nowrap !important;
-}
-
-.flex_wrap_wrap_reverse {
-  display: flex;
-  flex-wrap: wrap-reverse !important;
-}

data/app/pb_kits/playbook/utilities/_flexbox.scss

@@ -1,11 +0,0 @@
-@import './utilities/flex_direction';
-@import './utilities/justify_content';
-@import './utilities/flex_wrap';
-@import './utilities/justify_self';
-@import './utilities/align_items';
-@import './utilities/align_content';
-@import './utilities/align_self';
-@import './utilities/flex';
-@import './utilities/flex_grow';
-@import './utilities/flex_shrink';
-@import './utilities/order';

data/app/pb_kits/playbook/utilities/_justify_content.scss

@@ -1,23 +0,0 @@
-.justify_content_start {
-  justify-content: start !important;
-}
-
-.justify_content_end {
-  justify-content: end !important;
-}
-
-.justify_content_center {
-  justify-content: center !important;
-}
-
-.justify_content_space_between {
-  justify-content: space-between !important;
-}
-
-.justify_content_space_around {
-  justify-content: space-around !important;
-}
-
-.justify_content_space_evenly {
-  justify-content: space-evenly !important;
-}

data/app/pb_kits/playbook/utilities/_justify_self.scss

@@ -1,19 +0,0 @@
-.justify_self_auto {
-  justify-self: auto !important;
-}
-
-.justify_self_start {
-  justify-self: start !important;
-}
-
-.justify_self_end {
-  justify-self: end !important;
-}
-
-.justify_self_center {
-  justify-self: center !important;
-}
-
-.justify_self_stretch {
-  justify-self: stretch !important;
-}

data/app/pb_kits/playbook/utilities/_order.scss

@@ -1,55 +0,0 @@
-.order_1 {
-  order: 1 !important;
-}
-
-.order_2 {
-  order: 2 !important;
-}
-
-.order_3 {
-  order: 3 !important;
-}
-
-.order_4 {
-  order: 4 !important;
-}
-
-.order_5 {
-  order: 5 !important;
-}
-
-.order_6 {
-  order: 6 !important;
-}
-
-.order_7 {
-  order: 7 !important;
-}
-
-.order_8 {
-  order: 8 !important;
-}
-
-.order_9 {
-  order: 9 !important;
-}
-
-.order_10 {
-  order: 10 !important;
-}
-
-.order_11 {
-  order: 11 !important;
-}
-
-.order_12 {
-  order: 12 !important;
-}
-
-.order_none {
-  order: none !important;
-}
-
-.order_first {
-  order: -1 !important;
-}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -1,156 +0,0 @@
-type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
-type None = "none"
-
-type AllSizes = None & Sizes
-
-type Margin = {
-  marginRight?: AllSizes,
-  marginLeft?: AllSizes,
-  marginTop?: AllSizes,
-  marginBottom?: AllSizes,
-  marginX?: AllSizes,
-  marginY?: AllSizes,
-  margin?: AllSizes,
-}
-
-type Padding = {
-  paddingRight?: AllSizes,
-  paddingLeft?: AllSizes,
-  paddingTop?: AllSizes,
-  paddingBottom?: AllSizes,
-  paddingX?: AllSizes,
-  paddingY?: AllSizes,
-  padding?: AllSizes,
-}
-
-type Dark = {
-  dark?: boolean,
-}
-
-type NumberSpacing = {
-  numberSpacing?: "tabular",
-}
-
-type MaxWidth = {
-  maxWidth?: Sizes,
-}
-
-type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
-}
-
-type Shadow = {
-  shadow?: "none" | "deep" | "deeper" | "deepest",
-}
-
-type LineHeight = {
-  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
-}
-
-type Display = {
-  display?: "block" | "flex" | "hidden" | "inline_block" | "inline" | "inline_flex",
-}
-
-type Cursor = {
-  cursor?: "pointer",
-}
-
-type BorderRadius = {
-  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
-}
-
-export type GlobalProps = BorderRadius & Cursor & Dark & Display & LineHeight & Margin & MaxWidth & NumberSpacing & Padding & Shadow & ZIndex
-
-// Prop categories
-const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
-  spacingProps: ({
-    marginRight,
-    marginLeft,
-    marginTop,
-    marginBottom,
-    marginX,
-    marginY,
-    margin,
-    paddingRight,
-    paddingLeft,
-    paddingTop,
-    paddingBottom,
-    paddingX,
-    paddingY,
-    padding,
-  }: Margin & Padding) => {
-    let css = ''
-    css += marginRight ? `mr_${marginRight} ` : ''
-    css += marginLeft ? `ml_${marginLeft} ` : ''
-    css += marginTop ? `mt_${marginTop} ` : ''
-    css += marginBottom ? `mb_${marginBottom} ` : ''
-    css += marginX ? `mx_${marginX} ` : ''
-    css += marginY ? `my_${marginY} ` : ''
-    css += margin ? `m_${margin} ` : ''
-    css += paddingRight ? `pr_${paddingRight} ` : ''
-    css += paddingLeft ? `pl_${paddingLeft} ` : ''
-    css += paddingTop ? `pt_${paddingTop} ` : ''
-    css += paddingBottom ? `pb_${paddingBottom} ` : ''
-    css += paddingX ? `px_${paddingX} ` : ''
-    css += paddingY ? `py_${paddingY} ` : ''
-    css += padding ? `p_${padding} ` : ''
-    return css
-  },
-  darkProps: ({ dark }: Dark) => {
-    let css = ''
-    css += dark ? 'dark' : ''
-    return css
-  },
-  numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
-    let css = ''
-    css += numberSpacing ? `ns_${numberSpacing} ` : ''
-    return css
-  },
-  maxWidthProps: ({ maxWidth }: MaxWidth) => {
-    let css = ''
-    css += maxWidth ? `max_width_${maxWidth } ` : ''
-    return css
-  },
-  zIndexProps: ({ zIndex }: ZIndex) => {
-    let css = ''
-    css += zIndex ? `z_index_${zIndex } ` : ''
-    return css
-  },
-  shadowProps: ({ shadow }: Shadow) => {
-    let css = ''
-    css += shadow ? `shadow_${shadow} ` : ''
-    return css
-  },
-  lineHeightProps: ({ lineHeight }: LineHeight) => {
-    let css = ''
-    css += lineHeight ? `line_height_${lineHeight} ` : ''
-    return css
-  },
-  displayProps: ({ display }: Display) => {
-    let css = ''
-    css += display ? `display_${display} ` : ''
-    return css
-  },
-  cursorProps: ({ cursor }: Cursor) => {
-    let css = ''
-    css += cursor ? `cursor_${cursor} ` : ''
-    return css
-  }
-}
-
-// All Exported as a single function
-export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
-  const allProps = { ...props, ...defaultProps }
-  return Object.keys(PROP_CATEGORIES).map((key) => {
-    return PROP_CATEGORIES[key](allProps)
-  }).join("")
-}
-
-export const deprecatedProps = (kit: string, props: string[] = []): void => {
-  if (process.env.NODE_ENV === 'development') {
-    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
-    props.forEach((prop) => {
-      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
-    })
-  }
-}