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

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_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

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

@@ -0,0 +1,133 @@
+@import "../tokens/positioning";
+@import "../tokens/colors";
+@import "../pb_card/card_mixin";
+@import "../tokens/shadows";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/animation-curves";
+
+
+
+// Dialog Animations 
+
+@keyframes modalFadeIn {
+	from {
+		transform: translate3d(0, -100%, 0);
+		opacity: 0;
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes modalFadeOut {
+	from {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	to {
+		transform: translate3d(0, -50%, 0);
+		opacity: 0;
+	}
+}
+
+@keyframes overlayFade {
+	from {
+		opacity: 0;
+		transform: translateY(0);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes overlayFadeOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+// Dialog Styles
+
+.pb_dialog {
+
+	// Local Variables
+	$gutter: $space_lg;
+	$small: 300px;
+	$medium: 500px;
+	$large: 800px;
+	$animation-duration: 0.2s;
+	$z-index: 100;
+	$opacity_visible: 1;
+	$opacity_hidden: 0;
+
+	@include pb_card;
+	box-shadow: $shadow_deepest;
+	border: 0;
+	max-height: calc(100vh - #{$gutter * 2});
+	max-width: calc(100vw - #{$gutter * 2});
+	overflow: scroll;
+	animation-name: modalFadeIn;
+	animation-duration: $animation-duration;
+	outline: none;
+	animation-timing-function: $easeInOutQuint;
+
+	&[class*="_sm"] {
+		width: $small;
+	}
+
+	&[class*="_md"] {
+		width: $medium;
+	}
+
+	&[class*="_lg"] {
+		width: $large;
+	}
+
+	&_body_open {
+		overflow: hidden;
+	}
+
+	&_after_open {
+		opacity: $opacity_visible;
+	}
+
+	&_before_close {
+		animation-name: modalFadeOut;
+		animation-duration: $animation-duration;
+		opacity: $opacity_hidden;
+	}
+
+	&_close_icon {
+		cursor: pointer;
+	}
+
+	&_overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba($bg_dark, $opacity_4);
+		z-index: $z-index;
+		animation-name: overlayFade;
+		animation-duration: $animation-duration;
+
+		&_after_open {
+			opacity: $opacity_visible;
+		}
+		&_before_close {
+			animation-name: overlayFadeOut;
+			animation-duration: $animation-duration;
+			opacity: $opacity_hidden;
+		}
+	}
+}