playbook_ui 11.4.0 → 11.5.0.pre.alpha.datepicker1

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -12,6 +12,8 @@ module Playbook
       prop :align,  type: Playbook::Props::Enum,
                     values: %w[left center right],
                     default: "left"
+      prop :hide_updated, type: Playbook::Props::Boolean,
+                          default: false
       prop :show_date, type: Playbook::Props::Boolean,
                        default: true
       prop :show_timezone, type: Playbook::Props::Boolean,
@@ -70,8 +72,9 @@ module Playbook
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
         datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
+        updated_string = hide_updated ? "" : "Last updated"
 
-        "Last updated#{user_string}#{datetime_string}"
+        "#{updated_string}#{user_string}#{datetime_string}"
       end
 
       def datetime_or_text

data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js

@@ -0,0 +1,164 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import Timestamp from "./_timestamp";
+
+const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.setSystemTime(new Date(TEST_DATE));
+
+const testId = "timestamp-kit";
+const realDate = Date;
+const futureDate = new Date(
+  new Date().getFullYear() + 4,
+  new Date().getMonth(),
+  new Date().getDate(),
+  new Date().getHours(),
+  new Date().getMinutes()
+);
+
+beforeEach(() => {
+  global.Date.now = jest.fn(() => new Date(TEST_DATE).getTime());
+});
+
+afterEach(() => {
+  global.Date = realDate;
+});
+
+describe("Timestamp Kit", () => {
+  test("renders Timestamp className", () => {
+    render(
+      <Timestamp
+          align="left"
+          data={{ testid: testId }}
+          showDate
+          timestamp={new Date(Date.now())}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_timestamp_kit_left_variant");
+  });
+
+  test("renders Timestamp time", () => {
+    render(
+      <Timestamp
+          align="left"
+          data={{ testid: testId }}   
+          showDate={false}
+          timestamp={new Date(Date.now())}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_xs");
+    expect(text.textContent).toEqual("12:00a");
+  });
+
+  test("renders Timestamp date and time with future year", () => {
+    render(
+      <Timestamp
+          align="left"
+          data={{ testid: testId }}
+          showDate
+          timestamp={new Date(futureDate)}
+      />
+    );
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_xs");
+    expect(text.textContent).toEqual("Jan 1, 2024  ·  12:00a");
+  });
+
+  test("renders Timestamp className with alignment", () => {
+    render(
+      <Timestamp
+          align="center"
+          data={{ testid: testId }}
+          showDate
+          timestamp={new Date(Date.now())}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_timestamp_kit_center_variant");
+  });
+
+  test("renders Timestamp timezone", () => {
+    render(
+      <Timestamp
+          align="left"
+          data={{ testid: testId }}
+          showDate={false}
+          showTimezone
+          timestamp={new Date()}
+          timezone="America/New_York"
+      />
+    );
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_xs");
+    expect(text.textContent).toEqual("12:00a EST");
+  });
+
+  test("renders Timestamp updated variant with user", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showDate={false}
+          showUser
+          text="Maricris Nonato"
+          timestamp={new Date()}
+          variant="updated"
+      />
+    );
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_xs");
+    expect(text.textContent).toEqual(
+      "Last updated  by Maricris Nonato on Jan 1 at 12:00a"
+    );
+  });
+
+  test("renders Timestamp updated variant without user", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showDate={false}
+          timestamp={new Date()}
+          variant="updated"
+      />
+    );
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_xs");
+    expect(text.textContent).toEqual("Last updated  on Jan 1 at 12:00a");
+  });
+
+  test("renders Timestamp elapsed variant with user", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showUser
+          text="Maricris Nonato"
+          timestamp={new Date()}
+          variant="elapsed"
+      />
+    );
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_xs");
+    expect(text.textContent).toEqual(
+      "Last updated  by Maricris Nonato a few seconds ago"
+    );
+  });
+
+  test("renders Timestamp elapsed variant without user and without updated text", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          hideUpdated
+          showUser={false}
+          timestamp={new Date()}
+          variant="elapsed"
+      />
+    );
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_xs");
+    expect(text.textContent).toEqual("  a few seconds ago");
+  });
+});

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -1,5 +1,3 @@
-/* @flow*/
-
 import React, { useRef, useState } from "react"
 import classnames from "classnames"
 import {
@@ -41,8 +39,6 @@ const Tooltip = (props: TooltipProps) => {
     ...rest
   } = props
 
-  console.log(rest)
-
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
 

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cleanup, render, screen, fireEvent } from "../utilities/test-utils";
+import { cleanup, render, screen, fireEvent, waitFor } from "../utilities/test-utils";
 import { Button, Tooltip } from "..";
 
 function TooltipTest() {
@@ -30,21 +30,24 @@ test("renders the component", () => {
   cleanup();
 });
 
-test("opens on mouseenter", () => {
+test("opens on mouseenter", async () => {
   render(<TooltipTest />);
 
   fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
-  expect(screen.queryByRole("tooltip")).toBeInTheDocument();
-
-  cleanup();
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+    cleanup();
+  })
 });
 
-test("closes on mouseleave", () => {
+test("closes on mouseleave", async () => {
   render(<TooltipTest />);
 
   fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
   fireEvent.mouseLeave(screen.getByRole("tooltip_trigger"));
-  expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
 
-  cleanup();
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+    cleanup();
+  })
 });

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/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,5 +1,5 @@
 
-$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
+$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 
 /* CLEAN UP AND REMOVE */
@@ -53,12 +53,12 @@ $lspace_super_loosest:    .2em;
 
 
 /* Standard Font Weights */
-$bold:          600;
-$regular:       400;
+$bold:          600 !default;
+$regular:       400 !default;
 
 /* Non_Standard Font Weights */
-$extrabold:     900;
-$boldest:       800;
-$bolder:        700;
-$light:         300;
-$lighter:       100;
+$extrabold:     900 !default;
+$boldest:       800 !default;
+$bolder:        700 !default;
+$light:         300 !default;
+$lighter:       100 !default;

data/app/pb_kits/playbook/utilities/_flexbox.scss

@@ -1,11 +1,11 @@
-@import './utilities/flex_direction';
-@import './utilities/justify_content';
-@import './utilities/flex_wrap';
-@import './utilities/justify_self';
-@import './utilities/align_items';
-@import './utilities/align_content';
-@import './utilities/align_self';
-@import './utilities/flex';
-@import './utilities/flex_grow';
-@import './utilities/flex_shrink';
-@import './utilities/order';
+@import './flexbox_global_props/flex_direction';
+@import './flexbox_global_props/justify_content';
+@import './flexbox_global_props/flex_wrap';
+@import './flexbox_global_props/justify_self';
+@import './flexbox_global_props/align_items';
+@import './flexbox_global_props/align_content';
+@import './flexbox_global_props/align_self';
+@import './flexbox_global_props/flex';
+@import './flexbox_global_props/flex_grow';
+@import './flexbox_global_props/flex_shrink';
+@import './flexbox_global_props/order';

data/app/pb_kits/playbook/utilities/props.ts

@@ -47,5 +47,5 @@ export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
  * @returns {String} the derived root className value.
  */
-export const buildCss = (...rules: (string | { [x: string]: string; })[]): string => classnames(rules).replace(/\s/g, '_')
+export const buildCss = (...rules: (string | { [x: string]: string | boolean; })[]): string => classnames(rules).replace(/\s/g, '_')
 

data/app/pb_kits/playbook/utilities/test-utils.js

@@ -37,9 +37,8 @@ export const renderKit = (Kit, props = {}, newProps = {}) => {
 
 export const ensureAccessible = async (Kit, props = {}, newProps = {}) => {
   const kitProps = { ...props, ...newProps }
-  const render = () => <Kit {...kitProps} />
-  const html = render()
-  expect(await axe(html)).toHaveNoViolations()
+  render(<Kit {...kitProps} />)
+  expect(await axe(screen.getByTestId(kitProps.data.testid))).toHaveNoViolations()
 }
 
 export const appendAlert = (message) => {

data/app/pb_kits/playbook/utilities/text.ts

@@ -10,7 +10,7 @@ export const titleize = (sentence: string): string => (
 
 const notEmpty = (value: string | Record<string, unknown>): boolean => !isEmpty(value)
 
-export const joinPresent = (array: [], separator: string): string => (
+export const joinPresent = (array: string[], separator: string): string => (
   filter(array, notEmpty).join(separator)
 )
 

data/lib/playbook/version.rb

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