playbook_ui 13.34.1 → 14.0.0.pre.alpha.PLAY14733479

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

@@ -14,6 +14,29 @@ export default class PbStarRating extends PbEnhancedElement {
       this.updateStarColors(clickedStarId);
       this.updateHiddenInputValue(clickedStarId);
     });
+
+    document.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
+      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) {
@@ -27,16 +50,21 @@ export default class PbStarRating extends PbEnhancedElement {
         if (starId <= clickedStarId) {
           if (star.classList.contains("yellow_star")) {
             icon.classList.add("yellow-star-selected");
-          } else if (star.classList.contains("primary_star")) {
+          } else if (star.classList.contains("primary_star_light")) {
             icon.classList.add("primary-star-selected");
-          } else if (star.classList.contains("suble_star_light")) {
-            icon.classList.add("suble-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");
           }
         } 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");
       }
     });
   }
@@ -47,4 +75,45 @@ export default class PbStarRating extends PbEnhancedElement {
       hiddenInput.value = value;
     }
   }
+
+  updateStarHoverColors(hoveredStarId) {
+    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 <= 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 = document.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 document.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0;
+  }
 }

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

@@ -47,7 +47,7 @@
         <%= 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 %>

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

@@ -52,9 +52,9 @@ module Playbook
         when "yellow"
           "yellow_star"
         when "primary"
-          "primary_star"
+          dark ? "primary_star_dark" : "primary_star_light"
         when "subtle"
-          dark ? "suble_star_dark" : "suble_star_light"
+          dark ? "subtle_star_dark" : "subtle_star_light"
         end
       end
 

data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx

@@ -53,7 +53,11 @@ const starOutline = (
 )
 
 export const getStarIconObject = (backgroundType: string, color: string, dark: boolean, size: string) => {
-    const colorClassName = color === "subtle" ? (dark ? "suble_star_dark" : "suble_star_light") : `${color}_star`
+    const colorClassName = color === "subtle" 
+        ? (dark ? "suble_star_dark" : "suble_star_light") 
+        : color === "primary"
+        ? (dark ? "primary_star_dark" : "primary_star_light")
+        : `${color}_star`
     const backgroundClassName = backgroundType === "outline" ? (dark ? "outline_empty_star_dark" : "outline_empty_star_light") : (dark ? "empty_star_dark" : "empty_star_light")
 
     return {