playbook_ui 10.21.0.pre.alpha.jg1 → 10.21.0.pre.alpha.lightbox

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89c2b4d5b904ea641d5c4e5e1a436bdb70f5b8ad5292d6a9491f66dfba2406f2
-  data.tar.gz: 9246be8a7160010539031d1be35b247d9dc90a7f62f5cdfb7257785fdda564c4
+  metadata.gz: 8c75501fe979ac41342124f523c7746d81bdab2ece4c13d8a9b3fc8808c5c445
+  data.tar.gz: 63f5a9fc07a22b4e1ca25819e3db56e20927f073f6774bde288a38110694227a
 SHA512:
-  metadata.gz: 88d2c607e9942698c68473dbf6c3a468a0db61f4bad82c992497df0784d272936bd038ac11914f3ec07e16523872c592212cee958f007856911d4b31fd11523c
-  data.tar.gz: fb7262bf896606e9f7a4e39673962702a1d187cb19557317f9848cc1e8844b9b29c0aed208c4bc8acceaaf81941b23c03f990d5f917b0398f4104311aa68d281
+  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_background/_background.jsx

@@ -6,7 +6,6 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type BackgroundProps = {
-  alt?: string,
   aria?: object,
   backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21',
   children?: array<React.ReactNode> | React.ReactNode,
@@ -16,12 +15,10 @@ type BackgroundProps = {
   imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
-  transition?: 'fade' | 'blur' | 'scale',
 }
 
 const Background = (props: BackgroundProps) => {
   const {
-    alt = '',
     aria = {},
     backgroundColor = 'light',
     children,
@@ -30,24 +27,22 @@ const Background = (props: BackgroundProps) => {
     id,
     imageUrl = '',
     tag = 'div',
-    transition = '',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
+  const classes = classnames(buildCss('pb_background_kit'), globalProps(props), `pb_background_color_${backgroundColor}`, className)
+  const Tag = `${tag}`
   const backgroundStyle = {
     backgroundImage: `url(${imageUrl})`,
     backgroundSize: 'cover',
   }
-  const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), `pb_background_color_${backgroundColor}`, className)
-  const Tag = `${tag}`
 
   return (
     <>
       <If condition={imageUrl}>
         <Tag
-            alt={alt}
             style={backgroundStyle}
             {...ariaProps}
             {...dataProps}

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -22,30 +22,14 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
     }
   };
 
-  &.fade {
-    opacity: 0;
-    &.lazyloaded {
-      opacity: 1;
-      transition: opacity 400ms ease-in;
-    }
-  }
-  
-  &.blur {
-    filter: blur(5px);
-    &.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
-      transition: filter 400ms ease-in;
-    }
+  .blur_up {
+    -webkit-filter: blur(6px);
+    filter: blur(6px);
+    transition: filter 550ms, -webkit-filter 550ms;
   }
-  
-  &.scale {
-    opacity: 0;
-    transform: scale(0.9);
-    &.lazyloaded {
-      opacity: 1;
-      transform: scale(1);
-      transition: 700ms ease-in;
-    }
+
+  .blur_up.lazyloaded {
+    -webkit-filter: blur(0);
+    filter: blur(0);
   }
 }

data/app/pb_kits/playbook/pb_background/background.rb

@@ -12,18 +12,18 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "div"
 
-      prop :transition, type: Playbook::Props::Enum,
-                        values: ["blur", "fade", "scale", nil],
-                        default: nil
-
       def classname
-        generate_classname("pb_background_kit", image_classname, separator: " ")
+        generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
       end
 
     private
 
       def image_classname
-        image_url.present? ? "lazyload #{transition}" : "pb_background_color_#{background_color}"
+        image_url.present? ? "lazyload blur_up" : ""
+      end
+
+      def background_color_classname
+        !image_url.present? ? "pb_background_color_#{background_color}" : ""
       end
     end
   end

data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb

@@ -1,5 +1,5 @@
-<%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
-  <%= pb_rails("flex", props: { horizontal: "center", orientation: "column", margin_bottom: "xl" }) do %>
+<%= pb_rails("background", props: { image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
     <%= pb_rails("flex/flex_item") do %>
       <%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%>
     <% end %>
@@ -11,51 +11,3 @@
     <% end %>
   <% end %>
 <% end %>
-
-
-<%= pb_rails("flex", props: { margin_top: "lg" }) do %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
-    <%= pb_rails("select", props: {
-    id: "transition-dropdown",
-    label: "",
-    blank_selection: "Select a Transition...",
-    options: [
-        {
-          value: 'fade',
-        },
-        {
-          value: 'blur',
-        },
-        {
-          value: 'scale',
-        },
-    ]
-    }) %>
-  <% end %>
-<% end %> 
-
-<script>
-    window.addEventListener('DOMContentLoaded', () => {
-        const transitionDropdown = document.querySelector("#transition-dropdown")
-        var option = ''
-
-        transitionDropdown.addEventListener('change', function() {
-          if (this.value === '') {
-            (transitionDropdown).className = (transitionDropdown).className + ' _disabled'
-          } else {
-            (transitionDropdown).removeAttribute("disabled");
-            (transitionDropdown).className = (transitionDropdown)
-            option = this.value
-          }
-        });
-
-        const updateTransition = (transition) => {
-          const imageTransition = document.querySelector('.background-image')
-            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
-            imageTransition.classList.add(transition, "lazyload")   
-        } 
-        (transitionDropdown).addEventListener('change', function() {
-          updateTransition(option)
-        })
-    });
-</script>

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

@@ -1,79 +1,36 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Background } from '../..'
-import { Card, Flex, FlexItem, Select, Title } from '../..'
+import { Card, Flex, FlexItem, Title } from '../..'
 
-const BackgroundImage = (props) => {
-  const [transition, setTransition] = useState('')
-
-  const handleTransition = ({ target }) => {
-    setTransition(target.value)
-  }
-
-  const options = [
-    {
-      value: 'fade',
-    },
-    {
-      value: 'blur',
-    },
-    {
-      value: 'scale',
-    },
-  ]
-
-  return (
-    <>
-      <Background
-          alt="colorful background"
-          className="background lazyload"
-          imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
-          transition={transition}
+const BackgroundImage = (props) => (
+  <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
+    <Flex
+        orientation="column"
+        vertical="center"
+        {...props}
+    >
+      <FlexItem>
+        <Title
+            dark
+            padding="lg"
+            size={1}
+            text="Background Kit Image"
+            {...props}
+        />
+      </FlexItem>
+      <FlexItem
+          padding="lg"
           {...props}
       >
-        <Flex
-            orientation="column"
-            vertical="center"
+        <Card
+            shadow="deepest"
             {...props}
         >
-          <FlexItem>
-            <Title
-                dark
-                padding="lg"
-                size={1}
-                text="Background Kit Image"
-                {...props}
-            />
-          </FlexItem>
-          <FlexItem
-              padding="lg"
-              {...props}
-          >
-            <Card
-                shadow="deepest"
-                {...props}
-            >
-              {
-                'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'
-              }
-            </Card>
-          </FlexItem>
-        </Flex>
-      </Background>
-      <Flex marginTop="xl">
-        <FlexItem fixedSize="250px">
-          <Select
-              blankSelection="Select a Transition..."
-              label=""
-              name="dropdown"
-              onChange={handleTransition}
-              options={options}
-              transition={transition}
-              {...props}
-          />
-        </FlexItem>
-      </Flex>
-    </>
-  )
-}
+          {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
+        </Card>
+      </FlexItem>
+    </Flex>
+  </Background>
+)
 
 export default BackgroundImage

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,