playbook_ui 14.3.2.pre.alpha.pbntr523enablekitsforradiofix3809 → 14.3.2.pre.alpha.play1472newicons3773

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_multi_level_select/_multi_level_select.tsx

@@ -34,7 +34,6 @@ type MultiLevelSelectProps = {
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[]
   variant?: "multi" | "single"
-  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
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -51,8 +50,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     treeData,
     onSelect = () => null,
     selectedIds,
-    variant = "multi",
-    pillColor = "primary"
+    variant = "multi"
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -469,7 +467,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? returnedArray.map((item, index) => (
                       <FormPill
-                          color={pillColor}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
@@ -482,7 +479,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? defaultReturn.map((item, index) => (
                       <FormPill
-                          color={pillColor}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}

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

@@ -6,7 +6,6 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
-  - multi_level_select_color: With Pills (Custom Color)
 
   react:
   - multi_level_select_default: Default
@@ -14,4 +13,3 @@ examples:
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
-  - multi_level_select_color: With Pills (Custom Color)

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

@@ -3,4 +3,3 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
-export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -19,9 +19,6 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[multi single],
                      default: "multi"
-      prop :pill_color, type: Playbook::Props::Enum,
-                        values: %w[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],
-                        default: "primary"
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -37,7 +34,6 @@ module Playbook
           selectedIds: selected_ids,
           input_name: input_name,
           variant: variant,
-          pillColor: pill_color,
         }
       end
     end

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -3,25 +3,8 @@
 @import "../tokens/opacity";
 @import "../pb_avatar/avatar";
 
-@mixin avatar-size($size) {
-  height: $size;
-  width: $size;
-  .avatar_wrapper {
-    width: $size;
-    height: $size;
-  }
-}
-
-@mixin position($position) {
-  position: absolute;
-  @each $pos, $val in $position {
-    #{$pos}: $val;
-  }
-}
-
 [class^=pb_multiple_users_stacked_kit] {
   $container_size: map-get($avatar-sizes, "xs");
-  $bubble_container_size: map-get($avatar-sizes, "sm");
   $overlap: -15px;
   $border_size: 1px;
   $stacked_size: 18px;
@@ -34,24 +17,34 @@
   flex-shrink: 0;
   flex-grow: 0;
   [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
-    @include avatar-size($stacked_size);
-    &.dark {
+    height: $stacked_size;
+    width: $stacked_size;
+      &.dark {
+        .avatar_wrapper {
+          border: $pb_multiple_users_border_size solid $bg_dark;
+        }
+      }
       .avatar_wrapper {
-        border: $border_size solid $bg_dark;
+        border: $border_size solid $white;
+        height: $stacked_size;
+        width: $stacked_size;
+        img {
+          z-index: 0;
+        }
       }
     }
+  &[class*=_single] .pb_multiple_users_stacked_item {
+    width: $container_size;
+    height: $container_size;
     .avatar_wrapper {
-      border: $border_size solid $white;
-      img {
-        z-index: 0;
-      }
+      width: $container_size;
+      height: $container_size;
     }
   }
-  &[class*=_single] .pb_multiple_users_stacked_item {
-    @include avatar-size($container_size);
-  }
   [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
-    @include position((bottom: 0, right: 0));
+    position: absolute;
+    bottom: 0;
+    right: 0;
     z-index: 2;
     background: tint($primary, 90%);
     border-radius: $border_rad_mega;
@@ -70,73 +63,4 @@
     font-size: 0;
     color: transparent;
   }
-
-  &[class*=_bubble] {
-    @include avatar-size($bubble_container_size);
-    background-color: $bg_light;
-    border-radius: 50%;
-
-    &.dark {
-      background-color: $card_dark;
-    }
-    
-    [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
-      &.dark {
-        .avatar_wrapper {
-          border: $border_size solid $border_dark;
-        }
-      }
-    }
-
-    [class^=pb_avatar_kit] {
-      &.first_item {
-        @include position((top: 4px, left: 3px));
-        @include avatar-size(20px);
-
-        &.triple_bubble {
-          @include position((top: 4px, left: 4px));
-          @include avatar-size(16px);
-        }
-
-        &.quadruple_bubble {
-          @include position((top: 5px, left: 3px));
-          @include avatar-size(16px);
-        }
-      }
-
-      &.second_item {
-        @include position((bottom: 5px, right: 4px));
-        @include avatar-size(12px);
-
-        &.triple_bubble {
-          @include position((top: 13px, right: 2px));
-        }
-
-        &.quadruple_bubble {
-          @include position((bottom: 9px, right: 4px));
-        }
-      }
-
-      &.third_item {
-        @include position((bottom: 3px, left: 11px));
-        @include avatar-size(10px);
-
-        &.quadruple_bubble {
-          @include position((bottom: 3px, left: 9px));
-        }
-      }
-
-      &.fourth_item {
-        @include position((top: 5px, right: 6px));
-        @include avatar-size(8px);
-      }
-    }
-  }
-
-  &[class*=_single_bubble] {
-    [class^=pb_avatar_kit].first_item {
-      @include position((top: 0, left: 0));
-      @include avatar-size($bubble_container_size);
-    }
-  }
 }

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js

@@ -58,170 +58,4 @@ test('should pass aria prop', () => {
     render(<MultipleUsersStackedDefault />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', testId)
-})
-
-const MultipleUsersStackedSingleBubble = () => {
-    return (
-        <MultipleUsersStacked
-            aria={{ label: testId }}
-            className={className}
-            data={{ testid: testId }}
-            users={[
-                {
-                    name: "user1",
-                    imageUrl: "imageUser1",
-                    imageAlt: "nameUser1",
-                }
-            ]}
-            variant="bubble"
-        />
-    )
-}
-
-test('should have a single bubble', () => {
-    render(<MultipleUsersStackedSingleBubble />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble")
-
-    const firstItem = kit.querySelector('.first_item');
-    expect(firstItem).toBeInTheDocument();
-})
-
-const MultipleUsersStackedDoubleBubble = () => {
-    return (
-        <MultipleUsersStacked
-            aria={{ label: testId }}
-            className={className}
-            data={{ testid: testId }}
-            users={[
-                {
-                    name: "user1",
-                    imageUrl: "imageUser1",
-                    imageAlt: "nameUser1",
-                },
-                {
-                    name: "user2",
-                    imageUrl: "imageUser2",
-                    imageAlt: "nameUser2",
-                },
-            ]}
-            variant="bubble"
-        />
-    )
-}
-
-test('should have a double bubble', () => {
-    render(<MultipleUsersStackedDoubleBubble />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
-
-    const firstItem = kit.querySelector('.first_item');
-    expect(firstItem).toBeInTheDocument();
-
-    const secondItem = kit.querySelector('.second_item');
-    expect(secondItem).toBeInTheDocument();
-})
-
-const MultipleUsersStackedTripleBubble = () => {
-    return (
-        <MultipleUsersStacked
-            aria={{ label: testId }}
-            className={className}
-            data={{ testid: testId }}
-            users={[
-                {
-                    name: "user1",
-                    imageUrl: "imageUser1",
-                    imageAlt: "nameUser1",
-                },
-                {
-                    name: "user2",
-                    imageUrl: "imageUser2",
-                    imageAlt: "nameUser2",
-                },
-                {
-                    name: "user3",
-                    imageUrl: "imageUser3",
-                    imageAlt: "nameUser3",
-                },
-            ]}
-            variant="bubble"
-        />
-    )
-}
-
-test('should have a triple bubble', () => {
-    render(<MultipleUsersStackedTripleBubble />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
-
-    const firstItem = kit.querySelector('.first_item');
-    expect(firstItem).toBeInTheDocument();
-    expect(firstItem).toHaveClass("triple_bubble")
-
-    const secondItem = kit.querySelector('.second_item');
-    expect(secondItem).toBeInTheDocument();
-    expect(secondItem).toHaveClass("triple_bubble")
-
-    const thirdItem = kit.querySelector('.third_item');
-    expect(thirdItem).toBeInTheDocument();
-})
-
-const MultipleUsersStackedQuadrupleBubble = () => {
-    return (
-        <MultipleUsersStacked
-            aria={{ label: testId }}
-            className={className}
-            data={{ testid: testId }}
-            users={[
-                {
-                    name: "user1",
-                    imageUrl: "imageUser1",
-                    imageAlt: "nameUser1",
-                },
-                {
-                    name: "user2",
-                    imageUrl: "imageUser2",
-                    imageAlt: "nameUser2",
-                },
-                {
-                    name: "user3",
-                    imageUrl: "imageUser3",
-                    imageAlt: "nameUser3",
-                },
-                {
-                    name: "user4",
-                    imageUrl: "imageUser4",
-                    imageAlt: "nameUser4",
-                },
-                {
-                    name: "user5",
-                    imageUrl: "imageUser5",
-                    imageAlt: "nameUser5",
-                },
-            ]}
-            variant="bubble"
-        />
-    )
-}
-
-test('should have a quadruple bubble', () => {
-    render(<MultipleUsersStackedQuadrupleBubble />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
-
-    const firstItem = kit.querySelector('.first_item');
-    expect(firstItem).toBeInTheDocument();
-    expect(firstItem).toHaveClass("quadruple_bubble")
-
-    const secondItem = kit.querySelector('.second_item');
-    expect(secondItem).toBeInTheDocument();
-    expect(secondItem).toHaveClass("quadruple_bubble")
-
-    const thirdItem = kit.querySelector('.third_item');
-    expect(thirdItem).toBeInTheDocument();
-    expect(thirdItem).toHaveClass("quadruple_bubble")
-
-    const fourthItem = kit.querySelector('.fourth_item');
-    expect(fourthItem).toBeInTheDocument();
 })

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -15,7 +15,6 @@ type MultipleUsersStackedProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   users: Array<{ [key: string]: string }>,
-  variant: "default" | "bubble",
 }
 
 const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
@@ -27,14 +26,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     htmlOptions = {},
     id,
     users,
-    variant = "default",
   } = props
 
   const moreThanTwo = users.length > 2
   const onlyOne = users.length == 1
-  const isBubble = variant === "bubble"
-  const tripleBubble = isBubble && users.length === 3
-  const quadrupleBubble = isBubble && users.length > 3
   const displayCount = () => {
     return moreThanTwo ? 1 : users.length
   }
@@ -43,61 +38,29 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss(
     'pb_multiple_users_stacked_kit',
-    { single: onlyOne, bubble: isBubble }), globalProps(props), className)
+    { single: onlyOne }), globalProps(props), className)
 
   const firstUser = () => {
     return users.slice(0, 1).map((userObject, index) => {
       return (
         <Avatar
             {...userObject}
-            className={`pb_multiple_users_stacked_item first_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
+            className="pb_multiple_users_stacked_item"
             dark={dark}
             key={index}
-            size={isBubble ? "sm" : "xs"}
+            size="xs"
         />
       )
     })
   }
 
   const secondUser = () => {
-    if (!moreThanTwo || (isBubble && users.length > 1)) {
+    if (moreThanTwo === false) {
       return users.slice(1, 2).map((userObject, index) => {
         return (
           <Avatar
               {...userObject}
-              className={`pb_multiple_users_stacked_item second_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
-              dark={dark}
-              key={index}
-              size="xs"
-          />
-        )
-      })
-    }
-  }
-
-  const thirdUser = () => {
-    if (isBubble && users.length > 2) {
-      return users.slice(2, 3).map((userObject, index) => {
-        return (
-          <Avatar
-              {...userObject}
-              className={`pb_multiple_users_stacked_item third_item${quadrupleBubble ? " quadruple_bubble" : ""}`}
-              dark={dark}
-              key={index}
-              size="xs"
-          />
-        )
-      })
-    }
-  }
-
-  const fourthUser = () => {
-    if (isBubble && users.length > 3) {
-      return users.slice(3, 4).map((userObject, index) => {
-        return (
-          <Avatar
-              {...userObject}
-              className="pb_multiple_users_stacked_item fourth_item"
+              className="pb_multiple_users_stacked_item second_item"
               dark={dark}
               key={index}
               size="xs"
@@ -108,7 +71,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   }
 
   const plusUsers = () => {
-    if (moreThanTwo && !isBubble) {
+    if (moreThanTwo === true) {
       return (
         <Badge
             className="pb_multiple_users_stacked_item second_item"
@@ -131,8 +94,6 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     >
       {firstUser()}
       {secondUser()}
-      {thirdUser()}
-      {fourthUser()}
       {plusUsers()}
     </div>
   )

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

@@ -2,12 +2,10 @@ examples:
 
   rails:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_bubble: Bubble
 
 
   react:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_bubble: Bubble
 
   swift: 
   - multiple_users_stacked_default_swift: Default

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

@@ -1,2 +1 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
-export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -1,18 +1,14 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("avatar", props: object.users[0].merge({size: object.bubble ? "sm" : "xs", classname: "pb_multiple_users_stacked_item first_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}", dark: object.dark}) ) %>
+  <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>
-    <% if object.more_than_two && !object.bubble %>
+    <% if object.more_than_two %>
       <%= pb_rails("badge", props: {
         dark: object.dark,
         text: "+#{object.users.count - object.display_count}",
         variant: "primary",
         rounded: true,
         classname: "pb_multiple_users_stacked_item second_item" }) %>
-    <% elsif object.bubble %>
-      <% object.users.slice(1,3).each_with_index do |item, idx| %>
-        <%= pb_rails("avatar", props: item.merge({size: "xs", classname: "pb_multiple_users_stacked_item #{idx == 0 ? "second_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : idx == 1 ? "third_item#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : "fourth_item"}", dark: object.dark}) ) %>
-      <% end %>
     <% else %>
       <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item", dark: object.dark}) ) %>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb

@@ -5,10 +5,6 @@ module Playbook
     class MultipleUsersStacked < Playbook::KitBase
       prop :users, type: Playbook::Props::HashArray, required: true
 
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default bubble],
-                     default: "default"
-
       def more_than_two
         users.count > 2
       end
@@ -21,20 +17,8 @@ module Playbook
         more_than_two ? 1 : users.count
       end
 
-      def bubble
-        variant == "bubble"
-      end
-
-      def triple_bubble
-        bubble && users.count === 3
-      end
-
-      def quadruple_bubble
-        bubble && users.count > 3
-      end
-
       def classname
-        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class)
+        generate_classname("pb_multiple_users_stacked_kit", single_class)
       end
 
     private
@@ -42,10 +26,6 @@ module Playbook
       def single_class
         only_one ? "single" : nil
       end
-
-      def bubble_class
-        bubble ? "bubble" : nil
-      end
     end
   end
 end

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>