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

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

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDialog
+    class Dialog
+      include Playbook::Props
+
+      partial "pb_dialog/dialog"
+
+      prop :ref
+      prop :cancel_button
+      prop :closeable, type: Playbook::Props::Boolean, default: true
+      prop :confirm_button
+      prop :oncancel
+      prop :onchange
+      prop :onclose
+      prop :onconfirm
+      prop :opened, type: Playbook::Props::Boolean, default: false
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md lg content],
+                  default: "md"
+      prop :text
+      prop :title
+      prop :trigger
+
+      def dialog_options
+        {
+          id: id,
+          ref: ref,
+          trigger: trigger,
+          className: classname,
+          cancelButton: cancel_button,
+          closeable: closeable,
+          confirmButton: confirm_button,
+          onCancel: oncancel,
+          onChange: onchange,
+          onClose: onclose,
+          onConfirm: onconfirm,
+          opened: opened,
+          size: size,
+          text: text,
+          title: title,
+        }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import { Dialog } from '../'
+
+/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  const testId = 'test1'
+
+  render(
+    <Dialog
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+    module PbDialog
+      class DialogHeader
+        include Playbook::Props
+  
+        partial "pb_dialog/child_kits/dialog_header"
+
+        prop :closeable, type: Playbook::Props::Boolean, default: true
+        prop :padding 
+        prop :separator, type: Playbook::Props::Boolean, default: true
+        prop :spacing
+        prop :text
+        prop :title
+  
+        def dialog_header_options
+          {
+            id: id,
+            closeable: closeable,
+            padding: padding,
+            separator: separator,
+            spacing: spacing,
+            text: text,
+            title: title,
+          }
+        end
+      end
+    end
+  end
+  

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  RichTextEditor,
+  Typeahead,
+} from '../../'
+
+const DialogCompound = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+
+  return (
+    <>
+      <Button onClick={open}>{'Open a Complex Dialog'}</Button>
+      <Dialog
+          onClose={close}
+          opened={isOpen}
+          size="lg"
+      >
+        <Dialog.Header>
+          <Body>{'What do you need us to take care of?'}</Body>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Caption marginBottom="xs">{'Description'}</Caption>
+          <RichTextEditor />
+          <br />
+          <Caption>
+            {
+              'Type in a word or term too help find tickets later. ex. training,'
+            }
+            {'phone setup, hr'}
+          </Caption>
+          <Typeahead placeholder="Tags.." />
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Button onClick={close}>{'Send My Issue'}</Button>
+          <Button
+              onClick={close}
+              variant="link"
+          >
+            {'Back'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  )
+}
+
+export default DialogCompound

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md

@@ -0,0 +1,2 @@
+The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
+This allows for greater flexibility and more complex dialogs.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import { Button, Dialog } from '../../'
+
+const DialogDefault = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Dialog
+          cancelButton="Cancel"
+          confirmButton="Okay"
+          onCancel={close}
+          onClose={close}
+          onConfirm={close}
+          opened={isOpen}
+          size="sm"
+          text="Hello Body Text, Nice to meet ya."
+          title="Header Title is the Title Prop"
+      />
+    </>
+  )
+}
+
+export default DialogDefault