playbook_ui 10.19.0.pre.popover.alpha1 → 10.21.0.pre.alpha.na1

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_popover/_popover.jsx

@@ -150,14 +150,16 @@ 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 || targetIsReference) {
+        if (!targetIsPopover) {
           shouldClosePopover(true)
         }
         break
       case 'inside':
-        if (targetIsPopover || targetIsReference) {
+        if (targetIsPopover) {
           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/index.js

@@ -36,14 +36,15 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.toggleTooltip()
         this.popper.update()
+        this.toggleTooltip()
       }, 0)
     })
   }
 
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target }) => {
+      const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
       const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
@@ -51,17 +52,21 @@ export default class PbPopover extends PbEnhancedElement {
         this.hideTooltip()
         break
       case 'outside':
-        if (!isTooltipElement) {
+        if (isTooltipElement) {
+          this.checkCloseTooltip()
+        } else {
           this.hideTooltip()
         }
         break
       case 'inside':
-        if (isTooltipElement) {
+        if (isTooltipElement || isTriggerElement) {
           this.hideTooltip()
+        } else {
+          this.checkCloseTooltip()
         }
         break
       }
-    }, { once: true, capture: true })
+    }, { once: true })
   }
 
   hideTooltip() {

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -3,7 +3,7 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+  <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>
     </div>

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);
       }

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

@@ -10,8 +10,6 @@
     content: "";
     height: 100%;
     width: 1px;
-    margin-left: $space_xs;
-    margin-right: $space_xs;
     position: initial;
     z-index: 0;
 }

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -92,13 +92,13 @@
       .add-on {
         &-right {
           .add-on-card {
-            border: 1px solid red;
+            border: 1px solid $error;
             border-left: 0;
           }
         }
         &-left {
           .add-on-card {
-            border: 1px solid red;
+            border: 1px solid $error;
             border-right: 0;
           }
         }
@@ -169,7 +169,7 @@
     &-card {
       height: 45px;
       margin: 0;
-      padding: 0;
+      padding: 0 !important;
       align-items: center;
       justify-content: center;
       width: 45px;

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -30,12 +30,13 @@ const Title = (props: TitleProps) => {
     size = 3,
     tag = 'h3',
     text,
+    variant = null,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_title_kit', size, color),
+    buildCss('pb_title_kit', size, variant, color),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -2,6 +2,5 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
-        <%= content.presence || object.text %>
-<% end %>
+    class: object.classname) do %><%= content.presence || object.text %><% end %>
+    

data/app/pb_kits/playbook/pb_title/title.rb

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

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.18.1"
-  VERSION = "10.19.0.pre.popover.alpha1"
+  PREVIOUS_VERSION = "10.20.0"
+  VERSION = "10.21.0.pre.alpha.na1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.19.0.pre.popover.alpha1
+  version: 10.21.0.pre.alpha.na1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-01-24 00:00:00.000000000 Z
+date: 2022-02-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -426,9 +426,6 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
 - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
-- app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
-- app/pb_kits/playbook/pb_button/docs/_button_size.jsx
-- app/pb_kits/playbook/pb_button/docs/_button_size.md
 - app/pb_kits/playbook/pb_button/docs/_footer.md
 - app/pb_kits/playbook/pb_button/docs/example.yml
 - app/pb_kits/playbook/pb_button/docs/index.js
@@ -669,6 +666,9 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
@@ -684,6 +684,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -1163,6 +1164,9 @@ files:
 - app/pb_kits/playbook/pb_legend/_legend.scss
 - app/pb_kits/playbook/pb_legend/docs/_description.md
 - app/pb_kits/playbook/pb_legend/docs/_footer.md
+- app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb
+- app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx
+- app/pb_kits/playbook/pb_legend/docs/_legend_colors.md
 - app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb
 - app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx
 - app/pb_kits/playbook/pb_legend/docs/_legend_prefix.html.erb
@@ -1171,6 +1175,7 @@ files:
 - app/pb_kits/playbook/pb_legend/docs/index.js
 - app/pb_kits/playbook/pb_legend/legend.html.erb
 - app/pb_kits/playbook/pb_legend/legend.rb
+- app/pb_kits/playbook/pb_legend/legend.test.js
 - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
 - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
 - app/pb_kits/playbook/pb_line_graph/docs/_description.md

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

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