RubyGems - playbook_ui - Versions diffs - 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.revert4453PBNTR933reactdraggablebugdragbtwnexamples7854 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (223) hide show

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx CHANGED Viewed

@@ -45,27 +45,31 @@ const DropdownOption = (props: DropdownOptionProps) => {
     filterItem,
     focusedOptionIndex,
     handleOptionClick,
+    multiSelect,
     selected,
   } = useContext(DropdownContext);
-  const isItemMatchingFilter = (option: GenericObject) => {
-    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+  const isItemMatchingFilter = (option: GenericObject | undefined) => {
+    const label = typeof option?.label === 'string' ? option.label.toLowerCase() : option?.label;
     return String(label).toLowerCase().includes(filterItem.toLowerCase());
   }
-  if (!isItemMatchingFilter(option)) {
+  // When multiSelect, then if an option is selected, remove from dropdown
+  const isSelected = Array.isArray(selected)
+   ? selected.some((item) => item.label === option?.label)
+   : (selected as GenericObject)?.label === option?.label;
+  if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
   const isFocused =
     focusedOptionIndex >= 0 &&
-    filteredOptions[focusedOptionIndex].label === option.label;
+    filteredOptions[focusedOptionIndex].label === option?.label;
   const focusedClass = isFocused && "focused";
-  const selectedClass = `${
-    selected?.label === option.label
-      ? "selected"
-      : "list"
-  }`;
+  const selectedClass = isSelected ? "selected" : "list";
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
@@ -92,14 +96,14 @@ const DropdownOption = (props: DropdownOptionProps) => {
       <ListItem
           cursor="pointer"
           dark={dark}
-          data-name={option.value}
-          key={option.label}
+          data-name={option?.value}
+          key={option?.label}
           padding="none"
       >
           {children ?
           <div className="dropdown_option_wrapper">{children}</div> :
               <Body dark={dark}
-                  text={option.label}
+                  text={option?.label}
               />
           }
       </ListItem>

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ import { globalProps } from "../../utilities/globalProps";
 import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
 import DropdownContext from "../context";
+import MultiSelectTriggerDisplay from "./MultiSelectTriggerDisplay";
 import Body from "../../pb_body/_body";
 import Icon from "../../pb_icon/_icon";
@@ -44,16 +45,17 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   const {
     autocomplete,
     filterItem,
+    handleBackspace,
     handleChange,
     handleWrapperClick,
     inputRef,
     inputWrapperRef,
     isDropDownClosed,
     isInputFocused,
+    multiSelect,
     selected,
     setIsInputFocused,
     toggleDropdown,
-    triggerRef,
   } = useContext(DropdownContext);
   const handleKeyDown = useHandleOnKeyDown();
@@ -70,11 +72,21 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   const triggerWrapperClasses = buildCss(
     "dropdown_trigger_wrapper",
     isInputFocused && "focus",
-    !autocomplete && "select_only"
+    !autocomplete && !multiSelect && "select_only"
   );
+  const selectedArray = Array.isArray(selected)
+    ? selected
+    : selected && Object.keys(selected).length
+    ? [selected]
+    : [];
+  const joinedLabels = multiSelect
+    ? ""
+    : selectedArray.map((option) => option.label).join(", ");
   const customDisplayPlaceholder = selected?.label ? (
-    <b>{selected.label}</b>
+    ""
   ) : autocomplete ? (
     ""
   ) : placeholder ? (
@@ -83,8 +95,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
-  const defaultDisplayPlaceholder = selected?.label
-    ? selected.label
+  const defaultDisplayPlaceholder = joinedLabels
+    ? joinedLabels
     : autocomplete
     ? ""
     : placeholder
@@ -99,7 +111,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
         id={id}
     >
       {
-        !triggerRef && (
           children ? (
             <div
                 onClick={() => toggleDropdown()}
@@ -127,31 +138,71 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                   paddingX="sm"
                   paddingY="xs"
               >
-                <FlexItem>
-                  <Flex align="center">
+                <FlexItem fixedSize={multiSelect ? "85%" : ""}>
+                  <Flex align="center"
+                      wrap
+                  >
                     {customDisplay ? (
                       <Flex align="center">
                         {customDisplay}
                         <Body dark={dark}
-                            paddingLeft={`${selected.label ? "xs" : "none"}`}
+                            paddingLeft={`${joinedLabels ? "xs" : "none"}`}
                         >
                           {customDisplayPlaceholder}
                         </Body>
                       </Flex>
                     ) : (
-                      <Body dark={dark}
-                          text={defaultDisplayPlaceholder}
-                      />
+                      multiSelect ? (
+                        <>
+                        <MultiSelectTriggerDisplay
+                            autocomplete={autocomplete}
+                            dark={dark}
+                            placeholder={placeholder}
+                            selected={selectedArray}
+                        />
+                        {autocomplete && (
+                          <input
+                              className="dropdown_input"
+                              onChange={handleChange}
+                              onClick={(e) => {
+                                e.stopPropagation();// keep the wrapper’s handler from firing
+                                toggleDropdown();
+                              }}
+                              onFocus={() => setIsInputFocused(true)}
+                              onKeyDown={(e) => {
+                                 handleKeyDown(e);
+                                 e.stopPropagation(); //Fixes issue with keyboard accessibility
+                               }}
+                              placeholder={
+                                joinedLabels
+                                  ? ""
+                                  : placeholder
+                                  ? placeholder
+                                  : "Select..."
+                              }
+                              ref={inputRef}
+                              value={filterItem}
+                          />
+                        )}
+                        </>
+                      ) : (
+                        <Body dark={dark}
+                            text={defaultDisplayPlaceholder}
+                        />
+                      )
                     )}
-                    {autocomplete && (
+                    {autocomplete && !multiSelect && (
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={() => toggleDropdown()}
+                          onClick={(e) => {
+                            e.stopPropagation();// keep the wrapper’s handler from firing
+                            toggleDropdown();
+                          }}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
-                            selected.label
+                            joinedLabels
                               ? ""
                               : placeholder
                               ? placeholder
@@ -163,14 +214,29 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                     )}
                   </Flex>
                 </FlexItem>
+                <FlexItem>
                   <Body
+                      alignItems="center"
                       dark={dark}
                       display="flex"
                       htmlOptions={{
                         onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  >
+                  >
+                  {
+                    selectedArray.length > 0 && (
+                      <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
+                        <Icon
+                            cursor="pointer"
+                            dark={dark}
+                            icon="times"
+                            paddingRight="xs"
+                            size="sm"
+                        />
+                      </div>
+                    )
+                  }
                     <Icon
                         cursor="pointer"
                         dark={dark}
@@ -178,10 +244,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         size="sm"
                     />
                   </Body>
+                </FlexItem>
               </Flex>
             </>
           )
-        )
       }
     </div>
   );

data/app/pb_kits/playbook/pb_dropdown/subcomponents/MultiSelectTriggerDisplay.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+import React, { useContext } from "react";
+import FormPill from "../../pb_form_pill/_form_pill";
+import Flex from "../../pb_flex/_flex";
+import Body from "../../pb_body/_body";
+import { GenericObject } from "../../types";
+import DropdownContext
+ from "../context";
+type MultiSelectTriggerDisplayProps = {
+  autocomplete?: boolean;
+  selected: GenericObject[];
+  placeholder?: string;
+  dark?: boolean;
+};
+const MultiSelectTriggerDisplay = ({
+  autocomplete,
+  selected,
+  placeholder,
+  dark = false,
+}: MultiSelectTriggerDisplayProps) => {
+  const { setSelected, onSelect, formPillProps } = useContext(DropdownContext);
+  if (selected.length === 0) {
+    if (autocomplete) return null;
+    return (
+    <Body dark={dark}
+        text={placeholder ? placeholder : "Select..."}
+    />
+    )
+  }
+ const handleRemoveIconClick = (option: GenericObject) => {
+  setSelected((prev: GenericObject[]) => {
+      const next = prev.filter((item) => item.label !== option.label);
+      onSelect && onSelect(next);
+      return next;
+    });
+ }
+  return (
+    <Flex wrap>
+      {selected.map((option, i) => (
+          <FormPill
+              dark={dark}
+              key={i}
+              marginRight="xs"
+              onClick={(e)=>{e.stopPropagation();handleRemoveIconClick(option)}}
+              tabIndex={0}
+              text={option.label}
+              {...formPillProps}
+          />
+      ))}
+    </Flex>
+  );
+};
+export default MultiSelectTriggerDisplay;

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss CHANGED Viewed

@@ -1,4 +1,5 @@
 .pb_empty_state_kit {
+  max-width: 100%;
   .sm-state-vertical {
     width: 150px;
@@ -35,4 +36,10 @@
     }
   }
-}
+  &.dark {
+    [class*="pb_title_kit"],
+    [class*="pb_body_kit"],
+    [class*="pb_detail_kit"],
+    [class*="pb_button_kit_link"]:hover { color: $white; }
+  }
+}

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb ADDED Viewed

@@ -0,0 +1,27 @@
+<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    alignment: "left",
+  }) %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+  }) %>
+    <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    alignment: "right",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb ADDED Viewed

@@ -0,0 +1,7 @@
+<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<%= pb_rails("flex", props: {align: "center", justify: "center", wrap: true}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    orientation:"horizontal",
+    alignment: "left",
+    size: "lg",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb ADDED Viewed

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    link_button: "Alt Action",
+    link_button_url: "#link_button_url",
+    size: "sm",
+  }) %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    link_button: "Alt Action",
+    link_button_url: "#link_button_url",
+    size: "lg",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/example.yml CHANGED Viewed

@@ -1,5 +1,9 @@
 examples:
+  rails:
+  - empty_state_default: Default
+  - empty_state_size: Size
+  - empty_state_orientation: Orientation
+  - empty_state_alignment: Alignment
   react:
   - empty_state_default: Default

data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb ADDED Viewed

@@ -0,0 +1,19 @@
+<%= pb_content_tag do %>
+  <%= pb_rails("flex", props: { align: flex_align, orientation: config[:flex_direction], padding_left: padding_size, padding_right: padding_size, vertical: "center", classname: config[:scss_class], max_width: "100%" }) do %>
+    <%= pb_rails("image", props: { url: image == "default" ? default_image_data_uri : image, alt: "Empty State Image", html_options: { width: config[:image_width], height: "auto", alignment: "start" } }) %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { text: object.header, size: config[:title_size], padding_bottom: config[:title_padding], text_align: alignment }) %>
+      <% if size == "sm" %>
+        <%= pb_rails("detail", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
+      <% else %>
+        <%= pb_rails("body", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
+      <% end %>
+      <% if primary_button.present? %>
+        <%= pb_rails("button", props: { text: primary_button, variant: "primary", width: "100%", size: config[:button_size], link: primary_button_url,  margin_bottom: config[:button_margin] }) %>
+      <% end %>
+      <% if link_button.present? %>
+        <%= pb_rails("button", props: { text: link_button, variant: "link", size: config[:button_size], link: link_button_url, width: "100%" }) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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