playbook_ui 14.6.2.pre.alpha.PLAY1551tiptapextbump4350 → 14.6.2.pre.alpha.PLAY1607dependencydisplayymlupdate4271

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2cc93bf2d7fe805d4a429a22e453f5b0611e6640c8c9412295200f19445acd3
-  data.tar.gz: 11093062f7f9caa106b2c805400f779b2f8413ff21cda0ddd3a3c063662ba94e
+  metadata.gz: 9eb2e0ae2d54d55dd2211f2ebf92d6dd1bbd037e0adce6ce449806e709f2e863
+  data.tar.gz: bfc0b7c42e262d18406574777f9888d207b991b42867a26dfd9096c2147223f2
 SHA512:
-  metadata.gz: 3e65ac77d1e95398832bfbe710db224b7e99f1042870f6915bc75a5673300b2f78916e89dd86991b0a379a37f2de5d81477c91a057c3855e3c574ed7816ea1ef
-  data.tar.gz: 4f88a4362e06630eb22a588539f5fb9d64b20d4e79fb57dac0443633ae4b22ed4e3516392580e52112cddaf10e56b9ffc207ec6d70d96556a8fc684c03dfe171
+  metadata.gz: 180f8ff481e73e8d6674edf80d1b5fb71bae90b5f6e45f18102b96afd726fc94e8e8519bcedc580d8e625bc0c0e4632ef54272902c7d89c78a33ed05bad9190f
+  data.tar.gz: 206c4da30889404db6bea0afce512fa0640b4cb7707e9072018acd0afdf0dd906e9c1f3df51a6982298d1f3f0e3c390d5ca700a46f4322c4215872ab4daba48c

data/app/pb_kits/playbook/_playbook.scss

@@ -30,7 +30,6 @@
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_draggable/draggable';
-@import 'pb_drawer/drawer';
 @import 'pb_dropdown/dropdown';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
@@ -55,7 +54,6 @@
 @import 'pb_legend/legend';
 @import 'pb_lightbox/lightbox';
 @import 'pb_line_graph/line_graph';
-@import 'pb_link/link';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
 @import 'pb_map/map';
@@ -108,6 +106,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import 'pb_drawer/drawer';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -28,7 +28,8 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
-  border-width: $pb_card_border_width * 2;
+  border-width: $pb_card_border_width;
+  outline: 1px solid $border_color;
 }
 
 @mixin pb_card_selected_dark {

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

@@ -26,7 +26,6 @@ type CurrencyProps = {
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
   unstyled?: boolean,
-  commaSeparator?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -54,7 +53,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variant = 'default',
     dark = false,
     unstyled = false,
-    commaSeparator = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
@@ -76,7 +74,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     className
   )
 
-  const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', {
+  const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
     notation: 'compact',
     maximumFractionDigits: 1,
   }).format(input)
@@ -90,20 +88,12 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
-  const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
+    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
-  const formatAmount = (amount: string) => {
-    if (!commaSeparator) return amount;
-    
-    const [wholePart, decimalPart] = amount.split('.');
-    const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
-    return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
-  }
-
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
-  const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
-  const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
+    getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
+    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
   return (
     <div

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

@@ -43,9 +43,6 @@ module Playbook
       prop :unstyled, type: Playbook::Props::Boolean,
                       default: false
 
-      prop :comma_separator, type: Playbook::Props::Boolean,
-                             default: false
-
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -68,7 +65,7 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : formatted_amount,
+          text: abbreviate ? abbreviated_value : whole_value,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -99,38 +96,28 @@ module Playbook
     private
 
       def whole_value
-        value = amount.split(".").first
-        if comma_separator
-          number_with_delimiter(value.gsub(",", ""))
-        else
-          value
-        end
+        return amount if decimals == "matching"
+
+        amount.split(".").first.to_s
       end
 
-      def decimal_value
-        amount.split(".")[1] || "00"
+      def abbreviated_value(index = 0..-2)
+        value = amount.split(".").first.split(",").join("")
+        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
+        abbreviated_num[index]
       end
 
       def units_element
         return "" if decimals == "matching" && !abbreviate && !unit
 
-        if unit.nil? && !abbreviate
-          if decimals == "matching"
-            ""
-          else
-            ".#{decimal_value}"
-          end
+        _, decimal_part = amount.split(".")
+        if unit.nil? && abbreviate == false
+          decimal_part.nil? ? ".00" : ".#{decimal_part}"
         else
           abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
         end
       end
 
-      def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.gsub(",", "").to_i
-        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
-        abbreviated_num[index]
-      end
-
       def size_value
         case size
         when "lg"
@@ -145,20 +132,6 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
-
-      def formatted_amount
-        return abbreviated_value if abbreviate
-
-        if decimals == "matching"
-          if comma_separator
-            number_with_delimiter(amount.gsub(",", ""))
-          else
-            amount
-          end
-        else
-          whole_value
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -61,38 +61,3 @@ test('decimals default prop returns decimals as body text', () => {
   expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320')
   expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20')
 })
-
-
-test('commaSeparator prop returns comma separated amount', () => {
-  render(
-    <Currency 
-        amount="1234567890"
-        commaSeparator
-        data={{ testid: 'comma-test' }}
-    />
-  )
-  expect(screen.getByTestId('comma-test')).toHaveTextContent('1,234,567,890')
-})
-
-test('commaSeparator prop returns comma separated amount with decimals', () => {
-  render(
-    <Currency 
-        amount="1234567890.12"
-        commaSeparator
-        data={{ testid: 'comma-test-decimals' }}
-    />
-  )
-  expect(screen.getByTestId('comma-test-decimals')).toHaveTextContent('1,234,567,890.12')
-})
-
-test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
-  render(
-    <Currency 
-        amount="1234567890.12"
-        commaSeparator
-        data={{ testid: 'comma-test-decimals-matching' }}
-        decimals="matching"
-    />
-  )
-  expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
-})

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

@@ -8,8 +8,7 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-  - currency_comma_separator: Comma Separator
-  
+
   react:
   - currency_variants: Variants
   - currency_size: Size
@@ -18,7 +17,6 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-  - currency_comma_separator: Comma Separator
 
   swift:
   - currency_size_swift: Size

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

@@ -5,4 +5,3 @@ 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'
-export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -10,24 +10,6 @@
 $pb_selectable_card_indicator_size: 22px;
 $pb_selectable_card_border: 2px;
 
-$pb_selectable_space_classes: (
-  xxs: $space_xxs,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-);
-$pb_selectable_paddings: (
-  p: "padding",
-  pr: "padding-right",
-  pl: "padding-left",
-  pt: "padding-top",
-  pb: "padding-bottom",
-  px: ("padding-left", "padding-right"),
-  py: ("padding-top", "padding-bottom")
-);
-
 [class^=pb_selectable_card_kit] {
   display: block;
   margin-bottom: 0;
@@ -46,6 +28,7 @@ $pb_selectable_paddings: (
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
+    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -91,7 +74,6 @@ $pb_selectable_paddings: (
 
         position: relative;
         @include pb_card_selected;
-        padding: calc(#{$space_sm} - 1px);
         transition-property: none;
         transition-duration: 0s;
 
@@ -106,54 +88,6 @@ $pb_selectable_paddings: (
           background-color: $royal;
         }
       }
-
-      // Selected card has 1px more border
-      // Remove 1px so content does not "jump"
-      @each $position_name,
-      $position in $pb_selectable_paddings {
-        @each $space_name,
-        $space in $pb_selectable_space_classes {
-          ~ label.#{$position_name}_#{$space_name} {
-            @if type-of($position)=="list" {
-              @each $coordinate in $position {
-                #{$coordinate}: calc(#{$space} - 1px) !important;
-              }
-            }
-
-            @else {
-              #{$position}: calc(#{$space} - 1px) !important;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.display_input {
-    input[type="checkbox"],
-    input[type="radio"] {
-      &:checked {
-        ~label {
-          border-width: $pb_card_border_width;
-          outline: 1px solid $primary;
-        }
-
-      }
-    }
-
-    > label {
-      outline: 1px solid transparent;
-      padding: $space_sm;
-    }
-
-    &.dark {
-      input[type="checkbox"],
-      input[type="radio"] {
-        &:checked ~ label {
-          border-width: $pb_card_border_width;
-          outline: 1px solid $primary;
-        }
-      }
     }
   }
 

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -67,7 +67,6 @@ const SelectableCard = (props: SelectableCardProps) => {
       'disabled': disabled,
       'enabled': !disabled,
     }),
-  variant === 'displayInput' ? 'display_input' : '',
   { error },
   dark ? 'dark' : '',
   className

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -25,7 +25,7 @@
           <% end %>
           <div class="separator"></div>
           <div class="psuedo_separator"></div>
-          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -25,7 +25,7 @@ module Playbook
 
       def classname
         [
-          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class) + display_input_class,
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
           error_class,
           dark_props,
         ].compact.join(" ")
@@ -79,10 +79,6 @@ module Playbook
       def error_class
         error ? "error" : nil
       end
-
-      def display_input_class
-        variant == "display_input" ? " display_input" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,5 +1,3 @@
-@import "../tokens/colors";
-
 $font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
@@ -53,36 +51,3 @@ $boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
 $lighter:       300 !default;
-
-/* Link Colors */
-$pb_link_colors: (
-  default:        $primary_action,
-  body:           $text_lt_default,
-  muted:          $text_lt_light,
-  destructive:    $error,
-);
-
-$pb_link_hover_colors: (
-  default:        $text_lt_default,
-  body:           $primary_action,
-  muted:          $text_lt_default,
-  destructive:    $text_lt_default,
-);
-
-$pb_dark_link_colors: (
-  default:        $active_dark,
-  body:           $text_dk_default,
-  muted:          $text_dk_light,
-  destructive:    $error_dark,
-);
-
-$pb_dark_link_hover_colors: (
-  default:        $text_dk_default,
-  body:           $active_dark,
-  muted:          $text_dk_default,
-  destructive:    $text_dk_default,
-);
-
-@mixin pb_link($color: $primary_action) {
-  color: $color;
-}