playbook_ui 8.2.0.pre.alpha2 → 8.2.0.pre.alpha3

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx

@@ -4,25 +4,33 @@ import { AvatarActionButton } from '../../'
 const AvatarActionButtonPlacement = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
+        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
         name="Sophia Carden"
         placement="bottom_left"
         {...props}
     />
     <AvatarActionButton
+        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
         name="Sophia Carden"
         placement="bottom_right"
         {...props}
     />
     <AvatarActionButton
+        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
         name="Sophia Carden"
         placement="top_left"
         {...props}
     />
     <AvatarActionButton
+        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
         name="Sophia Carden"
         placement="top_right"
         {...props}

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb

@@ -1,8 +1,10 @@
 <div class="pb--doc-demo-row">
   
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
       link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       tooltip_text: "Tooltip Text",
       tooltip_id: "avatar_1",

data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import AvatarActionButton from './_avatar_action_button'
+
+const imageUrl = 'https://randomuser.me/api/portraits/women/8.jpg',
+  testId = 'scarden',
+  name = 'Sophia Carden',
+  imageAlt = 'Sophia Carden Profile'
+
+test('loads the given image url and name', () => {
+  render(
+    <AvatarActionButton
+        data={{ testid: testId }}
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        linkAriaLabel={name}
+        name={name}
+    />
+  )
+
+  const kit      = screen.getByTestId(testId)
+  const image    = screen.getByAltText(imageAlt)
+  const link     = kit.children[0]
+
+  expect(kit).toHaveClass('pb_avatar_action_button_kit_add_bottom_left_md')
+  expect(image).toHaveAttribute('data-src', imageUrl)
+  expect(image).toHaveAttribute('src', imageUrl)
+  expect(image).toHaveAttribute('alt', imageAlt)
+  expect(link).toHaveAttribute('aria-label', name)
+})

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

@@ -12,7 +12,7 @@ type CaptionProps = {
   data?: object,
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
-  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
 }
@@ -29,7 +29,8 @@ const Caption = (props: CaptionProps) => {
     text,
     variant = null,
   } = props
-  const Tag = `${tag}`
+  const tagOptions = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div', 'caption']
+  const Tag = tagOptions.includes(tag) ? tag : 'div'
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -7,7 +7,7 @@ module Playbook
                   values: %w[xs sm md base lg xl],
                   default: "md"
       prop :tag, type: Playbook::Props::Enum,
-                 values: %w[h1 h2 h3 h4 h5 h6 p span div],
+                 values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
                  default: "div"
       prop :text
       prop :variant, type: Playbook::Props::Enum,

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

@@ -3,14 +3,16 @@
 import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
+  aria?: object,
   borderNone?: boolean,
   borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
+  data?: object,
   highlight?: {
     position?: "side" | "top",
     color?: string,
@@ -18,6 +20,7 @@ type CardPropTypes = {
   padding?: string,
   selected?: boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
+  tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav",
 }
 
 type CardHeaderProps = {
@@ -62,13 +65,16 @@ const Body = (props: CardBodyProps) => {
 
 const Card = (props: CardPropTypes) => {
   const {
+    aria = {},
     borderNone = false,
     borderRadius = 'md',
     children,
     className,
+    data = {},
     highlight = {},
     selected = false,
     shadow = 'none',
+    tag = 'div',
     padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
@@ -78,6 +84,8 @@ const Card = (props: CardPropTypes) => {
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
 
   // coerce to array
   const cardChildren =
@@ -93,11 +101,18 @@ const Card = (props: CardPropTypes) => {
 
   const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
+  const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
+  const Tag = tagOptions.includes(tag) ? tag : 'div'
+
   return (
-    <div className={classnames(cardCss, globalProps(props, { padding }), className)}>
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(cardCss, globalProps(props, { padding }), className)}
+    >
       {subComponentTags('Header')}
       {nonHeaderChildren}
-    </div>
+    </Tag>
   )
 }
 

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag(:div,
+<%= content_tag(object.tag,
     id: object.id,
     data: object.data,
     class: object.classname,

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

@@ -9,6 +9,9 @@ module Playbook
                     default: "none"
       prop :highlight, type: Playbook::Props::Hash,
                        default: {}
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[div section footer header article aside main nav],
+                 default: "div"
       prop :border_none, type: Playbook::Props::Boolean,
                          default: false
       prop :border_radius, type: Playbook::Props::Enum,

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

@@ -0,0 +1,25 @@
+<%= pb_rails("card", props: { tag: "section" }) do %> section <% end %>
+
+<br />
+
+<%= pb_rails("card", props: { tag: "footer" }) do %> footer <% end %>
+
+<br />
+
+<%= pb_rails("card", props: { tag: "header" }) do %> header <% end %>
+
+<br />
+
+<%= pb_rails("card", props: { tag: "article" }) do %> article <% end %>
+
+<br />
+
+<%= pb_rails("card", props: { tag: "aside" }) do %> aside <% end %>
+
+<br />
+
+<%= pb_rails("card", props: { tag: "main" }) do %> main <% end %>
+
+<br />
+
+<%= pb_rails("card", props: { tag: "nav" }) do %> nav <% end %>

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

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Card } from '../../'
+
+const CardTag = (props) => {
+  return (
+    <div>
+      <Card
+          tag="section"
+          {...props}
+      >
+        {'section'}
+      </Card>
+      <br />
+      <Card
+          tag="footer"
+          {...props}
+      >
+        {'footer'}
+      </Card>
+      <br />
+      <Card
+          tag="header"
+          {...props}
+      >
+        {'header'}
+      </Card>
+      <br />
+      <Card
+          tag="article"
+          {...props}
+      >
+        {'article'}
+      </Card>
+      <br />
+      <Card
+          tag="aside"
+          {...props}
+      >
+        {'aside'}
+      </Card>
+      <br />
+      <Card
+          tag="main"
+          {...props}
+      >
+        {'main'}
+      </Card>
+      <br />
+      <Card
+          tag="nav"
+          {...props}
+      >
+        {'nav'}
+      </Card>
+    </div>
+  )
+}
+
+export default CardTag

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

@@ -4,6 +4,7 @@ examples:
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected
+  - card_tag: HTML Tag
   - card_padding: Padding Size
   - card_shadow: Shadow Size
   - card_content: Content Size
@@ -15,6 +16,7 @@ examples:
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected
+  - card_tag: HTML Tag
   - card_padding: Padding Size
   - card_shadow: Shadow Size
   - card_content: Content Size

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

@@ -2,6 +2,7 @@ export { default as CardLight } from './_card_light.jsx'
 export { default as CardHighlight } from './_card_highlight.jsx'
 export { default as CardHeader } from './_card_header.jsx'
 export { default as CardSelected } from './_card_selected.jsx'
+export { default as CardTag } from './_card_tag.jsx'
 export { default as CardPadding } from './_card_padding.jsx'
 export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -16,6 +16,7 @@ type CheckboxProps = {
   data?: object,
   error?: boolean,
   id?: string,
+  indeterminate?: boolean,
   name: string,
   onChange: (boolean) => void,
   tabIndex: number,
@@ -33,6 +34,7 @@ const Checkbox = (props: CheckboxProps) => {
     data = {},
     error = false,
     id,
+    indeterminate = false,
     name = '',
     onChange = () => {},
     tabIndex,
@@ -40,14 +42,21 @@ const Checkbox = (props: CheckboxProps) => {
     value = '',
   } = props
 
+  const checkRef = useRef()
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_checkbox_kit', { checked, error }),
+    buildCss('pb_checkbox_kit', { checked, error, indeterminate }),
     globalProps(props),
     className
   )
 
+  useEffect(() => {
+    if (checkRef.current) {
+      checkRef.current.indeterminate = indeterminate
+    }
+  }, [indeterminate])
+
   return (
     <label
         {...ariaProps}
@@ -62,19 +71,32 @@ const Checkbox = (props: CheckboxProps) => {
             defaultChecked={checked}
             name={name}
             onChange={onChange}
+            ref={checkRef}
             tabIndex={tabIndex}
             type="checkbox"
             value={value}
         />
       </If>
+      <If condition={!indeterminate}>
+        <span className="pb_checkbox_checkmark">
+          <Icon
+              className="check_icon"
+              fixedWidth
+              icon="check"
+          />
+        </span>
+      </If>
+
+      <If condition={indeterminate}>
+        <span className="pb_checkbox_indeterminate">
+          <Icon
+              className="indeterminate_icon"
+              fixedWidth
+              icon="minus"
+          />
+        </span>
+      </If>
 
-      <span className="pb_checkbox_checkmark">
-        <Icon
-            className="check_icon"
-            fixedWidth
-            icon="check"
-        />
-      </span>
       <Body
           className="pb_checkbox_label"
           dark={dark}

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

@@ -12,24 +12,31 @@ $transition: $transition_cubic;
     font-size: $text_lt_default;
     user-select: none;
   }
-  .pb_checkbox_checkmark {
-    position: relative;
-    height: 22px;
-    width: 22px;
+
+  .pb_checkbox_checkmark,
+  .pb_checkbox_indeterminate {
+    align-items: center;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
+    height: 22px;
+    position: relative;
     transition: background $transition_default ease, border-color $transition_default ease;
-    .check_icon {
-      opacity: 0;
-      position: relative;
-      top: -2px;
-      left: 1px;
-      height: 16px;
-      width:16px;
+    width: 22px;
+    .check_icon,
+    .indeterminate_icon {
       color: $white;
-
+      height: 16px;
+      left: 1px;
+      position: relative;
+      display: flex;
+      opacity: 0;
+      width: 16px;
+      &.hidden {
+        display: none;
+      }
     }
   }
+
   @media (hover:hover) {
     &:hover input ~ .pb_checkbox_checkmark {
       border-color: $primary_action;
@@ -37,29 +44,31 @@ $transition: $transition_cubic;
   }
 
   input {
-    position: relative;
-    opacity: 0;
     cursor: pointer;
+    display: flex;
     height: 0;
+    opacity: 0;
+    position: relative;
     width: 0;
     left: $offscreen;
     &:focus ~ .pb_checkbox_checkmark {
       border-color: $primary_action;
     }
-    &:checked ~ .pb_checkbox_checkmark {
+    &:checked ~ .pb_checkbox_checkmark,
+    & ~ .pb_checkbox_indeterminate {
       background-color: $primary_action;
       border-color: $primary_action;
     }
-    &:checked ~ .pb_checkbox_checkmark {
+    &:checked ~ .pb_checkbox_checkmark,
+    & ~ .pb_checkbox_indeterminate {
       display: inline-block;
-      .check_icon{
+      .check_icon,
+      .indeterminate_icon {
         opacity: $opacity_10;
       }
     }
   }
 
-
-
   &[class*=_dark] {
     input:checked ~ .pb_checkbox_checkmark {
       background-color: $primary_action;