playbook_ui 13.34.1.pre.alpha.play1447addrequiredicons3455 → 13.34.1.pre.alpha.powerfontsexternal3403

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2fcd2de5f292c6e6cfab5602d059d9002f58aeb589f5407d34d53d52ec4b5c1a
-  data.tar.gz: 1c032d39427c5b2da6ee84ba67456e6c0676e81f735b3414cdf8d8614094cb3b
+  metadata.gz: ba1baf1e9d06dc610570c22314d7876c1aa4bc553e1f75833ae12b0cce35b9c9
+  data.tar.gz: 3b5cd6d469096228dca0e4584be3f9f77cfa495d571705dbc4149ea202ad96f8
 SHA512:
-  metadata.gz: 7650d8c50371237b8064c252258aa600662906e4e1d0ab65e3d50a62d840646921e75e5daf87f99bc20069b24cf75f4362cc49ddaa0498d7008345113c2596c7
-  data.tar.gz: 8b7826b28a41fe4c341eaa403448b9c6e683d77ab1be17f4ce2ce99af663f0338ff4a5e5cb6db7b859f603b056089a7a4f608c3a05519415aa143e8784a78c66
+  metadata.gz: db5fc0981967fe16c7e4f3ac72a143273d256b74c0b5f2f1e6385d9bf4728ac4f8111919852233f3e9b53f12b57edda9437cb8e428fd43f73a3429004e85f916
+  data.tar.gz: e668b958bf78cf16f01d852d5bf26706af6316f8c30ef088945a0afc06e3e57a9ede1f8034da8492f45057e15a4089f29060d7cd7d10809bf2a8c47afe7c1ebd

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -7,7 +7,6 @@ import {
   buildCss,
   buildDataProps,
   buildHtmlProps } from '../utilities/props'
-import { getAllIcons } from "../utilities/icons/allicons"
 
 import Icon from '../pb_icon/_icon'
 
@@ -50,7 +49,6 @@ const Badge = (props: BadgeProps): React.ReactElement => {
     globalProps(props),
     className
   )
-  const timesIcon = getAllIcons()["times"]
 
   return (
     <div
@@ -69,10 +67,8 @@ const Badge = (props: BadgeProps): React.ReactElement => {
               {...closeProps}
           >
             <Icon
-                className="svg-inline--fa"
-                customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
                 fixedWidth
-                icon=""
+                icon="times"
             />
           </span>
         )}

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -3,7 +3,6 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
-import { getAllIcons } from "../utilities/icons/allicons"
 
 import Icon from '../pb_icon/_icon'
 import Caption from "../pb_caption/_caption"
@@ -66,7 +65,6 @@ const buttonClassName = (props: ButtonPropTypes) => {
 
   return className
 }
-const spinnerIcon = getAllIcons()["spinner"]
 
 const Button = (props: ButtonPropTypes): React.ReactElement => {
   const {
@@ -105,10 +103,8 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
   const loadingIcon = (
     <div className="loading-icon">
       <Icon
-          className="svg-inline--fa"
-          customIcon={spinnerIcon.icon as unknown as { [key: string]: SVGElement }}
           fixedWidth
-          icon=""
+          icon="spinner"
           pulse
       />
     </div>

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -22,7 +22,7 @@
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
-    <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(spinner_path), pulse: true, fixed_width: true, classname: "loading-icon" }) %>
+    <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
     <% if object.icon && object.icon_right %>
         <span>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -103,10 +103,6 @@ module Playbook
       def highlight_active
         variant === "reaction" && object.highlight ? " active" : ""
       end
-
-      def spinner_path
-        "app/pb_kits/playbook/utilities/icons/spinner.svg"
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js

@@ -57,7 +57,7 @@ describe('DateTime Kit', () => {
 
     const kit = screen.getByTestId(testId)
     const text = kit.querySelector('.pb_time_kit_md.ml_sm')
-    const clock = kit.querySelector('.pb_custom_icon.svg-inline--fa.clock')
+    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
 
     expect(clock).toBeInTheDocument()
     expect(text.textContent).toEqual(' 12:00a EST')
@@ -72,7 +72,7 @@ describe('DateTime Kit', () => {
     )
 
     const kit = screen.getByTestId(testId)
-    const clock = kit.querySelector('.pb_custom_icon.svg-inline--fa.clock')
+    const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
 
     expect(clock).toBeNull()
   })

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

@@ -1,25 +1,20 @@
 import React from 'react'
 import Icon from '../pb_icon/_icon'
 
-import { getAllIcons } from "../utilities/icons/allicons"
-
 type CloseIconProps = {
   onClose: () => void,
 }
 
 export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
   const { onClose } = props
-  const timesIcon = getAllIcons()["times"]
   return (
     <div
         className="pb_dialog_close_icon"
         onClick={onClose}
     >
       <Icon
-          className="svg-inline--fa"
-          customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
           fixedWidth
-          icon=""
+          icon="times"
       />
     </div>
   )

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

@@ -3,7 +3,7 @@
             <%= content.presence || object.title %>
 
             <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
-                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
+                <%= pb_rails("icon", props:{icon: "times"}) %>
             </button>
         <% end %>
         <%= pb_rails("section_separator") %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -12,10 +12,6 @@ module Playbook
       def sticky_header
         "dialog_sticky_header"
       end
-
-      def times_icon
-        "app/pb_kits/playbook/utilities/icons/times.svg"
-      end
     end
   end
 end

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

@@ -1,7 +1,6 @@
 import React from "react";
 import classnames from "classnames";
 
-import { getAllIcons } from "../utilities/icons/allicons"
 import { buildCss, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
@@ -43,23 +42,21 @@ const Time = (props: TimeProps) => {
     globalProps(props),
     className
   );
-  const clockIcon = getAllIcons()["clock"]
+
   const htmlProps = buildHtmlProps(htmlOptions);
 
   return (
     <div 
-        {...htmlProps}
-        className={classes} 
+      {...htmlProps}
+      className={classes} 
     >
       {showIcon && (
         unstyled
           ? (
               <span>
-                    <Icon
-                        className="svg-inline--fa clock"
-                        customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
-                        icon=""
-                    />
+                <Icon fixedWidth
+                    icon="clock"
+                />
                 {" "}
               </span>
             )
@@ -68,13 +65,10 @@ const Time = (props: TimeProps) => {
               <Body color="light"
                   tag="span"
               >
-              <Icon
-                  className="svg-inline--fa clock"
-                  customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
-                  fixedWidth
-                  icon=""
-                  size={size === "md" ? "" : "sm"}
-              />
+                <Icon fixedWidth
+                    icon="clock"
+                    size={size === "md" ? "" : "sm"}
+                />
                 {" "}
               </Body>
             </>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -13,7 +13,7 @@
   <% if object.unstyled %>
     <% if object.show_icon %>
       <span>
-        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       </span>
     <% end %>
 
@@ -27,7 +27,7 @@
   <% elsif size == "md" %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
 
@@ -41,7 +41,7 @@
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true, size: "sm" }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
 

data/app/pb_kits/playbook/pb_time/time.rb

@@ -38,10 +38,6 @@ module Playbook
       def pb_date_time
         Playbook::PbKit::PbDateTime.new(time, timezone)
       end
-
-      def clock_icon
-        "app/pb_kits/playbook/utilities/icons/clock.svg"
-      end
     end
   end
 end