playbook_ui 4.15.0 → 4.18.0

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

@@ -1,9 +1,8 @@
 examples:
-
   rails:
-  - title_count_default: Default
-  - title_count_align: Align
-
+    - title_count_default: Default
+    - title_count_align: Align
 
   react:
-  - title_count_default: Default
+    - title_count_default: Default
+    - title_count_align: Align

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

@@ -1 +1,2 @@
 export { default as TitleCountDefault } from './_title_count_default.jsx'
+export { default as TitleCountAlign } from './_title_count_align.jsx'

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -2,19 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
-import {
-  Body,
-  Title,
-} from '../'
+import { Body, Title } from '../'
 
-import {
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 
 type TitleDetailProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String,
   data?: object,
   detail: String,
@@ -22,21 +17,15 @@ type TitleDetailProps = {
   title: String,
 }
 
-const TitleDetail = ({
-  align = 'left',
-  className,
-  data = {},
-  detail,
-  id,
-  title,
-}: TitleDetailProps) => {
+const TitleDetail = (props: TitleDetailProps) => {
+  const { align = 'left', className, data = {}, detail, id, title } = props
   const dataProps = buildDataProps(data)
   const pbCss = buildCss('pb_title_detail_kit', align)
 
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss)}
+        className={classnames(className, pbCss, spacing(props))}
         id={id}
     >
       <Title

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

@@ -1,10 +1,8 @@
 // @flow
 
 import React from 'react'
-
-import type {
-  InputCallback,
-} from '../types'
+import classnames from 'classnames'
+import type { InputCallback } from '../types'
 
 import {
   buildAriaProps,
@@ -13,6 +11,8 @@ import {
   noop,
 } from '../utilities/props'
 
+import { spacing } from '../utilities/spacing.js'
+
 type Props = {
   aria: object,
   checked: boolean,
@@ -20,7 +20,7 @@ type Props = {
   onChange: InputCallback<HTMLInputElement>,
   onCheck: InputCallback<HTMLInputElement>,
   onUncheck: InputCallback<HTMLInputElement>,
-  size: 'sm' | 'md',
+  size: "sm" | "md",
 }
 
 const Toggle = ({
@@ -37,23 +37,21 @@ const Toggle = ({
   const dataProps = buildDataProps(data)
   const handleChange = (event) => {
     onChange(event)
-    event.target.checked ?
-      onCheck(event) :
-      onUncheck(event)
+    event.target.checked ? onCheck(event) : onUncheck(event)
   }
 
   const css = buildCss({
     'pb_toggle_kit': true,
     [size]: true,
-    'on': checked,
-    'off': !checked,
+    on: checked,
+    off: !checked,
   })
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={css}
+        className={classnames(css, spacing(props))}
     >
       <label className="pb_toggle_wrapper">
         <input

data/app/pb_kits/playbook/pb_user/_user.jsx

@@ -1,12 +1,9 @@
 /* @flow */
 
 import React from 'react'
-
-import {
-  Avatar,
-  Body,
-  Title,
-} from '../'
+import classnames from 'classnames'
+import { Avatar, Body, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type UserProps = {
   className?: String,
@@ -14,42 +11,45 @@ type UserProps = {
   name: String,
   territory?: String,
   title?: String,
-  size?: 'sm' | 'md' | 'lg',
-  align?: 'left' | 'center' | 'right',
-  orientation?: 'horiztonal' | 'vertical',
+  size?: "sm" | "md" | "lg",
+  align?: "left" | "center" | "right",
+  orientation?: "horiztonal" | "vertical",
   avatar?: Boolean,
   avatarUrl?: String,
 }
 
-const User = ({
-  name = '',
-  territory = '',
-  title = '',
-  align = 'left',
-  orientation = 'horizontal',
-  size = 'sm',
-  avatar = false,
-  avatarUrl,
-}: UserProps) => (
-  <div className={`pb_user_kit_${align}_${orientation}_${size}`}>
-    <If condition={avatar || avatarUrl}>
-      <Avatar
-          imageUrl={avatarUrl}
-          name={name}
-          size={size}
-      />
-    </If>
+const User = (props: UserProps) => {
+  const {
+    name = '',
+    territory = '',
+    title = '',
+    align = 'left',
+    orientation = 'horizontal',
+    size = 'sm',
+    avatar = false,
+    avatarUrl,
+  } = props
+  return (
+    <div className={classnames(`pb_user_kit_${align}_${orientation}_${size}`, spacing(props))}>
+      <If condition={avatar || avatarUrl}>
+        <Avatar
+            imageUrl={avatarUrl}
+            name={name}
+            size={size}
+        />
+      </If>
 
-    <div className="content_wrapper">
-      <Title
-          size={size == 'lg' ? 3 : 4}
-          text={name}
-      />
-      <Body color="light">
-        {territory == '' ? title : `${territory} • ${title}`}
-      </Body>
+      <div className="content_wrapper">
+        <Title
+            size={size == 'lg' ? 3 : 4}
+            text={name}
+        />
+        <Body color="light">
+          {territory == '' ? title : `${territory} • ${title}`}
+        </Body>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default User

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -1,21 +1,21 @@
 /* @flow */
 import React from 'react'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type UserBadgeProps = {
   className?: String,
   id?: String,
-  badge?: 'million-dollar' | 'veteran',
-  size?: 'sm' | 'md' | 'lg',
+  badge?: "million-dollar" | "veteran",
+  size?: "sm" | "md" | "lg",
 }
 
-const UserBadge = ({
-  badge = 'million-dollar',
-  size = 'md',
-}: UserBadgeProps) => {
+const UserBadge = (props: UserBadgeProps) => {
+  const { badge = 'million-dollar', size = 'md' } = props
   const image = require(`./badges/_${badge}.svg`)
 
   return (
-    <div className={`pb_user_badge_kit_${size}`}>
+    <div className={classnames(`pb_user_badge_kit_${size}`, spacing(props))}>
       <div className="pb_user_badge_wrapper">
         <img src={image} />
       </div>

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -2,24 +2,19 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
+import { buildCss } from '../utilities/props'
 
-import {
-  buildCss,
-} from '../utilities/props'
-
-import {
-  Caption,
-  Title,
-} from '../'
+import { Caption, Title } from '../'
 
 import DateTime from '../pb_kit/dateTime.js'
 
 type WeekdayStackedProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String,
   dark?: Boolean,
   date: Date,
-  variant?: 'day_only' | 'month_day' | 'expanded',
+  variant?: "day_only" | "month_day" | "expanded",
   compact?: Boolean,
   id?: String,
 }
@@ -43,25 +38,32 @@ const getFormattedDate = (date, variant) => {
   }
 }
 
-const WeekdayStacked = ({
-  align = 'left',
-  className,
-  dark = false,
-  date = new Date(),
-  variant = 'month_day',
-  compact = false,
-}: WeekdayStackedProps) => (
-  <div
-      className={classnames(buildCss('pb_weekday_stacked_kit', align), className)}
-  >
-    <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
-    <Title
-        dark={dark}
-        size={4}
-        tag="span"
-        text={getFormattedDate(date, variant)}
-    />
-  </div>
-)
+const WeekdayStacked = (props: WeekdayStackedProps) => {
+  const {
+    align = 'left',
+    className,
+    dark = false,
+    date = new Date(),
+    variant = 'month_day',
+    compact = false,
+  } = props
+  return (
+    <div
+        className={classnames(
+        buildCss('pb_weekday_stacked_kit', align),
+        className,
+        spacing(props)
+      )}
+    >
+      <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
+      <Title
+          dark={dark}
+          size={4}
+          tag="span"
+          text={getFormattedDate(date, variant)}
+      />
+    </div>
+  )
+}
 
 export default WeekdayStacked

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -82,6 +82,7 @@ class pbChart {
         text: this.defaults.title,
       },
       chart: {
+        height: this.defaults.height,
         type: this.defaults.type,
       },
       subtitle: {
@@ -97,6 +98,9 @@ class pbChart {
       xAxis: {
         categories: this.defaults.xAxisCategories,
       },
+      legend: {
+        enabled: this.defaults.legend,
+      },
       plotOptions: {
         series: {
           pointStart: this.defaults.pointStart,

data/app/pb_kits/playbook/props.rb

@@ -33,10 +33,21 @@ module Playbook
       self.class.props[name].value values[name]
     end
 
+    def spacing_props
+      selected_props = spacing_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        spacing_value = send(k)
+        "#{spacing_options[k]}_#{spacing_value}" if spacing_values.include? spacing_value
+      end.compact.join(" ")
+    end
+
     def generate_classname(*name_parts, separator: "_")
       [
         name_parts.compact.join(separator),
         prop(:classname),
+        spacing_props,
       ].compact.join(" ")
     end
 
@@ -49,6 +60,43 @@ module Playbook
       prop :classname
       prop :aria, type: Playbook::Props::Hash, default: {}
       prop :children, type: Playbook::Props::Proc
+      prop :margin
+      prop :margin_bottom
+      prop :margin_left
+      prop :margin_right
+      prop :margin_top
+      prop :margin_x
+      prop :margin_y
+      prop :padding
+      prop :padding_bottom
+      prop :padding_left
+      prop :padding_right
+      prop :padding_top
+      prop :padding_x
+      prop :padding_y
+    end
+
+    def spacing_options
+      {
+        margin: "m",
+        margin_bottom: "mb",
+        margin_left: "ml",
+        margin_right: "mr",
+        margin_top: "mt",
+        margin_x: "mx",
+        margin_y: "my",
+        padding: "p",
+        padding_bottom: "pb",
+        padding_left: "pl",
+        padding_right: "pr",
+        padding_top: "pt",
+        padding_x: "px",
+        padding_y: "py",
+      }
+    end
+
+    def spacing_values
+      %w[none xs sm md lg xl]
     end
 
     class_methods do

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -76,7 +76,7 @@ $action_colors: (
 
 // Active colors ----------------------
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #144075;
+$active_dark:         #0082ff; 
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
@@ -92,7 +92,7 @@ $hover_colors: (
 
 // Focus colors -----------------------
 $focus_input_light:   rgba($active_light, $opacity_5);
-$focus_input_dark:    rgba($active_dark, $opacity_5);
+$focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
   focus_input_dark:         $focus_input_dark
@@ -134,7 +134,7 @@ $data_2:              $yellow;
 $data_3:              $purple;
 $data_4:              $green;
 $data_5:              $orange;
-$data_6:              $active_dark;
+$data_6:              #144075;
 $data_7:              $teal;
 $data_8:              $red;
 $data_colors: (

data/app/pb_kits/playbook/tokens/_spacing.scss

@@ -9,6 +9,7 @@ $spaces:(
   space_md:   $space_md,
   space_lg:   $space_lg,
   space_xl:   $space_xl,
+  none: 0
 );