playbook_ui 4.15.0 → 4.18.0

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

@@ -1,7 +1,7 @@
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
   size: "lg",
-  dark: true
+  dark: true,
 }) %>
 
 <%= pb_rails("currency", props: {
@@ -10,7 +10,7 @@
   label: "Caption",
   size: "md",
   symbol: "€",
-  dark: true
+  dark: true,
 }) %>
 
 <%= pb_rails("currency", props: {
@@ -19,5 +19,5 @@
   label: "Caption",
   unit: "/mo",
   size: "sm",
-  dark: true
+  dark: true,
 }) %>

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

@@ -3,11 +3,10 @@ import { Currency } from '../../'
 
 const CurrencyDark = () => {
   return (
-    <div>
+    <>
       <Currency
           amount="2,000.50"
           dark
-          label="Caption"
           size="lg"
       />
       <Currency
@@ -26,7 +25,7 @@ const CurrencyDark = () => {
           size="sm"
           unit="/mo"
       />
-    </div>
+    </>
   )
 }
 

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

@@ -3,10 +3,9 @@ import { Currency } from '../../'
 
 const CurrencyLarge = () => {
   return (
-    <div>
+    <>
       <Currency
           amount="2,000.50"
-          label="Caption"
           size="lg"
       />
       <Currency
@@ -23,7 +22,7 @@ const CurrencyLarge = () => {
           size="lg"
           unit="/mo"
       />
-    </div>
+    </>
   )
 }
 

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

@@ -3,7 +3,7 @@ import { Currency } from '../../'
 
 const CurrencyMedium = () => {
   return (
-    <div>
+    <>
       <Currency
           amount="2,000.50"
           label="Caption"
@@ -23,7 +23,7 @@ const CurrencyMedium = () => {
           size="md"
           unit="/mo"
       />
-    </div>
+    </>
   )
 }
 

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

@@ -1,7 +1,7 @@
 <%= pb_rails("currency", props: {
   label: "Caption",
   amount: "2,000.50",
-  size: "sm",  
+  size: "sm",
 }) %>
 
 <%= pb_rails("currency", props: {

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

@@ -3,24 +3,27 @@ import { Currency } from '../../'
 
 const CurrencySmall = () => {
   return (
-    <div>
+    <>
       <Currency
           amount="2,000.50"
           label="Caption"
+          size="sm"
       />
       <Currency
           align="center"
           amount="342"
           label="Caption"
+          size="sm"
           symbol="€"
       />
       <Currency
           align="right"
           amount="45"
           label="Caption"
+          size="sm"
           unit="/mo"
       />
-    </div>
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
+import { spacing } from '../utilities/spacing.js'
 import {
   Body,
   StatChange,
@@ -44,7 +44,7 @@ const DashboardValue = (props: DashboardValueProps) => {
 
   return (
     <div
-        className={classnames(dashboardValueCSS(props), className)}
+        className={classnames(dashboardValueCSS(props), className, spacing(props))}
         id={id}
     >
       <If condition={statLabel}>

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -3,6 +3,8 @@
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
 import { Icon } from '../'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 const defaultDateString = (value: DateTime) => {
   const weekday = value.toWeekday().toUpperCase()
@@ -20,15 +22,17 @@ const largeDateString = (value: DateTime) => {
 }
 
 type DateSubcomponent = {
-  value: DateTime
+  value: DateTime,
 }
 
-const ExtraSmallDate = ({ value }: DateSubcomponent) => (
-  <h3 className="pb_title_kit_4">{defaultDateString(value)}</h3>
+const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_4', spacing(props))}>
+    {defaultDateString(value)}
+  </h3>
 )
 
-const SmallDate = ({ value }: DateSubcomponent) => (
-  <h3 className="pb_title_kit_4">
+const SmallDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_4', spacing(props))}>
     <Icon
         fixedWidth
         icon="calendar"
@@ -37,24 +41,44 @@ const SmallDate = ({ value }: DateSubcomponent) => (
   </h3>
 )
 
-const LargeDate = ({ value }: DateSubcomponent) => (
-  <h3 className="pb_title_kit_3">{largeDateString(value)}</h3>
+const LargeDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_3', spacing(props))}>
+    {largeDateString(value)}
+  </h3>
 )
 
 type PbDateProps = {
-  size?: 'xs' | 'sm' | 'lg',
+  size?: "xs" | "sm" | "lg",
   value?: String,
+  className?: String
 }
 
-const PbDate = ({
-  size,
-  value,
-}: PbDateProps) => {
+const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
   const date = new DateTime({ value: value })
 
-  if (size == 'xs') return <ExtraSmallDate value={date} />
-  if (size == 'lg') return <LargeDate value={date} />
-  return <SmallDate value={date} />
+  if (size == 'xs')
+    return (
+      <ExtraSmallDate
+          {...props}
+          className={className}
+          value={date}
+      />
+    )
+  if (size == 'lg')
+    return (
+      <LargeDate
+          {...props}
+          className={className}
+          value={date}
+      />
+    )
+  return (
+    <SmallDate
+        {...props}
+        className={className}
+        value={date}
+    />
+  )
 }
 
 export default PbDate

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -11,7 +11,9 @@ const DateDefault = () => {
 
       <br />
 
-      <Date value="17 Mar 69" />
+      <Date
+          value="17 Mar 69"
+      />
 
       <br />
 

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -2,18 +2,16 @@
 
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-
-import {
-  Body,
-  Icon,
-} from '../'
+import { Body, Icon } from '../'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type DateRangeInlineProps = {
   className?: String,
   data?: String,
   endDate?: Date,
   id?: String,
-  startDate?: Date
+  startDate?: Date,
 }
 
 const dateTimestamp = (dateValue) => {
@@ -26,36 +24,44 @@ const dateTimeIso = (dateValue) => {
   return date.toIso()
 }
 
-const DateRangeInline = ({
-  endDate,
-  startDate,
-}: DateRangeInlineProps) => (
-  <div>
-    <Body
-        color="light"
-        tag="span"
-    >
-      <Icon
-          fixedWidth
-          icon="calendar-alt"
-      />
-    </Body>
-    <Body tag="span">
-      <time dateTime={dateTimeIso(startDate)}>{` ${dateTimestamp(startDate)} `}</time>
-    </Body>
-    <Body
-        color="light"
-        tag="span"
-    >
-      <Icon
-          fixedWidth
-          icon="long-arrow-right"
-      />
-    </Body>
-    <Body tag="span">
-      <time dateTime={dateTimeIso(endDate)}>{` ${dateTimestamp(endDate)} `}</time>
-    </Body>
-  </div>
-)
+const DateRangeInline = (props: DateRangeInlineProps) => {
+  const { endDate, startDate } = props
+  return (
+    <div className={classnames('pb_date_range_inline', spacing(props))}>
+      <Body
+          color="light"
+          tag="span"
+      >
+        <Icon
+            fixedWidth
+            icon="calendar-alt"
+        />
+      </Body>
+      <Body tag="span">
+        <time dateTime={dateTimeIso(startDate)}>
+          {` ${dateTimestamp(
+          startDate
+        )} `}
+        </time>
+      </Body>
+      <Body
+          color="light"
+          tag="span"
+      >
+        <Icon
+            fixedWidth
+            icon="long-arrow-right"
+        />
+      </Body>
+      <Body tag="span">
+        <time dateTime={dateTimeIso(endDate)}>
+          {` ${dateTimestamp(
+          endDate
+        )} `}
+        </time>
+      </Body>
+    </div>
+  )
+}
 
 export default DateRangeInline

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx

@@ -5,8 +5,8 @@ const DateRangeInlineDefault = () => {
   return (
     <div>
       <DateRangeInline
-          endDate={new Date('20 Mar 2020')}
-          startDate={new Date('18 Jun 2019')}
+          endDate={new Date('20 Mar 2015')}
+          startDate={new Date('18 Jun 2013')}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx

@@ -2,16 +2,10 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
-import {
-  Body,
-  DateYearStacked,
-  Flex,
-  FlexItem,
-  Icon,
-} from '../'
+import { Body, DateYearStacked, Flex, FlexItem, Icon } from '../'
 
 type DateRangeStackedProps = {
   className?: String | Array<String>,
@@ -19,16 +13,12 @@ type DateRangeStackedProps = {
   dark?: Boolean,
   endDate: String,
   id?: String,
-  startDate: String
+  startDate: String,
 }
 
-const DateRangeStacked = ({
-  className,
-  dark = false,
-  endDate,
-  startDate,
-}: DateRangeStackedProps) => {
-  const css = classnames(className, buildCss('pb_date_range_stacked'))
+const DateRangeStacked = (props: DateRangeStackedProps) => {
+  const { className, dark = false, endDate, startDate } = props
+  const css = classnames(className, buildCss('pb_date_range_stacked'), spacing(props))
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -2,18 +2,18 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { Caption, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type DateStackedProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String | Array<String>,
   dark?: Boolean,
   data?: String,
   date: String,
-  size?: 'sm' | 'md',
+  size?: "sm" | "md",
   id?: String,
   reverse?: Boolean,
 }
@@ -23,18 +23,23 @@ const sizes = {
   md: 3,
 }
 
-const DateStacked = ({
-  align = 'left',
-  reverse = false,
-  className,
-  dark = false,
-  date,
-  size = 'sm',
-}: DateStackedProps) => {
-  const classes = classnames(className, buildCss('pb_date_stacked_kit', align, size, {
-    'dark': dark,
-    'reverse': reverse,
-  }))
+const DateStacked = (props: DateStackedProps) => {
+  const {
+    align = 'left',
+    reverse = false,
+    className,
+    dark = false,
+    date,
+    size = 'sm',
+  } = props
+  const classes = classnames(
+    className,
+    buildCss('pb_date_stacked_kit', align, size, {
+      dark: dark,
+      reverse: reverse,
+    }),
+    spacing(props)
+  )
 
   const currentYear = new Date().getFullYear().toString()
   const dateTimestamp = new DateTime({ value: date })
@@ -43,9 +48,7 @@ const DateStacked = ({
   return (
     <div className={classes}>
       <div className="pb_date_stacked_day_month">
-        <Caption
-            text={dateTimestamp.toMonth().toUpperCase()}
-        />
+        <Caption text={dateTimestamp.toMonth().toUpperCase()} />
         <Title
             dark={dark}
             size={sizes[size]}