RubyGems - playbook_ui - Versions diffs - 4.2.0 → 4.3.0 - Mend

playbook_ui 4.2.0 → 4.3.0

Files changed (75) hide show

data/app/pb_kits/playbook/pb_select/docs/_select_disabled.jsx CHANGED Viewed

@@ -2,26 +2,20 @@ import React from 'react'
 import { Select } from '../../'
 const SelectDisabled = () => {
+  const options = [
+    { value: 'Apple Pie' },
+    { value: 'Cookies' },
+    { value: 'Ice Cream' },
+    { value: 'Brownies' },
+  ]
   return (
     <div>
       <Select
           disabled
           label="Favorite Dessert"
           name="dessert"
-          options={[
-          {
-            value: 'Apple Pie',
-          },
-          {
-            value: 'Cookies',
-          },
-          {
-            value: 'Ice Cream',
-          },
-          {
-            value: 'Brownies',
-          },
-        ]}
+          options={options}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.jsx CHANGED Viewed

@@ -2,40 +2,42 @@ import React from 'react'
 import { Select } from '../../'
 const SelectDisabledOptions = () => {
+  const options = [
+    {
+      value: '1',
+      disabled: true,
+      text: 'Espresso',
+    },
+    {
+      value: '2',
+      text: 'Americano',
+    },
+    {
+      value: '3',
+      disabled: true,
+      text: 'Cappuccino',
+    },
+    {
+      value: '4',
+      text: 'Mocha',
+    },
+    {
+      value: '5',
+      text: 'Flat White',
+    },
+    {
+      value: '6',
+      text: 'Latte',
+    },
+  ]
   return (
     <div>
       <Select
           label="Favorite Coffee"
           name="coffee"
-          options={[
-          {
-            value: '1',
-            disabled: true,
-            valueText: 'Espresso',
-          },
-          {
-            value: '2',
-            selected: true,
-            valueText: 'Americano',
-          },
-          {
-            value: '3',
-            disabled: true,
-            valueText: 'Cappuccino',
-          },
-          {
-            value: '4',
-            valueText: 'Mocha',
-          },
-          {
-            value: '5',
-            valueText: 'Flat White',
-          },
-          {
-            value: '6',
-            valueText: 'Latte',
-          },
-        ]}
+          options={options}
+          value="2"
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx CHANGED Viewed

@@ -2,27 +2,29 @@ import React from 'react'
 import { Body, Select } from '../..'
 const SelectError = () => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
   return (
     <div>
       <Select
           error="Please make a valid selection"
           label="Favorite Food"
           name="food"
-          options={[
-          {
-            value: '1',
-            valueText: 'Burgers',
-          },
-          {
-            value: '2',
-            selected: true,
-            valueText: 'Pizza',
-          },
-          {
-            value: '3',
-            valueText: 'Tacos',
-          },
-        ]}
+          options={options}
+          value="2"
       />
       <Body
           error="Please make a valid selection"

data/app/pb_kits/playbook/pb_select/docs/_select_required.jsx CHANGED Viewed

@@ -2,23 +2,19 @@ import React from 'react'
 import { Select } from '../../'
 const SelectRequired = () => {
+  const options = [
+    { value: 'Left' },
+    { value: 'Right' },
+    { value: 'I go without laces' },
+  ]
   return (
     <div>
       <Select
           blankSelection="Select One..."
           label="Which shoe do you tie first?"
           name="shoe"
-          options={[
-          {
-            value: 'Left',
-          },
-          {
-            value: 'Right',
-          },
-          {
-            value: 'I go without laces',
-          },
-        ]}
+          options={options}
           required
       />
     </div>

data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx CHANGED Viewed

@@ -2,25 +2,19 @@ import React from 'react'
 import { Select } from '../../'
 const SelectValueTextSame = () => {
+  const options = [
+    { value: 'Football' },
+    { value: 'Baseball' },
+    { value: 'Basketball' },
+    { value: 'Hockey' },
+  ]
   return (
     <div>
       <Select
           label="Favorite Sport"
           name="sports"
-          options={[
-          {
-            value: 'Football',
-          },
-          {
-            value: 'Baseball',
-          },
-          {
-            value: 'Basketball',
-          },
-          {
-            value: 'Hockey',
-          },
-        ]}
+          options={options}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx CHANGED Viewed

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Icon } from '../'
-import { type InputCallback } from '../types'
+import type { InputCallback } from '../types'
 import {
   buildAriaProps,
@@ -26,7 +26,7 @@ type Props = {
   inputId?: String,
   multi?: Boolean,
   name?: String,
-  onChange: InputCallback,
+  onChange: InputCallback<HTMLInputElement>,
   text?: String,
   value?: String
 }

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx CHANGED Viewed

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Body, Caption } from '../'
-import { type InputCallback } from '../types.js'
+import type { InputCallback } from '../types.js'
 type TextareaProps = {
   className?: String,
@@ -19,7 +19,7 @@ type TextareaProps = {
   name?: String,
   rows?: Number,
   dark?: Boolean,
-  onChange?: InputCallback,
+  onChange?: InputCallback<HTMLTextAreaElement>,
 }
 const Textarea = ({

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx CHANGED Viewed

@@ -17,9 +17,9 @@ type Props = {
   aria: object,
   checked: boolean,
   data: object,
-  onChange: InputCallback,
-  onCheck: InputCallback,
-  onUncheck: InputCallback,
+  onChange: InputCallback<HTMLInputElement>,
+  onCheck: InputCallback<HTMLInputElement>,
+  onUncheck: InputCallback<HTMLInputElement>,
   size: 'sm' | 'md',
 }

data/app/pb_kits/playbook/types.js CHANGED Viewed

@@ -1,4 +1,4 @@
 // @flow
 export type Callback<T, K> = T => K
-export type InputCallback = Callback<SyntheticEvent<>, void>
+export type InputCallback<T> = Callback<SyntheticEvent<T>, void>

data/app/pb_kits/playbook/vendor.js CHANGED Viewed

@@ -9,5 +9,5 @@ import './pb_form/pb_form_validation'
 import 'lazysizes'
 // Popovers
-import Popover from './pb_popover/_popover'
-window.Popover = Popover
+import PbPopover from './pb_popover/_popover.js'
+window.PbPopover = PbPopover

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

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Full Screen Examples</title>
+        <%= csrf_meta_tags %>
+        <%= csp_meta_tag %>
+        <%= stylesheet_pack_tag 'main' %>
+    </head>
+    <body>
+        <div class="sample-layout">
+            <%= yield %>
+            <% if @type == "rails" %>
+                <% contents = File.read("#{Playbook::Engine.root}/app/views/playbook/samples/dashboards/dashboards.html.erb") %>
+                <%= render template: "playbook/samples/dashboards/dashboards.html.erb", locals: { type: @type } %>
+            <% elsif @type == "react" %>
+                <% contents = File.read("#{Playbook::Engine.root}/app/views/playbook/samples/dashboards/dashboards.jsx") %>
+            <% end %>
+            <%= react_component("Dashboards") %>
+            <div class="pb--kit-show">
+                <div class="pb--doc light_ui">
+                    <div class="pb--codeCopy close" >
+                        <a class="pb--close-toggle copy-clipboard" href="#">Copy to Clipboard</a>
+                        <div class="hiddenCodeforCopy"><%= contents %></div>
+                        <%= raw rouge(contents, "erb") %>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </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' %>
+    <%= yield :pb_js %>
+</html>

data/app/views/playbook/pages/kit_show.html.slim CHANGED Viewed

@@ -1,4 +1,4 @@
-.pb--kit-show
+div class="pb--kit-show #{@kit}-kit"
   = pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: 1 })
   .pb--kit-type-nav

data/app/views/playbook/pages/principles.html.slim CHANGED Viewed

@@ -1,3 +1,3 @@
 body
   div class="markdown"
-    = render 'playbook/pages/principals/getting_started'
+    = render 'playbook/pages/principles/getting_started'

data/app/views/playbook/samples/dashboards/dashboards.html.erb ADDED Viewed

@@ -0,0 +1,82 @@
+<%= pb_rails("layout", props: {full: true, position: "left", size: "xl", collapse: "md"}) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <br>
+    <%= pb_rails("user", props: {
+          name: "Jon Zazula",
+          title: "User Experience Designer",
+          orientation: "horizontal",
+          align: "left",
+          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"
+      }) %>
+    <br>
+    <hr style="height:1px;border:none;color:#e4e8f0;background-color:#e4e8f0;margin: 15px;" />
+    <%= pb_rails("nav", props: {variant: "subtle"}) do %>
+      <%= pb_rails("nav/item", props: { icon_left: "city", text: "City", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "user-friends", text: "People", link: "#", icon_right: "angle-down" }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "user-tie", text: "Growth Dashboard", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "clock", text: "History", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "clipboard", text: "Memos", link: "#", icon_right: "angle-down" }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "phone", text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <% data = [{
+        name: 'Installation',
+        data: [154175]
+    }, {
+        name: 'Manufacturing',
+        data: [40434]
+    }, {
+        name: 'Sales & Distribution',
+        data: [39387]
+    }, {
+        name: 'Project Development',
+        data: [34227]
+    }, {
+        name: 'Other',
+        data: [18111]
+    }] %>
+    <%= pb_rails("bar_graph", props: {
+        axis_title: 'Number of Employees',
+        chart_data: data,
+        id: "bar-test",
+        point_start: 2012,
+        subtitle: 'Source: thesolarfoundation.com',
+        title: 'Solar Employment Growth by Sector, 2010-2016'
+    }) %>
+    <% data2 = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+}, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+}, {
+    name: 'Project Development',
+    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
+}, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+}] %>
+<%= pb_rails("line_graph", props: { id: "line-test", gradient: false, chart_data: data2, point_start: 1, title: 'Solar Employment Growth by Sector, 2010-2016', subtitle: 'Source: thesolarfoundation.com', axis_title: 'Number of Employees' }  ) %>
+  <% end %>
+<% end %>

data/app/views/playbook/samples/dashboards/dashboards.jsx ADDED Viewed

@@ -0,0 +1,35 @@
+import React from 'react'
+import { BarGraph } from '../../../../pb_kits/playbook'
+const chartData = [{
+  name: 'Installation',
+  data: [154175],
+}, {
+  name: 'Manufacturing',
+  data: [40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [39387],
+}, {
+  name: 'Project Development',
+  data: [34227],
+}, {
+  name: 'Other',
+  data: [18111],
+}]
+const Dashboards = () => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-test"
+        pointStart={2012}
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+    />
+  </div>
+)
+export default Dashboards