playbook_ui 13.34.1.pre.alpha.powerfontsexternal3403 → 14.0.0.pre.alpha.PBNTR415starratingform3492

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -24,7 +24,8 @@ type IconCircleProps = {
     | "red"
     | "yellow"
     | "orange"
-    | "green",
+    | "green"
+    | "lighter",
 }
 
 const IconCircle = (props: IconCircleProps) => {

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -10,8 +10,8 @@ module Playbook
                   values: %w[xxs xs sm md base lg xl],
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue orange purple teal red yellow green orange],
-                     default: "default"
+                     values: %w[default royal blue orange purple teal red yellow green orange lighter],
+                     default: "lighter"
 
       def classname
         generate_classname("pb_icon_circle_kit", "size_#{size}", variant)

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -50,15 +50,4 @@
       margin-right: $space-sm;
     }
   }
-  [class^=pb_title_kit_1] + [class^=pb_body_kit] {
-    font-size: 36px;
-  }
-
-  [class^=pb_title_kit_2] + [class^=pb_body_kit] {
-    font-size: 24px
-  }
-
-  [class^=pb_title_kit_3] + [class^=pb_body_kit] {
-    font-size: 20px;
-  }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -32,7 +32,8 @@ type IconStatValueProps = {
     | "red"
     | "yellow"
     | "orange"
-    | "green",
+    | "green"
+    | "lighter",
 }
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
@@ -49,7 +50,7 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'default',
+    variant = 'lighter',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -47,6 +47,7 @@
                                           value: 19.18,
                                           variant:"green"
  }) %>
+ <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe",
                                           text: "Uranus",
                                           unit: "AU",

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],
-                     default: "default"
+                     values: %w[default royal blue purple teal red yellow green orange lighter],
+                     default: "lighter"
 
       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_default")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
     })
 
     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}_default`)
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
 
             cleanup()
         })
@@ -115,7 +115,8 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green"].forEach(
+        "green",
+        "lighter"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -148,7 +149,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_default")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
     })
 
 })

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: center;
+    align-items: end;
     padding: 0;
     margin: 0;
     list-style: none;

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

@@ -1,11 +1,58 @@
-@import "online_status_mixins";
+@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,
+);
 
 [class^=pb_online_status_kit] {
-  @include pb_online_status;
+  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;
+  }
 
   @each $status_name, $status_value in $pb_online_status_statuses {
-    &[class*=_#{$status_name}]  {
-      @include pb_online_status($status_value);
+    &[class*=_#{$status_name}] {
+      background: $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,6 +11,8 @@ 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) => {
@@ -21,6 +23,8 @@ const OnlineStatus = (props: OnlineStatusProps) => {
     htmlOptions = {},
     id,
     status = 'offline',
+    size = 'sm',
+    noBorder = false,
   } = props
 
   aria.label = status
@@ -28,7 +32,8 @@ const OnlineStatus = (props: OnlineStatusProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)
+  const getBorder = noBorder ? 'no_border' : ''
+  const classes = classnames(buildCss('pb_online_status_kit', status, getBorder, "size", size), globalProps(props), className)
 
   return (
     <div

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("online_status", props: { no_border: true }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import OnlineStatus from '../_online_status'
+
+const OnlineStatusNoBorder = (props) => (
+  <>
+    <OnlineStatus
+        noBorder
+        {...props}
+    />
+  </>
+)
+
+export default OnlineStatusNoBorder

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("online_status", props: { size: "sm", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { size: "md", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { size: "lg", margin_y: "xs" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import OnlineStatus from '../_online_status'
+
+const OnlineStatusSize = (props) => (
+  <>
+    <OnlineStatus
+        marginY="xs"
+        size="sm"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        size="md"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        size="lg"
+        {...props}
+    />
+  </>
+)
+
+export default OnlineStatusSize

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

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

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

@@ -1 +1,3 @@
 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,8 +7,18 @@ 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)
+        generate_classname("pb_online_status_kit", status, is_no_border, "size", size)
+      end
+
+      def is_no_border
+        no_border ? "no_border" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_online_status/online_status.test.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import OnlineStatus from './_online_status'
+
+const testId = 'online-status'
+
+test('renders online status with defaults', () => {
+  render(
+    <OnlineStatus data={{ testid: testId }} />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_online_status_kit_offline_size_sm')
+})
+
+test('renders online status with props', () => {
+  render(
+    <OnlineStatus
+        className="additional_class"
+        dark
+        data={{ testid: testId }}
+        noBorder
+        size="lg"
+        status="online"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_online_status_kit_online_no_border_size_lg dark additional_class')
+})

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb

@@ -0,0 +1,61 @@
+<div id="outer-container">
+    <%= pb_rails("overlay", props: { id: "overlay-container", overflow: "hidden" }) do %>
+        <div id="underlying-table">
+            <%= pb_rails("table", props: { size: "sm" }) do %>
+                <thead>
+                    <tr>
+                        <th>Column 1</th>
+                        <th>Column 2</th>
+                        <th>Column 3</th>
+                        <th>Column 4</th>
+                        <th>Column 5</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <% 7.times do %>
+                        <tr>
+                            <td>Value 1</td>
+                            <td>Value 2</td>
+                            <td>Value 3</td>
+                            <td>Value 4</td>
+                            <td>Value 5</td>
+                        </tr>
+                    <% end %>   
+                </tbody>
+            <% end %>
+        </div>
+    <% end %>
+    <%= pb_rails("button", props: { text: "Show More", id: "show-more-button", variant: "link", full_width: true, icon: "chevron-down", icon_right: true }) %>
+    <%= pb_rails("button", props: { text: "Show Less", id: "show-less-button", variant: "link", full_width: true, icon: "chevron-up", icon_right: true }) %>
+</div>
+
+<script type="text/javascript">
+document.addEventListener("DOMContentLoaded", () => {
+  const showMoreButton = document.getElementById("show-more-button");
+  const showLessButton = document.getElementById("show-less-button");
+  const overlayContainer = document.getElementById("overlay-container");
+  const underlyingTable = document.getElementById("underlying-table");
+  const outerContainer = document.getElementById("outer-container");
+
+  showLessButton.style.display = "none";
+  underlyingTable.style.height = "200px";
+
+  const showMore = () => {
+    outerContainer.appendChild(underlyingTable);
+    outerContainer.appendChild(showLessButton);
+    showMoreButton.style.display = "none";
+    showLessButton.style.display = "flex";
+    underlyingTable.style.height = "auto";
+  };
+
+  const showLess = () => {
+    overlayContainer.appendChild(underlyingTable);
+    showMoreButton.style.display = "flex";
+    showLessButton.style.display = "none";
+    underlyingTable.style.height = "200px";
+  };
+
+  showMoreButton.addEventListener("click", showMore);
+  showLessButton.addEventListener("click", showLess);
+});
+</script>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx

@@ -0,0 +1,70 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from "react";
+import { Overlay, Table, Button } from "playbook-ui";
+
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <thead>
+                <tr>
+                    <th>{"Column 1"}</th>
+                    <th>{"Column 2"}</th>
+                    <th>{"Column 3"}</th>
+                    <th>{"Column 4"}</th>
+                    <th>{"Column 5"}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    );
+};
+
+const OverlayToggle = () => {
+    const [showOverlay, setShowOverlay] = useState(true);
+
+    return (
+        <>
+            {showOverlay ? (
+                <>
+                    <Overlay overflow="hidden">
+                        <div style={{ height: 200 }}>
+                            <TableExample />
+                        </div>
+                    </Overlay>
+                    <Button
+                        fullWidth
+                        icon="chevron-down"
+                        iconRight
+                        key="chevron-down"
+                        onClick={() => setShowOverlay(false)}
+                        text="Show More"
+                        variant="link"
+                    />
+                </>
+            ) : (
+                <>
+                    <TableExample />
+                    <Button
+                        fullWidth
+                        icon="chevron-up"
+                        iconRight
+                        key="chevron-up"
+                        onClick={() => setShowOverlay(true)}
+                        text="Show Less"
+                        variant="link"
+                    />
+                </>
+            )}
+        </>
+    );
+};
+
+export default OverlayToggle;

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md

@@ -0,0 +1 @@
+To toggle an overlay, add a button with an event handler. Remove the overlay container to reveal the underlying content. Re-wrap the overlay container to add the overlay back.

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

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

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

@@ -1,2 +1,3 @@
 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 {
-    &.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