playbook_ui 12.31.0 → 12.33.0

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

@@ -181,7 +181,10 @@ const Dialog = (props: DialogProps) => {
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
             {!status && text ? <Dialog.Body>{text}</Dialog.Body> : null}
             {status && (
-              <Dialog.Body padding="md">
+              <Dialog.Body
+                  className="dialog_status_text_align"
+                  padding="md"
+              >
                 <Flex align="center" orientation="column">
                   <IconCircle
                     icon={sweetAlertStatus[status].icon}
@@ -197,17 +200,17 @@ const Dialog = (props: DialogProps) => {
             )}
             {cancelButton && confirmButton ? (
               <Dialog.Footer>
-                  <Button 
-                    loading={loading} 
-                    onClick={onConfirm} 
-                    htmlType="button" 
+                  <Button
+                    loading={loading}
+                    onClick={onConfirm}
+                    htmlType="button"
                     variant="primary">
                     {confirmButton}
                   </Button>
-                  <Button 
-                    id="cancel-button" 
-                    onClick={onCancel} 
-                    variant="link" 
+                  <Button
+                    id="cancel-button"
+                    onClick={onCancel}
+                    variant="link"
                     htmlType="button">
                     {cancelButton}
                   </Button>

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -5,38 +5,38 @@
         id: object.id,
         class: object.classname) do %>
             <% if object.status === "" && object.title %>
-                <%= pb_rails("dialog/dialog_header", props: {title: object.title, id: object.id }) %>
+                <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>
             <% if object.status === "" && object.text %>
                 <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
             <% end %>
             <% if object.status != "" %>
-                <%= pb_rails("dialog/dialog_body", props: {padding: "md"}) do %>
-                    <%= pb_rails("flex", props: {align: "center", orientation: "column"}) do %>
+                <%= pb_rails("dialog/dialog_body", props: { classname: "dialog_status_text_align" ,padding: "md" }) do %>
+                    <%= pb_rails("flex", props: { align: "center", orientation: "column" }) do %>
                         <%= pb_rails("icon_circle", props: {
                                 icon: object.status_alerts[0],
                                 variant: object.status_alerts[1],
                                 size: "lg"
                             }) %>
                         <%= pb_rails("title", props: { text: object.title, tag: "h1", size: 3, margin_top: "sm" }) %>
-                        <%= pb_rails("body", props: {text: object.text, margin_top: "sm"}) %>
+                        <%= pb_rails("body", props: { text: object.text, margin_top: "sm" }) %>
                     <% end %>
                 <% end %>
             <% end %>
             <% if object.cancel_button && object.confirm_button %>
                         <%= pb_rails("dialog/dialog_footer", props: {
-                            cancel_button: object.cancel_button, 
+                            cancel_button: object.cancel_button,
                             confirm_button: object.confirm_button,
                             id: object.id
                         }) %>
             <% end %>
-            
+
             <%= content %>
     <% end %>
 </div>
 
 <%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {      
+    window.addEventListener("DOMContentLoaded", () => {
         dialogHelper()
     })
-  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,6 +1,7 @@
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+  const dialogs = document.querySelectorAll(".pb_dialog_rails")
 
   openTrigger.forEach((open) => {
     open.addEventListener("click", () => {
@@ -8,21 +9,6 @@ const dialogHelper = () => {
       var targetDialog = document.getElementById(openTriggerData)
       if (targetDialog.open) return;
       targetDialog.showModal();
-
-      //the following allows you to close dialog by clicking on overlay
-      targetDialog.addEventListener('click',((event) => {
-        var dialogContainerData = targetDialog.parentElement.dataset
-         if (dialogContainerData.overlayClick === "overlay_close") return;
-          let rect = event.target.getBoundingClientRect();
-                if (rect.left > event.clientX ||
-              rect.right < event.clientX ||
-              rect.top > event.clientY ||
-              rect.bottom < event.clientY
-          ) {
-              targetDialog.close();
-          }
-        })
-      );
     });
   });
 
@@ -32,6 +18,21 @@ const dialogHelper = () => {
       document.getElementById(closeTriggerData).close();
     });
   });
+
+  // Close dialog box on outside click
+  dialogs.forEach((dialogElement) => {
+    dialogElement.addEventListener("click", (event) => {
+      const dialogParentDataset = dialogElement.parentElement.dataset
+      if (dialogParentDataset.overlayClick === "overlay_close") return
+
+      const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
+
+      if (clickedOutsideDialogBox) {
+        dialogElement.close()
+        event.stopPropagation()
+      }
+    })
+  })
 };
 
 export default dialogHelper;

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -14,24 +14,26 @@ const iconMap = {
 };
 
 type FixedConfirmationToastProps = {
-  autoClose?: number;
-  className?: string;
-  closeable?: boolean;
-  data?: string;
-  horizontal?: "right" | "left" | "center";
-  id?: string;
-  multiLine?: boolean;
-  onClose?: () => void;
-  open?: boolean;
-  status?: "success" | "error" | "neutral" | "tip";
-  text: string;
-  vertical?: "top" | "bottom";
-};
+  autoClose?: number,
+  children?: React.ReactChild[] | React.ReactChild,
+  className?: string,
+  closeable?: boolean,
+  data?: string,
+  horizontal?: "right" | "left" | "center",
+  id?: string,
+  multiLine?: boolean,
+  onClose?: () => void,
+  open?: boolean,
+  status?: "success" | "error" | "neutral" | "tip",
+  text?: string,
+  vertical?: "top" | "bottom",
+}
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true);
   const {
     autoClose = 0,
+    children,
     className,
     closeable = false,
     horizontal,
@@ -75,13 +77,20 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
       {showToast && (
         <div className={css} onClick={handleClick}>
           {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
-          <Title
-            className="pb_fixed_confirmation_toast_text"
-            size={4}
-            text={text}
-          />
+
+          {
+            children && children ||
+            text && (
+              <Title
+                className="pb_fixed_confirmation_toast_text"
+                size={4}
+                text={text}
+              />
+            )
+          }
+
           {closeable && (
-            <Icon className="pb_icon" fixedWidth={false} icon="times" />
+            <Icon className="pb_icon" cursor="pointer" fixedWidth={false} icon="times" />
           )}
         </div>
       )}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.html.erb

@@ -0,0 +1,17 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  padding_y: "none",
+  status: "success"
+}) do %>
+  <%= pb_rails("title", props: {
+    dark: true,
+    margin_left: "md",
+    text: "Design & Handoff Process was moved to UX Designer Learning Track.",
+    size: 4
+  }) %>
+  <%= pb_rails("button", props: {
+    dark: true,
+    padding_right: "none",
+    text: "Undo",
+    variant: "link"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+import Button from '../../pb_button/_button'
+import Title from '../../pb_title/_title'
+
+const FixedConfirmationToastChildren = (props) => {
+    return (
+        <>
+            <FixedConfirmationToast
+                paddingY="none"
+                status="success"
+                {...props}
+            >
+                <Title
+                    dark
+                    marginLeft="md"
+                    size={4}
+                    text="Design & Handoff Process was moved to UX Designer Learning Track."
+                />
+                <Button
+                    dark
+                    onClick={() => alert("button clicked!")}
+                    paddingRight="none"
+                    text="Undo"
+                    variant="link"
+                />
+            </FixedConfirmationToast>
+        </>
+    )
+}
+
+export default FixedConfirmationToastChildren

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.md

@@ -0,0 +1,3 @@
+Pass anything (including any of our kits) to the `children` prop to customize the content of the fixed confirmation toast.
+
+**NOTE:** passing `children` overrides any content passed to `text`

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

@@ -5,6 +5,7 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
+  - fixed_confirmation_toast_children: Children
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -12,3 +13,4 @@ examples:
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
+  - fixed_confirmation_toast_children: Children

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

@@ -3,3 +3,4 @@ export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmatio
 export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
 export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
+export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -4,6 +4,12 @@
     data: object.data,
     class: object.classname) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
-    <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text? %>
-    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon" }) if object.closeable %>
+
+    <% if content %>
+        <%= content %>
+    <% elsif object.show_text? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) %>
+    <% end %>
+
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer" }) if object.closeable %>
 <% end %>

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -34,7 +34,7 @@ type IconProps = {
   pulse?: boolean,
   rotation?: 90 | 180 | 270,
   size?: IconSizes,
-  fontStyle?: 'far' | 'fas' | 'fab',
+  fontStyle?: 'far' | 'fas' | 'fab' | 'fak',
   spin?: boolean,
 } & GlobalProps
 
@@ -76,6 +76,7 @@ const Icon = (props: IconProps) => {
     [`fa-${size}`]: size,
     [`fa-pull-${pull}`]: pull,
     [`fa-rotate-${rotation}`]: rotation,
+
   }
 
   // Lets check and see if the icon prop is referring to a custom Power icon...
@@ -83,7 +84,7 @@ const Icon = (props: IconProps) => {
   // this ensures the JS will not do any further operations
   // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
   if (!customIcon) faClasses[`fa-${icon}`] = icon
-
+  
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
@@ -110,6 +111,7 @@ const Icon = (props: IconProps) => {
     return emojiRegex.test(emoji);
   };
 
+
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
     if (customIcon)

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x"  }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
+
+const IconFaKit = (props) => {
+  return (
+    <div>
+      <Icon
+          {...props}
+          fixedWidth
+          fontStyle="fak"
+          icon="powergon"
+          size="5x"
+      />
+    </div>
+  )
+}
+
+export default IconFaKit

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.md

@@ -0,0 +1,7 @@
+Our Icon kit allows integration with [FontAwesome's custom kit](https://fontawesome.com/v6/docs/web/setup/use-kit#contentHeader) functionality out-of-the-box. 
+
+All you need to do is 3 things:
+1) Import your custom-icon.js file as outlined in the FontAwesome docs.
+2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon. 
+3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
+

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

@@ -8,6 +8,7 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
 
   react:
   - icon_default: Icon Default
@@ -18,3 +19,4 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit

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

@@ -6,3 +6,4 @@ export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
+export { default as IconFaKit} from './_icon_fa_kit.jsx'

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -33,7 +33,7 @@ module Playbook
                   values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
                   default: nil
       prop :font_style, type: Playbook::Props::Enum,
-                        values: %w[far fas fab],
+                        values: %w[far fas fab fak],
                         default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -22,11 +22,21 @@ type IconCircleProps = {
     | "teal"
     | "red"
     | "yellow"
+    | "orange"
     | "green",
 }
 
 const IconCircle = (props: IconCircleProps) => {
-  const { aria = {}, className, dark = false, data = {}, icon, id, size = 'md', variant = 'default' } = props
+  const {
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    icon,
+    id,
+    size = 'md',
+    variant = 'default'
+  } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -41,10 +51,10 @@ const IconCircle = (props: IconCircleProps) => {
         id={id}
     >
         <Icon
-          dark={dark}
-          icon={icon}
+            dark={dark}
+            icon={icon}
         />
-        
+
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -10,7 +10,7 @@ module Playbook
                   values: %w[xs sm md base lg xl],
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue orange purple teal red yellow green],
+                     values: %w[default royal blue orange purple teal red yellow green orange],
                      default: "default"
 
       def classname

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -14,6 +14,7 @@ type IconStatValueProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: object,
+  dark?: boolean,
   icon: string,
   id?: string,
   orientation?: "vertical" | "horizontal",
@@ -28,6 +29,7 @@ type IconStatValueProps = {
     | "teal"
     | "red"
     | "yellow"
+    | "orange"
     | "green",
 }
 
@@ -36,6 +38,7 @@ const IconStatValue = (props: IconStatValueProps) => {
     aria = {},
     className,
     data = {},
+    dark = false,
     icon,
     id,
     orientation = 'horizontal',
@@ -55,6 +58,7 @@ const IconStatValue = (props: IconStatValueProps) => {
     if (size == 'lg') {
       return (
         <Title
+            dark={dark}
             size={1}
             tag="span"
             text={`${value}`}
@@ -63,6 +67,7 @@ const IconStatValue = (props: IconStatValueProps) => {
     } else if (size == 'md') {
       return (
         <Title
+            dark={dark}
             size={2}
             tag="span"
             text={`${value}`}
@@ -71,6 +76,7 @@ const IconStatValue = (props: IconStatValueProps) => {
     } else {
       return (
         <Title
+            dark={dark}
             size={3}
             tag="span"
             text={`${value}`}
@@ -87,6 +93,7 @@ const IconStatValue = (props: IconStatValueProps) => {
         id={id}
     >
       <IconCircle
+          dark={dark}
           icon={icon}
           size={size}
           variant={variant}
@@ -99,10 +106,14 @@ const IconStatValue = (props: IconStatValueProps) => {
             {titleSize(size)}
           &nbsp;
             <Body
+                dark={dark}
                 text={unit}
             />
         </Flex>
-        <Caption text={text} />
+        <Caption
+            dark={dark}
+            text={text}
+        />
       </div>
 
     </div>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -46,4 +46,10 @@
                                           unit: "AU",
                                           value: 19.18,
                                           variant:"green"
+ }) %>
+ <%= pb_rails("icon_stat_value", props: { icon: "globe",
+                                          text: "Uranus",
+                                          unit: "AU",
+                                          value: 19.18,
+                                          variant:"orange"
  }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -66,6 +66,15 @@ const IconStatValueColor = (props) => {
           variant="green"
           {...props}
       />
+      <br />
+      <IconStatValue
+          icon="globe"
+          text="Uranus"
+          unit="AU"
+          value={19.18}
+          variant="orange"
+          {...props}
+      />
     </div>
 
   )

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -4,22 +4,26 @@
     data: object.data,
     class: object.classname) do %>
 
-    <%= pb_rails "icon_circle", props: {
-      icon: object.icon,
-      size: object.size,
-      variant: object.variant } %>
+    <%= pb_rails("icon_circle", props: {
+        dark: object.dark,
+        icon: object.icon,
+        size: object.size,
+        variant: object.variant }) %>
 
-      <div>
+    <div>
         <%= pb_rails("flex", props: { align: "baseline" }) do %>
-            <%= pb_rails "title", props: {
+            <%= pb_rails("title", props: {
+                dark: object.dark,
                 tag: "span",
                 text: object.value_string,
-                size: object.title_size } %>
+                size: object.title_size }) %>
                 &nbsp;
-            <%= pb_rails "body", props: {
-                text: object.unit } %>
+            <%= pb_rails("body", props: {
+                dark: object.dark,
+                text: object.unit }) %>
         <% end %>
-            <%= pb_rails "caption", props: {
-                text: object.text } %>
-      </div>
+            <%= pb_rails("caption", props: {
+                dark: object.dark,
+                text: object.text }) %>
+    </div>
 <% end %>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -9,7 +9,7 @@ module Playbook
                   values: %w[sm md lg],
                   default: "sm"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green],
+                     values: %w[default royal blue purple teal red yellow green orange],
                      default: "default"
 
       prop :orientation, type: Playbook::Props::Enum,
@@ -22,7 +22,7 @@ module Playbook
       prop :text, type: Playbook::Props::String,
                   default: ""
 
-      prop :value, type: Playbook::Props::Numeric
+      prop :value
 
       def classname
         generate_classname("pb_icon_stat_value_kit", orientation, size, variant)