playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.table1

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -0,0 +1,217 @@
+/* eslint-disable react/jsx-handler-names */
+/* eslint-disable react/no-multi-comp */
+
+import React, { useState } from "react";
+import classnames from "classnames";
+import Modal from "react-modal";
+
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import Body from "../pb_body/_body";
+import Button from "../pb_button/_button";
+import DialogHeader from "./child_kits/_dialog_header";
+import DialogFooter from "./child_kits/_dialog_footer";
+import DialogBody from "./child_kits/_dialog_body";
+import Flex from "../pb_flex/_flex";
+import IconCircle from "../pb_icon_circle/_icon_circle";
+import Title from "../pb_title/_title";
+import { DialogContext } from "./_dialog_context";
+
+type DialogProps = {
+  aria?: { [key: string]: string };
+  cancelButton?: string;
+  children: React.ReactNode | React.ReactNode[] | string;
+  className?: string;
+  closeable: boolean;
+  confirmButton?: string;
+  data?: object;
+  id?: string;
+  loading?: boolean;
+  onCancel?: () => void;
+  onChange?: () => void;
+  onClose?: () => void;
+  onConfirm?: () => void;
+  opened: boolean;
+  portalClassName?: string;
+  shouldCloseOnOverlayClick: boolean;
+  size?: "sm" | "md" | "lg" | "status_size" | "content";
+  status?: "info" | "caution" | "delete" | "error" | "success";
+  text?: string;
+  title?: string;
+  trigger?: string;
+};
+
+const Dialog = (props: DialogProps) => {
+  const {
+    aria = {},
+    cancelButton,
+    confirmButton,
+    className,
+    data = {},
+    id,
+    size = "md",
+    children,
+    loading = false,
+    opened,
+    onCancel = () => {},
+    onConfirm = () => {},
+    onClose = () => {},
+    portalClassName,
+    shouldCloseOnOverlayClick = true,
+    status,
+    text,
+    title,
+    trigger,
+  } = props;
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const dialogClassNames = {
+    base: classnames("pb_dialog", buildCss("pb_dialog", size)),
+    afterOpen: "pb_dialog_after_open",
+    beforeClose: "pb_dialog_before_close",
+  };
+
+  const overlayClassNames = {
+    base: "pb_dialog_overlay",
+    afterOpen: "pb_dialog_overlay_after_open",
+    beforeClose: "pb_dialog_overlay_before_close",
+  };
+
+  const classes = classnames(
+    buildCss("pb_dialog_wrapper"),
+    globalProps(props),
+    className
+  );
+
+  const [triggerOpened, setTriggerOpened] = useState(false),
+    modalIsOpened = trigger ? triggerOpened : opened;
+
+  const api = {
+    onClose: trigger
+      ? function () {
+          setTriggerOpened(false);
+        }
+      : onClose,
+  };
+
+  if (trigger) {
+    const modalTrigger = document.querySelector(trigger);
+    modalTrigger.addEventListener(
+      "click",
+      () => {
+        setTriggerOpened(true);
+        document
+          .querySelector("#cancel-button")
+          .addEventListener("click", () => {
+            setTriggerOpened(false);
+          });
+      },
+      { once: true }
+    );
+  }
+
+  type sweetAlertStatusProps = {
+    [key: string]: {
+      icon: string,
+      variant: "default" | "yellow" | "red" | "green" | "royal" | "blue" | "purple" | "teal",
+      size: "sm" | "md" | "lg" | "base" | "xs" | "xl";
+    }
+  }
+
+  const sweetAlertStatus: sweetAlertStatusProps = {
+    default: {
+      icon: "exclamation-circle",
+      variant: "default",
+      size: "lg",
+    },
+    info: {
+      icon: "info-circle",
+      variant: "default",
+      size: "lg",
+    },
+    caution: {
+      icon: "exclamation-triangle",
+      variant: "yellow",
+      size: "lg",
+    },
+    delete: {
+      icon: "trash-alt",
+      variant: "red",
+      size: "lg",
+    },
+    error: {
+      icon: "times-circle",
+      variant: "red",
+      size: "lg",
+    },
+    success: {
+      icon: "check-circle",
+      variant: "green",
+      size: "lg",
+    },
+  };
+
+  return (
+    <DialogContext.Provider value={api}>
+      <div {...ariaProps} {...dataProps} className={classes}>
+        <Modal
+          ariaHideApp={false}
+          className={dialogClassNames}
+          closeTimeoutMS={200}
+          contentLabel="Minimal Modal Example"
+          id={id}
+          isOpen={modalIsOpened}
+          onRequestClose={onClose}
+          overlayClassName={overlayClassNames}
+          portalClassName={portalClassName}
+          shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+        >
+          <>
+            {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
+            {!status && text ? <Dialog.Body>{text}</Dialog.Body> : null}
+            {status && (
+              <Dialog.Body padding="md">
+                <Flex align="center" orientation="column">
+                  <IconCircle
+                    icon={sweetAlertStatus[status].icon}
+                    size={sweetAlertStatus[status].size}
+                    variant={sweetAlertStatus[status].variant}
+                  />
+                  <Title marginTop="sm" size={3}>
+                    {title}
+                  </Title>
+                  <Body marginTop="xs" text={text} />
+                </Flex>
+              </Dialog.Body>
+            )}
+            {cancelButton && confirmButton ? (
+              <Dialog.Footer>
+                  <Button 
+                    loading={loading} 
+                    onClick={onConfirm} 
+                    htmlType="button" 
+                    variant="primary">
+                    {confirmButton}
+                  </Button>
+                  <Button 
+                    id="cancel-button" 
+                    onClick={onCancel} 
+                    variant="link" 
+                    htmlType="button">
+                    {cancelButton}
+                  </Button>
+              </Dialog.Footer>
+            ) : null}
+            {children}
+          </>
+        </Modal>
+      </div>
+    </DialogContext.Provider>
+  );
+};
+Dialog.Header = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
+
+export default Dialog;

data/app/pb_kits/playbook/pb_dialog/_dialog_context.tsx

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const DialogContext = React.createContext(null)

data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_body.jsx → _dialog_body.tsx}

@@ -1,10 +1,14 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps'
 
+type DialogBodyProps = {
+  children: React.ReactNode | React.ReactNode[] | string,
+  padding?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
+  className?: string
+} 
+
 // Body component
 const DialogBody = (props: DialogBodyProps) => {
   const { children, padding = "sm", className } = props

data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_footer.jsx → _dialog_footer.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { GlobalProps, globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
@@ -12,17 +10,16 @@ import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 type DialogFooterProps = {
   aria?: object,
-  children: array<React.ReactNode> | React.ReactNode | string,
+  children: React.ReactChild[] | React.ReactChild | string,
   className?: string,
-  closeable: boolean,
   data?: object,
   id?: string,
   padding?: string,
   paddingBottom?: string,
   paddingX?: string,
-  separator: boolean,
-  spacing?: string,
-}
+  separator?: boolean,
+  spacing?: "none" | "between" | "around" | "evenly",
+} & GlobalProps
 
 // Footer component
 const DialogFooter = (props: DialogFooterProps) => {
@@ -41,9 +38,9 @@ const DialogFooter = (props: DialogFooterProps) => {
 
   return (
     <>
-      <If condition={separator}>
-        <SectionSeparator />
-      </If>
+      {separator &&
+        <SectionSeparator aria={{dd: 'ff'}} className="dd" data={{dd: 'ff'}} id="d" text="ss"/>
+      }
       <Flex
           className={classnames(footerCSS, footerSpacing, className)}
           spacing={spacing}

data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_header.jsx → _dialog_header.tsx}

@@ -1,9 +1,7 @@
-/* @flow */
-
 import React, { useContext } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 
 import { CloseIcon } from '../_close_icon'
 import { DialogContext } from '../_dialog_context'
@@ -11,18 +9,18 @@ import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 type DialogHeaderProps = {
-  aria?: object,
-  children: array<React.ReactNode> | React.ReactNode | string,
+  aria?: {[key: string]: string},
+  children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
-  closeable: boolean,
+  closeable?: boolean,
   data?: object,
   id?: string,
   padding?: string,
-  separator: boolean,
-  spacing?: string,
+  separator?: boolean,
+  spacing?: "none" | "between" | "around" | "evenly",
   text?: string,
   title?: string,
-}
+} & GlobalProps
 
 const DialogHeader = (props: DialogHeaderProps) => {
   const {
@@ -53,16 +51,15 @@ const DialogHeader = (props: DialogHeaderProps) => {
           spacing={spacing}
       >
         {children}
-        <If condition={closeable}>
+        {closeable &&
           <CloseIcon
-              className="close-icon"
-              onClose={api.onClose}
+            onClose={api.onClose}
           />
-        </If>
+        }
       </Flex>
-      <If condition={separator}>
+      {separator &&
         <SectionSeparator />
-      </If>
+      }
     </>
   )
 }

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx

@@ -33,6 +33,7 @@ const FilterDouble = ({
   children,
   dark,
   minWidth,
+  placement,
   ...bgProps
 }: FilterDoubleProps) => (
   <FilterBackground
@@ -46,6 +47,7 @@ const FilterDouble = ({
       <FiltersPopover
           dark={dark}
           minWidth={minWidth}
+          placement={placement}
       >
         {children}
       </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx

@@ -33,6 +33,7 @@ const FilterSingle = ({
   children,
   dark,
   minWidth,
+  placement,
   ...bgProps
 }: FilterSingleProps) => {
   return (
@@ -49,6 +50,7 @@ const FilterSingle = ({
           <FiltersPopover
               dark={dark}
               minWidth={minWidth}
+              placement={placement}
           >
             {children}
           </FiltersPopover>

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx

@@ -6,7 +6,7 @@ import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
 
 const FiltersPopoverProps = { children: Node }
-const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
+const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -25,7 +25,7 @@ const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
     <PbReactPopover
         closeOnClick="outside"
         minWidth={minWidth}
-        placement="bottom"
+        placement={placement}
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}

data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb

@@ -2,6 +2,7 @@
   pb_rails("filter", props: {
     min_width: "600px",
     id: "25",
+    position: "top",
     filters: [
       { name: "name", value: "John Wick" },
       { name: "city", value: "San Francisco"}

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb

@@ -0,0 +1,34 @@
+<%=
+  pb_rails("filter", props: {
+    id: "pla",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    placement: "right",
+    template:"filter_only",
+  }) do
+%>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
+
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
+
+const FilterPlacement = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+  ]
+  return (
+
+    <>
+      <Filter
+          double
+          onSortChange={SortingChangeCallback}
+          placement={"right"}
+          results={1}
+          sortOptions={{
+            popularity: 'Popularity',
+            // eslint-disable-next-line
+            manager_title: 'Manager\'s Title',
+            // eslint-disable-next-line
+            manager_name: 'Manager\'s Name',
+          }}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          {...props}
+      >
+        <TextInput
+            label="Example Text Field"
+            placeholder="Enter Text"
+            {...props}
+        />
+
+        <Select
+            blankSelection="Select One..."
+            label="Example Collection Select"
+            name="Collection Select"
+            options={options}
+            {...props}
+        />
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </Filter>
+    </>
+  )
+}
+
+export default FilterPlacement

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md

@@ -0,0 +1,4 @@
+Click the filter buttom above to toggle the popover.
+
+To change the filter's popover position, use the `placement` prop with one of the positions: 
+`"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"`

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

@@ -8,6 +8,7 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_min_width: Min Width for Popover Inside of Filter
+  - filter_placement: Filter Placement
 
   react:
   - filter_default: Default
@@ -18,3 +19,4 @@ examples:
   - sort_only: Sort Only
   - filter_min_width: Min Width for Popover Inside of Filter
   - filter_close_popover: Close Popover
+  - filter_placement: Filter Placement

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

@@ -6,3 +6,4 @@ export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMinWidth } from './_filter_min_width.jsx'
 export { default as FilterClosePopover } from './_filter_close_popover.jsx'
+export { default as FilterPlacement } from './_filter_placement.jsx'

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

@@ -69,13 +69,13 @@
     <% end %>
 
     <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
+      <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
         <%= content %>
       <% end %>
     <%end%>
 
     <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom', padding: 'none'}) do %>
+      <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -11,6 +11,9 @@ module Playbook
                       default: "default"
       prop :background, type: Playbook::Props::Boolean, default: true
       prop :min_width, default: "auto"
+      prop :placement, type: Playbook::Props::Enum,
+                       values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
+                       default: "bottom-start"
 
       def classname
         generate_classname("pb_filter_kit")

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -0,0 +1,76 @@
+import React from "react";
+import {
+  render,
+  screen,
+  fireEvent,
+} from "../utilities/test-utils";
+import { Button, Filter, Flex, Select, TextInput } from "..";
+
+function FilterTest(props) {
+  const SortingChangeCallback = (sortOptions) => {
+    alert(JSON.stringify(sortOptions[0]));
+  };
+
+  const options = [
+    { value: "USA" },
+    { value: "Canada" },
+    { value: "Brazil" },
+    { value: "Philippines" },
+    { value: "A Galaxy Far Far Away Like Really Far Away" },
+  ];
+  return (
+    <Filter
+        onSortChange={SortingChangeCallback}
+        results={1}
+        sortOptions={{
+        popularity: "Popularity",
+        // eslint-disable-next-line
+        manager_title: "Manager's Title",
+        // eslint-disable-next-line
+        manager_name: "Manager's Name",
+      }}
+        sortValue={[{ name: "popularity", dir: "desc" }]}
+        {...props}
+    >
+      <TextInput
+          label="Example Text Field"
+          placeholder="Enter Text"
+          {...props}
+      />
+
+      <Select
+          blankSelection="Select One..."
+          label="Example Collection Select"
+          name="Collection Select"
+          options={options}
+          {...props}
+      />
+      <Flex spacing="between"
+          {...props}>
+        <Button text="Apply"
+            {...props} />
+        <Button text="Clear"
+            variant="secondary"
+            {...props} />
+      </Flex>
+    </Filter>
+  );
+}
+
+test("triggers popover on filter button click", () => {
+  render(<FilterTest data={{ testid: "render-test" }}/>);
+
+  const btn = screen.getAllByRole("button")[0];
+
+  // checks if the sort menu rendered
+  expect(screen.getByLabelText("sort-amount-down icon")).toBeInTheDocument()
+  expect(screen.getByText('Popularity')).toBeInTheDocument() // check if filter/sort is rendered 
+
+  // hits the filter button and triggers popover
+  fireEvent.click(btn);
+
+  // check if popover displays correctly by checking its tet
+  expect(screen.getByText("Example Text Field")).toBeInTheDocument() 
+
+
+});

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb

@@ -0,0 +1,32 @@
+<%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
+  <%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
+    <%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
+      <%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
+      <%= pb_rails("flex", props: {align: "stretch"}) do %>
+        <%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
+          <%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
+          <%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
+            <%= pb_rails("title", props: {size: 1, text: "39"})%>
+            <%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
+          <% end %>
+          <%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
+        <%end %>
+        <%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
+        <%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
+          <%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
+          <%= pb_rails("flex", props: {wrap: true}) do %>
+            <%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
+              <%= pb_rails("gauge", props: {
+                chart_data: [{ name: "Name", value: 10 }],
+                disable_animation: true,
+                height: '100%',
+                id: "gauge-complex",
+                suffix: "%"
+              }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <%end %>
+    <% end %>
+  <% end %>
+<% end %>