playbook_ui 5.2.0 → 5.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb8840e61c52b773111c22632a90f9543ff610609017855691c9cd4e1999315e
-  data.tar.gz: 4abd95023a74be43d334f19bcd57160edbd76f51a3be26733e0e22463413109c
+  metadata.gz: 4e2f90404b2cb31a01901577679b4a20f66455a7eff2a5a903bbb473a0473853
+  data.tar.gz: e5471a16590847efafd3c9cb8d9899944afab8e1efd70bd5fb1e7c446913d331
 SHA512:
-  metadata.gz: d2c02a383c9fa07b0892c1ead36815a66cfcf699d5deecee13d109e664affc7e173ddda17b6301f1160cc1cc59c8a01854129f30d14dd12edc16d0c60f032861
-  data.tar.gz: ce596c4e96e0665b56f4c9a4622ca004600c3c613c87329ed0321ebf315fd16fffd1b6220b74bff7fdb23df9f129e4cf65602af1e7880cf70c06080c678cbd61
+  metadata.gz: d43fc99fe13e555b46b98b3dc069b860fddd625471421f38fbee3f8557eb5c8d8fc202cab6670db285e5c306f450f764d230d49678e98c2407b02e77935b431c
+  data.tar.gz: 7f0cfdaf3777fa7fcd09da1e2b5554f50ec18b07b5183fc5484929c1c415005437423af11756918cfa80ed72f85f5095483710c08ce3e3ece9b5a68da581c76d

data/app/pb_kits/playbook/_playbook.scss

@@ -80,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

@@ -2,6 +2,7 @@ samples:
   - dashboards
   - registration
   - filter_table
+  - collection_detail
 
 kits:
   - avatar

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

@@ -13,7 +13,9 @@ import WebpackerReact from 'webpacker-react'
 import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
 import FilterTable from '../../../views/playbook/samples/filter_table/index.jsx'
 import Registration from '../../../views/playbook/samples/registration/index.jsx'
+import CollectionDetail from '../../../views/playbook/samples/collection_detail/index.jsx'
 
 WebpackerReact.setup({ Dashboards })
 WebpackerReact.setup({ FilterTable })
 WebpackerReact.setup({ Registration })
+WebpackerReact.setup({ CollectionDetail })

data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss

@@ -2,6 +2,7 @@
 @import "flex_examples";
 @import "code_snippet";
 @import "kit_doc";
+@import "bg_light_doc_example";
 
 @import "color_utilities";
 @import "spacing_tokens";

data/app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss

@@ -0,0 +1,7 @@
+@import "../../../tokens/colors";
+@import "../../../tokens/spacing";
+
+.bg-light-doc-example {
+    background: $bg_light;
+    padding: $space_lg;
+}

data/app/pb_kits/playbook/pb_badge/_badge.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

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

@@ -2,26 +2,37 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
 type BadgeProps = {
+  aria?: object,
   className?: String,
   dark?: Boolean,
+  data?: object,
   id?: String,
-  text?: String,
-  variant?: "success" | "warning" | "error" | "info" | "neutral",
   rounded?: Boolean,
+  text?: String,
+  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
 const Badge = (props: BadgeProps) => {
   const {
+    aria = {},
     className,
     dark = false,
+    data = {},
     id,
+    rounded = false,
     text,
     variant = 'neutral',
-    rounded = false,
   } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const css = classnames(
     className,
     buildCss('pb_badge_kit', variant, {
@@ -33,6 +44,8 @@ const Badge = (props: BadgeProps) => {
 
   return (
     <div
+        {...ariaProps}
+        {...dataProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_body/_body.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(object.tag,
+  aria: object.aria,
   id: object.id,
   data: object.data,
   class: object.classname) do %>

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

@@ -2,50 +2,59 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Highlight } from '../'
 import { spacing } from '../utilities/spacing.js'
 
 type BodyProps = {
+  aria?: object,
   className?: String,
   children?: Array<React.ReactChild>,
-  color: 'light' | 'lighter',
+  color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
   dark?: Boolean,
-  status?: 'negative' | 'positive',
-  tag: String,
-  text?: String,
+  data?: object,
+  highlightedText?: Array<String>,
   highlighting?: Boolean,
-  highlightedText?: Array<String>
-}
-
-const bodyCSS = ({
-  color = '',
-  dark = false,
-  status = '',
-
-}: BodyProps) => {
-  const colorStyle = color !== '' ? `_${color}` : ''
-
-  const themeStyle = dark === true ? '_dark' : ''
-
-  const statusStyle = status !== '' ? `_${status}` : ''
-
-  return 'pb_body_kit' + colorStyle + themeStyle + statusStyle
+  id?: String,
+  status?: 'negative' | 'neutral' | 'positive',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  text?: String,
 }
 
 const Body = (props: BodyProps) => {
   const {
+    aria = {},
     className,
     children,
-    text,
-    tag = 'div',
-    highlightedText,
+    color = '',
+    dark = false,
+    data = {},
+    highlightedText = [],
     highlighting = false,
+    id,
+    status = '',
+    tag = 'div',
+    text,
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    className,
+    buildCss('pb_body_kit', color, status, {
+      dark: dark,
+    }),
+    spacing(props)
+  )
   const Tag = `${tag}`
 
   return (
-    <Tag className={classnames(bodyCSS(props), className, spacing(props))}>
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <If condition={highlighting}>
         <Highlight highlightedText={highlightedText}>{text || children}</Highlight>
         <Else />

data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb

@@ -1,6 +1,6 @@
 <%= pb_rails("body", props: {
   text: "I am a body kit",
-  dark: true
+  dark: true,
 }) %>
 
 <%= pb_rails("body", props: {

data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx

@@ -18,8 +18,6 @@ const BodyDark = () => {
           dark
           text="I am a body kit (Lighter)"
       />
-      <br />
-      <br />
       <Body
           dark
           status="negative"

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -2,6 +2,7 @@
   text: "I am a body kit"
 }) %>
 
+
 <%= pb_rails("body", props: {
   text: "I am a body kit (Light)",
   color: "light"

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -4,7 +4,9 @@ import { Body } from '../../'
 const BodyLight = () => {
   return (
     <div>
-      <Body text="I am a body kit (Default)" />
+      <Body
+          text="I am a body kit (Default)"
+      />
       <Body
           color="light"
           text="I am a body kit (Light)"
@@ -13,8 +15,6 @@ const BodyLight = () => {
           color="lighter"
           text="I am a body kit (Lighter)"
       />
-      <br />
-      <br />
       <Body
           status="negative"
           text="I am a body kit (Status: negative)"
@@ -23,10 +23,6 @@ const BodyLight = () => {
           status="positive"
           text="I am a body kit (Status: positive)"
       />
-      <Body
-          status="positive"
-          text="I am a body kit (Status: positive)"
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -3,11 +3,11 @@
 [class^=pb_caption_kit] {
   @include caption;
 
-  &[class*=_lg] {
+  &[class^=pb_caption_kit_lg] {
     @include caption_lg;
   }
 
-  &[class*=_xs] {
+  &[class^=pb_caption_kit_xs] {
     @include caption_xs;
   }
 

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

@@ -16,6 +16,7 @@ type CardPropTypes = {
   selected?: Boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
   dark?: Boolean,
+  borderNone?: Boolean,
 }
 
 type CardHeaderProps = {
@@ -62,9 +63,11 @@ const Card = (props: CardPropTypes) => {
     highlight = {},
     selected = false,
     shadow = 'none',
+    borderNone = false,
   } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
+  const borderCSS = borderNone == true ? 'border_none' : ''
+  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
     dark: dark,
     selected,
     deselected: !selected,

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

@@ -16,6 +16,10 @@
     }
   }
 
+  &[class*=_border_none] {
+    border-width: 0px;
+  }
+
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,6 +15,8 @@ module Playbook
                        default: {}
       prop :dark, type: Playbook::Props::Boolean,
                  default: false
+      prop :border_none, type: Playbook::Props::Boolean,
+                         default: false
 
       def classname
         generate_classname("pb_card_kit",
@@ -22,7 +24,8 @@ module Playbook
                            shadow_class,
                            highlight_position_class,
                            highlight_color_class,
-                           dark_class)
+                           dark_class,
+                           border_class)
       end
 
       def body_padding
@@ -55,6 +58,10 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
+
+      def border_class
+        border_none == true ? "border_none" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb

@@ -0,0 +1,7 @@
+<div class="bg-light-doc-example">
+
+    <%= pb_rails("card", props: { border_none: true })  do %>
+        Card content
+    <% end %>
+    
+</div>

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+const CardBorderNone = () => {
+  return (
+    <div className="bg-light-doc-example">
+
+      <Card borderNone>{'Card content'}</Card>
+
+    </div>
+  )
+}
+
+export default CardBorderNone

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.md

@@ -0,0 +1 @@
+Remove card border <b>only</b> for dashboard cards.

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

@@ -9,6 +9,7 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border
   react:
   - card_light: Default
   - card_dark: Dark Cards
@@ -19,3 +20,4 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border

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

@@ -7,3 +7,4 @@ export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'
 export { default as CardSeparator } from './_card_separator.jsx'
 export { default as CardDark } from './_card_dark.jsx'
+export { default as CardBorderNone } from './_card_border_none.jsx'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -1,4 +1,5 @@
-<%= content_tag(:label, id: object.id,
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
                         data: object.data,
                         class: object.classname) do %>  
   <% if object.children %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -3,13 +3,18 @@
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import classnames from 'classnames'
 import { spacing } from '../utilities/spacing.js'
 
 type CheckboxProps = {
+  aria?: object,
   checked?: Boolean,
+  className?: String,
   dark?: Boolean,
+  data?: object,
   error?: Boolean,
+  id?: String,
   name: String,
   text: String,
   value: String,
@@ -19,9 +24,13 @@ type CheckboxProps = {
 
 const Checkbox = (props: CheckboxProps) => {
   const {
+    aria = {},
     checked = false,
+    className,
     dark = false,
+    data = {},
     error = false,
+    id,
     name = '',
     text = '',
     value = '',
@@ -29,13 +38,17 @@ const Checkbox = (props: CheckboxProps) => {
     onChange = () => {},
   } = props
 
+  const dataProps = buildDataProps(data)
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_checkbox_kit',
+    { dark: dark, checked: checked, error: error }), className, spacing(props))
+
   return (
     <label
-        className={classnames('pb_checkbox_kit' +
-        (dark === true ? '_dark' : '') +
-        (error === true ? ' error' : ''), spacing(props))
-
-      }
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <If condition={children}>
         {children}