playbook_ui 6.0.1 → 6.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 24e44a8fd04883d36ed1656d1cfa4791e15abfaacbcd7b2a7788e4f8ee648507
-  data.tar.gz: d27894c4b909d292b8b180feedda3d74d8e942eeb62013c0b8b1278aec8a5f19
+  metadata.gz: 24d77ce736432481783b53597f57c59453de3b20f97b7e7ae5120b9a1ef9dd14
+  data.tar.gz: e282c218ef0a9232cf0efe601ba674bf5e14d3456d0be20ae01c6a0d8fdeb03e
 SHA512:
-  metadata.gz: e2f35473ea28f15292080b7b60264b7c2cf0b3cb599808084f96afe15835d283c07715227b05b86cb8286ee1649256e3997b20b02f16f4231a0a0cafeaeea226
-  data.tar.gz: 63cb7236310ad3ff67e13e62f0ee20a2e8b720edef687ee9c2e814a9fb93b9377a39707bb588f8b8b5ee41a50796e0af751613a6ca9fc3efebcae8d5d6266e03
+  metadata.gz: 5c2983f8a5539e725e04b3b4cbf6b06259bfd2097695da37e939d0a626aa568857e09093d0f9e27f1e56724b00a418501f54f864d573c789c98e88d02e798b03
+  data.tar.gz: cdc566a16f731aabac512d56b4165102781a95acd0274af6f55612bcb284c5de17671b3d5f5d93b21790286e361af0eca254327dbdcfdcbf11d18bfce736a141

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,6 @@
 @import "pb_body/body";
 @import "pb_button/button";
+@import 'pb_button_toolbar/button_toolbar';
 @import "pb_caption/caption";
 @import "pb_card/card";
 @import "pb_title/title";
@@ -26,6 +27,7 @@
 @import 'pb_form/form';
 @import 'pb_form_pill/form_pill';
 @import 'pb_flex/flex';
+@import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -78,4 +80,4 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import './utilities/spacing';
+@import './utilities/spacing';

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

@@ -10,15 +10,17 @@ kits:
   - badge
   - buttons:
     - button
+    - button_toolbar
     - circle_icon_button
   - card
   - checkbox
   - charts_and_graphs:
     - bar_graph
+    - circle_chart
+    - distribution_bar
+    - gauge
     - legend
     - line_graph
-    - distribution_bar
-    - circle_chart
 
   - filter
   - fixed_confirmation_toast

data/app/pb_kits/playbook/index.js

@@ -5,6 +5,7 @@ export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
 export Button from './pb_button/_button.jsx'
+export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'
 export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
@@ -25,6 +26,7 @@ export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirm
 export Flex from './pb_flex/_flex.jsx'
 export FlexItem from './pb_flex/_flex_item.jsx'
 export FormPill from './pb_form_pill/_form_pill.jsx'
+export Gauge from './pb_gauge/_gauge.jsx'
 export Hashtag from './pb_hashtag/_hashtag.jsx'
 export Highlight from './pb_highlight/_highlight.jsx'
 export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'

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

@@ -19,6 +19,7 @@ import * as Badge from 'pb_badge/docs'
 import * as BarGraph from 'pb_bar_graph/docs'
 import * as Body from 'pb_body/docs'
 import * as Button from 'pb_button/docs'
+import * as ButtonToolbar from 'pb_button_toolbar/docs'
 import * as Caption from 'pb_caption/docs'
 import * as Card from 'pb_card/docs'
 import * as Checkbox from 'pb_checkbox/docs'
@@ -38,6 +39,7 @@ import * as Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
 import * as FormPill from 'pb_form_pill/docs'
+import * as Gauge from 'pb_gauge/docs'
 import * as Hashtag from 'pb_hashtag/docs'
 import * as Highlight from 'pb_highlight/docs'
 import * as HomeAddressStreet from 'pb_home_address_street/docs'
@@ -97,6 +99,7 @@ WebpackerReact.setup({
   ...BarGraph,
   ...Body,
   ...Button,
+  ...ButtonToolbar,
   ...Caption,
   ...Card,
   ...Checkbox,
@@ -116,6 +119,7 @@ WebpackerReact.setup({
   ...FixedConfirmationToast,
   ...Flex,
   ...FormPill,
+  ...Gauge,
   ...Hashtag,
   ...Highlight,
   ...HomeAddressStreet,
@@ -168,3 +172,4 @@ WebpackerReact.setup({
   ...UserBadge,
   ...WeekdayStacked,
 })
+

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import { map } from 'lodash'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 import { Image } from '../'
 
@@ -29,7 +29,7 @@ const Avatar = (props: AvatarProps) => {
   const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_avatar_kit', size), className, spacing(props))
+  const classes = classnames(buildCss('pb_avatar_kit', size), className, globalProps(props))
 
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 import {
   buildAriaProps,
@@ -13,7 +13,6 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: String,
-  dark?: Boolean,
   data?: object,
   id?: String,
   rounded?: Boolean,
@@ -24,7 +23,6 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
-    dark = false,
     data = {},
     id,
     rounded = false,
@@ -37,9 +35,8 @@ const Badge = (props: BadgeProps) => {
     className,
     buildCss('pb_badge_kit', variant, {
       rounded: rounded,
-      dark: dark,
     }),
-    spacing(props)
+    globalProps(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -37,7 +37,7 @@
     border-radius: $pb_badge_height / 2;
   }
 
-  &[class*=_dark] {
+  &.dark {
     border-width: 0;
 
     @each $color_name, $color_value in $status_colors {

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -7,7 +7,6 @@ module Playbook
 
       partial "pb_badge/badge"
 
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
@@ -15,15 +14,11 @@ module Playbook
                      default: "neutral"
 
       def classname
-        generate_classname("pb_badge_kit", variant, rounded_class, dark_class)
+        generate_classname("pb_badge_kit", variant, rounded_class)
       end
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def rounded_class
         rounded ? "rounded" : nil
       end

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

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { pbChart } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type BarGraphProps = {
   axisTitle: String,
@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     return (
       <div
-          className={classnames(className, spacing(this.props))}
+          className={classnames(className, globalProps(this.props))}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Highlight } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type BodyProps = {
   aria?: object,
@@ -27,7 +27,6 @@ const Body = (props: BodyProps) => {
     className,
     children,
     color = '',
-    dark = false,
     data = {},
     highlightedText = [],
     highlighting = false,
@@ -40,10 +39,8 @@ const Body = (props: BodyProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_body_kit', color, status, {
-      dark: dark,
-    }),
-    spacing(props),
+    buildCss('pb_body_kit', color, status),
+    globalProps(props),
     className
   )
   const Tag = `${tag}`

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,5 +1,11 @@
 @import "./body_mixins";
 
+.pb_body_kit {
+  &.dark {
+    @include pb_body_dark;
+  }
+}
+
 [class^=pb_body_kit]{
   @include pb_body;
 

data/app/pb_kits/playbook/pb_body/body.rb

@@ -11,8 +11,6 @@ module Playbook
       prop :color, type: Playbook::Props::Enum,
                    values: %w[default light lighter dark light_dark lighter_dark],
                    default: "default"
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :status, type: Playbook::Props::Enum,
                     values: %w[neutral negative positive],
                     default: "neutral"
@@ -26,7 +24,7 @@ module Playbook
                               default: []
 
       def classname
-        generate_classname("pb_body_kit", color_class, dark_class, status_class)
+        generate_classname("pb_body_kit", color_class, status_class)
       end
 
       def content
@@ -41,15 +39,11 @@ module Playbook
         highlight_tags = pb_highlight_output.split("|")
         highlight(text, highlighted_text, highlighter: "#{highlight_tags.first.html_safe} \\1 #{highlight_tags.last.html_safe}")
       end
-     
+
       def color_class
         color != "default" ? color : nil
       end
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def status_class
         status != "neutral" ? status : nil
       end

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
@@ -13,7 +13,6 @@ type ButtonPropTypes = {
   },
   children?: Array<React.ReactChild>,
   className?: String | Array<String>,
-  dark: Boolean,
   disabled?: Boolean,
   fixedWidth?: Boolean,
   fullWidth?: Boolean,
@@ -34,7 +33,6 @@ type ButtonPropTypes = {
 
 const buttonClassName = (props: ButtonPropTypes) => {
   const {
-    dark = false,
     disabled = false,
     fullWidth = false,
     loading = false,
@@ -48,7 +46,6 @@ const buttonClassName = (props: ButtonPropTypes) => {
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
   className += `${size !== null ? `_${size}` : ''}`
-  className += `${dark === true ? '_dark' : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
@@ -85,7 +82,7 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className, spacing(props))
+  const css = classnames(buttonClassName(props), className, globalProps(props))
   const loadingIcon = (
     <div className="loading-icon">
       <Icon

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -28,7 +28,7 @@
     @include pb_button_loading(true);
   }
   // Dark Variants =============
-  &[class*=_dark]  {
+  &.dark  {
     &[class*=_primary]  {
       @include pb_button_primary_dark;
     }

data/app/pb_kits/playbook/pb_button/button.rb

@@ -7,8 +7,6 @@ module Playbook
 
       partial "pb_button/button"
 
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :full_width, type: Playbook::Props::Boolean,
@@ -51,11 +49,7 @@ module Playbook
     private
 
       def classname
-        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class, dark_class)
-      end
-
-      def dark_class
-        dark ? "dark" : nil
+        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
       end
 
       def disabled_class

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -4,6 +4,8 @@ import { Button } from '../../'
 const ButtonDefault = () => (
   <div>
     <Button
+        dark
+        marginRight="xl"
         onClick={() => alert('button clicked!')}
         text="Button Primary"
     />

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+      <%= !object.children.nil? ? capture(&object.children) : object.text %>
+<% end %>

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx

@@ -0,0 +1,52 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+
+import { globalProps } from '../utilities/globalProps.js'
+
+type ButtonToolbarProps = {
+  aria?: object,
+  children?: Array<React.ReactChild>,
+  className?: String,
+  connected?: Boolean,
+  data?: object,
+  id?: String,
+  onClick?: EventHandler,
+  orientation?: "horizontal" | "vertical",
+  text?: String,
+  variant?: String,
+}
+
+const ButtonToolbar  = (props: ButtonToolbarProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    connected = false,
+    data = {},
+    id,
+    orientation = 'horizontal',
+    text,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const classes = classnames(buildCss('pb_button_toolbar_kit', orientation, { connected: connected }), className, globalProps(props))
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children || text}
+    </div>
+  )
+}
+
+export default ButtonToolbar

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -0,0 +1,101 @@
+@import "../pb_button/button";
+@import "../pb_button/button_mixins";
+@import "../tokens/colors";
+
+[class^=pb_button_toolbar]{
+    // Orientation =========
+    &[class*=_horizontal]  {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+  
+      & > [class^=pb_button]  {
+        margin-right: $space-xs;
+
+        &:hover {
+          background-color:darken($royal, 20%);
+        }
+
+        &[class*=secondary] {
+          &:hover {
+            background-color:rgba($primary_action, $opacity_3)
+          }
+        }
+  
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+    &[class*=_vertical]  {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+  
+      & > [class^=pb_button]  {
+        display: block;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: auto;
+        width: 100%;
+        margin-bottom: $space-xs;
+
+        &:hover {
+          background-color:darken($royal, 20%);
+        }
+
+        &[class*=secondary] {
+          &:hover {
+            background-color:rgba($primary_action, $opacity_3)
+          }
+        }
+  
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    // Connect =============
+    &[class*=_connected]  {
+      & > [class^=pb_button]  {
+        margin: 0;
+      }
+  
+      &[class*=_horizontal] {
+        & > [class^=pb_button]  {
+          &:not(:last-child){
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            border-right-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+          &:not(:first-child){
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            border-left-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+        }
+      }
+  
+      &[class*=_vertical] {
+        & > [class^=pb_button]  {
+          &:not(:last-child){
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+          &:not(:first-child){
+            border-top-right-radius: 0;
+            border-top-left-radius: 0;
+            border-top-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+        }
+      }
+    }
+  }