playbook_ui 10.25.1 → 10.26.0.pre.alpha1

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

@@ -1,74 +1,54 @@
+// Please keep these in alphabetical order
 import { omit } from 'lodash'
+import { camelToSnakeCase } from './text'
 
-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 Alignment = "start" | "end" | "center"
 
-type Dark = {
-  dark?: boolean,
+type AlignContent = {
+  alignContent?: Alignment & Space
 }
 
-type NumberSpacing = {
-  numberSpacing?: "tabular",
+type AlignItems = {
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
 }
 
-type MaxWidth = {
-  maxWidth?: Sizes,
+type AlignSelf = {
+  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
 }
+type AllSizes = None & Sizes
 
-type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
+type BorderRadius = {
+  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
 }
 
-type Shadow = {
-  shadow?: "none" | "deep" | "deeper" | "deepest",
+type Cursor = {
+  cursor?: "pointer",
 }
 
-type LineHeight = {
-  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
+type Dark = {
+  dark?: boolean,
 }
 
 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"
+  flexDirection?: {
+    xs?: FlexDirectionOptions,
+    sm?: FlexDirectionOptions,
+    md?: FlexDirectionOptions,
+    lg?: FlexDirectionOptions,
+    xl?: FlexDirectionOptions,
+  }
 }
 
+type FlexDirectionOptions = "row" | "column" | "row_reverse" | "column_reverse"
+
 type FlexGrow = {
   flexGrow?: 0 | 1
 }
@@ -78,13 +58,9 @@ type FlexShrink = {
 }
 
 type FlexWrap = {
-  flexWrap?: "wrap" | "nowrap" | "wrapReverse"
+  flexWrap?: "wrap" | "nowrap" | "reverse",
 }
 
-type Alignment = "start" | "end" | "center"
-
-type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
-
 type JustifyContent = {
   justifyContent?: Alignment & Space
 }
@@ -93,22 +69,57 @@ 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 None = "none"
+
+type NumberSpacing = {
+  numberSpacing?: "tabular",
 }
 
 type Order = {
   order?: "none" | 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 Sizes = "xs" | "sm" | "md" | "lg" | "xl"
+
+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 &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
@@ -190,76 +201,49 @@ 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
-  },
   alignItemsProps: ({ alignItems }: AlignItems) => {
-    let css = ''
-    css += alignItems == 'flexStart' ? 'align_items_flex_start' :
-      alignItems == 'flexEnd' ? 'align_items_flex_end' :
-        alignItems ? `align_items_${alignItems}` : ''
-    return css
+    return alignItems ? `align_items_${camelToSnakeCase(alignItems)}` : ''
   },
   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
+    return alignContent ? `align_content_${camelToSnakeCase(alignContent)}` : ''
   },
   alignSelfProps: ({ alignSelf }: AlignSelf) => {
-    let css = ''
-    css += alignSelf ? `align_self_${alignSelf}` : ''
-    return css
+    return alignSelf ? `align_self_${alignSelf}` : ''
+  },
+  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
+    if (typeof flexDirection !== 'object') return
+
+    const flexKeys: string[] = Object.keys(flexDirection)
+
+    return flexKeys.map((key: Sizes) => {
+      const flexDirectionValue: string = flexDirection[key]
+      return `flex_direction_${key}_${flexDirectionValue}`
+    }).join(" ")
+  },
+  flexWrapProps: ({ flexWrap }: FlexWrap) => {
+    return flexWrap ? `flex_wrap_${flexWrap} ` : ''
   },
   flexProps: ({ flex }: Flex) => {
-    let css = ''
-    css += flex ? `flex_${flex}` : ''
-    return css
+    return flex ? `flex_${flex}` : ''
   },
   flexGrowProps: ({ flexGrow }: FlexGrow) => {
-    let css = ''
-    css += flexGrow ? `flex_grow_${flexGrow}` : ''
-    return css
+    return typeof(flexGrow) !== undefined ? `flex_grow_${flexGrow}` : ''
   },
   flexShrinkProps: ({ flexShrink }: FlexShrink) => {
-    let css = ''
-    css += flexShrink ? `flex_shrink_${flexShrink}` : ''
-    return css
+    return typeof(flexShrink) !== undefined ? `flex_shrink_${flexShrink}` : ''
+  },
+  justifyContentProps: ({ justifyContent }: JustifyContent) => {
+    return justifyContent ? `justify_content_${camelToSnakeCase(justifyContent)}` : ''
+  },
+  justifySelfProps: ({ justifySelf }: JustifySelf) => {
+    return justifySelf ? `justify_self_${justifySelf}` : ''
   },
   orderProps: ({ order }: Order) => {
-    let css = ''
-    css += order ? `order_${order}` : ''
-    return css
+    return order ? `order_${order}` : ''
   }
 }
 
-export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
+export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | Record<string, never> = {}): string => {
   const allProps = { ...props, ...defaultProps }
   return Object.keys(PROP_CATEGORIES).map((key) => {
     return PROP_CATEGORIES[key](allProps)

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

@@ -0,0 +1,22 @@
+import { filter, isEmpty } from 'lodash'
+
+const titleizedWord = (word: string): string => (
+  word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+)
+
+export const titleize = (sentence: string): string => (
+  isEmpty(sentence) ? sentence : sentence.split(' ').map(titleizedWord).join(' ')
+)
+
+const notEmpty = (value: string | Record<string, unknown>): boolean => !isEmpty(value)
+
+export const joinPresent = (array: [], separator: string): string => (
+  filter(array, notEmpty).join(separator)
+)
+
+export const camelToSnakeCase = (word: string): string => {
+  return word.split(/([A-Z])/g).map((w, i) => {
+    const prefix = i > 0 ? '_' : ''
+    return w === w.toLowerCase() ? w : prefix + w.toLowerCase()
+  }).join("")
+}

data/dist/reset.css

@@ -1,2 +1,61 @@
-*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
+/* CLEAN UP AND REMOVE */
+/* Headings */
+/* Standard Font Weights */
+/* Non_Standard Font Weights */
+/*=====================================
+Base colors should not be documented.
+Only document color use.
+
+Colors -----------------------------*/
+/* Specialty Gradient -----------------*/
+/* Interface colors -------------------*/
+/* Main colors ------------------------*/
+/*=====================================
+
+Background colors ------------------*/
+/* Card colors ------------------*/
+/* Active colors ----------------------*/
+/* Hover colors -----------------------*/
+/* Focus colors -----------------------*/
+/* Border colors ----------------------*/
+/* Shadow colors ----------------------*/
+/* Text colors ------------------------*/
+/* Data colors ------------------------*/
+/* Status colors ----------------------*/
+/* Link colors ------------------------*/
+/* Product colors ---------------------*/
+/* Category colors ---------------------*/
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  *:before, *:after {
+    box-sizing: border-box; }
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden; }
+
+body {
+  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #F3F7FB;
+  height: 100%;
+  letter-spacing: 0;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: #242B42;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; }
+
+a {
+  text-decoration: none;
+  color: #0056CF; }
 

data/lib/playbook/flex_direction.rb

@@ -12,7 +12,13 @@ module Playbook
 
       selected_props.map do |k|
         flex_direction_value = send(k)
-        "flex_direction_#{flex_direction_value}" if flex_direction_values.include? flex_direction_value
+        if flex_direction_value.is_a?(Hash)
+          flex_direction_value.map do |media_size, flex_value|
+            "flex_direction_#{media_size}_#{flex_value}"
+          end
+        else
+          "flex_direction_#{flex_direction_value}" unless flex_direction_value.nil?
+        end
       end.compact.join(" ")
     end
 

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.25.0"
-  VERSION = "10.25.1"
+  VERSION = "10.26.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.25.1
+  version: 10.26.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-05-02 00:00:00.000000000 Z
+date: 2022-04-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -452,8 +452,8 @@ files:
 - app/pb_kits/playbook/pb_button_toolbar/docs/_description.md
 - app/pb_kits/playbook/pb_button_toolbar/docs/example.yml
 - app/pb_kits/playbook/pb_button_toolbar/docs/index.js
-- app/pb_kits/playbook/pb_caption/_caption.jsx
 - app/pb_kits/playbook/pb_caption/_caption.scss
+- app/pb_kits/playbook/pb_caption/_caption.tsx
 - app/pb_kits/playbook/pb_caption/_caption_mixin.scss
 - app/pb_kits/playbook/pb_caption/caption.html.erb
 - app/pb_kits/playbook/pb_caption/caption.rb
@@ -1884,8 +1884,8 @@ files:
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/timestamp.html.erb
 - app/pb_kits/playbook/pb_timestamp/timestamp.rb
-- app/pb_kits/playbook/pb_title/_title.jsx
 - app/pb_kits/playbook/pb_title/_title.scss
+- app/pb_kits/playbook/pb_title/_title.tsx
 - app/pb_kits/playbook/pb_title/_title_mixin.scss
 - app/pb_kits/playbook/pb_title/docs/_description.md
 - app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
@@ -1950,6 +1950,27 @@ files:
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
+- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/example.yml
+- app/pb_kits/playbook/pb_treemap_chart/docs/index.js
+- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
 - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
@@ -2094,7 +2115,7 @@ files:
 - 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
+- app/pb_kits/playbook/utilities/text.ts
 - dist/reset.css
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
@@ -2155,7 +2176,7 @@ files:
 - lib/playbook_ui.rb
 homepage: http://playbook.powerapp.cloud
 licenses:
-- ISC
+- MIT
 metadata: {}
 post_install_message:
 rdoc_options: []
@@ -2168,9 +2189,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.6
 signing_key:

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

@@ -1,15 +0,0 @@
-import { filter, isEmpty } from 'lodash'
-
-const titleizedWord = (string) => (
-  string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
-)
-
-export const titleize = (sentence) => (
-  isEmpty(sentence) ? sentence : sentence.split(' ').map(titleizedWord).join(' ')
-)
-
-const notEmpty = (value) => !isEmpty(value)
-
-export const joinPresent = (array, separator) => (
-  filter(array, notEmpty).join(separator)
-)