playbook_ui 10.26.0.pre.alpha3 → 10.26.0.pre.alpha5

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

@@ -1,4 +1,5 @@
 import { omit } from 'lodash'
+import { camelToSnakeCase } from './text'
 
 import {
   Binary,
@@ -8,62 +9,35 @@ import {
   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 Alignment = "start" | "end" | "center"
 
-type MaxWidth = {
-  maxWidth?: Sizes,
+type AlignContent = {
+  alignContent?: Alignment & Space
 }
 
-type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
+type AlignItems = {
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
 }
 
-type Shadow = {
-  shadow?: None | "deep" | "deeper" | "deepest",
+type AlignSelf = {
+  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
 }
+type AllSizes = None & Sizes
 
-type LineHeight = {
-  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
+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 = {
@@ -71,7 +45,7 @@ type FlexDirection = {
 }
 
 type FlexGrow = {
-  flexGrow?: Binary
+  flexGrow?: 0 | 1
 }
 
 type FlexShrink = {
@@ -82,10 +56,6 @@ type FlexWrap = {
   flexWrap?: "wrap" | "nowrap" | "wrapReverse"
 }
 
-type Alignment = "start" | "end" | "center"
-
-type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
-
 type JustifyContent = {
   justifyContent?: Alignment & Space
 }
@@ -94,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 & 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: ({
@@ -151,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} ` : ''
@@ -186,10 +191,10 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     Object.entries(display).forEach((displayEntry) => {
       if (displayEntry[0] == "display") {
         if (typeof displayEntry[1] == "string") {
-          css += `display_${displayEntry[1]}`
+          css += `display_${displayEntry[1]} `
         } else if (typeof displayEntry[1] == "object") {
           Object.entries(displayEntry[1]).forEach((displayObj) => {
-            css += `display_${displayObj[0]}_${displayObj[1]}`
+            css += `display_${displayObj[0]}_${displayObj[1]} `
           })
         } else {
           ' '
@@ -203,72 +208,81 @@ 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}` : ''
+    }
   }
 }
 

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])}`)
+    })
+  }
+})

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

@@ -0,0 +1,64 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { SCREEN_SIZES } from '../../test-utils'
+
+const testSubject = 'body'
+
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 0, y = 13; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flex={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_${x}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${x}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flex={{ [size]: x }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_${size}_${x}`)
+    })
+  }
+})
+
+test('Global Props: returns proper class name', () => {
+  const propValues = ["auto", "initial", "none"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flex={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_${propValues[x]}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flex={{ [size]: propValues[x] }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_${size}_${propValues[x]}`)
+    })
+  }
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.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 = ["row", "column", "columnReverse"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexDirection={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_direction_${camelToSnakeCase(propValues[x])}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flexDirection={{ [size]: propValues[x] }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_direction_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { SCREEN_SIZES } from '../../test-utils'
+
+const testSubject = 'body'
+
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 0, y = 2; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexGrow={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_grow_${x}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${x}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flexGrow={{ [size]: x }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_grow_${size}_${x}`)
+    })
+  }
+})

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+import { SCREEN_SIZES } from '../../test-utils'
+
+const testSubject = 'body'
+
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 0, y = 2; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexShrink={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_shrink_${x}`)
+
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${x}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flexShrink={{ [size]: x }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_shrink_${size}_${x}`)
+    })
+  }
+})