RubyGems - playbook_ui - Versions diffs - 12.27.0 → 12.28.0.pre.alpha.PLAY814removemomentjs871 - Mend

playbook_ui 12.27.0 → 12.28.0.pre.alpha.PLAY814removemomentjs871

Files changed (40) hide show

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from "react";
 import classnames from "classnames";
-import DateTime from "../pb_kit/dateTime";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -26,9 +26,9 @@ type LabelValueProps = {
   title?: string;
 };
-const dateString = (value: DateTime) => {
-  const month = value.toMonthNum();
-  const day = value.toDay();
+const dateString = (value: Date) => {
+  const month = DateTime.toMonthNum(value);
+  const day = DateTime.toDay(value);
   return ` · ${month}/${day}`;
 };
@@ -52,7 +52,6 @@ const LabelValue = (props: LabelValueProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const formattedDate = new DateTime({ value: date });
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -62,59 +61,81 @@ const LabelValue = (props: LabelValueProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
-      title={title}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+        title={title}
     >
-      <Caption dark={dark} text={label} />
+      <Caption dark={dark}
+          text={label}
+      />
       {variant === "details" ? (
-        <Flex inline vertical="center">
+        <Flex inline
+            vertical="center"
+        >
           {icon && (
-            <Body color="light" dark={dark} marginRight="xs">
-              <Icon dark={dark} fixedWidth icon={icon} />
+            <Body color="light"
+                dark={dark}
+                marginRight="xs"
+            >
+              <Icon dark={dark}
+                  fixedWidth
+                  icon={icon}
+              />
             </Body>
           )}
           {description && (
             <Body
-              color="light"
-              dark={dark}
-              marginRight="xs"
-              text={description}
+                color="light"
+                dark={dark}
+                marginRight="xs"
+                text={description}
             />
           )}
           {active === true ? (
-            <Flex inline vertical="center">
+            <Flex inline
+                vertical="center"
+            >
               {title && (
-                <Title dark={dark} size={4} text={title} variant="link" />
+                <Title dark={dark}
+                    size={4}
+                    text={title}
+                    variant="link"
+                />
               )}
               {date && (
                 <Title
-                  dark={dark}
-                  marginLeft="xs"
-                  size={4}
-                  text={" " + dateString(formattedDate)}
-                  variant="link"
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={" " + dateString(date)}
+                    variant="link"
                 />
               )}
             </Flex>
           ) : (
             <>
-              {title && <Title dark={dark} size={4} text={title} />}
+              {title && <Title dark={dark}
+                  size={4}
+                  text={title}
+                        />
+              }
               {date && (
                 <Title
-                  dark={dark}
-                  marginLeft="xs"
-                  size={4}
-                  text={" " + dateString(formattedDate)}
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={" " + dateString(date)}
                 />
               )}
             </>
           )}
         </Flex>
       ) : (
-        <Body dark={dark} text={value} />
+        <Body dark={dark}
+            text={value}
+        />
       )}
     </div>
   );

data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED Viewed

@@ -23,8 +23,8 @@ type MessageProps = {
   id?: string,
   label?: string,
   message: string,
-  timestamp?: string,
-  timestampObject?: string,
+  timestamp?: Date,
+  timestampObject?: Date,
   timezone?: string,
   alignTimestamp?: string,
 }
@@ -61,50 +61,50 @@ const Message = (props: MessageProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       {shouldDisplayAvatar &&
         <Avatar
-          imageUrl={avatarUrl}
-          name={avatarName}
-          size="xs"
-          status={avatarStatus}
+            imageUrl={avatarUrl}
+            name={avatarName}
+            size="xs"
+            status={avatarStatus}
         />
       }
       <div className="content_wrapper">
         <Flex
-          justify={alignTimestamp === 'left' ? 'none' : 'between'}
-          orientation="row"
+            justify={alignTimestamp === 'left' ? 'none' : 'between'}
+            orientation="row"
         >
           {label &&
             <Title
-              className="message_title"
-              size={4}
-              text={label}
+                className="message_title"
+                size={4}
+                text={label}
             />
           }
           <Timestamp
-            className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
-            text={timestamp}
-            timestamp={''}
-            timezone={timezone}
+              className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
+              text={timestamp.toString()}
+              timestamp={null}
+              timezone={timezone}
           />
           {timestampObject &&
             <Timestamp
-              className={`pull-${alignTimestamp} message_timestamp`}
-              text={''}
-              timestamp={timestampObject}
-              timezone={timezone}
+                className={`pull-${alignTimestamp} message_timestamp`}
+                text={''}
+                timestamp={timestampObject}
+                timezone={timezone}
             />
           }
         </Flex>
         {message &&
           <Body
-            className="pb_message_body"
-            text={message}
+              className="pb_message_body"
+              text={message}
           />
         }
         {children}

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED Viewed

@@ -51,8 +51,25 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const dropdownRef = useRef(null)
-  //state for expanded property
-  const [expanded, setExpanded] = useState([])
+  const getExpandedItems = (treeData: { [key: string]: string }[]) => {
+    let expandedItems: any[] = [];
+    const traverse = (items: string | any[]) => {
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.expanded) {
+          expandedItems.push(item.id);
+        }
+        if (Array.isArray(item.children)) {
+          traverse(item.children);
+        }
+      }
+    }
+    traverse(treeData);
+    return expandedItems;
+  }
   //state for whether dropdown is open or closed
   const [isClosed, setIsClosed] = useState(true)
   //state from onchange for textinput, to use for filtering to create typeahead
@@ -63,6 +80,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const [formattedData, setFormattedData] = useState([])
   //state for return for default
   const [defaultReturn, setDefaultReturn] = useState([])
+  // Get expanded items from treeData.
+  const initialExpandedItems = getExpandedItems(treeData);
+  // Initialize state with expanded items.
+  const [expanded, setExpanded] = useState(initialExpandedItems);
   useEffect(() => {
@@ -153,11 +174,13 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return tree
   }
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
     parent_id: string = null,
-    depth: number = 0
+    depth: number = 0,
   ) => {
     if (!Array.isArray(treeData)) {
       return
@@ -295,6 +318,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     )
   }
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
       <div ref={dropdownRef} className='wrapper'>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx CHANGED Viewed

@@ -12,6 +12,7 @@ const treeData = [
         label: "People",
         value: "People",
         id: "people1",
+        expanded: true,
         children: [
           {
             label: "Talent Acquisition",

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 import intlTelInput from 'intl-tel-input'
@@ -64,7 +64,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
-const PhoneNumberInput = (props: PhoneNumberInputProps) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
   const {
     aria = {},
     className,
@@ -111,6 +111,23 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     }
   }, [error, onValidate])
+  /*
+    useImperativeHandle exposes the kit's input element to a parent component via a ref.
+    See the Playbook docs for use cases.
+    Read: https://react.dev/reference/react/useImperativeHandle
+  */
+  useImperativeHandle(ref, () => {
+    return {
+      clearField() {
+        setInputValue("")
+        setError("")
+      },
+      inputNode() {
+        return inputRef.current
+      }
+    }
+  })
   const showFormattedError = (reason = '') => {
     const countryName = itiInit.getSelectedCountryData().name
     const reasonText = reason.length > 0 ? ` (${reason})` : ''
@@ -201,8 +218,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       allowDropdown: !disabled,
       autoInsertDialCode: false,
       initialCountry,
-      onlyCountries,
-      utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.6/js/utils.min.js"
+      onlyCountries
     })
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
@@ -242,7 +258,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   return (
     <div {...wrapperProps}>
       <TextInput
-          ref={inputRef}
+          ref={
+            inputNode => {
+              ref ? ref.current = inputNode : null
+              inputRef.current = inputNode
+            }
+          }
           {...textInputProps}
       />
     </div>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+import React, { useEffect, useRef } from 'react'
+import { Body, PhoneNumberInput } from '../..'
+const PhoneNumberInputAccessInputElement = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+    // 2. Add any event listener to ref.current.inputNode() inside a useEffect hook and trigger it once.
+    useEffect(() => {
+        ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
+    }, [])
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <Body text="Click the input field below:" />
+            <PhoneNumberInput
+                id="access-input-element"
+                ref={ref}
+                {...props}
+            />
+        </>
+    )
+}
+export default PhoneNumberInputAccessInputElement

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md ADDED Viewed

@@ -0,0 +1,3 @@
+To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`. Calling `useEffect` with an empty dependency array ensures your event listeners won't be added twice.
+`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx ADDED Viewed

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react'
+import { Button, PhoneNumberInput } from '../..'
+const PhoneNumberInputClearField = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+    // 2. Use clearField() to clear the field.
+    const handleClick = () => {
+        ref.current.clearField()
+    }
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <PhoneNumberInput
+                id="clear-field"
+                ref={ref}
+                {...props}
+            />
+            <Button
+                onClick={handleClick}
+                text="Clear the Input Field"
+            />
+        </>
+    )
+}
+export default PhoneNumberInputClearField

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md ADDED Viewed

@@ -0,0 +1,3 @@
+To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
+`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.

data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml CHANGED Viewed

@@ -6,6 +6,8 @@ examples:
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
+  - phone_number_input_clear_field: Clearing the Input Field
+  - phone_number_input_access_input_element: Accessing the Input Element
   rails:
   - phone_number_input_default: Default

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js CHANGED Viewed

@@ -3,3 +3,5 @@ export { default as PhoneNumberInputPreferredCountries } from './_phone_number_i
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
+export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
+export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.html.erb ADDED Viewed

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+  <%= pb_rails("selectable_card_icon", props: {
+    custom_icon: svg_url,
+    title_text: "Customization",
+    body_text: "Personalize everything",
+    input_id: 1,
+    checked: true,
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.jsx ADDED Viewed

@@ -0,0 +1,36 @@
+import React from 'react'
+import SelectableCardIcon from '../_selectable_card_icon'
+const svg = {
+  newChat: (
+    <svg
+        ariaHidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+          fill="currentColor"
+      />
+    </svg>
+  ),
+}
+const SelectableCardIconCustom = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Talk to someone you love"
+          checked
+          customIcon={svg.newChat}
+          inputId={1}
+          titleText="New Chat"
+          {...props}
+      />
+    </div>
+  )
+}
+export default SelectableCardIconCustom

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.md ADDED Viewed

@@ -0,0 +1,19 @@
+# Tips for Custom Icons
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
+### React
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+### Rails
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml CHANGED Viewed

@@ -5,10 +5,10 @@ examples:
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
   - selectable_card_icon_options: With Options
+  - selectable_card_icon_custom: Custom Icon
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
+  - selectable_card_icon_custom: Custom Icon

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
 export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
 export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
+export { default as SelectableCardIconCustom } from './_selectable_card_icon_custom.jsx'

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb CHANGED Viewed

@@ -8,12 +8,14 @@
     value: object.value,
     checked: object.checked,
     disabled: object.disabled,
+    custom_icon: object.custom_icon,
     icon: object.checkmark,
     multi: object.multi,
     dark: object.dark,
     input_options: object.input_options
   }) do %>
     <%= pb_rails("selectable_icon", props: {
+      custom_icon: object.custom_icon,
       icon: object.icon,
       inputs: "disabled",
       text: object.title_text,

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb CHANGED Viewed

@@ -4,6 +4,8 @@ module Playbook
   module PbSelectableCardIcon
     class SelectableCardIcon < Playbook::KitBase
       # Icon and text props
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :icon, type: Playbook::Props::String
       prop :title_text, type: Playbook::Props::String
       prop :body_text, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb CHANGED Viewed

@@ -5,7 +5,7 @@
     <% if object.inputs == "disabled" %>
-      <%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
+      <%= pb_rails("icon", props: { custom_icon: object.custom_icon, icon: object.icon, size: "2x" }) %>
       <%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
     <% else %>

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb CHANGED Viewed

@@ -4,6 +4,8 @@ module Playbook
   module PbSelectableIcon
     class SelectableIcon < Playbook::KitBase
       # Icon props
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :icon, type: Playbook::Props::String
       # Title text
       prop :text, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_time/_time.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
-import DateTime from "../pb_kit/dateTime";
 import { buildCss } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -13,7 +13,7 @@ type TimeProps = {
   align?: "left" | "center" | "right";
   className?: string | string[];
   data?: string;
-  date: string;
+  date: Date;
   dark?: boolean;
   id?: string;
   showIcon?: boolean;
@@ -41,8 +41,6 @@ const Time = (props: TimeProps) => {
     className
   );
-  const dateTimestamp = new DateTime({ value: date, zone: timeZone });
   return (
     <div className={classes}>
       {showIcon && (
@@ -70,18 +68,18 @@ const Time = (props: TimeProps) => {
             )
       )}
-      <time dateTime={date}>
+      <time dateTime={date.toString()}>
         <span>
           {unstyled
             ? (
                 <>
                   <span>
-                    {dateTimestamp.toTimeWithMeridian()}
+                    {DateTime.toTimeWithMeridiem(date, timeZone)}
                   </span>
                   {" "}
                   {showTimezone && (
                     <span>
-                      {dateTimestamp.toTimezone()}
+                      {DateTime.toTimeZone(date, timeZone)}
                     </span>
                   )}
                 </>
@@ -92,13 +90,13 @@ const Time = (props: TimeProps) => {
                     <Body
                         className="pb_time"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Body
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>
@@ -108,13 +106,13 @@ const Time = (props: TimeProps) => {
                     <Caption
                         color="light"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Caption
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>