playbook_ui 14.0.0.pre.alpha.updateviewcomponentgem3527 → 14.0.0

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -9,8 +9,8 @@ module Playbook
                   values: %w[sm md lg],
                   default: "sm"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green orange lighter],
-                     default: "lighter"
+                     values: %w[default royal blue purple teal red yellow green orange],
+                     default: "default"
 
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -18,7 +18,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_default")
     })
 
     test("renders icon", () => {
@@ -101,7 +101,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_default`)
 
             cleanup()
         })
@@ -115,8 +115,7 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green",
-        "lighter"].forEach(
+        "green"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -149,7 +148,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_default")
     })
 
 })

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -11,7 +11,7 @@ $selector: ".pb_nav_list";
 [class^="pb_nav_list"][class*="_horizontal"] {
   .pb_nav_wrapper {
     display: flex;
-    align-items: end;
+    align-items: center;
     padding: 0;
     margin: 0;
     list-style: none;

data/app/pb_kits/playbook/pb_online_status/_online_status.scss

@@ -1,58 +1,11 @@
-@import "../tokens/colors";
-
-$pb_online_status_size: 8px;
-$pb_online_status_border: 2px;
-$pb_online_status_sizes: (
-  "sm": 8px,
-  "md": 10px,
-  "lg": 12px,
-);
-
-$pb_online_status_statuses: (
-  online: $success,
-  away: $warning,
-  offline: $neutral,
-  success: $success,
-  warning: $warning,
-  error: $error,
-  info: $info,
-  neutral: $neutral,
-  primary: $primary,
-);
+@import "online_status_mixins";
 
 [class^=pb_online_status_kit] {
-  box-sizing: content-box;
-  width: $pb_online_status_size;
-  height: $pb_online_status_size;
-  flex-basis: $pb_online_status_size;
-  flex-grow: 0;
-  flex-shrink: 0;
-  border-width: $pb_online_status_border;
-  border-color: $white;
-  border-style: solid;
-  border-radius: 50%;
-  background: $neutral;
-
-  &.dark {
-    border-color: $bg_dark;
-  }
+  @include pb_online_status;
 
   @each $status_name, $status_value in $pb_online_status_statuses {
-    &[class*=_#{$status_name}] {
-      background: $status_value;
+    &[class*=_#{$status_name}]  {
+      @include pb_online_status($status_value);
     }
   }
-
-  @each $size, $value in $pb_online_status_sizes {
-    &[class*=_size_#{$size}] {
-      width: $value;
-      height: $value;
-      flex-basis: $value;
-    }
-  }
-
-  &[class*=_no_border] {
-    border-width: 0;
-    border-style: none;
-  }
-}
+}

data/app/pb_kits/playbook/pb_online_status/_online_status.tsx

@@ -11,8 +11,6 @@ type OnlineStatusProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   status?: "away" | "error" | "info" | "neutral" | "offline" |"online" | "primary"| "success" | "warning",
-  size?: "sm" | "md" | "lg",
-  noBorder?: boolean,
 } & GlobalProps
 
 const OnlineStatus = (props: OnlineStatusProps) => {
@@ -23,8 +21,6 @@ const OnlineStatus = (props: OnlineStatusProps) => {
     htmlOptions = {},
     id,
     status = 'offline',
-    size = 'sm',
-    noBorder = false,
   } = props
 
   aria.label = status
@@ -32,8 +28,7 @@ const OnlineStatus = (props: OnlineStatusProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const getBorder = noBorder ? 'no_border' : ''
-  const classes = classnames(buildCss('pb_online_status_kit', status, getBorder, "size", size), globalProps(props), className)
+  const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)
 
   return (
     <div

data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss

@@ -0,0 +1,32 @@
+@import "../tokens/colors";
+
+$pb_online_status_size: 10px;
+$pb_online_status_border: 2px;
+
+$pb_online_status_statuses: (
+  online: $success,
+  away: $warning,
+  offline: $neutral,
+  success: $success,
+  warning: $warning,
+  error: $error,
+  info: $info,
+  neutral: $neutral,
+  primary: $primary,
+);
+
+@mixin pb_online_status($background: $neutral) {
+  &.dark {
+    border-color: $bg_dark;
+  }
+  width: $pb_online_status_size;
+  height: $pb_online_status_size;
+  flex-basis: $pb_online_status_size;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-width: $pb_online_status_border;
+  border-color: $white;
+  border-style: solid;
+  border-radius: 50%;
+  background: $background;
+}

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

@@ -1,12 +1,8 @@
 examples:
 
   rails:
-  - online_status_default: Colors
-  - online_status_size: Size
-  - online_status_no_border: No Border
+  - online_status_default: Default
 
 
   react:
-  - online_status_default: Colors
-  - online_status_size: Size
-  - online_status_no_border: No Border
+  - online_status_default: Default

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

@@ -1,3 +1 @@
 export { default as OnlineStatusDefault } from './_online_status_default.jsx'
-export { default as OnlineStatusSize } from './_online_status_size.jsx'
-export { default as OnlineStatusNoBorder } from './_online_status_no_border.jsx'

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -7,18 +7,8 @@ module Playbook
                     values: %w[online offline away success warning error info neutral primary],
                     default: "offline"
 
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[sm md lg],
-                  default: "sm"
-
-      prop :no_border, type: Playbook::Props::Boolean, default: false
-
       def classname
-        generate_classname("pb_online_status_kit", status, is_no_border, "size", size)
-      end
-
-      def is_no_border
-        no_border ? "no_border" : nil
+        generate_classname("pb_online_status_kit", status)
       end
     end
   end

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

@@ -2,9 +2,7 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
-  - overlay_toggle: Toggle
 
   rails:
-  - overlay_default: Default
-  - overlay_multi_directional: Multi-directional
-  - overlay_toggle: Toggle
+    - overlay_default: Default
+    - overlay_multi_directional: Multi-directional

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

@@ -1,3 +1,2 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
-export { default as OverlayToggle } from './_overlay_toggle.jsx'

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

@@ -9,10 +9,10 @@
   justify-content: flex-start;
 
   path {
-    &.subtle_star_dark {
+    &.suble_star_dark {
       fill: $text_dk_default;
     }
-    &.subtle_star_light {
+    &.suble_star_light {
       fill: $text_lt_default;
     }
     &.outline_star_dark {
@@ -49,10 +49,9 @@
 
   $star-styles: (
     yellow_star: (color: $yellow),
-    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),
+    primary_star: (color: $royal),
+    suble_star_light: (color: $text_lt_default),
+    suble_star_dark: (color: $text_dk_default),
     empty_star_dark: (color: $border_dark),
     empty_star_light: (color: $border_light),
     outline_empty_star_dark: (color: transparent),
@@ -112,89 +111,13 @@
       }
     }
   }
-
-  // Interactivity 
-  path {
-    transition: fill 0.2s
-  }
-  // Rails selected styles
-  .interactive-star-icon {
-    cursor: pointer;
-  }
   .yellow-star-selected {
     color: $yellow; 
   }
   .primary-star-selected {
     color: $royal 
   }
-  .subtle-star-selected {
+  .suble-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,7 +6,6 @@ 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
@@ -14,5 +13,4 @@ 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_interactive: Interactive
+    - star_rating_size_options: Size Options

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

@@ -14,29 +14,6 @@ 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) {
@@ -50,21 +27,16 @@ 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_light")) {
+          } else if (star.classList.contains("primary_star")) {
             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 if (star.classList.contains("suble_star_light")) {
+            icon.classList.add("suble-star-selected");
           } else {
             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", "suble-star-selected");
         }
-        icon.classList.remove("star-hovered");
       }
     });
   }
@@ -75,45 +47,4 @@ 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), tabindex: 0 } ) %>
+              <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size} interactive-star-icon", custom_icon: Playbook::Engine.root.join(background_star_path)} ) %>
             </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"
-          dark ? "primary_star_dark" : "primary_star_light"
+          "primary_star"
         when "subtle"
-          dark ? "subtle_star_dark" : "subtle_star_light"
+          dark ? "suble_star_dark" : "suble_star_light"
         end
       end
 

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

@@ -53,11 +53,7 @@ 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 === "primary"
-        ? (dark ? "primary_star_dark" : "primary_star_light")
-        : `${color}_star`
+    const colorClassName = color === "subtle" ? (dark ? "suble_star_dark" : "suble_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 {

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

@@ -23,69 +23,40 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
         size,
     } = props
     const [interactiveStarValue, setInteractiveStarValue] = useState(0)
-    const [hoverStarValue, setHoverStarValue] = useState<number | null>(null)
     const starIcon = getStarIconObject(backgroundType, colorOption, dark, size)
 
     const handleOnClick = (interactiveStarValue: number) => {
         setInteractiveStarValue(interactiveStarValue)
         onClick && onClick(interactiveStarValue)
     }
-    const handleMouseEnter = (value: number) => {
-        setHoverStarValue(value);
-    }
-    const handleMouseLeave = () => {
-        setHoverStarValue(null);
-    }
-    const handleOnKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, starIndex: number) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault()
-            handleOnClick(starIndex)
-        }
-    }
 
     return (
         <Flex className="star_flex_area">
-            {[...Array(denominator)].map((_, index) => {
-                const starIndex = index + 1
-                const isFilled = starIndex <= interactiveStarValue
-                const isHovered = hoverStarValue !== null && starIndex > interactiveStarValue && starIndex <= hoverStarValue
-
-                const baseClass = dark 
-                    ? starIcon[backgroundType].className.replace("empty_star_light", "empty_star_dark")
-                    : starIcon[backgroundType].className
-                
-                let starClass = baseClass
-                if (isFilled) {
-                    starClass = starClass.replace(/(empty_star_light|empty_star_dark)/, '')
-                    starClass += ` ${starIcon[colorOption].className}`
-                }
-                if (isHovered) {
-                    starClass += " star-hovered"
-                }
-                if (isFilled && starIndex === interactiveStarValue) {
-                    starClass += " star-selected"
-                }
-
-                return (
-                    <div
-                        key={index}
-                        onKeyDown={(event) => handleOnKeyDown(event, starIndex)}
-                    >
+            {[...Array(denominator)].map((_, index) => (
+                <React.Fragment key={index}>
+                    {index + 1 <= interactiveStarValue && (
                         <Icon
-                            className={starClass.trim()}
+                            className={starIcon[colorOption].className}
                             cursor="pointer"
-                            customIcon={starIcon[backgroundType].icon as unknown as { [key: string]: SVGElement }}
-                            htmlOptions={{
-                                onClick: () => handleOnClick(starIndex),
-                                onMouseEnter: () => handleMouseEnter(starIndex),
-                                onMouseLeave: () => handleMouseLeave(),
-                            }}
+                            customIcon={starIcon[colorOption].icon  as unknown as { [key: string]: SVGElement }}
+                            htmlOptions={{ onClick: () => handleOnClick(index + 1) }}
                             icon=""
-                            tabIndex={0}
                         />
-                    </div>
-                );
-            })}
+                    )}
+
+                    {index + 1 > interactiveStarValue && (
+                        <React.Fragment key={index}>
+                            <Icon
+                                className={starIcon[backgroundType].className}
+                                cursor="pointer"
+                                customIcon={starIcon[backgroundType].icon  as unknown as { [key: string]: SVGElement }}
+                                htmlOptions={{ onClick: () => handleOnClick(index + 1) }}
+                                icon=""
+                            />
+                        </React.Fragment>
+                    )}
+                </React.Fragment>
+            ))}
         </Flex>
     )
 }

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -33,7 +33,7 @@ type TableProps = {
     verticalBorder?: boolean,
 } & GlobalProps
 
-const Table = (props: TableProps): React.ReactElement => {
+const Table = (props: TableProps) => {
     const {
         aria = {},
         children,

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,19 +1,19 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-  static get selector(): string {
+  static get selector() {
     return '.table-responsive-collapse'
   }
 
-  connect(): void {
+  connect() {
     const tables = document.querySelectorAll('.table-responsive-collapse');
 
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      const headers: string[] = [];
+      let headers: string[] = [];
       [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        const colSpan = header.colSpan
+        let colSpan = header.colSpan
         for (let i = 0; i < colSpan; i++) {
           headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -17,7 +17,7 @@ type TableBodyPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
+const TableBody = (props: TableBodyPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx

@@ -18,7 +18,7 @@ type TableCellPropTypes = {
   text?: string
 };
 
-const TableCell = (props: TableCellPropTypes): React.ReactElement => {
+const TableCell = (props: TableCellPropTypes) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -17,7 +17,7 @@ type TableHeadPropTypes = {
   tag?: "table" | "div";
 };
 
-const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
+const TableHead = (props: TableHeadPropTypes) => {
   const {
     aria = {},
     children,