playbook_ui 12.27.0 → 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869

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

@@ -8,6 +8,8 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
+  - date_picker_quick_pick_rails: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -33,6 +35,8 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
+  - date_picker_quick_pick_react: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -19,4 +19,6 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
+export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -0,0 +1,185 @@
+import moment from 'moment'
+
+type FpTypes = {
+  setDate: (arg0: any, arg1: boolean) => void,
+  config: { [key: string]: string },
+  clear: (arg0: boolean, arg1: boolean) => void,
+  close: () => void,
+  calendarContainer?: {
+    classList: { add: (arg0: string) => void };
+    prepend: (arg0: HTMLDivElement) => void;
+    append: (arg0: HTMLDivElement) => void;
+  },
+  loadedPlugins: string[],
+};
+
+type pluginDataType = {
+  ranges: { [key: string]: Date[] },
+  rangesNav: HTMLUListElement,
+  rangesButtons: [] | any,
+}
+
+let activeLabel = ""
+
+const quickPickPlugin = (thisRangesEndToday: boolean) => {
+  return function (fp: FpTypes & any): any {
+    const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
+    const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
+    const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
+    const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
+
+    // variable that holds the ranges available
+    const ranges = {
+      'Today': [new Date(), new Date()],
+      'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
+      'This week': [moment().startOf('isoWeek').toDate(), thisWeekEndDate],
+      'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
+      'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
+      'This year': [moment().startOf('year').toDate(), thisYearEndDate],
+      'Last week': [
+        moment().subtract(1, 'week').startOf('isoWeek').toDate(),
+        moment().subtract(1, 'week').endOf('isoWeek').toDate()
+      ],
+      'Last month': [
+        moment().subtract(1, 'month').startOf('month').toDate(),
+        moment().subtract(1, 'month').endOf('month').toDate()
+      ],
+      'Last quarter': [
+        moment().subtract(1, 'quarter').startOf('quarter').toDate(),
+        moment().subtract(1, 'quarter').endOf('quarter').toDate()
+      ],
+      'Last year': [
+        moment().subtract(1, 'year').startOf('year').toDate(),
+        moment().subtract(1, 'year').endOf('year').toDate()
+      ]
+    }
+    //creating the ul element for the nav dropdown and giving it classnames
+    const rangesNav = document.createElement('ul');
+
+    // creating the pluginData object that will hold the properties of this plugin
+    const pluginData: pluginDataType = {
+      ranges: ranges,
+      rangesNav: rangesNav,
+      rangesButtons: [],
+    };
+
+    /**
+   *    @param {string} label
+   *    @returns HTML Element
+   */
+
+    //function for creating the range buttons in the nav
+    const addRangeButton = (label: string) => {
+
+      // creating new elements to mimick selectable card component
+      const div2 = document.createElement('div');
+      div2.className = "nav-item-link"
+      div2.innerHTML = label;
+
+      pluginData.rangesButtons[label] = div2;
+
+      // create li elements inside the dropdown
+      const item = document.createElement('li');
+      item.className = "nav-item";
+
+      // append those nav items to the li items
+      item.appendChild(pluginData.rangesButtons[label]);
+
+      // append the li item to the ul rangeNav prop
+      pluginData.rangesNav.appendChild(item);
+
+      // return the ranges buton prop
+      return pluginData.rangesButtons[label];
+    };
+
+    const selectActiveRangeButton = (selectedDates: Array<Date>) => {
+      const current = pluginData.rangesNav.querySelector('.active');
+
+      if (current) {
+        current.classList.remove('active');
+      }
+      /** conditional statment to extract start and end dates from selectedDates,
+      *   then loop through ranges prop in pluginData
+      *   and check if chosen dates equal to a date in the ranges prop
+      *   if they are equal, add the active class
+      */
+     
+      if (selectedDates.length > 0 && activeLabel) {
+        // const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
+        // selected.forEach(el => {
+        //   if (el.innerHTML === activeLabel)
+        //   el.classList.add('active')
+        //   return
+        // })
+
+        pluginData.rangesButtons[activeLabel].classList.add('active');
+      }
+    }
+
+    const isLabelMatchingSelectedDates = (selectedDates: Array<Date>) => {
+      return activeLabel && selectedDates[0].toDateString() === pluginData.ranges[activeLabel][0].toDateString() &&
+        selectedDates[1].toDateString() === pluginData.ranges[activeLabel][1].toDateString()
+    }
+
+
+    return {
+      // onReady is a hook from flatpickr that runs when calender is in a ready state
+      onReady(selectedDates: Array<Date>) {
+        // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
+        for (const [label, range] of Object.entries(pluginData.ranges)) {
+          addRangeButton(label).addEventListener('click', function () {
+
+            const start = moment(range[0]).toDate();
+            const end = moment(range[1]).toDate();
+
+            if (!start) {
+              fp.clear();
+            }
+            else {
+              activeLabel = label
+              fp.setDate([start, end], true);
+              fp.close();
+            }
+          });
+        }
+        // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
+        if (pluginData.rangesNav.children.length > 0) {
+
+          fp.calendarContainer.prepend(pluginData.rangesNav);
+          pluginData.rangesNav.classList.add('quick-pick-ul')
+          fp.calendarContainer.classList.add('quick-pick-drop-down');
+
+          /**
+           *
+           * @param {Array} selectedDates
+           */
+          // function to give the active button the active class
+          selectActiveRangeButton(selectedDates);
+        }
+      },
+      onValueUpdate(selectedDates: Array<Date>) {
+        selectActiveRangeButton(selectedDates)
+      },
+
+      onClose(selectedDates: Array<Date>) {
+        // remove the active class from the button if the selected dates don't match the label
+        if (!isLabelMatchingSelectedDates(selectedDates)) {
+          pluginData.rangesButtons[activeLabel]?.classList.remove('active');
+          activeLabel = ""
+        }
+
+        // set the date to the first date in the array if the user types only one date
+        if (selectedDates.length === 1) {
+          fp.setDate([selectedDates[0], selectedDates[0]], true);
+        }
+
+        // set the input value to the selected dates when the dropdown is closed
+        if (selectedDates.length < 2 && selectedDates.length > 0) {
+          fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
+        }
+      }
+    };
+  };
+}
+
+export default quickPickPlugin;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -1,3 +1,4 @@
+@import "../../tokens/colors";
 // Calendar Icon Styles
 .cal_icon_wrapper {
   pointer-events: none;
@@ -13,8 +14,8 @@
   padding-left: $space_sm - 1;
   color: $text_lt_light;
   @media (hover: hover) {
-    &:hover {
-      cursor: pointer;
+    &:hover{
+      background-color: rgba($focus_input_light,$opacity_5);
     }
   }
   &.dark {

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -0,0 +1,75 @@
+@import "../../tokens/animation-curves";
+@import "../../tokens/colors";
+@import "../../tokens/typography";
+@import "../../tokens/titles";
+@import "../../tokens/spacing";
+
+$pb_card_border_width: 1px;
+$pb_card_border_radius: $border_rad_heavier;
+
+// used to display dropdown on the left of the calender
+.quick-pick-drop-down {
+  width: auto;
+  display: grid;
+}
+
+.quick-pick-ul {
+  padding: $space_xs 0px;
+  margin: 0;
+  list-style: none;
+}
+
+.nav-item {
+  list-style: none;
+  border-radius: 6px;
+  border-bottom: 0;
+  margin: $space_xs $space_sm;
+}
+
+.nav-item-link {
+  text-decoration: none;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_light;
+  border-radius: $pb_card_border_radius;
+  padding: $space_xs 14px;
+  transition-property: color, background-color;
+  transition-duration: 0.15s;
+  transition-timing-function: $bezier;
+  line-height: 1.4;
+  color: $charcoal;
+  font-size: $font_default;
+  font-weight: $regular;
+  &.active {
+    border-width: 2px;
+    border-color: $primary;
+  }
+  @media (hover:hover) {
+    &:hover {
+      cursor: pointer;
+      box-shadow: $shadow-deep;
+      border-color: $slate;
+    }
+  }
+}
+
+// Hide the calendar
+.quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
+  display: none;
+}
+
+@media only screen and (max-width: 767px) {
+  .quick-pick-ul {
+    padding: $space_xs $space_xs;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .nav-item {
+    margin: $space_xxs $space_xs;
+  }
+
+  .nav-item-link {
+    padding: $space_xs $space_xxs;
+  }
+}

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

@@ -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

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

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -87,7 +87,7 @@ const NavItem = (props: NavItemProps) => {
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
-        
+
         {iconRight &&
           <div
             className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -44,7 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
-       letter-spacing: normal;
+      letter-spacing: normal;
     }
   }
 }

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 %>