playbook_ui 10.19.0 → 10.21.0.pre.alpha.lightbox

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2aee1f2c048d8521387c720ec1de805f4b141ac36d596a51cd785cda18964425
-  data.tar.gz: c66e833a6eae63f445b75cb3c89845a9096e57c45771c085102d1f2ee1b5dac0
+  metadata.gz: 8c75501fe979ac41342124f523c7746d81bdab2ece4c13d8a9b3fc8808c5c445
+  data.tar.gz: 63f5a9fc07a22b4e1ca25819e3db56e20927f073f6774bde288a38110694227a
 SHA512:
-  metadata.gz: e232f695466a3fa606ef20b3416d2c4684e613ae6a278c3d7c957e502dcebecb6ad28109db1422a89928451bee0df24728d2e0bdfc30143ca5422e314bfc6c45
-  data.tar.gz: 45904dac97847a942877f532d363552702f762bee32c97e096a346efeb32d0fb8e55e7fc7b81ebcf767a0fb1b95ec722669eb989fe85b7f4f13606d130e2a16a
+  metadata.gz: df78b95db1bf1cc80316580d79d38b5d96e02f8161d9b67dfb8d7195894e9f27c2eceb132920d56c21a924082fedb48bc86df78a15f941941587c8ab60d81c6b
+  data.tar.gz: 6f39130d39966ff49e67d5ad511e4c0447b767de0ded3fa22da749802a5552d2102cbb6e01b7f5cb8d05f3717ae35ad6b4acfb47e0598a6c69bc06135df18fe0

data/app/pb_kits/playbook/_playbook.scss

@@ -47,6 +47,7 @@
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
+@import 'pb_lightbox/lightbox';
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';

data/app/pb_kits/playbook/data/menu.yml

@@ -51,6 +51,7 @@ kits:
   - layouts:
     - flex
     - layout
+  - lightbox
   - list
   - loading_inline
   - nav

data/app/pb_kits/playbook/index.js

@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
-export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -55,6 +54,7 @@ export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
+export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Message } from './pb_message/_message'
@@ -101,6 +101,7 @@ export { default as Toggle } from './pb_toggle/_toggle'
 export { default as Typeahead } from './pb_typeahead/_typeahead'
 export { default as User } from './pb_user/_user'
 export { default as UserBadge } from './pb_user_badge/_user_badge'
+export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
 // ^^^ React Component JSX Imports from the React Kits ^^^
 

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -44,7 +44,7 @@ const Avatar = (props: AvatarProps) => {
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_avatar_kit', size),
+    buildCss('pb_avatar_kit', `size_${size}`),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -16,8 +16,8 @@ $avatar-sizes: (
   position: relative;
 
   @each $name, $size in $avatar-sizes {
-    &[class*=_#{$name}],
-    &[class*=_#{$name}_thumb] {
+    &[class*=_size_#{$name}],
+    &[class*=_size_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -18,7 +18,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_avatar_kit", size)
+        generate_classname("pb_avatar_kit", "size_#{size}")
       end
 
       def online_status_props

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -22,7 +22,7 @@ test('loads the given image url and name', () => {
   const image    = screen.getByAltText(imageAlt)
   const initials = name.split(/\s/)[0].substr(0, 1) + name.split(/\s/)[1].substr(0, 1)
 
-  expect(kit).toHaveClass('pb_avatar_kit_md')
+  expect(kit).toHaveClass('pb_avatar_kit_size_md')
   expect(kit).toHaveAttribute('data-initials', initials)
   expect(image).toHaveAttribute('data-src', imageUrl)
   expect(image).toHaveAttribute('src', imageUrl)

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -8,6 +8,7 @@ import pbChart from '../plugins/pb_chart'
 
 type BarGraphProps = {
   axisTitle: string,
+  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -30,6 +31,7 @@ type BarGraphProps = {
 export default class BarGraph extends React.Component<BarGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
+    dark: false,
     type: 'column',
     legend: false,
     toggleLegendClick: true,
@@ -38,6 +40,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
+      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -56,6 +59,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     new pbChart(`.${className}`, {
       axisTitle: axisTitle,
+      dark,
       chartData: chartData,
       colors: colors,
       id: id,

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -33,6 +33,7 @@ module Playbook
           id: id,
           className: classname,
           chartData: chart_data,
+          dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
           subtitle: subtitle,

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -21,6 +21,7 @@ type BodyProps = {
   status?: 'negative' | 'neutral' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
+  variant: null | 'link',
 }
 
 const Body = (props: BodyProps) => {
@@ -36,12 +37,13 @@ const Body = (props: BodyProps) => {
     status,
     tag = 'div',
     text,
+    variant = null,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_body_kit', color, status),
+    buildCss('pb_body_kit', color, variant, status),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -22,7 +22,7 @@ type ButtonPropTypes = {
   loading?: boolean,
   newWindow?: boolean,
   onClick?: EventHandler,
-  size: 'large' | 'medium' | 'small',
+  size?: 'sm' | 'md' | 'lg',
   text?: string,
   type: 'inline' | null,
   htmlType: string | 'button',
@@ -36,19 +36,19 @@ const buttonClassName = (props: ButtonPropTypes) => {
     disabled = false,
     fullWidth = false,
     loading = false,
-    size = null,
     type = 'inline',
     variant = 'primary',
+    size = null,
   } = props
 
   let className = 'pb_button_kit'
 
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
-  className += `${size !== null ? `_${size}` : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
+  className += `${size !== null ? ` size_${size}` : ''}`
 
   return className
 }

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,7 +1,24 @@
 @import "./button_mixins";
 
-[class^=pb_button_kit]{
+$pb_button_sizes: (
+  "sm":   0.75rem,
+  "md":   0.875rem,
+  "lg":   1.125rem,
+);
+
+[class*=pb_button_kit]{
   @include pb_button;
+  // Size =================
+  @each $name, $size in $pb_button_sizes {
+    &[class*=size_#{$name}] {
+      font-size: $size;
+      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
+    }
+    @if $name == "sm" {
+      min-height: 0;
+    }
+  }
+
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/button.rb

@@ -18,6 +18,9 @@ module Playbook
       prop :text
       prop :type
       prop :value
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["sm", "md", "lg", nil],
+                  default: nil
 
       def options
         {
@@ -44,12 +47,13 @@ module Playbook
         link ? "a" : "button"
       end
 
-    private
-
       def classname
-        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        button_class + size_class
       end
 
+    private
+
       def disabled_class
         disabled ? "disabled" : "enabled"
       end
@@ -61,6 +65,10 @@ module Playbook
       def loading_class
         loading ? "loading" : nil
       end
+
+      def size_class
+        size ? " size_#{size}" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -89,3 +89,16 @@ test('click event', async () => {
 
   expect(screen.getByText('clicked button!')).toBeInTheDocument()
 })
+
+test('size prop', () => {
+  render(
+    <Button
+        data={{ testid: 'size-test' }}
+        size="sm"
+    />
+  )
+
+  const kit = screen.getByTestId('size-test')
+
+  expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
+})

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

@@ -0,0 +1,3 @@
+<%= 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

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

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

data/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -7,6 +7,7 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
+  - button_size: Button Size
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -15,3 +16,4 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
+  - button_size: Button Size

data/app/pb_kits/playbook/pb_button/docs/index.js

@@ -5,3 +5,4 @@ export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
+export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -30,6 +30,7 @@ const Caption = (props: CaptionProps) => {
     size = 'md',
     tag = 'div',
     text,
+    variant = null,
   } = props
   const tagOptions = [
     'h1',
@@ -48,7 +49,7 @@ const Caption = (props: CaptionProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size, color),
+    buildCss('pb_caption_kit', size, variant, color),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -3,6 +3,9 @@
 
 [class^="pb_caption_kit"] {
   @include caption;
+  &[class*="_link"] {
+    color: $primary;
+  }
 
   &[class^="pb_caption_kit_lg"] {
     @include caption_lg;
@@ -11,6 +14,10 @@
   &[class^="pb_caption_kit_xs"] {
     @include caption_xs;
   }
+  
+  &[class*="link"] {
+    color: $primary;
+  }
 
   @include pb_caption_kit_colors;
 

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -10,14 +10,17 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
                  default: "div"
       prop :text
-      prop :variant, deprecated: true
+      prop :variant, type: Playbook::Props::Enum,
+                     values: [nil, "link"],
+                     default: nil,
+                     deprecated: true
 
       prop :color, type: Playbook::Props::Enum,
                    values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
 
       def classname
-        generate_classname("pb_caption_kit", size, color)
+        generate_classname("pb_caption_kit", size, variant, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -14,6 +14,7 @@ type CircleChartProps = {
   children: Node,
   className?: string,
   colors: array,
+  dark?: Boolean,
   data?: Object,
   dataLabelHtml: string,
   dataLabels: boolean,
@@ -40,6 +41,7 @@ const CircleChart = (props: CircleChartProps) => {
     children,
     className,
     colors = [],
+    dark = false,
     data = {},
     dataLabelHtml = '<div>{point.name}</div>',
     dataLabels = false,
@@ -81,6 +83,7 @@ const CircleChart = (props: CircleChartProps) => {
       borderColor: roundedBorderColor,
       borderWidth: roundedBorderWidth,
       chartData: formattedChartData,
+      dark,
       title,
       type: style,
       showInLegend: legend,

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -69,6 +69,7 @@ module Playbook
           borderColor: rounded_border_color,
           borderWidth: rounded_border_width,
           chartData: chart_data_formatted,
+          dark: dark ? "dark" : "",
           title: title,
           height: height,
           type: chart_type,

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

@@ -0,0 +1,215 @@
+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_date/_date.jsx

@@ -107,7 +107,7 @@ const PbDate = (props: PbDateProps) => {
               <Icon
                   fixedWidth
                   icon="calendar-alt"
-                  size="xs"
+                  size="sm"
               />
             </Caption>
           </If>

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -42,7 +42,7 @@
       <%= pb_rails("caption", props: {
         tag: "div",
       }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>