playbook_ui 15.1.0.pre.alpha.typeaheadscss11143 → 15.1.0.pre.rc.0

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

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,7 +33,8 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-} & GlobalProps
+    | "lighter",
+}
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -49,13 +50,13 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'default',
+    variant = 'lighter',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_icon_stat_value_kit', orientation), globalProps(props),
+    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
     className
   )
   const titleSize = function(size: "sm" | "md" | "lg") {
@@ -100,8 +101,6 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
       <IconCircle
           dark={dark}
           icon={icon}
-          marginBottom={orientation == 'vertical' ? 'xs' : undefined}
-          marginRight={orientation == 'horizontal' ? 'sm' : undefined}
           size={size}
           variant={variant}
       />

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -3,8 +3,6 @@
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,
         icon: object.icon,
-        margin_right: object.icon_margin_right,
-        margin_bottom: object.icon_margin_bottom,
         size: object.size,
         variant: object.variant }) %>
 

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],
@@ -25,7 +25,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_icon_stat_value_kit", orientation)
+        generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
       end
 
       def value_string
@@ -41,14 +41,6 @@ module Playbook
           3
         end
       end
-
-      def icon_margin_right
-        orientation === "horizontal" && "sm"
-      end
-
-      def icon_margin_bottom
-        orientation === "vertical" && "xs"
-      end
     end
   end
 end

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")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
     })
 
     test("renders icon", () => {
@@ -99,10 +99,9 @@ describe("IconStatValue Kit", () => {
                     value={64.18}
           />
             )
-            const size = sizeProp === "sm" ? "3" : sizeProp === "md" ? "2" : "1"
+    
             const kit = screen.getByTestId(testId)
-            const title = kit.querySelector(".pb_title_kit")
-            expect(title).toHaveClass(`pb_title_${size}`)
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
 
             cleanup()
         })
@@ -116,7 +115,8 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green"].forEach(
+        "green",
+        "lighter"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -128,10 +128,9 @@ describe("IconStatValue Kit", () => {
                     variant={colorProp}
           />
             )
-
+    
             const kit = screen.getByTestId(testId)
-            const iconCircle = kit.querySelector(`.pb_icon_circle_kit_size_sm_${colorProp}`)
-            expect(iconCircle).toBeInTheDocument()
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
 
             cleanup()
         }) 
@@ -150,7 +149,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
     })
 
 })

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -56,7 +56,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth
-            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'circle-notch' : undefined}
+            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
             pulse
         />
         {text}

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -20,7 +20,7 @@ module Playbook
         if variant == "dotted"
           "spinner"
         elsif variant == "solid"
-          "circle-notch"
+          "spinner-solid"
         end
       end
     end

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -140,8 +140,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   delete filteredProps?.marginLeft;
 
 
-  const isLink = !!link
-  const Tag = isLink ? "a" : "div"
+  const Tag = link ? "a" : "div";
   const activeClass = active === true ? "active" : "";
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
@@ -201,13 +200,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
   const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!isLink && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault()
-      onClick?.()
-    }
-  }
-
   return (
     <>
       {collapsible ? (
@@ -230,18 +222,15 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
                   {...dataProps}
                   {...htmlProps}
                   className={classes}
-                  href={isLink ? link : undefined}
+                  href={link}
                   id={id}
-                  role={!isLink ? "button" : undefined}
-                  tabIndex={!isLink ? 0 : undefined}
-                  target={isLink ? target : undefined}
+                  target={target}
               >
                 {imageUrl && (
                   <div
                       className="pb_nav_list_item_icon_section_collapsible"
                       key={imageUrl}
                       onClick={(e) => handleIconClick(e)}
-                      onKeyDown={!isLink ? handleKeyDown : undefined}
                   >
                     <Image className="pb_nav_img_wrapper"
                         url={imageUrl}
@@ -276,13 +265,10 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             {...dataProps}
             {...htmlProps}
             className={classes}
-            href={isLink ? link : undefined}
+            href={link}
             id={id}
             onClick={onClick}
-            onKeyDown={!isLink ? handleKeyDown : undefined}
-            role={!isLink ? "button" : undefined}
-            tabIndex={!isLink ? 0 : undefined}
-            target={isLink ? target : undefined}
+            target={target}
         >
           {imageUrl && (
             <div className="pb_nav_list_item_icon_section"

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

@@ -48,30 +48,3 @@
     &:hover { cursor: pointer; }
   }
 }
-
-.pb_nav_extended_underline {
-  position: relative;
-  
-  // Add full-width border using pseudo-element so as not to break the active item border
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background-color: $border_light;
-    z-index: 1;
-  }
-
-  .pb_nav_list_kit_item_active.pb_nav_list_item_link {
-      position: relative;
-      z-index: 2;
-  }
-
-  &.dark {
-    &::after {
-      background-color: rgba($white, $opacity_3);
-    }
-  }
-}

data/app/pb_kits/playbook/pb_nav/_nav.test.js

@@ -117,19 +117,3 @@ test('should change variant', () => {
     const kit = screen.getByTestId(navTestId)
     expect(kit).toHaveClass('pb_nav_list_subtle_vertical_highlight')
 })
-
-test('extendedUnderline should work as expected', () => {
-    render(
-        <NavDefault extendedUnderline 
-            orientation="horizontal" 
-        />
-    )
-    const kit = screen.getByTestId(navTestId)
-    expect(kit).toHaveClass('pb_nav_extended_underline')
-})
-
-test('extendedUnderline should not be applied when orientation is vertical', () => {
-    render(<NavDefault extendedUnderline />)
-    const kit = screen.getByTestId(navTestId)
-    expect(kit).not.toHaveClass('pb_nav_extended_underline')
-})

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -14,7 +14,6 @@ type NavProps = {
   className?: string | string[],
   data?: Record<string, unknown>,
   dark?: boolean,
-  extendedUnderline?: boolean,
   highlight?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -34,7 +33,6 @@ const Nav = (props: NavProps): React.ReactElement => {
     className,
     data = {},
     dark = false,
-    extendedUnderline = false,
     highlight = true,
     htmlOptions = {},
     id,
@@ -54,9 +52,6 @@ const Nav = (props: NavProps): React.ReactElement => {
       highlight: highlight,
       borderless: borderless,
     }),
-    // extended underline is only applicable for horizontal normal nav, should not 
-    // affect other variants or orientations
-    variant === 'normal' && orientation === 'horizontal' && extendedUnderline && 'pb_nav_extended_underline',
     globalProps(props),
     className
   )

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

@@ -17,7 +17,6 @@ examples:
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
-  - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -43,7 +42,6 @@ examples:
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
-  - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

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

@@ -19,5 +19,4 @@ export { default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_
 export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
 export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
 export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
-export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
-export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
+export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -3,9 +3,7 @@
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
         <%= pb_content_tag( object.tag,
             href: object.link && object.link,
-            target: object.link && object.target,
-            onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
-            tabindex: object.link ? nil : 0,
+            target: object.link && object.target
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -25,9 +23,7 @@
   <% else %>
     <%= pb_content_tag( object.tag,
         href: object.link && object.link,
-        target: object.link && object.target,
-        onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
-        tabindex: object.link ? nil : 0,
+        target: object.link && object.target
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -14,10 +14,9 @@ module Playbook
       prop :highlight, type: Playbook::Props::Boolean, default: true
       prop :borderless, type: Playbook::Props::Boolean, default: false
       prop :tabbing, type: Playbook::Props::Boolean, default: false
-      prop :extended_underline, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class) + extended_underline_class
+        generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
       end
 
       def data
@@ -35,10 +34,6 @@ module Playbook
       def borderless_class
         borderless ? "borderless" : nil
       end
-
-      def extended_underline_class
-        variant === "normal" && orientation === "horizontal" && extended_underline ? " pb_nav_extended_underline" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb

@@ -4,8 +4,8 @@
 
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
@@ -142,4 +142,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb

@@ -10,8 +10,8 @@
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     const commonText = document.querySelector("#body_common")
 
@@ -133,4 +133,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb

@@ -4,8 +4,8 @@
 
 <div id="match"> </div>
 
-<script>
-    window.addEventListener("load", () => {   
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {   
 
       const useState = (defaultValue) => {
           let value = defaultValue;
@@ -48,4 +48,4 @@
 
       }
     })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -32,8 +32,8 @@
 
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
 
     // variables for the passphrase kits you are targeting 
@@ -320,4 +320,4 @@
 
   
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -7,8 +7,8 @@
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_change").querySelector("input")
@@ -120,4 +120,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -13,8 +13,8 @@
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     function handleButtonClick() {
-      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
-        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
+      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
+        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
 
       const editorElement = editorContainer?.querySelector('trix-editor')
       const inputId = editorElement?.getAttribute('input')

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -53,13 +53,10 @@ $section_colors_dark: (
 .pb_section_separator_vertical {
   margin-left: $space_xs;
   margin-right: $space_xs;
-  flex-direction: column;
   &::before {
-    flex: 1;
-    @include section_separator_vertical(false);
+    display: none;
   }
   &::after {
-    flex: 1;
     @include section_separator_vertical(false);
   }
 }
@@ -90,7 +87,7 @@ $section_colors_dark: (
         background: none;
       }
       &.pb_section_separator_vertical {
-        &::before, &::after {
+        &::after {
           border: 1px dashed $color_value;
           background: none;
         }
@@ -109,7 +106,7 @@ $section_colors_dark: (
   }
   
   &.pb_section_separator_vertical {
-    &::before, &::after {
+    &::after {
       @include section_separator_vertical(true);
     }
   }
@@ -118,11 +115,6 @@ $section_colors_dark: (
     &::before, &::after {
       @include section_separator_dashed(true);
     }
-    &.pb_section_separator_vertical {
-      &::before, &::after {
-        @include section_separator_dashed(true);
-      }
-    }
   }
 }
 
@@ -134,7 +126,7 @@ $section_colors_dark: (
     }
 
     &.pb_section_separator_vertical {
-      &::before, &::after {
+      &::after {
         @include section_separator_vertical(false);
         background: $color_value;
       }
@@ -146,7 +138,7 @@ $section_colors_dark: (
         background: none;
       }
       &.pb_section_separator_vertical {
-        &::before, &::after {
+        &::after {
           border: 1px dashed $color_value;
           background: none;
         }

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb

@@ -11,27 +11,4 @@
             padding_right: "xs" 
         }) %>
     <% end %>
-<% end %>
-
-<%= pb_rails("flex", props: { classname: "flex-container", margin_top: "lg", vertical: "stretch" }) do %>
-    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-    <% end %>
-    <%= pb_rails("section_separator", props: { orientation: "vertical" }) do %>
-        <%= pb_rails("card", props: {
-            border_radius: "rounded",
-            justify_content: "center",
-            padding: "none"
-        })  do %>
-            <%= pb_rails("caption", props: {
-                text: "TODAY",
-                size: "xs",
-                padding_left: "xs",
-                padding_right: "xs" 
-            }) %>
-        <% end %>
-    <% end %>
-    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -2,25 +2,8 @@ import React from 'react'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
 
-const childrenHorizontal = (
-    <Card
-        borderRadius="rounded"
-        justifyContent="center"
-        padding="none"
-    >
-        <Caption
-            paddingLeft="xs"
-            paddingRight="xs"
-            size="xs"
-            text="TODAY"
-        />
-    </Card>
-)
-
-const childrenVertical = (
+const children = (
     <Card
         borderRadius="rounded"
         justifyContent="center"
@@ -37,33 +20,12 @@ const childrenVertical = (
 
 const SectionSeparatorChildren = (props) => {
     return (
-        <>
-            <SectionSeparator
-                {...props}
-                lineStyle='dashed'
-            >
-                {childrenHorizontal}
-            </SectionSeparator>
-            <Flex
-                inline="flex-container"
-                marginTop="lg"
-                vertical="stretch"
-            >
-                <FlexItem>
-                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
-                </FlexItem>
-                    <SectionSeparator
-                        orientation="vertical"
-                        {...props}
-                    >
-                        {childrenVertical}
-                    </SectionSeparator>
-                <FlexItem>
-                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
-                </FlexItem>
-            </Flex>
-        </>
-        
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        >
+            {children}
+        </SectionSeparator>
     )
 }
 

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -7,10 +7,7 @@
         <% end %>
     <% end %>
     <% if object.orientation === 'vertical' %>
-        <% if content %>
-            <%= content %>
-        <% elsif object.text %>
-            <span><%= pb_rails("caption", props: { text: object.text }) %></span>
+        <%= pb_rails("flex", props: { orientation: "column"}) do %>
         <% end %>
     <%end%>
 <% end %>