playbook_ui 6.0.1.pre.alpha5 → 6.0.1.pre.alpha6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3758eaffd739857c6d3a7b4f9abb12ab11ea815d798c17f2bbb3a6e6c0f0a6dd
-  data.tar.gz: 8b3904ea1cf701bfc759d3d18b3a822530bb25ebf9a30f73ca70f813415e2c10
+  metadata.gz: 3d15e1dfbbf4ca480142d10ee4e6da90644a8e9b95c55948d5985626885c4a3b
+  data.tar.gz: a1cdc436d5c1c262a37ed465b6de00c1efe27663af599e641acaf871a0a04951
 SHA512:
-  metadata.gz: 9a9ea53ae1f6d6bb8af300e24828775554c77bb58a43612fc4faa0d00a48325ed8b6d74cae83e449207861051601e5d0926f98a03f317b89d917c574e563e85a
-  data.tar.gz: e3dcec185a93b6a9bb803cde9ec24f55b388e33d74e37d8da26d9fe606b4f3ab83b98294c17560747cd785eac9eff00729d20021446aeb88ad25e04909ce5d7d
+  metadata.gz: 3712c53539b7900f80549f6b57be230538b59f32ef5559d6b1de3327a9da63d8d9dc9ca333d3286c648cdb8605dd482bc45d8ed445b3d7609b42e13fef053d7b
+  data.tar.gz: 1bcb503b7574ec32dc420e84c99e0c5c1ed1bd1b720a54ef65a9b7b2bae7c77962dd660208e65c8672151119f08ac4fc6344dc06091eb0df8b029df136b04cae

data/app/pb_kits/playbook/_playbook.scss

@@ -26,6 +26,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 +79,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

@@ -15,10 +15,11 @@ kits:
   - 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

@@ -25,6 +25,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

@@ -38,6 +38,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'
@@ -116,6 +117,7 @@ WebpackerReact.setup({
   ...FixedConfirmationToast,
   ...Flex,
   ...FormPill,
+  ...Gauge,
   ...Hashtag,
   ...Highlight,
   ...HomeAddressStreet,

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_caption/_caption.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type CaptionProps = {
   aria?: object,
@@ -38,7 +38,7 @@ const Caption = (props: CaptionProps) => {
       dark: dark,
     }),
     className,
-    spacing(props)
+    globalProps(props)
   )
 
   return (

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

@@ -4,38 +4,41 @@ import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
+  borderNone?: Boolean,
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
   highlight?: {
     position?: "side" | "top",
     color?: String,
   },
+  padding?: String,
   selected?: Boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
-  dark?: Boolean,
-  borderNone?: Boolean,
 }
 
 type CardHeaderProps = {
+  categoryColor?: Number,
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
-  categoryColor?: Number,
+  padding?: String,
 }
 
 type CardBodyProps = {
   children: Array<React.ReactNode> | React.ReactNode | String,
   className?: String,
+  padding?: String,
 }
 
 // Header component
 const Header = (props: CardHeaderProps) => {
-  const { children, className, categoryColor = 1 } = props
+  const { children, className, categoryColor = 1, padding = 'sm' } = props
   const headerCSS = buildCss('pb_card_header_kit', `category_${categoryColor}`)
 
-  const headerSpacing = spacing(props) ? spacing(props) : 'p_sm'
+  const headerSpacing = globalProps(props, { padding })
+
   return (
     <div className={classnames(headerCSS, className, headerSpacing)}>
       {children}
@@ -45,9 +48,11 @@ const Header = (props: CardHeaderProps) => {
 
 // Body component
 const Body = (props: CardBodyProps) => {
-  const { children, className } = props
+  const { children, className, padding = 'md' } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const bodySpacing = spacing(props) ? spacing(props) : 'p_md'
+
+  const bodySpacing = globalProps(props, { padding })
+
   return (
     <div className={classnames(bodyCSS, className, bodySpacing)}>
       {children}
@@ -57,24 +62,22 @@ const Body = (props: CardBodyProps) => {
 
 const Card = (props: CardPropTypes) => {
   const {
+    borderNone = false,
     children,
     className,
-    dark = false,
     highlight = {},
     selected = false,
     shadow = 'none',
-    borderNone = false,
+    padding = 'md',
   } = props
   const bodyCSS = buildCss('pb_card_body_kit')
   const borderCSS = borderNone == true ? 'border_none' : ''
   const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
-    dark: dark,
     selected,
     deselected: !selected,
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })
-  const cardSpacing = spacing(props) ? spacing(props) : 'p_md'
 
   // coerce to array
   const cardChildren =
@@ -91,9 +94,9 @@ const Card = (props: CardPropTypes) => {
   const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
   return (
-    <div className={classnames(cardCss, className)}>
+    <div className={classnames(cardCss, globalProps(props), className)}>
       {subComponentTags('Header')}
-      <div className={classnames(bodyCSS, cardSpacing)}>
+      <div className={classnames(bodyCSS, globalProps({ padding }))}>
         {nonHeaderChildren}
       </div>
     </div>