playbook_ui 13.2.0 → 13.4.0

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,14 +27,14 @@
     @include title_colors;
   }
 
-  &.dark {
-    @include pb_title_dark;
-  }
-
   &[class*=_thin] {
     @include pb_title_thin;
   }
 
+  &[class*=_truncate] {
+    @include title_truncate;
+  }
+
   @each $size, $size_value in $breakpoints_grid {
     @each $title_size_value in [1, 2, 3, 4] {
         $min_size: map-get($size_value, "min");
@@ -46,9 +46,13 @@
             @else if $title_size_value == 3 { @include pb_title_3; }
             @else if $title_size_value == 4 { @include pb_title_4; }
             @include title_colors;
+            @include title_truncate;
             @if $title_size_value != 4 { @include pb_title_bold; }
           }
         }
     }
   }
+  &.dark {
+    @include pb_title_dark;
+  }
 }

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

@@ -17,6 +17,7 @@ type TitleProps = {
   size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
+  truncate?: null | '1' | '2' | '3' | '4' | '5',
   variant?: null | "link",
 } & GlobalProps
 
@@ -33,12 +34,14 @@ const Title = (props: TitleProps): React.ReactElement => {
     bold = true,
     tag = 'h3',
     text,
+    truncate = null,
     variant = null,
   } = props
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const getBold = bold ? '' : 'thin'
+  const isTruncated = truncate ? `truncate_${truncate}` : null
   const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
 
   const buildResponsiveSizeCss = () => {
@@ -54,7 +57,7 @@ const Title = (props: TitleProps): React.ReactElement => {
   }
 
   const classes = classnames(
-    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
+    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold, isTruncated),
     globalProps(props),
     buildResponsiveSizeCss(),
     className

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

@@ -15,4 +15,23 @@ $pb_title_colors: (
       color: $color
     }
   }
+}
+
+$pb_title_truncate: (
+  truncate_1: 1,
+  truncate_2: 2,
+  truncate_3: 3,
+  truncate_4: 4,
+  truncate_5: 5
+);
+
+@mixin title_truncate {
+  @each $name, $number in $pb_title_truncate {
+    &[class*=_#{$name}] {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: $number;
+      -webkit-box-orient: vertical; 
+    }
+  }
 }

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

@@ -16,12 +16,15 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
+      prop :truncate, type: Playbook::Props::Enum,
+                      values: [nil, "1", "2", "3", "4", "5"],
+                      default: nil
 
       def classname
         if is_size_responsive
-          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
+          generate_classname("pb_title_kit", variant, color, is_bold, is_truncated) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold)
+          generate_classname("pb_title_kit", size, variant, color, is_bold, is_truncated)
         end
       end
 
@@ -29,6 +32,10 @@ module Playbook
         bold ? nil : "thin"
       end
 
+      def is_truncated
+        truncate ? "truncate_#{truncate}" : nil
+      end
+
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end

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');

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

@@ -62,6 +62,7 @@ type FlexWrap = {
 
 type Hover = Shadow & {
   background?: string,
+  color?: string,
   scale?: "sm" | "md" | "lg"
 }
 
@@ -85,6 +86,8 @@ type Margin = {
   marginX?: AllSizes,
   marginY?: AllSizes,
   margin?: AllSizes,
+  break?: string,
+  default?: string
 }
 
 type MaxWidth = {
@@ -107,6 +110,8 @@ type Padding = {
   paddingX?: AllSizes,
   paddingY?: AllSizes,
   padding?: AllSizes,
+  break?: string,
+  default?: string
 }
 
 type Position = {
@@ -119,6 +124,10 @@ type Shadow = {
 
 type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
 
+type TextAlign = {
+  textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "justifyAll" | "matchParent",
+}
+
 type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
@@ -130,7 +139,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
-  Position & Shadow & ZIndex & { hover?: string };
+  Position & Shadow & TextAlign & ZIndex & { hover?: string };
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -149,6 +158,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
       css += hover.background ? `hover_background_${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
+      css += hover.color ? `hover_color_${hover.color } ` : '';
       return css;
   },
 
@@ -186,13 +196,24 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       padding,
     };
 
+    const screenSizeValues = ["xs", "sm", "md", "lg", "xl"]
+
     function handleObjectValue(properties: Margin | Padding, prefix: string) {
       let classResult = '';
 
+      const breakValue = properties.break || "on";
+      const defaultValue = properties.default || null;
+
       Object.entries(properties).forEach(([key, value]) => {
-        classResult += `${prefix}_${key}_${value} `;
+        if (screenSizeValues.includes(key)) {
+          classResult += `break_${breakValue}_${key}:${prefix}_${value} `;
+        }
       });
 
+      if (defaultValue) {
+        classResult += `${prefix}_${defaultValue} `;
+      }
+
       return classResult;
     }
 
@@ -377,6 +398,13 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += position && position !== 'static' ? `position_${position}` : ''
     return css
   },
+  textAlignProps: ({ textAlign }: TextAlign) => {
+    if (typeof textAlign === 'object') {
+      return getResponsivePropClasses(textAlign, 'text_align')
+    } else {
+      return textAlign ? `text_align_${textAlign} ` : ''
+    }
+  }
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>