playbook_ui 14.6.2.pre.alpha.PLAY1550lazysizesupgrade4257 → 14.6.2.pre.alpha.PLAY1551tiptapextbump4350

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e6f25dbb802acbe4ebc8b0c64be30a70c0c016e1e92bc48a3bea1c9af79811b
-  data.tar.gz: 323b5622e07a7e57a53e4b1f838e1992f37e3fd3deed63ae783abbc6a75fa87c
+  metadata.gz: c2cc93bf2d7fe805d4a429a22e453f5b0611e6640c8c9412295200f19445acd3
+  data.tar.gz: 11093062f7f9caa106b2c805400f779b2f8413ff21cda0ddd3a3c063662ba94e
 SHA512:
-  metadata.gz: c5b1a0e10528a0be92d59fa355c3f6095c49c68a3a93b29675d7b861ca9fff6d869c5a21d5ff7469d5843f2e70ff8c95b10b67306d8b375b7eb0cc176e43946b
-  data.tar.gz: 2e077da285aae77b5cc7e6a4856bc44f939cf674d91fb07309aed16b7ad98bb833641272338a4dda380cb8ff9a9d465b91e90aac12a14265520234471a691c5a
+  metadata.gz: 3e65ac77d1e95398832bfbe710db224b7e99f1042870f6915bc75a5673300b2f78916e89dd86991b0a379a37f2de5d81477c91a057c3855e3c574ed7816ea1ef
+  data.tar.gz: 4f88a4362e06630eb22a588539f5fb9d64b20d4e79fb57dac0443633ae4b22ed4e3516392580e52112cddaf10e56b9ffc207ec6d70d96556a8fc684c03dfe171

data/app/pb_kits/playbook/_playbook.scss

@@ -30,6 +30,7 @@
 @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';
@@ -54,6 +55,7 @@
 @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';
@@ -106,7 +108,6 @@
 @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,8 +28,7 @@ $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;
-  outline: 1px solid $border_color;
+  border-width: $pb_card_border_width * 2;
 }
 
 @mixin pb_card_selected_dark {

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

@@ -26,6 +26,7 @@ type CurrencyProps = {
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
   unstyled?: boolean,
+  commaSeparator?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -53,6 +54,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variant = 'default',
     dark = false,
     unstyled = false,
+    commaSeparator = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
@@ -74,7 +76,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)
@@ -88,12 +90,20 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
-    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
+  const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
-    getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
-    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
+  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
 
   return (
     <div

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

@@ -43,6 +43,9 @@ 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
@@ -65,7 +68,7 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : whole_value,
+          text: abbreviate ? abbreviated_value : formatted_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -96,28 +99,38 @@ module Playbook
     private
 
       def whole_value
-        return amount if decimals == "matching"
-
-        amount.split(".").first.to_s
+        value = amount.split(".").first
+        if comma_separator
+          number_with_delimiter(value.gsub(",", ""))
+        else
+          value
+        end
       end
 
-      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]
+      def decimal_value
+        amount.split(".")[1] || "00"
       end
 
       def units_element
         return "" if decimals == "matching" && !abbreviate && !unit
 
-        _, decimal_part = amount.split(".")
-        if unit.nil? && abbreviate == false
-          decimal_part.nil? ? ".00" : ".#{decimal_part}"
+        if unit.nil? && !abbreviate
+          if decimals == "matching"
+            ""
+          else
+            ".#{decimal_value}"
+          end
         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"
@@ -132,6 +145,20 @@ 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,3 +61,38 @@ 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/_currency_comma_separator.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("currency", props: {
+  amount: '1234567.89',
+  comma_separator: true,
+  size: 'lg',
+  emphasized: false,
+  decimals: 'matching',
+}) %>

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

@@ -0,0 +1,18 @@
+import React from "react"
+
+import Currency from "../_currency"
+
+const CurrencyCommaSeparator = (props) => {
+  return (
+    <Currency
+        amount='1234567.89'
+        commaSeparator
+        decimals="matching"
+        emphasized={false}
+        size="lg"
+        {...props}
+    />
+  )
+}
+
+export default CurrencyCommaSeparator

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

@@ -0,0 +1,3 @@
+The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator. 
+
+**NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.

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

@@ -8,7 +8,8 @@ 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
@@ -17,6 +18,7 @@ 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,3 +5,4 @@ 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_link/_link.scss

@@ -0,0 +1,66 @@
+@import "../tokens/colors";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+@import "../tokens/border_radius";
+
+[class^=pb_link_kit]{
+  @include pb_link($primary);
+  &:hover {
+    color: $text_lt_default;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    border-radius: $border_rad_light;
+    outline: 1px solid $primary;
+    outline-offset: 2px;
+  }
+  &:visited {
+    color: $data_3;
+  }
+  &.dark  {
+    @include pb_link($active_dark);
+    &:hover {
+      color: $text_dk_default;
+    }
+  }
+  @each $color_name, $color_value in $pb_link_colors {
+    &[class*=_#{"" + $color_name}] {
+      @include pb_link($color_value);
+
+      &:hover {
+        color: map-get($pb_link_hover_colors, $color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  @each $dark_color_name, $dark_color_value in $pb_dark_link_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_link($dark_color_value);
+      
+      &:hover {
+        color: map-get($pb_dark_link_hover_colors, $dark_color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  &[class*=_underline] {
+    text-decoration: underline;
+  }
+
+  &[class*=_disabled] {
+    pointer-events: none;
+    cursor: default;
+    color: $text_lt_lighter;
+  }
+
+}

data/app/pb_kits/playbook/pb_link/_link.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+import Icon from '../pb_icon/_icon'
+
+type LinkProps = {
+  aria?: {[key: string]: string},
+  className?: string,
+  children?: React.ReactChild[] | React.ReactChild,
+  color?: 'default' | 'body' | 'muted' | 'destructive',
+  dark?: boolean,
+  data?: {[key: string]: string},
+  disabled?: boolean,
+  href?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
+  icon?: string,
+  iconRight?: string,
+  id?: string,
+  tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  text?: string,
+  underline?: boolean,
+} & GlobalProps
+
+const Link = (props: LinkProps): React.ReactElement => {
+  const {
+    aria = {},
+    children,
+    className,
+    color = '',
+    data = {},
+    disabled = false,
+    href= '',
+    htmlOptions = {},
+    icon = '',
+    iconRight = '',
+    id = '',
+    tag = 'a',
+    text = '',
+    underline = false,
+  } = props
+
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss('pb_link_kit', color, underline ? 'underline' : '', disabled ? 'disabled' : ''),
+    globalProps(props),
+    className
+  )
+  const Tag = tag as keyof JSX.IntrinsicElements
+
+  const renderContent = () => (
+    <>
+      {icon && (
+        <Icon
+            fixedWidth
+            icon={icon}
+            marginRight="xxs"
+            size="xs"
+        />
+      )}
+      {text || children}
+      {iconRight && (
+        <Icon
+            fixedWidth
+            icon={iconRight}
+            marginLeft="xxs"
+            size="xs"
+        />
+      )}
+    </>
+  )
+
+  const commonProps = {
+    ...ariaProps,
+    ...dataProps,
+    ...htmlProps,
+    className: classes,
+    id,
+  }
+
+  if (tag === 'a') {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        {renderContent()}
+      </a>
+    )
+  } else {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        <Tag>{renderContent()}</Tag>
+      </a>
+    )
+  }
+
+}
+
+export default Link

data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb

@@ -0,0 +1,30 @@
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.google.com/search?q=playbook+design+system",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.youtube.com/@PowerHRG",
+    color: "body",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
+    color: "muted",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://rubygems.org/gems/playbook_ui/",
+    color: "destructive",
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkColor = (props) => (
+  <div>
+    <div>
+      <Link
+          href="https://www.google.com/search?q=playbook+design+system"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="body"
+          href="https://www.youtube.com/@PowerHRG"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="muted"
+          href="https://github.com/powerhome/.github/blob/main/profile/README.md"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="destructive"
+          href="https://rubygems.org/gems/playbook_ui/"
+          text="link example"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkColor

data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("link", props: {
+  text: "link example",
+  href: "#disabled",
+  disabled: true,
+}) %>

data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkDisabled = (props) => (
+  <div>
+    <Link
+        disabled
+        href="#disabled"
+        text="link example"
+        {...props}
+    />
+  </div>
+)
+
+export default LinkDisabled

data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb

@@ -0,0 +1,15 @@
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "#icon",
+    icon: "arrow-up-right-from-square",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "#icon2",
+    icon_right: "chevron-right",
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkIcon = (props) => (
+  <div>
+    <div>
+      <Link
+          href="#icon"
+          icon="arrow-up-right-from-square"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          href="#icon2"
+          iconRight="chevron-right"
+          text="link example"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkIcon

data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb

@@ -0,0 +1,35 @@
+<%= pb_rails("link", props: {
+  text: "h1 link example",
+  href: "#tag",
+  icon: "arrow-up-right-from-square",
+  tag: "h1",
+}) %>
+
+<%= pb_rails("link", props: {
+  text: "h3 link example",
+  href: "#tag2",
+  tag: "h3",
+  underline: true,
+}) %>
+
+<%= pb_rails("link", props: {
+  color: "destructive",
+  text: "h6 link example",
+  href: "#tag3",
+  tag: "h6",
+}) %>
+
+<%= pb_rails("link", props: {
+  text: "p link example",
+  href: "#tag4",
+  icon_right: "chevron-right",
+  tag: "p",
+}) %>
+
+<div>
+  This is a <%= pb_rails("link", props: {
+    text: "span link example",
+    href: "#tag5",
+    tag: "span",
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkTag = (props) => (
+  <div>
+    <Link
+        href="#tag"
+        icon="arrow-up-right-from-square"
+        tag="h1"
+        text="h1 link example"
+        {...props}
+    />
+    <Link
+        href="#tag2"
+        tag="h3"
+        text="h3 link example"
+        underline
+        {...props}
+    />
+    <Link
+        color="destructive"
+        href="#tag3"
+        tag="h6"
+        text="h6 link example"
+        {...props}
+    />
+    <Link
+        href="#tag4"
+        iconRight="chevron-right"
+        tag="p"
+        text="p link example"
+        {...props}
+    />
+    <div>
+      This is a <Link
+          href="#tag5"
+          tag="span"
+          text="span link example"
+          {...props}
+    />
+    </div>
+  </div>
+)
+
+export default LinkTag

data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("link", props: {
+  text: "link example",
+  href: "#underline",
+  underline: true,
+}) %>