playbook_ui 6.0.1.pre.alpha6 → 6.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d15e1dfbbf4ca480142d10ee4e6da90644a8e9b95c55948d5985626885c4a3b
-  data.tar.gz: a1cdc436d5c1c262a37ed465b6de00c1efe27663af599e641acaf871a0a04951
+  metadata.gz: 24e44a8fd04883d36ed1656d1cfa4791e15abfaacbcd7b2a7788e4f8ee648507
+  data.tar.gz: d27894c4b909d292b8b180feedda3d74d8e942eeb62013c0b8b1278aec8a5f19
 SHA512:
-  metadata.gz: 3712c53539b7900f80549f6b57be230538b59f32ef5559d6b1de3327a9da63d8d9dc9ca333d3286c648cdb8605dd482bc45d8ed445b3d7609b42e13fef053d7b
-  data.tar.gz: 1bcb503b7574ec32dc420e84c99e0c5c1ed1bd1b720a54ef65a9b7b2bae7c77962dd660208e65c8672151119f08ac4fc6344dc06091eb0df8b029df136b04cae
+  metadata.gz: e2f35473ea28f15292080b7b60264b7c2cf0b3cb599808084f96afe15835d283c07715227b05b86cb8286ee1649256e3997b20b02f16f4231a0a0cafeaeea226
+  data.tar.gz: 63cb7236310ad3ff67e13e62f0ee20a2e8b720edef687ee9c2e814a9fb93b9377a39707bb588f8b8b5ee41a50796e0af751613a6ca9fc3efebcae8d5d6266e03

data/app/pb_kits/playbook/_playbook.scss

@@ -26,7 +26,6 @@
 @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';
@@ -79,4 +78,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,11 +15,10 @@ 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,7 +25,6 @@ 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,7 +38,6 @@ 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'
@@ -117,7 +116,6 @@ 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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.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, globalProps(props))
+  const classes = classnames(buildCss('pb_avatar_kit', size), className, spacing(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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 import {
   buildAriaProps,
@@ -13,6 +13,7 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: String,
+  dark?: Boolean,
   data?: object,
   id?: String,
   rounded?: Boolean,
@@ -23,6 +24,7 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
+    dark = false,
     data = {},
     id,
     rounded = false,
@@ -35,8 +37,9 @@ const Badge = (props: BadgeProps) => {
     className,
     buildCss('pb_badge_kit', variant, {
       rounded: rounded,
+      dark: dark,
     }),
-    globalProps(props)
+    spacing(props)
   )
 
   return (

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

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

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

@@ -7,6 +7,7 @@ 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,
@@ -14,11 +15,15 @@ module Playbook
                      default: "neutral"
 
       def classname
-        generate_classname("pb_badge_kit", variant, rounded_class)
+        generate_classname("pb_badge_kit", variant, rounded_class, dark_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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type BarGraphProps = {
   axisTitle: String,
@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(className, spacing(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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type BodyProps = {
   aria?: object,
@@ -27,6 +27,7 @@ const Body = (props: BodyProps) => {
     className,
     children,
     color = '',
+    dark = false,
     data = {},
     highlightedText = [],
     highlighting = false,
@@ -39,8 +40,10 @@ const Body = (props: BodyProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_body_kit', color, status),
-    globalProps(props),
+    buildCss('pb_body_kit', color, status, {
+      dark: dark,
+    }),
+    spacing(props),
     className
   )
   const Tag = `${tag}`

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

@@ -1,11 +1,5 @@
 @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,6 +11,8 @@ 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"
@@ -24,7 +26,7 @@ module Playbook
                               default: []
 
       def classname
-        generate_classname("pb_body_kit", color_class, status_class)
+        generate_classname("pb_body_kit", color_class, dark_class, status_class)
       end
 
       def content
@@ -39,11 +41,15 @@ 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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
@@ -13,6 +13,7 @@ type ButtonPropTypes = {
   },
   children?: Array<React.ReactChild>,
   className?: String | Array<String>,
+  dark: Boolean,
   disabled?: Boolean,
   fixedWidth?: Boolean,
   fullWidth?: Boolean,
@@ -33,6 +34,7 @@ type ButtonPropTypes = {
 
 const buttonClassName = (props: ButtonPropTypes) => {
   const {
+    dark = false,
     disabled = false,
     fullWidth = false,
     loading = false,
@@ -46,6 +48,7 @@ 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' : ''
@@ -82,7 +85,7 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className, globalProps(props))
+  const css = classnames(buttonClassName(props), className, spacing(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 =============
-  &.dark  {
+  &[class*=_dark]  {
     &[class*=_primary]  {
       @include pb_button_primary_dark;
     }

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

@@ -7,6 +7,8 @@ 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,
@@ -49,7 +51,11 @@ module Playbook
     private
 
       def classname
-        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class, dark_class)
+      end
+
+      def dark_class
+        dark ? "dark" : nil
       end
 
       def disabled_class

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

@@ -4,8 +4,6 @@ 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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type CaptionProps = {
   aria?: object,
@@ -38,7 +38,7 @@ const Caption = (props: CaptionProps) => {
       dark: dark,
     }),
     className,
-    globalProps(props)
+    spacing(props)
   )
 
   return (

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

@@ -4,41 +4,38 @@ import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.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,
-  padding?: String,
+  categoryColor?: Number,
 }
 
 type CardBodyProps = {
   children: Array<React.ReactNode> | React.ReactNode | String,
   className?: String,
-  padding?: String,
 }
 
 // Header component
 const Header = (props: CardHeaderProps) => {
-  const { children, className, categoryColor = 1, padding = 'sm' } = props
+  const { children, className, categoryColor = 1 } = props
   const headerCSS = buildCss('pb_card_header_kit', `category_${categoryColor}`)
 
-  const headerSpacing = globalProps(props, { padding })
-
+  const headerSpacing = spacing(props) ? spacing(props) : 'p_sm'
   return (
     <div className={classnames(headerCSS, className, headerSpacing)}>
       {children}
@@ -48,11 +45,9 @@ const Header = (props: CardHeaderProps) => {
 
 // Body component
 const Body = (props: CardBodyProps) => {
-  const { children, className, padding = 'md' } = props
+  const { children, className } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-
-  const bodySpacing = globalProps(props, { padding })
-
+  const bodySpacing = spacing(props) ? spacing(props) : 'p_md'
   return (
     <div className={classnames(bodyCSS, className, bodySpacing)}>
       {children}
@@ -62,22 +57,24 @@ const Body = (props: CardBodyProps) => {
 
 const Card = (props: CardPropTypes) => {
   const {
-    borderNone = false,
     children,
     className,
+    dark = false,
     highlight = {},
     selected = false,
     shadow = 'none',
-    padding = 'md',
+    borderNone = false,
   } = 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 =
@@ -94,9 +91,9 @@ const Card = (props: CardPropTypes) => {
   const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
   return (
-    <div className={classnames(cardCss, globalProps(props), className)}>
+    <div className={classnames(cardCss, className)}>
       {subComponentTags('Header')}
-      <div className={classnames(bodyCSS, globalProps({ padding }))}>
+      <div className={classnames(bodyCSS, cardSpacing)}>
         {nonHeaderChildren}
       </div>
     </div>