playbook_ui 10.18.2 → 10.20.0

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -44,20 +44,18 @@ const Image = (props: ImageProps) => {
   const dataProps = buildDataProps(data)
 
   return (
-    <div>
-      <img
-          {...ariaProps}
-          {...dataProps}
-          alt={alt}
-          className={classes}
-          data-src={url}
-          id={id}
-          onError={onError}
-          rounded={+rounded}
-          src={url}
-          transition={transition}
-      />
-    </div>
+    <img
+        {...ariaProps}
+        {...dataProps}
+        alt={alt}
+        className={classes}
+        data-src={url}
+        id={id}
+        onError={onError}
+        rounded={+rounded}
+        src={url}
+        transition={transition}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb

@@ -49,6 +49,7 @@
   props: {
     alt: "This is the alt text!",
     on_error: "this.classList.add('image-error')",
+    padding_x: "none",
     rounded: true,
     size: "xs",
     url: "not_a_picture"

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

@@ -5,41 +5,54 @@ import Image from '../_image'
 const DefaultImage = (props) => {
   return (
     <>
-      <Image
-          alt="picture of a misty forest"
-          size="xs"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          size="sm"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          size="md"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          size="lg"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          size="xl"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
+      <br />
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="xs"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="sm"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="lg"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="xl"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
     </>
   )
 }

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

@@ -5,41 +5,52 @@ import Image from '../_image'
 const RoundedImage = (props) => {
   return (
     <>
-      <Image
-          alt=""
-          rounded
-          size="xs"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt=""
-          rounded
-          size="sm"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt=""
-          rounded
-          size="md"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt=""
-          rounded
-          size="lg"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt=""
-          rounded
-          size="xl"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
+      <br />
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="xs"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="sm"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="lg"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="xl"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -12,13 +12,7 @@ import Title from '../pb_title/_title'
 type LegendProps = {
   aria?: object,
   className?: string,
-  color?: | "data_1"
-    | "data_2"
-    | "data_3"
-    | "data_4"
-    | "data_5"
-    | "data_6"
-    | "data_7",
+  color?: string,
   dark?: boolean,
   data?: object,
   id?: string,

data/app/pb_kits/playbook/pb_legend/_legend.scss

@@ -20,5 +20,9 @@
 }
 
 [class^=pb_legend_kit] {
-  @include indicator-colors($data_colors)
-}
+  @include indicator-colors($data_colors);
+  @include indicator-colors($status_colors);
+  @include indicator-colors($product_colors);
+  @include indicator-colors($category_colors)
+
+}

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("legend", props: { color: "data_8", text: "Windows" }) %>
+<%= pb_rails("legend", props: { color: "warning", text: "Windows" }) %>
+<%= pb_rails("legend", props: { color: "windows", text: "Windows" }) %>
+<%= pb_rails("legend", props: { color: "category_7", text: "Windows" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Legend } from '../..'
+
+const LegendColors = (props) => (
+  <div>
+    <Legend
+        color="data_8"
+        text="Windows"
+        {...props}
+    />
+    <Legend
+        color="warning"
+        text="Windows"
+        {...props}
+    />
+    <Legend
+        color="windows"
+        text="Windows"
+        {...props}
+    />
+    <Legend
+        color="category_7"
+        text="Windows"
+        {...props}
+    />
+  </div>
+)
+
+export default LegendColors

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.md

@@ -0,0 +1,2 @@
+By default legend kit uses `data_1` color.
+Pass the color prop and use any desired value from `$data_colors`, `$status_colors`, `$product_colors` and `$category_colors` list.

data/app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb

@@ -1,5 +1,5 @@
 <% labels = %W[Windows Doors Roofing Siding Solar Gutters Insulation Other] %>
 
-<% (1..7).each do |n, i| %>
-   <%= pb_rails("legend", props: { color: "data_#{n}", text: "#{labels[n]}" }) %>
+<% (0..7).each do |n, i| %>
+   <%= pb_rails("legend", props: { color: "data_#{n + 1}", text: "#{labels[n]}" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Legend from '../_legend'
 
-const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']
+const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar', 'Gutters', 'Insulation', 'Other']
 
 const LegendDefault = (props) => (
   <div>

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

@@ -1,11 +1,11 @@
 examples:
-  
+
   rails:
   - legend_default: Default
   - legend_prefix: With Prefix Text
- 
-  
-  
+  - legend_colors: Colors
+
   react:
   - legend_default: Default
   - legend_prefix: With Prefix Text
+  - legend_colors: Colors

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

@@ -1,2 +1,3 @@
 export { default as LegendDefault } from './_legend_default.jsx'
 export { default as LegendPrefix } from './_legend_prefix.jsx'
+export { default as LegendColors } from './_legend_colors'

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -3,8 +3,7 @@
 module Playbook
   module PbLegend
     class Legend < Playbook::KitBase
-      prop :color, type: Playbook::Props::Enum,
-                   values: (1..7).map { |n| "data_#{n}" },
+      prop :color, type: Playbook::Props::String,
                    default: "data_1"
       prop :prefix_text
       prop :text, required: true

data/app/pb_kits/playbook/pb_legend/legend.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Legend from './_legend'
+
+test('returns namespaced class name', () => {
+  render(
+    <Legend
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_legend_kit_data_1')
+})
+
+test('color prop', () => {
+  render(
+    <Legend
+        color="category_17"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_legend_kit_category_17')
+})

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

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -36,13 +36,15 @@ $section_colors_dark: (
     justify-content: center;
   }
   &[class*=_vertical] {
+    margin-left: $space_xs;
+    margin-right: $space_xs;
     &::after {
       @include section_separator_vertical(false);
     }
   }
-  
+
   // Dark =========================
-  
+
   &.dark {
     &::after {
       @include section_separator_horizontal(true);
@@ -59,6 +61,8 @@ $section_colors_dark: (
       }
     }
     &[class*=_vertical] {
+      margin-left: $space_xs;
+      margin-right: $space_xs;
       &::after {
         @include section_separator_vertical(true);
       }