playbook_ui 7.3.0.pre.alpha2 → 7.3.0.pre.alpha3

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -46,7 +46,7 @@ type LayoutFooterProps = {
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', className, globalProps(props))}>
+    <div className={classnames('layout_sidebar', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -56,7 +56,7 @@ const Side = (props: LayoutSideProps) => {
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_body', className, globalProps(props))}>
+    <div className={classnames('layout_body', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -66,7 +66,7 @@ const Body = (props: LayoutBodyProps) => {
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_header', className, globalProps(props))}>
+    <div className={classnames('layout_header', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -76,7 +76,7 @@ const Header = (props: LayoutHeaderProps) => {
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_footer', className, globalProps(props))}>
+    <div className={classnames('layout_footer', globalProps(props), className)}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb

@@ -1,13 +1 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname
-    ) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
+<%= react_component('LineGraph', object.chart_options) %>

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -77,7 +77,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
 
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(globalProps(this.props), className)}
           id={id}
       />
     )

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,
@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,
@@ -44,7 +45,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }.to_json.html_safe
+        }
       end
 
       def classname

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -52,8 +52,9 @@ const List = (props: ListProps) => {
       borderless: borderless,
       ordered: ordered,
       xpadding: xpadding,
-    }), className,
-    globalProps(props)
+    }),
+    globalProps(props),
+    className
   )
 
   return (

data/app/pb_kits/playbook/pb_list/_list_item.jsx

@@ -27,8 +27,9 @@ const ListItem = (props: ListItemProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_item_kit'), className,
-    globalProps(props)
+    buildCss('pb_item_kit'),
+    globalProps(props),
+    className
   )
 
   return (

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -40,7 +40,11 @@ const Logistic = (props: LogisticProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const formattedDate = new DateTime({ value: date })
-  const classes = classnames(buildCss('pb_logistic_kit', { dark: dark }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_logistic_kit', { dark }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_message/_message.jsx

@@ -39,7 +39,11 @@ const Message = (props: MessageProps) => {
     ? 'pb_message_kit_avatar'
     : 'pb_message_kit'
 
-  const classes = classnames(buildCss(baseClassName), className, globalProps(props))
+  const classes = classnames(
+    buildCss(baseClassName),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -36,8 +36,11 @@ const MultipleUsers = (props: MultipleUsersProps) => {
   const reverseClass = reverse === true ? 'reverse' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_multiple_users_kit', reverseClass),
-    className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_multiple_users_kit', reverseClass),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

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,9 +41,10 @@ const Nav = (props: NavProps) => {
   const cardCss = classnames(
     buildCss('pb_nav_list', variant, orientation, {
       highlight: highlight,
+      borderless: borderless,
     }),
-    className,
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   return (

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