playbook_ui 9.19.0.pre.alpha.pre.fonts2 → 10.0.1.alpha.railscusticon

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f9e086393efd782845d2170866eed630050ea09ae847b7111bb239dbe16faea
-  data.tar.gz: 2fcac662d48bc0ff3d5762a5291d560fd9fb8a1742d0f681657828b77c02ef7b
+  metadata.gz: 2fac834bfee4b1e2becacc6beb81454bc07c2245b4aa5868ce39f15680f17b75
+  data.tar.gz: 3906161634d9eff14a41c5c754f754b371aeb7ab9e9619a050f4b4bec81eaa59
 SHA512:
-  metadata.gz: 0e020674d0090ea0b0bd07368aaaeb644e41447c1d8685ddd071f648714882b23c205b59603433a24563167682e95c7cbaf2d17f75394dcc246e1ba706b7587d
-  data.tar.gz: b33655850cb3989c942685547837070f68e4c5a550c70ed9ef2a7fda8bdfbcdac7a9efaa6f510364a317a1014a771c01751af15d46cd77d1e76588b984958d0b
+  metadata.gz: 3e85c115a8506cf4b388bdb0e07e3fa34b516f861ed72e7796355caff50439489c5073484c5691b995192a914395ed40ddd906c85fedc0e97843486699619a3d
+  data.tar.gz: 4f875cce483498737eca8abab11167a83272706cb345f2068a70d928f50ef67e6a0ddaa267ab7a716c005bdeeb7c0b88d0407efad90b59045892e5f198155e85

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-@import 'tokens/fonts';
 @import 'pb_background/background';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -19,7 +19,7 @@ type AvatarProps = {
   imageAlt?: string,
   imageUrl: string,
   name: string,
-  size?: "md" | "lg" | "sm" | "xl" | "xs",
+  size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   status: "away" | "offline" | "online",
 }
 

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -3,6 +3,7 @@
 @import "../tokens/typography";
 
 $avatar-sizes: (
+  "xxs":  20px,
   "xs":   28px,
   "sm":   38px,
   "md":   60px,
@@ -68,6 +69,10 @@ $avatar-sizes: (
         bottom: auto;
         left: auto;
 
+        &.size_xxs {
+          right: -5px;
+        }
+
         &.size_xs {
           right: -4px;
         }

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -9,7 +9,7 @@ module Playbook
       prop :name, type: Playbook::Props::String,
                   default: ""
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md base lg xl],
+                  values: %w[xxs xs sm md base lg xl],
                   default: "md"
       prop :status
 

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb

@@ -1,3 +1,13 @@
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "xxs",
+    image_alt: "Terry Johnson Standing",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "away"
+  }) %>
+
+<br>
+
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "xs",

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -4,6 +4,15 @@ import { Avatar } from '../../'
 const AvatarDefault = (props) => {
   return (
     <div>
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="xxs"
+          status="online"
+          {...props}
+      />
+      <br />
       <Avatar
           imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.html.erb

@@ -1,3 +1,4 @@
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xxs" }) %>
 <%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs" }) %>
 <%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm" }) %>
 <%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md" }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

@@ -4,6 +4,11 @@ import { Avatar } from '../../'
 const AvatarDefault = (props) => {
   return (
     <div>
+      <Avatar
+          name="Terry Johnson"
+          size="xxs"
+          {...props}
+      />
       <Avatar
           name="Terry Johnson"
           size="xs"

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.html.erb

@@ -1,3 +1,4 @@
+<%= pb_rails("avatar", props: { image_url: "", name: "Terry Johnson", size: "xxs" }) %>
 <%= pb_rails("avatar", props: { image_url: true, name: "Terry Johnson", size: "xs" }) %>
 <%= pb_rails("avatar", props: { image_url: 4, name: "Terry Johnson", size: "sm" }) %>
 <%= pb_rails("avatar", props: { image_url: "https://google.com", name: "Terry Johnson", size: "md" }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx

@@ -4,6 +4,12 @@ import { Avatar } from '../../'
 const AvatarNoImage = (props) => {
   return (
     <div>
+      <Avatar
+          imageUrl="Just some text here"
+          name="Terry Johnson"
+          size="xxs"
+          {...props}
+      />
       <Avatar
           imageUrl="Just some text here"
           name="Terry Johnson"

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

@@ -1,6 +1,7 @@
 @import "./button_mixins";
 
 [class^=pb_button_kit]{
+  @include pb_button;
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -12,8 +12,17 @@ $pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
+@mixin pb_button_variant($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
+  background-color: $bg;
+  color: $color;
+  border-color: $border;
+
+  &:active {
+    border-color: darken($bg, $pb_button_hover_darken);
+  }
+}
 
-@mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
+@mixin pb_button {
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
@@ -21,15 +30,12 @@ $pb_button_border_width: 0px;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
-  border-color: $border;
   border-style: solid;
   border-radius: $border_rad_light;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;
   cursor: pointer;
-  background-color: $bg;
-  color: $color;
   outline: none;
   transition: background $transition_default ease, color $transition_default ease;
   box-sizing: border-box;
@@ -57,7 +63,6 @@ $pb_button_border_width: 0px;
   &:active {
     outline: none;
     border-width: $pb_button_border_width;
-    border-color: darken($bg, $pb_button_hover_darken);
   }
   
 };
@@ -68,7 +73,7 @@ $pb_button_border_width: 0px;
 
 // Primary ======================
 @mixin pb_button_primary {
-  @include pb_button;
+  @include pb_button_variant($primary_action, $text_dk_default, transparent);
 
   @media (hover:hover) {
     &:hover {
@@ -79,7 +84,7 @@ $pb_button_border_width: 0px;
 
 // Secondary ====================
 @mixin pb_button_secondary {
-  @include pb_button(rgba($primary_action, 0.05), $primary_action);
+  @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -90,7 +95,7 @@ $pb_button_border_width: 0px;
 
 // Link =========================
 @mixin pb_button_link {
-  @include pb_button($transparent, $primary_action);
+  @include pb_button_variant($transparent, $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -102,7 +107,7 @@ $pb_button_border_width: 0px;
 // Disabled ====================
 @mixin pb_button_disabled {
   $disabled_color: rgba($charcoal, $opacity_5);
-  @include pb_button(rgba($slate, $opacity_4), $disabled_color);
+  @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
 }
 
@@ -127,7 +132,7 @@ $pb_button_border_width: 0px;
 
 // Dark Primary =================
 @mixin pb_button_primary_dark{
-  @include pb_button($primary_action);
+  @include pb_button_variant($primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -138,7 +143,7 @@ $pb_button_border_width: 0px;
 
 // Dark Secondary ==============
 @mixin pb_button_secondary_dark{
-  @include pb_button(rgba($white, 0.2), $white);
+  @include pb_button_variant(rgba($white, 0.2), $white);
 
   @media (hover:hover) {
     &:hover {
@@ -149,7 +154,7 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button($transparent, $white);
+  @include pb_button_variant($transparent, $white);
 
   @media (hover:hover) {
     &:hover {
@@ -161,6 +166,6 @@ $pb_button_border_width: 0px;
 // Dark Disabled ====================
 @mixin pb_button_disabled_dark {
   $disabled_color: rgba($white, $opacity_5);
-  @include pb_button(rgba($slate, $opacity_5), $disabled_color);
+  @include pb_button_variant(rgba($slate, $opacity_5), $disabled_color);
   pointer-events: none;
 }

data/app/pb_kits/playbook/pb_dialog/_dialog.jsx

@@ -22,6 +22,7 @@ type DialogProps = {
   confirmButton?: string,
   data?: object,
   id?: string,
+  loading?: boolean,
   onCancel?: () => void,
   onChange?: () => void,
   onClose?: () => void,
@@ -45,6 +46,7 @@ const Dialog = (props: DialogProps) => {
     id,
     size = 'md',
     children,
+    loading = false,
     opened,
     onCancel = () => {},
     onConfirm = () => {},
@@ -123,7 +125,12 @@ const Dialog = (props: DialogProps) => {
 
           <If condition={cancelButton && confirmButton}>
             <Dialog.Footer>
-              <Button onClick={onConfirm}>{confirmButton}</Button>
+              <Button
+                  loading={loading}
+                  onClick={onConfirm}
+              >
+                {confirmButton}
+              </Button>
               <Button
                   id="cancel-button"
                   onClick={onCancel}

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -5,6 +5,7 @@ const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)
   const close = () => setIsOpen(false)
   const open = () => setIsOpen(true)
+  const [isLoading, setIsLoading] = useState(false)
 
   return (
     <>
@@ -13,9 +14,10 @@ const DialogDefault = () => {
           cancelButton="Cancel"
           className="wrapper"
           confirmButton="Okay"
+          loading={isLoading}
           onCancel={close}
           onClose={close}
-          onConfirm={close}
+          onConfirm={() => setIsLoading(!isLoading)}
           opened={isOpen}
           portalClassName="portal"
           size="sm"

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -9,6 +9,7 @@ type IconProps = {
   aria?: object,
   border?: boolean,
   className?: string,
+  customIcon?: SVGElement,
   data?: object,
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
@@ -46,6 +47,7 @@ const Icon = (props: IconProps) => {
     aria = {},
     border = false,
     className,
+    customIcon,
     data = {},
     fixedWidth = true,
     flip = false,
@@ -59,22 +61,29 @@ const Icon = (props: IconProps) => {
     size,
     spin = false,
   } = props
+
+  const faClasses = {
+    'fa-border': border,
+    'fa-fw': fixedWidth,
+    'fa-inverse': inverse,
+    'fa-li': listItem,
+    'fa-pulse': pulse,
+    'fa-spin': spin,
+    [`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...
+  // If so, then set fa-icon to "custom"
+  // this ensures the JS will not do any further operations
+  faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
+
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
     'far',
-    {
-      'fa-border': border,
-      'fa-fw': fixedWidth,
-      'fa-inverse': inverse,
-      'fa-li': listItem,
-      'fa-pulse': pulse,
-      'fa-spin': spin,
-      [`fa-${icon}`]: icon,
-      [`fa-${size}`]: size,
-      [`fa-pull-${pull}`]: pull,
-      [`fa-rotate-${rotation}`]: rotation,
-    },
+    faClasses,
     globalProps(props),
     className
   )
@@ -83,17 +92,28 @@ const Icon = (props: IconProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
+  // Add a conditional here to show only the SVG if custom
   return (
     <>
-      <i
-          {...dataProps}
-          className={classes}
-          id={id}
-      />
-      <span
-          {...ariaProps}
-          hidden
-      />
+      <If condition={customIcon}>
+        {
+          React.cloneElement(customIcon, {
+            ...dataProps,
+            className: classes,
+            id,
+          })
+        }
+        <Else />
+        <i
+            {...dataProps}
+            className={classes}
+            id={id}
+        />
+        <span
+            {...ariaProps}
+            hidden
+        />
+      </If>
     </>
   )
 }

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,3 +1,12 @@
 [class^=pb_icon_kit]{
 
 }
+
+// Rails custom icon styles
+svg.pb_custom_icon {
+  width: 1em;
+  fill: currentColor;
+  path {
+    fill: currentColor;
+  }
+}

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -0,0 +1,22 @@
+<%# SVG fill color inherited from css color property %>
+<div class="icon-wrapper" style="color:blue;">
+
+  <p><%= pb_rails("icon", props: { custom_icon: "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg", size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "3x" } ) %></p>
+  
+  <%= pb_rails("icon", props: { flip: "vertical", custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
+  <%= pb_rails("icon", props: { rotation: 90, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
+  <%= pb_rails("icon", props: { spin: true, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
+  <%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "8x" } ) %>
+
+
+  <%# <%= pb_rails("icon", props: { custom_icon: "https://en.wikipedia.org/wiki/Portable_Network_Graphics#/media/File:PNG_transparency_demonstration_1.png", size: "8x" } ) %>
+
+
+  <%= pb_rails("body", props: { 
+    text: "Custom icons must be SVGs. They can be locally or remotely
+    sourced and are compatible with other icon props (size, rotation,
+    spin, flip, etc). Their SVG fill colors will be inherited from
+    parent element's css color properties."
+  } ) %>
+</div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Icon } from '../../'
+
+// import Icons as config from 'power-icons'
+const config = {
+  moon: (
+    <svg
+        aria-hidden="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 IconCustom = (props) => {
+  return (
+    <div>
+      <Icon
+          customIcon={config.moon}
+          size="7x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconCustom

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

@@ -7,6 +7,7 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
 
   react:
   - icon_default: Icon Default
@@ -16,3 +17,4 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom

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

@@ -5,3 +5,4 @@ export { default as IconAnimate } from './_icon_animate.jsx'
 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'

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,7 +1,13 @@
-<%= content_tag(:i, nil,
-    id: object.id,
-    data: object.data,
-    class: object.classname ) %>
-<%= content_tag(:span, nil,
-    aria: { label: "#{object.icon} icon" }.merge(object.aria),
-    hidden: true ) %>
+<% if object.custom_icon %>
+  <%= object.render_svg(object.custom_icon) %>
+<% else %>
+  <%= content_tag(:i, nil,
+      id: object.id,
+      data: object.data,
+      class: object.classname
+  ) %>
+  <%= content_tag(:span, nil,
+      aria: { label: "#{object.icon} icon" }.merge(object.aria),
+      hidden: true
+  ) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "open-uri"
+
 module Playbook
   module PbIcon
     class Icon < Playbook::KitBase
@@ -10,7 +12,9 @@ module Playbook
       prop :flip, type: Playbook::Props::Enum,
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil
-      prop :icon, required: true
+      prop :icon
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :inverse, type: Playbook::Props::Boolean,
                      default: false
       prop :list_item, type: Playbook::Props::Boolean,
@@ -48,6 +52,34 @@ module Playbook
         )
       end
 
+      def custom_icon_classname
+        generate_classname(
+          "pb_icon_kit",
+          border_class,
+          fixed_width_class,
+          flip_class,
+          inverse_class,
+          list_item_class,
+          pull_class,
+          pulse_class,
+          rotation_class,
+          size_class,
+          spin_class,
+          separator: " "
+        )
+      end
+
+      def render_svg(path)
+        if File.extname(path) == ".svg"
+          doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
+          svg = doc.at_css "svg"
+          svg["class"] = "pb_custom_icon " + object.custom_icon_classname
+          raw doc
+        else
+          raise("Custom icon must be an svg. Please check your path and file type.")
+        end
+      end
+
     private
 
       def border_class

data/app/pb_kits/playbook/pb_message/_message.jsx

@@ -17,6 +17,7 @@ type MessageProps = {
   avatarName?: string,
   avatarStatus?: string,
   avatarUrl?: string,
+  children?: array<React.ReactNode> | React.ReactNode,
   className?: string,
   data?: object,
   id?: string,
@@ -33,6 +34,7 @@ const Message = (props: MessageProps) => {
     avatarName,
     avatarStatus = null,
     avatarUrl,
+    children,
     className,
     data = {},
     id,
@@ -93,10 +95,15 @@ const Message = (props: MessageProps) => {
             />
           </If>
         </Flex>
-        <Body
-            className="pb_message_body"
-            text={message}
-        />
+        <If condition={message}>
+          <Body
+              className="pb_message_body"
+              text={message}
+          />
+        </If>
+        <If condition={children}>
+          { children }
+        </If>
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_message/docs/_message_default.html.erb

@@ -53,3 +53,24 @@
   timestamp: "2 days ago",
   avatar_name: "Tim Wenhold"
 }) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  label: "",
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) do %>
+  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+<% end %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  label: "",
+  message: "Please hold for one moment, I'll check with my manager.",
+  timestamp: "2 days ago",
+  avatar_name: "Tim Wenhold"
+}) do %>
+  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import Message from '../_message'
+import Image from '../../pb_image/_image'
 
 const MessageDefault = (props) => {
   return (
@@ -61,6 +62,37 @@ const MessageDefault = (props) => {
           {...props}
       />
 
+      <br />
+      <br />
+
+      <Message
+          label="Keith Craig"
+          timestamp="2 days ago"
+          {...props}
+      >
+        <Image
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+        />
+      </Message>
+
+      <br />
+      <br />
+
+      <Message
+          label="Keith Craig"
+          message="Please hold for one moment, I will check with my manager."
+          timestamp="2 days ago"
+          {...props}
+      >
+        <Image
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+        />
+      </Message>
+
     </div>
   )
 }

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -32,9 +32,14 @@
           }) %>
         <% end %>
       <% end %>
-      <%= pb_rails("body", props: {
-        text: object.message,
-        classname: "pb_message_body"
-      }) %>
+      <% if content.present? %>
+        <%= content %>
+      <% end %>
+      <% if object.message.present? %>
+        <%= pb_rails("body", props: {
+          text: object.message,
+          classname: "pb_message_body"
+        }) %>
+      <% end %>
     </div>
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -16,6 +16,7 @@ type MultipleUsersProps = {
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
+  size?: string,
   users: array<object>,
 }
 
@@ -28,6 +29,7 @@ const MultipleUsers = (props: MultipleUsersProps) => {
     id,
     maxDisplayedUsers = 4,
     reverse = false,
+    size = 'xs',
     users,
   } = props
 
@@ -36,6 +38,7 @@ const MultipleUsers = (props: MultipleUsersProps) => {
   const usersToDisplay = users.slice(0, displayCount)
 
   const reverseClass = reverse === true ? 'reverse' : ''
+  const avatarSizeClass = size === 'xxs' ? 'xxs' : 'xs'
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
@@ -44,6 +47,11 @@ const MultipleUsers = (props: MultipleUsersProps) => {
     className
   )
 
+  const itemClasses = classnames(
+    'pb_multiple_users_item',
+    buildCss('multiple_users_badge', avatarSizeClass)
+  )
+
   return (
     <div
         {...ariaProps}
@@ -57,12 +65,12 @@ const MultipleUsers = (props: MultipleUsersProps) => {
             className="pb_multiple_users_item"
             dark={dark}
             key={index}
-            size="xs"
+            size={size}
         />
       ))}
 
       <If condition={users.length > maxDisplayedUsers}>
-        <div className="pb_multiple_users_item multiple_users_badge">
+        <div className={itemClasses}>
           {`+${users.length - 3}`}
         </div>
       </If>

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -6,11 +6,13 @@
 $pb_multiple_users_overlap: -9px;
 $pb_multiple_users_border_size: 1px;
 $pb_multiple_users_size: map-get($avatar-sizes, "xs");
+$pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
 
 [class^=pb_multiple_users_kit] {
   display: inline-flex;
 
-  .multiple_users_badge {
+  .multiple_users_badge_xs,
+  .multiple_users_badge_xxs {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -24,6 +26,11 @@ $pb_multiple_users_size: map-get($avatar-sizes, "xs");
     font-size: $font_smallest - 1;
   }
 
+  .multiple_users_badge_xxs {
+    width: $pb_multiple_users_size_xxs;
+    height: $pb_multiple_users_size_xxs;
+  }
+
   .pb_multiple_users_item {
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.html.erb

@@ -0,0 +1,95 @@
+<%= pb_rails("body", props: {
+  text: "xs",
+  color: "light"
+}) %>
+<%= pb_rails("multiple_users", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xs",
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("body", props: {
+  text: "xxs",
+  margin_top: "xs",
+  color: "light"
+}) %>
+<%= pb_rails("multiple_users", props: {
+  size: "xxs",
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xxs",
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Body, MultipleUsers } from '../../'
+
+const MultipleUsersSize = (props) => {
+  return (
+    <div>
+      <Body
+          color="light"
+          text="xs"
+      />
+      <MultipleUsers
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+        {
+          name: 'Keith Craig',
+          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+        },
+        {
+          name: 'Alicia Cooper',
+          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+        },
+      ]}
+          {...props}
+      />
+
+      <br />
+
+      <MultipleUsers
+          marginTop="xs"
+          size="xs"
+          users={[
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
+          {...props}
+      />
+
+      <Body
+          color="light"
+          marginTop="xs"
+          text="xxs"
+      />
+      <MultipleUsers
+          size="xxs"
+          users={[
+            {
+              name: 'Patrick Welch',
+              imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+            },
+            {
+              name: 'Lucille Sanchez',
+              imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+            },
+            {
+              name: 'Beverly Reyes',
+              imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+            },
+            {
+              name: 'Keith Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+            },
+            {
+              name: 'Alicia Cooper',
+              imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+            },
+          ]}
+          {...props}
+      />
+
+      <br />
+
+      <MultipleUsers
+          marginTop="xs"
+          size="xxs"
+          users={[
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersSize

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md

@@ -0,0 +1 @@
+User avatar default size is `xs` or `28px`, but you can pass in `xxs` to change avatar size to `20px`.

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

@@ -3,8 +3,10 @@ examples:
   rails:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
+  - multiple_users_size: Size
 
 
   react:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
+  - multiple_users_size: Size

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

@@ -1,2 +1,3 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
+export { default as MultipleUsersSize } from './_multiple_users_size.jsx'

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -4,11 +4,11 @@
     data: object.data,
     id: object.id) do %>
     <% object.users.take(object.display_count).each do |user| %>
-      <%= pb_rails("avatar", props: user.merge({size: "xs", classname: "pb_multiple_users_item", dark: object.dark}) ) %>
+      <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>
 
     <% if object.more_than_four %>
-      <div class="pb_multiple_users_item multiple_users_badge">
+      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %>">
         <%= "+#{object.users.count - object.display_count}" %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb

@@ -4,6 +4,9 @@ module Playbook
   module PbMultipleUsers
     class MultipleUsers < Playbook::KitBase
       prop :reverse, type: Playbook::Props::Boolean, default: false
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xxs xs],
+                  default: "xs"
       prop :users, type: Playbook::Props::HashArray, required: true
 
       def more_than_four

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -23,6 +23,8 @@
   overflow-x: auto;
 }
 [class^=pb_rich_text_editor_kit] {
+  // Fixes flex container resizing bug
+  overflow-x: auto;
   // Disables File Attatchment Button in Toolbar
   trix-toolbar [data-trix-button-group="file-tools"] {
     display: none;

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "9.18.0"
-  VERSION = "9.19.0.pre.alpha-fonts2"
+  PREVIOUS_VERSION = "10.0.1"
+  VERSION = "10.0.1.alpha.railscusticon"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.19.0.pre.alpha.pre.fonts2
+  version: 10.0.1.alpha.railscusticon
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-06-25 00:00:00.000000000 Z
+date: 2021-07-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1004,6 +1004,8 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
+- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
+- app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb
@@ -1223,6 +1225,9 @@ files:
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.html.erb
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx
+- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.html.erb
+- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
+- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
 - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
 - app/pb_kits/playbook/pb_multiple_users/docs/index.js
 - app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb
@@ -1972,7 +1977,6 @@ files:
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
-- app/pb_kits/playbook/tokens/_fonts.scss
 - app/pb_kits/playbook/tokens/_line_height.scss
 - app/pb_kits/playbook/tokens/_opacity.scss
 - app/pb_kits/playbook/tokens/_positioning.scss
@@ -2063,8 +2067,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project:
-rubygems_version: 2.7.3
+rubygems_version: 3.1.4
 signing_key:
 specification_version: 4
 summary: Playbook Design System

data/app/pb_kits/playbook/tokens/_fonts.scss

@@ -1,98 +0,0 @@
-@font-face {
-  src: url('fonts/ProximaNova-Regular.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 500;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-Light.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 400;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-Thin.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 100;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-Semibold.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 600;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-Bold.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 700;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-Extrabld.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 800;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-Black.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 900;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-RegularIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 500;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-LightIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 400;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-ThinIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 100;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-SemiboldIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 600;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-BoldIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 700;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-ExtrabldIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 800;
-    
-}
-@font-face {
-  src: url('fonts/ProximaNova-BlackIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 900;
-    
-}