RubyGems - playbook_ui - Versions diffs - 13.24.0.pre.alpha.play1305drycontenttag2689 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713 - Mend

playbook_ui 13.24.0.pre.alpha.play1305drycontenttag2689 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

Files changed (146) hide show

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

@@ -0,0 +1,95 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import DropdownContext from "../context";
+import List from "../../pb_list/_list";
+import ListItem from "../../pb_list/_list_item";
+import TextInput from "../../pb_text_input/_text_input";
+import Body from "../../pb_body/_body";
+type DropdownContainerProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  children?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+  searchbar?: boolean;
+};
+const DropdownContainer = (props: DropdownContainerProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    id,
+    searchbar = false,
+  } = props;
+  const {
+    isDropDownClosed,
+    handleChange,
+    filterItem,
+    filteredOptions,
+    inputRef,
+    setFocusedOptionIndex,
+  } = useContext(DropdownContext);
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_container"),
+    `${isDropDownClosed ? "close" : "open"}`,
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+        onMouseEnter={() => setFocusedOptionIndex(-1)}
+    >
+      {searchbar && (
+        <TextInput paddingTop="xs"
+            paddingX="xs"
+        >
+            <input
+                onChange={handleChange}
+                placeholder="Select..."
+                ref={inputRef}
+                value={filterItem}
+            />
+        </TextInput>
+      )}
+      <List>{
+        filteredOptions?.length === 0 ? (
+          <ListItem
+              display="flex"
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              justifyContent="center"
+              padding="xs"
+          >
+            <Body color="light"
+                text="no option"
+            />
+          </ListItem>
+        ): (
+          children
+        )
+        }
+        </List>
+    </div>
+  );
+};
+export default DropdownContainer;

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

@@ -0,0 +1,91 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import DropdownContext from "../context";
+import Flex from "../../pb_flex/_flex";
+import Body from "../../pb_body/_body";
+import ListItem from "../../pb_list/_list_item";
+import { GenericObject } from "../../types";
+type DropdownOptionProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  children?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+  option?: GenericObject;
+  key?: string;
+};
+const DropdownOption = (props: DropdownOptionProps) => {
+  const { aria = {}, className, children, data = {}, id, option, key } = props;
+  const { handleOptionClick, selected, filterItem, filteredOptions, focusedOptionIndex } =
+    useContext(DropdownContext);
+  const isItemMatchingFilter = (option: GenericObject) =>
+    option?.label.toLowerCase().includes(filterItem.toLowerCase());
+  if (!isItemMatchingFilter(option)) {
+    return null;
+  }
+  const isFocused = focusedOptionIndex >= 0 && filteredOptions[focusedOptionIndex].label === option.label
+  const focusedClass = isFocused && "dropdown_option_focused"
+  const selectedClass = `${
+    selected.label === option.label
+        ? "dropdown_option_selected"
+        : "dropdown_option_list"
+  }`
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_option"),
+    selectedClass,
+    focusedClass,
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+        key={key}
+    >
+      <ListItem
+          cursor="pointer"
+          data-name={option.value}
+          htmlOptions={{ onClick: () => handleOptionClick(option) }}
+          key={option.label}
+          padding="xs"
+      >
+        <Flex
+            align="center"
+            className="dropdown_option"
+            justify="between"
+            paddingX="sm"
+            paddingY="xxs"
+        >
+          {
+            children ? (
+              children
+            ) : (
+              <Body text={option.label}/>
+            )
+          }
+        </Flex>
+      </ListItem>
+    </div>
+  );
+};
+export default DropdownOption;

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

@@ -0,0 +1,128 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
+import DropdownContext from "../context";
+import Body from "../../pb_body/_body";
+import Icon from "../../pb_icon/_icon";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+type DropdownTriggerProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  customDisplay?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+};
+const DropdownTrigger = (props: DropdownTriggerProps) => {
+  const { aria = {}, className, children, customDisplay, data = {}, id } = props;
+  const {
+    autocomplete,
+    handleWrapperClick,
+    selected,
+    filterItem,
+    handleChange,
+    toggleDropdown,
+    isDropDownClosed,
+    inputRef,
+    isInputFocused,
+    setIsInputFocused
+  } = useContext(DropdownContext);
+  const handleKeyDown = useHandleOnKeyDown();
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_trigger"),
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children ? (
+        <div
+            onClick={() => toggleDropdown()}
+            style={{ display: "inline-block" }}
+        >
+          {children}
+        </div>
+      ) : (
+        <>
+          <Flex align="center"
+              borderRadius="lg"
+              className={`dropdown_trigger_wrapper ${isInputFocused && 'dropdown_trigger_wrapper_focus'}`}
+              cursor="pointer"
+              htmlOptions={{
+                onClick: () => handleWrapperClick(),
+                onKeyDown: handleKeyDown,
+                tabIndex:"0",
+              }}
+              justify="between"
+              paddingX="sm"
+              paddingY="xs"
+          >
+            <FlexItem>
+                <Flex align="center">
+                    {customDisplay ? (
+                      <Flex align="center">
+                          {customDisplay}
+                          <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
+                            {selected.label ? <b>{selected.label}</b> : autocomplete ? "" : "Select..." }
+                          </Body>
+                      </Flex>
+                      ) : (
+                        <Body text={selected.label ? selected.label : autocomplete ? "" : "Select..."} />
+                      )
+                    }
+                    {
+                      autocomplete && (
+                        <input
+                            className="dropdown_input"
+                            onChange={handleChange}
+                            onClick={() => toggleDropdown()}
+                            onFocus={() => setIsInputFocused(true)}
+                            onKeyDown={handleKeyDown}
+                            placeholder={selected.label ? "" : "Select..."}
+                            ref={inputRef}
+                            value={filterItem}
+                        />
+                      )
+                    }
+                </Flex>
+            </FlexItem>
+            <FlexItem>
+                <Body display="flex"
+                    key={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                >
+                    <Icon cursor="pointer"
+                        icon={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                        size="sm"
+                    />
+                </Body>
+            </FlexItem>
+          </Flex>
+        </>
+      )}
+    </div>
+  );
+};
+export default DropdownTrigger;

data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import React, { ReactElement } from "react";
+import DropdownTrigger from "../subcomponents/DropdownTrigger";
+import DropdownContainer from "../subcomponents/DropdownContainer";
+type PrepareComponentsProps = {
+  children: React.ReactChild[] | React.ReactChild;
+  hasTriggerSubcomponent: boolean;
+  hasContainerSubcomponent: boolean;
+  trigger: React.ReactChild;
+  container: React.ReactChild;
+  otherChildren: React.ReactChild[];
+};
+export const separateChildComponents = (children: React.ReactChild[] | React.ReactChild | ReactElement[]) => {
+  let trigger: React.ReactChild = null;
+  let container: React.ReactChild = null;
+  const otherChildren: React.ReactChild[] = [];
+  React.Children.forEach(children, (child) => {
+    if (child && (child as ReactElement).type === DropdownTrigger) {
+      trigger = child;
+    } else if (child && (child as ReactElement).type === DropdownContainer) {
+      container = child;
+    } else {
+      otherChildren.push(child);
+    }
+  });
+  return { trigger, container, otherChildren };
+};
+export const prepareSubcomponents = ({
+  children,
+  hasTriggerSubcomponent,
+  hasContainerSubcomponent,
+  trigger,
+  container,
+  otherChildren,
+}: PrepareComponentsProps) => {
+  const componentsToRender = [];
+  if (!hasTriggerSubcomponent && !hasContainerSubcomponent) {
+    componentsToRender.push(<DropdownTrigger />);
+    componentsToRender.push(<DropdownContainer>{children}</DropdownContainer>);
+  } else if (!hasTriggerSubcomponent && hasContainerSubcomponent) {
+    componentsToRender.push(<DropdownTrigger />);
+    componentsToRender.push(children);
+  } else if (hasTriggerSubcomponent && !hasContainerSubcomponent) {
+    componentsToRender.push(trigger);
+    componentsToRender.push(
+      <DropdownContainer>{otherChildren}</DropdownContainer>
+    );
+  } else {
+    componentsToRender.push(trigger);
+    componentsToRender.push(container);
+  }
+  return componentsToRender;
+};

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

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
         <%= pb_rails("text_input", props: {

data/app/pb_kits/playbook/pb_filter/filter.html.erb CHANGED Viewed

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb CHANGED Viewed

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
     <% if content %>

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

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

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

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

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, class: object.classname + object.size_class, **combined_html_options) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **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" }) %>

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

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

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb CHANGED Viewed

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:span, **combined_html_options) do %>
+<%= content_tag(:span,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <mark>
       <%= content.presence || object.text %>
     </mark>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb CHANGED Viewed

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss CHANGED Viewed

@@ -51,7 +51,7 @@ $pb_icon_circle_sizes: (
   }
   @each $name, $size in $pb_icon_circle_sizes {
-    &[class*=_#{$name}] {
+    &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
       border-radius: $size/2;

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx CHANGED Viewed

@@ -43,7 +43,7 @@ const IconCircle = (props: IconCircleProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_icon_circle_kit', size, variant), globalProps(props), className)
+  const classes = classnames(buildCss('pb_icon_circle_kit', `size_${size}`, variant), globalProps(props), className)
   return (

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb CHANGED Viewed

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
-  <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb CHANGED Viewed

@@ -14,7 +14,7 @@ module Playbook
                      default: "default"
       def classname
-        generate_classname("pb_icon_circle_kit", size, variant)
+        generate_classname("pb_icon_circle_kit", "size_#{size}", variant)
       end
     end
   end

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js CHANGED Viewed

@@ -16,7 +16,7 @@ describe("IconCircle Kit", () => {
         )
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_circle_kit_md_default")
+        expect(kit).toHaveClass("pb_icon_circle_kit_size_md_default")
     })
     test("renders icon", () => {
@@ -66,7 +66,7 @@ describe("IconCircle Kit", () => {
             />
           )
           const kit = screen.getByTestId(testId)
-          expect(kit).toHaveClass(`pb_icon_circle_kit_sm_${colorVariant}`)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_size_sm_${colorVariant}`)
           cleanup()
         })
@@ -89,7 +89,7 @@ describe("IconCircle Kit", () => {
             />
           )
           const kit = screen.getByTestId(testId)
-          expect(kit).toHaveClass(`pb_icon_circle_kit_${sizeVariant}_default`)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_size_${sizeVariant}_default`)
           cleanup()
         })

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb CHANGED Viewed

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,

data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb CHANGED Viewed

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
     <%= object.text %>

data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb CHANGED Viewed

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("caption", props: { text: object.label, classname: "pb_label_pill_label"}) %>
       <%= pb_rails("pill", props: { text: object.pill_value, variant: object.variant, classname: "pb_label_pill_pill" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.html.erb CHANGED Viewed

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     <% if object.variant == "details" %>
         <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>

data/app/pb_kits/playbook/pb_layout/body.html.erb CHANGED Viewed

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

data/app/pb_kits/playbook/pb_layout/footer.html.erb CHANGED Viewed

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

data/app/pb_kits/playbook/pb_layout/header.html.erb CHANGED Viewed

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

data/app/pb_kits/playbook/pb_layout/item.html.erb CHANGED Viewed

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

data/app/pb_kits/playbook/pb_layout/layout.html.erb CHANGED Viewed

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

data/app/pb_kits/playbook/pb_layout/sidebar.html.erb CHANGED Viewed

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