playbook_ui 15.5.0.pre.rc.1 → 15.5.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 276511bfc08ac08b02c5ad4e4103f77ac5017d5474c703462ed7e7613bbf4a9e
-  data.tar.gz: 7e2fa23a33a5b37027509a133754fee3b33a8437a44ededb57bcd7fe6c59438c
+  metadata.gz: 66aaf83aa51cc7b34eda01ce9d1f8fbb8f2ec256a8fdc3b08d1172e50a8f33ee
+  data.tar.gz: d4fdcd781745a389240cfe5ca5e7ecad0467ecf25805c13ccfa9dfc7b88c5a88
 SHA512:
-  metadata.gz: a4476dab22e2daa8181c926d0ad86b6d2f1c14956a869e61845e7dda271b6612d1838d78c183d254b80dc931b3274d19b7c0e85e62356aa495ba5790a0071e7b
-  data.tar.gz: 8bd4331e0a0ec10ee5fb2426f69ff5dac9405f59153617faaa76b81f15a7188b59fc31819b4ed63ce287f2741bd50915bf48c7ba4b27a7866fd535a2d96a08ee
+  metadata.gz: 45f0cb1b2ee375e8614fb7fd010e4393ddfd61edd905c55bd5c96b5d6aef34a7a4636be20249cec17418430410193fbe2ee81966fc71fdf09b5edc985863a601
+  data.tar.gz: 366a44951a860c7e3dee437c2e07a94b94bc7098837e19f9b665e7939fd053067fd443e0abd382c8d61477460dac259c574dad30419fbeb431616322d3632f78

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -5,6 +5,7 @@ import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
+import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
 
 import usePBCopy from './usePBCopy'
 
@@ -18,6 +19,7 @@ type CopyButtonProps = {
   tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
   tooltipText?: string
   value?: string
+  variant?: 'button' | 'icon'
   timeout?: number
 }
 
@@ -28,11 +30,12 @@ const CopyButton = (props: CopyButtonProps) => {
     data = {},
     from = '',
     id,
-    text= 'Copy',
+    text = 'Copy',
     timeout = 1000,
-    tooltipPlacement= 'bottom',
+    tooltipPlacement = 'bottom',
     tooltipText = 'Copied!',
     value = '',
+    variant = 'button',
   } = props
 
   const [copied, copy] = usePBCopy({ value, from, timeout })
@@ -42,7 +45,8 @@ const CopyButton = (props: CopyButtonProps) => {
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
   return (
-    <div {...ariaProps}
+    <div 
+        {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
@@ -53,11 +57,20 @@ const CopyButton = (props: CopyButtonProps) => {
           showTooltip={false}
           text={tooltipText}
       >
-        <Button icon="copy"
-            onClick={copy}
-        >
-          {text}
-        </Button>
+        {variant === 'icon' ? (
+          <CircleIconButton 
+              icon="copy" 
+              onClick={copy} 
+              variant="link" 
+          />
+        ) : (
+          <Button 
+              icon="copy"
+              onClick={copy}
+          >
+            {text}
+          </Button>
+        )}
       </Tooltip>
     </div>
   )

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_icon_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import CopyButton from '../../pb_copy_button/_copy_button'
+import Textarea from '../../pb_textarea/_textarea'
+
+const CopyIconVariant = (props) => (
+  <div>
+    <CopyButton
+        {...props}
+        text="Copy Text"
+        tooltipPlacement="right"
+        tooltipText="Text copied!"
+        value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
+        variant="icon"
+    />
+
+    <Textarea
+        {...props}
+        placeholder="Copy and paste here"
+    />
+  </div>
+)
+
+export default CopyIconVariant

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_icon_variant_react.md

@@ -0,0 +1 @@
+Pass in `variant="icon"` to replace the Button with the Circle Icon Button kit.

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

@@ -8,3 +8,4 @@ examples:
   - copy_button_default: Default
   - copy_button_from: Copy From
   - copy_button_hook: Copy Hook
+  - copy_button_icon_variant: Icon Variant

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

@@ -1,3 +1,4 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
 export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
 export { default as CopyButtonHook } from './_copy_button_hook.jsx'
+export { default as CopyButtonIconVariant } from './_copy_button_icon_variant.jsx'

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

@@ -0,0 +1 @@
+Abbreviate larger amounts into thousands (K), millions (M), billions (B), and even trillions (T). 

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

@@ -0,0 +1 @@
+Use `decimals: "matching"` when you want the full decimal amount displayed as a single number rather than split visually.

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

@@ -0,0 +1 @@
+Use `decimals="matching"` when you want the full decimal amount displayed as a single number rather than split visually.

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

@@ -1,4 +1,14 @@
 <%= pb_rails("currency", props: {
   amount: "-2,000.50",
   size: "sm",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "-2,000.50",
+  size: "md",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "-2,000.50",
+  size: "lg",
 }) %>

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

@@ -9,6 +9,16 @@ const CurrencyNegative = (props) => {
           amount="-2,000.50"
           {...props}
       />
+      <Currency
+          amount="-2,000.50"
+          size="md"
+          {...props}
+      />
+      <Currency
+          amount="-2,000.50"
+          size="lg"
+          {...props}
+      />
     </>
   )
 }

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

@@ -0,0 +1 @@
+Small `Currency` kits have the negative sign on the lefthand side of the "$" symbol.

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

@@ -0,0 +1 @@
+Remove the "$" symbol by setting an empty string: `symbol: ""`.

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

@@ -0,0 +1 @@
+Remove the "$" symbol by setting an empty string: `symbol=""`.

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

@@ -1,3 +1,10 @@
+<%= pb_rails("currency", props: {
+  amount: "30,327.43",
+  label: "Default",
+  size: "sm",
+  margin_bottom: "md",
+}) %>
+
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
   emphasized: false,

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

@@ -5,6 +5,13 @@ import Currency from '../_currency'
 const CurrencyVariants = (props) => {
   return (
     <>
+      <Currency
+          amount="30,327.43"
+          label="Default"
+          marginBottom="md"
+          size="sm"
+          {...props}
+      />
       <Currency
           amount="2,000.50"
           emphasized={false}

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

@@ -1,2 +1,2 @@
-Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels. 
-Cents is automatically ".00" unless other wise overwritten (i.e. unit prop).
+Use this kit to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. Pairing it with labels improves user understanding.
+Cents are automatically ".00" unless otherwise overwritten (i.e. `unit` prop).

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -17,6 +17,7 @@ type DateTimeProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "sm" | "md",
+  showCurrentYear?: boolean,
   showDayOfWeek: boolean,
   showIcon?: boolean,
   timeZone?: string
@@ -32,6 +33,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
     showDayOfWeek = false,
     datetime,
     id,
+    showCurrentYear = false,
     showIcon = false,
     size = 'md',
     timeZone = 'America/New_York',
@@ -59,6 +61,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
           vertical="baseline"
       >
         <FormattedDate
+            showCurrentYear={showCurrentYear}
             showDayOfWeek={showDayOfWeek}
             size={size}
             value={datetime}

data/app/pb_kits/playbook/pb_date_time/date_time.html.erb

@@ -9,6 +9,7 @@
         dark: object.dark,
         date: object.date,
         show_day_of_week: object.show_day_of_week,
+        show_current_year: object.show_current_year,
         size: object.size,
         timezone: object.timezone,
       }) %>

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -16,6 +16,7 @@ module Playbook
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :show_icon, type: Playbook::Props::Boolean, default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean, default: false
+      prop :show_current_year, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_date_time_kit", align)

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import DateTime from '../_date_time'
+
+const DateTimeShowCurrentYear = (props) => (
+  <div>
+    <DateTime
+        datetime={new Date()}
+        showCurrentYear
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeShowCurrentYear

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md

@@ -0,0 +1 @@
+Pass in `show_current_year` to show this date's current year.

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md

@@ -0,0 +1 @@
+Pass in `showCurrentYear` to show this date's current year.

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

@@ -1,14 +1,16 @@
 examples:
-  
+
   rails:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+  - date_time_show_current_year: Show Current Year
 
   react:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+  - date_time_show_current_year: Show Current Year
 
   swift:
   - date_time_default_swift: Default

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

@@ -1,3 +1,4 @@
 export { default as DateTimeDefault } from './_date_time_default.jsx'
 export { default as DateTimeAlign } from './_date_time_align.jsx'
 export { default as DateTimeSize } from './_date_time_size.jsx'
+export { default as DateTimeShowCurrentYear } from './_date_time_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -17,6 +17,7 @@ type DateTimeStackedProps = {
   datetime: Date,
   dark: boolean,
   timeZone?: string,
+  showCurrentYear?: boolean,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
@@ -28,6 +29,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     dark,
     htmlOptions = {},
     timeZone = 'America/New_York',
+    showCurrentYear = false,
   } = props
 
   const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
@@ -46,6 +48,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
             bold
             dark={dark}
             date={date || datetime}
+            showCurrentYear={showCurrentYear}
         />
       </FlexItem>
 

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,8 +1,8 @@
-<%= pb_content_tag do %>
+  <%= pb_content_tag do %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
+        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark, show_current_year: object.show_current_year }) %>
       <% end %>
       <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -10,6 +10,8 @@ module Playbook
                   default: false
       prop :timezone, type: Playbook::Props::String,
                       default: "America/New_York"
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
 
       def date_time_value
         date || date_time

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -41,3 +41,36 @@ test('renders time in timezone', () => {
   const kit = renderKit(DateTimeStacked, props)
   expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
 })
+
+test('renders current year when showCurrentYear is true', () => {
+  const currentYearDate = new Date()
+  const currentYear = currentYearDate.getFullYear()
+  
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-current-year' },
+    datetime: currentYearDate,
+    dark: false,
+    showCurrentYear: true,
+  })
+  expect(kit).toHaveTextContent(currentYear.toString())
+})
+
+test('hides current year by default', () => {
+  const currentYearDate = new Date()
+  const currentYear = currentYearDate.getFullYear()
+  
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-hide-year' },
+    datetime: currentYearDate,
+    dark: false,
+  })
+ 
+  const yearElement = kit.querySelector('.pb_caption_kit_xs')
+
+  if (yearElement) {
+    expect(yearElement.textContent).not.toBe(currentYear.toString())
+  } else {
+
+    expect(yearElement).toBeNull()
+  }
+})

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true, timezone: "America/Denver" }) %>
+

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import DateTimeStacked from '../_date_time_stacked'
+
+const DateTimeStackedShowCurrentYear = (props) => (
+  <div>
+    <DateTimeStacked
+        datetime={new Date()}
+        showCurrentYear
+        {...props}
+    />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        showCurrentYear
+        timeZone="America/Denver"
+        {...props}
+    />
+  </div>
+);
+
+export default DateTimeStackedShowCurrentYear;

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date Time Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.

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

@@ -2,9 +2,11 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-  
+  - date_time_stacked_show_current_year: Show Current Year
+
   react:
   - date_time_stacked_default: Default
+  - date_time_stacked_show_current_year: Show Current Year
   
   swift:
   - date_time_stacked_default_swift: Default

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

@@ -1 +1,2 @@
 export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
+export { default as DateTimeStackedShowCurrentYear } from './_date_time_stacked_show_current_year.jsx'