playbook_ui 13.34.1 → 14.0.0.pre.alpha.PBNTR415starratingform3493

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -106,7 +106,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: $space_xs / 2;
+      margin: calc($space_xs / 2);
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -116,7 +116,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: $space_xs / 2;
+      padding: calc($space_xs / 2);
       border-top-left-radius: $border_rad_heavier;
       border-top-right-radius: $border_rad_heavier;
       .trix-button-group {

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -1,19 +1,20 @@
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
+import { TrixEditor } from 'react-trix'
+
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
-try {
-  const Trix = require('trix')
-  Trix.config.textAttributes.inlineCode = {
-    tagName: 'code',
-    inheritable: true,
-  }
-} catch (_e) { /* do nothing */ }
+import Trix from 'trix'
+import './_dedupe_trix_toolbar'
+
+Trix.config.textAttributes.inlineCode = {
+  tagName: 'code',
+  inheritable: true,
+}
 
-import { TrixEditor } from "react-trix"
 import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../..'
+import { RichTextEditor } from 'playbook-ui'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorAttributes = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorFocus = (props) => (
   <>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorInline = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../..'
+import { RichTextEditor } from 'playbook-ui'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx

@@ -3,7 +3,7 @@ import {
   Button,
   Card,
   RichTextEditor,
-} from '../../'
+} from 'playbook-ui'
 
 const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)
@@ -21,7 +21,7 @@ const RichTextEditorPreview = (props) => {
           onChange={handleChange}
           {...props}
       />
-      <If condition={showPreview}>
+      {showPreview && (
         <Card marginTop="md">
           <div
               className="trix-content"
@@ -30,9 +30,10 @@ const RichTextEditorPreview = (props) => {
               id="preview-content"
           />
         </Card>
-        <Else />
+      )}
+      {!showPreview && (
         <div />
-      </If>
+      )}
       <Button
           id="preview-button"
           marginTop="md"

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorSimple = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorSticky = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RichTextEditor, Select } from '../../'
+import { RichTextEditor, Select } from 'playbook-ui'
 import { changelog, release } from './templates.js'
 
 const RichTextEditorTemplates = (props) => {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorToolbarBottom = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
-import { RichTextEditor } from "../..";
+import { RichTextEditor } from "playbook-ui";
 
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";

data/app/pb_kits/playbook/pb_rich_text_editor/types.d.ts

@@ -0,0 +1 @@
+declare module '@haxtheweb/deduping-fix';

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator, Card, Caption } from '../../'
+import { SectionSeparator, Card, Caption } from 'playbook-ui'
 
 const children = (
     <Card

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from '../../'
+import { SectionSeparator } from 'playbook-ui'
 
 const SectionSeparatorDashed = (props) => {
     return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from '../../'
+import { SectionSeparator } from 'playbook-ui'
 
 const SectionSeparatorLine = (props) => {
   return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from '../../'
+import { SectionSeparator } from 'playbook-ui'
 
 const SectionSeparatorText = (props) => {
   return (

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -81,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
       > select:first-child {
         border-color: $error;

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectError = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectInline = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectInlineCompact = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectInlineShowArrow = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,7 +28,7 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparent; 
+    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: ($pb_selectable_card_indicator_size/2) + ($pb_selectable_card_border/2);
+      border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -($pb_selectable_card_indicator_size/2);
-      right: -($pb_selectable_card_indicator_size/2);
+      top: -(calc($pb_selectable_card_indicator_size/2));
+      right: -(calc($pb_selectable_card_indicator_size/2));
       opacity: 0;
     }
   }

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, {useRef} from 'react'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Body, SelectableCard, Title } from '../..'
+import { Body, SelectableCard, Title } from 'playbook-ui'
 
 const SelectableCardError = (props) => {
   const [football, setFootball] = useState(false)

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.test.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { render, screen } from '../utilities/test-utils'
 import SelectableCard from './_selectable_card'
-import { Body, Title, Image } from '../'
+import { Body, Title, Image } from 'playbook-ui'
 
 const SelectableCardMultiSelect = () => {
   const [selected, setSelected] = useState(true)

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

@@ -1,4 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectableList } from '../..'
+import { SelectableList } from 'playbook-ui'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectableList } from '../..'
+import { SelectableList } from 'playbook-ui'
 
 const SelectableListDefault = (props) => {
   return (

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

@@ -9,10 +9,10 @@
   justify-content: flex-start;
 
   path {
-    &.suble_star_dark {
+    &.subtle_star_dark {
       fill: $text_dk_default;
     }
-    &.suble_star_light {
+    &.subtle_star_light {
       fill: $text_lt_default;
     }
     &.outline_star_dark {
@@ -49,9 +49,10 @@
 
   $star-styles: (
     yellow_star: (color: $yellow),
-    primary_star: (color: $royal),
-    suble_star_light: (color: $text_lt_default),
-    suble_star_dark: (color: $text_dk_default),
+    primary_star_light: (color: $royal),
+    primary_star_dark: (color: $active_dark),
+    subtle_star_light: (color: $text_lt_default),
+    subtle_star_dark: (color: $text_dk_default),
     empty_star_dark: (color: $border_dark),
     empty_star_light: (color: $border_light),
     outline_empty_star_dark: (color: transparent),
@@ -111,13 +112,89 @@
       }
     }
   }
+
+  // Interactivity 
+  path {
+    transition: fill 0.2s
+  }
+  // Rails selected styles
+  .interactive-star-icon {
+    cursor: pointer;
+  }
   .yellow-star-selected {
     color: $yellow; 
   }
   .primary-star-selected {
     color: $royal 
   }
-  .suble-star-selected {
+  .subtle-star-selected {
     color: $text_lt_default;
   }
+  &.dark {
+    .primary-star-selected {
+      color: $active_dark; 
+    }
+    .subtle-star-selected {
+      color: $text_dk_default;
+    }
+  }
+  // React selected styles
+  &.star-selected {
+    path {
+      animation: growColor 0.3s forwards;
+    }
+    .yellow-star-selected {
+      color: $yellow; 
+    }
+    .primary-star-selected {
+      color: $royal;
+    }
+    .subtle-star-selected {
+      color: $text_lt_default;
+    }
+    &.dark {
+      .primary-star-selected {
+        color: $active_dark; 
+      }
+      .subtle-star-selected {
+        color: $text_dk_default;
+      }
+    }
+  }
+  // Hover styles
+  .star-hovered {
+    path {
+      fill: mix($primary, $white, 20%);
+    }
+  }
+  &.dark{
+    .star-hovered {
+      path {
+        fill: mix($active_dark, $bg_dark, 50%);
+      }
+    }
+  }
+  // Focus styles
+  .pb_custom_icon {
+    &:focus {
+      outline: none;
+    }
+    &:focus-visible {
+      border-radius: 2px;
+      outline: 1px solid $primary;
+      outline-offset: 2px;
+    }
+  }
+  &.dark {
+    .pb_custom_icon {
+      &:focus {
+        outline: none;
+      }   
+      &:focus-visible {
+        border-radius: 2px;
+        outline: 1px solid $active_dark;
+        outline-offset: 2px;
+      }
+    }
+  }
 }

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

@@ -6,6 +6,7 @@ examples:
     - star_rating_hide: Layout Options
     - star_rating_number_config: Number Config
     - star_rating_size_options: Size Options
+    - star_rating_interactive: Interactive
 
   react:
     - star_rating_default: Default
@@ -13,4 +14,5 @@ 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
+    - star_rating_interactive: Interactive

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

@@ -1,50 +1,156 @@
-import PbEnhancedElement from "../pb_enhanced_element";
+import PbEnhancedElement from "../pb_enhanced_element"
 
-const STAR_RATING_SELECTOR = "[data-pb-star-rating]";
-const STAR_RATING_INPUT_ID = "star-rating-input";
+const STAR_RATING_WRAPPER_SELECTOR = "[data-pb-star-rating-wrapper]"
+const STAR_RATING_SELECTOR = "[data-pb-star-rating]"
+const STAR_RATING_INPUT_DATA_SELECTOR = "[data-pb-star-rating-input]"
 
 export default class PbStarRating extends PbEnhancedElement {
   static get selector() {
-    return STAR_RATING_SELECTOR;
+    return STAR_RATING_WRAPPER_SELECTOR
   }
 
   connect() {
-    this.element.addEventListener("click", (event) => {
-      const clickedStarId = event.currentTarget.id;
-      this.updateStarColors(clickedStarId);
-      this.updateHiddenInputValue(clickedStarId);
-    });
+    this.addEventListeners()
+    this.handleFormReset()
+  }
+
+  addEventListeners() {
+    this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
+      star.addEventListener("click", (event) => {
+        const clickedStarId = event.currentTarget.id
+        this.updateStarColors(clickedStarId)
+        this.updateHiddenInputValue(clickedStarId)
+        this.clearFormValidation()
+      })
+
+      star.addEventListener("mouseenter", (event) => {
+        const hoveredStarId = event.currentTarget.id
+        this.updateStarHoverColors(hoveredStarId)
+      })
+
+      star.addEventListener("mouseleave", () => {
+        this.removeStarHoverColors()
+      })
+
+      star.addEventListener("keydown", (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          this.handleStarClick(star.id)
+        }
+      })
+    })
+  }
+
+  handleStarClick(starId) {
+    this.updateStarColors(starId)
+    this.updateHiddenInputValue(starId)
   }
 
   updateStarColors(clickedStarId) {
-    const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
+    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
 
     allStars.forEach(star => {
-      const starId = star.id;
-      const icon = star.querySelector(".interactive-star-icon");
+      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");
+            icon.classList.add("yellow-star-selected")
+          } else if (star.classList.contains("primary_star_light")) {
+            icon.classList.add("primary-star-selected")
+          } else if (star.classList.contains("primary_star_dark")) {
+            icon.classList.add("primary-star-selected")
+          } else if (star.classList.contains("subtle_star_light")) {
+            icon.classList.add("subtle-star-selected")
+          } else if (star.classList.contains("subtle_star_dark")) {
+            icon.classList.add("subtle-star-selected")
           } else {
-            icon.classList.add("yellow-star-selected");
+            icon.classList.add("yellow-star-selected")
           }
         } else {
-          icon.classList.remove("yellow-star-selected", "primary-star-selected", "suble-star-selected");
+          icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
         }
+        icon.classList.remove("star-hovered")
       }
-    });
+    })
   }
 
   updateHiddenInputValue(value) {
-    const hiddenInput = document.getElementById(STAR_RATING_INPUT_ID);
+    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
     if (hiddenInput) {
-      hiddenInput.value = value;
+      hiddenInput.value = value
+    }
+  }
+
+  updateStarHoverColors(hoveredStarId) {
+    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+  
+    allStars.forEach(star => {
+      const starId = star.id
+      const icon = star.querySelector(".interactive-star-icon")
+  
+      if (icon) {
+        if (starId <= hoveredStarId) {
+          if (!icon.classList.contains("yellow-star-selected") && 
+              !icon.classList.contains("primary-star-selected") && 
+              !icon.classList.contains("subtle-star-selected")) {
+            icon.classList.add("star-hovered")
+          }
+        } else {
+          icon.classList.remove("star-hovered")
+        }
+      }
+    })
+  }
+
+
+  removeStarHoverColors() {
+    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+  
+    allStars.forEach(star => {
+      const icon = star.querySelector(".interactive-star-icon")
+      if (icon) {
+        if (!icon.classList.contains("yellow-star-selected") &&
+            !icon.classList.contains("primary-star-selected") &&
+            !icon.classList.contains("subtle-star-selected")) {
+          icon.classList.remove("star-hovered")
+        }
+      }
+    })
+  }
+
+  isStarSelected() {
+    return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0
+  }
+
+  handleFormReset() {
+    const form = this.element.closest("form")
+    if (form) {
+      form.addEventListener("reset", () => {
+        this.updateHiddenInputValue("")
+        this.resetStarRatingValues()
+      })
+    }
+  }
+
+  resetStarRatingValues() {
+    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+    allStars.forEach(star => {
+      const icon = star.querySelector(".interactive-star-icon")
+      if (icon) {
+        icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
+      }
+    })
+  }
+
+  clearFormValidation() {
+    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
+    if (hiddenInput.checkValidity()) {
+      const errorLabelElement = this.element.querySelector(".pb_body_kit_negative")
+      if (errorLabelElement) {
+        errorLabelElement.remove()
+      }
     }
   }
 }

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

@@ -39,15 +39,17 @@
       <% end %>
   
     <% else %>
-      <%= pb_rails("flex", props: { orientation: "column" }) do %>
+      <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, 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 %>"/>
+
+        <%= hidden_input_tag %>
+
         <%= 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)} ) %>
+              <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size} interactive-star-icon", custom_icon: Playbook::Engine.root.join(background_star_path), tabindex: 0 } ) %>
             </div>
           <% end %>
         <% end %>