playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import DateTimeStacked from '../_date_time_stacked'
+
+const DateTimeStackedDefault = (props) => (
+  <div>
+    <DateTimeStacked
+        datetime={new Date()}
+        {...props}
+    />
+    <br />
+    <DateTimeStacked
+        datetime={new Date(2018, 2, 20)}
+        {...props}
+    />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        timeZone="Asia/Tokyo"
+        {...props}
+    />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        timeZone="America/Denver"
+        {...props}
+    />
+
+  </div>
+)
+
+export default DateTimeStackedDefault

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

@@ -0,0 +1,7 @@
+examples:
+
+  rails:
+  - date_time_stacked_default: Default
+
+  react:
+  - date_time_stacked_default: Default

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

@@ -0,0 +1 @@
+export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails "date_year_stacked", props: { date: Date.today } %>
+<br><br>
+<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'center'} %>
+<br><br>
+<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'right'} %>

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { DateYearStacked } from '../../'
+
+const DateYearStackedDefault = (props) => {
+  return (
+    <div>
+      <DateYearStacked date={new Date()} />
+      <DateYearStacked
+          align="center"
+          date={new Date()}
+          {...props}
+      />
+      <DateYearStacked
+          align="right"
+          date={new Date()}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DateYearStackedDefault

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.md

@@ -0,0 +1 @@
+Use this kits on table displays or column headers to display a single date format.

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_description.md

@@ -0,0 +1 @@
+This kit is a simple option for displaying dates in a month, day and the year format.

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md

@@ -0,0 +1,4 @@
+### Things to Avoid
+• Avoid using this to display dashboard data which can get lost when used in large format.
+
+• Avoid using it as a date range display, instead use the date range kit.

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

@@ -0,0 +1,7 @@
+examples:
+
+  rails:
+  - date_year_stacked_default: Default
+
+  react:
+  - date_year_stacked_default: Default

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

@@ -0,0 +1 @@
+export { default as DateYearStackedDefault } from './_date_year_stacked_default.jsx'

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps'
+
+type DialogBodyProps = {
+  children: React.ReactNode | React.ReactNode[] | string,
+  padding?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
+  className?: string
+} 
+
+// 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.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildCss } from '../../utilities/props'
+import { GlobalProps, globalProps } from '../../utilities/globalProps'
+
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+
+type DialogFooterProps = {
+  aria?: {[key: string]: string},
+  children: React.ReactChild[] | React.ReactChild | string,
+  className?: string,
+  data?: {[key: string]: string},
+  id?: string,
+  padding?: string,
+  paddingBottom?: string,
+  paddingX?: string,
+  separator?: boolean,
+  spacing?: "none" | "between" | "around" | "evenly",
+} & GlobalProps
+
+// Footer component
+const DialogFooter = (props: DialogFooterProps) => {
+  const {
+    children,
+    padding = "sm",
+    paddingBottom = "sm",
+    paddingX = "sm",
+    className,
+    spacing = "between",
+    separator = false,
+  } = props
+
+  const footerCSS = buildCss("dialog_footer")
+  const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
+
+  return (
+    <>
+      {separator &&
+        <SectionSeparator />
+      }
+      <div className="dialog-pseudo-footer">
+      </div>
+      <Flex
+          className={classnames(footerCSS, footerSpacing, className)}
+          spacing={spacing}
+      >
+        {children}
+      </Flex>
+    </>
+  )
+}
+
+export default DialogFooter

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

@@ -0,0 +1,68 @@
+import React, { useContext } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
+
+import { CloseIcon } from '../_close_icon'
+import { DialogContext } from '../_dialog_context'
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+type DialogHeaderProps = {
+  aria?: {[key: string]: string},
+  children: React.ReactNode[] | React.ReactNode | string,
+  className?: string,
+  closeable?: boolean,
+  data?: object,
+  id?: string,
+  padding?: string,
+  separator?: boolean,
+  spacing?: "none" | "between" | "around" | "evenly",
+  text?: string,
+  title?: string,
+} & GlobalProps
+
+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 (
+    <div className="dialog_sticky_header">
+      <Flex
+          {...ariaProps}
+          {...dataProps}
+          className={classnames(headerCSS, headerSpacing, className)}
+          spacing={spacing}
+      >
+        {children}
+        {closeable &&
+          <CloseIcon
+            onClose={api.onClose}
+          />
+        }
+        
+      </Flex>
+      {separator &&
+        <SectionSeparator />
+      }
+    </div>
+  )
+}
+
+export default DialogHeader

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -0,0 +1,15 @@
+<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
+
+<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
+        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
+<% end %>

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

@@ -0,0 +1,54 @@
+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
+          fullHeight
+          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,4 @@
+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.
+
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-1", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    text: "Hello Body Text, Nice to meet ya.", 
+    cancel_button: "Cancel Button", 
+    confirm_button: "Okay", 
+    confirm_button_id: "confirm-button-1"
+}) %>

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

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

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

@@ -0,0 +1,3 @@
+For the Rails version of the dialog kit, the clickable element being used to open the dialog must be given a `open-dialog` data attribute with a value that is the same as the id being given to the dialog itself. See code example below to see this in action.
+
+Additionally, both the cancel button and the confirm button have optional id props which can be used to pass in a custom id to allow developers to target that button with custom javascript if needed (`confirm_button_id` and `cancel_button_id`).

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb

@@ -0,0 +1,58 @@
+<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-fullheight-sm"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-fullheight-md"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-fullheight-lg"}, margin_right: "md" }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-sm", 
+    size: "sm", 
+    full_height: true,
+   }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-sm" } ) do %>
+        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-sm"}) %>
+<% end %>
+
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-md", 
+    size: "md",
+    full_height: true,
+     }) do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-md" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+    
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-md"}) %>
+<% end %>
+     
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-lg", 
+    size: "lg",
+    full_height: true,
+     }) do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-lg" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+    
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-lg"}) %>
+<% end %>

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

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "../..";
+
+const useDialog = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+
+  return [opened, toggle];
+};
+
+const DialogFullHeight = () => {
+  const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
+    useDialog();
+  const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
+    useDialog();
+  const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();
+
+  const dialogs = [
+    {
+      size: "sm",
+      title: "Small Dialog",
+      toggle: toggleHeaderSeparatorDialog,
+      visible: headerSeparatorDialogOpened,
+    },
+    {
+      size: "md",
+      title: "Medium Dialog",
+      toggle: toggleFooterSeparatorDialog,
+      visible: footerSeparatorDialogOpened,
+    },
+    {
+      size: "lg",
+      title: "Large Dialog",
+      toggle: toggleBothSeparatorsDialog,
+      visible: bothSeparatorsDialogOpened,
+    },
+  ];
+
+  return (
+    <>
+      <Flex wrap>
+        <Button id="sm"
+            marginRight="md"
+            onClick={toggleHeaderSeparatorDialog}>
+          {"Small Dialog"}
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleFooterSeparatorDialog}>
+          {"Medium Dialog"}
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBothSeparatorsDialog}>
+          {"Large Dialog"}
+        </Button>
+      </Flex>
+      <Flex>
+        {dialogs.map(({toggle, visible, placement, size, title}, index) => (
+          <Dialog
+              fullHeight
+              key={index}
+              onClose={toggle}
+              opened={visible}
+              placement={placement}
+              size={size}
+          >
+            <Dialog.Header>
+              <Body>{title}</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={toggle}>{"Send My Issue"}</Button>
+              <Button onClick={toggle}
+                  variant="link">
+                {"Back"}
+              </Button>
+            </Dialog.Footer>
+          </Dialog>
+        ))}
+      </Flex>
+    </>
+  );
+};
+
+export default DialogFullHeight;

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

@@ -0,0 +1 @@
+To render a full height Dialog, use the `fullHeight` (react) or `full_height` (rails) prop. A full height Dialog can be size small, medium, or large. By default it will be center aligned. 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb

@@ -0,0 +1,58 @@
+<%= pb_rails("button", props: { text: "Left Dialog", data:{"open-dialog": "dialog-fullheight-left"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Center Dialog", data:{"open-dialog": "dialog-fullheight-center"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Right Dialog", data:{"open-dialog": "dialog-fullheight-right"}, margin_right: "md" }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-left", 
+    size: "md", 
+    full_height: true,
+    placement: "left",
+   }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-left" } ) do %>
+        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-left"}) %>
+<% end %>
+
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-center", 
+    size: "md",
+    full_height: true,
+    placement: "center",
+     })  do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-center" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-center"}) %>   
+<% end %>
+     
+<%= pb_rails("dialog", props: { 
+    id:"dialog-fullheight-right", 
+    size: "md",
+    full_height: true,
+    placement: "right",
+     }) do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-right" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-right"}) %>    
+    <% end %>