playbook_ui 12.30.1 → 12.31.0.pre.alpha.PLAY814removemomentjs933

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be0a7b566ae2becf6f879bd4f1cd39c0c27f487ef1a0a962238469eeec8753c6
-  data.tar.gz: ff75740ac1377ced70e9c9b6dc4dbe78f3f7a4ec7a0320d202f4be2b5c3601cd
+  metadata.gz: fea30ab1eb68b157b59551e983c188dc54b84a10e9298dd872177400ab2d5a1f
+  data.tar.gz: 4f29ee0e00f034cbfa461400630bb81162fb1af25f9898151fbf1c232039de17
 SHA512:
-  metadata.gz: 589840dca5165dd2173a6d2eb01bf95045918ddf958598262a5040cc9e18560ec5cc1cc1073fd522ed50266bb2a3d9fbee1b42ca5eea8d862ffe2a0408e3163f
-  data.tar.gz: d04f64d8a30a45a41541f861c39db6dc82fc21b636e5caa87ec1c889399eaa28fd09374f1994a3266c4cf8bec4d5e3bc80bbe0dfe346a65713b0bdda06c2b321
+  metadata.gz: 22232422c782273e028e8f89ab1a1443dbcc1e3007c67510d8571adee8bc5011f204e4f59e069659ae680e418713b4bed55832c2bb08f879ce4d8d9c7d2b2f23
+  data.tar.gz: 327b369dbe832a1b307c475988368a4b0611d29198a8bb42f77104dc1bf02e17eb2e2cbe75e373702e5206c05a21f8cf5f8e6d1d641b2f91451214450635cffd

data/app/pb_kits/playbook/_playbook.scss

@@ -110,5 +110,7 @@
 @import './utilities/display';
 @import './utilities/flexbox';
 @import './utilities/focus';
+@import './utilities/border_radius';
+@import './utilities/hover';
 
 @import 'pb_multi_level_select/multi_level_select';

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

@@ -37,6 +37,11 @@
     border-radius: $pb_badge_height / 2;
   }
 
+  &[class*=_notification] {
+    background: $primary;
+    color: $white;
+  }
+
   &.dark {
     border-width: 0;
 

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

@@ -24,7 +24,7 @@ type BadgeProps = {
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
   text?: string,
-  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
+  variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
 } & GlobalProps
 const Badge = (props: BadgeProps) => {
   const {

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -6,7 +6,7 @@ module Playbook
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[success warning error info neutral primary],
+                     values: %w[success warning error info neutral notification primary],
                      default: "neutral"
 
       def classname

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -93,3 +93,16 @@ test('displays success variant', () => {
     cleanup()
 
 })
+
+test('displays notification variant', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        text="1"
+        variant="notification"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`pb_badge_kit_notification`)
+  cleanup()
+})

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb

@@ -0,0 +1,12 @@
+<div>
+  <%= pb_rails("badge", props: {
+    text: "1",
+    variant: "notification",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "4",
+    variant: "notification"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Badge from '../_badge'
+
+const BadgeNotification = (props) => {
+  return (
+    <>
+      <Badge
+          rounded
+          text="1"
+          variant="notification"
+          {...props}
+      />
+
+      &nbsp;
+
+      <Badge
+          text="4"
+          variant="notification"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default BadgeNotification

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

@@ -3,9 +3,10 @@ examples:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
- 
+  - badge_notification: Notification
 
   react:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
+  - badge_notification: Notification

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

@@ -1,3 +1,4 @@
 export { default as BadgeDefault } from './_badge_default'
 export { default as BadgeRounded } from './_badge_rounded'
 export { default as BadgeColors } from './_badge_colors'
+export { default as BadgeNotification } from './_badge_notification'

data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx

@@ -0,0 +1,40 @@
+import React from "react"
+import { Button } from "../../"
+
+const ButtonHover = (props) => (
+  <div>
+    <div>
+      <Button
+          hover={{ shadow: "deep" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deep'
+          {...props}
+      />{" "}
+      <Button
+          hover={{ shadow: "deeper" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deeper'
+          variant='secondary'
+          {...props}
+      />{" "}
+      <Button
+          hover={{ shadow: "deepest" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deepest'
+          variant='link'
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default ButtonHover

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

@@ -21,3 +21,4 @@ examples:
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_hover: Button Hover

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

@@ -8,3 +8,4 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
 export { default as ButtonForm } from './_button_form.jsx'
+export { default as ButtonHover } from './_button_hover.jsx'

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

@@ -1,9 +1,9 @@
 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 DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type PbDateProps = {
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
-  value: string | Date;
+  value: Date;
 };
 
 const PbDate = (props: PbDateProps) => {
@@ -37,12 +37,11 @@ const PbDate = (props: PbDateProps) => {
     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 weekday = DateTime.toWeekday(value);
+  const month = DateTime.toMonth(value);
+  const day = DateTime.toDay(value);
+  const year = DateTime.toYear(value);
+  const currentYear = new Date().getFullYear();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);

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

@@ -3,7 +3,7 @@ import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
 import { buildCss, buildDataProps } from "../utilities/props";
-import DateTime from "../pb_kit/dateTime";
+import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -21,18 +21,16 @@ type DateRangeInlineProps = {
   endDate?: Date;
 };
 
-const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
-  const date = new DateTime({ value: dateValue });
+const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
   if (includeYear) {
-    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
   } else {
-    return `${date.toMonth()} ${date.toDay()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
   }
 };
 
-const dateTimeIso = (dateValue: Date | string) => {
-  const date = new DateTime({ value: dateValue });
-  return date.toIso();
+const dateTimeIso = (dateValue: Date) => {
+  return DateTime.toIso(dateValue);
 };
 
 const DateRangeInline = (props: DateRangeInlineProps) => {
@@ -52,14 +50,17 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <>
         {icon && (
           <>
-            <Body color="light" key={Math.random()} tag="span">
-              <Icon
-                className="pb_date_range_inline_icon"
-                dark={dark}
-                fixedWidth
-                icon="calendar-alt"
-                size={size}
+            <Body color="light"
+                key={Math.random()}
                 tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_icon"
+                  dark={dark}
+                  fixedWidth
+                  icon="calendar-alt"
+                  size={size}
+                  tag="span"
               />
             </Body>
           </>
@@ -78,7 +79,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
-  const renderTime = (date: Date | string) => {
+  const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
@@ -92,24 +93,30 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   return (
     <div
-    {...dataProps}
-      className={classnames(dateRangeClasses, globalProps(props), className)}
+        {...dataProps}
+        className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
         {size == "xs" && (
           <>
             {iconContent()}
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               <Icon
-                className="pb_date_range_inline_arrow"
-                fixedWidth
-                icon="long-arrow-right"
+                  className="pb_date_range_inline_arrow"
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Caption>
           </>
@@ -118,18 +125,25 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
         {size == "sm" && (
           <>
             {iconContent()}
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Body>
-            <Body color="light" dark={dark} tag="span">
-              <Icon
-                className="pb_date_range_inline_arrow"
+            <Body color="light"
                 dark={dark}
-                fixedWidth
-                icon="long-arrow-right"
+                tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_arrow"
+                  dark={dark}
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Body>
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Body>
           </>

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

@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
   className?: string | string[],
   data?: string,
   dark?: boolean,
-  endDate: string,
+  endDate: Date,
   id?: string,
-  startDate: string,
+  startDate: Date,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
@@ -29,7 +29,9 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
   const dataProps = buildDataProps(data)
 
   return (
-    <div {...dataProps} className={css}>
+    <div {...dataProps}
+        className={css}
+    >
       <Flex vertical="center">
         <FlexItem>
           <DateYearStacked

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

@@ -1,9 +1,9 @@
 import React from "react";
 
 import classnames from "classnames";
-import DateTime from "../pb_kit/dateTime";
 import { buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 
 import Caption from "../pb_caption/_caption";
 import Title from "../pb_title/_title";
@@ -14,7 +14,7 @@ type DateStackedProps = {
   className?: string | string[];
   dark?: boolean;
   data?: string;
-  date: string | Date;
+  date: Date;
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -45,39 +45,42 @@ const DateStacked = (props: DateStackedProps) => {
     className
   );
 
-  const currentYear = new Date().getFullYear().toString();
-  const dateTimestamp = new DateTime({ value: date });
-  const inputYear = dateTimestamp.toYear().toString();
+  const currentYear = new Date().getFullYear()
+  const inputYear = DateTime.toYear(date);
   const dataProps = buildDataProps(data)
 
   return (
     <>
       {bold == false ? (
-        <div {...dataProps} className={classes}>
+        <div {...dataProps}
+            className={classes}
+        >
           <div className="pb_date_stacked_day_month">
-            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Caption text={DateTime.toMonth(date).toUpperCase()} />
             <Title
-              dark={dark}
-              size={sizes[size]}
-              text={dateTimestamp.toDay()}
+                dark={dark}
+                size={sizes[size]}
+                text={DateTime.toDay(date).toString()}
             />
           </div>
           {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div {...dataProps} className={classes}>
+          <div {...dataProps}
+              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={DateTime.toMonth(date)}
               />
-              <Title 
-                bold 
-                dark={dark} 
-                size="4" 
-                text={dateTimestamp.toDay()} 
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={DateTime.toDay(date).toString()}
               />
               {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
             </div>

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -13,7 +13,7 @@ type DateTimeProps = {
   aria?: { [key: string]: string; },
   className?: string,
   data?: { [key: string]: string; },
-  datetime: string,
+  datetime: Date,
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js

@@ -89,7 +89,7 @@ describe('DateTime Kit', () => {
     const kit = screen.getByTestId(testId)
     const text = kit.querySelector('.pb_time_kit_md.ml_sm')
 
-    expect(text.textContent).toEqual('2:00p JST')
+    expect(text.textContent).toEqual('2:00p GMT+9')
   })
   test('renders DatePicker size', () => {
     render(

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

@@ -12,8 +12,8 @@ import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
   id?: string,
-  date: string,
-  datetime: string,
+  date: Date,
+  datetime: Date,
   dark: boolean,
   timeZone?: string,
 }

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

@@ -34,7 +34,7 @@ test('renders time in default timezone', () => {
 test('renders time in timezone', () => {
   props.timeZone = 'Asia/Tokyo'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
+  expect(kit).toHaveTextContent(`${monthDayYear}2:00aGMT+9`)
 })
 
 test('renders time in timezone', () => {

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import DateTime from '../pb_kit/dateTime'
 import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import DateTime from '../pb_kit/dateTime';
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -13,13 +13,12 @@ type DateYearStackedProps = {
   className?: string | string[],
   dark?: boolean,
   data?: string,
-  date: string,
+  date: Date,
   id?: string,
 }
 
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date, data={} } = props
-  const dateTimestamp = new DateTime({ value: date })
   const css = classnames(
     buildCss('pb_date_year_stacked', align),
     globalProps(props),
@@ -29,15 +28,14 @@ const DateYearStacked = (props: DateYearStackedProps) => {
 
   return (
     <div {...dataProps}
-    className={css}>
+        className={css}
+    >
       <Title
           dark={dark}
           size={4}
-          text={`${dateTimestamp.toDay()} ${dateTimestamp
-          .toMonth()
-          .toUpperCase()}`}
+          text={`${DateTime.toDay(date)} ${DateTime.toMonth(date).toUpperCase()}`}
       />
-      <Body color="light">{dateTimestamp.toYear()}</Body>
+      <Body color="light">{DateTime.toYear(date)}</Body>
     </div>
   )
 }