playbook_ui 14.6.0.pre.alpha.PBNTR5554217 → 14.6.0.pre.alpha.play1586datearea4218

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 386f151fd01fd07dd00e2bbb98f290eb5a2d1d71fd775da6cbe748fb2967aa5c
-  data.tar.gz: 1b1af709f31c4e02bfa5b88bcfa9ad3bd97f8e59ebe000219030cd754d0bdfdd
+  metadata.gz: d34cf484b073d589372720f766effb37be243a1e8c48a3b5eb90a9d683759929
+  data.tar.gz: ad599ad33f8f66e1057957ea957899f7d14e9215beaf342132e0f45b37906216
 SHA512:
-  metadata.gz: 9c4dba5e3cd240d2e97629214ee5c9c592be48a507d3584e0f0bcb109e182c0434437c4d2e31059bfa4fcb68762b0fe41ffd32b6aceb2bc7d57b9b11314a8b10
-  data.tar.gz: 7b69c72fb69a6367826cef4b40304f4fee9df732b3ea2290f25b44ddac687c741c618ab9b628040d96f8642079ae6cd87495bf50a19963a241b032b60cabbfeb
+  metadata.gz: 55fcf62a39e9220df67563a41c5882544c643ed16c12c575fdb2c9a3f0e37023aa56e4ecb6eef3bd34b6467b2995fe0c2918e0deb8d85ed76a042c0b2bccd3e1
+  data.tar.gz: 132c841e4900a5612f18ea87831f6ccdea99c9557c3a505b7feb4a0f4e81b22cc2d6721f073b531ed7a99a68e43af2c23c4ef75289e7a2ea75bb5305add7ff22

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"
-        comma_separator
-        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"
-        comma_separator
-        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"
-        comma_separator
-        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_timeline/_item.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import { globalProps, GlobalProps } from "../utilities/globalProps"
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 
+import TimelineLabel from './subcomponents/Label'
+import TimelineStep from './subcomponents/Step'
+import TimelineDetail from './subcomponents/Detail'
+
 type ItemProps = {
   className?: string,
   children?: React.ReactNode[] | React.ReactNode,
@@ -17,6 +20,13 @@ type ItemProps = {
   lineStyle?: 'solid' | 'dotted',
 } & GlobalProps
 
+function isElementOfType<P>(
+  element: React.ReactNode,
+  component: React.ComponentType<P>
+): element is React.ReactElement<P> {
+  return React.isValidElement<P>(element) && element.type === component
+}
+
 const TimelineItem = ({
   className,
   children,
@@ -31,31 +41,57 @@ const TimelineItem = ({
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+  const childrenArray = React.Children.toArray(children)
+
+  const labelChild = childrenArray.find(
+    (child): child is React.ReactElement => isElementOfType(child, TimelineLabel)
+  )
+
+  const stepChild = childrenArray.find(
+    (child): child is React.ReactElement => isElementOfType(child, TimelineStep)
+  )
+
+  const detailChild = childrenArray.find(
+    (child): child is React.ReactElement => isElementOfType(child, TimelineDetail)
+  )
+
+  const otherChildren = childrenArray.filter(
+    (child) =>
+      !isElementOfType(child, TimelineLabel) &&
+      !isElementOfType(child, TimelineStep) &&
+      !isElementOfType(child, TimelineDetail)
+  )
+
   return (
-    <div 
+    <div
         {...htmlProps}
         className={classnames(timelineItemCss, globalProps(props), className)}
     >
-      <div className="pb_timeline_item_left_block">
-        {date &&
-          <DateStacked
-              align="center"
-              date={date}
-              size="sm"
-          />
-        }
-      </div>
-      <div className="pb_timeline_item_step">
-        <IconCircle
-            icon={icon}
-            size="xs"
-            variant={iconColor}
-        />
-        <div className="pb_timeline_item_connector" />
-      </div>
-      <div className="pb_timeline_item_right_block">
-        {children}
-      </div>
+        {labelChild || (
+          <div className="pb_timeline_item_left_block">
+            {date && (
+              <DateStacked
+                  align="center"
+                  date={date}
+                  size="sm"
+              />
+            )}
+          </div>
+        )}
+        {stepChild || (
+          <div className="pb_timeline_item_step">
+            <IconCircle icon={icon}
+                size="xs"
+                variant={iconColor}
+            />
+            <div className="pb_timeline_item_connector" />
+          </div>
+        )}
+        {detailChild || (
+          <div className="pb_timeline_item_right_block">
+           { otherChildren }
+          </div>
+        )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -5,6 +5,11 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import TimelineItem from './_item'
+import {
+  TimelineStep,
+  TimelineLabel,
+  TimelineDetail,
+} from './subcomponents'
 
 type TimelineProps = {
   aria?: { [key: string]: string },
@@ -47,5 +52,8 @@ const Timeline = ({
 }
 
 Timeline.Item = TimelineItem
+Timeline.Step = TimelineStep
+Timeline.Label = TimelineLabel
+Timeline.Detail = TimelineDetail
 
 export default Timeline

data/app/pb_kits/playbook/pb_timeline/date_area.html.erb

@@ -0,0 +1,12 @@
+<%= pb_content_tag do %>
+  <% if object.date.present? %>
+    <%= pb_rails("date_stacked", props: {
+        date: object.date,
+        size: "sm",
+        align: "center"
+    }) %>
+  <% else %>
+    <%= content.presence %>
+  <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/date_area.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeline
+    class DateArea < Playbook::KitBase
+      prop :date
+
+      def classname
+        generate_classname("pb_timeline_item_left_block")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_timeline/detail_area.html.erb

@@ -0,0 +1,3 @@
+<%= pb_content_tag do %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/detail_area.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeline
+    class DetailArea < Playbook::KitBase
+      def classname
+        generate_classname("pb_timeline_item_right_block")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb

@@ -0,0 +1,43 @@
+<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+
+      <% item.date_area do %>
+        <%= pb_rails("timeline/date_area") do %>
+          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
+        <% end %>
+      <% end %>
+    
+      <% item.node_area do %>
+        <%= pb_rails("timeline/node_area", props: { icon: 'check', icon_color: 'teal' }) %>
+      <% end %>
+    
+      <% item.detail_area do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Jackson Heights",
+          detail: "37-27 74th Street"
+        }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
+
+      <% item.node_area do %>
+        <%= pb_rails("timeline/node_area") do %>
+          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
+        <% end %>
+      <% end %>
+    
+      <% item.detail_area do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Greenpoint",
+          detail: "81 Gate St Brooklyn"
+        }) %>
+      <% end %>
+    <% end %>
+
+    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
+      <%= pb_rails("title_detail", props: {
+          title: "Society Hill",
+          detail: "72 E St Astoria"
+      }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import Title from '../../pb_title/_title'
+import Pill from '../../pb_pill/_pill'
+
+import TitleDetail from '../../pb_title_detail/_title_detail'
+
+const TimelineWithChildren = (props) => (
+  <div>
+    <Timeline orientation="horizontal"
+        showDate
+        {...props}
+    >
+      <Timeline.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label>
+          <Title size={2}
+              text='Any Kit Here'
+          />
+        </Timeline.Label>
+        <Timeline.Step icon="user"
+            iconColor="royal"
+        />
+        <Timeline.Detail>
+          <TitleDetail detail="37-27 74th Street"
+              title="Jackson Heights"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+
+      <Timeline.Item lineStyle="dotted"
+          {...props}
+      >
+        <Timeline.Label>
+          <Pill text="Any Kit"
+              variant="success"
+          />
+        </Timeline.Label>
+        <Timeline.Detail>
+          <TitleDetail detail="81 Gate St Brooklyn"
+              title="Greenpoint"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+
+      <Timeline.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
+        <Timeline.Step icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+export default TimelineWithChildren

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md

@@ -0,0 +1,4 @@
+You can use whatever kit you want for the date area of the timeline item, the node area, and the content area at the bottom or left.
+
+Checkout the code in this example to see the children kits in action.
+

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

@@ -4,10 +4,11 @@ examples:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
+  - timeline_with_children: With Children
   
   
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
-  
+  - timeline_with_children: With Children

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

@@ -1,3 +1,4 @@
 export { default as TimelineDefault } from './_timeline_default.jsx'
 export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
+export { default as TimelineWithChildren } from './_timeline_with_children.jsx'

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,25 +1,21 @@
 <%= pb_content_tag do %>
+  <% if date_area %>
+    <%= date_area %>
+  <% else %>
+    <%= pb_rails("timeline/date_area", props: { date: date }) %>
+  <% end %>
 
-  <div class="pb_timeline_item_left_block">
-    <% if object.date.present? %>
-      <%= pb_rails("date_stacked", props: {
-        date: object.date,
-        size: "sm",
-        align: "center"
-      }) %>
-    <% end %>
-  </div>
-
-  <div class="pb_timeline_item_step">
-    <%= pb_rails("icon_circle", props: {
-      icon: object.icon,
-      variant: object.icon_color,
-      size: "xs"
-    }) %>
-    <div class="pb_timeline_item_connector"></div>
-  </div>
+  <% if node_area %>
+    <%= node_area %>
+  <% else %>
+    <%= pb_rails("timeline/node_area", props: { icon: icon, icon_color: icon_color }) %>
+  <% end %>
 
-  <div class="pb_timeline_item_right_block">
-    <%= content.presence %>
-  </div>
+  <% if detail_area %>
+    <%= detail_area %>
+  <% else %>
+    <%= pb_rails("timeline/detail_area") do %>
+      <%= content %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -13,6 +13,10 @@ module Playbook
                         values: %w[solid dotted],
                         default: "solid"
 
+      renders_one :date_area
+      renders_one :node_area
+      renders_one :detail_area
+
       def classname
         generate_classname("pb_timeline_item_kit", line_style)
       end

data/app/pb_kits/playbook/pb_timeline/node_area.html.erb

@@ -0,0 +1,14 @@
+<%= pb_content_tag do %>
+  <% if object.icon.present? %>
+    <%= pb_rails("icon_circle", props: {
+      icon: object.icon,
+      variant: object.icon_color,
+      size: "xs"
+    }) %>
+  <% else %>
+    <%= content.presence %>
+  <% end %>
+  <div class="pb_timeline_item_connector"></div>
+<% end %>
+
+

data/app/pb_kits/playbook/pb_timeline/node_area.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeline
+    class NodeArea < Playbook::KitBase
+      prop :icon, type: Playbook::Props::String
+      prop :icon_color, type: Playbook::Props::Enum,
+                        values: %w[default royal blue purple teal red yellow green],
+                        default: "default"
+
+      def classname
+        generate_classname("pb_timeline_item_step")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildHtmlProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from "../../utilities/globalProps"
+
+type TimelineDetailProps = {
+  children?: React.ReactNode,
+  className?: string,
+  htmlOptions?: { [key: string]: any },
+} & GlobalProps
+
+const TimelineDetail: React.FC<TimelineDetailProps> = ({
+  children,
+  className,
+  htmlOptions = {},
+  ...props
+}) => {
+  const htmlProps = buildHtmlProps(htmlOptions)
+  return (
+    <div
+        {...htmlProps}
+        className={classnames('pb_timeline_item_right_block', globalProps(props), className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default TimelineDetail