playbook_ui 13.2.0 → 13.4.0.pre.alpha.PLAY973Hash1181

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -11,7 +11,7 @@ module Playbook
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :label
       prop :name
@@ -19,7 +19,7 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :type, default: "text"
-      prop :validation, type: Playbook::Props::Hash,
+      prop :validation, type: Playbook::Props::HashProp,
                         default: {}
       prop :value
       prop :add_on, type: Playbook::Props::NestedProps,

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,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/pb_toggle/toggle.rb

@@ -5,7 +5,7 @@ require "action_view"
 module Playbook
   module PbToggle
     class Toggle < Playbook::KitBase
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       prop :checked, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -19,7 +19,7 @@ module Playbook
       prop :name
       prop :options, type: Playbook::Props::HashArray,
                      default: []
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       prop :is_multi, type: Playbook::Props::Boolean,

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>