playbook_ui 4.15.1.alpha1 → 4.18.1

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

@@ -31,11 +31,15 @@ $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
 $charcoal:            #242B42;
+$black:               #000000;
+
 $interface_colors: (
   white:              $white,
   silver:             $silver,
   slate:              $slate,
   charcoal:           $charcoal,
+  black:              $black,
+
 );
 
 // Main colors ------------------------
@@ -72,7 +76,7 @@ $action_colors: (
 
 // Active colors ----------------------
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #144075;
+$active_dark:         #0082ff; 
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
@@ -88,7 +92,7 @@ $hover_colors: (
 
 // Focus colors -----------------------
 $focus_input_light:   rgba($active_light, $opacity_5);
-$focus_input_dark:    rgba($active_dark, $opacity_5);
+$focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
   focus_input_dark:         $focus_input_dark
@@ -130,7 +134,7 @@ $data_2:              $yellow;
 $data_3:              $purple;
 $data_4:              $green;
 $data_5:              $orange;
-$data_6:              $active_dark;
+$data_6:              #144075;
 $data_7:              $teal;
 $data_8:              $red;
 $data_colors: (

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/pb_kits/playbook/vendor.js

@@ -11,6 +11,9 @@ import 'lazysizes'
 import PbPopover from './pb_popover'
 PbPopover.start()
 
+import PbTooltip from './pb_tooltip'
+PbTooltip.start()
+
 import PbTypeahead from './pb_typeahead'
 PbTypeahead.start()
 

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

@@ -0,0 +1,316 @@
+<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm"}) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <%= pb_rails("flex", props: {orientation: "column", horizontal: "center", padding: "md"}) do %>
+        <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("title", props: { text: "Design Expo", tag: "h2", size: 3 }) %>
+        <% end %>
+        <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("body", props: {
+                text: "Annual Conference*",
+                color: "light"
+            }) %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("section_separator") %>
+    <%= pb_rails("flex", props: {orientation: "column", padding: "md"}) do %>
+        <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("title", props: { text: "Regions", tag: "h4", size: 4, padding_bottom: "sm" }) %>
+        <% end %>
+
+        <%= pb_rails("flex", props: {orientation: "column"}) do %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+                <%= pb_rails("checkbox" , props: {
+                    text: "North America",
+                    value: "checkbox-value",
+                    checked: true,
+                    name: "checkbox-name",
+                    padding_left: "sm",
+                    padding_bottom: "sm"
+                }) %>
+            <% end %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+                <%= pb_rails("checkbox" , props: {
+                    text: "Europe",
+                    value: "checkbox-value",
+                    checked: true,
+                    name: "checkbox-name",
+                    padding_left: "sm",
+                    padding_bottom: "sm"
+                }) %>
+            <% end %>
+        <% end %>
+    
+    
+        <%= pb_rails("title", props: { text: "Total Registered", tag: "h4", size: 4, padding_y: "sm" }) %>
+
+        <%= pb_rails("table", props: { size: "sm", disable_hover: true, padding_bottom: "xs" }) do %>
+            <thead>
+                <tr>
+                <th>Conference</th>
+                <th>Total #</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>2020 | SF</td>
+                    <td>2,391</td>
+                </tr>
+                <tr>
+                    <td>2020 | TOR</td>
+                    <td>3,829</td>
+                </tr>
+                <tr>
+                    <td>2019 | AMS</td>
+                    <td>2,047</td>
+                </tr>
+                <tr>
+                    <td>2018 | SF</td>
+                    <td>1,824</td>
+                </tr>
+                <tr>
+                    <td>2017 | LA</td>
+                    <td>719</td>
+                </tr>
+                <tr>
+                    <td>2017 | LDN</td>
+                    <td>491</td>
+                </tr>
+            </tbody>
+        <% end %>
+        <%= pb_rails("caption", props: { text: "*This dashboard includes the last six conferences", size: 'xs' }) %>
+    <% end %>
+
+  <% end %>
+
+
+
+  <%= pb_rails("layout/body", props: { padding: "xl" }) do %>
+
+    <%= pb_rails("title", props: { text: "Registration Dashboard", tag: "h1", size: 3, padding_bottom: "lg" }) %>
+
+  
+    <%= pb_rails("flex") do %>
+        <%= pb_rails("flex/flex_item", props: {fixed_size: "60%", padding_right: "lg"}) do %>
+            <%= pb_rails("card") do %>
+                <%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_bottom: "md"}) do %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "2020 | SF", size: "xs" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Total Registered" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "2,391", tag: "h3", size: 2 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                    <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Graphic" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "353", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>           
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "UX/UI" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "254", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Product" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "194", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_top: "sm"}) do %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "2020 | TOR", size: "xs" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Total Registered" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "3,829", tag: "h3", size: 2 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Graphic" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "937", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>        
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "UX/UI" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "721", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>        
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Product" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "628", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>   
+                    <% end %>
+                <% end %>
+            <% end %>
+            
+            <%= pb_rails("flex", props: {orientation: "column", horizontal: "right", padding_bottom: "md"}) do %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("button", props: { text: "View full breakdown", variant: "link" }) %>
+                <% end %>
+            <% end %>
+
+            <%= pb_rails("card") do %>
+                <% data = [{
+                    name: '2020 | SF',
+                    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+                }, {
+                    name: '2020 | TOR',
+                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+                }, {
+                    name: '2019 | AMS',
+                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+                }, {
+                    name: '2018 | SF',
+                    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
+                }, {
+                    name: '2017 | LA',
+                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+                }] %>
+
+                <%= pb_rails("line_graph", props: { 
+                    id: "line-registration", 
+                    gradient: false, 
+                    chart_data: data, 
+                    x_axis_categories:['7 wks away','6 wks away','5 wks away','4 wks away','3 wks away','2 wks away','1 wk away','Start of event'],
+                    title: 'Running Total', 
+                    axis_title: 'Total Registration',
+                    legend: true,
+                    height: '80%'
+                }) %>
+            <% end %>
+        <% end %>
+
+        
+
+        <%= pb_rails("flex/flex_item", props: {fixed_size: "40%"}) do %>
+            <%= pb_rails("card") do %>
+                <% total = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'Total Registered',
+                    chart_data: total,
+                    id: "total-attendees",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+
+                <% new_attendees = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'New Attendees',
+                    chart_data: new_attendees,
+                    id: "new-attendees",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+
+                <% repeating_attendees = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'Repeating Attendees',
+                    chart_data: repeating_attendees,
+                    id: "repeating-attendees",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+
+                <% graphic_designers = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'Graphic Designers',
+                    chart_data: graphic_designers,
+                    id: "graphic-designers",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+
+                <% ux_ui = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'UX/UI',
+                    chart_data: ux_ui,
+                    id: "ux-ui",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+
+                <% product_designers = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'Product Designers',
+                    chart_data: product_designers,
+                    id: "product-designers",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+                
+            <% end %>
+        <% end %>
+    <% end %>
+  <% end %>
+<% end %>