RubyGems - playbook_ui - Versions diffs - 10.18.1 → 10.19.0.pre.popover.alpha1 - Mend

playbook_ui 10.18.1 → 10.19.0.pre.popover.alpha1

Files changed (67) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f142578a4f0c11786c87876c2ede359c72f96d89fbcb752f9e5938d2f34dbd55
-  data.tar.gz: e8d5692cee8e7e6bcc5882e344b602ec2b565171a063da4bd2596c8647b713fb
+  metadata.gz: '090e97cafaabff3f06f58cca0ce4a1416d09f6baea9f828e51c93059f279f292'
+  data.tar.gz: 580359a862a8567240f9759e2ab80b708688d528ddc054789e6f658352cc21e1
 SHA512:
-  metadata.gz: 1bd8c3eba4db831eb573503991d5217795dafb5bc908de7be90ddae604bfe12122ff588f86964764a7856fa910202687b91e08a45da0934f567f4d8f4c199d20
-  data.tar.gz: 745dc4d1bac54f13518d974f6a6ba7ff8817c9f3c98f49905b8ee708735eafd75fda8066255cb35ed1c2157ef8949b8d2f9ff2e4514ac1e0af617224ef9e827c
+  metadata.gz: 85c349d66339b000e6d7cb9077621b9e8d40852538d6e9eb7111947fabd0df9e11b3d2448a67609727c9fb915393ddf903140f43375be0947d5d749ffb6fb85a
+  data.tar.gz: b3774dfcbf0315c3b2fde5e145e7e0e33c3ceb23e5371aa01120ccca6f7294e7883e1f19c89dc73cdc3af2664d7b3484f0d9de5835119e862424902ee153bbc9

data/app/pb_kits/playbook/_playbook.scss CHANGED Viewed

@@ -98,4 +98,5 @@
 @import './utilities/positioning';
 @import './utilities/number_spacing';
 @import './utilities/shadow';
+@import './utilities/line_height';
 @import './utilities/display';

data/app/pb_kits/playbook/pb_body/_body.jsx CHANGED Viewed

@@ -12,7 +12,7 @@ type BodyProps = {
   aria?: object,
   className?: string,
   children?: array<React.ReactChild>,
-  color?: 'default' | 'light' | 'lighter',
+  color?: 'default' | 'light' | 'lighter' | 'link',
   dark?: boolean,
   data?: object,
   highlightedText?: array<string>,

data/app/pb_kits/playbook/pb_body/_body_mixins.scss CHANGED Viewed

@@ -6,6 +6,7 @@ $pb_body_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
   lighter:        $text_lt_lighter,
+  link:           $primary,
 );
 $pb_dark_body_colors: (
@@ -63,4 +64,4 @@ $pb_body_status: (
 @mixin pb_body_positive {
   @include pb_body($success);
-}
+}

data/app/pb_kits/playbook/pb_body/body.rb CHANGED Viewed

@@ -4,7 +4,7 @@ module Playbook
   module PbBody
     class Body < Playbook::KitBase
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter],
+                   values: %w[default light lighter link],
                    default: "default"
       prop :status, type: Playbook::Props::Enum,
                     values: %w[neutral negative positive],

data/app/pb_kits/playbook/pb_body/body.test.js ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Body from './_body'
+test('returns namespaced class name', () => {
+  render(
+    <Body
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_body_kit')
+})
+test('with colors', () => {
+  render(
+    <Body
+        color="success"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_body_kit_success')
+})

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb CHANGED Viewed

@@ -12,6 +12,11 @@
   color: "lighter"
 }) %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Link)",
+  color: "link"
+}) %>
 <%= pb_rails("body", props: {
   text: "I am a body kit (Status: negative)",
   status: "negative"

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx CHANGED Viewed

@@ -18,6 +18,11 @@ const BodyLight = (props) => {
           text="I am a body kit (Lighter)"
           {...props}
       />
+      <Body
+          color="link"
+          text="I am a body kit (Link)"
+          {...props}
+      />
       <Body
           status="negative"
           text="I am a body kit (Status: negative)"

data/app/pb_kits/playbook/pb_body/docs/_body_light.md ADDED Viewed

@@ -0,0 +1,6 @@
+##### Prop
+This kit uses `default` color by default, and can be replaced with colors below:
+* `light` `lighter` `success` `error` `link`
+- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

data/app/pb_kits/playbook/pb_caption/_caption.jsx CHANGED Viewed

@@ -3,33 +3,33 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 type CaptionProps = {
   aria?: object,
-  className?: string,
   children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: object,
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
-  color?: "default" | "link" | "light",
 };
 const Caption = (props: CaptionProps) => {
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
-    className,
     children,
+    className,
     color,
     data = {},
     id,
     size = 'md',
     tag = 'div',
     text,
-    variant = null,
   } = props
   const tagOptions = [
     'h1',
@@ -48,7 +48,7 @@ const Caption = (props: CaptionProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size, variant, color),
+    buildCss('pb_caption_kit', size, color),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_caption/_caption.scss CHANGED Viewed

@@ -10,26 +10,15 @@
   &[class^="pb_caption_kit_xs"] {
     @include caption_xs;
-    &[class*="_link"] {
-      color: $primary;}
   }
-  &[class*="light"] {
-    color: $text_lt_light;
-  }
-  &[class*="default"] {
-    color: $text_lt_default;
-  }
-  &[class*="link"] {
-    color: $primary;
-  }
+  @include pb_caption_kit_colors;
-  &[class*="dark"] {
-    @each $dark_color_name, $dark_color_value in $pb_dark_caption_colors {
-      &[class*="_#{$dark_color_name}"][class*="dark"] {
-      @include caption_color($dark_color_value);
+  &.dark {
+    @include caption_dark;
+    @each $name, $color in $pb_dark_caption_colors {
+      &[class*="_#{$name}"] {
+        color: $color;
       }
     }
   }

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss CHANGED Viewed

@@ -4,13 +4,16 @@
 $pb_caption_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
-  link:           $primary-action,
+  link:           $primary,
+  lighter:        $text_lt_lighter,
+  success:        $success,
+  error:          $error,
 );
 $pb_dark_caption_colors: (
-  default:        #fff,
+  default:        $text_dk_default,
   light:          $text_dk_light,
-  link:           $primary-action,
+  link:           $primary,
 );
@@ -39,3 +42,10 @@ $pb_dark_caption_colors: (
 @mixin caption_dark {
   color: $text_dk_light;
 }
+@mixin pb_caption_kit_colors {
+  @each $name, $color in $pb_caption_colors {
+    &[class*="#{$name}"] {
+      color: $color
+    }
+  }
+}

data/app/pb_kits/playbook/pb_caption/caption.rb CHANGED Viewed

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

data/app/pb_kits/playbook/pb_caption/caption.test.js ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Caption from './_caption'
+test('returns namespaced class name', () => {
+  render(
+    <Caption
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_caption_kit_md')
+})
+test('with colors', () => {
+  render(
+    <Caption
+        color="success"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_caption_kit_md_success')
+})

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<%= pb_rails("caption", props: { text: "Test colors" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx ADDED Viewed

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Caption } from '../../'
+const CaptionColors = (props) => {
+  return (
+    <div>
+      <Caption
+          text="Test colors"
+          {...props}
+      />
+      <Caption
+          color="success"
+          text="Test colors"
+          {...props}
+      />
+      <Caption
+          color="link"
+          text="Test colors"
+          {...props}
+      />
+    </div>
+  )
+}
+export default CaptionColors

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.md ADDED Viewed

@@ -0,0 +1,6 @@
+##### Prop
+Caption kit will use `light` color by default. Other available colors are:
+* `default` `lighter` `success` `error` `link`
+- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

data/app/pb_kits/playbook/pb_caption/docs/example.yml CHANGED Viewed

@@ -2,9 +2,9 @@ examples:
   rails:
     - caption_light: Default
     - caption_block: Block
-    - caption_example: Color Variations
+    - caption_colors: Colors
   react:
     - caption_light: Default
     - caption_block: Block
-    - caption_example: Color Variations
+    - caption_colors: Colors

data/app/pb_kits/playbook/pb_caption/docs/index.js CHANGED Viewed

@@ -1,4 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
-export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionColors } from './_caption_colors.jsx'
 export { default as CaptionBlock } from './_caption_block.jsx'
-export { default as CaptionExample } from './_caption_example.jsx'

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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