playbook_ui 10.23.0.pre.cachetest → 10.24.0

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

@@ -0,0 +1,29 @@
+.align_self_start {
+  display: flex;
+  align-self: start !important;
+}
+
+.align_self_end {
+  display: flex;
+  align-self: end !important;
+}
+
+.align_self_auto {
+  display: flex;
+  align-self: auto !important;
+}
+
+.align_self_center {
+  display: flex;
+  align-self: center !important;
+}
+
+.align_self_stretch {
+  display: flex;
+  align-self: stretch !important;
+}
+
+.align_self_baseline {
+  display: flex;
+  align-self: baseline !important;
+}

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

@@ -0,0 +1,15 @@
+.flex_auto {
+  flex: auto !important;
+}
+
+.flex_initial {
+  flex: initial !important;
+}
+
+.flex_none {
+  flex: none !important;
+}
+
+.flex_1 {
+  flex: 1 !important;
+}

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

@@ -0,0 +1,19 @@
+.flex_direction_row {
+  display: flex;
+  flex-direction: row !important;
+}
+
+.flex_direction_column {
+  display: flex;
+  flex-direction: column !important;
+}
+
+.flex_direction_row_reverse {
+  display: flex;
+  flex-direction: row-reverse !important;
+}
+
+.flex_direction_column_reverse {
+  display: flex;
+  flex-direction: column-reverse !important;
+}

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

@@ -0,0 +1,9 @@
+.flex_grow_1 {
+  display: flex;
+  flex-grow: 1 !important;
+}
+
+.flex_grow_0 {
+  display: flex;
+  flex-grow: 0 !important;
+}

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

@@ -0,0 +1,9 @@
+.flex_shrink_1 {
+  display: flex;
+  flex-shrink: 1 !important;
+}
+
+.flex_shrink_0 {
+  display: flex;
+  flex-shrink: 0 !important;
+}

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

@@ -0,0 +1,14 @@
+.flex_wrap_wrap {
+  display: flex;
+  flex-wrap: wrap !important;
+}
+
+.flex_wrap_nowrap {
+  display: flex;
+  flex-wrap: nowrap !important;
+}
+
+.flex_wrap_wrap_reverse {
+  display: flex;
+  flex-wrap: wrap-reverse !important;
+}

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

@@ -0,0 +1,11 @@
+@import './utilities/flex_direction';
+@import './utilities/justify_content';
+@import './utilities/flex_wrap';
+@import './utilities/justify_self';
+@import './utilities/align_items';
+@import './utilities/align_content';
+@import './utilities/align_self';
+@import './utilities/flex';
+@import './utilities/flex_grow';
+@import './utilities/flex_shrink';
+@import './utilities/order';

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

@@ -0,0 +1,23 @@
+.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;
+}

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

@@ -0,0 +1,19 @@
+.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;
+}

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

@@ -0,0 +1,55 @@
+.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;
+}

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

@@ -0,0 +1,297 @@
+import { omit } from 'lodash'
+
+type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
+type None = "none"
+
+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 ZIndex = {
+  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
+}
+
+type Shadow = {
+  shadow?: "none" | "deep" | "deeper" | "deepest",
+}
+
+type LineHeight = {
+  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
+}
+
+type Display = {
+  display?: "block" | "flex" | "hidden" | "inline_block" | "inline" | "inline_flex",
+}
+
+type Cursor = {
+  cursor?: "pointer",
+}
+
+type BorderRadius = {
+  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
+}
+
+type Flex = {
+  flex?: "none" | "initial" | "auto" | 1
+}
+
+type FlexDirection = {
+  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
+}
+
+type FlexGrow = {
+  flexGrow?: 0 | 1
+}
+
+type FlexShrink = {
+  flexShrink?: 0 | 1
+}
+
+type FlexWrap = {
+  flexWrap?: "wrap" | "nowrap" | "wrapReverse"
+}
+
+type Alignment = "start" | "end" | "center"
+
+type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
+
+type JustifyContent = {
+  justifyContent?: Alignment & Space
+}
+
+type JustifySelf = {
+  justifySelf?: Alignment & ("auto" | "stretch")
+}
+
+type AlignContent = {
+  alignContent?: Alignment & Space
+}
+
+type AlignItems = {
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+}
+
+type AlignSelf = {
+  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
+}
+
+type Order = {
+  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+}
+
+export type GlobalProps = AlignContent & AlignItems & AlignSelf &
+  BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
+  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
+  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
+  Shadow & ZIndex
+
+// Prop categories
+const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
+  spacingProps: ({
+    marginRight,
+    marginLeft,
+    marginTop,
+    marginBottom,
+    marginX,
+    marginY,
+    margin,
+    paddingRight,
+    paddingLeft,
+    paddingTop,
+    paddingBottom,
+    paddingX,
+    paddingY,
+    padding,
+  }: Margin & Padding) => {
+    let css = ''
+    css += marginRight ? `mr_${marginRight} ` : ''
+    css += marginLeft ? `ml_${marginLeft} ` : ''
+    css += marginTop ? `mt_${marginTop} ` : ''
+    css += marginBottom ? `mb_${marginBottom} ` : ''
+    css += marginX ? `mx_${marginX} ` : ''
+    css += marginY ? `my_${marginY} ` : ''
+    css += margin ? `m_${margin} ` : ''
+    css += paddingRight ? `pr_${paddingRight} ` : ''
+    css += paddingLeft ? `pl_${paddingLeft} ` : ''
+    css += paddingTop ? `pt_${paddingTop} ` : ''
+    css += paddingBottom ? `pb_${paddingBottom} ` : ''
+    css += paddingX ? `px_${paddingX} ` : ''
+    css += paddingY ? `py_${paddingY} ` : ''
+    css += padding ? `p_${padding} ` : ''
+    return css
+  },
+  darkProps: ({ dark }: Dark) => {
+    let css = ''
+    css += dark ? 'dark' : ''
+    return css
+  },
+  numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
+    let css = ''
+    css += numberSpacing ? `ns_${numberSpacing} ` : ''
+    return css
+  },
+  maxWidthProps: ({ maxWidth }: MaxWidth) => {
+    let css = ''
+    css += maxWidth ? `max_width_${maxWidth } ` : ''
+    return css
+  },
+  zIndexProps: ({ zIndex }: ZIndex) => {
+    let css = ''
+    css += zIndex ? `z_index_${zIndex } ` : ''
+    return css
+  },
+  shadowProps: ({ shadow }: Shadow) => {
+    let css = ''
+    css += shadow ? `shadow_${shadow} ` : ''
+    return css
+  },
+  lineHeightProps: ({ lineHeight }: LineHeight) => {
+    let css = ''
+    css += lineHeight ? `line_height_${lineHeight} ` : ''
+    return css
+  },
+  displayProps: ({ display }: Display) => {
+    let css = ''
+    css += display ? `display_${display} ` : ''
+    return css
+  },
+  cursorProps: ({ cursor }: Cursor) => {
+    let css = ''
+    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
+  },
+  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
+  },
+  alignSelfProps: ({ alignSelf }: AlignSelf) => {
+    let css = ''
+    css += alignSelf ? `align_self_${alignSelf}` : ''
+    return css
+  },
+  flexProps: ({ flex }: Flex) => {
+    let css = ''
+    css += flex ? `flex_${flex}` : ''
+    return css
+  },
+  flexGrowProps: ({ flexGrow }: FlexGrow) => {
+    let css = ''
+    css += flexGrow ? `flex_grow_${flexGrow}` : ''
+    return css
+  },
+  flexShrinkProps: ({ flexShrink }: FlexShrink) => {
+    let css = ''
+    css += flexShrink ? `flex_shrink_${flexShrink}` : ''
+    return css
+  },
+  orderProps: ({ order }: Order) => {
+    let css = ''
+    css += order ? `order_${order}` : ''
+    return css
+  }
+}
+
+export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
+  const allProps = { ...props, ...defaultProps }
+  return Object.keys(PROP_CATEGORIES).map((key) => {
+    return PROP_CATEGORIES[key](allProps)
+  }).filter((value) => value?.length > 0).join(" ")
+}
+
+export const deprecatedProps = (kit: string, props: string[] = []): void => {
+  if (process.env.NODE_ENV === 'development') {
+    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+    props.forEach((prop) => {
+      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
+    })
+  }
+}
+
+export const domSafeProps = (props: {[key: string]: string}): {[key: string]: string} => {
+  const notSafeProps = [
+    'marginRight',
+    'marginLeft',
+    'marginTop',
+    'marginBottom',
+    'marginX',
+    'marginY',
+    'margin',
+    'paddingRight',
+    'paddingLeft',
+    'paddingTop',
+    'paddingBottom',
+    'paddingX',
+    'paddingY',
+    'padding',
+    'dark',
+  ]
+  return omit(props, notSafeProps)
+}

data/app/pb_kits/playbook/utilities/{props.js → props.ts}

@@ -10,10 +10,11 @@ import classnames from 'classnames'
  * @param {Object} data the object containing the data to derive the props from.
  * @returns {Object} an object whose keys have the prefix added to them.
  */
-const buildPrefixedProps = (prefix, data) => Object.keys(data).reduce((props, key) => {
-  props[`${prefix}-${key}`] = data[key]
-  return props
-}, {})
+const buildPrefixedProps = (prefix: string, data: {[key: string]: any}) => 
+  Object.keys(data).reduce((props: {[key: string]: any}, key: string) => {
+    props[`${prefix}-${key}`] = data[key]
+    return props
+  }, {})
 
 /**
  * Represent a "No-Operation" function that can be used as a sensible
@@ -29,7 +30,8 @@ export const noop = () => {}
  * @param {Object} aria the object containing the aria prop values.
  * @returns {Object} an object holding the HTML valid aria props and their values.
  */
-export const buildAriaProps = (aria) => buildPrefixedProps('aria', aria)
+export const buildAriaProps = (aria: {[key: string]: string}): {[key: string]: string} => 
+  buildPrefixedProps('aria', aria)
 
 /**
  * Maps a given data object into HTML valid data attribtues and their values.
@@ -37,7 +39,7 @@ export const buildAriaProps = (aria) => buildPrefixedProps('aria', aria)
  * @param {Object} data the object containing the data prop values.
  * @returns {Object} an object holding the HTML valid data props and their values.
  */
-export const buildDataProps = (data) => buildPrefixedProps('data', data)
+export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps('data', data)
 
 /**
  * Builds a Playbook valid root className off of the incoming css rules.
@@ -45,5 +47,5 @@ export const buildDataProps = (data) => buildPrefixedProps('data', data)
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
  * @returns {String} the derived root className value.
  */
-export const buildCss = (...rules) => classnames(rules).replace(/\s/g, '_')
+export const buildCss = (...rules: string[]) => classnames(rules).replace(/\s/g, '_')
 

data/lib/playbook/align_content.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignContent
+    def self.included(base)
+      base.prop :align_content
+    end
+
+    def align_content_props
+      selected_props = align_content_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_content_value = send(k)
+        "align_content_#{align_content_value}" if align_content_values.include? align_content_value
+      end.compact.join(" ")
+    end
+
+    def align_content_options
+      {
+        align_content: "align_content",
+      }
+    end
+
+    def align_content_values
+      %w[start end center space_between space_around space_evenly]
+    end
+  end
+end

data/lib/playbook/align_items.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignItems
+    def self.included(base)
+      base.prop :align_items
+    end
+
+    def align_items_props
+      selected_props = align_items_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_items_value = send(k)
+        "align_items_#{align_items_value}" if align_items_values.include? align_items_value
+      end.compact.join(" ")
+    end
+
+    def align_items_options
+      {
+        align_items: "align_items",
+      }
+    end
+
+    def align_items_values
+      %w[flex_start flex_end start end center baseline stretch]
+    end
+  end
+end

data/lib/playbook/align_self.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignSelf
+    def self.included(base)
+      base.prop :align_self
+    end
+
+    def align_self_props
+      selected_props = align_self_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_self_value = send(k)
+        "align_self_#{align_self_value}" if align_self_values.include? align_self_value
+      end.compact.join(" ")
+    end
+
+    def align_self_options
+      {
+        align_self: "align_self",
+      }
+    end
+
+    def align_self_values
+      %w[auto start end center stretch baseline]
+    end
+  end
+end

data/lib/playbook/classnames.rb

@@ -20,6 +20,17 @@ module Playbook
         line_height_props,
         display_props,
         cursor_props,
+        flex_direction_props,
+        flex_wrap_props,
+        justify_content_props,
+        justify_self_props,
+        align_items_props,
+        align_content_props,
+        align_self_props,
+        flex_props,
+        flex_grow_props,
+        flex_shrink_props,
+        order_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/flex.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Flex
+    def self.included(base)
+      base.prop :flex
+    end
+
+    def flex_props
+      selected_props = flex_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_value = send(k)
+        "flex_#{flex_value}" if flex_values.include? flex_value
+      end.compact.join(" ")
+    end
+
+    def flex_options
+      {
+        flex: "flex",
+      }
+    end
+
+    def flex_values
+      %w[auto initial 0 1 2 3 4 5 6 7 8 9 10 11 12 none]
+    end
+  end
+end