playbook_ui 11.3.0 → 11.4.0.pre.alpha.rubytheme1

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -5,15 +5,15 @@ Base colors should not be documented.
 Only document color use.
 
 Colors -----------------------------*/
-$royal:               #0056CF;
-$purple:              #9E64E9;
-$teal:                #00C4D7;
-$red:                 #FF2229;
-$red_dark:            #ff4a50;
-$yellow:              #F9BB00;
-$green:               #00CA74;
-$orange:              #FD804C;
-$default:             #93a8b8;
+$royal:               #0056CF !default;
+$purple:              #9E64E9 !default;
+$teal:                #00C4D7 !default;
+$red:                 #FF2229 !default;
+$red_dark:            #ff4a50 !default;
+$yellow:              #F9BB00 !default;
+$green:               #00CA74 !default;
+$orange:              #FD804C !default;
+$default:             #93a8b8 !default;
 $colors: (
   royal:              $royal,
   purple:             $purple,
@@ -26,15 +26,15 @@ $colors: (
 );
 
 /* Specialty Gradient -----------------*/
-$gradient_start:      #1C75F2;
-$gradient_end:        $royal;
+$gradient_start:      #1C75F2 !default;
+$gradient_end:        $royal !default;
 
 /* Interface colors -------------------*/
-$white:               #FFFFFF;
-$silver:              #F3F7FB;
-$slate:               #C1CDD6;
-$charcoal:            #242B42;
-$black:               #000000;
+$white:               #FFFFFF !default;
+$silver:              #F3F7FB !default;
+$slate:               #C1CDD6 !default;
+$charcoal:            #242B42 !default;
+$black:               #000000 !default;
 
 $interface_colors: (
   white:              $white,
@@ -46,9 +46,9 @@ $interface_colors: (
 );
 
 /* Main colors ------------------------*/
-$primary:             $royal;
-$secondary:           $yellow;
-$tertiary:            $purple;
+$primary:             $royal !default;
+$secondary:           $yellow !default;
+$tertiary:            $purple !default;
 $main_colors: (
   primary:            $primary,
   secondary:          $secondary,
@@ -57,29 +57,29 @@ $main_colors: (
 /*=====================================
 
 Background colors ------------------*/
-$bg_light:            $silver;
-$bg_dark:             #0a0527;
+$bg_light:            $silver !default;
+$bg_dark:             #0a0527 !default;
 $background_colors: (
   bg_light:           $bg_light,
   bg_dark:            $bg_dark
 );
 
 /* Card colors ------------------*/
-$card_light:          $white;
+$card_light:          $white !default;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
 );
 
-$primary-action:      $primary;
+$primary-action:      $primary !default;
 $action_colors: (
   primary_action:            $primary-action
 );
 
 /* Active colors ----------------------*/
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff;
+$active_dark:         #0082ff !default;
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
@@ -102,7 +102,7 @@ $focus_input_colors: (
 );
 
 /* Border colors ----------------------*/
-$border_light:        #E4E8F0;
+$border_light:        #E4E8F0 !default;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
   border_light:       $border_light,
@@ -116,10 +116,10 @@ $shadow_colors: (
 );
 
 /* Text colors ------------------------*/
-$text_lt_default:     $charcoal;
-$text_lt_light:       #687887;
-$text_lt_lighter:     $slate;
-$text_dk_default:     $white;
+$text_lt_default:     $charcoal !default;
+$text_lt_light:       #687887 !default;
+$text_lt_lighter:     $slate !default;
+$text_dk_default:     $white !default;
 $text_dk_light:       rgba($white, $opacity_6);
 $text_dk_lighter:     rgba($white, $opacity_4);
 $text_colors: (
@@ -132,14 +132,14 @@ $text_colors: (
 );
 
 /* Data colors ------------------------*/
-$data_1:              $royal;
-$data_2:              $yellow;
-$data_3:              $purple;
-$data_4:              $green;
-$data_5:              $orange;
-$data_6:              #144075;
-$data_7:              $teal;
-$data_8:              $red;
+$data_1:              $royal !default;
+$data_2:              $yellow !default;
+$data_3:              $purple !default;
+$data_4:              $green !default;
+$data_5:              $orange !default;
+$data_6:              #144075 !default;
+$data_7:              $teal !default;
+$data_8:              $red !default;
 $data_colors: (
   data_1:             $data_1,
   data_2:             $data_2,
@@ -152,19 +152,19 @@ $data_colors: (
 );
 
 /* Status colors ----------------------*/
-$success:             $green;
+$success:             $green !default;
 $success_secondary:   lighten($success, 10%);
-$warning:             $yellow;
+$warning:             $yellow !default;
 $warning_secondary:   lighten($warning, 10%);
-$error:               $red;
-$error_dark:          $red_dark;
+$error:               $red !default;
+$error_dark:          $red_dark !default;
 $error_dark_body:     lighten($error_dark, 2%);
 $error_secondary:     lighten($error, 10%);
-$info:                $teal;
+$info:                $teal !default;
 $info_secondary :     lighten($info, 10%);
-$neutral:             $slate;
+$neutral:             $slate !default;
 $neutral_secondary:   lighten($neutral, 10%);
-$primary:             $primary;
+$primary:             $primary !default;
 $primary_secondary:    lighten($primary, 10%);
 
 $status_colors: (
@@ -194,16 +194,16 @@ $status_color_text: (
 );
 
 /* Link colors ------------------------*/
-$primary_action:      $primary;
+$primary_action:      $primary !default;
 
 /* Product colors ---------------------*/
-$windows:             $royal;
-$siding:              $yellow;
-$doors:               $teal;
-$solar:               $green;
-$roofing:             $slate;
-$gutters:             $purple;
-$insulation:          $red;
+$windows:             $royal !default;
+$siding:              $yellow !default;
+$doors:               $teal !default;
+$solar:               $green !default;
+$roofing:             $slate !default;
+$gutters:             $purple !default;
+$insulation:          $red !default;
 $product_colors: (
   windows:            $windows,
   siding:             $siding,
@@ -215,27 +215,27 @@ $product_colors: (
 );
 
 /* Category colors ---------------------*/
-$category_1:   $royal;
-$category_2:   #0CD2E5;
-$category_3:   $yellow;
-$category_4:   #14D595;
-$category_5:   #A057FF;
-$category_6:   #FF7034;
-$category_7:   #97DA22;
-$category_8:   #EA599F;
-$category_9:   #0091FF;
-$category_10:  #5027E4;
-$category_11:  $red;
-$category_12:  #109922;
-$category_13:  #058F9D;
-$category_14:  #A33E6F;
-$category_15:  #B2171C;
-$category_16:  #0A5C49;
-$category_17:  #325B91;
-$category_18:  #BE4714;
-$category_19:  #000080;
-$category_20:  #5C0E0A;
-$category_21:  #040830;
+$category_1:   $royal !default;
+$category_2:   #0CD2E5 !default;
+$category_3:   $yellow !default;
+$category_4:   #14D595 !default;
+$category_5:   #A057FF !default;
+$category_6:   #FF7034 !default;
+$category_7:   #97DA22 !default;
+$category_8:   #EA599F !default;
+$category_9:   #0091FF !default;
+$category_10:  #5027E4 !default;
+$category_11:  $red !default;
+$category_12:  #109922 !default;
+$category_13:  #058F9D !default;
+$category_14:  #A33E6F !default;
+$category_15:  #B2171C !default;
+$category_16:  #0A5C49 !default;
+$category_17:  #325B91 !default;
+$category_18:  #BE4714 !default;
+$category_19:  #000080 !default;
+$category_20:  #5C0E0A !default;
+$category_21:  #040830 !default;
 $category_colors: (
   category_1:   $category_1,
   category_2:   $category_2,
@@ -260,7 +260,7 @@ $category_colors: (
   category_21:  $category_21
 );
 
-$transparent: transparent;
+$transparent: transparent !default;
 
 @function tint($color, $percentage) {
   @return mix($white, $color, $percentage);

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.2.7"
-  VERSION = "11.3.0"
+  PREVIOUS_VERSION = "11.4.0"
+  VERSION = "11.4.0.pre.alpha.rubytheme1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.3.0
+  version: 11.4.0.pre.alpha.rubytheme1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-19 00:00:00.000000000 Z
+date: 2022-09-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -553,8 +553,8 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
 - app/pb_kits/playbook/pb_circle_chart/docs/index.js
-- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
+- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx
 - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
 - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js
@@ -597,8 +597,8 @@ files:
 - app/pb_kits/playbook/pb_contact/docs/_description.md
 - app/pb_kits/playbook/pb_contact/docs/example.yml
 - app/pb_kits/playbook/pb_contact/docs/index.js
-- app/pb_kits/playbook/pb_currency/_currency.jsx
 - app/pb_kits/playbook/pb_currency/_currency.scss
+- app/pb_kits/playbook/pb_currency/_currency.tsx
 - app/pb_kits/playbook/pb_currency/currency.html.erb
 - app/pb_kits/playbook/pb_currency/currency.rb
 - app/pb_kits/playbook/pb_currency/currency.test.js
@@ -633,8 +633,8 @@ files:
 - app/pb_kits/playbook/pb_dashboard_value/docs/_description.md
 - app/pb_kits/playbook/pb_dashboard_value/docs/example.yml
 - app/pb_kits/playbook/pb_dashboard_value/docs/index.js
-- app/pb_kits/playbook/pb_date/_date.jsx
 - app/pb_kits/playbook/pb_date/_date.scss
+- app/pb_kits/playbook/pb_date/_date.tsx
 - app/pb_kits/playbook/pb_date/date.html.erb
 - app/pb_kits/playbook/pb_date/date.rb
 - app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
@@ -750,8 +750,9 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_stacked/docs/index.js
-- app/pb_kits/playbook/pb_date_time/_date_time.jsx
 - app/pb_kits/playbook/pb_date_time/_date_time.scss
+- app/pb_kits/playbook/pb_date_time/_date_time.tsx
+- app/pb_kits/playbook/pb_date_time/dateTime.test.js
 - app/pb_kits/playbook/pb_date_time/date_time.html.erb
 - app/pb_kits/playbook/pb_date_time/date_time.rb
 - app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb
@@ -871,8 +872,8 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/index.js
 - app/pb_kits/playbook/pb_filter/filter.html.erb
 - app/pb_kits/playbook/pb_filter/filter.rb
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
@@ -1012,10 +1013,14 @@ files:
 - app/pb_kits/playbook/pb_hashtag/docs/_footer.md
 - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.html.erb
 - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx
+- app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb
+- app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx
+- app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md
 - app/pb_kits/playbook/pb_hashtag/docs/example.yml
 - app/pb_kits/playbook/pb_hashtag/docs/index.js
 - app/pb_kits/playbook/pb_hashtag/hashtag.html.erb
 - app/pb_kits/playbook/pb_hashtag/hashtag.rb
+- app/pb_kits/playbook/pb_hashtag/hashtag.test.js
 - app/pb_kits/playbook/pb_highlight/_highlight.scss
 - app/pb_kits/playbook/pb_highlight/_highlight.tsx
 - app/pb_kits/playbook/pb_highlight/docs/_description.md
@@ -1038,6 +1043,9 @@ files:
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md
+- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb
+- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx
+- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.html.erb
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx
 - app/pb_kits/playbook/pb_home_address_street/docs/example.yml
@@ -1073,8 +1081,8 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/index.js
 - app/pb_kits/playbook/pb_icon/icon.html.erb
 - app/pb_kits/playbook/pb_icon/icon.rb
-- app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
+- app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
 - app/pb_kits/playbook/pb_icon_circle/docs/_footer.md
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb
@@ -1130,10 +1138,10 @@ files:
 - app/pb_kits/playbook/pb_image/image.html.erb
 - app/pb_kits/playbook/pb_image/image.rb
 - app/pb_kits/playbook/pb_image/image.test.js
-- app/pb_kits/playbook/pb_kit/dateTime.js
+- app/pb_kits/playbook/pb_kit/dateTime.ts
 - app/pb_kits/playbook/pb_kit/pb_date_time.rb
-- app/pb_kits/playbook/pb_label_pill/_label_pill.jsx
 - app/pb_kits/playbook/pb_label_pill/_label_pill.scss
+- app/pb_kits/playbook/pb_label_pill/_label_pill.tsx
 - app/pb_kits/playbook/pb_label_pill/docs/_description.md
 - app/pb_kits/playbook/pb_label_pill/docs/_footer.md
 - app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.html.erb
@@ -1567,8 +1575,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
 - app/pb_kits/playbook/pb_rich_text_editor/useFocus.js
-- app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
+- app/pb_kits/playbook/pb_section_separator/_section_separator.tsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss
 - app/pb_kits/playbook/pb_section_separator/docs/_description.md
 - app/pb_kits/playbook/pb_section_separator/docs/_footer.md
@@ -1860,8 +1868,8 @@ files:
 - app/pb_kits/playbook/pb_textarea/index.js
 - app/pb_kits/playbook/pb_textarea/textarea.html.erb
 - app/pb_kits/playbook/pb_textarea/textarea.rb
-- app/pb_kits/playbook/pb_time/_time.jsx
 - app/pb_kits/playbook/pb_time/_time.scss
+- app/pb_kits/playbook/pb_time/_time.tsx
 - app/pb_kits/playbook/pb_time/docs/_description.md
 - app/pb_kits/playbook/pb_time/docs/_footer.md
 - app/pb_kits/playbook/pb_time/docs/_time_align.html.erb
@@ -1990,15 +1998,27 @@ files:
 - app/pb_kits/playbook/pb_toggle/toggle.html.erb
 - app/pb_kits/playbook/pb_toggle/toggle.rb
 - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
+- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/example.yml
+- app/pb_kits/playbook/pb_tooltip/docs/index.js
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
+- app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
 - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
 - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
 - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
@@ -2052,6 +2072,8 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md
 - app/pb_kits/playbook/pb_typeahead/docs/example.yml
 - app/pb_kits/playbook/pb_typeahead/docs/index.js
 - app/pb_kits/playbook/pb_typeahead/index.js
@@ -2252,11 +2274,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.3.7
+rubygems_version: 3.3.21
 signing_key:
 specification_version: 4
 summary: Playbook Design System

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

@@ -1,138 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
-import Title from '../pb_title/_title'
-
-type PbDateProps = {
-  alignment?: "left" | "center" | "right",
-  aria: Object,
-  className?: string,
-  data?: Object,
-  id?: string,
-  showDayOfWeek?: boolean,
-  showIcon?: boolean,
-  size?: string,
-  value: string | date,
-}
-
-const PbDate = (props: PbDateProps) => {
-  const {
-    aria = {},
-    alignment = 'left',
-    className,
-    data = {},
-    id,
-    showDayOfWeek = false,
-    showIcon = false,
-    size = 'md',
-    value,
-  } = props
-
-  const dateTimestamp = new DateTime({ value: value })
-  const weekday = dateTimestamp.toWeekday()
-  const month = dateTimestamp.toMonth()
-  const day = dateTimestamp.toDay()
-  const year = dateTimestamp.toYear()
-  const currentYear = new Date().getFullYear().toString()
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-
-  const classes = classnames(
-    buildCss('pb_date_kit', alignment),
-    globalProps(props),
-    className
-  )
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <If condition={size == 'md' || size == 'lg'}>
-
-        <Title
-            size={4}
-            tag="h4"
-        >
-          <If condition={showIcon}>
-            <Body
-                className="pb_icon_kit_container"
-                color="light"
-                tag="span"
-            >
-              <Icon
-                  fixedWidth
-                  icon="calendar-alt"
-              />
-            </Body>
-          </If>
-          <If condition={showDayOfWeek}>
-            {weekday}
-            <Body
-                color="light"
-                tag="span"
-                text=" • "
-            />
-          </If>
-          <span>
-            {month}
-            {' '}
-            {day}
-          </span>
-          <If condition={currentYear != year}>
-            <span>
-              {`, ${year}`}
-            </span>
-          </If>
-        </Title>
-        <Else />
-        <>
-          <If condition={showIcon}>
-            <Caption
-                className="pb_icon_kit_container"
-                tag="span"
-            >
-              <Icon
-                  fixedWidth
-                  icon="calendar-alt"
-                  size="sm"
-              />
-            </Caption>
-          </If>
-          <If condition={showDayOfWeek}>
-            <Caption tag="div">
-              {weekday}
-            </Caption>
-            <Caption
-                color="light"
-                tag="div"
-                text=" • "
-            />
-          </If>
-          <Caption tag="span">
-            {month}
-            {' '}
-            {day}
-            <If condition={currentYear != year}>
-              {`, ${year}`}
-            </If>
-          </Caption>
-        </>
-      </If>
-    </div>
-  )
-}
-
-export default PbDate

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -1,93 +0,0 @@
-/* @flow */
-
-import React, { useEffect, useState } from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-
-import Icon from '../pb_icon/_icon'
-import Title from '../pb_title/_title'
-
-const iconMap = {
-  success: 'check',
-  error: 'exclamation-triangle',
-  neutral: 'info-circle',
-  tip: 'info-circle',
-}
-
-type FixedConfirmationToastProps = {
-  className?: string,
-  closeable?: boolean,
-  data?: string,
-  horizontal?: 'right' | 'left' | 'center',
-  id?: string,
-  multiLine?: boolean,
-  onClose?: () => void,
-  open?: boolean,
-  status?: 'success' | 'error' | 'neutral' | 'tip',
-  text: string,
-  vertical?: 'top' | 'bottom',
-}
-
-const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
-  const [showToast, toggleToast] = useState(true)
-  const {
-    className,
-    closeable = false,
-    horizontal,
-    multiLine = false,
-    onClose = () => {},
-    open = true,
-    status = 'neutral',
-    text,
-    vertical,
-  } = props
-  const css = classnames(
-    `pb_fixed_confirmation_toast_kit_${status}`,
-    { '_multi_line': multiLine },
-    { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
-    globalProps(props),
-    className
-  )
-  const icon = iconMap[status]
-
-  useEffect(() => {
-    toggleToast(open)
-  }, [open])
-
-  const handleClick = () => {
-    toggleToast(!closeable)
-    onClose()
-  }
-
-  return (
-    <If condition={showToast}>
-      <div
-          className={css}
-          onClick={handleClick}
-      >
-        <If condition={icon}>
-          <Icon
-              className="pb_icon"
-              fixedWidth
-              icon={icon}
-          />
-        </If>
-        <Title
-            className="pb_fixed_confirmation_toast_text"
-            size={4}
-            text={text}
-        />
-        <If condition={closeable}>
-          <Icon
-              className="pb_icon"
-              fixedWidth={false}
-              icon="times"
-          />
-        </If>
-      </div>
-    </If>
-  )
-}
-
-export default FixedConfirmationToast