playbook_ui 13.7.0 → 13.8.0.pre.alpha.PLAY1016reactionbuttonemojibug1245

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5dffdd70d846131d41ca730751f18ecbd3d6c3134227d8e49b4c1ba931102b71
-  data.tar.gz: f07f7e9cdda6731abe606f2852f184249d6f75fa169632475465938d240bd268
+  metadata.gz: ffbc0de9897a5a39191f65def3ab36d7a9addfba0d1aadafaeafdd49e46cf125
+  data.tar.gz: 812f051276f0e616e9840dbcf2e974c2ac674edf2c40be72a3a104f8c201b652
 SHA512:
-  metadata.gz: d8aa40e8d0cc14a4843042766358101dacf51d3e595f8a3681c3fec77b24b97b5d6e4c01ae5c61b50ddb1b78b23fed71d6fe6a5b2e3b4b4066ad3a36cb444cc0
-  data.tar.gz: 3bc73db4617eb2169732d48e3bcabf5a59d4300d59d4d9b0419685dff5c4729c0441ffe2a08e625db6de3aa4121c0dfd06faf69d958845f0aec945f8e62bbff4
+  metadata.gz: 570df4d72fdec4376ef4e899e71513012e3653c8ec926b91029f143f3c439dba769fd2840cb6be745ad85dfc835a00a0a39f54c1ead9e576d8dea3443ecd03c4
+  data.tar.gz: f5740a5b50db2488cd4c932c00fd5b8324dad33bb6a67daf61a3d10e51b0e0c14fac249fd4d745b2c4dbb067b780111897fd561b9943e7047e2d1c95d97836df

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -40,7 +40,7 @@ type ButtonPropTypes = {
 
 const isValidEmoji = (emoji: string) => {
   // Using regular expression to check if the string is a valid emoji/emoji Unicode
-  const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
+  const emojiRegex = /^(\p{Emoji}|\uFE0F|\u200D|\u20E3)+$/u;
   return emojiRegex.test(emoji);
 };
 

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("button", props: { count: 153, highlight: false, icon: "&#127881;", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
-<%= pb_rails("button", props: { count: 5, icon: "😍", variant: "reaction", margin_left: "lg" }) %>
+<%= pb_rails("button", props: { count: 5, icon: "1️⃣", variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %>
 

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -19,7 +19,7 @@ return (
     />
     <Button
         count={5}
-        icon="😍"
+        icon="1️⃣"
         marginLeft='lg'
         tabIndex={0}
         variant="reaction"

data/app/pb_kits/playbook/pb_currency/_currency.scss

@@ -1,4 +1,3 @@
-
 [class^=pb_currency_kit] {
   &[class*=_center]  {
     & > [class^=pb_caption],
@@ -21,30 +20,43 @@
       justify-content: flex-end;
     }
   }
+
   [class^=pb_currency_wrapper] {
     display: flex;
     align-items: baseline;
 
-    &[class*=_deemphasized] [class^=pb_body_kit][class*=_light] {
-      color: $text_lt_default;
-    }
+    &[class*=_deemphasized] {
+      [class^=pb_body_kit], [class^=pb_body_kit] {
+        &:not([class*=dark]) {
+          color: $text_lt_default;
+        }
+      }
 
-    &[class*=_deemphasized] [class^=pb_title_kit][class*=_4] {
-      font-weight: $regular;
-    }
+      [class^=pb_body_kit][class*=_light] {
+        font-weight: $regular;
+      }
 
-    &[class*=_light] [class^=pb_body_kit][class*=_light] {
-      color: $text_lt_light;
+      [class^=pb_title_kit] {
+        font-weight: $lighter;
+      }
     }
 
-    &[class*=_light] [class^=pb_title_kit][class*=_4] {
-      color: $text_lt_light;
-      font-weight: $regular;
+    &[class*=_light] {
+      [class^=pb_body_kit], [class^=pb_title_kit] {
+        color: $text_lt_light;
+        font-weight: $regular;
+      }
+
+      [class^=pb_title_kit].dark {
+        color: $text_dk_light;
+      }
     }
 
-    &[class*=_bold] [class^=pb_body_kit][class*=_light] {
-      color: $text_lt_default;
-      font-weight: $bolder;
+    &[class*=_bold] {
+      [class^=pb_body_kit], [class^=_light]{
+        color: $text_lt_default;
+        font-weight: $bolder;
+      }
     }
 
     & > [class*=dollar_sign] {
@@ -57,6 +69,14 @@
     }
   }
 
+  &[class*=_sm] {
+    [class^=pb_currency_wrapper][class*=_deemphasized] {
+      [class^=pb_title_kit] {
+        font-weight: $regular;
+      }
+    }
+  }
+
   &[class*=_lg] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
     line-height: .9;
     padding-left: $space_xs - 7px;

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -24,6 +24,7 @@ type CurrencyProps = {
   symbol?: string,
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
+  unstyled?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -49,17 +50,16 @@ const Currency = (props: CurrencyProps) => {
     symbol = '$',
     variant = 'default',
     dark = false,
+    unstyled = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
 
   let variantClass
-  if (size === 'sm') {
-    if (variant === 'light') {
-      variantClass = '_light'
-    } else if (variant === 'bold') {
-      variantClass = '_bold'
-    }
+  if (variant === 'light') {
+    variantClass = '_light'
+  } else if (variant === 'bold') {
+    variantClass = '_bold'
   }
 
   const [whole, decimal = '00'] = amount.split('.')
@@ -99,44 +99,46 @@ const Currency = (props: CurrencyProps) => {
         className={classes}
         id={id}
     >
-      <Caption>{label}</Caption>
+      <Caption dark={dark}>{label}</Caption>
 
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
-        <Body
-            className="dollar_sign"
-            color="light"
-            dark={dark}
-        >
-          {symbol}
-        </Body>
-
-        <Title
-            className="pb_currency_value"
-            dark={dark}
-            size={sizes[size]}
-        >
-          {getAmount}
-        </Title>
-
-        <Body
-            className="unit"
-            color="light"
-            dark={dark}
-        >
-          {getAbbreviation}
-          {
-            unit ? (
-              <>
-              {unit}
-              </>
-            ) : (
-              <>
-              {getDecimalValue}
-              </>
-            )
-          }
-          
-        </Body>
+        {unstyled ? (
+          <>
+            <div>{symbol}</div>
+            <div>{getAmount}</div>
+            <div>
+              {getAbbreviation}
+              {unit ? unit : getDecimalValue}
+            </div>
+          </>
+        ) : (
+          <>
+            <Body
+                className="dollar_sign"
+                color="light"
+                dark={dark}
+            >
+              {symbol}
+            </Body>
+
+            <Title
+                className="pb_currency_value"
+                dark={dark}
+                size={sizes[size]}
+            >
+              {getAmount}
+            </Title>
+
+            <Body
+                className="unit"
+                color="light"
+                dark={dark}
+            >
+              {getAbbreviation}
+              {unit ? unit : getDecimalValue}
+            </Body>
+          </>
+        )}
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -3,13 +3,19 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= pb_rails("caption", props: { text: object.label }) %>
+  <%= pb_rails("caption", props: object.caption_props) %>
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
-    <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-      <%= object.symbol %>
+    <% if object.unstyled %>
+      <div><%= object.symbol %></div>
+      <div><%= object.title_props[:text] %></div>
+      <div><%= object.body_props[:text] %></div>
+    <% else %>
+      <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+        <%= object.symbol %>
+      <% end %>
+      <%= pb_rails("title", props: object.title_props) %>
+      <%= pb_rails("body", props: object.body_props) %>
     <% end %>
-    <%= pb_rails("title", props: object.title_props) %>
-    <%= pb_rails("body", props: object.body_props) %>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -40,6 +40,9 @@ module Playbook
                       values: %w[default matching],
                       default: "default"
 
+      prop :unstyled, type: Playbook::Props::Boolean,
+                      default: false
+
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -52,6 +55,13 @@ module Playbook
         }
       end
 
+      def caption_props
+        {
+          text: label,
+          dark: dark,
+        }
+      end
+
       def title_props
         {
           size: size_value,
@@ -75,8 +85,6 @@ module Playbook
       end
 
       def variant_class
-        return unless size == "sm"
-
         case variant
         when "light"
           "_light"

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("currency", props: {
+  amount: "2,000.50",
+  label: "Basic unstyled example",
+  margin_bottom: "md",
+  unstyled: true
+}) %>
+
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("currency", props: {
+    amount: "2,000.50",
+    label: "Example with wrapping typography kit",
+    unstyled: true
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Currency, Title } from '../..'
+
+const CurrencyUnstyled = (props) => {
+  return (
+    <>
+      <Currency
+          amount="2,000.50"
+          label="Basic unstyled example"
+          marginBottom="md"
+          unstyled
+          {...props}
+      />
+
+      <Title
+          size={1}
+          {...props}
+      >
+        <Currency
+            amount="2,000.50"
+            label="Example with wrapping typography kit"
+            unstyled
+            {...props}
+        />
+      </Title>
+    </>
+  )
+}
+
+export default CurrencyUnstyled

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md

@@ -0,0 +1 @@
+For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Currency` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Currency` kit to inherit any of our typography styles.

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -13,12 +13,13 @@
   size: "sm",
   symbol: "€",
   variant: "light",
+  emphasized: false,
 }) %>
 
 <%= pb_rails("currency", props: {
   amount: "45",
   label: "Bold",
-  size: "lg",
+  size: "sm",
   unit: "/mo",
   variant: "bold",
 }) %>

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

@@ -7,6 +7,7 @@ examples:
   - currency_no_symbol: No Symbol
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
+  - currency_unstyled: Unstyled
 
   react:
   - currency_variants: Variants
@@ -15,3 +16,4 @@ examples:
   - currency_no_symbol: No Symbol
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
+  - currency_unstyled: Unstyled

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

@@ -4,3 +4,4 @@ export { default as CurrencyAlignment } from './_currency_alignment.jsx'
 export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
+export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'

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

@@ -106,7 +106,7 @@ const Icon = (props: IconProps) => {
 
   const isValidEmoji = (emoji: string) => {
     // Using regular expression to check if the string is a valid emoji/emoji Unicode
-    const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
+    const emojiRegex = /^(\p{Emoji}|\uFE0F|\u200D|\u20E3)+$/u;
     return emojiRegex.test(emoji);
   };
 

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

@@ -12,6 +12,7 @@ import { Spacing } from "../types";
 
 type NavItemProps = {
   active?: boolean;
+  highlighted_border?: boolean;
   aria?: { [key: string]: string };
   fontWeight?: "regular" | "bold" | "bolder";
   children?: React.ReactNode[] | React.ReactNode;
@@ -44,7 +45,7 @@ type NavItemProps = {
 } & GlobalProps;
 
 const NavItem = (props: NavItemProps) => {
-  
+
   const fontWeightDefault = (orientation: string, variant: string) => {
     return orientation === "horizontal" && variant === "subtle"
       ? "regular"
@@ -55,6 +56,7 @@ const NavItem = (props: NavItemProps) => {
 
   const {
     active = false,
+    highlighted_border = true,
     aria = {},
     orientation,
     variant,
@@ -97,7 +99,7 @@ const NavItem = (props: NavItemProps) => {
     marginY,
   };
 
-//separate margin props and padding props  in itemSpacing object 
+//separate margin props and padding props  in itemSpacing object
 const filterItemSpacing = (obj: { [key: string]: string }) => {
   const filteredPadding: { [key: string]: string } = {};
   const filteredMargin: { [key: string]: string } = {};
@@ -114,7 +116,7 @@ const filterItemSpacing = (obj: { [key: string]: string }) => {
 //deconstruct itemSpacing
 const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
-//if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence 
+//if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence
   const finalItemSpacing = {
     ...(filteredMargin || {}),
     ...Object.entries(spacingMarginProps).reduce((acc: any, [prop, value]) => {
@@ -138,19 +140,20 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
   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" : "";
 
   const fontSizeMapping = {
     "small": "font_size_small",
     "normal": "font_size_normal"
   };
-    
+
   const fontWeightMapping = {
     "bold": "font_bold",
     "bolder": "font_bolder",
     "regular": "font_regular"
   };
-    
+
   const fontSizeClass = fontSizeMapping[fontSize];
   const fontWeightClass = fontWeightMapping[fontWeight];
 
@@ -162,9 +165,9 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   );
 
   const classes = classnames(
-    buildCss("pb_nav_list_kit_item", activeClass),
+    buildCss("pb_nav_list_kit_item", activeClass, highlightedBorderClass),
     collapsible
-      ? buildCss("pb_collapsible_nav_item", activeClass)
+      ? buildCss("pb_collapsible_nav_item", activeClass, highlightedBorderClass)
       : "",
     fontSizeClass,
     fontWeightClass,
@@ -192,7 +195,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
     return child;
   });
 
-  const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, collapsibleTrailClass)
+  const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
   return (
     <>
@@ -207,7 +210,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             onIconClick={onIconRightClick}
             onClick={onClick}
           >
-            <Collapsible.Main 
+            <Collapsible.Main
             className={globalProps({ ...finalItemSpacing })}
             dark={dark}>
               <Tag

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

@@ -6,6 +6,8 @@ import NavItem from './_item'
 
 const navTestId = 'nav'
 const itemTestId = 'item'
+const activeTestBorderlessId = 'activeborderless'
+const activeTestBorderId = 'active'
 const navClassName = 'custom-class-name-nav'
 const itemClassName = 'custom-class-name-item'
 const navTitle = 'Menu'
@@ -35,6 +37,14 @@ const NavDefault = (props) => {
             />
             <NavItem
                 active
+                data={{ testid: activeTestBorderId }}
+                link="#"
+                text="Video"
+            />
+            <NavItem
+                active
+                data={{ testid: activeTestBorderlessId }}
+                highlighted_border={false}
                 link="#"
                 text="Video"
             />
@@ -70,6 +80,18 @@ test('should render title', () => {
     expect(kit).toBeInTheDocument()
 })
 
+test('should have a left border', () => {
+    render(<NavDefault iconRight="angle-down" />)
+    const kit = screen.getByTestId(activeTestBorderId)
+    expect(kit).toContainHTML('pb_nav_list_kit_item_active')
+})
+
+test('should not have a left border', () => {
+    render(<NavDefault iconRight="angle-down" />)
+    const kit = screen.getByTestId(activeTestBorderlessId)
+    expect(kit).toContainHTML('pb_nav_list_kit_item_active_highlighted_border_none')
+})
+
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
@@ -80,4 +102,4 @@ test('should have a left icon', () => {
     render(<NavDefault iconLeft="users-class" />)
     const kit = screen.getByTestId(itemTestId)
     expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
-})
+})

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

@@ -41,5 +41,11 @@
       color: $primary;
       letter-spacing: normal;
     }
+    &[class*="dark"] {
+      [class*="_item_text"],
+      [class*="_item_icon"] {
+        color: $white !important;
+      }    
+    } 
   }
 }

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

@@ -22,6 +22,9 @@ $selector: ".pb_nav_list";
       border-bottom: 1px solid $border_light;
       &[class*="_active"] {
         border-left-color: $primary !important;
+        &[class*="_highlighted_border_none"] {
+          border-left-width: 0px !important;
+        }
         [class*="_item_icon"] {
           color: $primary !important;
         }

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

@@ -10,6 +10,7 @@ module Playbook
       prop :font_weight, type: Playbook::Props::Enum,
                          values: %w[bold regular bolder],
                          default: "regular"
+      prop :highlighted_border, type: Playbook::Props::Boolean, default: true
       prop :collapsible, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
@@ -22,9 +23,9 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
+          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
         else
-          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
+          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
         end
       end
 
@@ -96,6 +97,10 @@ module Playbook
         active ? "active" : nil
       end
 
+      def highlighted_border_class
+        !highlighted_border && active ? "highlighted_border_none" : nil
+      end
+
       def font_weight_class
         case font_weight
         when "bold"

data/app/pb_kits/playbook/pb_table/styles/_table_header.scss

@@ -24,6 +24,7 @@ $text_align_values: (
 .pb_th_link:hover {
   background-color: rgba($primary, 0.03);
   color: $primary !important;
+  border-radius: $border_radius_md;
 }
 
 .pb_th_link, .pb_th_nolink{
@@ -38,13 +39,12 @@ $text_align_values: (
   }
 }
 
-[class*="pb_table_header_dropdown"][class*="_vertical"] {
-  &[class*="_normal"] {
-    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
-      &[class*="_link"] {
-        border-left-width: 0px;
-        background-color: #fff !important;
-      }
-    }
-  }
+.header_last_item {
+  border-bottom-left-radius: $border_radius_md;
+  border-bottom-right-radius: $border_radius_md;
+}
+
+.header_first_item {
+  border-top-left-radius: $border_radius_md;
+  border-top-right-radius: $border_radius_md;
 }

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -28,8 +28,16 @@
                                       position: object.placement ,
                                       padding: 'none'}) do %>
         <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_menu.each do |item| %>
-            <%= pb_rails("nav/item", props: { text: item[:item], link: item[:link], icon_right: sort_icon(item[:direction], item[:active]), active: item[:active] }) %>
+          <% object.sort_menu.each_with_index do |item, index| %>
+            <%= pb_rails("nav/item", props: {
+              text: item[:item],
+              link: item[:link],
+              highlighted_border: false,
+              padding: "xs",
+              icon_right: sort_icon(item[:direction], item[:active]),
+              active: item[:active],
+              classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
+            }) %>
           <% end %>
         <% end %>
       <% end %>