RubyGems - playbook_ui - Versions diffs - 12.30.1 → 12.31.0.pre.alpha.PLAY814removemomentjs935 - Mend

playbook_ui 12.30.1 → 12.31.0.pre.alpha.PLAY814removemomentjs935

Files changed (74) hide show

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_title/_title.scss CHANGED Viewed

@@ -1,5 +1,6 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import "../tokens/screen_sizes";
 @import './title_mixin';
 [class^=pb_title_kit]{
@@ -33,4 +34,21 @@
   &[class*=_thin] {
     @include pb_title_thin;
   }
+  @each $size, $size_value in $breakpoints_grid {
+    @each $title_size_value in [1, 2, 3, 4] {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        &[class*=_#{$size}_#{$title_size_value}] {
+          @include break_on($min_size, $max_size) {
+            @if $title_size_value == 1 { @include pb_title_1; }
+            @else if $title_size_value == 2 { @include pb_title_2; }
+            @else if $title_size_value == 3 { @include pb_title_3; }
+            @else if $title_size_value == 4 { @include pb_title_4; }
+            @include title_colors;
+            @if $title_size_value != 4 { @include pb_title_bold; }
+          }
+        }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx CHANGED Viewed

@@ -3,6 +3,9 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
+type SizeResponsiveType = {[key: string]: SizeType}
 type TitleProps = {
   aria?: {[key: string]: string},
   bold?: boolean,
@@ -11,7 +14,7 @@ type TitleProps = {
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
   id?: string,
-  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
+  size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -36,9 +39,24 @@ const Title = (props: TitleProps): React.ReactElement => {
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const getBold = bold ? '' : 'thin'
+  const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
+  const buildResponsiveSizeCss = () => {
+    let css = ''
+    if (!isSizeNumberOrString) {
+      Object.entries(size).forEach((sizeObj) => {
+        css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
+      })
+    }
+    return css.trim()
+  }
   const classes = classnames(
-    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
+    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
+    buildResponsiveSizeCss(),
     className
   )
   const Tag: React.ReactElement | any = `${tag}`

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.html.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <%= pb_rails("title", props: { text: "Responsive Title", tag: "h1", size: {xs: 3, sm: 2, md: 1} }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.jsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react'
+import Title from '../_title'
+const TitleResponsive = (props) => {
+  return (
+    <>
+      <Title
+          size={{xs: "3", sm: "2", md: "1"}}
+          text="Responsive Title"
+          {...props}
+      />
+    </>
+  )
+}
+export default TitleResponsive

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The `size` prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.

data/app/pb_kits/playbook/pb_title/docs/example.yml CHANGED Viewed

@@ -3,8 +3,10 @@ examples:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
+  - title_responsive: Responsive
   react:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
+  - title_responsive: Responsive

data/app/pb_kits/playbook/pb_title/docs/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export { default as TitleDefault } from './_title_default.jsx'
 export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
+export { default as TitleResponsive } from './_title_responsive.jsx'

data/app/pb_kits/playbook/pb_title/title.rb CHANGED Viewed

@@ -6,9 +6,7 @@ module Playbook
       prop :color, type: Playbook::Props::Enum,
                    values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
-      prop :size, type: Playbook::Props::Enum,
-                  values: [1, 2, 3, 4],
-                  default: 3
+      prop :size, default: 3
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
@@ -20,12 +18,31 @@ module Playbook
       prop :bold, type: Playbook::Props::Boolean, default: true
       def classname
-        generate_classname("pb_title_kit", size, variant, color, is_bold)
+        if is_size_responsive
+          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
+        else
+          generate_classname("pb_title_kit", size, variant, color, is_bold)
+        end
       end
       def is_bold
         bold ? nil : "thin"
       end
+      def is_size_responsive
+        try(:size).is_a?(::Hash)
+      end
+      def generate_responsive_size_classname
+        css = ""
+        if is_size_responsive
+          size.each do |key, value|
+            css += " pb_title_kit_#{key}_#{value}"
+          end
+        end
+        css unless css.blank?
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_title/title.test.js CHANGED Viewed

@@ -4,39 +4,52 @@ import { render, screen } from '../utilities/test-utils'
 import Title from './_title'
 test('returns namespaced class name', () => {
-  render(
-    <Title
-        data={{ testid: 'primary-test' }}
-        text="Test colors"
-    />
-  )
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3')
+    render(
+        <Title
+            data={{ testid: 'primary-test' }}
+            text="Test colors"
+        />
+    )
+    const kit = screen.getByTestId('primary-test')
+    expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 test('with thin font weight', () => {
-  render(
-    <Title
-        bold={false}
-        data={{ testid: 'primary-test' }}
-        text="Test thin font weight"
-    />
-  )
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+    render(
+        <Title
+            bold={false}
+            data={{ testid: 'primary-test' }}
+            text="Test thin font weight"
+        />
+    )
+    const kit = screen.getByTestId('primary-test')
+    expect(kit).toHaveClass('pb_title_kit_size_3_thin')
 })
 test('with colors', () => {
-  render(
-    <Title
-        color="success"
-        data={{ testid: 'primary-test' }}
-        text="Test colors"
-    />
-  )
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_success')
+    render(
+        <Title
+            color="success"
+            data={{ testid: 'primary-test' }}
+            text="Test colors"
+        />
+    )
+    const kit = screen.getByTestId('primary-test')
+    expect(kit).toHaveClass('pb_title_kit_size_3_success')
+})
+test('with responsive title', () => {
+    render(
+        <Title
+            data={{ testid: 'primary-test' }}
+            size={{ xs: "3", sm: "2", md: "1" }}
+            text="Responsive Title"
+        />
+    )
+    const kit = screen.getByTestId('primary-test')
+    expect(kit).toHaveClass('pb_title_kit pb_title_kit_xs_3 pb_title_kit_sm_2 pb_title_kit_md_1')
 })

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/_scale.scss ADDED Viewed

@@ -0,0 +1,9 @@
+$scale_sm: scale(1.05);
+$scale_md: scale(1.1);
+$scale_lg: scale(1.15);
+$scales: (
+  scale_sm: $scale_sm,
+  scale_md: $scale_md,
+  scale_lg: $scale_lg,
+);

data/app/pb_kits/playbook/tokens/exports/_scale.scss ADDED Viewed

@@ -0,0 +1,13 @@
+@import "../scale";
+:export {
+  @mixin export-hover-scale-classes($scales-list) {
+    @each $name, $scale in $scales-list {
+      .hover_#{$name}:hover {
+        transform: $scale;
+      }
+    }
+  }
+  @include export-hover-scale-classes($scales);
+}

data/app/pb_kits/playbook/utilities/_border_radius.scss ADDED Viewed

@@ -0,0 +1,31 @@
+@import "../tokens/exports/border_radius";
+$transition-speed: 0.2s;
+.border_radius {
+  @mixin border-example {
+    transition: background-color $transition-speed ease, height $transition-speed ease;
+  }
+  &_rounded {
+    border-radius: $border_radius_rounded;
+  }
+  &_xl {
+    border-radius: $border_radius_xl;
+  }
+  &_lg {
+    border-radius: $border_radius_lg;
+  }
+  &_md {
+    border-radius: $border_radius_md;
+  }
+  &_sm {
+    border-radius: $border_radius_sm;
+  }
+  &_xs {
+    border-radius: $border_radius_xs;
+  }
+  &_none {
+    border-radius: $border_radius_none;
+  }
+}

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

@@ -1,5 +1,7 @@
 // Color Helper Utilities
+$transition-speed: 0.2s;
 @function shade($color, $percentage) {
   @return mix($charcoal, $color, $percentage);
 }
@@ -27,6 +29,7 @@
   }
 }
 @mixin text-color($colors-list) {
   @each $name, $color in $colors-list {
     .#{$name} {