playbook_ui 12.32.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_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)

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -1,90 +1,162 @@
-
-import moment, { Moment } from 'moment'
-import 'moment-strftime'
-import 'moment-timezone'
-
-type DateTimeType = {
-  value: string | Date,
-  zone?: string,
-}
-
 const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
 
-export default class DateTime {
-  value: Moment & any
-  constructor({ value, zone = 'America/New_York' }: DateTimeType) {
-    this.value = this.convertToTimestampZone(value, zone)
-  }
-
-  convertToTimestampZone(value: string | Date, zone: string) {
-    return moment(value).tz(zone)
-  }
-
-  convertToTimezone() {
-    return this.value.strftime('%Z')
-  }
+const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-  toCustomFormat(format = '%-m/%-d') {
-    return this.value.strftime(format)
-  }
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
 
-  toYear() {
-    return this.value.strftime('%Y')
+export const toMinute = (newDate: Date | string, timeZone?: string): string => {
+  const date = new Date(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, {timeZone, hour: "2-digit", minute: "2-digit"}).slice(3, 5);
+  } else {
+    return date.toLocaleTimeString(undefined, {hour: "2-digit", minute: "2-digit"}).slice(3, 5);
   }
+}
 
-  toMonth() {
-    return this.value.strftime('%b')
+export const toHour = (newDate: Date | string, timeZone?: string): string => {
+  const date = new Date(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, {timeZone, hour: "numeric"}).split(' ')[0];
+  } else {
+    return date.toLocaleTimeString(undefined, {hour: "numeric"}).split(' ')[0];
   }
+}
 
-  toMonthNum() {
-    return this.value.strftime('%-m')
-  }
+export const toDay = (newDate: Date | string, timeZone?: string): number => {
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return date.getDate()
+    } else {
+      const date = new Date(newDate)
+      return date.getDate()
+    }
+}
 
-  toMonthFull() {
-    return this.value.strftime('%B')
-  }
+export const toDayAbbr = (newDate: Date | string): string => {
+  const date = new Date(newDate)
+  return ABBR_DAYS[date.getUTCDay()]
+}
 
-  toDay() {
-    return this.value.strftime('%e')
-  }
+export const toWeekday = (newDate: Date | string): string => {
+    const date = new Date(newDate)
+    return days[date.getUTCDay()]
+}
 
-  toDayAbbr() {
-    return ABBR_DAYS[this.value.day()]
-  }
+export const toMonth = (newDate: Date | string, timeZone?: string): string => {
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return months[date.getUTCMonth()]
+    } else {
+      const date = new Date(newDate)
+      return months[date.getUTCMonth()]
+    }
+}
 
-  toWeekday() {
-    return this.value.strftime('%a')
-  }
+export const toMonthNum = (newDate: Date | string): number => {
+  const date = new Date(newDate)
+  return date.getUTCMonth() +1
+}
 
-  toHour() {
-    return this.value.strftime('%l')
-  }
+export const toYear = (newDate: Date | string, timeZone?: string): number => {
+    if (timeZone) {
+      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
+      return date.getUTCFullYear()
+    } else {
+      const date = new Date(newDate)
+      return date.getUTCFullYear()
+    }
+}
 
-  toMinute() {
-    return this.value.strftime('%M')
+export const toTime = (newDate: Date | string, timeZone?: string): string => {
+  const date = new Date(newDate)
+  if (timeZone) {
+    return date.toLocaleTimeString(undefined, {timeZone, timeStyle: "short"}).split(' ')[0];
+  } else {
+    return date.toLocaleTimeString(undefined, {timeStyle: "short"}).split(' ')[0];
   }
+}
 
-  toMeridian() {
-    return this.value.strftime('%P')[0]
-  }
+export const toMeridiem = (newDate: Date | string, timeZone?: string): string => {
+    const date = new Date(newDate)
+    if (timeZone) {
+      return date.toLocaleString(undefined, {timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+    } else {
+      return date.toLocaleString(undefined, {hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+    }
+}
 
-  toIso() {
-    return this.value.toISOString()
-  }
+export const toTimeZone = (newDate: Date | string, timeZone?: string): string => {
+    const date = new Date(newDate)
+    if (timeZone) {
+      return date.toLocaleString(undefined, {timeZone, timeZoneName: "short"}).split(' ')[3];
+    } else {
+      return date.toLocaleString(undefined, {timeZoneName: "short"}).split(' ')[3];
+    }
+}
 
-  toTime() {
-    const time = this.value.strftime('%I:%M')
+export const toTimeWithMeridiem = (newDate: Date | string, timeZone: string): string => {
+  const date = new Date(newDate)
+  return `${toTime(date, timeZone)}${toMeridiem(date, timeZone)}`;
+}
 
-    // strftime adds a leading 0 on single hour times. ie 08:31.
-    // this removes that 0 to match the rails kit.
-    return time.charAt() === '0' ? time.slice(1) : time
-  }
+export const toIso = (newDate: Date | string): string => {
+    const date = new Date(newDate)
+    return date.toISOString()
+}
 
-  toTimezone() {
-    return this.value.strftime('%Z')
-  }
+export const fromNow = (newDate: Date | string): string => {
+
+  const startDate = new Date(newDate).getTime()
+  const endDate = new Date().getTime()
+  const elapsedTime = endDate - startDate
+  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
+
+  const elapsedTimeData = [
+    { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
+    { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
+    { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, //  90s-44 minutes
+    { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
+    { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
+    { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
+    { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
+    { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
+    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
+    { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
+  ];
+
+  for (const timeDate of elapsedTimeData) {
+    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
+      elapsedTimeString = timeDate.value;
+      break;
+    }
+  }
+
+  return elapsedTimeString
+}
 
-  toTimeWithMeridian() {
-    return this.toTime() + this.toMeridian()
+export const toCustomFormat = (newDate: Date | string, format = 'month_day'): string => {
+  const date = new Date(newDate)
+  if (format == "month_day") {
+    return `${toMonthNum(date)}/${toDay(date)}`
+  } else {
+    return `${date.toLocaleString(undefined, {month: "short"})} ${toDay(date)}`
   }
 }
+
+export default {
+  toMinute,
+  toHour,
+  toDay,
+  toDayAbbr,
+  toWeekday,
+  toMonth,
+  toMonthNum,
+  toYear,
+  toTime,
+  toMeridiem,
+  toTimeZone,
+  toTimeWithMeridiem,
+  toIso,
+  fromNow,
+  toCustomFormat,
+}