playbook_ui 9.3.0.alpha.inline3 → 9.4.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 354862f897edc053e27311b331ef01bb927323b9006af47752f1e51ae5e6eeca
-  data.tar.gz: 38946538f1a04c0c2df4b5e0d7e5cfeeeecf3bea46e3af26abb4852456429553
+  metadata.gz: 296e300fbad4165862a5e90a0c0547bac04ce6f8c751e855df8ce1c66922a7b0
+  data.tar.gz: c9cb628349bda60acc99bb903a45d54166b8f56b46793e8933c02c7b003fa1bb
 SHA512:
-  metadata.gz: fd7e15aab84fd9ac50f52bee181437b79d7d67c3df141c2c40d1349b1c568e9e235aa42308455cb18bd0073131786323182853ef2fe046040efb16c5bd93cb46
-  data.tar.gz: d0619331fbaec43977d07d10f9f6aa3ed89b3de0ac5f9a8e1572844b8696c4ae4fbd55513f087d830c1f6ef092f2be24f2c757ae95d88f16dec0555741ff7580
+  metadata.gz: 189cb41e0c3d0b1bc98b9c533eb2f3600486adcbdc32b57e891e1ee00ded94f8b4476a2f773da06f29cf2711c8f4379692938d973449309fa0e39ffbe465b736
+  data.tar.gz: 6e4f0849cf6d2ec1e93e074d1c2a06ef3ad92f3599911395cd3b73a27c82399afc146e969721dc28836f56f67e2e9357dd59da9295247fd446dd32bc0e8ce5d7

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -3,7 +3,6 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
-import { Icon } from '../'
 
 import {
   buildAriaProps,
@@ -14,15 +13,8 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
-  closeProps?: {
-    onClick?: EventHandler,
-    onMouseDown?: EventHandler,
-    onTouchEnd?: EventHandler,
-  },
   data?: object,
   id?: string,
-  removeIcon?: Boolean,
-  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -31,11 +23,8 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
-    closeProps = {},
     data = {},
     id,
-    removeIcon = false,
-    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -55,21 +44,7 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>
-        {text}
-        <If condition={removeIcon}>
-          <span
-              onClick={removeOnClick}
-              style={{ cursor: 'pointer' }}
-              {...closeProps}
-          >
-            <Icon
-                fixedWidth
-                icon="times"
-            />
-          </span>
-        </If>
-      </span>
+      <span>{text}</span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -25,8 +25,6 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
-  inputOnChange?: (String) => void,
-  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -57,8 +55,6 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
-    inputOnChange,
-    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -118,6 +114,7 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
+      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -129,9 +126,7 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
-            onChange={inputOnChange}
             placeholder={placeholder}
-            value={inputValue}
         />
         <If condition={!hideIcon}>
           <div

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -166,9 +166,6 @@ const datePickerHelper = (config) => {
     picker.input.style.caretColor = 'transparent'
     picker.input.style.cursor = 'pointer'
   }
-
-  // Fix event bubbling bug on wrapper
-  document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
 }
 
 export default datePickerHelper

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

@@ -9,6 +9,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DateStackedProps = {
   align?: "left" | "center" | "right",
+  bold?: boolean,
   className?: string | array<string>,
   dark?: boolean,
   data?: string,
@@ -26,6 +27,7 @@ const sizes = {
 const DateStacked = (props: DateStackedProps) => {
   const {
     align = 'left',
+    bold = false,
     reverse = false,
     className,
     dark = false,
@@ -46,19 +48,51 @@ const DateStacked = (props: DateStackedProps) => {
   const inputYear = dateTimestamp.toYear().toString()
 
   return (
-    <div className={classes}>
-      <div className="pb_date_stacked_day_month">
-        <Caption text={dateTimestamp.toMonth().toUpperCase()} />
-        <Title
-            dark={dark}
-            size={sizes[size]}
-            text={dateTimestamp.toDay()}
-        />
-      </div>
-      <If condition={currentYear != inputYear}>
-        <Caption size="xs">{inputYear}</Caption>
+
+    <div>
+      <If condition={bold == false}>
+
+        <div className={classes}>
+          <div className="pb_date_stacked_day_month">
+            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Title
+                dark={dark}
+                size={sizes[size]}
+                text={dateTimestamp.toDay()}
+            />
+          </div>
+          <If condition={currentYear != inputYear}>
+            <Caption size="xs">{inputYear}</Caption>
+          </If>
+        </div>
+        <Else />
+        <>
+          <div className={classes}>
+            <div className="pb_date_stacked_day_month">
+
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={dateTimestamp.toMonth()}
+              />
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={dateTimestamp.toDay()}
+              />
+              <If condition={currentYear != inputYear}>
+                <Title size="4">{inputYear}</Title>
+              </If>
+            </div>
+
+          </div>
+
+        </>
       </If>
     </div>
+
   )
 }
 

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -3,11 +3,22 @@
     data: object.data,
     class: object.classname) do %>
 
-    <div class="pb_date_stacked_day_month">
-      <%= pb_rails("caption", props: { text: object.month }) %>
-      <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %>
-      <% end %>
-    </div>
-    <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
+    <% if object.bold == false %>
+
+      <div class="pb_date_stacked_day_month">
+        <%= pb_rails("caption", props: { text: object.month }) %>
+        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
+        <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
+      </div>
+
+    <% else %>
+      <div class="pb_date_stacked_day_month">
+        <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
+        <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
+        <%= pb_rails("title", props: { text: object.year, size:4 }) %>
+
+      </div>
+
+    <% end %>
 
 <% end %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -14,9 +14,11 @@ module Playbook
                   default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :bold, type: Playbook::Props::Boolean,
+                  default: false
 
       def classname
-        generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
+        generate_classname("pb_date_stacked_kit", align, size, bold, reverse_class, dark_class)
       end
 
       def title_size
@@ -31,10 +33,7 @@ module Playbook
       end
 
       def month
-        month = Playbook::PbKit::PbDateTime.new(date)
-        content_tag(:time, datetime: month.to_iso) do
-          "#{month.to_month}"
-        end
+        pb_date_time.to_month.capitalize
       end
 
       def year
@@ -48,8 +47,16 @@ module Playbook
         end
       end
 
+      def bold_class
+        bold ? "bold" : nil
+      end
+
     private
 
+      def pb_date_time
+        Playbook::PbKit::PbDateTime.new(date)
+      end
+
       def reverse_class
         reverse ? "reverse" : nil
       end

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "left", bold: true }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), align: "center", bold: true }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right", bold: true }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import DateStacked from '../_date_stacked.jsx'
+
+const DateStackedBold = (props) => {
+  return (
+    <div>
+      <DateStacked
+          align="left"
+          bold
+          date={new Date()}
+          {...props}
+      />
+
+      <br />
+
+      <DateStacked
+          align="center"
+          bold
+          date={new Date('20 Mar 2018')}
+          {...props}
+      />
+
+      <br />
+
+      <DateStacked
+          align="right"
+          bold
+          date={new Date()}
+          {...props}
+      />
+
+      <br />
+
+    </div>
+  )
+}
+
+export default DateStackedBold

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

@@ -6,10 +6,12 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
+  - date_stacked_bold: Bold
+
 
   react:
   - date_stacked_default: Default
   - date_stacked_not_current_year: Not Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
-  - date_stacked_align: Alignment
+  - date_stacked_bold: Bold

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

@@ -1,3 +1,4 @@
+export { default as DateStackedBold } from './_date_stacked_bold.jsx'
 export { default as DateStackedDefault } from './_date_stacked_default.jsx'
 export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'

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

@@ -1,43 +1,59 @@
+
 /* @flow */
 
 import React from 'react'
-import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
-import { buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { buildCss } from '../utilities/props'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
+
+import { DateStacked, Flex, FlexItem, SectionSeparator, TimeStacked } from '../'
 
 type DateTimeStackedProps = {
-  data?: string,
   id?: string,
-  date: date,
+  date: string,
+  datetime: string,
   dark: boolean,
+  timeZone?: string,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps) => {
-  const { date, data = {}, dark } = props,
-    dataProps = buildDataProps(data)
+  if (props.date) deprecatedProps('Date Time Stacked', ['date'])
+
+  const {
+    date,
+    datetime,
+    dark,
+    timeZone = 'America/New_York',
+  } = props
+
+  const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
 
   return (
     <Flex
-        className={globalProps(props)}
-        orientation="row"
-        vertical="center"
-        {...dataProps}
+        inline="flex-container"
+        vertical="stretch"
+        {...props}
     >
       <FlexItem>
         <DateStacked
             align="right"
+            bold
             dark={dark}
-            date={date}
-            reverse
-            size="sm"
+            date={date || datetime}
+            timeZone={timeZone}
         />
       </FlexItem>
+
+      <SectionSeparator
+          className="date-time-padding"
+          orientation="vertical"
+      />
       <FlexItem>
         <TimeStacked
-            className="pb_date_time_stacked_kit"
+            className={classes}
             dark={dark}
+            date={date || datetime}
             tag="caption"
-            time={date}
+            timeZone={timeZone}
         />
       </FlexItem>
     </Flex>

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

@@ -1,6 +1,25 @@
-@import "../pb_title/title";
-@import "../pb_body/body";
+[class^=pb_date_time_stacked] {
+
+  [class^=padding_month] {
+    padding-bottom: ($space_xs + 2) !important;
+    }
+
+  [class^=padding_day] {
+    padding-bottom: ($space_xs + 2) !important;
+  }
+
+  &[class*=_dark] {
+    & > * [class^=pb_title_kit] {
+      color: $text_dk_default;
+    }
+    & > * [class^=pb_caption_kit] {
+      color: $text_dk_light;
+    }
+  }
 
-.pb_date_time_stacked_kit {
-  padding-left: $space-xs;
 }
+.date-time-padding {
+  padding-right: ($space_xs / 2);
+  padding-left: ($space_xs / 2);
+}
+

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

@@ -1,13 +1,17 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
-    <%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
-      <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
+    class: object.classname,
+    aria: object.aria) 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 }) %>
       <% end %>
-      <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", time: object.date, tag: "caption" }) %>
+      <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
+      <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+        <%= pb_rails("time_stacked", props: { time: object.date_time_value, dark: object.dark, timezone: object.timezone }) %>
       <% end %>
-    <% end %>
-<% end %>
+  <% end %>
+
+<% end %>

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

@@ -3,10 +3,17 @@
 module Playbook
   module PbDateTimeStacked
     class DateTimeStacked < Playbook::KitBase
-      prop :date, type: Playbook::Props::Date,
+      prop :date, deprecated: true
+      prop :date_time, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :timezone, type: Playbook::Props::String,
+                  default: "America/New_York"
+
+    def date_time_value
+      date || date_time
+    end
     end
   end
-end
+end

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

@@ -0,0 +1,35 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+import { DateTimeStacked } from '../'
+
+/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
+
+const props = {
+  data: { testid: 'datetimestacked' },
+  datetime: new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
+}
+
+test('Kit renders date time', () => {
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toBeInTheDocument()
+})
+
+it('Should be accessible', async () => {
+  ensureAccessible(DateTimeStacked, props)
+})
+
+test('renders time in default timezone', () => {
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toHaveTextContent(/Mar311:00pEDT/i)
+})
+
+test('renders time in timezone', () => {
+  props.timeZone = 'Asia/Tokyo'
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toHaveTextContent(/Mar312:00aJST/i)
+})
+
+test('renders time in timezone', () => {
+  props.timeZone = 'America/Denver'
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toHaveTextContent(/Mar3111:00aMDT/i)
+})

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

@@ -1 +1,8 @@
-<%= pb_rails("date_time_stacked") %>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: Date.new(2018, 03, 20) }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "Asia/Tokyo" }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "America/Denver" }) %>
+

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

@@ -4,10 +4,28 @@ import { DateTimeStacked } from '../../'
 const DateTimeStackedDefault = (props) => (
   <div>
     <DateTimeStacked
-        date={new Date()}
+        datetime={new Date()}
         {...props}
     />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        timeZone="Asia/Tokyo"
+
+        {...props}
+    />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        timeZone="America/Denver"
+
+        {...props}
+    />
+
   </div>
 )
 
 export default DateTimeStackedDefault
+
+// *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
+// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -9,7 +9,7 @@ import { Dialog } from '../'
   - https://jestjs.io/docs/en/using-matchers
 */
 
-test('generated scaffold test - update me', () => {
+test('Kit renders Dialog', () => {
   const testId = 'test1'
 
   render(

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -1,12 +1,13 @@
 /* @flow */
 
-import React, { forwardRef } from 'react'
+import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
+  data?: object,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
   id?: string,
@@ -22,12 +23,12 @@ type FlexProps = {
   wrap?: boolean,
 }
 
-const Flex = (props: FlexProps, ref: React.ElementRef<"div">) => {
+const Flex = (props: FlexProps) => {
   const {
     align = 'none',
     children,
     className,
-    id,
+    data = {},
     inline = false,
     horizontal = 'left',
     justify = 'none',
@@ -52,6 +53,8 @@ const Flex = (props: FlexProps, ref: React.ElementRef<"div">) => {
   const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
+  const dataProps = buildDataProps(data)
+
   return (
     <div
         className={classnames(
@@ -71,12 +74,11 @@ const Flex = (props: FlexProps, ref: React.ElementRef<"div">) => {
         globalProps(props),
         className
       )}
-        id={id}
-        ref={ref}
+        {...dataProps}
     >
       {children}
     </div>
   )
 }
 
-export default forwardRef(Flex)
+export default Flex

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import useFocus from './useFocus.js'
 import Trix from 'trix'
@@ -22,7 +22,7 @@ type RichTextEditorProps = {
   value?: string,
 }
 
-const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input">) => {
+const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
     className,
@@ -120,7 +120,6 @@ const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input
       <input
           id={id}
           name={name}
-          ref={ref}
           type="hidden"
           value={value}
       />
@@ -134,4 +133,4 @@ const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input
   )
 }
 
-export default forwardRef(RichTextEditor)
+export default RichTextEditor

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -38,9 +38,13 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
         className={classes}
         id={id}
     >
-      <span>
-        <Caption text={text} />
-      </span>
+
+      <If condition={text}>
+        <span>
+          <Caption text={text} />
+        </span>
+      </If>
+
     </div>
   )
 }

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -19,7 +19,6 @@ type TextInputProps = {
   id?: string,
   name: string,
   label: string,
-  onBlur: (String) => void,
   onChange: (String) => void,
   placeholder: string,
   required?: boolean,
@@ -42,7 +41,6 @@ const TextInput = (
     id,
     name,
     label,
-    onBlur = () => {},
     onChange = () => {},
     placeholder,
     required,
@@ -81,7 +79,6 @@ const TextInput = (
               disabled={disabled}
               id={id}
               name={name}
-              onBlur={onBlur}
               onChange={onChange}
               placeholder={placeholder}
               ref={ref}

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -24,7 +24,6 @@ type TextareaProps = {
   required?: boolean,
   rows?: number,
   resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
-  onBlur?: InputCallback<HTMLTextAreaElement>,
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
@@ -38,7 +37,6 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
-  onBlur = () => {},
   onChange = () => {},
   placeholder,
   required,
@@ -77,7 +75,6 @@ const Textarea = ({
             className="pb_textarea_kit"
             disabled={disabled}
             name={name}
-            onBlur={onBlur}
             onChange={onChange}
             placeholder={placeholder}
             ref={ref}

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -3,10 +3,10 @@
     data: object.data,
     class: object.classname) do %>
 
-    <%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
+    <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>
         <%= object.format_time_string %>
-        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
+        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, dark: object.dark, classname: "pb_time_stacked" }) %>
       </time>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -3,14 +3,12 @@
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
-import CreateableSelect from 'react-select/creatable'
 import { get } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Control from './components/Control'
 import ClearIndicator from './components/ClearIndicator'
 import IndicatorsContainer from './components/IndicatorsContainer'
-// import Input from './components/Input'
 import MenuList from './components/MenuList'
 import MultiValue from './components/MultiValue'
 import Option from './components/Option'
@@ -28,7 +26,6 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
-  createable?: boolean,
   dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
@@ -44,14 +41,12 @@ type Props = {
 
 const Typeahead = (props: Props) => {
   const selectProps = {
-    badges: false,
     cacheOptions: true,
     components: {
       Control,
       ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null,
-      // Input,
       MenuList,
       MultiValue,
       Option,
@@ -63,8 +58,6 @@ const Typeahead = (props: Props) => {
     isClearable: true,
     isSearchable: true,
     name,
-    onCreate: () => {},
-    plusIcon: false,
     ...props,
   }
 
@@ -72,8 +65,7 @@ const Typeahead = (props: Props) => {
   if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
   if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
 
-  let Tag = props.async ? AsyncSelect : Select
-  if (props.createable) Tag = CreateableSelect
+  const Tag = props.async ? AsyncSelect : Select
 
   const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -154,17 +154,4 @@
       box-sizing: border-box;
     }
   }
-  .placeholder+.input-wrapper .typeahead-plus-icon {
-    display: none;
-  }
-  .typeahead-kit-select__control--is-focused .typeahead-plus-icon {
-    display: none;
-  }
-  .typeahead-plus-icon {
-    color: $text_lt_lighter;
-  }
-  [class^=pb_badge_kit] span {
-    line-height: 16.5px;
-    letter-spacing: normal;
-  }
 }

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import { Badge, FormPill } from '../../'
+import { FormPill } from '../../'
 
 type Props = {
   data: object,
@@ -15,7 +15,6 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { badges } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -29,28 +28,19 @@ const MultiValue = (props: Props) => {
         className="text_input_multivalue_container"
         {...props}
     >
-      <If condition={badges}>
-        <Badge
+      <If condition={imageUrl}>
+        <FormPill
+            avatarUrl={imageUrl}
             closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
+            marginRight="xs"
+            name={label}
         />
         <Else />
-        <If condition={imageUrl}>
-          <FormPill
-              avatarUrl={imageUrl}
-              closeProps={removeProps}
-              marginRight="xs"
-              name={label}
-          />
-          <Else />
-          <FormPill
-              closeProps={removeProps}
-              marginRight="xs"
-              text={label}
-          />
-        </If>
+        <FormPill
+            closeProps={removeProps}
+            marginRight="xs"
+            text={label}
+        />
       </If>
     </components.MultiValueContainer>
   )

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx

@@ -1,26 +1,13 @@
 /* @flow */
 
 import React from 'react'
-import { Flex, Icon } from '../../'
 import { components } from 'react-select'
 
 const Placeholder = (props: any) => (
-  <>
-    <Flex
-        align="center"
-        className="placeholder"
-    >
-      <components.IndicatorsContainer
-          {...props}
-      />
-      <If condition={props.selectProps.plusIcon}>
-        <Icon
-            className="typeahead-plus-icon"
-            icon="plus"
-        />
-      </If>
-    </Flex>
-  </>
+  <components.IndicatorsContainer
+      className="placeholder"
+      {...props}
+  />
 )
 
 export default Placeholder

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -13,7 +13,6 @@ const options = [
 const TypeaheadDefault = (props) => {
   return (
     <Typeahead
-        // badges
         label="Colors"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Typeahead } from '../..'
 
-const initOptions = [
+const options = [
   { label: 'Windows', value: '#FFA500' },
   { label: 'Siding', value: '#FF0000' },
   { label: 'Doors', value: '#00FF00' },
@@ -11,18 +11,13 @@ const initOptions = [
 ]
 
 const TypeaheadWithPills = (props) => {
-  // const [values, setValues] = useState([])
   return (
     <>
       <Typeahead
-          badges
-          createable
           isMulti
           label="Colors"
-          // onChange={(value) => console.log(value)}
-          options={initOptions}
-          placeholder="Placeholder"
-          plusIcon
+          options={options}
+          placeholder=""
           {...props}
       />
     </>

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

@@ -7,8 +7,8 @@ examples:
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
 
   react:
-    # - typeahead_default: Default
+    - typeahead_default: Default
     - typeahead_with_pills: With Pills
-    # - typeahead_with_pills_async: With Pills (Async Data)
-    # - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
-    # - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
+    - typeahead_with_pills_async: With Pills (Async Data)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.3.0.alpha.inline3"
+  VERSION = "9.4.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.3.0.alpha.inline3
+  version: 9.4.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -809,6 +809,8 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
+- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
+- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
@@ -838,6 +840,7 @@ files:
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
+- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
@@ -1940,7 +1943,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
 - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
-- app/pb_kits/playbook/pb_typeahead/components/Input.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Option.jsx
@@ -2108,7 +2110,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project:
+rubygems_version: 2.7.3
 signing_key:
 specification_version: 4
 summary: Playbook Design System

data/app/pb_kits/playbook/pb_typeahead/components/Input.jsx

@@ -1,27 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-import { Flex, Icon } from '../../'
-
-const Input = (props: any) => (
-  <>
-    <Flex
-        align="center"
-        className="input-wrapper"
-    >
-      <If condition={props.selectProps.plusIcon}>
-        <Icon
-            className="typeahead-plus-icon"
-            icon="plus"
-        />
-      </If>
-      <components.Input
-          className="input"
-          {...props}
-      />
-    </Flex>
-  </>
-)
-
-export default Input