playbook_ui 10.23.0.pre.alpha2 → 10.23.0.pre.cachetest

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.22.1"
-  VERSION = "10.23.0.pre.alpha2"
+  PREVIOUS_VERSION = "10.20.0"
+  VERSION = "10.23.0.pre.cachetest"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.23.0.pre.alpha2
+  version: 10.23.0.pre.cachetest
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-03-11 00:00:00.000000000 Z
+date: 2022-03-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -282,8 +282,8 @@ files:
 - app/pb_kits/playbook/_reset.scss
 - app/pb_kits/playbook/data/menu.yml
 - app/pb_kits/playbook/index.js
+- app/pb_kits/playbook/pb_avatar/_avatar.jsx
 - app/pb_kits/playbook/pb_avatar/_avatar.scss
-- app/pb_kits/playbook/pb_avatar/_avatar.tsx
 - app/pb_kits/playbook/pb_avatar/avatar.html.erb
 - app/pb_kits/playbook/pb_avatar/avatar.rb
 - app/pb_kits/playbook/pb_avatar/avatar.test.js
@@ -330,7 +330,6 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_image.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_status.html.erb
@@ -417,8 +416,6 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_default.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_default.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_default.md
-- app/pb_kits/playbook/pb_button/docs/_button_form.html.erb
-- app/pb_kits/playbook/pb_button/docs/_button_form.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.md
@@ -429,9 +426,6 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
 - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
-- app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
-- app/pb_kits/playbook/pb_button/docs/_button_size.jsx
-- app/pb_kits/playbook/pb_button/docs/_button_size.md
 - app/pb_kits/playbook/pb_button/docs/_footer.md
 - app/pb_kits/playbook/pb_button/docs/example.yml
 - app/pb_kits/playbook/pb_button/docs/index.js
@@ -596,9 +590,6 @@ files:
 - app/pb_kits/playbook/pb_currency/_currency.scss
 - app/pb_kits/playbook/pb_currency/currency.html.erb
 - app/pb_kits/playbook/pb_currency/currency.rb
-- app/pb_kits/playbook/pb_currency/currency.test.js
-- app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb
-- app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
@@ -611,7 +602,6 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/example.yml
 - app/pb_kits/playbook/pb_currency/docs/index.js
 - app/pb_kits/playbook/pb_dashboard/commonSettings.js
-- app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js
 - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
@@ -814,7 +804,6 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
-- app/pb_kits/playbook/pb_file_upload/fileupload.test.js
 - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx
@@ -1087,12 +1076,12 @@ files:
 - app/pb_kits/playbook/pb_icon_value/docs/index.js
 - app/pb_kits/playbook/pb_icon_value/icon_value.html.erb
 - app/pb_kits/playbook/pb_icon_value/icon_value.rb
+- app/pb_kits/playbook/pb_image/_image.jsx
 - app/pb_kits/playbook/pb_image/_image.scss
-- app/pb_kits/playbook/pb_image/_image.tsx
 - app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
 - app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx
 - app/pb_kits/playbook/pb_image/docs/_default_image.html.erb
-- app/pb_kits/playbook/pb_image/docs/_default_image.tsx
+- app/pb_kits/playbook/pb_image/docs/_default_image.jsx
 - app/pb_kits/playbook/pb_image/docs/_description.md
 - app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
 - app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
@@ -1323,8 +1312,8 @@ files:
 - app/pb_kits/playbook/pb_nav/item.rb
 - app/pb_kits/playbook/pb_nav/nav.html.erb
 - app/pb_kits/playbook/pb_nav/nav.rb
+- app/pb_kits/playbook/pb_online_status/_online_status.jsx
 - app/pb_kits/playbook/pb_online_status/_online_status.scss
-- app/pb_kits/playbook/pb_online_status/_online_status.tsx
 - app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss
 - app/pb_kits/playbook/pb_online_status/docs/_description.md
 - app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb
@@ -2064,48 +2053,29 @@ files:
 - app/pb_kits/playbook/tokens/exports/_spacing.scss
 - app/pb_kits/playbook/tokens/exports/_typography.scss
 - app/pb_kits/playbook/tokens/index.scss
-- app/pb_kits/playbook/utilities/_align_content.scss
-- app/pb_kits/playbook/utilities/_align_items.scss
-- app/pb_kits/playbook/utilities/_align_self.scss
+- app/pb_kits/playbook/types.js
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
 - app/pb_kits/playbook/utilities/_cursor.scss
 - app/pb_kits/playbook/utilities/_display.scss
-- app/pb_kits/playbook/utilities/_flex.scss
-- app/pb_kits/playbook/utilities/_flex_direction.scss
-- app/pb_kits/playbook/utilities/_flex_grow.scss
-- app/pb_kits/playbook/utilities/_flex_shrink.scss
-- app/pb_kits/playbook/utilities/_flex_wrap.scss
-- app/pb_kits/playbook/utilities/_flexbox.scss
-- app/pb_kits/playbook/utilities/_justify_content.scss
-- app/pb_kits/playbook/utilities/_justify_self.scss
 - app/pb_kits/playbook/utilities/_line_height.scss
 - app/pb_kits/playbook/utilities/_max_width.scss
 - app/pb_kits/playbook/utilities/_number_spacing.scss
-- app/pb_kits/playbook/utilities/_order.scss
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_shadow.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
-- app/pb_kits/playbook/utilities/globalProps.ts
-- app/pb_kits/playbook/utilities/props.ts
+- app/pb_kits/playbook/utilities/globalProps.js
+- app/pb_kits/playbook/utilities/props.js
 - app/pb_kits/playbook/utilities/test-utils.js
 - app/pb_kits/playbook/utilities/text.js
 - dist/reset.css
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
 - lib/playbook.rb
-- lib/playbook/align_content.rb
-- lib/playbook/align_items.rb
-- lib/playbook/align_self.rb
 - lib/playbook/classnames.rb
 - lib/playbook/cursor.rb
 - lib/playbook/display.rb
 - lib/playbook/engine.rb
-- lib/playbook/flex.rb
-- lib/playbook/flex_direction.rb
-- lib/playbook/flex_grow.rb
-- lib/playbook/flex_shrink.rb
-- lib/playbook/flex_wrap.rb
 - lib/playbook/forms.rb
 - lib/playbook/forms/builder.rb
 - lib/playbook/forms/builder/action_area.rb
@@ -2115,8 +2085,6 @@ files:
 - lib/playbook/forms/builder/form_field_builder.rb
 - lib/playbook/forms/builder/select_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
-- lib/playbook/justify_content.rb
-- lib/playbook/justify_self.rb
 - lib/playbook/kit_base.rb
 - lib/playbook/kit_resolver.rb
 - lib/playbook/line_height.rb
@@ -2124,7 +2092,6 @@ files:
 - lib/playbook/markdown/helper.rb
 - lib/playbook/markdown/template_handler.rb
 - lib/playbook/number_spacing.rb
-- lib/playbook/order.rb
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb

data/app/pb_kits/playbook/pb_background/docs/_background_image.md

@@ -1 +0,0 @@
-To add a lazyload on the background image simply use the `transition` prop and one of the three string options `"fade"`, `"blur"`, or `"scale"`.

data/app/pb_kits/playbook/pb_button/docs/_button_form.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("button", props: { text: "Button with Form Attribute", form: "form-id"}) %>

data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { Button } from '../../'
-
-const ButtonForm = (props) => (
-  <div>
-    <Button
-        form="form-id"
-        text="Button with Form Attribute"
-        {...props}
-    />
-  </div>
-)
-
-export default ButtonForm

data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
-<%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
-<%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { Button } from '../../'
-
-const ButtonSize = (props) => (
-  <div>
-    <Button
-        size="sm"
-        text="Button sm size"
-        {...props}
-    />
-    {' '}
-    <Button
-        size="md"
-        text="Button md size"
-        {...props}
-    />
-    {' '}
-    <Button
-        size="lg"
-        text="Button lg size"
-        {...props}
-    />
-  </div>
-)
-
-export default ButtonSize

data/app/pb_kits/playbook/pb_button/docs/_button_size.md

@@ -1 +0,0 @@
-By default button has the `md` size style, even if you don't explicitly pass a size prop.

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -1,35 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-import Currency from './_currency'
-
-test('abbreviate prop returns proper abbreviated amount', () => {
-  render(
-    <>
-      <Currency
-          abbreviate
-          amount="3200"
-          data={{ testid: 'test-thousands' }}
-      />
-      <Currency
-          abbreviate
-          amount="3,200,000"
-          data={{ testid: 'test-millions' }}
-      />
-      <Currency
-          abbreviate
-          amount="3200000000"
-          data={{ testid: 'test-billions' }}
-      />
-      <Currency
-          abbreviate
-          amount="3,200,000,000,000"
-          data={{ testid: 'test-trillions' }}
-      />
-    </>
-  )
-
-  expect(screen.getByTestId('test-thousands')).toHaveTextContent('$3.2K')
-  expect(screen.getByTestId('test-millions')).toHaveTextContent('$3.2M')
-  expect(screen.getByTestId('test-billions')).toHaveTextContent('$3.2B')
-  expect(screen.getByTestId('test-trillions')).toHaveTextContent('$3.2T')
-})

data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb

@@ -1,27 +0,0 @@
-<%= pb_rails("currency", props: {
-  abbreviate: true,
-  amount: "2,200.50",
-  label: "Thousands (with Unit)",
-  margin_bottom: "md",
-  unit: "/mo",
-}) %>
-
-<%= pb_rails("currency", props: {
-  abbreviate: true,
-  amount: "3424123",
-  label: "Millions",
-  margin_bottom: "md",
-}) %>
-
-<%= pb_rails("currency", props: {
-  abbreviate: true,
-  amount: "45,300,000,000",
-  label: "Billions",
-  margin_bottom: "md",
-}) %>
-
-<%= pb_rails("currency", props: {
-  abbreviate: true,
-  amount: "983,200,000,000,000",
-  label: "Trillions",
-}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-
-import Currency from '../_currency'
-
-const CurrencyAbbreviated = (props) => {
-  return (
-    <>
-      <Currency
-          abbreviate
-          amount="2,500"
-          label="Thousands (with Unit)"
-          marginBottom="md"
-          size="md"
-          unit="/mo"
-          {...props}
-      />
-      <Currency
-          abbreviate
-          amount="45300000"
-          label="Millions"
-          marginBottom="md"
-          size="md"
-          {...props}
-      />
-      <Currency
-          abbreviate
-          amount="6,700,000,000"
-          label="Billions"
-          marginBottom="md"
-          size="md"
-          {...props}
-      />
-      <Currency
-          abbreviate
-          amount="9,900,000,000,000"
-          label="Trillions"
-          size="md"
-          {...props}
-      />
-    </>
-  )
-}
-
-export default CurrencyAbbreviated

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;
-}