RubyGems - playbook_ui - Versions diffs - 13.7.0 → 13.8.0 - Mend

playbook_ui 13.7.0 → 13.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5dffdd70d846131d41ca730751f18ecbd3d6c3134227d8e49b4c1ba931102b71
-  data.tar.gz: f07f7e9cdda6731abe606f2852f184249d6f75fa169632475465938d240bd268
+  metadata.gz: d2eca7c20f8832218f6db41d2723db43b2350e59a7aad8334da3931c3c0bbb1a
+  data.tar.gz: ebc310683144bfef85d081ceb97d118a34974f77e172999fdbb448abaf30291b
 SHA512:
-  metadata.gz: d8aa40e8d0cc14a4843042766358101dacf51d3e595f8a3681c3fec77b24b97b5d6e4c01ae5c61b50ddb1b78b23fed71d6fe6a5b2e3b4b4066ad3a36cb444cc0
-  data.tar.gz: 3bc73db4617eb2169732d48e3bcabf5a59d4300d59d4d9b0419685dff5c4729c0441ffe2a08e625db6de3aa4121c0dfd06faf69d958845f0aec945f8e62bbff4
+  metadata.gz: bf3e81b0e87cdb87c08ccff73734d1f1f29eb854d1472fcbef22a366529a6a8c94c4fd0951d4d21f053b1114e84bad839bc90a062c30a15caa3c70f98185da1b
+  data.tar.gz: 160a1bcfea2ba6353e6d0469fb9884deb3d28628063fad41bb7e1a2c5e92bac0d7ee45e4e78ab27e14b4b6e5bd584cba1ff3134e74b444064624b25533a5c73b

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_nav/_item.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 %>