playbook_ui 8.1.0 → 8.2.0.pre.alpha3

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_circle_icon_button/circle_icon_button.test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import CircleIconButton from './_circle_icon_button'
+
+test('default test', () => {
+  render(
+    <CircleIconButton
+        data={{ testid: 'default-test' }}
+        icon="plus"
+    />
+  )
+
+  const kit = screen.getByTestId('default-test')
+
+  expect(kit).toHaveClass('pb_circle_icon_button_kit')
+})

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/_colors.scss'
-import typography from '../tokens/_typography.scss'
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 const dataColors = [
   colors.data_1,

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/_colors.scss'
-import typography from '../tokens/_typography.scss'
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 import Highcharts from 'highcharts'
 

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;
+		}
+	}
+}

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

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const DialogContext = React.createContext()

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx

@@ -0,0 +1,21 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps.js'
+
+// Body component
+const DialogBody = (props: DialogBodyProps) => {
+  const { children, padding = 'sm', className } = props
+  const bodyCSS = buildCss('dialog_body')
+  const bodySpacing = globalProps(props, { padding })
+
+  return (
+    <div className={classnames(bodyCSS, bodySpacing, className)}>
+      {children}
+    </div>
+  )
+}
+
+export default DialogBody

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx

@@ -0,0 +1,36 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps.js'
+import { Flex, SectionSeparator } from '../../'
+
+// Footer component
+const DialogFooter = (props: DialogFooterProps) => {
+  const {
+    children,
+    padding = 'sm',
+    className,
+    spacing = 'between',
+    separator = false,
+  } = props
+  const footerCSS = buildCss('dialog_footer')
+  const footerSpacing = globalProps(props, { padding })
+
+  return (
+    <>
+      <If condition={separator}>
+        <SectionSeparator />
+      </If>
+      <Flex
+          className={classnames(footerCSS, footerSpacing, className)}
+          spacing={spacing}
+      >
+        {children}
+      </Flex>
+    </>
+  )
+}
+
+export default DialogFooter

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx

@@ -0,0 +1,68 @@
+/* @flow */
+
+import React, { useContext } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps.js'
+import { Flex, SectionSeparator } from '../../'
+import { CloseIcon } from '../_close_icon'
+import { DialogContext } from '../_dialog_context'
+
+type DialogHeaderProps = {
+  aria?: object,
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  closeable: boolean,
+  data?: object,
+  id?: string,
+  padding?: string,
+  separator: boolean,
+  spacing?: string,
+  text?: string,
+  title?: string,
+}
+
+const DialogHeader = (props: DialogHeaderProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    padding = 'sm',
+    spacing = 'between',
+    closeable = true,
+    separator = true,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const api = useContext(DialogContext)
+  const headerCSS = buildCss('dialog_header')
+  const headerSpacing = globalProps(props, { padding })
+
+  /* eslint-disable react/jsx-handler-names */
+
+  return (
+    <>
+      <Flex
+          {...ariaProps}
+          {...dataProps}
+          className={classnames(headerCSS, headerSpacing, className)}
+          spacing={spacing}
+      >
+        {children}
+        <If condition={closeable}>
+          <CloseIcon
+              className="close-icon"
+              onClose={api.onClose}
+          />
+        </If>
+      </Flex>
+      <If condition={separator}>
+        <SectionSeparator />
+      </If>
+    </>
+  )
+}
+
+export default DialogHeader