RubyGems - playbook_ui - Versions diffs - 13.33.1 → 13.34.0 - Mend

playbook_ui 13.33.1 → 13.34.0

Files changed (58) hide show

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx CHANGED Viewed

@@ -10,16 +10,16 @@ import Caption from "../pb_caption/_caption";
 import Icon from "../pb_icon/_icon";
 type DateRangeInlineProps = {
-  className?: string;
-  id?: string;
-  data?: string;
   align?: "left" | "center" | "vertical";
-  size?: "sm" | "xs";
+  className?: string;
   dark?: boolean;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => any)};
+  data?: string;
+  endDate?: Date;
+  htmlOptions?: { [key: string]: string | number | boolean | (() => any) };
   icon?: boolean;
+  id?: string;
+  size?: "sm" | "xs";
   startDate?: Date;
-  endDate?: Date;
 };
 const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
@@ -36,59 +36,36 @@ const dateTimeIso = (dateValue: Date) => {
 const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const {
-    icon = false,
-    dark = false,
-    size = "sm",
     align = "left",
+    className,
+    dark = false,
     data = {},
+    endDate,
     htmlOptions = {},
+    icon = false,
+    size = "sm",
     startDate,
-    endDate,
-    className,
   } = props;
-  const iconContent = () => {
-    return (
-      <>
-        {icon && (
-          <>
-            <Body color="light"
-                key={Math.random()}
-                tag="span"
-            >
-              <Icon
-                  className="pb_date_range_inline_icon"
-                  dark={dark}
-                  fixedWidth
-                  icon="calendar-alt"
-                  size={size}
-                  tag="span"
-              />
-            </Body>
-          </>
-        )}
-      </>
-    );
-  };
   const dateInCurrentYear = () => {
     const currentDate = new Date();
     return (
-      startDate.getFullYear() == endDate.getFullYear() &&
-      startDate.getFullYear() == currentDate.getFullYear()
+      startDate?.getFullYear() === endDate?.getFullYear() &&
+      startDate?.getFullYear() === currentDate.getFullYear()
     );
   };
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
-          <>{` ${dateTimestamp(date, false)} `}</>
+          ` ${dateTimestamp(date, false)} `
         ) : (
-          <>{` ${dateTimestamp(date, true)} `}</>
+          ` ${dateTimestamp(date, true)} `
         )}
       </time>
     );
@@ -101,53 +78,83 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
-        {size == "xs" && (
+        {size === "xs" && (
           <>
-            {iconContent()}
-            <Caption dark={dark}
-                tag="span"
-            >
+            {icon && (
+              <Caption
+                  dark={dark}
+                  tag="span">
+                <Icon
+                    className="pb_date_range_inline_icon"
+                    dark={dark}
+                    fixedWidth
+                    icon="calendar-alt"
+                    size={size}
+                    tag="span"
+                />
+              </Caption>
+            )}
+            <Caption
+                dark={dark}
+                tag="span">
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption
+                dark={dark}
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
+                  dark={dark}
                   fixedWidth
                   icon="long-arrow-right"
+                  tag="span"
               />
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption
+                dark={dark}
+                tag="span">
               {renderTime(endDate)}
             </Caption>
           </>
         )}
-        {size == "sm" && (
+        {size === "sm" && (
           <>
-            {iconContent()}
-            <Body dark={dark}
-                tag="span"
-            >
+            {icon && (
+              <Body
+                  color={"light"}
+                  dark={dark}
+                  tag="span">
+                <Icon
+                    className="pb_date_range_inline_icon"
+                    dark={dark}
+                    fixedWidth
+                    icon="calendar-alt"
+                    size={size}
+                    tag="span"
+                />
+              </Body>
+            )}
+            <Body
+                dark={dark}
+                tag="span">
               {renderTime(startDate)}
             </Body>
-            <Body color="light"
-                dark={dark}
-                tag="span"
-            >
+            <Body
+                color={"light"}
+                dark={dark}
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
                   fixedWidth
                   icon="long-arrow-right"
+                  tag="span"
               />
             </Body>
-            <Body dark={dark}
-                tag="span"
-            >
+            <Body
+                dark={dark}
+                tag="span">
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_detail/detail.html.erb CHANGED Viewed

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb CHANGED Viewed

@@ -1,10 +1,5 @@
 <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
-    <%= content_tag(:dialog,
-        aria: object.aria,
-        data: object.data,
-        id: object.id,
-        class: object.classname,
-        **combined_html_options) do %>
+    <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb CHANGED Viewed

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
         <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb CHANGED Viewed

@@ -1,8 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, class: "") do %>
+  <%  'excluded classname?'  %>
     <% if object.confirm_button && object.cancel_button %>
         <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>

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

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.sticky_header,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, class: object.sticky_header) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb CHANGED Viewed

@@ -8,9 +8,13 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="<%= input_default_value %>" />
-        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="<%= input_default_value %>" style="display: none" <%= object.required ? "required" : ""%> />
+        <input
+            data-default-value="<%= input_default_value %>"
+            id="dropdown-selected-option"
+            name="<%= object.name %>"
+            style="display: none"
+            <%= object.required ? "required" : ""%>
+        />
         <% if content.present? %>
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb CHANGED Viewed

@@ -29,7 +29,7 @@ module Playbook
       end
       def input_default_value
-        default_value.present? ? default_value.transform_keys(&:to_s) : ""
+        default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
       end
       def options_with_blank

data/app/pb_kits/playbook/pb_dropdown/index.js CHANGED Viewed

@@ -8,9 +8,9 @@ const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
 const UP_ARROW_SELECTOR = "#dropdown_close_icon";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
 const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
 const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
+const DROPDOWN_INPUT = "#dropdown-selected-option";
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -47,14 +47,13 @@ export default class PbDropdown extends PbEnhancedElement {
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
       hiddenInput.value = JSON.parse(value).id;
-      inputFormValidation.value = JSON.parse(value).id;
-      this.clearFormValidation(inputFormValidation);
+      this.clearFormValidation(hiddenInput);
       this.onOptionSelected(value, option);
     }
   }
@@ -160,14 +159,18 @@ export default class PbDropdown extends PbEnhancedElement {
   }
   handleFormValidation() {
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
-    inputFormValidation.addEventListener("invalid", function (event) {
-      if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") {
-        event.preventDefault();
-        inputFormValidation.closest(".dropdown_wrapper").classList.add("error");
-      }
-    }, true);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    hiddenInput.addEventListener(
+      "invalid",
+      function (event) {
+        if (hiddenInput.hasAttribute("required") && hiddenInput.value === "") {
+          event.preventDefault();
+          hiddenInput.closest(".dropdown_wrapper").classList.add("error");
+        }
+      },
+      true
+    );
   }
   clearFormValidation(input) {
@@ -175,7 +178,9 @@ export default class PbDropdown extends PbEnhancedElement {
       const dropdownWrapperElement = input.closest(".dropdown_wrapper");
       dropdownWrapperElement.classList.remove("error");
-      const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative");
+      const errorLabelElement = dropdownWrapperElement.querySelector(
+        ".pb_body_kit_negative"
+      );
       if (errorLabelElement) {
         errorLabelElement.remove();
       }
@@ -183,23 +188,22 @@ export default class PbDropdown extends PbEnhancedElement {
   }
   setDefaultValue() {
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const options = this.element.querySelectorAll(OPTION_SELECTOR);
-    if (hiddenInput.value) {
-      const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
-      const defaultValue = JSON.parse(hiddenInput.value.replaceAll("=>", ":"));
-      const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    const defaultValue = hiddenInput.dataset.defaultValue || "";
+    hiddenInput.value = defaultValue;
-      options.forEach((option) => {
-        if (defaultValue.id === JSON.parse(option.dataset.dropdownOptionLabel).id) {
-          option.classList.add("pb_dropdown_option_selected");
-        }
+    if (defaultValue) {
+      const selectedOption = Array.from(options).find((option) => {
+        return (
+          JSON.parse(option.dataset.dropdownOptionLabel).id === defaultValue
+        );
       });
-      this.setTriggerElementText(defaultValue.label);
-      hiddenInput.value = defaultValue.id;
-      inputFormValidation.value = defaultValue.id;
+      selectedOption.classList.add("pb_dropdown_option_selected");
+      this.setTriggerElementText(
+        JSON.parse(selectedOption.dataset.dropdownOptionLabel).label
+      );
     }
   }
@@ -214,11 +218,13 @@ export default class PbDropdown extends PbEnhancedElement {
   }
   resetDropdownValue() {
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    options.forEach((option) => {
+      option.classList.remove("pb_dropdown_option_selected");
+    });
     hiddenInput.value = "";
-    inputFormValidation.value = "";
     const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
     this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);

data/app/pb_kits/playbook/pb_flex/flex.html.erb CHANGED Viewed

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

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

@@ -89,6 +89,10 @@ $form_pill_colors: (
     outline: $primary solid 2px;
     outline-offset: -1px;
   }
+  .pb_form_pill_icon {
+    height: 12px !important;
+    width: 12px !important;
+  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx CHANGED Viewed

@@ -50,4 +50,15 @@ test('displays size variant', () => {
     )
     const kit = screen.getByTestId('formpill')
     expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+});
+test('displays icon', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            icon={"test"}
+        />
+    )
+    const kit = screen.getByTestId('formpill')
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
 });

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx CHANGED Viewed

@@ -21,6 +21,7 @@ type FormPillProps = {
   color?: "primary" | "neutral",
   data?: {[key: string]: string},
   tabIndex?: number,
+  icon?: string,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -42,9 +43,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     color = "primary",
     data = {},
     tabIndex,
+    icon = "",
   } = props
+  const iconClass = icon ? "_icon" : ""
   const css = classnames(
-    `pb_form_pill_kit_${color}`,
+    `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
@@ -61,29 +65,60 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         {...dataProps}
         {...htmlProps}
     >
-        {name &&
+      {((name && !icon && !text) || (name && !icon && text)) && (
         <>
-        <Avatar
-            imageUrl={avatarUrl}
-            name={name}
-            size="xs"
-            status={null}
-        />
-        <Title
-            className="pb_form_pill_text"
-            size={4}
-            text={name}
-        />
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
         </>
-        }
-      {text &&
+      )}
+      {((name && icon && !text) || (name && icon && text)) && (
+        <>
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+        </>
+      )}
+      {(!name && icon && text) && (
+        <>
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+          />
+        </>
+      )}
+      {(!name && !icon && text) && (
         <Title
             className="pb_form_pill_tag"
             size={4}
             text={text}
         />
-      }
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<%= pb_rails("form_pill", props: {
+    icon: "badge-check",
+    text: "icon and tag",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+import React from 'react'
+import FormPill from '../_form_pill'
+const FormPillIcon = (props) => {
+  return (
+    <div>
+      <FormPill
+          icon="badge-check"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="icon and tag"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillIcon

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

@@ -5,10 +5,11 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
+  # - form_pill_icon: Form Pill Icon
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
+  # - form_pill_icon: Form Pill Icon

data/app/pb_kits/playbook/pb_form_pill/docs/index.js CHANGED Viewed

@@ -2,4 +2,4 @@ export { default as FormPillUser } from './_form_pill_user.jsx'
 export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
+export { default as FormPillIcon } from './_form_pill_icon.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb CHANGED Viewed

@@ -1,12 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
-      <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
-        <% elsif object.text.present? %>
-          <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-            <% end %>
-              <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-                <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
-                  <% end %>
-                    <% end %>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+    <% end %>
+  <% elsif object.text.present? %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+      <% end %>
+  <% end %>
+  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+    <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb CHANGED Viewed

@@ -15,9 +15,10 @@ module Playbook
                    values: %w[primary neutral],
                    default: "primary"
       prop :tabindex
+      prop :icon
       def classname
-        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
       end
       def display_text
@@ -27,6 +28,10 @@ module Playbook
       def size_class
         size == "small" ? " small" : ""
       end
+      def icon_class
+        icon ? "icon" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb CHANGED Viewed

@@ -1,9 +1,4 @@
-<%= content_tag(:span,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:span) do %>
   <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>