playbook_ui 10.25.1 → 10.26.0.pre.alpha.display1

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

@@ -1,7 +1,12 @@
 import { omit } from 'lodash'
 
-type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
-type None = "none"
+import {
+  Binary,
+  Display,
+  DisplaySizes,
+  None,
+  Sizes,
+} from '../types'
 
 type AllSizes = None & Sizes
 
@@ -42,27 +47,23 @@ type ZIndex = {
 }
 
 type Shadow = {
-  shadow?: "none" | "deep" | "deeper" | "deepest",
+  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",
+  borderRadius?: None | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
 }
 
 type Flex = {
-  flex?: "none" | "initial" | "auto" | 1
+  flex?: None | "initial" | "auto" | 1
 }
 
 type FlexDirection = {
@@ -70,11 +71,11 @@ type FlexDirection = {
 }
 
 type FlexGrow = {
-  flexGrow?: 0 | 1
+  flexGrow?: Binary
 }
 
 type FlexShrink = {
-  flexShrink?: 0 | 1
+  flexShrink?: Binary
 }
 
 type FlexWrap = {
@@ -106,11 +107,11 @@ type AlignSelf = {
 }
 
 type Order = {
-  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  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 &
+  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
   Shadow & ZIndex
@@ -180,9 +181,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) => {
@@ -259,7 +272,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   }
 }
 
-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/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/display.rb

@@ -8,12 +8,22 @@ module Playbook
 
     def display_props
       selected_props = display_options.keys.select { |sk| try(sk) }
-      return nil unless selected_props.present?
-
-      selected_props.map do |k|
-        display_value = send(k)
-        "display_#{display_value}" if display_values.include? display_value
-      end.compact.join(" ")
+      responsive = selected_props.present? && try(:display).is_a?(::Hash)
+      css = ""
+      if responsive
+        display_value = send(:display)
+        display_value.each do |key, value|
+          css += "display_#{key}_#{value} " if display_size_values.include?(key.to_s) && display_values.include?(value.to_s)
+        end
+      elsif display_value.is_a?(String)
+        selected_props.each do |k|
+          display_value = send(k)
+          css += "display_#{display_value}" if display_values.include? display_value
+        end
+      else
+        ""
+      end
+      css unless css.blank?
     end
 
     def display_options
@@ -22,8 +32,12 @@ module Playbook
       }
     end
 
+    def display_size_values
+      %w[xs sm md lg xl]
+    end
+
     def display_values
-      %w[block inline_block inline flex inline_flex hidden]
+      %w[block inline_block inline flex inline_flex none]
     end
   end
 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.alpha.display1"
 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.alpha.display1
 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-05-03 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
@@ -2050,6 +2071,7 @@ files:
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
+- app/pb_kits/playbook/tokens/_display.scss
 - app/pb_kits/playbook/tokens/_line_height.scss
 - app/pb_kits/playbook/tokens/_opacity.scss
 - app/pb_kits/playbook/tokens/_positioning.scss
@@ -2155,7 +2177,7 @@ files:
 - lib/playbook_ui.rb
 homepage: http://playbook.powerapp.cloud
 licenses:
-- ISC
+- MIT
 metadata: {}
 post_install_message:
 rdoc_options: []
@@ -2168,9 +2190,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: