playbook_ui 14.5.0.pre.rc.1 → 14.5.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7484d7617b219fe105f5a58ba36071692fbf20c8c4e3c9d18f92fb6ed5d4bfaa
-  data.tar.gz: 5c23ad7579a4f7dacba6930fcc1526e0bf8be443d2e8805fc7fe0fb5c9171cb2
+  metadata.gz: '083ad248c1cd517b5c07e07a78869bd821647a2f2ce56639eb3f1a70f5dfa505'
+  data.tar.gz: 188a7a944b5cbf20cc3caf1440b2507afa6ca34396c2130756fc4920add09192
 SHA512:
-  metadata.gz: ad3c6b73e5f3d9f1f0738761edc117b96e0d731325fb1e3129ab0cd8c9f786c5b030e5e45938d703205d6ecb54acdf407f50557fd16cd258a273ecfc90ebd404
-  data.tar.gz: bbf877e5529fbfb7a3047e37dd503a2173d2af7df9597fec1052b8fcb05918efd39d2ce83dfe61dfabd7ebd08239f4a642c355c8c91b94e42f453d34c6943fbb
+  metadata.gz: 356fc851d3550acb895a6b48f98a8b9e598e7f33bcacd9e12bdbf0702b689adb50595eb24864adfaf8fe4fd0fcdb1a6b7140ce981962ffe694116aa0ff8bf239
+  data.tar.gz: 5561e611de275821882f3a30a934c382c9b188ea1bc09e4960a3ac4f570057e9b761590fbb9a641311c75e8c3dc4ed4b73f28477bbea05d7abb429911f9b9a83

data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx

@@ -4,6 +4,7 @@ import { Header } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 
 import Icon from "../../pb_icon/_icon"
+import { getAllIcons } from "../../utilities/icons/allicons"
 
 import { displayIcon } from "../Utilities/IconHelpers"
 
@@ -11,21 +12,39 @@ type SortIconButtonProps = {
   header: Header<GenericObject, unknown>
   sortIcon?: string | string[]
 }
+
 export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
 
+const firstIcon = displayIcon(sortIcon)[0] 
+const secondIcon = displayIcon(sortIcon)[1] 
+const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
+const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
+
   return (
     <>
       {header.column.getIsSorted() === "desc" ? (
         <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[0]}
+            key={firstIcon}
         >
-          <Icon icon={displayIcon(sortIcon)[0]} />
+        { firstIcon === "arrow-up-short-wide" ? (
+          <Icon 
+              className="svg-inline--fa"
+              customIcon={upIcon}
+          /> ) : (
+          <Icon icon={firstIcon} />
+        )}
         </div>
       ) : (
         <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[1]}
+            key={secondIcon}
         >
-          <Icon icon={displayIcon(sortIcon)[1]} />
+        { secondIcon === "arrow-down-short-wide" ? (
+          <Icon 
+              className="svg-inline--fa"
+              customIcon={downIcon}
+          /> ) : (
+          <Icon icon={secondIcon} />
+        )}
         </div>
       )}
     </>

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import Icon from '../pb_icon/_icon'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 const contactTypeMap: { [key: string]: string } = {
   'cell': 'mobile',
@@ -18,6 +19,8 @@ const contactTypeMap: { [key: string]: string } = {
   'wrong-phone': 'phone-slash',
 }
 
+const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
+
 const formatContact = (contactString: string, contactType: string) => {
   if (contactType === 'email') return contactString
 
@@ -91,11 +94,20 @@ const Contact = (props: ContactProps): React.ReactElement => {
           dark={dark}
           tag="span"
       >
-        <Icon
-            dark={dark}
-            fixedWidth
-            icon={contactTypeMap[contactType] || 'phone'}
-        />
+          {contactType === 'email' ? (
+            <Icon 
+                className="svg-inline--fa envelope"
+                customIcon={envelopeIcon} 
+                dark={dark} 
+                fixedWidth 
+            />
+          ) : (
+            <Icon
+                dark={dark}
+                fixedWidth
+                icon={contactTypeMap[contactType] || 'phone'}
+            />
+          )}
         {` ${formatContact(contactValue, contactType)} `}
         {contactDetail && (
           <Caption

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -4,12 +4,20 @@
         classname: "pb_contact_kit", 
         color: "light",
         dark: object.dark
-      }) do %>
-    <%= pb_rails("icon", props: { 
-          icon: object.contact_icon, 
-          fixed_width: true,
-          dark: object.dark
-        }) %>
+  }) do %>
+    <% if contact_type == "email" %>
+      <%= pb_rails("icon", props: { 
+            custom_icon: Playbook::Engine::root.join(envelope_path),
+            fixed_width: true,
+            dark: object.dark
+      }) %>
+    <% else %>
+      <%= pb_rails("icon", props: { 
+            icon: object.contact_icon, 
+            fixed_width: true,
+            dark: object.dark
+      }) %>
+    <% end %>
     <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -44,6 +44,10 @@ module Playbook
         end
       end
 
+      def envelope_path
+        "app/pb_kits/playbook/utilities/icons/envelope.svg"
+      end
+
     private
 
       def formatted_value

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -79,7 +79,7 @@ test('returns correct icon', () => {
   expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
   expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
   expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
-  expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-envelope')
+  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toHaveClass('envelope')
   expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
   expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
   expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -161,7 +162,7 @@ useEffect(() => {
     }
     return base
   }
-
+  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
     <div
@@ -231,8 +232,8 @@ useEffect(() => {
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon
-                      className="angle_down_icon"
-                      icon="angle-down"
+                      className="angle_down_icon svg-inline--fa"
+                      customIcon={angleDown}
                   />
                 </div>
               </div>

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -61,7 +61,7 @@
       >
         <%= pb_rails("icon", props: {
           classname: "angle_down_icon",
-          icon: "angle-down"
+          custom_icon: Playbook::Engine::root.join(angle_down_path)
         }) %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -118,6 +118,10 @@ module Playbook
         class_string += error_class
         class_string
       end
+
+      def angle_down_path
+        "app/pb_kits/playbook/utilities/icons/angle-down.svg"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -5,6 +5,9 @@ import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
 import quickPickPlugin from './plugins/quickPick'
+import { getAllIcons } from '../utilities/icons/allicons';
+
+const angleDown = getAllIcons().angleDown.string
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -256,10 +259,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // Adding dropdown icons to year and month selects
-  dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  // Adding dropdown icons to year and month select
+  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
+    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
   // if (picker.weekElements[0].parentElement){
   //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   // }

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -14,4 +14,4 @@
     }
     fpInline.config.onChange.push(showAngleDownHandler)
   })
-<% end %>
+<% end %>

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

@@ -76,7 +76,11 @@
   pointer-events: none;
   color: $text_lt_light;
 }
-
+.year-dropdown-icon svg, .month-dropdown-icon svg {
+  width: 16px;
+  margin-top: 6px;
+  margin-left: -2px;
+}
 // Left - Right Arrow Styling
 .flatpickr-prev-month {
   display: flex;
@@ -113,4 +117,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_map/_map_controls.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Button from "../pb_button/_button";
 import Icon from "../pb_icon/_icon";
 import Flex from "../pb_flex/_flex";
+import { getAllIcons } from "../utilities/icons/allicons"
 
 type MapControlTypes = {
   zoomBtns?: boolean, 
@@ -12,6 +13,8 @@ type MapControlTypes = {
   children?: React.ReactNode | React.ReactNode[]
 }
 
+const eyeIcon = getAllIcons()["eye"]
+
 const MapControls = ({
   zoomBtns,
   zoomInClick,
@@ -42,7 +45,10 @@ const MapControls = ({
             <Button className="map-flyto-button"
                 onClick={flyToClick}
             >
-              <Icon icon="eye" />
+              <Icon 
+                  className="svg-inline--fa"
+                  customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }} 
+              />
             </Button>
           ) : null}
         </>

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -12,6 +12,7 @@ import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
 import TextInput from '../pb_text_input/_text_input'
 import { GenericObject } from "../types"
+import { getAllIcons } from "../utilities/icons/allicons"
 
 type PassphraseProps = {
   aria?: { [key: string]: string },
@@ -96,6 +97,9 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
     />
   )
 
+  const shieldIcon = getAllIcons()["shieldCheck"]
+  const eyeIcon = getAllIcons()["eye"]
+
   return (
     <div
         {...ariaProps}
@@ -135,7 +139,8 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
                         size="xs"
                     >
                       <Icon
-                          icon="shield-check"
+                          className="svg-inline--fa"
+                          customIcon={shieldIcon.icon as unknown as { [key: string]: SVGElement }}
                           marginRight="xs"
                       />
                       {tip}
@@ -173,7 +178,10 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
                 color="light"
                 dark={dark}
             >
-              <Icon icon="eye" />
+            <Icon  
+                className="svg-inline--fa"
+                customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
+            />
             </Body>
           </span>
         </div>

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
 
+import { getAllIcons } from "../../utilities/icons/allicons"
+
 import Flex from '../../pb_flex/_flex'
 import PbReactPopover from '../../pb_popover/_popover'
 import Button from '../../pb_button/_button'
@@ -65,6 +67,7 @@ const toolbarDropdownItems = [
     },
 ]
 
+  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   const handleTogglePopover = () => {
     setShowPopover(!showPopover)
@@ -92,8 +95,10 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
         <Flex className={showPopover ? "fa-flip-vertical" : ""}
             display="inline_flex"
         >
-          <Icon fixedWidth
-              icon="angle-down"
+          <Icon 
+              className="svg-inline--fa"
+              customIcon={angleDown}
+              fixedWidth
               margin-left="xs"
           />
         </Flex>
@@ -125,8 +130,10 @@ const popoverReference = (
             <Flex className={showPopover ? "fa-flip-vertical" : ""}
                 display="inline_flex"
             >
-              <Icon fixedWidth
-                  icon="angle-down"
+              <Icon 
+                  className="svg-inline--fa"
+                  customIcon={angleDown}
+                  fixedWidth
                   margin-left="xs"
               />
             </Flex>
@@ -169,4 +176,4 @@ const popoverReference = (
   )
 }
 
-export default ToolbarDropdown
+export default ToolbarDropdown

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -90,6 +91,8 @@ const Select = ({
     compactClass
   );
 
+  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
+
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{
     if (children) return children
@@ -134,9 +137,9 @@ const Select = ({
         {selectBody}
         { multiple !== true ?
           <Icon
-              className="pb_select_kit_caret"
+              className="pb_select_kit_caret svg-inline--fa"
+              customIcon={angleDown}
               fixedWidth
-              icon="angle-down"
           />
           :
           null

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -26,7 +26,7 @@
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% end %>
     <% if object.multiple != true %>
-      <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
+      <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
     <% end %>
   </label>
 <% end %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -84,6 +84,10 @@ module Playbook
         end
       end
 
+      def angle_down_path
+        "app/pb_kits/playbook/utilities/icons/angle-down.svg"
+      end
+
     private
 
       def error_class

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -45,7 +45,6 @@
       }
     }
     .text_input_wrapper {
-      margin-bottom: 1rem;
       input::placeholder,
       .text_input .placeholder {
         @include pb_body_light_dark;

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -68,7 +68,6 @@
     opacity: 0;
   }
   [class^=pb_list_kit] {
-    margin-top: -$space-sm;
     li {
       transition: background-color .25s ease-in-out;
     }

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -109,6 +109,20 @@ test('should pass className prop', () => {
   expect(kit).toHaveClass(className)
 })
 
+test('typeahead textinput has mb_sm class by default', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'default-mb-test' }}
+        options={options} 
+    />
+  )
+
+  const kit = screen.getByTestId('default-mb-test')
+  expect(kit).toHaveClass("pb_typeahead_kit mb_sm")
+  const textInput = kit.querySelector(".pb_text_input_kit")
+  expect(textInput).toHaveClass("mb_none")
+})
+
 test('typeahead with colored pills', () => {
   render(
     <Typeahead

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -45,6 +45,7 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
+  marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
@@ -78,6 +79,7 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
+  marginBottom = "sm",
   pillColor,
   ...props
 }: TypeaheadProps) => {
@@ -138,6 +140,7 @@ const Typeahead = ({
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
+    `mb_${marginBottom}`,
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -11,14 +11,15 @@ type Props = {
 const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
-      dark={props.selectProps.dark}
-      error={props.selectProps.error}
-      label={props.selectProps.label}
+        dark={props.selectProps.dark}
+        error={props.selectProps.error}
+        label={props.selectProps.label}
+        marginBottom="none"
     >
       <Flex>
         <components.Control
-          className="text_input"
-          {...props}
+            className="text_input"
+            {...props}
         />
       </Flex>
     </TextInput>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb

@@ -0,0 +1,88 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "None",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "none",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XXS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xxs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "Default - SM",
+    name: :foo,
+    is_multi: false,
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "MD",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "md",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "LG",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "lg",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XL",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xl",
+  })
+%>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadMarginBottom = (props) => {
+  return (
+    <>
+      <Typeahead
+          label="None"
+          marginBottom="none"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XXS"
+          marginBottom="xxs"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="XS"
+          marginBottom="xs"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="Default - SM"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="MD"
+          marginBottom="md"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="LG"
+          marginBottom="lg"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XL"
+          marginBottom="xl"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadMarginBottom