playbook_ui 10.16.0 → 10.19.0.pre.popover.alpha1

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx

@@ -0,0 +1,210 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexItemAlignSelf = (props) => {
+  return (
+    <>
+      <Title
+          size={4}
+          text="Row"
+          {...props}
+      />
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="start">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="end">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="center">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="stretch">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+      <br />
+
+      <Title
+          size={4}
+          text="Column"
+          {...props}
+      />
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="start"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="end"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="center"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="stretch"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+    </>
+  )
+}
+
+export default FlexItemAlignSelf

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.md

@@ -0,0 +1,5 @@
+##### Prop
+
+* `align_self` | **Type**: String | **Values**: start | end | center | stretch 
+
+- Align-self aligns the Flex Item on the cross axis. This prop may also be applied to the Flex kit and will act the same way.

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -4,6 +4,33 @@ import { Flex, FlexItem, Title } from  '../..'
 const FlexItemExample = (props) => {
   return (
     <>
+      <Title
+          size={4}
+          text="Display Flex"
+      />
+      <br />
+      <div className="flex-doc-example">
+        <FlexItem
+            displayFlex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem>
+            {'We'}
+          </FlexItem>
+          <FlexItem>
+            {'Are'}
+          </FlexItem>
+          <FlexItem>
+            {'Being'}
+          </FlexItem>
+          <FlexItem>
+            {'Flexed'}
+          </FlexItem>
+        </FlexItem>
+      </div>
+
+      <br />
       <Title
           size={4}
           text="Grow"

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md

@@ -1,5 +1,6 @@
 ##### Props
 
+*  `display_flex` | **Type**: Boolean
 *  `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 *  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
 *  `grow` | **Type**: Boolean
@@ -10,3 +11,4 @@
 - Setting Flex to 1 is equal to setting the grow & shrink prop to true
 - Setting Flex to 0 is equal to setting the grow & shrink prop to false
 - If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
+- display_flex will either be true or false. If true, then the class will be applied to the kit

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

@@ -10,6 +10,7 @@ examples:
   - flex_align: Align
   - flex_gap: Gap
   - flex_item: Flex Item
+  - flex_item_align_self: Flex Item - Align Self
 
 
 
@@ -24,3 +25,4 @@ examples:
   - flex_align: Align
   - flex_gap: Gap
   - flex_item_example: Flex Item
+  - flex_item_align_self: Flex Item - Align Self

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

@@ -7,3 +7,4 @@ export { default as FlexJustify } from './_flex_justify.jsx'
 export { default as FlexAlign } from './_flex_align.jsx'
 export { default as FlexGap } from './_flex_gap.jsx'
 export { default as FlexItemExample } from './_flex_item_example.jsx'
+export { default as FlexItemAlignSelf } from './_flex_item_align_self.jsx'

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -48,6 +48,10 @@ module Playbook
                    values: %w[start center end stretch baseline none],
                    default: "none"
 
+      prop :align_self, type: Playbook::Props::Enum,
+                        values: %w[start end center stretch none],
+                        default: "none"
+
       prop :wrap, type: Playbook::Props::Boolean,
                   default: false
 
@@ -62,7 +66,8 @@ module Playbook
                            spacing_class,
                            gap_class,
                            row_gap_class,
-                           column_gap_class)
+                           column_gap_class,
+                           align_self_class)
       end
 
     private
@@ -115,6 +120,14 @@ module Playbook
         end
       end
 
+      def align_self_class
+        if align_self == "none"
+          nil
+        else
+          "align_self_#{align_self}"
+        end
+      end
+
       def wrap_class
         wrap ? "wrap" : nil
       end

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -19,8 +19,15 @@ module Playbook
                    values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
                    default: "none"
 
+      prop :align_self, type: Playbook::Props::Enum,
+                        values: %w[start center end stretch] + [nil],
+                        default: nil
+
+      prop :display_flex, type: Playbook::Props::Boolean,
+                          default: false
+
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class + order_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class, display_flex_class) + overflow_class + order_class + align_self_class
       end
 
       def style_value
@@ -29,6 +36,14 @@ module Playbook
 
     private
 
+      def align_self_class
+        align_self ? "align_self_#{align_self}" : ""
+      end
+
+      def display_flex_class
+        display_flex ? "display_flex" : nil
+      end
+
       def fixed_size_class
         fixed_size.present? ? "fixed_size" : nil
       end

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -25,6 +25,7 @@ type GaugeProps = {
   suffix: string,
   title: string,
   tooltipHtml: string,
+  colors: array,
 }
 
 const Gauge = (props: GaugeProps) => {
@@ -45,6 +46,7 @@ const Gauge = (props: GaugeProps) => {
     suffix = '',
     title = '',
     tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
+    colors = [],
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -76,6 +78,7 @@ const Gauge = (props: GaugeProps) => {
       style: style,
       tooltipHtml: tooltipHtml,
       type: 'gauge',
+      colors: colors,
     })
   }, [])
 

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb

@@ -0,0 +1,12 @@
+<% data = [
+  {
+    name: 'Name',
+    value: 67,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-colors",
+  chart_data: data,
+  colors: ['data-7']
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Name', value: 67 },
+]
+
+const GaugeColors = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-colors"
+        {...props}
+        colors={['data-7']}
+    />
+  </div>
+)
+
+export default GaugeColors

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+Pass the prop `colors` and use **ONE** desired value `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

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

@@ -9,6 +9,7 @@ examples:
   - gauge_min_max: Min Max Labels
   - gauge_sizing: Sizing
   - gauge_height: Height
+  - gauge_colors: Color Overrides
 
 
   react:
@@ -21,3 +22,4 @@ examples:
   - gauge_sizing: Sizing
   - gauge_height: Height
   - gauge_live_data: Live Data
+  - gauge_colors: Color Overrides

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

@@ -7,3 +7,4 @@ export { default as GaugeSizing } from './_gauge_sizing.jsx'
 export { default as GaugeTitle } from './_gauge_title.jsx'
 export { default as GaugeUnits } from './_gauge_units.jsx'
 export { default as GaugeLiveData } from './_gauge_live_data.jsx'
+export { default as GaugeColors } from './_gauge_colors.jsx'

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -20,6 +20,7 @@ module Playbook
       prop :disable_animation, type: Playbook::Props::Boolean, default: false
       prop :min, type: Playbook::Props::Numeric, default: 0
       prop :max, type: Playbook::Props::Numeric, default: 100
+      prop :colors, type: Playbook::Props::Array, default: []
 
       def chart_data_formatted
         chart_data.map { |hash| hash[:y] = hash.delete :value }
@@ -42,6 +43,7 @@ module Playbook
           style: style,
           tooltipHtml: tooltip_html,
           type: "gauge",
+          colors: colors,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/StringConcatenation, Style/HashLikeCase
+
 require "open-uri"
 
 module Playbook
@@ -135,3 +137,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/StringConcatenation, Style/HashLikeCase

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -52,9 +52,9 @@ $pb_icon_circle_sizes: (
   @each $color_name, $color_value in $colors {
     &[class*=_#{$color_name}] {
       color: $color_value;
-      background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
       &.dark {
-        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_5);
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
       }
     }
   }

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb

@@ -5,7 +5,7 @@
 }) %>
 <%= pb_rails("icon_circle", props: {
   icon: "archive",
-  variant: "blue",
+  variant: "orange",
   size: "sm"
 }) %>
 <%= pb_rails("icon_circle", props: {

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx

@@ -15,7 +15,7 @@ const IconCircleColor = (props) => {
       <IconCircle
           icon="rocket"
           size="sm"
-          variant="blue"
+          variant="orange"
           {...props}
       />
       <br />

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md

@@ -0,0 +1 @@
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -8,7 +8,7 @@ module Playbook
                   values: %w[xs sm md base lg xl],
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green],
+                     values: %w[default royal blue orange purple teal red yellow green],
                      default: "default"
 
       def classname

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -33,6 +33,7 @@ module Playbook
       end
 
       def title_size
+        # rubocop:disable Style/CaseLikeIf
         if size == "lg"
           1
         elsif size == "md"
@@ -40,6 +41,7 @@ module Playbook
         else
           3
         end
+        # rubocop:enable Style/CaseLikeIf
       end
     end
   end

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -14,6 +14,7 @@ type ImageProps = {
   onError?: () => {},
   size: "xs" | "sm" | "md" | "lg" | "xl",
   rounded?: boolean,
+  transition: "blur" | "fade" | "scale",
   url: string,
 }
 
@@ -27,6 +28,7 @@ const Image = (props: ImageProps) => {
     onError = null,
     rounded = false,
     size = '',
+    transition = 'fade',
     url = '',
   } = props
 
@@ -34,7 +36,7 @@ const Image = (props: ImageProps) => {
   const classes = classnames(
     buildCss('pb_image_kit', size),
     'lazyload',
-    'blur_up',
+    transition,
     { rounded },
     globalProps(props),
     className
@@ -53,6 +55,7 @@ const Image = (props: ImageProps) => {
           onError={onError}
           rounded={+rounded}
           src={url}
+          transition={transition}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -28,15 +28,31 @@ $image-sizes: (
       border-radius: $border-rad-heaviest;
     }
 
-    .blur_up {
-      -webkit-filter: blur(6px);
-      filter: blur(6px);
-      transition: filter 550ms, -webkit-filter 550ms;
+    &.fade {
+      opacity: 0;
+      &.lazyloaded {
+        opacity: 1;
+        transition: opacity 300ms ease-in;
+      }
     }
-
-    .blur_up.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
+    
+    &.blur {
+      filter: blur(5px);
+      &.lazyloaded {
+        -webkit-filter: blur(0);
+        filter: blur(0);
+        transition: filter 300ms ease-in;
+      }
+    }
+    
+    &.scale {
+      opacity: 0;
+      transform: scale(0.9);
+      &.lazyloaded {
+        opacity: 1;
+        transform: scale(1);
+        transition: 700ms ease-in;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb

@@ -0,0 +1,54 @@
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
+    <%= pb_rails("select", props: {
+    id: "transition-dropdown",
+    label: "",
+    blank_selection: "Select a Transition...",
+    options: [
+        {
+          value: 'fade',
+        },
+        {
+          value: 'blur',
+        },
+        {
+          value: 'scale',
+        },
+    ]
+    }) %>
+  <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("button", props: {classname: "button", text: "Load Image", margin_left: "sm", margin_top: "xs", disabled: true }) %>
+    <% end %>
+<% end %>
+<%= pb_rails("image",  props: { classname: "transition-image", alt: "picture of a misty forest", url: "", on_error: "this.style.display = 'none'" }) %>
+
+<script>
+    window.addEventListener('DOMContentLoaded', () => {
+        const button = document.querySelector(".button")
+        const transitionDropdown = document.querySelector("#transition-dropdown")
+        var option = ''
+
+        transitionDropdown.addEventListener('change', function() {
+          if (this.value === '') {
+            button.className = button.className + ' _disabled'
+          } else {
+            button.removeAttribute("disabled");
+            button.className = button.className.replace(/\_disabled/gi, '')
+            option = this.value
+          }
+        });
+
+        const updateTransition = (transition) => {
+          const imageTransition = document.querySelector('.transition-image')
+            imageTransition.removeAttribute("style")
+            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
+            imageTransition.classList.add(transition, "lazyload")
+            imageTransition.src = "https://unsplash.it/500/400/?image=634"
+        }
+      
+        button.addEventListener('click', function() {
+          updateTransition(option)
+        })
+    });
+</script>