playbook_ui 5.2.0.pre.alpha3 → 5.3.0.pre.alpha1

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { Button, Gauge } from '../../'
+
+const GaugeLiveData = () => {
+  const [value, setValue] = useState(50)
+
+  const updateState = () => {
+    setValue(Math.floor(Math.random() * 100))
+  }
+
+  return (
+    <div>
+      <Button
+          onClick={updateState}
+          text="Update State"
+      />
+      <Gauge
+          chartData={[{ name: 'Name', value: value }]}
+          id="gauge-live-data"
+      />
+    </div>
+  )
+}
+
+export default GaugeLiveData

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("title", props: {
+  text: "Min defaults to 0, Max to 100.",
+  tag: "h3",
+  size: 3
+}) %>
+
+<% data = [
+  {
+    name: 'Rating',
+    value: 4.5,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-min-max",
+  chart_data: data,
+  min: 0,
+  max: 5,
+  show_labels: true,
+  title: "Product Rating"
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Gauge, Title } from '../../'
+
+const data = [{
+  name: 'Rating', value: 4.5,
+}]
+
+const GaugeMinMax = () => (
+  <div>
+    <Title
+        size={3}
+        tag="h3"
+        text="Min defaults to 0, Max to 100."
+    />
+    <Gauge
+        chartData={data}
+        id="gauge-min-max"
+        max={5}
+        min={0}
+        showLabels
+        title="Product Rating"
+    />
+  </div>
+)
+
+export default GaugeMinMax

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("title", props: {
+  text: "Gauge resizes dynamically to fit whatever element it's placed within.",
+  tag: "h3",
+  size: 3
+}) %>
+
+
+<%= pb_rails("flex", props: {wrap: true}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing4",
+        chart_data: [{ name: "Name", value: 100 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing3",
+        chart_data: [{ name: "Name", value: 75 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing2",
+        chart_data: [{ name: "Name", value: 50 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing1",
+        chart_data: [{ name: "Name", value: 25 }],
+      }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Flex, FlexItem, Gauge, Title } from '../../'
+
+const GaugeSizing = () => (
+  <div>
+    <Title
+        size={3}
+        tag="h3"
+        text="Gauge resizes dynamically to fit whatever element it's placed within."
+    />
+    <Flex
+        wrap
+    >
+      <FlexItem fixedSize="400px">
+        <Gauge
+            chartData={[ { name: 'Point1', value: 100 } ]}
+            id="gauge-sizing4"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="300px">
+        <Gauge
+            chartData={[ { name: 'Point1', value: 75 } ]}
+            id="gauge-sizing3"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="200px">
+        <Gauge
+            chartData={[ { name: 'Point1', value: 50 } ]}
+            id="gauge-sizing2"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="125px">
+        <Gauge
+            chartData={[ { name: 'Point1', value: 25 } ]}
+            id="gauge-sizing1"
+        />
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default GaugeSizing

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb

@@ -0,0 +1,14 @@
+<% data = [
+  {
+    name: 'Score',
+    value: 780,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-title",
+  chart_data: data,
+  min: 300,
+  max: 850,
+  title: "Credit Score",
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Score', value: 780 },
+]
+
+const GaugeTitle = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-title"
+        max={850}
+        min={300}
+        title="Credit Score"
+    />
+  </div>
+)
+
+export default GaugeTitle

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb

@@ -0,0 +1,29 @@
+<% data1 = [
+  {
+    name: 'Data Used',
+    value: 32,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-units1",
+  chart_data: data1,
+  title: "Data Usage",
+  suffix: "GB"
+}) %>
+
+<% data2 = [
+  {
+    name: 'Sales to Date',
+    value: 65,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-units2",
+  chart_data: data2,
+  title: "Sales Goal",
+  prefix: "$",
+  suffix: "k",
+
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data1 = [
+  { name: 'Data Used', value: 32 },
+]
+const data2 = [
+  { name: 'Sales to Date', value: 65 },
+]
+
+const GaugeUnits = () => (
+  <div>
+    <Gauge
+        chartData={data1}
+        id="gauge-units1"
+        suffix="GB"
+        title="Data Usage"
+    />
+    <Gauge
+        chartData={data2}
+        id="gauge-units2"
+        prefix="$"
+        suffix="k"
+        title="Sales Goal"
+    />
+  </div>
+)
+
+export default GaugeUnits

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

@@ -0,0 +1,22 @@
+examples:
+  
+  rails:
+  - gauge_default: Default
+  - gauge_title: Title
+  - gauge_units: Units
+  - gauge_full_circle: Full Circle
+  - gauge_min_max: Min Max Labels
+  - gauge_sizing: Sizing
+  - gauge_height: Height
+  
+  
+  react:
+  - gauge_default: Default
+  - gauge_title: Title 
+  - gauge_units: Units
+  - gauge_full_circle: Full Circle
+  - gauge_min_max: Min Max Labels
+  - gauge_sizing: Sizing
+  - gauge_height: Height
+  - gauge_live_data: Live Data
+  

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

@@ -0,0 +1,8 @@
+export { default as GaugeDefault } from './_gauge_default.jsx'
+export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
+export { default as GaugeHeight } from './_gauge_height.jsx'
+export { default as GaugeMinMax } from './_gauge_min_max.jsx'
+export { default as GaugeSizing } from './_gauge_sizing.jsx'
+export { default as GaugeTitle } from './_gauge_title.jsx'
+export { default as GaugeUnits } from './_gauge_units.jsx'
+export { default as GaugeLiveData } from './_gauge_live_data.jsx'

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbGauge
+    class Gauge
+      include Playbook::Props
+
+      partial "pb_gauge/gauge"
+
+      prop :chart_data, type: Playbook::Props::Array,
+                        default: [{ name: "Name", value: 0 }]
+      prop :style, type: Playbook::Props::Enum,
+                   values: %w[solidgauge],
+                   default: "solidgauge"
+      prop :title, type: Playbook::Props::String, default: ""
+      prop :prefix, type: Playbook::Props::String, default: ""
+      prop :suffix, type: Playbook::Props::String, default: ""
+      prop :height, type: Playbook::Props::String, default: nil
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
+                                      {point.name}: ' + '<b>{point.y}
+                                    </b>'
+      prop :full_circle, type: Playbook::Props::Boolean, default: false
+      prop :show_labels, type: Playbook::Props::Boolean, default: false
+      prop :min, type: Playbook::Props::Numeric, default: 0
+      prop :max, type: Playbook::Props::Numeric, default: 100
+
+      def chart_data_formatted
+        chart_data.map { |hash| hash[:y] = hash.delete :value }
+        chart_data
+      end
+
+      def chart_options
+        {
+          id: id,
+          chartData: chart_data_formatted,
+          circumference: full_circle ? [0, 360] : [-100, 100],
+          height: height,
+          min: min,
+          max: max,
+          title: title,
+          suffix: suffix,
+          prefix: prefix,
+          showLabels: show_labels,
+          style: style,
+          tooltipHtml: tooltip_html,
+          type: "gauge",
+        }.to_json.html_safe
+      end
+
+      def classname
+        generate_classname("pb_gauge_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_layout/_footer.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(object.tag, 
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/_header.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(object.tag, 
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= capture(&object.children) %>
+<% end %>

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

@@ -19,7 +19,7 @@ type LayoutPropTypes = {
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
   variant?: "light" | "dark" | "gradient",
   transparent?: Boolean,
-  layout?: "sidebar" | "collection" | "kanban",
+  layout?: "sidebar" | "collection" | "kanban" | "content",
 }
 
 type LayoutSideProps = {
@@ -32,6 +32,16 @@ type LayoutBodyProps = {
   className?: String,
 }
 
+type LayoutHeaderProps = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
+}
+
+type LayoutFooterProps = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
+}
+
 // Side component
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
@@ -52,6 +62,26 @@ const Body = (props: LayoutBodyProps) => {
   )
 }
 
+// Header component
+const Header = (props: LayoutHeaderProps) => {
+  const { children, className } = props
+  return (
+    <div className={classnames('layout_header', className, spacing(props))}>
+      {children}
+    </div>
+  )
+}
+
+// Footer component
+const Footer = (props: LayoutFooterProps) => {
+  const { children, className } = props
+  return (
+    <div className={classnames('layout_footer', className, spacing(props))}>
+      {children}
+    </div>
+  )
+}
+
 // Main componenet
 
 const Layout = (props: LayoutPropTypes) => {
@@ -129,5 +159,7 @@ const Layout = (props: LayoutPropTypes) => {
 
 Layout.Side = Side
 Layout.Body = Body
+Layout.Header = Header
+Layout.Footer = Footer
 
 export default Layout

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

@@ -17,7 +17,7 @@ $card-border-radius: $border_rad_lightest;
   &[class*=_collection]{
     div.layout_body{
       display: grid;
-      grid-template-rows: 1fr;
+      grid-auto-rows: max-content;
       grid-column-gap: $space_sm;
       grid-row-gap: $space_sm;
       grid-template-columns: repeat(4, 1fr);
@@ -28,8 +28,24 @@ $card-border-radius: $border_rad_lightest;
        @media screen and (max-width: $screen-xs-min) {
         grid-template-columns: repeat(1, 1fr);
       }
-    }
-  
+    } 
+  }
+
+  &[class*=_collection_detail]{
+      display: grid;
+      width: 100%;
+      height: 100%;
+      grid-template-areas: 
+      "side-bar collection";
+      grid-template-columns: .25fr 1fr;
+      grid-column-gap: $space_sm;
+
+      @media screen and (max-width: $screen-md-min) {
+        grid-template-areas: "side-bar"
+        "collection";
+        grid-template-columns: 1fr;
+        grid-row-gap: $space_sm;
+      }
   }
 
   &[class*=_kanban]{
@@ -61,6 +77,35 @@ $card-border-radius: $border_rad_lightest;
     }
   }
 
+  &[class*=_content]{
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: .5fr repeat(3, 1fr) .5fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    grid-template-areas:
+    "h h h h h"
+    "s b b b b"
+    "s b b b b"
+    "s b b b b"
+    "s f f f f";
+    div.layout_header{
+      grid-area: h;
+      padding-bottom: $space_sm;
+    }
+    div.layout_sidebar{
+      grid-area: s;
+      padding-right: $space_sm;
+    }
+    div.layout_body{
+      grid-area: b;
+    }
+    div.layout_footer{
+      grid-area: f;
+      padding-top: $space_sm;
+    }
+  }
+
   // For future release as of 6/18/2020
   &[class*=_kanban_responsive] {
     display: grid;