playbook_ui 10.26.0.pre.alpha.sticky1 → 10.27.0.pre.datepicker1

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

@@ -1,23 +1,10 @@
-.justify_content_start {
-  justify-content: start !important;
-}
-
-.justify_content_end {
-  justify-content: end !important;
-}
-
-.justify_content_center {
-  justify-content: center !important;
-}
-
-.justify_content_space_between {
-  justify-content: space-between !important;
-}
-
-.justify_content_space_around {
-  justify-content: space-around !important;
-}
-
-.justify_content_space_evenly {
-  justify-content: space-evenly !important;
-}
+$justify_content_values: (
+  start: start,
+  center: center,
+  end: end,
+  space_around: space-around,
+  space_between: space-between,
+  space_evenly: space-evenly,
+);
+
+@include global_props_responsive_css($justify_content_values, 'justify_content', 'justify-content');

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

@@ -1,19 +1,9 @@
-.justify_self_auto {
-  justify-self: auto !important;
-}
-
-.justify_self_start {
-  justify-self: start !important;
-}
-
-.justify_self_end {
-  justify-self: end !important;
-}
-
-.justify_self_center {
-  justify-self: center !important;
-}
-
-.justify_self_stretch {
-  justify-self: stretch !important;
-}
+$justify_self_values: (
+  auto: auto,
+  start: start,
+  center: center,
+  end: end,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($justify_self_values, 'justify_self', 'justify-self');

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

@@ -0,0 +1,26 @@
+@mixin global_props_css($props, $class_prefix, $css_attribute, $responsive) {
+  @each $propkey, $propvalue in $props {
+    .#{$class_prefix}_#{$propkey} {
+      #{$css_attribute}: #{$propvalue} !important;
+      @content;
+    }
+  }
+
+  @if $responsive {
+    @each $size, $size_value in $breakpoints_grid {
+      @each $prop_key, $prop_value in $props {
+          $min_size: map-get($size_value, "min");
+          $max_size: map-get($size_value, "max");
+          .#{$class_prefix}_#{$size}_#{$prop_key} {
+            @include break_on($min_size, $max_size) {
+              #{$css_attribute}: #{$prop_value} !important;
+            }
+          }
+      }
+    }
+  }
+}
+
+@mixin global_props_responsive_css($props, $class_prefix, $css_attribute) {
+  @include global_props_css($props, $class_prefix, $css_attribute, 1)
+}

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

@@ -1,55 +1,17 @@
-.order_1 {
-  order: 1 !important;
-}
-
-.order_2 {
-  order: 2 !important;
-}
-
-.order_3 {
-  order: 3 !important;
-}
-
-.order_4 {
-  order: 4 !important;
-}
-
-.order_5 {
-  order: 5 !important;
-}
-
-.order_6 {
-  order: 6 !important;
-}
-
-.order_7 {
-  order: 7 !important;
-}
-
-.order_8 {
-  order: 8 !important;
-}
-
-.order_9 {
-  order: 9 !important;
-}
-
-.order_10 {
-  order: 10 !important;
-}
-
-.order_11 {
-  order: 11 !important;
-}
-
-.order_12 {
-  order: 12 !important;
-}
-
-.order_none {
-  order: none !important;
-}
-
-.order_first {
-  order: -1 !important;
-}
+$order_values: (
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 12,
+);
+
+@include global_props_responsive_css($order_values, 'flex_order', 'order');

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

@@ -1,68 +1,43 @@
 import { omit } from 'lodash'
+import { camelToSnakeCase } from './text'
 
-type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
-type None = "none"
+import {
+  Binary,
+  Display,
+  DisplaySizes,
+  None,
+  Sizes,
+} from '../types'
 
-type AllSizes = None & Sizes
-
-type Margin = {
-  marginRight?: AllSizes,
-  marginLeft?: AllSizes,
-  marginTop?: AllSizes,
-  marginBottom?: AllSizes,
-  marginX?: AllSizes,
-  marginY?: AllSizes,
-  margin?: AllSizes,
-}
-
-type Padding = {
-  paddingRight?: AllSizes,
-  paddingLeft?: AllSizes,
-  paddingTop?: AllSizes,
-  paddingBottom?: AllSizes,
-  paddingX?: AllSizes,
-  paddingY?: AllSizes,
-  padding?: AllSizes,
-}
-
-type Dark = {
-  dark?: boolean,
-}
-
-type NumberSpacing = {
-  numberSpacing?: "tabular",
-}
-
-type MaxWidth = {
-  maxWidth?: Sizes,
-}
+type Alignment = "start" | "end" | "center"
 
-type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
+type AlignContent = {
+  alignContent?: Alignment & Space
 }
 
-type Shadow = {
-  shadow?: "none" | "deep" | "deeper" | "deepest",
+type AlignItems = {
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
 }
 
-type LineHeight = {
-  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
+type AlignSelf = {
+  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
 }
+type AllSizes = None & Sizes
 
-type Display = {
-  display?: "block" | "flex" | "hidden" | "inline_block" | "inline" | "inline_flex",
+type BorderRadius = {
+  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
 }
 
 type Cursor = {
   cursor?: "pointer",
 }
 
-type BorderRadius = {
-  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
+type Dark = {
+  dark?: boolean,
 }
 
 type Flex = {
-  flex?: "none" | "initial" | "auto" | 1
+  flex?: "auto" | "initial" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "none",
 }
 
 type FlexDirection = {
@@ -74,17 +49,13 @@ type FlexGrow = {
 }
 
 type FlexShrink = {
-  flexShrink?: 0 | 1
+  flexShrink?: Binary
 }
 
 type FlexWrap = {
   flexWrap?: "wrap" | "nowrap" | "wrapReverse"
 }
 
-type Alignment = "start" | "end" | "center"
-
-type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
-
 type JustifyContent = {
   justifyContent?: Alignment & Space
 }
@@ -93,28 +64,67 @@ type JustifySelf = {
   justifySelf?: Alignment & ("auto" | "stretch")
 }
 
-type AlignContent = {
-  alignContent?: Alignment & Space
+type LineHeight = {
+  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
 }
 
-type AlignItems = {
-  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+type Margin = {
+  marginRight?: AllSizes,
+  marginLeft?: AllSizes,
+  marginTop?: AllSizes,
+  marginBottom?: AllSizes,
+  marginX?: AllSizes,
+  marginY?: AllSizes,
+  margin?: AllSizes,
 }
 
-type AlignSelf = {
-  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
+type MaxWidth = {
+  maxWidth?: Sizes,
+}
+
+type NumberSpacing = {
+  numberSpacing?: "tabular",
 }
 
 type Order = {
-  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  order?: None| "first" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 }
 
+type Padding = {
+  paddingRight?: AllSizes,
+  paddingLeft?: AllSizes,
+  paddingTop?: AllSizes,
+  paddingBottom?: AllSizes,
+  paddingX?: AllSizes,
+  paddingY?: AllSizes,
+  padding?: AllSizes,
+}
+
+type Shadow = {
+  shadow?: "none" | "deep" | "deeper" | "deepest",
+}
+
+type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
+
+type ZIndex = {
+  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
+}
+
+// keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
-  BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
+  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
   Shadow & ZIndex
 
+const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
+  const keys: string[] = Object.keys(prop)
+  return keys.map((size: Sizes) => {
+    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
+    return `${classPrefix}_${size}_${propValue}`
+  }).join(" ")
+}
+
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
   spacingProps: ({
@@ -150,11 +160,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += padding ? `p_${padding} ` : ''
     return css
   },
-  darkProps: ({ dark }: Dark) => {
-    let css = ''
-    css += dark ? 'dark' : ''
-    return css
-  },
+  darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''
     css += numberSpacing ? `ns_${numberSpacing} ` : ''
@@ -180,9 +186,21 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += lineHeight ? `line_height_${lineHeight} ` : ''
     return css
   },
-  displayProps: ({ display }: Display) => {
+  displayProps: (display: Display ) => {
     let css = ''
-    css += display ? `display_${display} ` : ''
+    Object.entries(display).forEach((displayEntry) => {
+      if (displayEntry[0] == "display") {
+        if (typeof displayEntry[1] == "string") {
+          css += `display_${displayEntry[1]} `
+        } else if (typeof displayEntry[1] == "object") {
+          Object.entries(displayEntry[1]).forEach((displayObj) => {
+            css += `display_${displayObj[0]}_${displayObj[1]} `
+          })
+        } else {
+          ' '
+        }
+      }
+    })
     return css
   },
   cursorProps: ({ cursor }: Cursor) => {
@@ -190,76 +208,87 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += cursor ? `cursor_${cursor} ` : ''
     return css
   },
-  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
-    let css = ''
-    css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
-      flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
-        flexDirection ? `flex_direction_${flexDirection} ` : ''
-    return css
-  },
-  flexWrapProps: ({ flexWrap }: FlexWrap) => {
-    let css = ''
-    css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
-      flexWrap == 'nowrap' ? 'flex_nowrap' :
-        flexWrap ? `flex_wrap_${flexWrap} ` : ''
-    return css
-  },
-  justifyContentProps: ({ justifyContent }: JustifyContent) => {
-    let css = ''
-    css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
-      justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
-        justifyContent == 'spaceAround' ? 'justify_content_space_around' :
-          justifyContent ? `justify_content_${justifyContent}` : ''
-    return css
-  },
-  justifySelfProps: ({ justifySelf }: JustifySelf) => {
-    let css = ''
-    css += justifySelf ? `justify_self_${justifySelf}` : ''
-    return css
+  alignContentProps: ({ alignContent }: AlignContent) => {
+    if (typeof alignContent === 'object') {
+      return getResponsivePropClasses(alignContent, 'align_content')
+    }
+    return alignContent ? `align_content_${camelToSnakeCase(alignContent)}` : ''
   },
   alignItemsProps: ({ alignItems }: AlignItems) => {
-    let css = ''
-    css += alignItems == 'flexStart' ? 'align_items_flex_start' :
-      alignItems == 'flexEnd' ? 'align_items_flex_end' :
-        alignItems ? `align_items_${alignItems}` : ''
-    return css
-  },
-  alignContentProps: ({ alignContent }: AlignContent) => {
-    let css = ''
-    css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
-      alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
-        alignContent == 'spaceAround' ? 'align_content_space_around' :
-          alignContent ? `align_content_${alignContent}` : ''
-    return css
+    if (typeof alignItems === 'object') {
+      return getResponsivePropClasses(alignItems, 'align_items')
+    } else {
+      return alignItems ? `align_items_${camelToSnakeCase(alignItems)}` : ''
+    }
   },
   alignSelfProps: ({ alignSelf }: AlignSelf) => {
-    let css = ''
-    css += alignSelf ? `align_self_${alignSelf}` : ''
-    return css
+    if (typeof alignSelf === 'object') {
+      return getResponsivePropClasses(alignSelf, 'align_self')
+    } else {
+      return alignSelf ? `align_self_${alignSelf}` : ''
+    }
+  },
+  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
+    if (typeof flexDirection == 'object') {
+      return getResponsivePropClasses(flexDirection, 'flex_direction')
+    } else {
+      return flexDirection ? `flex_direction_${camelToSnakeCase(flexDirection)}` : ''
+    }
+  },
+  flexWrapProps: ({ flexWrap }: FlexWrap) => {
+    if (typeof flexWrap == 'object') {
+      return getResponsivePropClasses(flexWrap, 'flex_wrap')
+    } else {
+      return flexWrap ? `flex_wrap_${camelToSnakeCase(flexWrap)}` : ''
+    }
   },
   flexProps: ({ flex }: Flex) => {
-    let css = ''
-    css += flex ? `flex_${flex}` : ''
-    return css
+    if (typeof flex === 'object') {
+      return getResponsivePropClasses(flex, 'flex')
+    } else {
+      return flex ? `flex_${flex}` : ''
+    }
   },
   flexGrowProps: ({ flexGrow }: FlexGrow) => {
-    let css = ''
-    css += flexGrow ? `flex_grow_${flexGrow}` : ''
-    return css
+    if (typeof flexGrow == 'object') {
+      return getResponsivePropClasses(flexGrow, 'flex_grow')
+    } else {
+      return flexGrow ? `flex_grow_${flexGrow}` : ''
+    }
   },
   flexShrinkProps: ({ flexShrink }: FlexShrink) => {
-    let css = ''
-    css += flexShrink ? `flex_shrink_${flexShrink}` : ''
-    return css
+    if (typeof flexShrink == 'object') {
+      return getResponsivePropClasses(flexShrink, 'flex_shrink')
+    } else {
+      return flexShrink ? `flex_shrink_${flexShrink}` : ''
+    }
+  },
+  justifyContentProps: ({ justifyContent }: JustifyContent) => {
+    if (typeof justifyContent === 'object') {
+      return getResponsivePropClasses(justifyContent, 'justify_content')
+    } else {
+      return justifyContent ? `justify_content_${camelToSnakeCase(justifyContent)}` : ''
+    }
+  },
+  justifySelfProps: ({ justifySelf }: JustifySelf) => {
+    if (typeof justifySelf === 'object') {
+      return getResponsivePropClasses(justifySelf, 'justify_self')
+    } else {
+      return justifySelf ? `justify_self_${justifySelf}` : ''
+    }
   },
   orderProps: ({ order }: Order) => {
-    let css = ''
-    css += order ? `order_${order}` : ''
-    return css
+    if (typeof order === 'object') {
+      return getResponsivePropClasses(order, 'flex_order')
+    } else {
+      return order ? `flex_order_${order}` : ''
+    }
   }
 }
 
-export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
+type DefaultProps = {[key: string]: string} | Record<string, unknown>
+
+export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {}): string => {
   const allProps = { ...props, ...defaultProps }
   return Object.keys(PROP_CATEGORIES).map((key) => {
     return PROP_CATEGORIES[key](allProps)

data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+import { SCREEN_SIZES } from '../../test-utils'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          alignContent={`${propValues[x]}`}
+          data={{ testid: testId }}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`align_content_${camelToSnakeCase(propValues[x])}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            alignContent={{ [size]: propValues[x] }}
+            data={{ testid: testId }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`align_content_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})

data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+import { SCREEN_SIZES } from '../../test-utils'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["start", "center", "end", "baseline", "stretch", "flexStart", "flexEnd"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          alignItems={`${propValues[x]}`}
+          data={{ testid: testId }}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`align_items_${camelToSnakeCase(propValues[x])}`)
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            alignItems={{ [size]: propValues[x] }}
+            data={{ testid: testId }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`align_items_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})

data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+import { SCREEN_SIZES } from '../../test-utils'
+
+const testSubject = 'body'
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["start", "center", "end", "stretch", "baseline", "auto"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          alignSelf={`${propValues[x]}`}
+          data={{ testid: testId }}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`align_self_${camelToSnakeCase(propValues[x])}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            alignSelf={{ [size]: propValues[x] }}
+            data={{ testid: testId }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`align_self_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+import { SCREEN_SIZES } from '../../test-utils'
+
+const testSubject = 'body'
+
+// %w[block inline_block inline flex inline_flex none]
+test('Global Props: returns proper class name', () => {
+  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          display={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`display_${camelToSnakeCase(propValues[x])}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            display={{ [size]: propValues[x] }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`display_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})