playbook_ui 10.13.1 → 10.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6a09fb50daa6d72c546eae50086d8852f0f776df7991a9581c0bdfec21ca3cc
-  data.tar.gz: 303b57504679c17d6d2444d615bdf67577746a257d13a938e735bb99511bc11e
+  metadata.gz: faae90de5528b9f023fd6824aa39c518ce892c36c60a212e5e4f7638d56f84ce
+  data.tar.gz: bbd980bc0d205b346fa150aced925e080c8ac8d3239e5edbccb4d3c9c3d6f556
 SHA512:
-  metadata.gz: 47dedae157a8cc286c10cd879cec7a32372d192b7fbdcfec4b33f146086b5b6d3850fa28b9ff1edcb956c6c8bea76e1b065f19db08d1fc48b8164758d2dc862a
-  data.tar.gz: dad85d8bbe2ff88c7a0d9141a2f8b3ce4e076415a6b4ee15a0c0380270b891e348c45386d401c6c6b706ba27e08013e8615b637246af78c2872051c118289981
+  metadata.gz: 7df412eddb0717bb3166971a857cbc47df4d14f487eb34939e0e1a8e230dd95b101e19481b4eed793c5a5c01be6a65fdb1b57c7df288b65606a44c94c0f0ee92
+  data.tar.gz: 5b2dd670d04f69b59c7d6150b94dbfe547d7ef9ac39e7973489463de9759c8a81aa23af5a0e0867a85fd20ae2eedb3b60cbdf2a5370b8a470d5d35fed2c6bc91

data/app/pb_kits/playbook/pb_background/_background.jsx

@@ -7,7 +7,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type BackgroundProps = {
   aria?: object,
-  backgroundColor?: 'gradient' | 'dark' | 'light' | 'white',
+  backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21',
   children?: array<React.ReactNode> | React.ReactNode,
   className?: string,
   data?: object,
@@ -31,6 +31,7 @@ const Background = (props: BackgroundProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+
   const classes = classnames(buildCss('pb_background_kit'), globalProps(props), `pb_background_color_${backgroundColor}`, className)
   const Tag = `${tag}`
   const backgroundStyle = {
@@ -42,19 +43,19 @@ const Background = (props: BackgroundProps) => {
     <>
       <If condition={imageUrl}>
         <Tag
-            className={classes + 'lazyload blur_up'}
             style={backgroundStyle}
             {...ariaProps}
             {...dataProps}
+            className={classes}
             id={id}
         >
           { children }
         </Tag>
         <Else />
         <Tag
-            className={classes}
             {...ariaProps}
             {...dataProps}
+            className={classes}
             id={id}
         >
           { children }

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -1,12 +1,15 @@
 @import "../tokens/colors";
 
-$background_colors: (
+$additional_colors: (
   "gradient": linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%),
   "dark": $bg_dark,
   "light": $bg_light,
   "white": $white,
 );
 
+$merge_kits1: map-merge($status_colors, $category_colors);
+$merge_kits2: map-merge($merge_kits1, $product_colors);
+$background_colors: map-merge($additional_colors, $merge_kits2);
 
 [class^=pb_background_kit] {
   max-width: 100%;
@@ -29,7 +32,4 @@ $background_colors: (
     -webkit-filter: blur(0);
     filter: blur(0);
   }
-
-
-
 }

data/app/pb_kits/playbook/pb_background/background.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbBackground
     class Background < Playbook::KitBase
       prop :background_color, type: Playbook::Props::Enum,
-                              values: %w[gradient dark light white],
+                              values: %w[gradient dark light white success warning error info neutral primary category_1 category_2 category_3 category_4 category_5 category_6 category_7 category_8 category_9 category_10 category_11 category_12 category_13 category_14 category_15 category_16 category_17 category_18 category_19 category_20 category_21],
                               default: "light"
       prop :image_url
 

data/app/pb_kits/playbook/pb_background/docs/_background_category.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %>
+  <%= pb_rails("background", props: { background_color: "category_1", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_2", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_3", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_4", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_5", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_6", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_7", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_8", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_9", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_10", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_11", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_12", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_13", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_14", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_15", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_16", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_17", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_18", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_19", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_20", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_21", padding: "xl" }) do %> <% end %>
+<%end%>

data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import { Background } from '../..'
+import { Flex } from '../..'
+
+const BackgroundCategory = (props) => (
+  <Flex
+      gap="md"
+      justify="center"
+      wrap
+  >
+    <Background
+        backgroundColor="category_1"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_2"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_3"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_4"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_5"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_6"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_7"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_8"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_9"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_10"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_11"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_12"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_13"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_14"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_15"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_16"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_17"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_18"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_19"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_20"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_21"
+        padding="xl"
+        {...props}
+    />
+  </Flex>
+)
+
+export default BackgroundCategory

data/app/pb_kits/playbook/pb_background/docs/_background_category.md

@@ -0,0 +1 @@
+Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_background/docs/_background_status.html.erb

@@ -0,0 +1,13 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("background", props: { background_color: "success", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "warning", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "error", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "info", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "neutral", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "primary", padding: "xl" }) do %> <% end %>
+</div>

data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundStatus = (props) => (
+  <div className="pb--doc-demo-row">
+    <Background
+        backgroundColor="success"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="warning"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="error"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="info"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="neutral"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="primary"
+        padding="xl"
+        {...props}
+    />
+  </div>
+)
+
+export default BackgroundStatus

data/app/pb_kits/playbook/pb_background/docs/_background_status.md

@@ -0,0 +1 @@
+Status colors can be passed into the background kit. `success`, `warning`, `error`, `info`, `neutral`, and `primary`

data/app/pb_kits/playbook/pb_background/docs/_description.md

@@ -1 +1 @@
-The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, and white.
+The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.

data/app/pb_kits/playbook/pb_background/docs/example.yml

@@ -5,9 +5,13 @@ examples:
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
+  - background_status: Status
+  - background_category: Category
 
   react:
   - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
+  - background_status: Status
+  - background_category: Category

data/app/pb_kits/playbook/pb_background/docs/index.js

@@ -2,4 +2,5 @@ export { default as BackgroundLight } from './_background_light.jsx'
 export { default as BackgroundWhite } from './_background_white.jsx'
 export { default as BackgroundGradient } from './_background_gradient.jsx'
 export { default as BackgroundImage } from './_background_image.jsx'
-
+export { default as BackgroundStatus } from './_background_status.jsx'
+export { default as BackgroundCategory } from './_background_category.jsx'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss

@@ -1,3 +1,6 @@
 .pb_bar_graph {
-
+    rect.highcharts-background {
+        fill: #0000 !important;
+    }
 }
+

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb

@@ -0,0 +1,20 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}, {
+    type: 'spline',
+    name: 'Trend Line',
+    data: [1975, 600, 2500, 924, 500],
+    color: '#F9BB00',
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-spline",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    subtitle: 'Source: thesolarfoundation.com',
+    title: 'Bar Graph with Spline',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  type: 'spline',
+  name: 'Trend Line',
+  data: [1975, 600, 2500, 924, 500],
+  color: '#F9BB00',
+}]
+
+const BarGraphSpline = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-spline"
+        legend
+        title="Bar Graph with Spline"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphSpline

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md

@@ -0,0 +1,2 @@
+A spline can be added by including a separate chart data with the `type: 'spline'` attribute.
+A color can also be specified for the spline.

data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml

@@ -5,6 +5,7 @@ examples:
   - bar_graph_legend: Legend
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
+  - bar_graph_spline: Spline
 
 
   react:
@@ -12,4 +13,4 @@ examples:
   - bar_graph_legend: Legend
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
-
+  - bar_graph_spline: Spline

data/app/pb_kits/playbook/pb_bar_graph/docs/index.js

@@ -2,3 +2,4 @@ export { default as BarGraphDefault } from './_bar_graph_default.jsx'
 export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
 export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
 export { default as BarGraphHeight } from './_bar_graph_height.jsx'
+export { default as BarGraphSpline } from './_bar_graph_spline.jsx'

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -8,6 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
   aria?: object,
+  background?: "white" | "dark" | "light" | "windows" | "siding" | "doors" | "solar" | "roofing" | "gutters" | "insulation" | "none",
   borderNone?: boolean,
   borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
   children: array<React.ReactNode> | React.ReactNode,
@@ -66,6 +67,7 @@ const Body = (props: CardBodyProps) => {
 const Card = (props: CardPropTypes) => {
   const {
     aria = {},
+    background = 'none',
     borderNone = false,
     borderRadius = 'md',
     children,
@@ -78,9 +80,9 @@ const Card = (props: CardPropTypes) => {
     padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
-  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, `border_radius_${borderRadius}`, {
-    selected,
-    deselected: !selected,
+  const selectedCSS = selected == true ? 'selected' : 'deselected'
+  const backgroundCSS = background == 'none' ? '' : `background_${background}`
+  const cardCss = buildCss('pb_card_kit', selectedCSS, `shadow_${shadow}`, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -19,6 +19,13 @@ $pb_card_padding:(
   lg: $space_lg,
   xl: $space_xl,
 );
+$additional_colors: (
+  "dark": $bg_dark,
+  "light": $bg_light,
+  "white": $white,
+  "none": none,
+);
+$background_colors: map-merge($product_colors, $additional_colors);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
@@ -35,7 +42,6 @@ $pb_card_padding:(
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: $background;
   background-clip: border-box;
   border-width: $pb_card_border_width;
   border-style: solid;
@@ -44,6 +50,13 @@ $pb_card_padding:(
   transition-property: all;
   transition-duration: $transition_short;
   transition-timing-function: $easeIn;
+  background-color: $white;
+
+  @each $name, $color in $background_colors {
+    &[class*=background_#{$name}] {
+      background-color: $color;
+    }
+  };
 
   @each $name, $shadow in $box_shadows {
     &[class*=_#{$name}] {
@@ -61,6 +74,8 @@ $pb_card_padding:(
 @mixin pb_card_dark {
   color: $white;
   @include pb_card($card_dark, $border_dark);
+  background-color: $card_dark;
+  border-color: $border_dark;
 }
 
 @mixin pb_card_highlight($width, $height, $background){

data/app/pb_kits/playbook/pb_card/card.rb

@@ -17,15 +17,19 @@ module Playbook
       prop :border_radius, type: Playbook::Props::Enum,
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
+      prop :background, type: Playbook::Props::Enum,
+                        values: %w[white light dark windows siding doors solar roofing gutters insulation none],
+                        default: "none"
 
       def classname
         generate_classname("pb_card_kit",
                            selected_class,
                            shadow_class,
-                           highlight_position_class,
-                           highlight_color_class,
                            border_class,
-                           border_radius_class)
+                           border_radius_class,
+                           background_class,
+                           highlight_position_class,
+                           highlight_color_class)
       end
 
       def body_padding
@@ -54,6 +58,10 @@ module Playbook
         highlight[:color].present? ? "highlight_#{highlight[:color]}" : nil
       end
 
+      def background_class
+        background == "none" ? nil : "background_#{background}"
+      end
+
       def border_class
         border_none == true ? "border_none" : nil
       end

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb

@@ -0,0 +1,57 @@
+<%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4 }) %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "dark", dark: true })  do %>
+  <%= pb_rails("body", props: {
+  text: "Dark",
+  color: "lighter"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("card")  do %>
+  <%= pb_rails("body", props: {
+  text: "White"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "light"})  do %>
+  <%= pb_rails("body", props: {
+  text: "Light"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "windows", dark: true })  do %>
+  <%= pb_rails("body", props: {
+  text: "Windows",
+  color: "lighter"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "siding" })  do %>
+  <%= pb_rails("body", props: {
+  text: "Siding"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "doors" })  do %>
+  <%= pb_rails("body", props: {
+  text: "Doors"
+}) %>
+<% end %>
+
+<br>