playbook_ui 7.1.0.pre.alpha2 → 7.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d793fb38923075c62383c618585aebba3516a5573d81ed4a7b7da05bc6ec0e1
-  data.tar.gz: 4918ac3b820aedf79c9873f6efcceebf0c555879aefb97ce649c1329af089b43
+  metadata.gz: 923bb2a3586c197a5c26d22490b0de323332170dc657b22bd62e3d585a4ef853
+  data.tar.gz: 4cd8de5c0c0eb75b29fef20d7d182bed50d6161a8fa29638e6f56de94520795c
 SHA512:
-  metadata.gz: efc9b1216f6970e79c45d992a67c481af899364ab851acf3953d6cf9b5152d69648f562c1086dc8c0fb4b2b20f1249a7a3b5d543d9d495b70d977c49b85caa8a
-  data.tar.gz: 9c0d61bc682f99cb0d49265a33aa79d736905d3e62798456e99d2f540f03875d39d788746be370fd8fec7d6a917cec615ccca1b1de17d9e30f5ba58845097efa
+  metadata.gz: 14c2b363c5544fd935d0ae869ef1c3d1aa5b6d353f6cde7dfab2ff58160253f6d3cc69e047da895746a7457bc84389542462d2f9e5510c02d014d02730be9fe6
+  data.tar.gz: e92da77938a44999642573959a8c5236045bf9ca177e8eb7e52a4ee84391fbac05a2554a4ba2dc4fb0f67b506b2ae405f226d40394a65b0cba65f88c10798c9b

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :subtitle
       prop :title
       prop :x_axis_categories, type: Playbook::Props::Array,
-                                default:[]
+                               default: []
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
       prop :legend, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -101,7 +101,7 @@ const CircleChart = (props: CircleChartProps) => {
   useEffect(() => {
     if (componentDidMount.current) {
       Highcharts.charts.forEach((chart) => {
-        if (chart.renderTo.id === id) {
+        if (chart && chart.renderTo.id === id) {
           const updatedValueArray = chartData.map((obj) => {
             return obj.value
           })

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -88,7 +88,7 @@ const Gauge = (props: GaugeProps) => {
   useEffect(() => {
     if (componentDidMount.current) {
       Highcharts.charts.forEach((chart) => {
-        if (chart.renderTo.id === id) {
+        if (chart && chart.renderTo.id === id) {
           chart.series[0].setData([chartData[0].value])
           chart.series[0].data[0].name = chartData[0].name
         }

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

@@ -16,7 +16,7 @@ module Playbook
       prop :subtitle
       prop :title
       prop :x_axis_categories, type: Playbook::Props::Array,
-                                default:[]
+                               default: []
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
       prop :legend, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_nav/_item.html.erb

@@ -5,6 +5,9 @@
   id: object.id) do %>
   <%= content_tag(object.tag,
     object.link ? object.link_options : object.options) do %>
+    <% if object.image_url %>
+      <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+    <% end %>
     <% if object.icon_left %>
       <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Icon } from '../'
+import { Icon, Image } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
@@ -15,6 +15,7 @@ type NavItemProps = {
   iconLeft: string,
   iconRight: string,
   id?: string,
+  imageUrl: String,
   link: string,
   onClick?: EventHandler,
   text: string,
@@ -30,6 +31,7 @@ const NavItem = (props: NavItemProps) => {
     iconLeft,
     iconRight,
     id,
+    imageUrl,
     link,
     onClick = () => {},
     text = '',
@@ -53,6 +55,17 @@ const NavItem = (props: NavItemProps) => {
           href={link}
           onClick={onClick}
       >
+        <If condition={imageUrl}>
+          <div
+              className="pb_nav_list_item_icon_section"
+              key={imageUrl}
+          >
+            <Image
+                className="pb_nav_img_wrapper"
+                url={imageUrl}
+            />
+          </div>
+        </If>
         <If condition={iconLeft}>
           <div
               className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -8,6 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type NavProps = {
   aria?: object,
+  borderless?: boolean,
   children?: React.Node,
   className?: string | array<string>,
   data?: object,
@@ -22,6 +23,7 @@ type NavProps = {
 const Nav = (props: NavProps) => {
   const {
     aria = {},
+    borderless = false,
     children,
     className,
     data = {},
@@ -39,6 +41,7 @@ const Nav = (props: NavProps) => {
   const cardCss = classnames(
     buildCss('pb_nav_list', variant, orientation, {
       highlight: highlight,
+      borderless: borderless,
     }),
     globalProps(props),
     className

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

@@ -40,7 +40,7 @@ $selector: ".pb_nav_list";
         text-decoration: none;
         display: flex;
         align-items: center;
-        padding: $space_sm $space_md $space_sm ($space_md - 3px);
+        padding: $space_sm $space_sm $space_sm ($space_sm - 3px);
         border: 0 solid transparent;
         border-width: 0 0 0 3px;
         transition-property: color, border-color, background-color;
@@ -59,7 +59,7 @@ $selector: ".pb_nav_list";
         }
         [class*=_icon_left] {
           font-size: $font_large;
-          margin-right: $space_sm;
+          margin-right: $space_xs;
           color: $text_lt_lighter;
         }
         [class*=_icon_right] {
@@ -69,10 +69,14 @@ $selector: ".pb_nav_list";
         }
         [class*=_text] {
           font-size: $font_base;
-          font-weight: $bold;
           color: $text_lt_default;
           flex: 1;
         }
+        [class*=_img_left] {
+          margin-right: $space_xs;
+          height: 20px;
+          width: 25px;
+        }
       }
       &:last-child {
         border-bottom: 0;
@@ -167,4 +171,19 @@ $selector: ".pb_nav_list";
     }
   }
 
+  //Borderless
+  &[class*=_borderless] {
+    [class*=pb_nav_list_kit_item] {
+      list-style: none;
+      border-bottom: 0;
+    }
+  }
+  
+}
+
+//Image Wrapper
+.pb_nav_img_wrapper {
+  width: 24px;
+  height: 24px;
+  margin-right: $space_xs;
 }

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: {borderless: true}) do %>
+  <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
+<% end %>

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const BorderlessNav = () => {
+  return (
+    <Nav borderless>
+      <NavItem
+          active
+          link="#"
+          text="All Categories"
+      />
+      <NavItem
+          link="#"
+          text="Food"
+      />
+      <NavItem
+          link="#"
+          text="Digital"
+      />
+      <NavItem
+          link="#"
+          text="Design Art"
+      />
+    </Nav>
+  )
+}
+
+export default BorderlessNav

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

@@ -0,0 +1,7 @@
+<%= pb_rails("nav", props: {title: "Browse", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { image_url: "https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png", text: "News Feed"  }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg", link: "#", text: "Messages", active: true }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png", icon_right: "angle-down", link: "#", text: "Events" }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png", link: "#", text: "Friends" }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg", icon_right: "angle-down", link: "#", text: "Groups" }) %>
+<% end %>

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const WithImageNav = () => {
+  return (
+    <Nav
+        link="#"
+        title="Browse"
+    >
+      <NavItem
+          imageUrl="https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png"
+          text="News Feed"
+      />
+      <NavItem
+          active
+          imageUrl="https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg"
+          link="#"
+          text="Messages"
+      />
+      <NavItem
+          iconRight="angle-down"
+          imageUrl="https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png"
+          link="#"
+          text="Events"
+      />
+      <NavItem
+          imageUrl="https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png"
+          link="#"
+          text="Friends"
+      />
+      <NavItem
+          iconRight="angle-down"
+          imageUrl="https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg"
+          link="#"
+          text="Groups"
+      />
+    </Nav>
+  )
+}
+
+export default WithImageNav

data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.md

@@ -0,0 +1 @@
+Icon used needs to be square. Icon size is 24px by 24px.

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

@@ -2,7 +2,9 @@ examples:
   rails:
   - default_nav: Default
   - with_icons_nav: With Icons
+  - with_img_nav: With Custom Icon
   - no_highlight_nav: No Highlight
+  - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
@@ -13,10 +15,13 @@ examples:
   react:
   - default_nav: Default
   - with_icons_nav: With Icons
+  - with_img_nav: With Custom Icon
   - no_highlight_nav: No Highlight
+  - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
+

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

@@ -3,7 +3,9 @@ export { default as HorizontalNav } from './_horizontal_nav.jsx'
 export { default as BlockNav } from './_block_nav.jsx'
 export { default as BlockNoTitleNav } from './_block_no_title_nav.jsx'
 export { default as NoHighlightNav } from './_no_highlight_nav.jsx'
+export { default as BorderlessNav } from './_borderless_nav.jsx'
 export { default as SubtleNav } from './_subtle_nav.jsx'
 export { default as SubtleNoHighlightNav } from './_subtle_no_highlight_nav.jsx'
 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'

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

@@ -12,6 +12,7 @@ module Playbook
       prop :text
       prop :icon_left
       prop :icon_right
+      prop :image_url
 
       def classname
         generate_classname("pb_nav_list_kit_item", active_class)

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

@@ -17,14 +17,19 @@ module Playbook
                      values: %w[normal subtle],
                      default: "normal"
       prop :highlight, type: Playbook::Props::Boolean, default: true
+      prop :borderless, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_nav_list", variant, orientation, highlight_class)
+        generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
       end
 
       def highlight_class
         highlight ? "highlight" : nil
       end
+
+      def borderless_class
+        borderless ? "borderless" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -12,6 +12,7 @@ $pb_pill_height: 22px;
   padding: 0 $space-sm/1.8;
   height: $pb_pill_height;
   border-radius: $pb_pill_height/2;
+  white-space: nowrap;
 
   @each $color_name, $color_value in $status_color_text {
     &[class*=_#{$color_name}]  {

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

@@ -20,17 +20,15 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   const {
     aria = {},
     className,
-    dark = false,
     data = {},
     id,
     orientation = 'horizontal',
     text,
     variant = 'card',
   } = props
-  const themeStyle = dark === true ? '_dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation), globalProps(props), className)
 
   return (
 

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

@@ -1,10 +1,16 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
-@import "../pb_caption/caption";
+@import "../tokens/opacity";
+@import "./section_separator_mixin";
 
-$section_colors: (
+$section_colors_light: (
   background:   $bg_light,
-  card:   $card_light,
+  card:         $card_light,
+);
+
+$section_colors_dark: (
+  background:   $bg_dark,
+  card:         tint($bg_dark,10),
 );
 
 [class^=pb_section_separator_kit] {
@@ -12,8 +18,7 @@ $section_colors: (
   justify-content: center;
   align-items: center;
   position: relative;
-
-  @each $color_name, $color_value in $section_colors {
+  @each $color_name, $color_value in $section_colors_light {
     &[class*=_#{$color_name}] {
       span {
         display: inline-block;
@@ -24,64 +29,38 @@ $section_colors: (
       }
     }
   }
- 
   &::after {
-    content: "";
-    height: 1px;
-    width: 100%;
-    background: $border_light;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 0;
+    @include section_separator_horizontal(false);
   }
-
   &[class*=_horizontal] {
     justify-content: center;
   }
   &[class*=_vertical] {
     &::after {
-      content: "";
-      height: 100%;
-      width: 1px;
-      margin-left: $space_xs;
-      margin-right: $space_xs;
-      background: $border_light;
-      position: initial;
-      z-index: 0;
+      @include section_separator_vertical(false);
     }
   }
   
-  &[class*=_dark] {
+  // Dark =========================
+  
+  &.dark {
     &::after {
-      content: "";
-      height: 1px;
-      width: 100%;
-      background: $border_dark;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      z-index: 0;
+      @include section_separator_horizontal(true);
     }
-    &[class*=_background] {
-      span {
-        display: inline-block;
-        padding: 0 $space_xs;
-        background: $bg_dark;
-        position: relative;
-        z-index: 1;
+    @each $color_name, $color_value in $section_colors_dark {
+      &[class*=_#{$color_name}] {
+        span {
+          display: inline-block;
+          padding: 0 $space_xs;
+          background: #{$color_value};
+          position: relative;
+          z-index: 1;
+        }
       }
     }
     &[class*=_vertical] {
       &::after {
-        content: "";
-        height: 100%;
-        width: 1px;
-        margin-left: $space_xs;
-        margin-right: $space_xs;
-        background: $border_dark;
-        position: initial;
-        z-index: 0;
+        @include section_separator_vertical(true);
       }
     }
   }