playbook_ui 11.4.0 → 11.5.0.pre.alpha.fontawesome

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -12,57 +12,70 @@ const useDialog = (visible = false) => {
 }
 
 const DialogStatus = () => {
-  const [infoAlertOpened, toggleInfoAlert] = useDialog()
+  const [defaultAlertOpened, toggleDefaultAlert] = useDialog()
   const [cautionAlertOpened, toggleCautionAlert] = useDialog()
+  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
+  const [infoAlertOpened, toggleInfoAlert] = useDialog()
   const [successAlertOpened, toggleSuccessAlert] = useDialog()
   const [errorAlertOpened, toggleErrorAlert] = useDialog()
-  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
 
   const dialogs = [
     {
-      status: "info",
+      size: "status_size",
+      status: "default",
       text: "Text explaining why there is an alert",
-      title: "Are you Sure?",
-      toggle: toggleInfoAlert,
-      visible: infoAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Yes, Action"
+      title: "Are you sure?",
+      toggle: toggleDefaultAlert,
+      visible: defaultAlertOpened,
+      buttonOneText:"Yes, Action",
+      buttonTwoText: "No, Cancel"
     },
     {
+      size: "status_size",
       status: "caution",
       text: "This is the action you will be taking",
-      title: "Are you Sure?",
+      title: "Are you sure?",
       toggle: toggleCautionAlert,
       visible: cautionAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Yes, Action"
+      buttonOneText:"Yes, Action",
+      buttonTwoText: "No, Cancel"
     },
     {
+      size: "status_size",
       status: "delete",
       text: "You are about to delete ...",
       title: "Delete",
       toggle: toggleDeleteAlert,
       visible: deleteAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Yes, Delete"
+      buttonOneText:"Yes, Delete",
+      buttonTwoText: "No, Cancel"
     },
     {
-      status: "error",
-      text: "Text explaining the error",
-      title: "Error Message",
-      toggle: toggleErrorAlert,
-      visible: errorAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Ok, Thanks"
+      size: "sm",
+      status: "info",
+      text: "Text explaining why there is an alert",
+      title: "Information",
+      toggle: toggleInfoAlert,
+      visible: infoAlertOpened,
+      buttonOneText:"Ok, Thanks!",
     },
     {
+      size: "sm",
       status: "success",
       text: "Text explaining what is successful",
       title: "Success!",
       toggle: toggleSuccessAlert,
       visible: successAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Ok, Thanks"
+      buttonOneText: "Great!",
+    },
+    {
+      size: "sm",
+      status: "error",
+      text: "Text explaining the error",
+      title: "Error Message",
+      toggle: toggleErrorAlert,
+      visible: errorAlertOpened,
+      buttonOneText:"Oh no!",
     },
   ]
 
@@ -71,9 +84,9 @@ const DialogStatus = () => {
       <Flex>
         <Button
             marginRight="md"
-            onClick={toggleInfoAlert}
+            onClick={toggleDefaultAlert}
         >
-          {"Information Status"}
+          {"Default Status"}
         </Button>
         <Button
             marginRight="md"
@@ -83,18 +96,27 @@ const DialogStatus = () => {
         </Button>
         <Button
             marginRight="md"
-            onClick={toggleSuccessAlert}
+            onClick={toggleDeleteAlert}
         >
-          {"Success Status"}
+          {"Delete Status"}
         </Button>
-        <Button onClick={toggleErrorAlert}>
-          {"Error Status"}
+        <Button
+            marginRight="md"
+            onClick={toggleInfoAlert}
+        >
+          {"Information Status"}
         </Button>
         <Button
             marginRight="md"
-            onClick={toggleDeleteAlert}
+            onClick={toggleSuccessAlert}
         >
-          {"Delete Status"}
+          {"Success Status"}
+        </Button>
+        <Button 
+            marginRight="md"
+            onClick={toggleErrorAlert}
+        >
+          {"Error Status"}
         </Button>
       </Flex>
       <Flex>
@@ -103,22 +125,37 @@ const DialogStatus = () => {
               key={dialog.status}
               onClose={dialog.toggle}
               opened={dialog.visible}
+              size={dialog.size}
               status={dialog.status}
               text={dialog.text}
               title={dialog.title}
           >
-          <Dialog.Footer>
-            <Button
-                onClick={dialog.toggle}
-                variant="secondary"
-            >
-            {dialog.buttonOneText}
-            </Button>
-            <Button
-                onClick={dialog.toggle}
-            >
-            {dialog.buttonTwoText}
-            </Button>
+          <Dialog.Footer
+              paddingBottom="md"
+              paddingX="md"
+          >
+            <If condition={!dialog.buttonTwoText}>
+              <Button
+                  fullWidth
+                  onClick={dialog.toggle}
+              >
+              {dialog.buttonOneText}
+              </Button>
+            </If>
+            <If condition={dialog.buttonTwoText}>
+              <Button
+                  onClick={dialog.toggle}
+                  paddingRight="xl"
+              >
+              {dialog.buttonOneText}
+              </Button>
+              <Button
+                  onClick={dialog.toggle}
+                  variant="secondary"
+              >
+              {dialog.buttonTwoText}
+              </Button>
+            </If>
           </Dialog.Footer>
           </Dialog>
         ))}

data/app/pb_kits/playbook/pb_file_upload/{_file_upload.jsx → _file_upload.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
@@ -12,11 +10,11 @@ import Body from '../pb_body/_body'
 import Card from '../pb_card/_card'
 
 type FileUploadProps = {
-  accept?: array<string>,
+  accept?: string[],
   className?: string,
   data?: object,
   acceptedFilesDescription?: string,
-  onFilesAccepted: Callback,
+  onFilesAccepted: Callback<File, File>,
 }
 
 const FileUpload = (props: FileUploadProps) => {
@@ -27,10 +25,8 @@ const FileUpload = (props: FileUploadProps) => {
     data = {},
     onFilesAccepted = noop,
   } = props
-  const onDrop = useCallback((files) => {
-    onFilesAccepted(files)
-  })
 
+  const onDrop = useCallback((files) => onFilesAccepted(files), []);
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept,
     onDrop,
@@ -57,11 +53,11 @@ const FileUpload = (props: FileUploadProps) => {
       <Card>
         <input {...getInputProps()} />
         <Body color="light">
-          <If condition={isDragActive}>
+          {isDragActive ?
             <p>{'Drop the files here ...'}</p>
-            <Else />
+            :
             <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
-          </If>
+          }
         </Body>
       </Card>
     </div>

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_form_group/{_form_group.jsx → _form_group.tsx}

@@ -1,12 +1,10 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type FormGroupProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   children?: Node,
   className?: string,
   data?: object,
@@ -27,7 +25,6 @@ const FormGroup = (props: FormGroupProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
-
   return (
     <div
         {...ariaProps}

data/app/pb_kits/playbook/pb_form_group/form_group.test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from "../utilities/test-utils";
+
+import { Button, FormGroup } from "..";
+
+test("should render a div with a button child", () => {
+  const testId = "primary-test"
+  const { queryByTestId } = render(
+    <FormGroup>
+      <Button 
+          data={{ testid: testId }} 
+          text={"some text"} />
+    </FormGroup>
+  )
+
+  expect(queryByTestId("primary-test")).not.toBeNull;
+})

data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-target-blank */
 /* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
@@ -14,6 +15,8 @@ type HashtagProps = {
   dark?: boolean,
   data?: string,
   id?: string,
+  newWindow?: boolean,
+  rel?: string,
   text?: string,
   type: "default" | "home" | "project" | "appointment",
   url?: string,
@@ -33,6 +36,8 @@ const Hashtag = (props: HashtagProps) => {
     dark = false,
     data = {},
     id,
+    newWindow,
+    rel,
     text,
     type = 'default',
     url,
@@ -49,7 +54,11 @@ const Hashtag = (props: HashtagProps) => {
         className={classes}
         id={id}
     >
-      <a href={url}>
+      <a
+          href={url}
+          rel={(newWindow ? "noreferrer" : rel)}
+          target={(newWindow ? '_blank' : '_self')}
+      >
         <Badge
             dark={dark}
             text={typeMap[type] + text}

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("hashtag", props: {text: "Open in the same Window", url: "https://google.com", type: "project"}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project", new_window: true}) %>

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Hashtag } from '../../'
+
+const HashtagLink = (props) => {
+  return (
+    <div>
+      <Hashtag
+          text="Open in the same window"
+          type="project"
+          url="https://google.com"
+          {...props}
+      />
+      <br />
+      <br />
+      <Hashtag
+          newWindow
+          text="Open in a new window"
+          type="project"
+          url="https://google.com"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default HashtagLink

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md

@@ -0,0 +1 @@
+Use the newWindow/new_window prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

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

@@ -2,6 +2,8 @@ examples:
 
   rails:
   - hashtag_default: Hashtag Types
+  - hashtag_link: Hashtag Links
 
   react:
   - hashtag_default: Hashtag Types
+  - hashtag_link: Hashtag Links

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

@@ -1 +1,2 @@
 export { default as HashtagDefault } from './_hashtag_default.jsx'
+export { default as HashtagLink } from './_hashtag_link.jsx'

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

@@ -3,7 +3,7 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-  <%= link_to object.url do %>
+  <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>
 <% end %>