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

playbook_ui 13.24.0 → 13.25.0.pre.alpha.barchartfix2766

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 (190) hide show

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx ADDED Viewed

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
+const DropdownWithCustomTrigger = (props) => {
+const [selectedOption, setSelectedOption] = useState();
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+        <Dropdown.Trigger>
+            <div key={selectedOption ? selectedOption.icon : "flag"}>
+                <IconCircle
+                    cursor="pointer"
+                    icon={selectedOption ? selectedOption.icon : "flag"}
+                    variant="royal"
+                />
+            </div>
+        </Dropdown.Trigger>
+      <Dropdown.Container maxWidth="xs">
+        {options.map((option) => (
+          <Dropdown.Option key={option.id}
+              option={option}
+          >
+            <>
+              <FlexItem>
+                <Flex>
+                  <Icon icon={option.icon}
+                      paddingRight="xs"
+                  />
+                  <Body text={option.label} />
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Body color="light"
+                    text={option.areaCode}
+                />
+              </FlexItem>
+            </>
+          </Dropdown.Option>
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+export default  DropdownWithCustomTrigger

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit.

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml ADDED Viewed

@@ -0,0 +1,12 @@
+examples:
+  react:
+  - dropdown_default: Default
+  - dropdown_with_custom_options: Custom Options
+  - dropdown_with_custom_display: Custom Display
+  - dropdown_with_custom_trigger: Custom Trigger
+  - dropdown_with_autocomplete: Autocomplete
+  - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
+  - dropdown_with_custom_padding: Custom Padding for Dropdown Options

data/app/pb_kits/playbook/pb_dropdown/docs/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+export { default as DropdownDefault } from './_dropdown_default.jsx'
+export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
+export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
+export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
+export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
+export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
+export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import { renderKit } from '../utilities/test-utils'
+import { Dropdown } from '../'
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+  const kit = renderKit(Dropdown , props)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import {useState} from 'react';
+const useDropdown = (initial=true) => {
+const [isDropDownClosed, setIsDropDownClosed] = useState(initial);
+const toggleDropdown = () => setIsDropDownClosed(!isDropDownClosed);
+return [
+    isDropDownClosed,
+    setIsDropDownClosed as any,
+    toggleDropdown
+]
+}
+export default useDropdown

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+import React, { useContext } from "react";
+import DropdownContext from "../context";
+export const useHandleOnKeyDown = () => {
+const {
+  autocomplete,
+  focusedOptionIndex,
+  filteredOptions,
+  setFocusedOptionIndex,
+  handleOptionClick,
+  setIsDropDownClosed,
+  handleBackspace,
+  selected,
+}= useContext(DropdownContext)
+  return (e: React.KeyboardEvent) => {
+    if (e.key !== "Tab" && autocomplete && selected && selected.label) {
+      handleBackspace();
+    }
+    switch (e.key) {
+    case "Backspace":
+    case "Delete":
+      if (autocomplete) {
+      handleBackspace();
+      }
+      break;
+    case "ArrowDown": {
+      e.preventDefault();
+      setIsDropDownClosed(false);
+      const nextIndex = (focusedOptionIndex + 1) % filteredOptions.length;
+      setFocusedOptionIndex(nextIndex);
+      break;
+    }
+    case "ArrowUp": {
+      e.preventDefault();
+      const nextIndexUp =
+        (focusedOptionIndex - 1 + filteredOptions.length) %
+        filteredOptions.length;
+      setFocusedOptionIndex(nextIndexUp);
+      break;
+    }
+    case "Enter":
+      if (focusedOptionIndex !== -1) {
+        e.preventDefault();
+        handleOptionClick(filteredOptions[focusedOptionIndex]);
+        setFocusedOptionIndex(-1)
+      } else if (focusedOptionIndex === -1) {
+        setIsDropDownClosed(false)
+      }
+      break;
+      case "Tab":
+        setIsDropDownClosed(true);
+        setFocusedOptionIndex(-1)
+        break;
+  }
+}
+};

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

@@ -0,0 +1,100 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps
+} 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 };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+  searchbar?: boolean;
+};
+const DropdownContainer = (props: DropdownContainerProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    htmlOptions = {},
+    id,
+    searchbar = false,
+  } = props;
+  const {
+    isDropDownClosed,
+    handleChange,
+    filterItem,
+    filteredOptions,
+    inputRef,
+    setFocusedOptionIndex,
+  } = useContext(DropdownContext);
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss("pb_dropdown_container"),
+    `${isDropDownClosed ? "close" : "open"}`,
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        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,108 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../../utilities/props";
+import { globalProps, 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 };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  option?: GenericObject;
+  key?: string;
+  padding?: string;
+}  & GlobalProps;
+const DropdownOption = (props: DropdownOptionProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    htmlOptions = {},
+    id,
+    option,
+    key,
+    padding = "xs",
+  } = 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 htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss("pb_dropdown_option"),
+    selectedClass,
+    focusedClass,
+    globalProps(props, {padding}),
+    className
+  );
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+        key={key}
+        onClick= {() => handleOptionClick(option)}
+    >
+      <ListItem
+          cursor="pointer"
+          data-name={option.value}
+          key={option.label}
+          padding="none"
+      >
+        <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,172 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps
+} 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 };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+  placeholder?: string;
+};
+const DropdownTrigger = (props: DropdownTriggerProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    customDisplay,
+    data = {},
+    htmlOptions = {},
+    id,
+    placeholder,
+  } = 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 htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss("pb_dropdown_trigger"),
+    globalProps(props),
+    className
+  );
+  const triggerWrapperClasses = `dropdown_trigger_wrapper ${
+    isInputFocused && "dropdown_trigger_wrapper_focus"
+  } ${!autocomplete && "dropdown_trigger_wrapper_select_only"}`;
+  const customDisplayPlaceholder = selected.label ? (
+    <b>{selected.label}</b>
+  ) : autocomplete ? (
+    ""
+  ) : placeholder ? (
+    placeholder
+  ) : (
+    "Select..."
+  );
+  const defaultDisplayPlaceholder = selected.label
+    ? selected.label
+    : autocomplete
+    ? ""
+    : placeholder
+    ? placeholder
+    : "Select...";
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      {children ? (
+        <div
+            onClick={() => toggleDropdown()}
+            onKeyDown= {handleKeyDown}
+            style={{ display: "inline-block" }}
+            tabIndex= {0}
+        >
+          {children}
+        </div>
+      ) : (
+        <>
+          <Flex
+              align="center"
+              borderRadius="lg"
+              className={triggerWrapperClasses}
+              cursor={`${autocomplete ? "text" : "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"}`}>
+                      {customDisplayPlaceholder}
+                    </Body>
+                  </Flex>
+                ) : (
+                  <Body text={defaultDisplayPlaceholder} />
+                )}
+                {autocomplete && (
+                  <input
+                      className="dropdown_input"
+                      onChange={handleChange}
+                      onClick={() => toggleDropdown()}
+                      onFocus={() => setIsInputFocused(true)}
+                      onKeyDown={handleKeyDown}
+                      placeholder={
+                        selected.label
+                          ? ""
+                          : placeholder
+                          ? placeholder
+                          : "Select..."
+                      }
+                      ref={inputRef}
+                      value={filterItem}
+                  />
+                )}
+              </Flex>
+            </FlexItem>
+              <Body
+                  display="flex"
+                  htmlOptions={{
+                    onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
+                  }}
+                  key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+              >
+                <Icon
+                    cursor="pointer"
+                    icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+                    size="sm"
+                />
+              </Body>
+          </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,9 +1,4 @@
-<%= content_tag("div",
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag 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,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag 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,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_flex/flex_item.html.erb CHANGED Viewed

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