playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -1,21 +1,21 @@
 /* @flow */
 import React from 'react'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type UserBadgeProps = {
   className?: String,
   id?: String,
-  badge?: 'million-dollar' | 'veteran',
-  size?: 'sm' | 'md' | 'lg',
+  badge?: "million-dollar" | "veteran",
+  size?: "sm" | "md" | "lg",
 }
 
-const UserBadge = ({
-  badge = 'million-dollar',
-  size = 'md',
-}: UserBadgeProps) => {
+const UserBadge = (props: UserBadgeProps) => {
+  const { badge = 'million-dollar', size = 'md' } = props
   const image = require(`./badges/_${badge}.svg`)
 
   return (
-    <div className={`pb_user_badge_kit_${size}`}>
+    <div className={classnames(`pb_user_badge_kit_${size}`, spacing(props))}>
       <div className="pb_user_badge_wrapper">
         <img src={image} />
       </div>

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -2,24 +2,19 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
+import { buildCss } from '../utilities/props'
 
-import {
-  buildCss,
-} from '../utilities/props'
-
-import {
-  Caption,
-  Title,
-} from '../'
+import { Caption, Title } from '../'
 
 import DateTime from '../pb_kit/dateTime.js'
 
 type WeekdayStackedProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String,
   dark?: Boolean,
   date: Date,
-  variant?: 'day_only' | 'month_day' | 'expanded',
+  variant?: "day_only" | "month_day" | "expanded",
   compact?: Boolean,
   id?: String,
 }
@@ -43,25 +38,32 @@ const getFormattedDate = (date, variant) => {
   }
 }
 
-const WeekdayStacked = ({
-  align = 'left',
-  className,
-  dark = false,
-  date = new Date(),
-  variant = 'month_day',
-  compact = false,
-}: WeekdayStackedProps) => (
-  <div
-      className={classnames(buildCss('pb_weekday_stacked_kit', align), className)}
-  >
-    <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
-    <Title
-        dark={dark}
-        size={4}
-        tag="span"
-        text={getFormattedDate(date, variant)}
-    />
-  </div>
-)
+const WeekdayStacked = (props: WeekdayStackedProps) => {
+  const {
+    align = 'left',
+    className,
+    dark = false,
+    date = new Date(),
+    variant = 'month_day',
+    compact = false,
+  } = props
+  return (
+    <div
+        className={classnames(
+        buildCss('pb_weekday_stacked_kit', align),
+        className,
+        spacing(props)
+      )}
+    >
+      <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
+      <Title
+          dark={dark}
+          size={4}
+          tag="span"
+          text={getFormattedDate(date, variant)}
+      />
+    </div>
+  )
+}
 
 export default WeekdayStacked

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -77,7 +77,7 @@ class pbChart {
   setupChart() {
     Highcharts.setOptions(highchartsTheme)
 
-    Highcharts.chart(this.defaults.id, {
+    const configOptions = {
       title: {
         text: this.defaults.title,
       },
@@ -111,7 +111,13 @@ class pbChart {
       },
       series: this.defaults.chartData,
       credits: false,
-    })
+    }
+
+    if (!this.defaults.toggleLegendClick) {
+      configOptions.plotOptions.series.events = { legendItemClick: () => false }
+    }
+
+    Highcharts.chart(this.defaults.id, configOptions)
   }
 
   refresh(silent = false) {

data/app/pb_kits/playbook/props.rb

@@ -33,7 +33,25 @@ module Playbook
       self.class.props[name].value values[name]
     end
 
+    def spacing_props
+      selected_props = spacing_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        spacing_value = send(k)
+        "#{spacing_options[k]}_#{spacing_value}" if spacing_values.include? spacing_value
+      end.compact.join(" ")
+    end
+
     def generate_classname(*name_parts, separator: "_")
+      [
+        name_parts.compact.join(separator),
+        prop(:classname),
+        spacing_props,
+      ].compact.join(" ")
+    end
+
+    def generate_classname_without_spacing(*name_parts, separator: "_")
       [
         name_parts.compact.join(separator),
         prop(:classname),
@@ -49,6 +67,43 @@ module Playbook
       prop :classname
       prop :aria, type: Playbook::Props::Hash, default: {}
       prop :children, type: Playbook::Props::Proc
+      prop :margin
+      prop :margin_bottom
+      prop :margin_left
+      prop :margin_right
+      prop :margin_top
+      prop :margin_x
+      prop :margin_y
+      prop :padding
+      prop :padding_bottom
+      prop :padding_left
+      prop :padding_right
+      prop :padding_top
+      prop :padding_x
+      prop :padding_y
+    end
+
+    def spacing_options
+      {
+        margin: "m",
+        margin_bottom: "mb",
+        margin_left: "ml",
+        margin_right: "mr",
+        margin_top: "mt",
+        margin_x: "mx",
+        margin_y: "my",
+        padding: "p",
+        padding_bottom: "pb",
+        padding_left: "pl",
+        padding_right: "pr",
+        padding_top: "pt",
+        padding_x: "px",
+        padding_y: "py",
+      }
+    end
+
+    def spacing_values
+      %w[none xs sm md lg xl]
     end
 
     class_methods do

data/app/pb_kits/playbook/tokens/_spacing.scss

@@ -9,6 +9,7 @@ $spaces:(
   space_md:   $space_md,
   space_lg:   $space_lg,
   space_xl:   $space_xl,
+  none: 0
 );
 
 

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -0,0 +1,42 @@
+@import "../tokens/spacing";
+
+$space_classes: ( 
+	xs: $space_xs, 
+	sm: $space_sm, 
+	md: $space_md, 
+	lg: $space_lg, 
+	xl: $space_xl, 
+	none: 0
+);
+
+$positions: ( 
+	m: "margin", 
+	mr: "margin-right", 
+	ml: "margin-left", 
+	mt: "margin-top", 
+	mb: "margin-bottom", 
+	mx: ("margin-left", "margin-right"), 
+	my: ("margin-top", "margin-bottom"),
+	p: "padding", 
+	pr: "padding-right", 
+	pl: "padding-left", 
+	pt: "padding-top", 
+	pb: "padding-bottom", 
+	px: ("padding-left", "padding-right"), 
+	py: ("padding-top", "padding-bottom")
+);
+
+@each $position_name, $position in $positions {
+	@each $space_name, $space in $space_classes {
+		.#{$position_name}_#{$space_name} {
+			@if type-of($position)=="list" {
+				@each $coordinate in $position {
+					#{$coordinate}: #{$space} !important;
+				}
+			}
+			@else {
+				#{$position}: #{$space} !important;
+			}
+		}
+	}
+}

data/app/pb_kits/playbook/utilities/spacing.js

@@ -0,0 +1,33 @@
+export const spacing = ({
+  marginRight,
+  marginLeft,
+  marginTop,
+  marginBottom,
+  marginX,
+  marginY,
+  margin,
+  paddingRight,
+  paddingLeft,
+  paddingTop,
+  paddingBottom,
+  paddingX,
+  paddingY,
+  padding,
+}) => {
+  let css = ''
+  css += marginRight ? `mr_${marginRight} ` : ''
+  css += marginLeft ? `ml_${marginLeft} ` : ''
+  css += marginTop ? `mt_${marginTop} ` : ''
+  css += marginBottom ? `mb_${marginBottom} ` : ''
+  css += marginX ? `mx_${marginX} ` : ''
+  css += marginY ? `my_${marginY} ` : ''
+  css += margin ? `m_${margin} ` : ''
+  css += paddingRight ? `pr_${paddingRight} ` : ''
+  css += paddingLeft ? `pl_${paddingLeft} ` : ''
+  css += paddingTop ? `pt_${paddingTop} ` : ''
+  css += paddingBottom ? `pb_${paddingBottom} ` : ''
+  css += paddingX ? `px_${paddingX} ` : ''
+  css += paddingY ? `py_${paddingY} ` : ''
+  css += padding ? `p_${padding} ` : ''
+  return css
+}

data/app/views/layouts/playbook/application.html.slim

@@ -4,7 +4,7 @@ html
     title Playbook Design System
     = csrf_meta_tags
     = csp_meta_tag
-    = stylesheet_pack_tag 'main'
+    = stylesheet_packs_with_chunks_tag 'main'
     meta content="user-scalable=0, initial-scale=1.0, minimum-scale=1" name="viewport"
 
   body
@@ -18,6 +18,5 @@ html
           = yield
 
   = javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"
-  = javascript_pack_tag 'application'
-  = javascript_pack_tag 'examples'
+  = javascript_packs_with_chunks_tag 'application', 'examples'
 = yield :pb_js

data/app/views/layouts/playbook/fullscreen.html.slim

@@ -4,7 +4,7 @@ html
     title Playbook Design System
     = csrf_meta_tags
     = csp_meta_tag
-    = stylesheet_pack_tag 'main'
-    = javascript_pack_tag 'application'
+    = stylesheet_packs_with_chunks_tag 'main'
+    = javascript_packs_with_chunks_tag 'application'
   body
     = yield

data/app/views/layouts/playbook/grid.html.slim

@@ -4,7 +4,7 @@ html
     title Playbook Design System
     = csrf_meta_tags
     = csp_meta_tag
-    = stylesheet_pack_tag 'main'
-    = javascript_pack_tag 'application'
+    = stylesheet_packs_with_chunks_tag 'main'
+    = javascript_packs_with_chunks_tag 'application'
   body
     = yield

data/app/views/layouts/playbook/samples.html.erb

@@ -4,7 +4,7 @@
         <title>Full Screen Examples</title>
         <%= csrf_meta_tags %>
         <%= csp_meta_tag %>
-        <%= stylesheet_pack_tag 'main' %>
+        <%= stylesheet_packs_with_chunks_tag 'main' %>
     </head>
     <body>
         <div class="sample-layout">
@@ -13,8 +13,6 @@
     </body>
 
     <%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" %>
-    <%= javascript_pack_tag 'application' %>
-    <%= javascript_pack_tag 'examples' %>
-    <%= javascript_pack_tag 'samples' %>
+    <%= javascript_packs_with_chunks_tag 'application', 'examples', 'samples' %>
     <%= yield :pb_js %>
 </html>

data/app/views/playbook/samples/dashboards/index.html.erb

@@ -6,6 +6,7 @@
           title: "User Experience Designer",
           orientation: "horizontal",
           align: "left",
+          margin_left: "md",
           size: "md",
           avatar_url: "https://s3-hq-f5.powerhrg.com/nitro-production/avatars/55553/badge/business-technology-jonathan-zazula.jpg?AWSAccessKeyId=IWSW00NEQHMEYQTLZ7E9&Signature=S0EN3l5sfIr7yk442Q2MeledXGc%3D&Expires=3161514974"
       }) %>
@@ -48,7 +49,8 @@
         id: "bar-test",
         point_start: 2012,
         subtitle: 'Source: thesolarfoundation.com',
-        title: 'Solar Employment Growth by Sector, 2010-2016'
+        title: 'Solar Employment Growth by Sector, 2010-2016',
+        padding_top: "md"
     }) %>
 
     <% data2 = [{

data/app/views/playbook/samples/filter_table/index.html.erb

@@ -0,0 +1,348 @@
+<!-- START TOP AREA -->
+<%= pb_rails("flex", props: {classname: "flex-container", spacing: "between", margin_top: "md", margin_x: "md" }) do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { text: "Prospective Clients", tag: "h3", size: 3 }) %>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("button", props: { text: "Add Client" }) %>
+    <% end %>
+<% end %>
+<!-- END TOP AREA -->
+
+<!-- START FILTER -->
+<%= pb_rails("filter", props: {
+  id:"2",
+  filters: [
+    {name: "start date", value: "Aug 01, 2020"},
+    {name: "end date", value: "Aug 03, 2020"}
+
+    ],
+  sort_menu: [
+    {item:"Date Created", link:"#", active: true, direction:"desc"},
+    {item:"Assignee", link:"#", active: false},
+    {item:"Contact", link:"#", active: false},
+    {item:"Inquiry Source", link:"#", active: false},
+
+  ],
+  results: 546,
+  template: "single",
+  margin_y: "md",
+  margin_x: "md"
+  }) do%>
+<%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
+%>
+
+<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+      <%= pb_rails("text_input", props: { label: "Start Date", value: "Aug 01, 2020", margin_right: "sm" }) %>
+    <% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+      <%= pb_rails("text_input", props: { label: "End Date",  value: "Aug 3, 2020" }) %>
+    <% end %>
+  <% end %>
+
+  <%= form.actions do |action| %>
+
+  <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+
+
+  <% end %>
+<% end %>
+
+<% end %>
+<!-- END FILTER -->
+
+<!-- START TABlE -->
+
+  <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch", margin_x: "md"}) do %>
+      <%= pb_rails("table", props: { size: "sm" }) do %>
+        <thead>
+          <tr>
+            <th>Contact</th>
+            <th>Date Created</th>
+            <th>Inquiry Source</th>
+            <th>Lead Status</th>
+            <th>Quote</th>
+            <th>Assignee</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Jesse",
+                last_name: "Cortez",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "3832919348"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "jesse.cortez@gmail.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Email" }) %>
+              <%= pb_rails("caption", props: { text: "hello@companyname.com", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 0, title:"Status:", value:"Not Started" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "729.63", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Unassigned" }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Bill",
+                last_name: "Buchanan",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "8313455824"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "billbuch@yahoo.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Social Media" }) %>
+              <%= pb_rails("caption", props: { text: "Facebook", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "534.40", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Effie",
+                last_name: "Guzman",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "1582430782"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "effieguzman@comcast.net"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Online Quote" }) %>
+              <%= pb_rails("caption", props: { text: "Landing Page", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 4, title:"Status:", value:"Contract" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "392.26", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Rodney",
+                last_name: "Boone",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "3859275970"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "rodneyboone@gmail.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Internal" }) %>
+              <%= pb_rails("caption", props: { text: "Referral", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 4, title:"Status:", value:"Contract" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "342.86", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Barbara",
+                last_name: "Maxwell",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "2849186943"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "barbaramaxwell4@yahoo.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Online Quote" }) %>
+              <%= pb_rails("caption", props: { text: "Main Website", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "145.01", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <%= pb_rails("person_contact", props: {
+                first_name: "Ellen",
+                last_name: "Thornton",
+                contacts: [
+                  {
+                    contact_type: "cell",
+                    contact_value: "6884927492"
+                  },
+                  {
+                    contact_type: "email",
+                    contact_value: "ellen.thornton@gmail.com"
+                  }
+                ]
+              }) %>
+            </td>
+            <td>
+              <%= pb_rails("date", props: { date: "2012-08-02T15:49:29Z", size: "xs" }) %>
+            </td>
+            <td>
+              <%= pb_rails("body", props: { text: "Social Media" }) %>
+              <%= pb_rails("caption", props: { text: "Instagram", size: 'xs' }) %>
+            </td>
+            <td>
+              <%= pb_rails("progress_pills", props: { steps: 4, active: 3, title:"Status:", value:"Negotiation" }) %>
+            </td>
+            <td>
+              <%= pb_rails("currency", props: { amount: "25.27", size: "sm" }) %>
+            </td>
+            <td>
+              <%= pb_rails("user", props: {
+                name: "Anna Black",
+                title: "Project Coordinator",
+                orientation: "horizontal",
+                align: "left",
+                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+                }) %>
+            </td>
+            <td>
+              <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %>
+            </td>
+          </tr>
+        </tbody>
+      <% end %>
+  <% end %>
+
+<!-- END TABLE -->