RubyGems - playbook_ui - Versions diffs - 12.32.0 → 12.33.0.pre.alpha.PLAY905reactionbuttons979 - Mend

playbook_ui 12.32.0 → 12.33.0.pre.alpha.PLAY905reactionbuttons979

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
 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";
@@ -26,9 +26,9 @@ type LabelValueProps = {
   title?: string;
 };
-const dateString = (value: DateTime) => {
-  const month = value.toMonthNum();
-  const day = value.toDay();
+const dateString = (value: Date) => {
+  const month = DateTime.toMonthNum(value);
+  const day = DateTime.toDay(value);
   return ` · ${month}/${day}`;
 };
@@ -52,7 +52,6 @@ const LabelValue = (props: LabelValueProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const formattedDate = new DateTime({ value: date });
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -62,59 +61,81 @@ const LabelValue = (props: LabelValueProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
-      title={title}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+        title={title}
     >
-      <Caption dark={dark} text={label} />
+      <Caption dark={dark}
+          text={label}
+      />
       {variant === "details" ? (
-        <Flex inline vertical="center">
+        <Flex inline
+            vertical="center"
+        >
           {icon && (
-            <Body color="light" dark={dark} marginRight="xs">
-              <Icon dark={dark} fixedWidth icon={icon} />
+            <Body color="light"
+                dark={dark}
+                marginRight="xs"
+            >
+              <Icon dark={dark}
+                  fixedWidth
+                  icon={icon}
+              />
             </Body>
           )}
           {description && (
             <Body
-              color="light"
-              dark={dark}
-              marginRight="xs"
-              text={description}
+                color="light"
+                dark={dark}
+                marginRight="xs"
+                text={description}
             />
           )}
           {active === true ? (
-            <Flex inline vertical="center">
+            <Flex inline
+                vertical="center"
+            >
               {title && (
-                <Title dark={dark} size={4} text={title} variant="link" />
+                <Title dark={dark}
+                    size={4}
+                    text={title}
+                    variant="link"
+                />
               )}
               {date && (
                 <Title
-                  dark={dark}
-                  marginLeft="xs"
-                  size={4}
-                  text={" " + dateString(formattedDate)}
-                  variant="link"
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={" " + dateString(date)}
+                    variant="link"
                 />
               )}
             </Flex>
           ) : (
             <>
-              {title && <Title dark={dark} size={4} text={title} />}
+              {title && <Title dark={dark}
+                  size={4}
+                  text={title}
+                        />
+              }
               {date && (
                 <Title
-                  dark={dark}
-                  marginLeft="xs"
-                  size={4}
-                  text={" " + dateString(formattedDate)}
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={" " + dateString(date)}
                 />
               )}
             </>
           )}
         </Flex>
       ) : (
-        <Body dark={dark} text={value} />
+        <Body dark={dark}
+            text={value}
+        />
       )}
     </div>
   );

data/app/pb_kits/playbook/pb_map/_map.scss CHANGED Viewed

@@ -141,6 +141,10 @@
     .map-flyto-button {
       @include pb_map_button;
+      .pb_button_content {
+        height: $space_sm;
+      }
       svg {
         width: $space_xs + 6;
         height: $space_sm;

data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ type MessageProps = {
   label?: string,
   message: string,
   timestamp?: string,
-  timestampObject?: string,
+  timestampObject?: Date,
   timezone?: string,
   alignTimestamp?: string,
 }
@@ -61,50 +61,50 @@ const Message = (props: MessageProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       {shouldDisplayAvatar &&
         <Avatar
-          imageUrl={avatarUrl}
-          name={avatarName}
-          size="xs"
-          status={avatarStatus}
+            imageUrl={avatarUrl}
+            name={avatarName}
+            size="xs"
+            status={avatarStatus}
         />
       }
       <div className="content_wrapper">
         <Flex
-          justify={alignTimestamp === 'left' ? 'none' : 'between'}
-          orientation="row"
+            justify={alignTimestamp === 'left' ? 'none' : 'between'}
+            orientation="row"
         >
           {label &&
             <Title
-              className="message_title"
-              size={4}
-              text={label}
+                className="message_title"
+                size={4}
+                text={label}
             />
           }
           <Timestamp
-            className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
-            text={timestamp}
-            timestamp={''}
-            timezone={timezone}
+              className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
+              text={timestamp}
+              timestamp={''}
+              timezone={timezone}
           />
           {timestampObject &&
             <Timestamp
-              className={`pull-${alignTimestamp} message_timestamp`}
-              text={''}
-              timestamp={timestampObject}
-              timezone={timezone}
+                className={`pull-${alignTimestamp} message_timestamp`}
+                text={''}
+                timestamp={timestampObject}
+                timezone={timezone}
             />
           }
         </Flex>
         {message &&
           <Body
-            className="pb_message_body"
-            text={message}
+              className="pb_message_body"
+              text={message}
           />
         }
         {children}

data/app/pb_kits/playbook/pb_time/_time.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
-import DateTime from "../pb_kit/dateTime";
 import { buildCss } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -13,7 +13,7 @@ type TimeProps = {
   align?: "left" | "center" | "right";
   className?: string | string[];
   data?: string;
-  date: string;
+  date: Date;
   dark?: boolean;
   id?: string;
   showIcon?: boolean;
@@ -41,8 +41,6 @@ const Time = (props: TimeProps) => {
     className
   );
-  const dateTimestamp = new DateTime({ value: date, zone: timeZone });
   return (
     <div className={classes}>
       {showIcon && (
@@ -70,18 +68,18 @@ const Time = (props: TimeProps) => {
             )
       )}
-      <time dateTime={date}>
+      <time dateTime={date.toString()}>
         <span>
           {unstyled
             ? (
                 <>
                   <span>
-                    {dateTimestamp.toTimeWithMeridian()}
+                    {DateTime.toTimeWithMeridiem(date, timeZone)}
                   </span>
                   {" "}
                   {showTimezone && (
                     <span>
-                      {dateTimestamp.toTimezone()}
+                      {DateTime.toTimeZone(date, timeZone)}
                     </span>
                   )}
                 </>
@@ -92,13 +90,13 @@ const Time = (props: TimeProps) => {
                     <Body
                         className="pb_time"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Body
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>
@@ -108,13 +106,13 @@ const Time = (props: TimeProps) => {
                     <Caption
                         color="light"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Caption
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
+import DateTime from '../pb_kit/dateTime';
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -19,23 +19,20 @@ type TimeRangeInlineProps = {
   dark?: boolean,
   icon?: boolean,
   timezone?: boolean,
-  startTime: string,
-  endTime: string,
+  startTime: Date,
+  endTime: Date,
 } & GlobalProps
-const timezoneString = (dateValue: string) => {
-  const date = new DateTime({ value: dateValue })
-  return `${date.convertToTimezone()}`
+const timezoneString = (dateValue: Date) => {
+  return `${DateTime.toTimeZone(dateValue)}`
 }
-const dateTimestamp = (dateValue: string) => {
-  const date = new DateTime({ value: dateValue })
-  return `${date.toHour()}:${date.toMinute()}${date.toMeridian()}`
+const dateTimestamp = (dateValue: Date) => {
+  return `${DateTime.toHour(dateValue)}:${DateTime.toMinute(dateValue)}${DateTime.toMeridiem(dateValue)}`
 }
-const dateTimeIso = (dateValue: string) => {
-  const date = new DateTime({ value: dateValue })
-  return date.toIso()
+const dateTimeIso = (dateValue: Date) => {
+  return DateTime.toIso(dateValue)
 }
 const TimeRangeInline = (props: TimeRangeInlineProps) => {
@@ -59,10 +56,10 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
   const separator = (
     <Body color="light">
       <Icon
-        className="pb_time_range_inline_arrow"
-        dark={dark}
-        fixedWidth
-        icon="long-arrow-right"
+          className="pb_time_range_inline_arrow"
+          dark={dark}
+          fixedWidth
+          icon="long-arrow-right"
       />
     </Body>
   )
@@ -71,16 +68,16 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
     return (
       icon &&
       <Body
-        color="light"
-        tag="span"
+          color="light"
+          tag="span"
       >
         <Icon
-          className="pb_time_range_inline_icon"
-          dark={dark}
-          fixedWidth
-          icon="clock"
-          size={size}
-          tag="span"
+            className="pb_time_range_inline_icon"
+            dark={dark}
+            fixedWidth
+            icon="clock"
+            size={size}
+            tag="span"
         />
       </Body>
     )
@@ -88,17 +85,17 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
+        id={id}
     >
       <div className="pb_time_range_inline_wrapper">
         {size == 'xs' &&
           <>
             <Caption
-              dark={dark}
-              tag="span"
+                dark={dark}
+                tag="span"
             >
               {iconContent()}
               <time dateTime={dateTimeIso(startTime)}>
@@ -108,15 +105,15 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
               </time>
             </Caption>
             <Caption
-              className="pb_time_range_inline_arrow"
-              dark={dark}
-              tag="span"
+                className="pb_time_range_inline_arrow"
+                dark={dark}
+                tag="span"
             >
               {separator}
             </Caption>
             <Caption
-              dark={dark}
-              tag="span"
+                dark={dark}
+                tag="span"
             >
               <time dateTime={dateTimeIso(endTime)}>
                 {` ${dateTimestamp(
@@ -126,9 +123,9 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
             </Caption>
             {timezone &&
               <Caption
-                className="pb_time_range_inline_timezone"
-                dark={dark}
-                tag="span"
+                  className="pb_time_range_inline_timezone"
+                  dark={dark}
+                  tag="span"
               >
                 {timezoneString(endTime)}
               </Caption>
@@ -138,8 +135,8 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
         {size == 'sm' &&
           <>
             <Body
-              dark={dark}
-              tag="span"
+                dark={dark}
+                tag="span"
             >
               {iconContent()}
               <time dateTime={dateTimeIso(startTime)}>
@@ -149,15 +146,15 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
               </time>
             </Body>
             <Body
-              className="pb_time_range_inline_arrow"
-              dark={dark}
-              tag="span"
+                className="pb_time_range_inline_arrow"
+                dark={dark}
+                tag="span"
             >
               {separator}
             </Body>
             <Body
-              dark={dark}
-              tag="span"
+                dark={dark}
+                tag="span"
             >
               <time dateTime={dateTimeIso(endTime)}>
                 {` ${dateTimestamp(
@@ -167,10 +164,10 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
             </Body>
             {timezone &&
               <Body
-                className="pb_time_range_inline_timezone"
-                color="light"
-                dark={dark}
-                tag="span"
+                  className="pb_time_range_inline_timezone"
+                  color="light"
+                  dark={dark}
+                  tag="span"
               >
                 {timezoneString(endTime)}
               </Body>

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx CHANGED Viewed

@@ -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 { deprecatedProps, globalProps } from '../utilities/globalProps'
+import DateTime from '../pb_kit/dateTime';
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -13,7 +13,7 @@ type TimeStackedProps = {
   className?: string | string[],
   dark?: boolean,
   data?: { [key: string]: string },
-  date?: string,
+  date?: Date,
   id?: string,
   time?: number | Date,
   timeZone?: string,
@@ -39,8 +39,6 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
   )
   const dataProps = buildDataProps(data)
-  const dateTimestamp = new DateTime({ value: date ? date : new Date(time), zone: timeZone })
   return (
     <div
         className={classes}
@@ -52,13 +50,13 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
           dark={dark}
       >
         <time>
-          {dateTimestamp.toTimeWithMeridian()}
+          {DateTime.toTimeWithMeridiem(date ? date : new Date(time), timeZone)}
           <Caption
               className="pb_time_stacked"
               color="light"
               dark={dark}
               tag="span"
-              text={dateTimestamp.toTimezone()}
+              text={DateTime.toTimeZone(date ? date : new Date(time), timeZone)}
           />
         </time>
       </Body>

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx CHANGED Viewed

@@ -1,9 +1,10 @@
 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 Caption from '../pb_caption/_caption'
@@ -14,7 +15,7 @@ type TimestampProps = {
   dark?: boolean,
   data?: string,
   text: string,
-  timestamp: string,
+  timestamp: Date | string,
   timezone: string,
   id?: string,
   showDate?: boolean,
@@ -32,8 +33,8 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     dark = false,
     data = {},
     text,
-    timestamp,
     timezone,
+    timestamp,
     showDate = true,
     showUser = false,
     hideUpdated = false,
@@ -53,26 +54,25 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   )
   const currentYear = new Date().getFullYear().toString()
-  const dateTimestamp = new DateTime({ value: timestamp, zone: timezone })
-  const dateDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
+  const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
   const shouldShowUser = showUser == true && text.length > 0
   const shouldShowTimezone = showTimezone == true && timezone.length > 0
   const updatedText = hideUpdated ? "" : "Last updated"
   const userDisplay = shouldShowUser ? ` by ${text}` : ''
-  let timeDisplay = `${dateTimestamp.toHour()}:${dateTimestamp.toMinute()}${dateTimestamp.toMeridian()}`
+  let timeDisplay = `${DateTime.toHour(timestamp, timezone)}:${DateTime.toMinute(timestamp, timezone)}${DateTime.toMeridiem(timestamp, timezone)}`
   const fullTimeDisplay = () => {
     if (shouldShowTimezone) {
-      timeDisplay = `${timeDisplay} ${dateTimestamp.toTimezone()}`
+      timeDisplay = `${timeDisplay} ${DateTime.toTimeZone(timestamp, timezone)}`
     }
     return timeDisplay
   }
   const fullDateDisplay = () => {
-    let fullDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
-    if (dateTimestamp.toYear() !== currentYear) {
-      fullDisplay = `${fullDisplay}, ${dateTimestamp.toYear()}`
+    let fullDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
+    if (DateTime.toYear(timestamp, timezone).toString() !== currentYear) {
+      fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
     }
     return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
   }
@@ -82,7 +82,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   }
   const formatElapsedString = () => {
-    return `${updatedText} ${userDisplay} ${dateTimestamp.value.fromNow()}`
+    return `${updatedText} ${userDisplay} ${DateTime.fromNow(timestamp)}`
   }
   const captionText = () => {

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx CHANGED Viewed

@@ -7,8 +7,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
-import DateTime from '../pb_kit/dateTime'
+import DateTime from '../pb_kit/dateTime';
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
@@ -22,22 +21,20 @@ type WeekdayStackedProps = {
   compact?: boolean,
 }
-const getDayOfWeek = (value: Date | string, compact: boolean) => {
-  const dateTime = new DateTime({ value })
+const getDayOfWeek = (value: Date, compact: boolean) => {
   if (compact) {
-    return dateTime.toDayAbbr()
+    return DateTime.toDayAbbr(value)
   } else {
-    return dateTime.toWeekday()
+    return DateTime.toWeekday(value)
   }
 }
-const getFormattedDate = (value: Date | string, variant: "day_only" | "month_day" | "expanded") => {
-  const dateTime = new DateTime({ value })
+const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expanded")  => {
   if (variant === 'day_only') {
-    return dateTime.toDay()
+    return DateTime.toDay(value).toString()
   } else {
-    const format = variant === 'expanded' ? '%b %-d' : '%-m/%-d'
-    return dateTime.toCustomFormat(format)
+    const format = variant === 'expanded' ? 'expanded' : 'month_day'
+    return DateTime.toCustomFormat(value, format)
   }
 }

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

@@ -75,10 +75,12 @@ $card_colors: (
 );
 $primary-action:      $primary !default;
-$secondary-action:    rgba($primary_action, 0.05) !default;
+$secondary_action:    rgba($primary_action, 0.05) !default;
+$primary_action_dark: #0082ff !default;
 $action_colors: (
-  primary_action:            $primary-action
+  primary_action:            $primary-action,
+  primary_action_dark:       $primary_action_dark
 );
 /* Active colors ----------------------*/