playbook_ui 10.20.0 → 10.21.0.pre.alpha.lightbox.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58801952abf6ff0d0a76aa1af436b9baa6e360c543051398d43e972f2fdf3268
-  data.tar.gz: f693eaafecd9f29945efbdf72eccd26e762c40a1887e8744e62e895bfae300ca
+  metadata.gz: d8de309283f70eb32584fd45cd9c8c1d86eb4379dd3268b32c04961a3c1eb78c
+  data.tar.gz: 5d658516cec5f8eae57b9a5c04375524b9f03bb091171941a30776390130418c
 SHA512:
-  metadata.gz: f29aa234d6d47e8cd9c851eab5c17b06fe11349c23c09eef7fa6e0e21aad7a97e7e5fafc44b1baeed7ae679a57ae6c88d5049a70dcdec4c1dd3a336c4a31e87f
-  data.tar.gz: 30bd72269287a8da66a40d0181000ce5d679675a28af2897f739d0b147b7089333e64da5e55035e88d1b8b1b25974ad966f8d9f00853dd6e82bb6160141ec050
+  metadata.gz: 4ed16f1d8e6ab09e07dfc3f397700e4f41e90716ad91b61dbc33cc31615325a399affdcfb39448b7f5550784c4706ebeac6dfe1b0e4679a8bdd7207d956effaa
+  data.tar.gz: 634bc7cdb80465bb4c226a3b8f8f938380d57c44be6d94e0605c3ba3b357724d251c6a014e766b2173d35c2a22cac965637f953a5864f63ecd73eb466b6614b2

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_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_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_file_upload/_file_upload.jsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
 
-import { buildCss, noop } from '../utilities/props'
+import { buildCss, buildDataProps, noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import type { Callback } from '../types'
 
@@ -14,15 +14,17 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: array<string>,
   className?: string,
+  data?: object,
   acceptedFilesDescription?: string,
   onFilesAccepted: Callback,
 }
 
 const FileUpload = (props: FileUploadProps) => {
   const {
-    accept = ['*'],
+    accept = null,
     acceptedFilesDescription = '',
     className,
+    data = {},
     onFilesAccepted = noop,
   } = props
   const onDrop = useCallback((files) => {
@@ -34,17 +36,22 @@ const FileUpload = (props: FileUploadProps) => {
     onDrop,
   })
 
-  const acceptedFileTypes = accept.map((fileType) => {
-    if (fileType.startsWith('image/')) {
-      return fileType.replace('image/', ' ')
-    } else {
-      return fileType
-    }
-  })
+  const acceptedFileTypes = () => {
+    return accept.map((fileType) => {
+      if (fileType.startsWith('image/')) {
+        return fileType.replace('image/', ' ')
+      } else {
+        return fileType
+      }
+    })
+  }
+
+  const dataProps = buildDataProps(data)
 
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
+        {...dataProps}
         {...getRootProps()}
     >
       <Card>
@@ -53,7 +60,7 @@ const FileUpload = (props: FileUploadProps) => {
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />
-            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes}`}</p>
+            <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
           </If>
         </Body>
       </Card>

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

@@ -0,0 +1,40 @@
+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')
+})