playbook_ui 10.16.0 → 10.19.0.pre.popover.alpha1

data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+
+import Image from '../_image'
+import Select from '../../pb_select/_select'
+import FlexItem from '../../pb_flex/_flex_item'
+import Flex from '../../pb_flex/_flex'
+import Button from '../../pb_button/_button'
+
+const TransitionImage = (props) => {
+  const [transition, setTransition] = useState('')
+  const [apply, setApply] = useState({
+    url: '',
+    transition: '',
+  })
+
+  const loadImage = () => {
+    document.querySelector('.image').classList.remove(transition, 'lazyloaded')
+    setApply({
+      url: 'https://unsplash.it/500/400/?image=634',
+      transition: transition,
+    },
+    document.querySelector('.image').classList.add(transition, 'lazyload')
+    )
+  }
+
+  const handleTransition = ({ target }) => {
+    setTransition(target.value)
+  }
+
+  const options = [
+    {
+      value: 'fade',
+    },
+    {
+      value: 'blur',
+    },
+    {
+      value: 'scale',
+    },
+  ]
+
+  return (
+    <>
+      <Flex>
+        <FlexItem fixedSize="250px">
+          <Select
+              blankSelection="Select a Transition..."
+              label=""
+              onChange={handleTransition}
+              options={options}
+              {...props}
+          />
+        </FlexItem>
+        <FlexItem>
+          <Button
+              disabled={transition === '' ? true : false}
+              marginLeft="sm"
+              onClick={loadImage}
+              text="Load Image"
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+      <div style={{ display: apply.url === '' ? 'none' : 'block' }}>
+        <Image
+            alt="picture of a misty forest"
+            className="image"
+            transition={apply.transition}
+            url={apply.url}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default TransitionImage

data/app/pb_kits/playbook/pb_image/docs/_transition_image.md

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

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

@@ -3,7 +3,9 @@ examples:
   - default_image: Default
   - rounded_image: Rounded
   - custom_error_image: Error Handling
+  - transition_image: Transition
   react:
   - default_image: Default
   - rounded_image: Rounded
   - custom_error_image: Error Handling
+  - transition_image: Transition

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

@@ -1,3 +1,4 @@
 export { default as DefaultImage } from './_default_image.jsx'
 export { default as RoundedImage } from './_rounded_image.jsx'
 export { default as CustomErrorImage } from './_custom_error_image.jsx'
+export { default as TransitionImage } from './_transition_image.jsx'

data/app/pb_kits/playbook/pb_image/image.html.erb

@@ -7,4 +7,4 @@
     alt: object.alt,
     onerror: object.on_error,
     )
-%>
+%>

data/app/pb_kits/playbook/pb_image/image.rb

@@ -11,10 +11,13 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md lg xl none],
                   default: "none"
+      prop :transition, type: Playbook::Props::Enum,
+                        values: %w[blur fade scale none],
+                        default: "fade"
       prop :url
 
       def classname
-        generate_classname("pb_image_kit#{size_class} lazyload blur_up") + rounded_class
+        generate_classname("pb_image_kit#{size_class} #{transition_class} lazyload") + rounded_class
       end
 
     private
@@ -26,6 +29,10 @@ module Playbook
       def size_class
         size == "none" ? nil : "_#{size}"
       end
+
+      def transition_class
+        transition == "none" ? nil : transition
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -7,6 +7,7 @@ const props = {
   data: { testid: 'avatar' },
   size: null,
   url: 'https://unsplash.it/500/400/?image=634',
+  transition: 'blur',
 }
 
 it('Should be accessible', async () => {
@@ -20,16 +21,20 @@ test('alt attribute', () => {
 
 test('default classname', () => {
   const kit = renderKit(Image, props)
-  expect(kit).toHaveClass('pb_image_kit lazyload blur_up')
+  expect(kit).toHaveClass('pb_image_kit lazyload')
 })
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_xs lazyload blur_up')
+  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
+})
+
+test('transition = blur', () => {
+  const kit = renderKit(Image, props, { transition: 'blur' })
+  expect(kit).toHaveClass('pb_image_kit lazyload blur')
 })
 
 test('rounded = true', () => {
   const kit = renderKit(Image, props, { rounded: true })
-  expect(kit).toHaveClass('pb_image_kit lazyload blur_up rounded')
+  expect(kit).toHaveClass('pb_image_kit lazyload rounded')
 })
-

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -25,7 +25,8 @@ type LineGraphProps = {
   legend?: boolean,
   toggleLegendClick?: boolean,
   height?: string,
-}
+  colors: array,
+  }
 
 export default class LineGraph extends React.Component<LineGraphProps> {
   static defaultProps = {
@@ -52,11 +53,13 @@ export default class LineGraph extends React.Component<LineGraphProps> {
       legend,
       toggleLegendClick,
       height,
+      colors = [],
     } = this.props
 
     new pbChart(`.${className}`, {
       axisTitle: axisTitle,
       chartData: chartData,
+      colors: colors,
       id: id,
       pointStart: pointStart,
       subtitle: subTitle,

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}, {
+    name: 'Manufacturing',
+    data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434]
+}, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387]
+}, {
+    name: 'Project Development',
+    data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227]
+}, {
+    name: 'Other',
+    data: [nil, nil, nil, 3112, 4989, 5816, 15274, 18111]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-colors", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Line Graph with Custom Data Colors', 
+    axis_title: 'Number of Employees',
+    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import LineGraph from '../_line_graph'
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387],
+}, {
+  name: 'Project Development',
+  data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
+}, {
+  name: 'Other',
+  data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
+}]
+
+const LineGraphColors = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="line-colors"
+        title="Line Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphColors

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements. 
+Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

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

@@ -5,6 +5,7 @@ examples:
   - line_graph_legend: Legend
   - line_graph_legend_nonclickable: Legend Nonclickable
   - line_graph_height: Height
+  - line_graph_colors: Color Overrides
 
 
   react:
@@ -12,3 +13,4 @@ examples:
   - line_graph_legend: Legend
   - line_graph_legend_nonclickable: Legend Nonclickable
   - line_graph_height: Height
+  - line_graph_colors: Color Overrides

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

@@ -2,3 +2,4 @@ export { default as LineGraphDefault } from './_line_graph_default.jsx'
 export { default as LineGraphLegend } from './_line_graph_legend.jsx'
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
+export { default as LineGraphColors } from './_line_graph_colors.jsx'

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -20,6 +20,8 @@ module Playbook
       prop :toggle_legend_click, type: Playbook::Props::Boolean,
                                  default: true
       prop :height
+      prop :colors, type: Playbook::Props::Array,
+                    default: []
 
       def chart_type
         gradient ? "area" : "line"
@@ -41,6 +43,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
+          colors: colors,
         }
       end
 

data/app/pb_kits/playbook/pb_list/list.rb

@@ -43,6 +43,7 @@ module Playbook
         dark ? "dark" : nil
       end
 
+      # rubocop:disable Style/CaseLikeIf
       def layout_class
         if layout == "right"
           "layout_right"
@@ -52,6 +53,7 @@ module Playbook
           ""
         end
       end
+      # rubocop:enable Style/CaseLikeIf
 
       def size_class
         size ? "large" : nil

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss

@@ -0,0 +1,22 @@
+@mixin bold {
+  @include subtle;
+
+  [class*=pb_nav_list_kit_item] {
+    &[class*=_active] [class*=_link] {
+      background-color: $primary;
+      color: $white;
+      box-shadow: $shadow_deep;
+      @media (hover:hover) {
+        &:hover {
+          background-color: darken($primary, 4%);
+          [class*=_text],[class*=_icon] {
+            color: $white;
+          }
+        }
+      }
+      [class*=_text],[class*=_icon] {
+        font-weight: $bolder;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -3,6 +3,8 @@
 @import "../tokens/animation-curves";
 @import "../tokens/typography";
 @import "./subtle_mixin";
+@import "./bold_mixin";
+@import "../tokens/shadows";
 
 $selector: ".pb_nav_list";
 
@@ -92,7 +94,21 @@ $selector: ".pb_nav_list";
       }
     }
   }
-  
+
+  // Bold Variant
+  &[class*=_bold] {
+    @include bold;
+    // Horizontal Overrides
+    [class*=pb_nav_list_kit_item] {
+      margin: 0;
+    }
+    [class*=_active] {
+      [class*=_text] {
+        color: $white;
+      }
+    }
+  }
+
   &[class*=dark]{
     [class*=pb_nav_list_kit_item]{
       [class*=_link]{

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -6,6 +6,8 @@
 @import "../tokens/titles";
 @import "../pb_body/body_mixins";
 @import "./subtle_mixin";
+@import "./bold_mixin";
+@import "../tokens/shadows";
 
 $selector: ".pb_nav_list";
 
@@ -87,12 +89,17 @@ $selector: ".pb_nav_list";
   }
 
   // Subtle Variant
-  &[class*=_subtle]  {
+  &[class*=_subtle] {
     @include subtle;
   }
 
+  // Bold Variant
+  &[class*=_bold] {
+    @include bold;
+  }
+
   // Show Highlight
-  &[class*=_highlight]  {
+  &[class*=_highlight] {
     [class*=_active] {
       background-color: $active_light;
     }

data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const BoldHorizontalNav = (props) => {
+  return (
+    <Nav
+        link="#"
+        orientation="horizontal"
+        variant="bold"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default BoldHorizontalNav

data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "vertical", variant: "bold" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const BoldVerticalNav = (props) => {
+  return (
+    <Nav
+        link="#"
+        orientation="vertical"
+        variant="bold"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default BoldVerticalNav

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("nav", props: { orientation: "horizontal"}) do %>
+<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
   <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
   <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
   <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>

data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("nav", props: {variant: "subtle"}) do %>
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
   <%= pb_rails("nav/item", props: { text: "Overview", link: "#" }) %>
   <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true  }) %>
   <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#" }) %>

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

@@ -8,8 +8,10 @@ examples:
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
+  - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
+  - bold_horizontal_nav: Bold Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -23,8 +25,10 @@ examples:
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
+  - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
+  - bold_horizontal_nav: Bold Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

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

@@ -11,3 +11,5 @@ export { default as WithIconsNav } from './_with_icons_nav.jsx'
 export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
 export { default as WithImgNav } from './_with_img_nav.jsx'
 export { default as NewTab } from './_new_tab.jsx'
+export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
+export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -9,7 +9,7 @@ module Playbook
                          values: %w[vertical horizontal],
                          default: "vertical"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[normal subtle],
+                     values: %w[normal subtle bold],
                      default: "normal"
       prop :highlight, type: Playbook::Props::Boolean, default: true
       prop :borderless, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -150,16 +150,14 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null
 
-      if (targetIsReference) return
-
       switch (closeOnClick) {
       case 'outside':
-        if (!targetIsPopover) {
+        if (!targetIsPopover || targetIsReference) {
           shouldClosePopover(true)
         }
         break
       case 'inside':
-        if (targetIsPopover) {
+        if (targetIsPopover || targetIsReference) {
           shouldClosePopover(true)
         }
         break

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb

@@ -1,23 +1,23 @@
 <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
   <span>
-    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: 'inside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "inside",
       trigger_element_id: "inside-popover-1",
       tooltip_id: "inside-tooltip-1",
-      position: 'bottom',
+      position: "bottom",
       offset: true
     }) do %>
       Click on me!
     <% end %>
   </span>
   <span>
-    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: 'outside-popover-1' }) %>
+    <%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "outside",
       trigger_element_id: "outside-popover-1",
       tooltip_id: "outside-tooltip-1",
-      position: 'left',
+      position: "left",
       offset: true
     }) do %>
         Click anywhere but me!
@@ -27,16 +27,16 @@
     <%= pb_rails("button", props: {
       text: "Click Anywhere",
       variant: "secondary",
-      id: 'any-popover-1'
+      id: "any-popover-1"
     }) %>
     <%= pb_rails("popover", props: {
       close_on_click: "any",
       trigger_element_id: "any-popover-1",
       tooltip_id: "any-tooltip-1",
-      position: 'top',
+      position: "top",
       offset: true
     }) do %>
       Click anything!
     <% end %>
   </span>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx

@@ -31,6 +31,9 @@ const PopoverScrollHeight = (props) => {
         maxHeight="150px"
         maxWidth="240px"
         offset
+        padding="md"
+        paddingBottom="sm"
+        paddingTop="sm"
         placement="top"
         reference={popoverTrigger}
         shouldClosePopover={handleShouldClosePopover}

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx

@@ -36,6 +36,7 @@ const PopoverZIndex = (props) => {
       <PbReactPopover
           closeOnClick="outside"
           offset
+          padding="sm"
           placement="top"
           reference={popoverTrigger}
           shouldClosePopover={handleShouldClosePopover}