playbook_ui 11.0.0.pre.alpha.2 → 11.0.0

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

@@ -0,0 +1,153 @@
+/* eslint-disable react/jsx-handler-names */
+
+import React, { useState } from "react"
+import { Button, Dialog, Flex, FlexItem, SectionSeparator } from "../.."
+
+const useDialog = (visible = false) => {
+  const [opened, setOpened] = useState(visible)
+  const toggle = () => setOpened(!opened)
+  return [opened, toggle]
+}
+
+const DialogStackedAlert = () => {
+  const [singleButtonOpen, toggleSingleButtonOpen] = useDialog()
+  const [stackedButtonOpen, toggleStackedButtonOpen] = useDialog()
+  const [singleLinkButtonOpen, toggleSingleLinkButtonOpen] = useDialog()
+  const [twoLinkButtonOpen, toggleTwoLinkButtonOpen] = useDialog()
+
+
+  const dialogs = [
+    {
+      status: "info",
+      text: "Text explaining why there is an alert",
+      title: "Are you sure?",
+      toggle: toggleSingleButtonOpen,
+      visible: singleButtonOpen,
+      confirmedButton:"Ok, Thanks",
+    },
+    {
+      status: "error",
+      text: "Text explaining the error",
+      title: "Error Message",
+      confirmedButton:"Yes, Action",
+      cancelledButton: "Ok, Cancel",
+      toggle: toggleStackedButtonOpen,
+      visible: stackedButtonOpen,
+    },
+    {
+      status: "caution",
+      text: "This is the action you will be taking",
+      title: "Are you sure?",
+      toggle: toggleSingleLinkButtonOpen,
+      visible: singleLinkButtonOpen,
+      linkConfirmedButton:"Ok, Thanks!"
+    },
+    {
+      status: "success",
+      text: "Text explaining what is successful",
+      title: "Success",
+      toggle: toggleTwoLinkButtonOpen,
+      visible: twoLinkButtonOpen,
+      linkConfirmedButton:"Ok",
+      linkCancelledButton: "Cancel"
+    }
+  ]
+
+  return (
+    <div>
+    <Flex>
+      <Button
+          marginX="md"
+          onClick={toggleSingleButtonOpen}
+      >
+        {"1 Button Information Status"}
+      </Button>
+      <Button
+          marginX="md"
+          onClick={toggleStackedButtonOpen}
+      >
+        {"2 Button Error Status"}
+      </Button>
+      <Button
+          marginX="md"
+          onClick={toggleSingleLinkButtonOpen}
+      >
+        {"1 Link Button Caution"}
+      </Button>
+      <Button
+          marginX="md"
+          onClick={toggleTwoLinkButtonOpen}
+      >
+        {"2 Link Button Success"}
+      </Button>
+    </Flex>
+    <Flex>
+      {dialogs.map((dialog) => (
+        <Dialog
+            alertStyle={dialog.alertStyle}
+            key={dialog.status}
+            onClose={dialog.toggle}
+            opened={dialog.visible}
+            size="sm"
+            status={dialog.status}
+            text={dialog.text}
+            title={dialog.title}
+        >
+        <If condition={dialog.cancelledButton || dialog.confirmedButton}>
+          <Dialog.Footer>
+            <Button
+                fullWidth
+                onClick={dialog.toggle}
+            >
+              {dialog.confirmedButton}
+            </Button>
+          </Dialog.Footer>
+          <If condition={dialog.cancelledButton}>
+            <Dialog.Footer paddingTop="none">
+              <Button
+                  fullWidth
+                  onClick={dialog.toggle}
+                  variant="secondary"
+              >
+                {dialog.cancelledButton}
+              </Button>
+            </Dialog.Footer>
+          </If>
+          </If>
+          <If condition={dialog.linkCancelledButton || dialog.linkConfirmedButton} >
+            <SectionSeparator />
+            <Flex
+                inline="flex-container"
+                vertical="stretch"
+            >
+              <FlexItem flex={1} >
+                <Button
+                    fullWidth
+                    onClick={dialog.toggle}
+                    variant="link"
+                >
+                  {dialog.linkConfirmedButton}
+                </Button>
+              </FlexItem>
+              <If condition={dialog.linkCancelledButton}>
+                <SectionSeparator orientation="vertical"/>
+                <FlexItem flex={1}>
+                  <Button
+                      fullWidth
+                      onClick={dialog.toggle}
+                      variant="link"
+                  >
+                    {dialog.linkCancelledButton}
+                  </Button>
+                </FlexItem>
+              </If>
+            </Flex>
+          </If>
+        </Dialog>
+      ))}
+    </Flex>
+  </div>
+  )
+}
+
+export default DialogStackedAlert

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

@@ -0,0 +1 @@
+This is designed to show you how the buttons can stack with different alert styles. It also has a link style for the buttons for the mobile views.

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

@@ -0,0 +1,130 @@
+/* eslint-disable react/jsx-handler-names */
+/* @flow */
+
+import React, { useState } from "react"
+import { Button, Dialog, Flex } from "../.."
+
+const useDialog = (visible = false) => {
+  const [opened, setOpened] = useState(visible)
+  const toggle = () => setOpened(!opened)
+  return [opened, toggle]
+
+}
+
+const DialogStatus = () => {
+  const [infoAlertOpened, toggleInfoAlert] = useDialog()
+  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
+  const [successAlertOpened, toggleSuccessAlert] = useDialog()
+  const [errorAlertOpened, toggleErrorAlert] = useDialog()
+  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
+
+  const dialogs = [
+    {
+      status: "info",
+      text: "Text explaining why there is an alert",
+      title: "Are you Sure?",
+      toggle: toggleInfoAlert,
+      visible: infoAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Yes, Action"
+    },
+    {
+      status: "caution",
+      text: "This is the action you will be taking",
+      title: "Are you Sure?",
+      toggle: toggleCautionAlert,
+      visible: cautionAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Yes, Action"
+    },
+    {
+      status: "delete",
+      text: "You are about to delete ...",
+      title: "Delete",
+      toggle: toggleDeleteAlert,
+      visible: deleteAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Yes, Delete"
+    },
+    {
+      status: "error",
+      text: "Text explaining the error",
+      title: "Error Message",
+      toggle: toggleErrorAlert,
+      visible: errorAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Ok, Thanks"
+    },
+    {
+      status: "success",
+      text: "Text explaining what is successful",
+      title: "Success!",
+      toggle: toggleSuccessAlert,
+      visible: successAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Ok, Thanks"
+    },
+  ]
+
+  return (
+    <div>
+      <Flex>
+        <Button
+            marginX="md"
+            onClick={toggleInfoAlert}
+        >
+          {"Information Status"}
+        </Button>
+        <Button
+            marginX="md"
+            onClick={toggleCautionAlert}
+        >
+          {"Caution Status"}
+        </Button>
+        <Button
+            marginX="md"
+            onClick={toggleSuccessAlert}
+        >
+          {"Success Status"}
+        </Button>
+        <Button onClick={toggleErrorAlert}>
+          {"Error Status"}
+        </Button>
+        <Button
+            marginX="md"
+            onClick={toggleDeleteAlert}
+        >
+          {"Delete Status"}
+        </Button>
+      </Flex>
+      <Flex>
+        {dialogs.map((dialog) => (
+          <Dialog
+              key={dialog.status}
+              onClose={dialog.toggle}
+              opened={dialog.visible}
+              status={dialog.status}
+              text={dialog.text}
+              title={dialog.title}
+          >
+          <Dialog.Footer>
+            <Button
+                onClick={dialog.toggle}
+                variant="secondary"
+            >
+            {dialog.buttonOneText}
+            </Button>
+            <Button
+                onClick={dialog.toggle}
+            >
+            {dialog.buttonTwoText}
+            </Button>
+          </Dialog.Footer>
+          </Dialog>
+        ))}
+      </Flex>
+    </div>
+  )
+}
+
+export default DialogStatus

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

@@ -0,0 +1 @@
+This shows the different alert statuses that can be used for dialog boxes. These all have two buttons which is a default

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

@@ -8,3 +8,5 @@ examples:
   - dialog_sizes: Sizes
   - dialog_scrollable: Scrollable
   - dialog_should_close_on_overlay: Overlay Click
+  - dialog_status: Status Alert
+  - dialog_stacked_alert: Stacked Button Alert

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

@@ -4,3 +4,5 @@ export { default as DialogSizes } from './_dialog_sizes.jsx'
 export { default as DialogScrollable } from './_dialog_scrollable.jsx'
 export { default as DialogSeparators } from './_dialog_separators.jsx'
 export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'
+export { default as DialogStatus } from './_dialog_status.jsx'
+export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'

data/app/pb_kits/playbook/pb_form_pill/{_form_pill.jsx → _form_pill.tsx}

@@ -4,24 +4,24 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 type FormPillProps = {
   className?: string,
   id?: string,
   text: string,
   name: string,
-  onClick?: EventHandler,
+  onClick?: React.MouseEventHandler<HTMLSpanElement>,
   avatar?: boolean,
   avatarUrl?: string,
   size?: string,
-  textTransform?: "none" | "lowercase",
+  textTransform?: 'none' | 'lowercase',
   closeProps?: {
-    onClick?: EventHandler,
-    onMouseDown?: EventHandler,
-    onTouchEnd?: EventHandler,
-  },
-}
+    onClick?: React.MouseEventHandler<HTMLSpanElement>,
+    onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
+    onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
+  }, 
+} & GlobalProps
 const FormPill = (props: FormPillProps) => {
   const {
     className,
@@ -42,25 +42,29 @@ const FormPill = (props: FormPillProps) => {
   )
   return (
     <div className={css}>
-      <If condition={name}>
+        {name &&
+        <>
         <Avatar
             imageUrl={avatarUrl}
             name={name}
             size="xs"
+            status={null}
         />
         <Title
             className="pb_form_pill_text"
             size={4}
             text={name}
         />
-      </If>
-      <If condition={text}>
+        </>
+        }
+
+      {text &&
         <Title
             className="pb_form_pill_tag"
             size={4}
             text={text}
         />
-      </If>
+      }
       <div
           className="pb_form_pill_close"
           onClick={onClick}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormPill from '../_form_pill.jsx'
+import FormPill from '../_form_pill'
 
 const FormPillExample = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormPill from '../_form_pill.jsx'
+import FormPill from '../_form_pill'
 
 const FormPillSize = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormPill from '../_form_pill.jsx'
+import FormPill from '../_form_pill'
 
 const FormPillDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormPill from '../_form_pill.jsx'
+import FormPill from '../_form_pill'
 
 const FormPillDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_hashtag/{_hashtag.jsx → _hashtag.tsx}

@@ -1,16 +1,15 @@
-/* @flow */
 /* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Badge from '../pb_badge/_badge'
 
 type HashtagProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
   dark?: boolean,
   data?: string,
@@ -18,7 +17,7 @@ type HashtagProps = {
   text?: string,
   type: "default" | "home" | "project" | "appointment",
   url?: string,
-}
+} & GlobalProps
 
 const typeMap = {
   home: 'H#',

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -0,0 +1,86 @@
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React, { forwardRef } from 'react'
+import Body from '../pb_body/_body'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+type RadioProps = {
+  aria?: {[key: string]: string},
+  alignment?: string,
+  checked?: boolean,
+  children?: Node,
+  className?: string,
+  dark?: boolean,
+  data?: {[key: string]: string},
+  error?: boolean,
+  id?: string,
+  label: string,
+  name: string,
+  value: string,
+  text: string,
+  onChange: (event: React.FormEvent<HTMLInputElement>)=>void,
+} & GlobalProps
+
+const Radio = ({
+  aria = {},
+  alignment,
+  children,
+  className,
+  dark = false,
+  data = {},
+  error = false,
+  id,
+  label,
+  name = 'radio_name',
+  text = 'Radio Text',
+  value = 'radio_text',
+  onChange = () => {},
+  ...props
+}: RadioProps, ref: any) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_radio_kit', alignment ),
+    dark ? 'dark': null, error ? 'error': null,
+    globalProps(props),
+    className)
+
+  const displayRadio = (props: RadioProps) => {
+    if (children)
+      return (children)
+    else 
+    return (
+    <input
+        id={id}
+        name={name}
+        onChange={onChange}
+        ref={ref}
+        text={text}
+        type="radio"
+        value={value}
+        {...props}
+    />
+  )}
+
+  return (
+    <label
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        htmlFor={id}
+    >
+    <>{displayRadio(null)}</>
+    <span className="pb_radio_button" />
+    <Body
+          dark={dark}
+          status={error ? 'negative' : null}
+          text={label}
+          variant={null}
+      />
+    </label>
+  )
+}
+
+export default forwardRef(Radio)

data/app/pb_kits/playbook/pb_select/{_select.jsx → _select.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, domSafeProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
 
 import Body from '../pb_body/_body'
@@ -18,16 +16,14 @@ type SelectOption = {
 }
 
 type SelectProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   blankSelection?: string,
-  children?: React.Node,
-  compact?: boolean,
+  children?: Node,
   className?: string,
-  data?: object,
+  compact?: boolean,
+  data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
-  onChange: InputCallback<HTMLSelectElement>,
-  options: SelectOption[],
   id?: string,
   includeBlank?: string,
   inline?: boolean,
@@ -36,9 +32,11 @@ type SelectProps = {
   marginBottom: string,
   multiple?: boolean,
   name?: string,
+  onChange: InputCallback<HTMLSelectElement>,
+  options: SelectOption[],
   required?: boolean,
   value?: string,
-}
+} & GlobalProps
 
 const createOptions = (options: SelectOption[]) => options.map((option, index) => (
   <option
@@ -68,7 +66,7 @@ const Select = ({
   required = false,
   value,
   ...props
-}: SelectProps, ref: React.ElementRef<"select">) => {
+}: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
@@ -87,6 +85,25 @@ const Select = ({
   )
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+  const selectBody =(() =>{
+    if (children) return children
+    return (
+      <select
+          {...domSafeProps(props)}
+          disabled={disabled}
+          id={name}
+          multiple={multiple}
+          name={name}
+          onChange={onChange}
+          ref={ref}
+          required={required}
+          value={value}
+      >
+        {blankSelection && <option value="">{blankSelection}</option>}
+        {optionsList}
+      </select>
+    )
+  })()
 
   return (
     <div
@@ -94,51 +111,30 @@ const Select = ({
         {...dataProps}
         className={classes}
     >
-      <If condition={label}>
+      {label &&
         <label
             className="pb_select_kit_label"
             htmlFor={name}
         >
-          <Caption
-              text={label}
-          />
+          <Caption text={label} />
         </label>
-      </If>
+      }
       <label
           className={selectWrapperClass}
           htmlFor={name}
       >
-        <If condition={children}>
-          {children}
-          <Else />
-          <select
-              {...domSafeProps(props)}
-              disabled={disabled}
-              id={name}
-              multiple={multiple}
-              name={name}
-              onChange={onChange}
-              ref={ref}
-              required={required}
-              value={value}
-          >
-            <If condition={blankSelection}>
-              <option value="">{blankSelection}</option>
-            </If>
-            {optionsList}
-          </select>
-        </If>
+        {selectBody}
         <Icon
             className="pb_select_kit_caret"
             fixedWidth
             icon="angle-down"
         />
-        <If condition={error}>
+        {error &&
           <Body
               status="negative"
               text={error}
           />
-        </If>
+        }
       </label>
     </div>
   )