playbook_ui 10.21.0.pre.alpha.jg1 → 10.21.0

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

@@ -0,0 +1,156 @@
+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",
+}
+
+export type GlobalProps = BorderRadius & Cursor & Dark & Display & LineHeight & Margin & MaxWidth & NumberSpacing & 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
+  }
+}
+
+// All Exported as a single function
+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)
+  }).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!`)
+    })
+  }
+}

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/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.20.0"
-  VERSION = "10.21.0.pre.alpha.jg1"
+  VERSION = "10.21.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.21.0.pre.alpha.jg1
+  version: 10.21.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-02-03 00:00:00.000000000 Z
+date: 2022-02-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -282,8 +282,8 @@ files:
 - app/pb_kits/playbook/_reset.scss
 - app/pb_kits/playbook/data/menu.yml
 - app/pb_kits/playbook/index.js
-- app/pb_kits/playbook/pb_avatar/_avatar.jsx
 - app/pb_kits/playbook/pb_avatar/_avatar.scss
+- app/pb_kits/playbook/pb_avatar/_avatar.tsx
 - app/pb_kits/playbook/pb_avatar/avatar.html.erb
 - app/pb_kits/playbook/pb_avatar/avatar.rb
 - app/pb_kits/playbook/pb_avatar/avatar.test.js
@@ -427,6 +427,9 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
 - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
+- app/pb_kits/playbook/pb_button/docs/_button_size.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_size.md
 - app/pb_kits/playbook/pb_button/docs/_footer.md
 - app/pb_kits/playbook/pb_button/docs/example.yml
 - app/pb_kits/playbook/pb_button/docs/index.js
@@ -591,6 +594,9 @@ files:
 - app/pb_kits/playbook/pb_currency/_currency.scss
 - app/pb_kits/playbook/pb_currency/currency.html.erb
 - app/pb_kits/playbook/pb_currency/currency.rb
+- app/pb_kits/playbook/pb_currency/currency.test.js
+- app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
@@ -603,6 +609,7 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/example.yml
 - app/pb_kits/playbook/pb_currency/docs/index.js
 - app/pb_kits/playbook/pb_dashboard/commonSettings.js
+- app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js
 - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
@@ -805,6 +812,7 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
+- app/pb_kits/playbook/pb_file_upload/fileupload.test.js
 - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx
@@ -1077,8 +1085,8 @@ files:
 - app/pb_kits/playbook/pb_icon_value/docs/index.js
 - app/pb_kits/playbook/pb_icon_value/icon_value.html.erb
 - app/pb_kits/playbook/pb_icon_value/icon_value.rb
-- app/pb_kits/playbook/pb_image/_image.jsx
 - app/pb_kits/playbook/pb_image/_image.scss
+- app/pb_kits/playbook/pb_image/_image.tsx
 - app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
 - app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx
 - app/pb_kits/playbook/pb_image/docs/_default_image.html.erb
@@ -1313,8 +1321,8 @@ files:
 - app/pb_kits/playbook/pb_nav/item.rb
 - app/pb_kits/playbook/pb_nav/nav.html.erb
 - app/pb_kits/playbook/pb_nav/nav.rb
-- app/pb_kits/playbook/pb_online_status/_online_status.jsx
 - app/pb_kits/playbook/pb_online_status/_online_status.scss
+- app/pb_kits/playbook/pb_online_status/_online_status.tsx
 - app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss
 - app/pb_kits/playbook/pb_online_status/docs/_description.md
 - app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb
@@ -2054,7 +2062,6 @@ files:
 - app/pb_kits/playbook/tokens/exports/_spacing.scss
 - app/pb_kits/playbook/tokens/exports/_typography.scss
 - app/pb_kits/playbook/tokens/index.scss
-- app/pb_kits/playbook/types.js
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
 - app/pb_kits/playbook/utilities/_cursor.scss
@@ -2065,8 +2072,8 @@ files:
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_shadow.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
-- app/pb_kits/playbook/utilities/globalProps.js
-- app/pb_kits/playbook/utilities/props.js
+- app/pb_kits/playbook/utilities/globalProps.ts
+- app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
 - app/pb_kits/playbook/utilities/text.js
 - dist/reset.css
@@ -2131,9 +2138,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.6
 signing_key:

data/app/pb_kits/playbook/types.js

@@ -1,4 +0,0 @@
-// @flow
-
-export type Callback<T, K> = T => K
-export type InputCallback<T> = Callback<SyntheticEvent<T>, void>

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

@@ -1,97 +0,0 @@
-// Prop categories
-const spacingProps = ({
-  marginRight,
-  marginLeft,
-  marginTop,
-  marginBottom,
-  marginX,
-  marginY,
-  margin,
-  paddingRight,
-  paddingLeft,
-  paddingTop,
-  paddingBottom,
-  paddingX,
-  paddingY,
-  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
-}
-
-const darkProps = ({ dark }) => {
-  let css = ''
-  css += dark ? 'dark' : ''
-  return css
-}
-
-const numberSpacingProps = ({ numberSpacing }) => {
-  let css = ''
-  css += numberSpacing ? `ns_${numberSpacing} ` : ''
-  return css
-}
-
-const maxWidthProps = ({ maxWidth }) => {
-  let css = ''
-  css += maxWidth ? `max_width_${maxWidth } ` : ''
-  return css
-}
-
-const zIndexProps = ({ zIndex }) => {
-  let css = ''
-  css += zIndex ? `z_index_${zIndex } ` : ''
-  return css
-}
-
-const shadowProps = ({ shadow }) => {
-  let css = ''
-  css += shadow ? `shadow_${shadow} ` : ''
-  return css
-}
-
-const lineHeightProps = ({ lineHeight }) => {
-  let css = ''
-  css += lineHeight ? `line_height_${lineHeight} ` : ''
-  return css
-}
-
-const displayProps = ({ display }) => {
-  let css = ''
-  css += display ? `display_${display} ` : ''
-  return css
-}
-
-const cursorProps = ({ cursor }) => {
-  let css = ''
-  css += cursor ? `cursor_${cursor} ` : ''
-  return css
-}
-
-// All Exported as a single function
-export const globalProps = (props, defaultProps = {}) => {
-  const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps)
-}
-
-export const deprecatedProps = (kit, props = []) => {
-  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!`)
-    })
-  }
-}