playbook_ui 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301 → 13.32.0.pre.alpha.PLAY1138iconkitaddcolorprop3268

data/lib/playbook/forms/builder.rb

@@ -14,7 +14,6 @@ module Playbook
       require_relative "builder/multi_level_select_field"
       require_relative "builder/phone_number_field"
       require_relative "builder/dropdown_field"
-      require_relative "builder/star_rating_field"
 
       prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.32.0"
-  VERSION = "13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301"
+  VERSION = "13.32.0.pre.alpha.PLAY1138iconkitaddcolorprop3268"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301
+  version: 13.32.0.pre.alpha.PLAY1138iconkitaddcolorprop3268
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-19 00:00:00.000000000 Z
+date: 2024-07-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1101,13 +1101,9 @@ files:
 - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
 - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
 - app/pb_kits/playbook/pb_dropdown/context/index.tsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
@@ -1327,7 +1323,6 @@ files:
 - app/pb_kits/playbook/pb_form_group/form_group.rb
 - app/pb_kits/playbook/pb_form_group/form_group.test.js
 - app/pb_kits/playbook/pb_form_pill/_form_pill.scss
-- app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx
 - app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx
@@ -1437,6 +1432,9 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_border_swift.md
+- app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb
+- app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx
+- app/pb_kits/playbook/pb_icon/docs/_icon_color.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
@@ -1464,6 +1462,7 @@ files:
 - app/pb_kits/playbook/pb_icon/icon.html.erb
 - app/pb_kits/playbook/pb_icon/icon.rb
 - app/pb_kits/playbook/pb_icon/icon.test.js
+- app/pb_kits/playbook/pb_icon/icon_aliases.json
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
@@ -1874,8 +1873,6 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx
-- app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb
-- app/pb_kits/playbook/pb_nav/docs/_tab_nav.md
 - app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_with_img_nav.html.erb
@@ -1883,7 +1880,6 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_with_img_nav.md
 - app/pb_kits/playbook/pb_nav/docs/example.yml
 - app/pb_kits/playbook/pb_nav/docs/index.js
-- app/pb_kits/playbook/pb_nav/index.js
 - app/pb_kits/playbook/pb_nav/item.html.erb
 - app/pb_kits/playbook/pb_nav/item.rb
 - app/pb_kits/playbook/pb_nav/nav.html.erb
@@ -2338,14 +2334,12 @@ files:
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx
-- app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx
 - app/pb_kits/playbook/pb_star_rating/docs/example.yml
 - app/pb_kits/playbook/pb_star_rating/docs/index.js
-- app/pb_kits/playbook/pb_star_rating/index.js
 - app/pb_kits/playbook/pb_star_rating/star_rating.html.erb
 - app/pb_kits/playbook/pb_star_rating/star_rating.rb
 - app/pb_kits/playbook/pb_star_rating/star_rating.test.js
@@ -3013,7 +3007,6 @@ files:
 - lib/playbook/forms/builder/multi_level_select_field.rb
 - lib/playbook/forms/builder/phone_number_field.rb
 - lib/playbook/forms/builder/select_field.rb
-- lib/playbook/forms/builder/star_rating_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
 - lib/playbook/hover.rb
 - lib/playbook/justify_content.rb

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb

@@ -1,10 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: { blank_selection: "Select One...", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { Dropdown } from '../../'
-
-const DropdownBlankSelection = (props) => {
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    }
-  ];
-
-  return (
-  <>
-    <Dropdown
-        blankSelection="Select one..."
-        options={options}
-        {...props}
-    />
-  </>
-  )
-}
-
-export default DropdownBlankSelection

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb

@@ -1,10 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options, default_value: options.last}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { Dropdown } from '../../'
-
-const DropdownDefaultValue = (props) => {
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    }
-  ];  
-
-  return (
-  <>
-    <Dropdown
-        defaultValue={options[2]}
-        options={options}
-        {...props}
-    />
-  </>
-  )
-}
-
-export default DropdownDefaultValue

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import FormPill from './_form_pill';
-
-const testId = 'formpill';
-
-test('should render classname', () => {
-    render(
-        <FormPill
-            data={{ testid: testId }}
-            text="test"
-        /> 
-    )
-
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_form_pill_kit_primary none')
-});
-
-test('displays text content', () => {
-    render(
-        <FormPill
-            data={{ testid: testId }}
-            text="test"
-        /> 
-    )
-  
-    const text = screen.getByText("test")
-    expect(text).toBeInTheDocument()
-});
-
-test('displays color variant', () => {
-    render(
-        <FormPill
-            color={"neutral"}
-            data={{ testid: testId }}
-            text={"test"}
-        />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
-});
-
-test('displays size variant', () => {
-    render(
-        <FormPill            
-            data={{ testid: testId }}
-            size={"small"}
-            text={"test"}
-        />
-    )
-    const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
-});

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

@@ -1,48 +0,0 @@
-<%= 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

@@ -1,3 +0,0 @@
-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/index.js

@@ -1,43 +0,0 @@
-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_star_rating/docs/_star_rating_interactive.html.erb

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

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

@@ -1,50 +0,0 @@
-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/lib/playbook/forms/builder/star_rating_field.rb

@@ -1,14 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module Forms
-    class Builder
-      def star_rating_field(name, props: {})
-        props[:name] = name
-        props[:margin_bottom] = "sm"
-        props[:label] = @template.label(@object_name, name) if props[:label] == true
-        @template.pb_rails("star_rating", props: props)
-      end
-    end
-  end
-end