playbook_ui 14.1.0.pre.alpha.PA1477timestampkit3536 → 14.1.0.pre.alpha.PBNTR462starratingdefaultvalue3579

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/index.js

@@ -1,119 +1,166 @@
-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()
+    this.setDefaultValue()
+  }
+
+  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()
+      })
 
-    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 = 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");
+            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 = 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 = 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 <= 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 = document.querySelectorAll(STAR_RATING_SELECTOR);
+    const allStars = this.element.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 document.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0;
+    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()
+      }
+    }
+  }
+
+  setDefaultValue() {
+    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
+    const defaultValue = hiddenInput.value
+
+    if (defaultValue) {
+      this.updateStarColors(defaultValue)
+    }
   }
 }

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

@@ -39,11 +39,13 @@
       <% 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 %>">

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

@@ -30,6 +30,11 @@ 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: {}
+      prop :default_value
 
       def one_decimal_rating
         rating.to_f.round(1)
@@ -106,6 +111,20 @@ 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",
+          value: default_value || ""
+        )
+      end
     end
   end
 end

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

@@ -36,7 +36,6 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
                     <Icon
                         className={starIcon[colorOption].className}
                         customIcon={starIcon[colorOption].icon as unknown as { [key: string]: SVGElement }}
-                        icon=""
                     />
                 </React.Fragment>
             ))}
@@ -45,7 +44,6 @@ 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,7 +80,6 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
                                 onMouseEnter: () => handleMouseEnter(starIndex),
                                 onMouseLeave: () => handleMouseLeave(),
                             }}
-                            icon=""
                             tabIndex={0}
                         />
                     </div>

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

@@ -1,6 +1,7 @@
 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';
@@ -42,7 +43,7 @@ const Time = (props: TimeProps): React.ReactElement => {
     globalProps(props),
     className
   );
-
+  const clockIcon = getAllIcons()["clock"]
   const htmlProps = buildHtmlProps(htmlOptions);
 
   return (
@@ -54,9 +55,10 @@ const Time = (props: TimeProps): React.ReactElement => {
         unstyled
           ? (
               <span>
-                <Icon fixedWidth
-                    icon="clock"
-                />
+                    <Icon
+                        className="svg-inline--fa clock"
+                        customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
+                    />
                 {" "}
               </span>
             )
@@ -65,10 +67,12 @@ const Time = (props: TimeProps): React.ReactElement => {
               <Body color="light"
                   tag="span"
               >
-                <Icon fixedWidth
-                    icon="clock"
-                    size={size === "md" ? "" : "sm"}
-                />
+              <Icon
+                  className="svg-inline--fa clock"
+                  customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
+                  fixedWidth
+                  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: { icon: "clock", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), 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: { icon: "clock", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), 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: { icon: "clock", fixed_width: true, size: "sm" }) %>
+        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
 

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

@@ -38,6 +38,10 @@ 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/pb_timestamp/timestamp.rb

@@ -27,15 +27,6 @@ module Playbook
                      values: %w[default elapsed updated],
                      default: "default"
 
-      # Variables to use with pb_time_ago method
-      SECS_PER_MIN  = 60
-      SECS_PER_HOUR = 60 * SECS_PER_MIN
-      SECS_PER_DAY  = 24 * SECS_PER_HOUR
-      SECS_PER_WEEK = 7 * SECS_PER_DAY
-      SECS_PER_MONTH = 4 * SECS_PER_WEEK
-      SECS_PER_YEAR = 12 * SECS_PER_MONTH
-      SECS_PER_CENT = 100 * SECS_PER_YEAR
-
       def classname
         generate_classname("pb_timestamp_kit", variant_class, align)
       end
@@ -82,36 +73,10 @@ module Playbook
 
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
-        datetime_string = " #{pb_time_ago(pb_date_time.convert_to_timestamp)} ago"
-        datetime_string[1] = hide_updated ? datetime_string[1].upcase : datetime_string[1]
+        datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
         updated_string = hide_updated ? "" : "Last updated"
-        "#{updated_string}#{user_string}#{datetime_string}"
-      end
 
-      def pb_time_ago(value)
-        time_ago = DateTime.now.to_i - value.to_i
-        case time_ago
-        when (0...SECS_PER_MIN)
-          "a few seconds"
-        when (SECS_PER_MIN...SECS_PER_HOUR)
-          time = time_ago / SECS_PER_MIN
-          time == 1 ? "a minute" : "#{time_ago / SECS_PER_MIN} minutes"
-        when (SECS_PER_HOUR...SECS_PER_DAY)
-          time = time_ago / SECS_PER_HOUR
-          time == 1 ? "an hour" : "#{time_ago / SECS_PER_HOUR} hours"
-        when (SECS_PER_DAY...SECS_PER_WEEK)
-          time = time_ago / SECS_PER_DAY
-          time == 1 ? "a day" : "#{time_ago / SECS_PER_DAY} days"
-        when (SECS_PER_WEEK...SECS_PER_MONTH)
-          time = time_ago / SECS_PER_WEEK
-          time == 1 ? "a week" : "#{time_ago / SECS_PER_WEEK} weeks"
-        when (SECS_PER_MONTH...SECS_PER_YEAR)
-          time = time_ago / SECS_PER_MONTH
-          time == 1 ? "a month" : "#{time_ago / SECS_PER_MONTH} months"
-        when (SECS_PER_YEAR...SECS_PER_CENT)
-          time = time_ago / SECS_PER_YEAR
-          time == 1 ? "a year" : "#{time_ago / SECS_PER_YEAR} years"
-        end
+        "#{updated_string}#{user_string}#{datetime_string}"
       end
 
       def datetime_or_text

data/app/pb_kits/playbook/tokens/_container.scss

@@ -0,0 +1,21 @@
+$container_0:     0% !default;
+$container_xxs:   320px !default;
+$container_xs:    360px !default;
+$container_sm:    540px !default;
+$container_md:    720px !default;
+$container_lg:    960px !default;
+$container_xl:    1140px !default;
+$container_xxl:   1320px !default;
+$container_100:   100% !default;
+$containers: (
+  container_0:    $container_0,
+  container_xxs:  $container_xxs,
+  container_xs:   $container_xs,
+  container_sm:   $container_sm,
+  container_md:   $container_md,
+  container_lg:   $container_lg,
+  container_xl:   $container_xl,
+  container_xxl:  $container_xxl,
+  container_100:  $container_100,
+  none:           0,
+);

data/app/pb_kits/playbook/utilities/_min_width.scss

@@ -0,0 +1,45 @@
+@import "../tokens/container";
+
+.min_width_0 {
+  min-width: map-get($containers, 'none');
+}
+
+.min_with_0_percent {
+  min-width: $container_0;
+}
+
+.min_width_xxs {
+  min-width: $container_xxs;
+}
+
+.min_width_xs {
+  min-width: $container_xs;
+}
+
+.min_width_sm {
+  min-width: $container_sm;
+}
+
+.min_width_md {
+  min-width: $container_md;
+}
+
+.min_width_lg {
+  min-width: $container_lg;
+}
+
+.min_width_xl {
+  min-width: $container_xl;
+}
+
+.min_width_xxl {
+  min-width: $container_xxl;
+}
+
+.min_width_100_percent {
+  min-width: $container_100;
+}
+
+.minwidth-resize {
+  resize: horizontal;
+}

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

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

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

@@ -94,6 +94,10 @@ type MaxWidth = {
   maxWidth?: Sizes,
 }
 
+type MinWidth = {
+  minWidth?: Sizes,
+}
+
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -170,7 +174,7 @@ type ZIndex = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & MinWidth & 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) => {
@@ -194,6 +198,14 @@ 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} = {
 
@@ -320,10 +332,15 @@ 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_${maxWidth } ` : ''
-    return css
+    css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
+    return css.trimEnd()
   },
   zIndexProps: (zIndex: ZIndex) => {
     let css = ''