playbook_ui 4.15.0 → 4.18.0

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

@@ -4,80 +4,99 @@
 @import "./layout_mixin";
 
 [class^=pb_layout_kit] {
-  $layout_sizes: (
-    "xs":   64px,
-    "sm":   200px,
-    "md":   250px,
-    "lg":   300px,
-    "xl":   365px,
-  );
-  $positions: (
-    "left",
-    "right",
-  );
-  $colors: (
-    "light",
-    "dark",
-    "gradient",
-    "transparent",
-  );
 
-  // Sections
-  &[class*=_section] {
-    padding: $space_sm $space_xl;
-    &[class*=_border] {
+  &[class*=_collection]{
+    div.layout_body{
+      display: grid;
+      grid-template-rows: 1fr;
+      grid-column-gap: $space_sm;
+      grid-row-gap: $space_sm;
+      grid-template-columns: repeat(4, 1fr);
+      
+      @media screen and (max-width: $screen-md-min) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+       @media screen and (max-width: $screen-xs-min) {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  
+  }
+  &[class*=_sidebar]{
+    $layout_sizes: (
+      "xs":   64px,
+      "sm":   200px,
+      "md":   250px,
+      "lg":   300px,
+      "xl":   365px,
+    );
+    $positions: (
+      "left",
+      "right",
+    );
+    $colors: (
+      "light",
+      "dark",
+      "gradient",
+      "transparent",
+    );
+
+    // Sections
+    &[class*=_section] {
       padding: $space_sm $space_xl;
-      border-bottom: 1px solid $border_light;
-      &[class*=_margin] {
-        margin: $space_sm $space_xl;
+      &[class*=_border] {
+        padding: $space_sm $space_xl;
         border-bottom: 1px solid $border_light;
+        &[class*=_margin] {
+          margin: $space_sm $space_xl;
+          border-bottom: 1px solid $border_light;
+        }
       }
     }
-  }
 
-  // sidebar and Body
-  @each $name, $size in $layout_sizes {
-    &[class*=_size_#{$name}] {
-      @each $position in $positions {
-        &[class*=_#{$position}] {
-          @each $color in $colors {
-            &[class*=_#{$color}] {
-              @include layout_settings($size, $position, $color, "#{&}");
+    // sidebar and Body
+    @each $name, $size in $layout_sizes {
+      &[class*=_size_#{$name}] {
+        @each $position in $positions {
+          &[class*=_#{$position}] {
+            @each $color in $colors {
+              &[class*=_#{$color}] {
+                @include layout_settings($size, $position, $color, "#{&}");
+              }
             }
           }
         }
       }
     }
-  }
 
 
-  // Collapse Settings
-  @each $position in $positions {
-    @each $breakpoint_name, $breakpoint in $breakpoints {
-      &_#{$position}_collapse_#{$breakpoint_name} {
-        @include break_at($breakpoint) {
-          @if $position == 'left' {
-            grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
-            grid-template-rows: auto 1fr;
+    // Collapse Settings
+    @each $position in $positions {
+      @each $breakpoint_name, $breakpoint in $breakpoints {
+        &_#{$position}_collapse_#{$breakpoint_name} {
+          @include break_at($breakpoint) {
+            @if $position == 'left' {
+              grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
+              grid-template-rows: auto 1fr;
 
-          } @else {
-            grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
-            grid-template-rows: 1fr auto;
-          }
-          grid-template-columns: 1fr;
-          &.full {
-            min-height: auto !important;
-          }
-          .layout_sidebar {
-            grid-area: "layout_collapsed_#{$breakpoint_name}_sidebar";
-            border-width: 0 0 1px 0;
-          }
-          .layout_body {
-            grid-area: "layout_collapsed_#{$breakpoint_name}_body";
+            } @else {
+              grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
+              grid-template-rows: 1fr auto;
+            }
+            grid-template-columns: 1fr;
+            &.full {
+              min-height: auto !important;
+            }
+            .layout_sidebar {
+              grid-area: "layout_collapsed_#{$breakpoint_name}_sidebar";
+              border-width: 0 0 1px 0;
+            }
+            .layout_body {
+              grid-area: "layout_collapsed_#{$breakpoint_name}_body";
+            }
           }
         }
       }
     }
   }
-
 }

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb

@@ -0,0 +1,54 @@
+<%= pb_rails("layout", props: {layout: "collection"}) do %>
+  <%= pb_rails("layout/body") do %>
+
+ <%= pb_rails("card" ) do %>
+      Card content 
+    <% end %>
+     <%= pb_rails("card") do %>
+   <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+
+    <% end %>
+     <%= pb_rails("card" ) do %>
+        <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+    <% end %>
+     <%= pb_rails("card" ) do %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+    <% end %>
+     <%= pb_rails("card" ) do %>
+      Card content 
+    <% end %>
+     <%= pb_rails("card") do %>
+      Card content 
+    <% end %>
+      <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+     <%= pb_rails("card" ) do %>
+      Card content 
+    <% end %>
+     <%= pb_rails("card" ) do %>
+     <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+    <% end %>
+
+
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Card, Layout } from '../../'
+
+const LayoutCollection = () => {
+  return (
+    <div>
+      <Layout
+          layout="collection"
+      >
+        <Layout.Body>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutCollection

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

@@ -4,8 +4,10 @@ examples:
   - layout_transparent: Transparent
   - layout_sizes: Sizes
   - layout_sizes_dark: Sizes Dark
+  - layout_collection: Collection Layout
   react:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
   - layout_sizes_dark: Sizes Dark
+  - layout_collection: Collection Layout

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

@@ -2,3 +2,4 @@ export { default as LayoutColors } from './_layout_colors.jsx'
 export { default as LayoutTransparent } from './_layout_transparent.jsx'
 export { default as LayoutSizes } from './_layout_sizes.jsx'
 export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
+export { default as LayoutCollection } from './_layout_collection.jsx'

data/app/pb_kits/playbook/pb_layout/layout.rb

@@ -21,10 +21,18 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                   values: %w[light dark gradient],
                   default: "light"
+      prop :layout, type: Playbook::Props::Enum,
+            values: %w[sidebar collection],
+            default: "sidebar"
 
       def classname
-        first_class = generate_classname("pb_layout_kit", "size_#{size}", position, variant, transparent_class)
-        [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
+        case layout
+	        when "collection"
+	          generate_classname("pb_layout_kit", layout)
+	        else
+	          first_class = generate_classname("pb_layout_kit_sidebar","size_#{size}", position, variant, transparent_class)
+	          [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
+        end
       end
 
     private

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -1,34 +1,36 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
-import {
-  Body,
-  Title,
-} from '../'
+import { Body, Title } from '../'
 
 type LegendProps = {
-  color?: 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7',
+  color?: | "data_1"
+    | "data_2"
+    | "data_3"
+    | "data_4"
+    | "data_5"
+    | "data_6"
+    | "data_7",
   dark?: Boolean,
   prefixText?: String,
   text: String,
 }
 
-const Legend = ({
-  color = 'data_1',
-  dark = false,
-  prefixText,
-  text,
-}: LegendProps) => {
+const Legend = (props: LegendProps) => {
+  const { color = 'data_1', dark = false, prefixText, text } = props
   const darkClass = dark ? 'dark' : 'light'
-  const bodyCSS = buildCss('pb_legend_kit', color, darkClass)
+  const bodyCSS = classnames(
+    buildCss('pb_legend_kit', color, darkClass),
+    spacing(props)
+  )
 
   return (
     <div className={bodyCSS}>
-      <Body
-          color={dark ? 'lighter' : 'light'}
-      >
+      <Body color={dark ? 'lighter' : 'light'}>
         <span className="pb_legend_indicator_circle" />
         <If condition={prefixText}>
           <Title

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

@@ -1,7 +1,8 @@
 /* @flow */
 
 import React from 'react'
-
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 import { pbChart } from '../'
 
 type LineGraphProps = {
@@ -20,6 +21,8 @@ type LineGraphProps = {
   subTitle?: String,
   title: String,
   type?: String,
+  legend?: Boolean,
+  height?: String,
 }
 
 export default class LineGraph extends React.Component<LineGraphProps> {
@@ -42,6 +45,8 @@ export default class LineGraph extends React.Component {
       subTitle,
       title,
       type,
+      legend,
+      height,
     } = this.props
 
     new pbChart(`.${className}`, {
@@ -55,6 +60,8 @@ export default class LineGraph extends React.Component {
       xAxisCategories: xAxisCategories,
       yAxisMin: yAxisMin,
       yAxisMax: yAxisMax,
+      legend: legend,
+      height: height,
     })
   }
 
@@ -65,7 +72,7 @@ export default class LineGraph extends React.Component {
 
     return (
       <div
-          className={className}
+          className={classnames(className, spacing(this.props))}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_line_graph/docs/_description.md

@@ -1 +1,3 @@
-Line graphs are used to show changes in data over time. The default height of line graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+Line graphs are used to show changes in data over time. The default height of line graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+
+For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb

@@ -16,11 +16,11 @@
 }] %>
 
 <%= pb_rails("line_graph", props: { 
-        id: "line-test", 
-        gradient: false, 
-        chart_data: data, 
-        x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-        title: 'Solar Employment Growth by Sector, 2010-2016', 
-        subtitle: 'Source: thesolarfoundation.com', 
-        axis_title: 'Number of Employees' 
-    }) %>
+    id: "line-default", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Solar Employment Growth by Sector, 2010-2016', 
+    subtitle: 'Source: thesolarfoundation.com', 
+    axis_title: 'Number of Employees' 
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -23,7 +23,7 @@ const LineGraphDefault = () => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
-        id="bar-test"
+        id="line-default"
         subTitle="Source: thesolarfoundation.com"
         title="Solar Employment Growth by Sector, 2010-2016"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-fixed-height", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Fixed Height (300px)', 
+    axis_title: 'Number of Employees',
+    height: '300'
+}) %>
+
+<br /><br />
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-precentage-height", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Percentage Height (50%)', 
+    axis_title: 'Number of Employees',
+    height: '50%'
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { LineGraph } from '../../'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const LineGraphDefault = () => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+    />
+
+    <br />
+    <br />
+
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        height="50%"
+        id="line-percentage-height"
+        title="Percentage Height (50%)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+    />
+  </div>
+)
+
+export default LineGraphDefault