playbook_ui 8.2.0.pre.alpha1 → 8.2.1.pre.alpha1

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

@@ -4,7 +4,9 @@ import { AvatarActionButton } from '../../'
 const AvatarActionButtonOnClick = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
+        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Alert Sophia Carden"
         linkUrl="https://www.google.com"
         name="Sophia Carden"
         onClick={() => alert('clicked!')}

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

@@ -1,9 +1,11 @@
 <div class="pb--doc-demo-row">
   
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Alert Sophia Carden",
       name: "Sophia Carden",
       id: "clickable",
       link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
   }) %>
 

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

@@ -1,25 +1,33 @@
 <div class="pb--doc-demo-row">
   
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "bottom_left"
   }) %>
 
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "bottom_right"
   }) %>
 
     <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "top_left"
   }) %>
 
     <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "top_right"
   }) %>

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

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { Icon } from '../'
 
 import {
   buildAriaProps,
@@ -13,8 +14,15 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
+  closeProps?: {
+    onClick?: EventHandler,
+    onMouseDown?: EventHandler,
+    onTouchEnd?: EventHandler,
+  },
   data?: object,
   id?: string,
+  removeIcon?: Boolean,
+  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -23,8 +31,11 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
+    closeProps = {},
     data = {},
     id,
+    removeIcon = false,
+    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -44,7 +55,21 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>{text}</span>
+      <span>
+        <If condition={removeIcon}>
+          <span
+              onClick={removeOnClick}
+              style={{ cursor: 'pointer' }}
+              {...closeProps}
+          >
+            <Icon
+                fixedWidth
+                icon="times"
+            />
+          </span>
+        </If>
+        {text}
+      </span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
@@ -13,6 +14,7 @@ type ButtonPropTypes = {
   },
   children?: array<React.ReactChild>,
   className?: string | array<string>,
+  data?: object,
   disabled?: boolean,
   fixedWidth?: boolean,
   fullWidth?: boolean,
@@ -69,6 +71,7 @@ const Button = (props: ButtonPropTypes) => {
   const {
     children,
     className,
+    data = {},
     disabled,
     icon = null,
     id,
@@ -82,6 +85,7 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
+  const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
     globalProps(props),
@@ -111,6 +115,7 @@ const Button = (props: ButtonPropTypes) => {
     <If condition={link !== null}>
       <a
           {...buttonAria}
+          {...dataProps}
           className={css}
           href={link}
           id={id}
@@ -122,6 +127,7 @@ const Button = (props: ButtonPropTypes) => {
       <Else />
       <button
           {...buttonAria}
+          {...dataProps}
           className={css}
           disabled={disabled}
           id={id}

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -0,0 +1,91 @@
+
+import React from 'react'
+import { appendAlert, fireEvent, render, screen, waitFor } from '../utilities/test-utils'
+
+import Button from './_button'
+
+// Primary Test Variables
+const htmlType = 'submit',
+  text = 'Button Text',
+  value = '1234'
+
+test('passes type, text, and value props to button', () => {
+  render(
+    <>
+      <Button
+          data={{ testid: 'primary-test' }}
+          htmlType={htmlType}
+          text={text}
+          value={value}
+      />
+    </>
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  const content  = screen.getByText(text)
+
+  expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled')
+  expect(kit).toHaveAttribute('type', htmlType)
+  expect(kit).toHaveAttribute('value', value)
+  expect(content).toHaveTextContent(text)
+})
+
+// Link Test Variables
+const link = 'https://www.google.com'
+
+test('adds link to button', () => {
+  render(
+    <Button
+        data={{ testid: 'link-test' }}
+        link={link}
+    />
+  )
+
+  const kit = screen.getByTestId('link-test')
+
+  expect(kit).toHaveAttribute('href', link)
+})
+
+test('button with secondary variant', () => {
+  render(
+    <Button
+        data={{ testid: 'variant-test' }}
+        variant="secondary"
+    />
+  )
+
+  const kit = screen.getByTestId('variant-test')
+
+  expect(kit).toHaveClass('pb_button_kit_secondary_inline_enabled')
+  expect(kit).toHaveAttribute('type', 'button')
+})
+
+test('disable prop', () => {
+  render(
+    <Button
+        data={{ testid: 'disable-test' }}
+        disabled
+    />
+  )
+
+  const kit = screen.getByTestId('disable-test')
+
+  expect(kit).toBeDisabled()
+})
+
+test('click event', async () => {
+  render(
+    <Button
+        data={{ testid: 'click-test' }}
+        onClick={() => appendAlert('clicked button!')}
+    />
+  )
+
+  const kit = screen.getByTestId('click-test')
+
+  fireEvent.click(kit)
+
+  await waitFor(() => screen.getByText('clicked button!'))
+
+  expect(screen.getByText('clicked button!')).toBeInTheDocument()
+})

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

@@ -30,7 +30,6 @@ const ButtonDefault = (props) => (
         {...props}
     />
   </div>
-
 )
 
 export default ButtonDefault

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { Button, ButtonToolbar } from '../'
+
+test('default test', () => {
+  render(
+    <ButtonToolbar
+        data={{ testid: 'default-test' }}
+    >
+      <Button
+          data={{ testid: 'child-button' }}
+          text="Test"
+      />
+    </ButtonToolbar>
+  )
+
+  const kit   = screen.getByTestId('default-test')
+  const child = screen.getByTestId('child-button')
+
+  expect(kit).toHaveClass('pb_button_toolbar_kit_horizontal_primary')
+  expect(kit).toContainElement(child)
+  expect(child).toHaveClass('pb_button_kit_primary_inline_enabled')
+})
+
+test('variant and orientation props', () => {
+  render(
+    <ButtonToolbar
+        data={{ testid: 'second-test' }}
+        orientation="vertical"
+        variant="secondary"
+    >
+      <Button
+          data={{ testid: 'child-button' }}
+          text="Create"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+  )
+
+  const kit   = screen.getByTestId('second-test')
+  const child = screen.getByTestId('child-button')
+
+  expect(kit).toHaveClass('pb_button_toolbar_kit_vertical_secondary')
+  expect(child).toHaveClass('pb_button_kit_secondary_inline_enabled')
+})

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>
   )
 }