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

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb

@@ -10,3 +10,16 @@
     variant: "notification"
   }) %>
 </div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "1",
+    variant: "notification_error",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "4",
+    variant: "notification_error"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx

@@ -4,20 +4,39 @@ import Badge from '../_badge'
 const BadgeNotification = (props) => {
   return (
     <>
-      <Badge
-          rounded
-          text="1"
-          variant="notification"
-          {...props}
-      />
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notification"
+            {...props}
+        />
 
-      &nbsp;
+        &nbsp;
 
-      <Badge
-          text="4"
-          variant="notification"
-          {...props}
-      />
+        <Badge
+            text="4"
+            variant="notification"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notificationError"
+            {...props}
+        />
+
+        &nbsp;
+
+        <Badge
+            text="4"
+            variant="notificationError"
+            {...props}
+        />
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_date_picker/docs/_description.md

@@ -6,4 +6,6 @@ Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a
 
 To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
 
-The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.
+The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.
+
+The Date Picker expects a date format of `MM/DD/YYYY` by default. If a different date format (e.g. `DD/MM/YYYY`, `m/d/y`, etc.) is used, the component will not know how to handle it and use a default date instead. To change the date format used, read more [here](#format).

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -33,7 +33,7 @@ $confirmation_toast_colors: (
 
   &.positioned_toast {
     position: fixed;
-    z-index: $z_9;
+    z-index: $z_10 !important;
     display: flex;
     justify-content: space-around;
     max-width: max-content;

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -45,6 +45,7 @@
     class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -39,6 +39,7 @@ type IconProps = {
   size?: IconSizes,
   fontStyle?: 'far' | 'fas' | 'fab' | 'fak',
   spin?: boolean,
+  tabIndex?: number,
 } & GlobalProps
 
 const flipMap = {
@@ -138,6 +139,7 @@ const Icon = (props: IconProps) => {
     size,
     fontStyle = 'far',
     spin = false,
+    tabIndex,
   } = props
 
   let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
@@ -226,6 +228,7 @@ const Icon = (props: IconProps) => {
               id,
               width: 'auto',
               height: 'auto',
+              ...(props.tabIndex !== undefined && { tabIndex }),
             })
           }
         </>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -37,6 +37,7 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
       prop :color, type: Playbook::Props::String
+      prop :tabindex
 
       def valid_emoji?
         emoji_regex = /\p{Emoji}/
@@ -107,6 +108,7 @@ module Playbook
         svg["aria"] = object.aria
         svg["height"] = "auto"
         svg["width"] = "auto"
+        svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color
         raw doc

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'