playbook_ui 8.2.0.pre.alpha2 → 8.2.1.pre.alpha2

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

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

@@ -2,3 +2,4 @@ export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
+export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -25,6 +25,8 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
+  inputOnChange?: (String) => void,
+  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -55,6 +57,8 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
+    inputOnChange,
+    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -114,7 +118,6 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
-      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -126,7 +129,9 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
+            onChange={inputOnChange}
             placeholder={placeholder}
+            value={inputValue}
         />
         <If condition={!hideIcon}>
           <div

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -166,6 +166,9 @@ const datePickerHelper = (config) => {
     picker.input.style.caretColor = 'transparent'
     picker.input.style.cursor = 'pointer'
   }
+
+  // Fix event bubbling bug on wrapper
+  picker.querySelector('.flatpickr-wrapper').addEventListener('click', (e) => e.stopPropogation())
 }
 
 export default datePickerHelper

data/app/pb_kits/playbook/pb_dialog/_close_icon.jsx

@@ -0,0 +1,23 @@
+/* @flow */
+
+import React from 'react'
+import { Icon } from '../'
+
+type CloseIconProps = {
+  onClose: () => mixed,
+}
+
+export const CloseIcon = (props: CloseIconProps) => {
+  const { onClose } = props
+  return (
+    <div
+        className="pb_dialog_close_icon"
+        onClick={onClose}
+    >
+      <Icon
+          fixedWidth
+          icon="times"
+      />
+    </div>
+  )
+}

data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    dark: object.dark) do %>
+  <% if object.children %>
+    <%= pb_rails("dialog/dialog_header", props: { children: object.children }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/_dialog.jsx

@@ -0,0 +1,142 @@
+/* @flow */
+
+import React, { useState } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import Modal from 'react-modal'
+import { Button } from '../'
+import DialogHeader  from './child_kits/_dialog_header'
+import DialogFooter from './child_kits/_dialog_footer'
+import DialogBody from './child_kits/_dialog_body'
+import { DialogContext } from './_dialog_context'
+
+type DialogProps = {
+  aria?: object,
+  cancelButton?: string,
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  closeable: boolean,
+  confirmButton?: string,
+  data?: object,
+  id?: string,
+  onCancel?: () => void,
+  onChange?: () => void,
+  onClose?: () => void,
+  onConfirm?: () => void,
+  opened: boolean,
+  shouldCloseOnOverlayClick: boolean,
+  size?: "sm" | "md" | "lg" | "content",
+  text?: string,
+  title?: string,
+  trigger?: string
+}
+
+const Dialog = (props: DialogProps) => {
+  const {
+    aria = {},
+    cancelButton,
+    confirmButton,
+    className,
+    data = {},
+    id,
+    size = 'md',
+    children,
+    opened,
+    onCancel = () => {},
+    onConfirm = () => {},
+    onClose = () => {},
+    shouldCloseOnOverlayClick = true,
+    text,
+    title,
+    trigger,
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const dialogClassNames = {
+    base: classnames('pb_dialog', buildCss('pb_dialog', size)),
+    afterOpen: 'pb_dialog_after_open',
+    beforeClose: 'pb_dialog_before_close',
+  }
+
+  const overlayClassNames = {
+    base: 'pb_dialog_overlay',
+    afterOpen: 'pb_dialog_overlay_after_open',
+    beforeClose: 'pb_dialog_overlay_before_close',
+  }
+
+  const classes = classnames(
+    buildCss('pb_dialog_wrapper'),
+    globalProps(props),
+    className
+  )
+
+  const api = {
+    onClose: trigger ? function(){
+      setTriggerOpened(false)
+    } : onClose,
+  }
+
+  const [triggerOpened, setTriggerOpened] = useState(false),
+    modalIsOpened = trigger ? triggerOpened : opened
+
+  if (trigger) {
+    const modalTrigger = document.querySelector(trigger)
+    modalTrigger.addEventListener('click', () => {
+      setTriggerOpened(true)
+      document.querySelector('#cancel-button').addEventListener('click', () => {
+        setTriggerOpened(false)
+      })
+    }, { once: true })
+  }
+
+  return (
+    <DialogContext.Provider value={api}>
+      <div
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+          id={id}
+      >
+        <Modal
+            ariaHideApp={false}
+            className={dialogClassNames}
+            closeTimeoutMS={200}
+            contentLabel="Minimal Modal Example"
+            isOpen={modalIsOpened}
+            onRequestClose={onClose}
+            overlayClassName={overlayClassNames}
+            shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+        >
+          <If condition={title}>
+            <Dialog.Header>{title}</Dialog.Header>
+          </If>
+          <If condition={text}>
+            <Dialog.Body>{text}</Dialog.Body>
+          </If>
+
+          <If condition={cancelButton && confirmButton}>
+            <Dialog.Footer>
+              <Button onClick={onConfirm}>{confirmButton}</Button>
+              <Button
+                  id="cancel-button"
+                  onClick={onCancel}
+                  variant="link"
+              >
+                {cancelButton}
+              </Button>
+            </Dialog.Footer>
+          </If>
+
+          {children}
+        </Modal>
+      </div>
+    </DialogContext.Provider>
+  )
+}
+Dialog.Header = DialogHeader
+Dialog.Body = DialogBody
+Dialog.Footer = DialogFooter
+
+export default Dialog