playbook_ui 7.1.2 → 7.3.0.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1cb61398fc3d613b35dc39daba264bf9aeaa61144b5f9cc4880807a51ff477ed
-  data.tar.gz: fb3db39898e1601ffdc37bc76bfa0de086b31e94b388424b7ad17b3f9d1e4e9d
+  metadata.gz: c254b4df78da26ac88080e216dcabcff2c7ae67749755eca2e7f289d2f428728
+  data.tar.gz: 6f5aaae2cc86313968d331881d933a36e4d9e7ec1a6c82b51471f18652834aca
 SHA512:
-  metadata.gz: 64df1795f5747f3cd07c3b232ab59bd5b495de12befe3521ead0d5038a2aa6c7fbd473bd58437a21fef615818aec5250edf41230335d94698751b51bcbf51e8a
-  data.tar.gz: 77437b020c051293e007d11ab19dcb0c1e8cc01def39f1b105dc6ee0343f372e173d4acb13e675b82fb2db91f7595073c435dc0fda7cd24992183653f4b91ebd
+  metadata.gz: 6f48fbdf2a8cc92bd85997620b4953832e3478724e76b5571af4c1ad76ae59ee25d0935413f96e73d8e68597b51b2288affbc36250854dc7c07cb757d3688972
+  data.tar.gz: 37fe5b56013bb0256efe3ef1d28e120a23b34cf74b56cb8dc25c4e30c58c6859cccd33824fc5479ee4c710c37fa3622acdd6ec7c9e34429bb67d96f7bd8fcfcb

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_body/body.rb

@@ -5,7 +5,7 @@ module Playbook
     class Body
       include Playbook::Props
       include ActionView::Helpers
-      
+
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_caption/_caption.html.erb

@@ -1,5 +1,7 @@
-<%= content_tag(object.tag, object.text,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria) %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <%= object.children.present? ? capture(&object.children) : object.text %>
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("caption") do %>
+  Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'lg' }) do %>
+  Large Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'xs' }) do %>
+  Subcaption Block
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionBlock = (props) => {
+  return (
+    <div>
+      <Caption {...props}>
+        {'Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="lg"
+      >
+        {'Large Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="xs"
+      >
+        {'Subcaption Block'}
+      </Caption>
+    </div>
+  )
+}
+
+export default CaptionBlock

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

@@ -1,5 +1,7 @@
 examples:
   rails:
   - caption_light: Default
+  - caption_block: Block
   react:
   - caption_light: Default
+  - caption_block: Block

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

@@ -1,2 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
 export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionBlock } from './_caption_block.jsx'

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_date_picker/_date_picker.html.erb

@@ -3,20 +3,25 @@
     class: object.classname + object.error_class,
     data: object.data,
     id: object.id) do %>
-      <div class="input_wrapper">
-        <%= pb_rails("text_input", props: {
-          aria: object.input_aria,
-          autocomplete: false,
-          dark: object.dark,
-          data: object.input_data,
-          disabled: object.disable_input,
-          error: object.error,
-          id: object.picker_id,
-          label: object.hide_label ? nil : object.label,
-          name: object.name,
-          placeholder: object.placeholder,
-          required: object.required
-        }) %>
+      <% if object.children %>
+        <div class="input_wrapper">
+          <%= capture(&object.children) %>
+      <% else %>
+        <div class="input_wrapper">
+          <%= pb_rails("text_input", props: {
+            aria: object.input_aria,
+            autocomplete: false,
+            dark: object.dark,
+            data: object.input_data,
+            disabled: object.disable_input,
+            error: object.error,
+            id: object.picker_id,
+            label: object.hide_label ? nil : object.label,
+            name: object.name,
+            placeholder: object.placeholder,
+            required: object.required,
+          }) %>
+        <% end %>
         <% if !object.hide_icon %>
           <div
               class="<%= object.icon_wrapper_class %>"

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -52,7 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
-  <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
+  <%= form.date_picker :example_date_picker_field_1, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb

@@ -13,7 +13,23 @@ module Playbook
           props[:name] = html_attribute_name
           props[:picker_id] = html_id
 
-          @template.pb_rails("date_picker", props: props)
+          input = text_field(
+            name,
+            autocomplete: "off",
+            disabled: props[:disable_input],
+            data: props[:input_data],
+            aria: props[:input_aria],
+            props: {
+              error: props[:error],
+              label: props[:label],
+              placeholder: props[:placeholder],
+              required: props[:required],
+            }
+          )
+
+          @template.pb_rails("date_picker", props: props) do
+            input
+          end
         end
       end
     end

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
+