playbook_ui 4.18.1 → 5.0.1.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e66952518f8aeb3810ab2ac245ea551a42052cc47c3c28f2848540ac4ee38e76
-  data.tar.gz: fb1871dbdfdeb396d4d547888546ba362451934bacb7a1f7942a7817484e4ca6
+  metadata.gz: ab4ad6868b6ed8d7bd5936f55937a33e021fcd692defb24f47bb7ff0165a1439
+  data.tar.gz: 15d6f890139e5daa816ecf23b52b2b02991e2acde40f24548dad74693c4bba5d
 SHA512:
-  metadata.gz: c8385b878f9b733bcbe1604cb35fdad66ada9648ab439c0b5145fe6dc4776d8d90e7a8fa30f4fe6fe8f981767f71df80733996422bd82eafcfb76ea318a53e5f
-  data.tar.gz: 6903d4fa3646a0af79c51130b6d196a340e2ecf16cd078f7488bd93cbc73ac65869ad942e6bf2248dc3ac43a9b4d832963eb029384f21d9af4e707271af8bc14
+  metadata.gz: 21137e860a492ef2cd233be67b243c0e9cfbcb3fde138bb6fd0c00d60343ebd7a748c1c9e2dc6e726cd016dc122ff16c8f1b9a6adc278edd2c7518194063f9e1
+  data.tar.gz: c00d5ba405ac446ed183f6910508b3dfbaad7710b024f70dd9d1f3c75294bd9fe5a10f82a54447892f92586a5e7165acc67ab5fc2f40b2212eecc475f7075cc5

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';
@@ -80,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
   - registration
+  - filter_table
+
 kits:
   - avatar
   - avatar_action_button
@@ -39,6 +41,7 @@ kits:
   - icon_circle
   - icon_value
   - image
+  - installer
   - layout
   - list
   - loading_inline
@@ -88,4 +91,3 @@ kits:
     - title_detail
     - weekday_stacked
   - user
-  - user_badge

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'
@@ -124,6 +125,7 @@ WebpackerReact.setup({
   ...IconCircle,
   ...IconValue,
   ...Image,
+  ...Installer,
   ...LabelPill,
   ...LabelValue,
   ...Layout,

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

@@ -11,7 +11,9 @@ import WebpackerReact from 'webpacker-react'
 // Generated file from kit generator.
 
 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_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;
+}

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx

@@ -21,7 +21,6 @@ const FiltersPopover = ({ children }: FiltersPopoverProps) => {
   return (
     <PbReactPopover
         closeOnClick="outside"
-        offset
         placement="bottom"
         reference={filterButton}
         shouldClosePopover={updateHide}

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx

@@ -69,7 +69,7 @@ const SortMenu = ({ options, value, onChange }: SortMenuProps) => {
     <PbReactPopover
         className="pb_filter_sort_menu"
         closeOnClick="outside"
-        offset
+        padding="none"
         placement="bottom"
         reference={sortButton}
         shouldClosePopover={updateHide}

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -7,13 +7,13 @@
 <% end %>
 
 <% if object.template != "sort_only"%>
-  <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
+  <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom', padding: 'none'}) do %>
     <%= capture(&object.children) %>
   <% end %>
 <%end%>
 
 <% if object.template != "filter_only"%>
-  <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
+  <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom', padding: 'none'}) do %>
       <%= pb_rails("list") do %>
         <% object.sort_menu.each do |item| %>
           <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>