playbook_ui 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3601

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

@@ -0,0 +1,132 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/typography";
+
+@mixin preview_first_child {
+    :first-child {
+        margin-top: 0;
+    }
+}
+
+@mixin preview_p {
+    margin: 1rem 0 0 0;
+    min-height: 1rem;
+}
+
+@mixin preview_code {
+    font-family: monospace;
+    background: $bg_light;
+    padding: 0.1rem 0.3rem;
+    box-shadow: 0 2px 10px $shadow;
+    border-radius: 0.25rem;
+    overflow: hidden;
+}
+
+@mixin preview_pre_codeblock {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+    font-family: monospace;
+    font-size: 0.9em;
+    padding: 0.5em;
+    overflow-x: auto;
+    background: $bg_dark;
+    padding: $space_sm;
+    border-radius: $border_rad_heaviest;
+    margin: 1.5rem 0 2rem 0;
+
+    code {
+        background: transparent !important;
+        box-shadow: none;
+        border: 0;
+        color: #faf6e4;
+    }
+}
+
+@mixin preview_a {
+    color: $primary;
+    border-bottom: 1px solid $primary;
+    &:hover {
+      color: $text_lt_default;
+      border-bottom: 1px solid $text_lt_default;
+    }
+}
+
+@mixin preview_blockquote {
+    font-size: $font_larger;
+    padding: $space_sm $space_md;
+    font-style: italic;
+    margin: 1rem 0 0 0;
+    p {
+        margin: 0;
+    }
+}
+
+@mixin preview_h1 {
+    font-size: $text_largest;
+    line-height: $text_larger;
+    font-weight: $bolder;
+    letter-spacing: $lspace_tight;
+    margin: 2.1rem 0 0 0;
+}
+
+@mixin preview_h2 {
+    font-size: $text_larger;
+    line-height: $text_larger;
+    font-weight: $bolder;
+    letter-spacing: $lspace_tight;
+    margin: 1.9rem 0 0 0;
+}
+
+@mixin preview_h3 {
+    font-size: $text_large;
+    line-height: $text_large;
+    font-weight: $bolder;
+    letter-spacing: $lspace_tight;
+    margin: 1.7rem 0 0 0;
+}
+
+@mixin preview_smaller_headings {
+    font-size: $text_base;
+    line-height: $text_base;
+    letter-spacing: $lspace_tight;
+    font-weight: $bolder;
+    margin: 1rem 0 0 0;
+}
+
+@mixin preview_hr {
+    margin: 2.2rem 0;
+    box-sizing: content-box;
+    overflow: hidden;
+    background: transparent;
+    border-bottom: 1px solid $transparent;
+    height: 1px;
+    padding: 0;
+    background-color: $border_light;
+    border: 0; 
+}
+
+@mixin preview_ol {
+    margin: 1rem 0 0 0;
+    padding-left: $space_md;
+    list-style: decimal;
+    li {
+      margin: 2px 0;
+      p {
+        margin: 0;
+      }
+    }
+}
+
+@mixin preview_ul {
+    list-style-position: disc;
+    margin: 1rem 0 0 0;
+    padding-left: $space_md;
+    li {
+      margin: 2px 0;
+      p {
+        margin: 0;
+      }
+    }
+}

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

@@ -6,6 +6,7 @@
 @import "../tokens/typography";
 @import "../tokens/shadows";
 @import "../tokens/transition";
+@import "previewer_mixin";
 
 [class^="pb_rich_text_editor_kit"] {
   .toolbar_button {
@@ -85,109 +86,44 @@
     }
 
     code {
-      font-family: monospace;
-      background: $bg_light;
-      padding: 0.1rem 0.3rem;
-      margin: 0 5px;
-      box-shadow: 0 2px 10px $shadow;
-      border-radius: 0.25rem;
-      overflow: hidden;
-      font-size: ($text_small - 1px);
+      @include preview_code;
     }
 
     pre {
-      background: $bg_dark;
-      padding: $space_sm;
-      border-radius: $border_rad_heaviest;
-      margin: 1.5rem 0 2rem 0;
-      code {
-        background: transparent;
-        box-shadow: none;
-        border: 0;
-        color: #faf6e4;
-      }
+      @include preview_pre_codeblock;
     }
     a {
-      color: $primary;
-      border-bottom: 1px solid $primary;
-      &:hover {
-        color: $text_lt_default;
-        border-bottom: 1px solid $text_lt_default;
-      }
+      @include preview_a;
     }
     blockquote {
-      font-size: $font_larger;
-      padding: $space_sm $space_md;
-      font-style: italic;
-      p {
-        margin: 0;
-      }
+      @include preview_blockquote;
     }
     &:focus-visible {
       outline: unset;
       @include transition_default;
     }
     h1 {
-      font-size: $text_largest;
-      line-height: $text_larger;
-      font-weight: $bolder;
-      letter-spacing: $lspace_tight;
-      margin: 2.1rem 0 0 0;
+      @include preview_h1;
     }
     h2 {
-      font-size: $text_larger;
-      line-height: $text_larger;
-      font-weight: $bolder;
-      letter-spacing: $lspace_tight;
-      margin: 1.9rem 0 0 0;
+      @include preview_h2;
     }
     h3 {
-      font-size: $text_large;
-      line-height: $text_large;
-      font-weight: $bolder;
-      letter-spacing: $lspace_tight;
-      margin: 1.7rem 0 0 0;
+      @include preview_h3;
     }
     h4,
     h5,
     h6 {
-      font-size: $text_base;
-      line-height: $text_base;
-      letter-spacing: $lspace_tight;
-      font-weight: $bolder;
+      @include preview_smaller_headings;
     }
     hr {
-      margin: 2.2rem 0;
-      box-sizing: content-box;
-      overflow: hidden;
-      background: transparent;
-      border-bottom: 1px solid $transparent;
-      height: 1px;
-      padding: 0;
-      background-color: $border_light;
-      border: 0;
+      @include preview_hr;
     }
     ol {
-      margin: 1rem 0 0 0;
-      padding-left: $space_md;
-      list-style: decimal;
-      li {
-        margin: 2px 0;
-        p {
-          margin: 0;
-        }
-      }
+      @include preview_ol;
     }
     ul {
-      list-style-position: disc;
-      margin: 1rem 0 0 0;
-      padding-left: $space_md;
-      li {
-        margin: 2px 0;
-        p {
-          margin: 0;
-        }
-      }
+      @include preview_ul;
     }
   }
 }
@@ -233,3 +169,41 @@
     }
   }
 }
+.tiptap-content {
+  @include preview_first_child;
+  a {
+    @include preview_a;
+  }
+  blockquote {
+    @include preview_blockquote;
+  }
+  h1 {
+    @include preview_h1;
+  }
+  h2 {
+    @include preview_h2;
+  }
+  h3 {
+    @include preview_h3;
+  }
+  h4,
+  h5,
+  h6 {
+    @include preview_smaller_headings;
+  }
+  hr {
+    @include preview_hr;
+  }
+  ol {
+    @include preview_ol;
+  }
+  p {
+    @include preview_p;
+  }
+  pre {
+    @include preview_pre_codeblock;
+  }
+  ul {
+    @include preview_ul;
+  }
+}

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

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { Button, Card, RichTextEditor } from 'playbook-ui'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedPreview = (props) => {
+
+  const editor = useEditor({
+      extensions: [
+          StarterKit,
+          Link
+      ],
+      content: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
+  })
+
+  const [showPreview, setShowPreview] = useState(false)
+  const [previewText, setPreviewText] = useState(<div />)
+
+  const handleChange = () => {
+    if (editor) {
+      setPreviewText(editor.getHTML())
+    }
+  }
+
+  const handleClick = () => {
+    handleChange()
+    setShowPreview(true)
+  }
+  if (!editor) {
+    return null
+  } 
+      
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          id="content-advanced-preview-editor"
+          onChange={handleChange}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+      {showPreview && (
+        <Card 
+            marginTop="md"
+            maxWidth="md"
+        >
+          <div
+              className="tiptap-content"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: previewText }}
+              id="advanced-preview-content"
+          />
+        </Card>
+      )}
+      {!showPreview && (
+        <div />
+      )}
+      <Button
+          id="preview-button"
+          marginTop="md"
+          onClick={handleClick}
+          text="Preview Output"
+          variant="secondary"
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedPreview

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

@@ -24,3 +24,4 @@ examples:
   - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
+  - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -9,4 +9,5 @@ export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
 export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
-export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
+export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
+export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'

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