playbook_ui 13.32.0.pre.alpha.play1416movealiaslogic3266 → 13.33.0.pre.alpha.PLAY1454formpillicons3309

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-# rubocop:disable Style/HashLikeCase
-
 require "open-uri"
 require "json"
 
@@ -139,11 +137,13 @@ module Playbook
       end
 
       def border_class
-        border ? "fa-border" : nil
+        prefix = is_svg? ? "svg_border" : "fa-border"
+        border ? prefix : nil
       end
 
       def fixed_width_class
-        fixed_width ? "fa-fw" : nil
+        prefix = is_svg? ? "svg_fw" : "fa-fw"
+        fixed_width ? prefix : nil
       end
 
       def icon_class
@@ -151,38 +151,45 @@ module Playbook
       end
 
       def inverse_class
-        inverse ? "fa-inverse" : nil
+        class_name = is_svg? ? "svg_inverse" : "fa-inverse"
+        inverse ? class_name : nil
       end
 
       def list_item_class
-        list_item ? "fa-li" : nil
+        class_name = is_svg? ? "svg_li" : "fa-li"
+        list_item ? class_name : nil
       end
 
       def flip_class
+        prefix = is_svg? ? "flip_" : "fa-flip-"
         case flip
         when "horizontal"
-          "fa-flip-horizontal"
+          "#{prefix}horizontal"
         when "vertical"
-          "fa-flip-vertical"
+          "#{prefix}vertical"
         when "both"
-          "fa-flip-horizontal fa-flip-vertical"
+          "#{prefix}horizontal #{prefix}vertical"
         end
       end
 
       def pull_class
-        pull ? "fa-pull-#{pull}" : nil
+        class_name = is_svg? ? "pull_#{pull}" : "fa-pull-#{pull}"
+        pull ? class_name : nil
       end
 
       def pulse_class
-        pulse ? "fa-pulse" : nil
+        class_name = is_svg? ? "pulse" : "fa-pulse"
+        pulse ? class_name : nil
       end
 
       def rotation_class
-        rotation ? "fa-rotate-#{rotation}" : nil
+        class_name = is_svg? ? "rotate_#{rotation}" : "fa-rotate-#{rotation}"
+        rotation ? class_name : nil
       end
 
       def size_class
-        size ? "fa-#{size}" : nil
+        class_name = is_svg? ? "svg_#{size}" : "fa-#{size}"
+        size ? class_name : nil
       end
 
       def font_style_class
@@ -190,10 +197,9 @@ module Playbook
       end
 
       def spin_class
-        spin ? "fa-spin" : nil
+        class_name = is_svg? ? "spin" : "fa-spin"
+        spin ? class_name : nil
       end
     end
   end
 end
-
-# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -95,11 +95,11 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-angle-down pb_nav_list_item_icon_right" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-angle-down" />')
 })
 
 test('should have a left icon', () => {
     render(<NavDefault iconLeft="users-class" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-users-class" />')
 })

data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb

@@ -0,0 +1,48 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", tabbing: true, padding_bottom: "sm" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", active: true, data: { pb_tab_target: "about" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", data: { pb_tab_target: "case_studies" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Service", data: { pb_tab_target: "service" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", data: { pb_tab_target: "contacts" }, cursor: "pointer" }) %>
+<% end %>
+
+<div id="about">
+  <%= pb_rails("body", props: { text: "This is about!" }) %>
+</div>
+
+<div id="case_studies">
+  <%= pb_rails("body", props: { text: "This is case studies!" }) %>
+</div>
+
+<div id="service">
+  <%= pb_rails("body", props: { text: "This is service!" }) %>
+</div>
+
+<div id="contacts">
+  <%= pb_rails("body", props: { text: "This is contacts!" }) %>
+</div>
+
+<script>
+  // The script in the code snippet below is for demonstrating the active state and NOT needed for the kit to function.
+  // The active prop can be used to highlight this active state.
+  const navItemClass = "pb_nav_list_kit_item"
+  const navItemActiveClass = "pb_nav_list_kit_item_active"
+  const dataNavItems = "[data-pb-tab-target]"
+
+  const navItemTabs = document.querySelectorAll(dataNavItems)
+  navItemTabs.forEach(navItemTab => {
+    navItemTab.addEventListener("click", event => {
+      const navItemTabs = document.querySelectorAll(dataNavItems)
+      navItemTabs.forEach(navItemTab => {
+        if (navItemTab === event.target.closest(dataNavItems)) {
+          navItemTab.classList.add(navItemActiveClass)
+          navItemTab.classList.remove(navItemClass)
+        } else {
+          if (navItemTab.classList.contains(navItemActiveClass)) {
+            navItemTab.classList.remove(navItemActiveClass)
+            navItemTab.classList.add(navItemClass)
+          }
+        }
+      })
+    })
+  })
+</script>

data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md

@@ -0,0 +1,3 @@
+The Nav kit can also be used to create dynamic tabbing. To do so, use the boolean `tabbing` prop as shown here. 
+
+All divs you want to use as tabs MUST have an id attached to them. To link the tab to the nav, use the required data attribute `pb_tab_target` on each nav/item and pass it the id of the tab you want linked to that specific nav/item. See code example below to see this in action.

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

@@ -19,6 +19,7 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
+  - tab_nav: Tab Nav
 
   react:
   - default_nav: Default

data/app/pb_kits/playbook/pb_nav/index.js

@@ -0,0 +1,43 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+const NAV_SELECTOR = '[data-pb-nav-tab]'
+const NAV_ITEM_SELECTOR = '[data-pb-tab-target]'
+
+export default class PbNav extends PbEnhancedElement {
+    static get selector() {
+        return NAV_SELECTOR
+    }
+
+    connect() {
+        this.hideAndAddEventListeners()
+    }
+
+    hideAndAddEventListeners() {
+        const navItems = this.element.querySelectorAll(NAV_ITEM_SELECTOR)
+        navItems.forEach((navItem) => {
+            if (!navItem.className.includes('active')) {
+                this.changeContentDisplay(navItem.dataset.pbTabTarget, 'none')
+            }
+
+            navItem.addEventListener('click', event => this.handleNavItemClick(event))
+        })
+    }
+
+    handleNavItemClick(event) {
+        event.preventDefault()
+        const navItem = event.target.closest(NAV_ITEM_SELECTOR)
+        this.changeContentDisplay(navItem.dataset.pbTabTarget, 'block')
+
+        const navItems = this.element.querySelectorAll(NAV_ITEM_SELECTOR)
+        navItems.forEach((navItemSelected) => {
+            if (navItem !== navItemSelected) {
+                this.changeContentDisplay(navItemSelected.dataset.pbTabTarget, 'none')
+            }
+        })
+    }
+
+    changeContentDisplay(contentId, display) {
+        const content = document.getElementById(contentId)
+        content.style.display = display
+    }
+}

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -13,11 +13,20 @@ module Playbook
                      default: "normal"
       prop :highlight, type: Playbook::Props::Boolean, default: true
       prop :borderless, type: Playbook::Props::Boolean, default: false
+      prop :tabbing, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
       end
 
+      def data
+        if tabbing
+          Hash(prop(:data)).merge(pb_nav_tab: true)
+        else
+          prop(:data)
+        end
+      end
+
       def highlight_class
         highlight ? "highlight" : nil
       end

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx

@@ -10,7 +10,7 @@ const MoreExtensionsDropdown = ({extensions}: any) => {
   const [showPopover, setShowPopover] = useState(false)
 
   const handleTogglePopover = () => {
-    setShowPopover(true)
+    setShowPopover(!showPopover)
   }
 
   const handlePopoverClose = (shouldClosePopover: boolean) => {

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -67,7 +67,7 @@ const toolbarDropdownItems = [
 
 
   const handleTogglePopover = () => {
-    setShowPopover(true)
+    setShowPopover(!showPopover)
   }
 
   const handlePopoverClose = (shouldClosePopover: boolean) => {

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -48,8 +48,8 @@
 
 
   $star-styles: (
-    yellow_star: (color: #F9BB00),
-    primary_star: (color: #0056CF),
+    yellow_star: (color: $yellow),
+    primary_star: (color: $royal),
     suble_star_light: (color: $text_lt_default),
     suble_star_dark: (color: $text_dk_default),
     empty_star_dark: (color: $border_dark),
@@ -111,4 +111,13 @@
       }
     }
   }
+  .yellow-star-selected {
+    color: $yellow; 
+  }
+  .primary-star-selected {
+    color: $royal 
+  }
+  .suble-star-selected {
+    color: $text_lt_default;
+  }
 }

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("star_rating", props: { padding_bottom: "xs", variant: "interactive" }) %>

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

@@ -13,4 +13,4 @@ examples:
     - star_rating_background_options: Background Options
     - star_rating_hide: Layout Options
     - star_rating_number_config: Number Config
-    - star_rating_size_options: Size Options
+    - star_rating_size_options: Size Options

data/app/pb_kits/playbook/pb_star_rating/index.js

@@ -0,0 +1,50 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const STAR_RATING_SELECTOR = "[data-pb-star-rating]";
+const STAR_RATING_INPUT_ID = "star-rating-input";
+
+export default class PbStarRating extends PbEnhancedElement {
+  static get selector() {
+    return STAR_RATING_SELECTOR;
+  }
+
+  connect() {
+    this.element.addEventListener("click", (event) => {
+      const clickedStarId = event.currentTarget.id;
+      this.updateStarColors(clickedStarId);
+      this.updateHiddenInputValue(clickedStarId);
+    });
+  }
+
+  updateStarColors(clickedStarId) {
+    const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
+
+    allStars.forEach(star => {
+      const starId = star.id;
+      const icon = star.querySelector(".interactive-star-icon");
+
+      if (icon) {
+        if (starId <= clickedStarId) {
+          if (star.classList.contains("yellow_star")) {
+            icon.classList.add("yellow-star-selected");
+          } else if (star.classList.contains("primary_star")) {
+            icon.classList.add("primary-star-selected");
+          } else if (star.classList.contains("suble_star_light")) {
+            icon.classList.add("suble-star-selected");
+          } else {
+            icon.classList.add("yellow-star-selected");
+          }
+        } else {
+          icon.classList.remove("yellow-star-selected", "primary-star-selected", "suble-star-selected");
+        }
+      }
+    });
+  }
+
+  updateHiddenInputValue(value) {
+    const hiddenInput = document.getElementById(STAR_RATING_INPUT_ID);
+    if (hiddenInput) {
+      hiddenInput.value = value;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -28,13 +28,33 @@
     <% end %>
   <% end %>
   <%= pb_rails("flex", props: { }) do %>
-    <% object.star_count.times do %>
-        <%= pb_rails("icon", props: { classname: "#{star_color} pb_star_#{size}" , custom_icon: Playbook::Engine.root.join(star_svg_path) } ) %>
-    <% end %>
-    <% object.empty_stars.times do %>
-        <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size}", custom_icon: Playbook::Engine.root.join(background_star_path) } ) %>
+
+    <% if object.variant == "display" %>
+
+      <% object.star_count.times do %>
+          <%= pb_rails("icon", props: { classname: "#{star_color} pb_star_#{size}" , custom_icon: Playbook::Engine.root.join(star_svg_path) } ) %>
+      <% end %>
+      <% object.empty_stars.times do %>
+          <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size}", custom_icon: Playbook::Engine.root.join(background_star_path) } ) %>
+      <% end %>
+  
+    <% else %>
+      <%= pb_rails("flex", props: { orientation: "column" }) do %>
+        <% if object.label.present? %>
+          <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
+        <% end %>
+        <input type="hidden" id="star-rating-input" value="" name="<%= object.name %>"/>
+        <%= pb_rails("flex", props: { orientation: "row" }) do %>
+          <% object.denominator.times do |index| %>
+            <div data-pb-star-rating id="<%= index + 1 %>" class="<%= star_color %>">
+              <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size} interactive-star-icon", custom_icon: Playbook::Engine.root.join(background_star_path)} ) %>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
     <% end %>
   <% end %>
+
   <% if layout_option == "onestar" %>
     <%= content_tag(:div, class: "pb_star_rating_number_#{size}") do %>
       <% case object.size %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -25,6 +25,12 @@ module Playbook
                              values: %w[fill outline],
                              default: "fill"
 
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[display interactive],
+                     default: "display"
+      prop :label, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String
+
       def one_decimal_rating
         rating.to_f.round(1)
       end

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -33,7 +33,7 @@ type TableProps = {
     verticalBorder?: boolean,
 } & GlobalProps
 
-const Table = (props: TableProps) => {
+const Table = (props: TableProps): React.ReactElement => {
     const {
         aria = {},
         children,

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,19 +1,19 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-  static get selector() {
+  static get selector(): string {
     return '.table-responsive-collapse'
   }
 
-  connect() {
+  connect(): void {
     const tables = document.querySelectorAll('.table-responsive-collapse');
 
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      let headers: string[] = [];
+      const headers: string[] = [];
       [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        let colSpan = header.colSpan
+        const colSpan = header.colSpan
         for (let i = 0; i < colSpan; i++) {
           headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -17,7 +17,7 @@ type TableBodyPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableBody = (props: TableBodyPropTypes) => {
+const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx

@@ -18,7 +18,7 @@ type TableCellPropTypes = {
   text?: string
 };
 
-const TableCell = (props: TableCellPropTypes) => {
+const TableCell = (props: TableCellPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -17,7 +17,7 @@ type TableHeadPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableHead = (props: TableHeadPropTypes) => {
+const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -18,7 +18,7 @@ type TableHeaderPropTypes = {
   text?: string;
 };
 
-const TableHeader = (props: TableHeaderPropTypes) => {
+const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -19,7 +19,7 @@ type TableRowPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableRow = (props: TableRowPropTypes) => {
+const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React from "react";
 import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
 

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -107,7 +107,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         required={required}
         type={type}
         value={value}
-    />)
+     />)
   )
 
   const addOnInput = (

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
-  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -52,14 +52,15 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = () => {},
   placeholder,
   required,
   rows = 4,
   value,
   ...props
-}: TextareaProps, ref: any) => {
-  ref = useRef<HTMLTextAreaElement>(null)
+}: TextareaProps) => {
+  const ref = useRef<HTMLTextAreaElement>(null)
   useEffect(() => {
     if (ref.current && resize === 'auto') {
       PbTextarea.addMatch(ref.current)
@@ -71,58 +72,75 @@ const Textarea = ({
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
   const noCount = typeof characterCount !== 'undefined'
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
-  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const characterCounter = () => {
-    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
-  }
-
   const checkIfZero = (characterCount: string | number) => {
     return characterCount == 0 ? characterCount.toString() : characterCount
   }
+  const characterCounter = () => {
+    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
+  }
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       <Caption text={label} />
       {children || (
         <textarea
-          className="pb_textarea_kit"
-          disabled={disabled}
-          name={name}
-          onChange={onChange}
-          placeholder={placeholder}
-          ref={ref}
-          required={required}
-          rows={rows}
-          value={value}
-          {...props}
+            className="pb_textarea_kit"
+            disabled={disabled}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            ref={ref}
+            required={required}
+            rows={rows}
+            value={value}
+            {...props}
         />
       )}
 
       {error ? (
         <>
           {characterCount ? (
-            <Flex spacing="between" vertical="center">
+            <Flex 
+                spacing="between" 
+                vertical="center"
+            >
               <FlexItem>
-                <Body margin="none" status="negative" text={error} />
+                <Body 
+                    margin="none"
+                    status="negative"
+                    text={error} 
+                />
               </FlexItem>
               <FlexItem>
-                <Caption margin="none" size="xs" text={characterCounter()} />
+                <Caption 
+                    margin="none"
+                    size="xs"
+                    text={characterCounter()}
+                />
               </FlexItem>
             </Flex>
           ) : (
-            <Body status="negative" text={error} />
+            <Body 
+                status="negative"
+                text={error}
+            />
           )}
         </>
       ) : (
          noCount && (
-          <Caption margin="none" size="xs" text={characterCounter()} />
+          <Caption 
+              margin="none"
+              size="xs"
+              text={characterCounter()}
+          />
         )
       )}
     </div>

data/app/pb_kits/playbook/pb_textarea/index.tsx

@@ -3,16 +3,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
 export default class PbTextarea extends PbEnhancedElement {
   style: {[key: string]: string}
   scrollHeight: string
-  static get selector() {
+  static get selector(): string {
     return '.resize_auto textarea'
   }
 
-  onInput() {
+  onInput(): void {
     this.style.height = 'auto'
     this.style.height = (this.scrollHeight) + 'px'
   }
 
-  connect() {
+  connect(): void {
     this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
     this.element.addEventListener('input', this.onInput, false)
   }