playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY21817891

data/app/pb_kits/playbook/pb_empty_state/empty_state.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbEmptyState
+    class EmptyState < Playbook::KitBase
+      prop :alignment, type: Playbook::Props::Enum,
+                       values: %w[center left right],
+                       default: "center"
+      prop :description
+      prop :header
+      prop :image
+      prop :link_button
+      prop :link_button_url
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[horizontal vertical],
+                         default: "vertical"
+      prop :primary_button
+      prop :primary_button_url
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md lg],
+                  default: "md"
+
+      SIZE_CONFIGS = {
+        sm: {
+          vertical: {
+            image_width: "100px",
+            title_size: 4,
+            title_padding: "xxs",
+            description_pad: "sm",
+            button_size: "sm",
+            button_margin: "xs",
+            scss_class: "sm-state-vertical",
+            flex_direction: "column",
+          },
+          horizontal: {
+            image_width: "100px",
+            title_size: 4,
+            title_padding: "xxs",
+            description_pad: "sm",
+            button_size: "sm",
+            button_margin: "xs",
+            scss_class: "sm-state-horizontal",
+            flex_direction: "row",
+          },
+        },
+        md: {
+          vertical: {
+            image_width: "140px",
+            title_size: 3,
+            title_padding: "xs",
+            description_pad: "md",
+            button_size: "md",
+            button_margin: "sm",
+            scss_class: "md-state-vertical",
+            flex_direction: "column",
+          },
+          horizontal: {
+            image_width: "140px",
+            title_size: 3,
+            title_padding: "xs",
+            description_pad: "md",
+            button_size: "md",
+            button_margin: "sm",
+            scss_class: "md-state-horizontal",
+            flex_direction: "row",
+          },
+        },
+        lg: {
+          vertical: {
+            image_width: "100%",
+            title_size: 1,
+            title_padding: "sm",
+            description_pad: "lg",
+            button_size: "md",
+            button_margin: "md",
+            scss_class: "lg-state-vertical",
+            flex_direction: "column",
+          },
+          horizontal: {
+            image_width: "100%",
+            title_size: 2,
+            title_padding: "sm",
+            description_pad: "lg",
+            button_size: "md",
+            button_margin: "md",
+            scss_class: "lg-state-horizontal",
+            flex_direction: "row",
+          },
+        },
+      }.freeze
+
+      def classname
+        generate_classname("pb_empty_state_kit")
+      end
+
+      def config
+        SIZE_CONFIGS[size.to_sym][orientation.to_sym]
+      end
+
+      def default_image_data_uri
+        svg_path = __dir__.then { |d| File.join(d, "docs", "default_image", "computer_fly_no_branding.svg") }
+        svg      = File.read(svg_path)
+        encoded  = ERB::Util.url_encode(svg)
+        "data:image/svg+xml,#{encoded}"
+      end
+
+      def padding_size
+        size == "sm" ? "xs" : "xl"
+      end
+
+      def flex_align
+        case alignment
+        when "left"
+          "start"
+        when "right"
+          "end"
+        else
+          "center"
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -9,10 +9,23 @@
     border: none;
     width: 0;
   }
+  &.error {
+    [class^='pb_card_kit'] {
+      border-color: $error;
+    }
+    [class^='pb_body_kit'][status="negative"] {
+      margin-top: $space_xs;
+    }
+  }
 }
 
 .dark [class*='pb_file_upload_kit'] {
   [class*='pb_card_kit'] {
     border: 1px $text_dk_lighter dashed;
   }
+  &.error {
+    [class^='pb_card_kit'] {
+      border-color: $error_dark;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx

@@ -22,6 +22,7 @@ type FileUploadProps = {
   maxSize?: number,
   onFilesAccepted: Callback<File, File>,
   onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
+  error?: string,
 }
 
 const getFormattedFileSize = (fileSize: number): string => {
@@ -36,6 +37,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     customMessage,
     dark = false,
     data = {},
+    error,
     htmlOptions = {},
     maxSize,
     onFilesAccepted = noop,
@@ -100,7 +102,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
 
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
+        className={classnames(buildCss('pb_file_upload_kit'), { 'error': error }, globalProps(props), className)}
         {...dataProps}
         {...htmlProps}
         {...getRootProps()}
@@ -118,6 +120,14 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
           }
         </Body>
       </Card>
+      {error && (
+        <Body
+            dark={dark}
+            marginTop="xxs"
+            status="negative"
+            text={error}
+        />
+      )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("file_upload", props: {id: "error",  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please upload a valid file")}) %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import FileUpload from '../_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
+import Icon from '../../pb_icon/_icon'
+
+const AcceptedFilesList = ({ files }) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+)
+
+const FileUploadError = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  const error = (<>
+    <Icon icon="warning" /> Please upload a valid file
+  </>)
+
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <FileUpload
+          error={error}
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FileUploadError

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
+  - file_upload_error: Error
 
   react:
   - file_upload_default: Default List of files to upload
@@ -10,3 +11,4 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
+  - file_upload_error: Error

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

@@ -3,3 +3,4 @@ export { default as FileUploadAccept } from './_file_upload_accept.jsx'
 export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
+export { default as FileUploadError } from './_file_upload_error.jsx'

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -9,6 +9,7 @@
         <%= pb_rails("text_input", props: {
           type: "file",
           dark: object.dark,
+          error: object.error.presence,
           input_options: {
             id: "upload-#{object.id}",
             classname: "cursor_pointer",

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -21,14 +21,20 @@ module Playbook
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
+      prop :error, type: Playbook::Props::String
+
       def classname
         file_upload_class = generate_classname("pb_file_upload_kit")
-        file_upload_class + full_width_class
+        file_upload_class + error_class + full_width_class
       end
 
       def full_width_class
         full_width ? " full_width" : ""
       end
+
+      def error_class
+        error.present? ? "_error" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js

@@ -50,3 +50,21 @@ test('displays custom message', () => {
   const kit = screen.getByTestId(testid)
   expect(kit).toHaveTextContent('Hello world!')
 })
+
+test('handles error state with error prop', () => {
+  const errorText = "Test error message"
+  render(
+    <FileUpload
+        data={{ testid: testid }}
+        error={errorText}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  
+  expect(kit).toHaveClass('pb_file_upload_kit')
+  expect(kit).toHaveClass('error')
+  
+  const errorElement = screen.getByText(errorText)
+  expect(errorElement).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -99,6 +99,7 @@
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
+  <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -98,6 +98,7 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
+  <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
   <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -23,7 +23,7 @@
 @mixin error-state-right-side-select-kit {
   &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
   &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    &:not(:has(.pb_phone_number_input)) {
+    &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
       align-items: flex-start;
 
       .pb_select_kit_wrapper {
@@ -49,7 +49,7 @@
 
 @mixin error-state-left-side-select-kit {
   &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
-    &:not(:has(.pb_phone_number_input)) {
+    &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
       align-items: flex-start;
 
       .pb_text_input_kit.error {

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -20,9 +20,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
-  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
+  .pb_form_pill_text, .pb_form_pill_tag {
     font-size: $font_small !important;
   }
+  .pb_form_pill_close {
+    font-size: 17px;
+  }
 
   &[class*=wrapped] {
     height: max-content;
@@ -96,7 +99,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         display: flex;
         align-items: center;
         height: 17px;
-        border-radius: calc(50%);
+        width: 17px;
+        justify-content: center;
+        border-radius: 50%;
         cursor: pointer;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
@@ -146,8 +151,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     outline-offset: -1px;
   }
   .pb_form_pill_icon {
-    height: 12px !important;
-    width: 12px !important;
+    height: 0.875em;
     padding-right: $space_xs;
     + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
@@ -158,7 +162,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   &.small {
     height: 17px;
     padding: 0 $space-xs;
-    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
+    .pb_form_pill_text, .pb_form_pill_tag {
       font-size: $font_smallest !important;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
@@ -166,17 +170,20 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
       padding: 0 $space_xxs;
     }
     .pb_form_pill_close {
-      height: 10px;
-      border-radius: calc(50%);
+      height: 14px;
+      width: 14px;
+      font-size: 15px;
+      border-radius: 50%;
     }
     [class^=pb_avatar_kit] .avatar_wrapper {
-      flex-basis: 16px;
-      height: 16px;
-      margin-top: 2px;
-      width: 16px;
-      &::before { line-height: 16.5px; }
+      flex-basis: 14px;
+      height: 14px;
+      margin-top: 3px;
+      width: 14px;
+      &::before { line-height: 15px; }
     }
     .pb_form_pill_icon {
+      height: 0.75em;
       padding-right: $space_xxs;
       + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -81,6 +81,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
 
   const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
 
+  const uppercaseState = state?.toUpperCase() ?? ''
+
+  const fields = [address, addressCont, city, homeId, homeUrl, houseStyle, state, territory, zipcode]
+  const hasAllEmptyProps = fields.every(field => field === undefined || field === null || field === '')
+
   return (
     <div
         className={classes(className, dark)}
@@ -88,7 +93,8 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
         {...dataProps}
         {...htmlProps}
     >
-      {emphasis == 'street' &&
+      {hasAllEmptyProps && '—'}
+      {emphasis == 'street' && !hasAllEmptyProps &&
         <div>
           <Title
               className="pb_home_address_street_address"
@@ -105,11 +111,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
         </div>
       }
-      {emphasis == 'city' &&
+      {emphasis == 'city' && !hasAllEmptyProps &&
         <div>
           <Body color="light">
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -122,18 +128,18 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state.toUpperCase()}`}
+              {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}`}
             </Title>
             <Body
                 color="light"
                 tag="span"
             >
-              {` ${zipcode}`}
+              {` ${zipcode ?? ''}`}
             </Body>
           </div>
         </div>
       }
-      {emphasis == 'none' &&
+      {emphasis == 'none' && !hasAllEmptyProps &&
         <div>
           <Body dark={dark}>
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -144,7 +150,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
           </div>
         </div>

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

@@ -13,6 +13,7 @@ import MessageMention from './_message_mention'
 
 type MessageProps = {
   aria: { [key: string]: string },
+  avatarGrayscale?: boolean,
   avatarName?: string,
   avatarStatus?: "away" | "offline" | "online",
   avatarUrl?: string,
@@ -32,6 +33,7 @@ type MessageProps = {
 const Message = (props: MessageProps) => {
   const {
     aria = {},
+    avatarGrayscale = false,
     avatarName,
     avatarStatus = null,
     avatarUrl,
@@ -71,6 +73,7 @@ const Message = (props: MessageProps) => {
     >
       {shouldDisplayAvatar &&
         <Avatar
+            grayscale={avatarGrayscale}
             imageUrl={avatarUrl}
             name={avatarName}
             size="xs"

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

@@ -0,0 +1,9 @@
+<%= pb_rails("message", props: {
+  label: "Mike Bishop",
+  message: "So long, and thanks for all the fish!",
+  timestamp: "3 months ago",
+  avatar_name: "Mike Bishop",
+  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
+  avatar_status: "offline",
+  avatar_grayscale: true,
+}) %>

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

@@ -0,0 +1,21 @@
+import React from "react"
+
+import Message from "../_message"
+
+const MessageGrayscale = (props) => {
+  return (
+    <Message
+        avatarGrayscale
+        avatarName='Mike Bishop'
+        avatarStatus='offline'
+        avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
+        borderRadius='rounded'
+        label='Mike Bishop'
+        message='So long, and thanks for all the fish!'
+        timestamp='3 months ago'
+        {...props}
+    />
+  )
+}
+
+export default MessageGrayscale

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

@@ -5,12 +5,14 @@ examples:
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+  - message_grayscale: Grayscale Avatar
 
   react:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+  - message_grayscale: Grayscale Avatar
 
   swift:
    - message_default_swift: Default

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

@@ -2,3 +2,4 @@ export { default as MessageDefault } from './_message_default.jsx'
 export { default as MessageTimestamp } from './_message_timestamp.jsx'
 export { default as MessageHover } from './_message_hover.jsx'
 export { default as MessageMentions } from './_message_mentions.jsx'
+export { default as MessageGrayscale } from './_message_grayscale.jsx'

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

@@ -4,7 +4,8 @@
         name: object.avatar_name,
         size: "xs",
         image_url: object.avatar_url,
-        status: object.avatar_status
+        status: object.avatar_status,
+        grayscale: object.avatar_grayscale
       }) %>
     <% end %>
     <div class="content_wrapper">

data/app/pb_kits/playbook/pb_message/message.rb

@@ -6,6 +6,7 @@ module Playbook
       prop :avatar_name
       prop :avatar_status
       prop :avatar_url
+      prop :avatar_grayscale, type: Playbook::Props::Boolean, default: false
       prop :label
       prop :message
       prop :timestamp

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

@@ -195,8 +195,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
           if (!selectedItem.length) {
             setSingleSelectedItem({ id: [], value: "", item: [] });
           } else {
-            const { id, value } = selectedItem[0];
-            setSingleSelectedItem({ id: [id], value, item: selectedItem });
+            const { id, label } = selectedItem[0];
+            setSingleSelectedItem({ id: [id], value: label, item: selectedItem });
           }
         }
       }

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb

@@ -1,62 +1,62 @@
 <% treeData = [{
     label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
     id: "100",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "People",
+        value: "people",
         id: "101",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "Talent Acquisition",
+            value: "talentAcquisition",
             id: "102",
           },
           {
             label: "Business Affairs",
-            value: "Business Affairs",
+            value: "businessAffairs",
             id: "103",
             children: [
               {
                 label: "Initiatives",
-                value: "Initiatives",
+                value: "initiatives",
                 id: "104",
               },
               {
                 label: "Learning & Development",
-                value: "Learning & Development",
+                value: "learningAndDevelopment",
                 id: "105",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "People Experience",
+            value: "peopleExperience",
             id: "106",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "Contact Center",
+        value: "contactCenter",
         id: "107",
         children: [
           {
             label: "Appointment Management",
-            value: "Appointment Management",
+            value: "appointmentManagement",
             id: "108",
           },
           {
             label: "Customer Service",
-            value: "Customer Service",
+            value: "customerService",
             id: "109",
           },
           {
             label: "Energy",
-            value: "Energy",
+            value: "energy",
             id: "110",
           },
         ],