playbook_ui 4.17.0 → 5.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7c60678bea5dfbd0876ea029d5ee3ee8acddec0ffb70c76dbdf98834c2502af5
-  data.tar.gz: 96100434503a2403c3fcf50dea881b520a2d3ff14f93afd5542e7f149f9a31cf
+  metadata.gz: 828a4ed5ca696b17585b010d26c4d08b387c87e1b55242c172bddacd8778e89f
+  data.tar.gz: d41c487e5a893ee2c18d249bf7e88fa7136be41835d32cbcbd11b0f4c9dcf1ee
 SHA512:
-  metadata.gz: 473b7c3b876ca669ab9a2ce799c661af6fd4689843548535d62cf16ff88e699e9330076d0dd3c35b9d935ac6a71f926572d43426a2c17f6dca34c3b3f2feb7b7
-  data.tar.gz: 9892a24ec8caa7570080db1cb329a83440a18c8a557e27df14c0421afd07ce9a1490af3aa10fd2ad2fccfb6573f3310145359248a6897da1c946253b1086d3f4
+  metadata.gz: 7bb1e389e97f105a549fc41fc130609d3f81921ad4640d5cf6a80b36629e711ef6f1159f299a209df18ecda230609808bf36671d8a740f9d159dfbb3b5b16858
+  data.tar.gz: 9bbc425756317af57f7b4895241c0477e2dd75832361709b3f64165ee31e683614f3cd33dab2af22aa566aed5669f2534dea2a0fba89f189f24c9db58e23ee3e

data/README.md

@@ -9,10 +9,10 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 ## Getting started
 
-1. Run `yarn && bundle`
+1. Run `make install`
 1. Run `make start`
 1. Install overcommit hooks `bin/overcommit`
-1. open [http://localhost:8080](http://localhost:8080)
+1. open [http://localhost:8089](http://localhost:8089)
 
 To clean up this project from your local machine, run `make stop`, which will drop all containers and networks associated with this project. To purge all resources, do `make clean`, which also removes images and volumes for a blank slate.
 

data/app/helpers/playbook/pb_sample_helper.rb

@@ -49,7 +49,7 @@ module Playbook
       if type == "rails"
         render template: "playbook/samples/#{sample}/index.html.erb"
       elsif type == "react"
-        react_component(sample.titleize.to_s)
+        react_component(sample.titleize.delete(" ").to_s)
       end
     end
   end

data/app/pb_kits/playbook/_playbook.scss

@@ -33,6 +33,7 @@
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_value/icon_value';
 @import 'pb_image/image';
+@import 'pb_installer/installer';
 @import 'pb_label_pill/label_pill';
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
@@ -67,6 +68,7 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
+@import 'pb_timeline/timeline';
 @import 'pb_time_range_inline/time_range_inline';
 @import 'pb_timestamp/timestamp';
 @import 'pb_title_count/title_count';
@@ -79,4 +81,3 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
-

data/app/pb_kits/playbook/data/menu.yml

@@ -1,6 +1,8 @@
 samples:
   - dashboards
-  - something
+  - registration
+  - filter_table
+
 kits:
   - avatar
   - avatar_action_button
@@ -39,6 +41,7 @@ kits:
   - icon_circle
   - icon_value
   - image
+  - installer
   - layout
   - list
   - loading_inline
@@ -57,6 +60,7 @@ kits:
   - star_rating
   - stat_change
   - table
+  - timeline
   - tooltip
   - typography:
     - body
@@ -87,4 +91,3 @@ kits:
     - title_detail
     - weekday_stacked
   - user
-  - user_badge

data/app/pb_kits/playbook/index.js

@@ -70,6 +70,7 @@ export TableRow from './pb_table/_table_row.jsx'
 export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
 export Time from './pb_time/_time.jsx'
+export Timeline from './pb_timeline/_timeline.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
 export Timestamp from './pb_timestamp/_timestamp.jsx'
 export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'

data/app/pb_kits/playbook/packs/examples.js

@@ -45,6 +45,7 @@ import * as Icon from 'pb_icon/docs'
 import * as IconCircle from 'pb_icon_circle/docs'
 import * as IconValue from 'pb_icon_value/docs'
 import * as Image from 'pb_image/docs'
+import * as Installer from 'pb_installer/docs'
 import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as Layout from 'pb_layout/docs'
@@ -79,6 +80,7 @@ import * as Table from 'pb_table/docs'
 import * as Textarea from 'pb_textarea/docs'
 import * as TextInput from 'pb_text_input/docs'
 import * as Time from 'pb_time/docs'
+import * as Timeline from 'pb_timeline/docs'
 import * as TimeStacked from 'pb_time_stacked/docs'
 import * as Timestamp from 'pb_timestamp/docs'
 import * as TimeRangeInline from 'pb_time_range_inline/docs'
@@ -123,6 +125,7 @@ WebpackerReact.setup({
   ...IconCircle,
   ...IconValue,
   ...Image,
+  ...Installer,
   ...LabelPill,
   ...LabelValue,
   ...Layout,
@@ -157,6 +160,7 @@ WebpackerReact.setup({
   ...Textarea,
   ...TextInput,
   ...Time,
+  ...Timeline,
   ...TimeStacked,
   ...Timestamp,
   ...TimeRangeInline,

data/app/pb_kits/playbook/packs/samples.js

@@ -12,4 +12,8 @@ import WebpackerReact from 'webpacker-react'
 
 import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
 
+import Registration from '../../../views/playbook/samples/registration/index.jsx'
+
 WebpackerReact.setup({ Dashboards })
+WebpackerReact.setup({ FilterTable })
+WebpackerReact.setup({ Registration })

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -15,6 +15,7 @@ type AvatarActionButtonProps = {
   aria: Object,
   className?: String,
   data?: Object,
+  id?: String,
   imageUrl?: String,
   linkUrl?: String,
   name?: String,
@@ -28,6 +29,7 @@ const AvatarActionButton = ({
   aria = {},
   className,
   data = {},
+  id,
   imageUrl,
   linkUrl,
   name,
@@ -55,6 +57,7 @@ const AvatarActionButton = ({
         {...ariaProps}
         {...dataProps}
         className={classnames(css, className)}
+        id={id}
     >
       <a
           href={linkUrl}

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -21,6 +21,7 @@ type BarGraphProps = {
   title: String,
   type?: String,
   legend?: Boolean,
+  toggleLegendClick?: Boolean,
   height?: String,
 }
 
@@ -28,6 +29,8 @@ export default class BarGraph extends React.Component {
   static defaultProps = {
     className: 'pb_bar_graph',
     type: 'column',
+    legend: false,
+    toggleLegendClick: true,
   }
 
   componentDidMount() {
@@ -45,6 +48,7 @@ export default class BarGraph extends React.Component {
       type,
       legend,
       height,
+      toggleLegendClick,
     } = this.props
 
     new pbChart(`.${className}`, {
@@ -59,6 +63,7 @@ export default class BarGraph extends React.Component {
       yAxisMin: yAxisMin,
       yAxisMax: yAxisMax,
       legend: legend,
+      toggleLegendClick: toggleLegendClick,
       height: height,
     })
   }

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -21,6 +21,8 @@ module Playbook
       prop :y_axis_max, type: Playbook::Props::Numeric
       prop :legend, type: Playbook::Props::Boolean,
                     default: false
+      prop :toggle_legend_click, type: Playbook::Props::Boolean,
+                                 default: true
       prop :height
 
       def chart_type
@@ -40,6 +42,7 @@ module Playbook
           yAxisMin: y_axis_min,
           yAxisMax: y_axis_max,
           legend: legend,
+          toggleLegendClick: toggle_legend_click,
           height: height,
         }.to_json.html_safe
       end

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.html.erb

@@ -0,0 +1,15 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-test-3",
+    y_axis_min: 0,
+    x_axis_categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Bar Graph with Legend Non Clickable',
+    legend: true,
+    toggle_legend_click: false,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { BarGraph } from '../..'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}]
+
+const BarGraphLegendNonClickable = () => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-test-3"
+        legend
+        title="Bar Graph with Legend Non Clickable"
+        toggleLegendClick={false}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+    />
+  </div>
+)
+
+export default BarGraphLegendNonClickable

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

@@ -1,13 +1,15 @@
 examples:
-  
+
   rails:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
+  - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
-  
-  
+
+
   react:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
+  - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
-  
+

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

@@ -1,3 +1,4 @@
 export { default as BarGraphDefault } from './_bar_graph_default.jsx'
 export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
+export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
 export { default as BarGraphHeight } from './_bar_graph_height.jsx'

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -2,29 +2,37 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 type CaptionProps = {
+  aria?: object,
   className?: String,
   children: Array<React.ReactNode> | React.ReactNode,
   dark?: Boolean,
+  data?: object,
+  id?: String,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
-  tag: String,
-  text: String,
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
+  text?: String,
 }
 
 const Caption = (props: CaptionProps) => {
   const {
+    aria = {},
     className,
     children,
     dark = false,
+    data = {},
+    id,
     size = 'md',
     tag = 'div',
     text,
   } = props
   const Tag = `${tag}`
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const css = classnames(
     buildCss('pb_caption_kit', size, {
       dark: dark,
@@ -33,7 +41,16 @@ const Caption = (props: CaptionProps) => {
     spacing(props)
   )
 
-  return <Tag className={css}>{text || children}</Tag>
+  return (
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      {text || children}
+    </Tag>
+  )
 }
 
 export default Caption

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -1,75 +1,4 @@
-@import "../tokens/shadows";
-@import "../tokens/border_radius";
-@import "../tokens/spacing";
-@import "../tokens/colors";
-@import "../tokens/transition";
-@import "../tokens/animation-curves";
-
-$pb_card_border_width: 1px;
-$pb_card_border_radius: $border_rad_heavier;
-$pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
-$pb_card_highlight_size: 4px;
-$pb_card_header_colors: $category_colors;
-$pb_card_header_border_radius: $border_rad_heavy;
-$pb_card_padding:(
-  none: 0,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-);
-
-@mixin pb_card_selected($border_color: $primary) {
-  border-color: $border_color;
-  border-width: $pb_card_border_width * 2;
-}
-
-@mixin pb_card_selected_dark {
-  @include pb_card_selected($primary_action);
-}
-
-@mixin pb_card($background: $card_light, $border_color: $border_light) {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: $background;
-  background-clip: border-box;
-  border-width: $pb_card_border_width;
-  border-style: solid;
-  border-color: $border_color;
-  border-radius: $pb_card_border_radius;
-  transition-property: all;
-  transition-duration: $transition_short;
-  transition-timing-function: $easeIn;
-
-  @each $name, $shadow in $box_shadows {
-    &[class*=_#{$name}] {
-      box-shadow: $shadow;
-    }
-  }
-}
-
-@mixin pb_card_dark {
-  @include pb_card($card_dark, $border_dark);
-}
-
-@mixin pb_card_highlight($width, $height, $background){
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: $width;
-  height: $height;
-  background: $background;
-  z-index: 10;
-}
-
-@mixin pb_card_header_color($category_color) {
-  background: $category_color;
-}
+@import "card_mixin";
 
 
 [class^=pb_card_kit] {

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -0,0 +1,72 @@
+@import "../tokens/shadows";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/transition";
+@import "../tokens/animation-curves";
+
+$pb_card_border_width: 1px;
+$pb_card_border_radius: $border_rad_heavier;
+$pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
+$pb_card_highlight_size: 4px;
+$pb_card_header_colors: $category_colors;
+$pb_card_header_border_radius: $border_rad_heavy;
+$pb_card_padding:(
+  none: 0,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+
+@mixin pb_card_selected($border_color: $primary) {
+  border-color: $border_color;
+  border-width: $pb_card_border_width * 2;
+}
+
+@mixin pb_card_selected_dark {
+  @include pb_card_selected($primary_action);
+}
+
+@mixin pb_card($background: $card_light, $border_color: $border_light) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: $background;
+  background-clip: border-box;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_color;
+  border-radius: $pb_card_border_radius;
+  transition-property: all;
+  transition-duration: $transition_short;
+  transition-timing-function: $easeIn;
+
+  @each $name, $shadow in $box_shadows {
+    &[class*=_#{$name}] {
+      box-shadow: $shadow;
+    }
+  }
+}
+
+@mixin pb_card_dark {
+  @include pb_card($card_dark, $border_dark);
+}
+
+@mixin pb_card_highlight($width, $height, $background){
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: $width;
+  height: $height;
+  background: $background;
+  z-index: 10;
+}
+
+@mixin pb_card_header_color($category_color) {
+  background: $category_color;
+}