playbook_ui 8.1.1 → 8.2.0.pre.alpha4

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;

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

@@ -3,9 +3,17 @@
                         data: object.data,
                         class: object.classname) do %>
   <%= content.presence || object.input %>
-  <span class="pb_checkbox_checkmark">
-    <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
-  </span>
+  <% if object.indeterminate %>
+    <span class="pb_checkbox_indeterminate">
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
+    </span>
+  <% else %>
+    <span class="pb_checkbox_checkmark">
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
+    </span>
+  <% end %>
   <span class="pb_checkbox_label">
     <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -5,6 +5,7 @@ module Playbook
     class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :value
       prop :name
@@ -21,7 +22,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_checkbox_kit", checked_class) + error_class
+        generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end
 
       def input
@@ -41,6 +42,10 @@ module Playbook
       def checked_class
         checked ? "on" : "off"
       end
+
+      def indeterminate_class
+        indeterminate ? " indeterminate" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -0,0 +1,94 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Checkbox from './_checkbox'
+
+const testId = 'checkbox1',
+  kitClass = 'pb_checkbox_kit'
+
+test('returns namespaced class name', () => {
+  render(
+    <Checkbox
+        data={{ testid: testId }}
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+
+test('returns dark class name', () => {
+  render(
+    <Checkbox
+        dark
+        data={{ testid: testId }}
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})
+
+test('returns indeterminate class name', () => {
+  render(
+    <Checkbox
+        data={{ testid: testId }}
+        indeterminate
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass}_indeterminate`)
+})
+
+test('has name attribute', () => {
+  render(
+    <Checkbox
+        data={{ testid: testId }}
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.getElementsByTagName('input')[0]).toHaveAttribute('name', 'checkbox-name')
+})
+
+test('has value attribute', () => {
+  render(
+    <Checkbox
+        data={{ testid: testId }}
+        name="checkbox-name"
+        text="Checkbox"
+        value="checkbox value"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.getElementsByTagName('input')[0]).toHaveAttribute('value', 'checkbox value')
+})
+
+test('has checked attribute', () => {
+  render(
+    <Checkbox
+        checked
+        data={{ testid: testId }}
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.getElementsByTagName('input')[0]).toHaveAttribute('checked')
+})

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx

@@ -24,7 +24,6 @@ const CheckboxCustom = (props) => {
               onChange={handleOnChange}
               type="checkbox"
               value="custom-value"
-              {...props}
           />
         </Checkbox>
       </div>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("checkbox" , props: {
+  text: "Select ",
+  value: "checkbox-value",
+  name: "main",
+  indeterminate: true,
+  id: "test-indeterminate-js"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Checkbox } from '../..'
+
+const CheckboxIndeterminate = (props) => {
+  return (
+    <Checkbox
+        indeterminate
+        name="checkbox-name"
+        text="Indeterminate State"
+        value="check-box value"
+        {...props}
+    />
+  )
+}
+
+export default CheckboxIndeterminate

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

@@ -5,9 +5,11 @@ examples:
     - checkbox_custom: Custom Checkbox
     - checkbox_error: Default w/ Error
     - checkbox_options: Checkbox w/ Options
+    - checkbox_indeterminate: Indeterminate Checkbox
 
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
+  - checkbox_indeterminate: Indeterminate Checkbox