playbook_ui 14.1.0.pre.alpha.pbntr373enablekitsforradio3595 → 14.1.0

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

@@ -6,7 +6,6 @@
 @import "../tokens/typography";
 @import "../tokens/shadows";
 @import "../tokens/transition";
-@import "previewer_mixin";
 
 [class^="pb_rich_text_editor_kit"] {
   .toolbar_button {
@@ -86,44 +85,109 @@
     }
 
     code {
-      @include preview_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);
     }
 
     pre {
-      @include preview_pre_codeblock;
+      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;
+      }
     }
     a {
-      @include preview_a;
+      color: $primary;
+      border-bottom: 1px solid $primary;
+      &:hover {
+        color: $text_lt_default;
+        border-bottom: 1px solid $text_lt_default;
+      }
     }
     blockquote {
-      @include preview_blockquote;
+      font-size: $font_larger;
+      padding: $space_sm $space_md;
+      font-style: italic;
+      p {
+        margin: 0;
+      }
     }
     &:focus-visible {
       outline: unset;
       @include transition_default;
     }
     h1 {
-      @include preview_h1;
+      font-size: $text_largest;
+      line-height: $text_larger;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 2.1rem 0 0 0;
     }
     h2 {
-      @include preview_h2;
+      font-size: $text_larger;
+      line-height: $text_larger;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 1.9rem 0 0 0;
     }
     h3 {
-      @include preview_h3;
+      font-size: $text_large;
+      line-height: $text_large;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 1.7rem 0 0 0;
     }
     h4,
     h5,
     h6 {
-      @include preview_smaller_headings;
+      font-size: $text_base;
+      line-height: $text_base;
+      letter-spacing: $lspace_tight;
+      font-weight: $bolder;
     }
     hr {
-      @include 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;
     }
     ol {
-      @include preview_ol;
+      margin: 1rem 0 0 0;
+      padding-left: $space_md;
+      list-style: decimal;
+      li {
+        margin: 2px 0;
+        p {
+          margin: 0;
+        }
+      }
     }
     ul {
-      @include preview_ul;
+      list-style-position: disc;
+      margin: 1rem 0 0 0;
+      padding-left: $space_md;
+      li {
+        margin: 2px 0;
+        p {
+          margin: 0;
+        }
+      }
     }
   }
 }
@@ -169,41 +233,3 @@
     }
   }
 }
-.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/example.yml

@@ -24,4 +24,3 @@ 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,5 +9,4 @@ 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 RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'
+export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'

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

@@ -1,156 +1,119 @@
-import PbEnhancedElement from "../pb_enhanced_element"
+import PbEnhancedElement from "../pb_enhanced_element";
 
-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]"
+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_WRAPPER_SELECTOR
+    return STAR_RATING_SELECTOR;
   }
 
   connect() {
-    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()
-      })
+    this.element.addEventListener("click", (event) => {
+      const clickedStarId = event.currentTarget.id;
+      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)
+        this.updateStarHoverColors(hoveredStarId);
       })
 
       star.addEventListener("mouseleave", () => {
-        this.removeStarHoverColors()
+        this.removeStarHoverColors();
       })
 
       star.addEventListener("keydown", (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault()
-          this.handleStarClick(star.id)
+          event.preventDefault();
+          this.handleStarClick(star.id);
         }
       })
     })
   }
 
   handleStarClick(starId) {
-    this.updateStarColors(starId)
-    this.updateHiddenInputValue(starId)
+    this.updateStarColors(starId);
+    this.updateHiddenInputValue(starId);
   }
 
   updateStarColors(clickedStarId) {
-    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+    const allStars = document.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")
+            icon.classList.add("yellow-star-selected");
           } else if (star.classList.contains("primary_star_light")) {
-            icon.classList.add("primary-star-selected")
+            icon.classList.add("primary-star-selected");
           } else if (star.classList.contains("primary_star_dark")) {
-            icon.classList.add("primary-star-selected")
+            icon.classList.add("primary-star-selected");
           } else if (star.classList.contains("subtle_star_light")) {
-            icon.classList.add("subtle-star-selected")
+            icon.classList.add("subtle-star-selected");
           } else if (star.classList.contains("subtle_star_dark")) {
-            icon.classList.add("subtle-star-selected")
+            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", "subtle-star-selected")
+          icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected");
         }
-        icon.classList.remove("star-hovered")
+        icon.classList.remove("star-hovered");
       }
-    })
+    });
   }
 
   updateHiddenInputValue(value) {
-    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
+    const hiddenInput = document.getElementById(STAR_RATING_INPUT_ID);
     if (hiddenInput) {
-      hiddenInput.value = value
+      hiddenInput.value = value;
     }
   }
 
   updateStarHoverColors(hoveredStarId) {
-    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+    const allStars = document.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 <= 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")
+            icon.classList.add("star-hovered");
           }
         } else {
-          icon.classList.remove("star-hovered")
+          icon.classList.remove("star-hovered");
         }
       }
-    })
+    });
   }
 
 
   removeStarHoverColors() {
-    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+    const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
   
     allStars.forEach(star => {
-      const icon = star.querySelector(".interactive-star-icon")
+      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")
+          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()
-      }
-    }
+    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

@@ -39,13 +39,11 @@
       <% end %>
   
     <% else %>
-      <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
+      <%= pb_rails("flex", props: { orientation: "column" }) do %>
         <% if object.label.present? %>
           <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
         <% end %>
-
-        <%= hidden_input_tag %>
-
+        <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 %>">

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

@@ -30,10 +30,6 @@ module Playbook
                      default: "display"
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
-      prop :input_options, type: Playbook::Props::HashProp,
-                           default: {}
 
       def one_decimal_rating
         rating.to_f.round(1)
@@ -110,19 +106,6 @@ module Playbook
       def classname
         generate_classname("pb_star_rating_kit")
       end
-
-      def hidden_input_tag
-        tag(:input, all_input_options)
-      end
-
-      def all_input_options
-        input_options.merge(
-          data: { "pb-star-rating-input": true },
-          name: name,
-          required: required,
-          style: "display: none"
-        )
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx

@@ -36,6 +36,7 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
                     <Icon
                         className={starIcon[colorOption].className}
                         customIcon={starIcon[colorOption].icon as unknown as { [key: string]: SVGElement }}
+                        icon=""
                     />
                 </React.Fragment>
             ))}
@@ -44,6 +45,7 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
                     <Icon
                         className={starIcon[backgroundType].className}
                         customIcon={starIcon[backgroundType].icon  as unknown as { [key: string]: SVGElement }}
+                        icon=""
                     />
                 </React.Fragment>
             ))}

data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx

@@ -80,6 +80,7 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
                                 onMouseEnter: () => handleMouseEnter(starIndex),
                                 onMouseLeave: () => handleMouseLeave(),
                             }}
+                            icon=""
                             tabIndex={0}
                         />
                     </div>

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import classnames from "classnames";
 
-import { getAllIcons } from "../utilities/icons/allicons"
 import { buildCss, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
@@ -43,7 +42,7 @@ const Time = (props: TimeProps): React.ReactElement => {
     globalProps(props),
     className
   );
-  const clockIcon = getAllIcons()["clock"]
+
   const htmlProps = buildHtmlProps(htmlOptions);
 
   return (
@@ -55,10 +54,9 @@ const Time = (props: TimeProps): React.ReactElement => {
         unstyled
           ? (
               <span>
-                    <Icon
-                        className="svg-inline--fa clock"
-                        customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
-                    />
+                <Icon fixedWidth
+                    icon="clock"
+                />
                 {" "}
               </span>
             )
@@ -67,12 +65,10 @@ const Time = (props: TimeProps): React.ReactElement => {
               <Body color="light"
                   tag="span"
               >
-              <Icon
-                  className="svg-inline--fa clock"
-                  customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
-                  fixedWidth
-                  size={size === "md" ? "" : "sm"}
-              />
+                <Icon fixedWidth
+                    icon="clock"
+                    size={size === "md" ? "" : "sm"}
+                />
                 {" "}
               </Body>
             </>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -13,7 +13,7 @@
   <% if object.unstyled %>
     <% if object.show_icon %>
       <span>
-        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       </span>
     <% end %>
 
@@ -27,7 +27,7 @@
   <% elsif size == "md" %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
 
@@ -41,7 +41,7 @@
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true, size: "sm" }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
 

data/app/pb_kits/playbook/pb_time/time.rb

@@ -38,10 +38,6 @@ module Playbook
       def pb_date_time
         Playbook::PbKit::PbDateTime.new(time, timezone)
       end
-
-      def clock_icon
-        "app/pb_kits/playbook/utilities/icons/clock.svg"
-      end
     end
   end
 end

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -25,7 +25,6 @@ export default [
   "order",
   "numberSpacing",
   "maxWidth",
-  "minWidth",
   "marginRight",
   "marginLeft",
   "marginTop",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -94,10 +94,6 @@ type MaxWidth = {
   maxWidth?: Sizes,
 }
 
-type MinWidth = {
-  minWidth?: Sizes,
-}
-
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -174,7 +170,7 @@ type ZIndex = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -198,14 +194,6 @@ const getPositioningPropsClasses = (position: string, value: Sizes | {value: str
   return css;
 };
 
-const filterClassName = (value: string): string => {
-  if (value.includes("%")) {
-    return value.replace("%", "_percent");
-  } else {
-    return value;
-  }
-};
-
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
 
@@ -332,15 +320,10 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += numberSpacing ? `ns_${numberSpacing} ` : ''
     return css
   },
-  minWidthProps: ({ minWidth }: MinWidth) => {
-    let css = ''
-    css += minWidth ? `min_width_${filterClassName(minWidth)} ` : ''
-    return css.trimEnd()
-  },
   maxWidthProps: ({ maxWidth }: MaxWidth) => {
     let css = ''
-    css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
-    return css.trimEnd()
+    css += maxWidth ? `max_width_${maxWidth } ` : ''
+    return css
   },
   zIndexProps: (zIndex: ZIndex) => {
     let css = ''