playbook_ui 13.3.0 → 13.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f58a60dbe08112a0b7b1cea36c7838386d7b7577809d4030a9b139b179df83d
-  data.tar.gz: 4bfb13a37f222531335ffa4b950026c1f0c7daeb2b33aecf3cf06fd02fa3684a
+  metadata.gz: 4de8135dcb47909b6c71e27192382cc5ab8890bc54c6e1d5cb4c624553cc65a2
+  data.tar.gz: c3dd0cd17ad4319288dc8c7b16f2d93147ed8b5a04d33b8ecd8876bebc97f221
 SHA512:
-  metadata.gz: 8554a0a8db1af2d8ca5e08f92f03354c68df334eeea9c8d33f103e825295fabc25e28c8a2466dadb381e4a11810d0059771ddeff2dd60505ba3f181f1af5e211
-  data.tar.gz: 06dd58fecce7e733a01e77d54cdad22b051f7ec5036e881726ecc283407d28451c98fce6b05b4649fa13bd7868d601d9d1767dc0cb52393f55352314177b7210
+  metadata.gz: a20fc82e7400098302e5e929cb70ad54a4c2360db26f42f2e38fdacb4bec2625528838b043695a6ba3c133c8f23553ccebeda91ab0f551b5d5032335cac1f682
+  data.tar.gz: 4554d268f82cf779641860ea89b2ceebb194b407dc6a30374e762e207b9e2094c9d63dee0669494be80815d4ec663d0e503ef3b58138c9bf8923090aa6bdfc03

data/app/pb_kits/playbook/_playbook.scss

@@ -112,5 +112,6 @@
 @import './utilities/focus';
 @import './utilities/border_radius';
 @import './utilities/hover';
+@import './utilities/text_align';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -18,14 +18,14 @@
     <% else %>
     <% if object.icon && !object.icon_right %>
         <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
     <% if object.icon && object.icon_right %>
         <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -29,6 +29,9 @@ module Playbook
                   values: ["sm", "md", "lg", nil],
                   default: nil
       prop :form, default: nil
+      prop :icon_font_family, type: Playbook::Props::Enum,
+                              values: %w[far fas fab fak],
+                              default: "far"
 
       def options
         {

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -99,8 +99,12 @@ const CollapsibleMain = ({
   const mainSpacing = globalProps(props, { cursor })
 
   const handleCollapsibleClick = () => {
+    onClick && onClick();
+    //To disable default toggling behavior return "true" in the onClick()
+    const disableToggle = onClick && onClick();
+    if (disableToggle !== true) {
     toggle();
-    onClick && onClick()
+    }
   }
 
   return (

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -121,30 +121,61 @@ export const toIso = (newDate: Date | string): string => {
 }
 
 export const fromNow = (newDate: Date | string): string => {
-  const startDate = formatDate(newDate).getTime()
-  const endDate = new Date().getTime()
+  const today = new Date()
+  const formattedDate = formatDate(newDate)
+
+  const startDate = formattedDate.getTime()
+  const endDate = today.getTime()
   const elapsedTime = endDate - startDate
-  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago`; // 730+ days
-
-  const MILLISECONDS_IN_A_MONTH = 30.44 * 24 * 60 * 60 * 1000
-
-  const elapsedTimeData = [
-    { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
-    { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
-    { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, //  90s-44 minutes
-    { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
-    { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
-    { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
-    { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
-    { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
-    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MONTH)} months ago`}, // 60-319 days
-    { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
-  ];
-
-  for (const timeDate of elapsedTimeData) {
-    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
-      elapsedTimeString = timeDate.value;
-      break;
+
+  // For years/months, don't use elapsedTime due to rounding
+  const differenceInYears = today.getFullYear() - formattedDate.getFullYear()
+  const differenceInMonths = () => {
+    let months = differenceInYears * 12
+    months -= formattedDate.getMonth()
+    months += today.getMonth()
+    return months
+  }
+
+  const FORTY_FIVE_SECONDS = 45000
+  const NINETY_SECONDS = 90000
+
+  const FORTY_FIVE_MINUTES = 2670000
+  const NINETY_MINUTES = 5400000
+
+  const TWENTY_TWO_HOURS = 77400000
+  const THIRTY_SIX_HOURS = 129600000
+
+  const TWENTY_SIX_DAYS = 2203200000
+  const FORTY_FIVE_DAYS = 3888000000
+
+  const TEN_AND_A_HALF_MONTHS = 27560000000
+
+  const MILLISECONDS_IN_A_MINUTE = 60000
+  const MILLISECONDS_IN_A_HOUR = 3600000
+  const MILLISECONDS_IN_A_DAY = 86400000
+
+  let elapsedTimeString = differenceInYears === 1 ? `${differenceInYears} year ago` : `${differenceInYears} years ago` // 320 days to 1+ year: "x year(s) ago"
+
+  // Inspiration: https://momentjs.com/docs/#/displaying/fromnow/
+  const intervals = [
+    { min: 0, max: FORTY_FIVE_SECONDS, value: "a few seconds ago" }, // 0-44.99 seconds
+    { min: FORTY_FIVE_SECONDS, max: NINETY_SECONDS, value: "a minute ago" }, // 45-89.99 seconds
+    { min: NINETY_SECONDS, max: FORTY_FIVE_MINUTES, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MINUTE)} minutes ago` }, // 90s-44.49 minutes: "2 minutes ago ... 44 minutes ago"
+    { min: FORTY_FIVE_MINUTES, max: NINETY_MINUTES, value: "an hour ago" }, // 44.5-89.99 minutes
+    { min: NINETY_MINUTES, max: TWENTY_TWO_HOURS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_HOUR)} hours ago` }, // 90m-21.49 hours: "2 hours ago ... 21 hours ago"
+    { min: TWENTY_TWO_HOURS, max: THIRTY_SIX_HOURS, value: "a day ago" }, // 21.5-35.99 hours
+    { min: THIRTY_SIX_HOURS, max: TWENTY_SIX_DAYS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_DAY)} days ago` }, // 36h-25.49 days: "2 days ago ... 25 days ago"
+    { min: TWENTY_SIX_DAYS, max: FORTY_FIVE_DAYS, value: "a month ago" }, // 25.5-44.99 days
+    { min: FORTY_FIVE_DAYS, max: TEN_AND_A_HALF_MONTHS, value: `${differenceInMonths()} months ago` }, // 45 days to 319 days: "2 months ago ... 10 months ago"
+  ]
+
+  for (const interval of intervals) {
+    const { min, max, value } = interval
+
+    if (elapsedTime >= min && elapsedTime < max) {
+      elapsedTimeString = value
+      break
     }
   }
 

data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx

@@ -28,7 +28,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />
@@ -49,7 +49,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />
@@ -70,7 +70,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />

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

@@ -5,7 +5,6 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import DateTime from '../pb_kit/dateTime';
 
-
 import Caption from '../pb_caption/_caption'
 
 type TimestampProps = {
@@ -22,6 +21,7 @@ type TimestampProps = {
   showUser?: boolean,
   hideUpdated?: boolean,
   showTimezone?: boolean,
+  unstyled?: boolean,
   variant?: "default" | "elapsed" | "updated"
 }
 
@@ -39,6 +39,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     showUser = false,
     hideUpdated = false,
     showTimezone = false,
+    unstyled = false,
     variant = 'default',
   } = props
 
@@ -85,7 +86,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     return `${updatedText} ${userDisplay} ${DateTime.fromNow(timestamp)}`
   }
 
-  const captionText = () => {
+  const timestampText = () => {
     switch (variant) {
     case 'updated':
       return formatUpdatedString()
@@ -103,11 +104,17 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
         className={classes}
     >
       <div className="pb_timestamp_kit">
-        <Caption
-            dark={dark}
-            size="xs"
-            text={captionText()}
-        />
+        {unstyled ? (
+          <div>
+            {timestampText()}
+          </div>
+        ) : (
+          <Caption
+              dark={dark}
+              size="xs"
+              text={timestampText()}
+          />
+        )}
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { size: "xs", text: "Basic unstyled example" }) %>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "left",
+  unstyled: true,
+}) %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
+
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("timestamp", props: {
+    timestamp: DateTime.now,
+    show_date: true,
+    align: "left",
+    unstyled: true,
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Caption, Timestamp, Title } from '../../'
+
+const TimestampUnstyled = (props) => {
+  return (
+    <>
+      <Caption size="xs"
+          text="Basic unstyled example"
+      />
+      <Timestamp
+          align="left"
+          showDate
+          timestamp={new Date()}
+          unstyled
+          {...props}
+      />
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with wrapping typography kit"
+      />
+      <Title size={1}>
+        <Timestamp
+            align="left"
+            showDate
+            timestamp={new Date()}
+            unstyled
+            {...props}
+        />
+      </Title>
+    </>
+  )
+}
+
+export default TimestampUnstyled

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.md

@@ -0,0 +1 @@
+For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Timestamp` kit and wrap it in any of our typography kits (`Title`, `Body`, etc.). This will allow the `Timestamp` kit to inherit any of our typography styles.

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

@@ -6,6 +6,7 @@ examples:
   - timestamp_timezones: Timezones
   - timestamp_updated: Last Updated by
   - timestamp_elapsed: Time Ago
+  - timestamp_unstyled: Unstyled
 
   react:
   - timestamp_default: Default
@@ -13,7 +14,8 @@ examples:
   - timestamp_timezones: Timezones
   - timestamp_updated: Last Updated by
   - timestamp_elapsed: Time Ago
-  
+  - timestamp_unstyled: Unstyled
+
   swift:
   - timestamp_default_swift: Default
   - timestamp_align_swift: Alignments

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

@@ -3,3 +3,4 @@ export { default as TimestampAlign } from './_timestamp_align.jsx'
 export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
 export { default as TimestampUpdated } from './_timestamp_updated.jsx'
 export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
+export { default as TimestampUnstyled } from './_timestamp_unstyled.jsx'

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -4,5 +4,9 @@
   data: object.data,
   class: object.classname) do %>
 
-  <%= pb_rails("caption", props: { text: object.caption_text, size: 'xs', dark: object.dark }) %>
+  <% if object.unstyled %>
+    <div><%= object.timestamp_text %></div>
+  <% else %>
+    <%= pb_rails("caption", props: { text: object.timestamp_text, size: 'xs', dark: object.dark }) %>
+  <% end %>
 <% end %>

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

@@ -21,6 +21,8 @@ module Playbook
       prop :show_user, type: Playbook::Props::Boolean,
                        default: false
       prop :timezone, default: "America/New_York"
+      prop :unstyled, type: Playbook::Props::Boolean,
+                      default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default elapsed updated],
                      default: "default"
@@ -29,7 +31,7 @@ module Playbook
         generate_classname("pb_timestamp_kit", variant_class, align)
       end
 
-      def caption_text
+      def timestamp_text
         case variant
         when "updated"
           format_updated_string

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -27,10 +27,6 @@
     @include title_colors;
   }
 
-  &.dark {
-    @include pb_title_dark;
-  }
-
   &[class*=_thin] {
     @include pb_title_thin;
   }
@@ -56,4 +52,7 @@
         }
     }
   }
+  &.dark {
+    @include pb_title_dark;
+  }
 }

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

@@ -4,7 +4,7 @@ $space_sm:    16px !default;
 $space_md:    24px !default;
 $space_lg:    32px !default;
 $space_xl:    40px !default;
-$spaces:(
+$spaces: (
   space_xxs:  $space_xxs,
   space_xs:   $space_xs,
   space_sm:   $space_sm,

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

@@ -0,0 +1,18 @@
+$text_align_start:          start !default;
+$text_align_end:            end !default;
+$text_align_left:           left !default;
+$text_align_right:          right !default;
+$text_align_center:         center !default;
+$text_align_justify:        justify !default;
+$text_align_justify_all:    justify-all !default;
+$text_align_match_parent:   match-parent !default;
+$text_align: (
+  start:         $text_align_start,
+  end:           $text_align_end,
+  left:          $text_align_left,
+  right:         $text_align_right,
+  center:        $text_align_center,
+  justify:       $text_align_justify,
+  justify_all:   $text_align_justify_all,
+  match_parent:  $text_align_match_parent
+);

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

@@ -6,6 +6,10 @@
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }
+      .hover_color_#{$name}:hover {
+        color: $color !important;
+        transition: color $transition-speed ease;
+      }
     }
   }
   

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

@@ -23,3 +23,7 @@
 .max_width_xl {
   max-width: 1140px;
 }
+
+.max_width_xxl {
+  max-width: 1320px;
+}

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

@@ -1,69 +1,112 @@
 @import "../tokens/spacing";
 
 $space_classes: (
-	xxs: $space_xxs,
-	xs: $space_xs,
-	sm: $space_sm,
-	md: $space_md,
-	lg: $space_lg,
-	xl: $space_xl,
-	none: 0,
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+  none: 0,
   auto: auto,
   initial: initial,
   inherit: inherit
 );
 
 $positions: (
-	m: "margin",
-	mr: "margin-right",
-	ml: "margin-left",
-	mt: "margin-top",
-	mb: "margin-bottom",
-	mx: ("margin-left", "margin-right"),
-	my: ("margin-top", "margin-bottom"),
-	p: "padding",
-	pr: "padding-right",
-	pl: "padding-left",
-	pt: "padding-top",
-	pb: "padding-bottom",
-	px: ("padding-left", "padding-right"),
-	py: ("padding-top", "padding-bottom")
+  m: "margin",
+  mr: "margin-right",
+  ml: "margin-left",
+  mt: "margin-top",
+  mb: "margin-bottom",
+  mx: ("margin-left", "margin-right"),
+  my: ("margin-top", "margin-bottom"),
+  p: "padding",
+  pr: "padding-right",
+  pl: "padding-left",
+  pt: "padding-top",
+  pb: "padding-bottom",
+  px: ("padding-left", "padding-right"),
+  py: ("padding-top", "padding-bottom")
 );
 
-@each $position_name, $position in $positions {
-	@each $space_name, $space in $space_classes {
-		.#{$position_name}_#{$space_name} {
-			@if type-of($position)=="list" {
-				@each $coordinate in $position {
-					#{$coordinate}: #{$space} !important;
-				}
-			}
-			@else {
-				#{$position}: #{$space} !important;
-			}
-		}
-	}
+$break_methods: (
+  at: "break_at",
+  on: "break_on",
+);
+
+@each $position_name,
+$position in $positions {
+
+  @each $space_name,
+  $space in $space_classes {
+    .#{$position_name}_#{$space_name} {
+      @if type-of($position)=="list" {
+        @each $coordinate in $position {
+          #{$coordinate}: #{$space} !important;
+        }
+      }
+
+      @else {
+        #{$position}: #{$space} !important;
+      }
+    }
+  }
 }
 
-@each $size, $size_value in $breakpoints_max_only {
-  @each $position_name, $position in $positions {
-    @each $space_name, $space in $space_classes {
-        $min_size: map-get($size_value, "min");
-        $max_size: map-get($size_value, "max");
-        .#{$position_name}_#{$size}_#{$space_name} {
-          @if type-of($position)=="list" {
-            @each $coordinate in $position {
-              @include break_at( $max_size) {
-              #{$coordinate}: #{$space} !important;
+// Generate media queries
+@each $size,
+$size_value in $breakpoints_grid {
+
+  @each $position_name,
+  $position in $positions {
+
+		@each $break_method,
+		$method in $break_methods {
+
+			@each $space_name,
+			$space in $space_classes {
+				$min_size: map-get($size_value, "min");
+				$max_size: map-get($size_value, "max");
+
+				.break_#{$break_method}_#{$size}\:#{$position_name}_#{$space_name} {
+          @if type-of($position) == "list" {
+            @if $break_method == "on" {
+              @each $coordinate in $position {
+                @include break_on($min_size, $max_size) {
+                  #{$coordinate}: #{$space} !important;
+                }
+              }
+            }
+
+            @else {
+              @each $coordinate in $position {
+                @if ($max_size != null) {
+                  @include break_at($max_size) {
+                    #{$coordinate}: #{$space} !important;
+                  }
+                }
               }
             }
           }
+
           @else {
-            @include break_at( $max_size) {
-              #{$position}: #{$space} !important;
+            @if $break_method == "on" {
+              @include break_on($min_size, $max_size) {
+                #{$position}: #{$space} !important;
+              }
+            }
+
+            @else {
+              @if ($max_size != null) {
+                @include break_at($max_size) {
+                  #{$position}: #{$space} !important;
+                }
+              }
             }
           }
-        }
-    }
-  }
+				}
+			}
+		}
+	}
 }

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

@@ -0,0 +1,3 @@
+@import "../tokens/text_align";
+
+@include global_props_responsive_css($text_align, 'text_align', 'text-align');