playbook_ui 11.5.0.pre.alpha.pre.rubocop → 11.6.0.pre.alpha.fontawesome

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b473c5e8dd9d01f5b4e75db5793f628b8d55f9c18ae639cebf8ee32e9d3b2121
-  data.tar.gz: f6d6ce71ebb98cddfa83dbae696c74daebe4a2d649b1346a2f6b27de36eb90e6
+  metadata.gz: 969af3cbd82555c227fdd686b32216d573dff90e2a70584d5ca9920ed1742730
+  data.tar.gz: bec73672d2fcdce37bc59cc51297e5050929f2bb5b0a0b880229d11a677d693d
 SHA512:
-  metadata.gz: 6b7db376eaa03ebc0141d1f639f206e6950230836ddf01097f33c97f2aa725aea662070ee9c27599741c4ebf7faf14a8d1a06aaefa6b7263eebbc2b584e4df6e
-  data.tar.gz: e2bd227f75e56cec7a26049e106663e6cb18ff68fd14cc5157eb5da36554d09417a433f3ca25e56f132730ac41e2d5104dc530a28e6f2d8f42807428b71d7fa9
+  metadata.gz: cc23bb0fc2b71efdfe96582b6242cab6fc36ff2de008987851808b3c04a1c3693bd21d6f0ae7a08acf83d94a4a65feafbdce306f0ac7a2bc466eceaeeb10aa80
+  data.tar.gz: d85a76cf8802b4fae921d05bd680dfddd1878bb1886d89d09ef2c77dae955eea84782450fad57f7c7ef9c3036d45ae53f92d8e067a503012cf48bc7f33452a68

data/app/pb_kits/playbook/data/menu.yml

@@ -104,16 +104,3 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
-visual_guidelines:
-  - colors
-  - max_width
-  - number_spacing
-  - positioning
-  - line_height
-  - spacing
-  - border_radius
-  - typography
-  - shadows
-  - display
-  - cursor
-  - flex_box

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import { cleanup, render, screen } from '../utilities/test-utils'
+
+import Badge from './_badge'
+
+const testId = "badge"
+
+test('default class name', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        text="+1"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  expect(kit).toHaveClass('pb_badge_kit_neutral')
+})
+
+test('primary class name', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        text="+1"
+        variant="primary"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  expect(kit).toHaveClass('pb_badge_kit_primary')
+})
+
+test('displays text content', () => {
+  render(
+    <Badge
+        text="+1"
+        variant="primary"
+    />
+  )
+
+  const text = screen.getByText("+1")
+  expect(text).toBeInTheDocument()
+})
+
+test('displays rounded corners', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        rounded
+        text="+1"
+        variant="primary"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_badge_kit_primary_rounded')
+})
+
+test('displays color variants', () => {
+  [
+    "success",
+    "warning",
+    "error",
+    "info"
+  ].forEach((colorVariant) => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={colorVariant}
+          variant={colorVariant}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_${colorVariant}`)
+
+    cleanup()
+  })
+})

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -17,6 +17,7 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   icon?: string,
+  iconRight?: boolean,
   id?: string,
   link?: string,
   loading?: boolean,
@@ -61,6 +62,7 @@ const Button = (props: ButtonPropTypes) => {
     data = {},
     disabled,
     icon = null,
+    iconRight = false,
     id,
     loading = false,
     onClick,
@@ -91,10 +93,13 @@ const Button = (props: ButtonPropTypes) => {
 
   const content = (
     <span className="pb_button_content">
-      {icon && (
-        <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
+      {icon && !iconRight && (
+        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
       )}
       <span>{text || children}</span>
+      {icon && iconRight && (
+        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
+      )}
     </span>
   )
 

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -55,6 +55,13 @@ $pb_button_border_width: 0px;
     visibility: visible;
   }
 
+  .button_with_icon {
+    margin-right: $space_xs;
+  }
+  .button_with_icon_right {
+    margin-left: $space_xs;
+  }
+
   &:hover, &:focus {
     outline: none;
     

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,5 +1,16 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
+    <% if object.icon && !object.icon_right %>
+        <span>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
+        </span>
+    <% end %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
+    <% if object.icon && object.icon_right %>
+        <span>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
+        </span>
+    <% end %>
+
 <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -7,6 +7,9 @@ module Playbook
                       default: false
       prop :full_width, type: Playbook::Props::Boolean,
                         default: false
+      prop :icon
+      prop :icon_right, type: Playbook::Props::Boolean,
+                        default: false
       prop :link
       prop :loading, type: Playbook::Props::Boolean,
                      default: false

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("button") do %>
-  <%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %>
+  <%= pb_rails("pill", props: { text:"5", fixed_width: true, margin_right: "xs", variant:"info" }) %>
   <span>Button with Block Content</span>
 <% end %>

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx

@@ -1,15 +1,18 @@
-import React from 'react'
-import { Button } from '../../'
+import React from "react";
+import { Button, Pill } from "../../";
 
 const ButtonBlockContent = (props) => (
   <div>
-    <Button
-        fixedWidth
-        icon="users"
-        text="Button with Block Content"
+    <Button fixedWidth 
         {...props}
-    />
+    >
+      <Pill marginRight="xs"
+          text="5"
+          variant="info"
+      />
+      <span>Button with Block Content</span>
+    </Button>
   </div>
-)
+);
 
-export default ButtonBlockContent
+export default ButtonBlockContent;

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md

@@ -0,0 +1 @@
+Used when the user wants to display custom content within a button instead of passing in text or props to the kit itself. In this example the button is using the Pill kit and a `<span>` element inside the button.

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left" }) %>
+<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button } from '../../'
+
+const ButtonIconOptions = (props) => (
+    <div>
+      <Button
+          fixedWidth
+          icon='plus'
+          text="Icon on Left"
+          {...props}
+      />
+      {' '}
+      <Button
+          fixedWidth
+          icon='chevron-right'
+          iconRight
+          text="Icon on Right"
+          {...props}
+      />
+    </div>
+  )
+  
+  export default ButtonIconOptions

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md

@@ -0,0 +1 @@
+Icons can also be added to a button if needed. By default, the icon will be displayed on the left of the text. To display the icon on the right, use the optional prop of `iconRight` in react or `icon_right` in rails.

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

@@ -5,6 +5,7 @@ examples:
   - button_link: Button Links
   - button_loading: Button Loading
   - button_block_content: Button Block Content
+  - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
   - button_size: Button Size
@@ -15,6 +16,7 @@ examples:
   - button_link: Button Links
   - button_loading: Button Loading
   - button_block_content: Button Block Content
+  - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size

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

@@ -3,6 +3,7 @@ export { default as ButtonFullWidth } from './_button_full_width.jsx'
 export { default as ButtonLink } from './_button_link.jsx'
 export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
+export { default as ButtonIconOptions } from './_button_icon_options.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -46,7 +46,8 @@ module Playbook
       prop :plugins, type: Playbook::Props::Boolean,
                      default: false,
                      deprecated: true
-      prop :position, type: Playbook::Props::String
+      prop :position, type: Playbook::Props::String,
+                      default: "auto"
       prop :position_element, type: Playbook::Props::String
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,

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() 
+
+
+});