playbook_ui 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -31,12 +31,14 @@ $avatar-sizes: (
         [class^=pb_card_kit].overlay_top_center {
           left: 50%;
           transform: translateX(-50%);
+          padding: 2px !important;
         }
 
         [class^=pb_card_kit].overlay_left_center,
         [class^=pb_card_kit].overlay_right_center {
           top: 50%;
           transform: translateY(-50%);
+          padding: 2px !important;
         }
       }
 

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 [class^=pb_avatar_action_button_kit] {
 
   $icon_size: 0px;
@@ -15,7 +13,7 @@
       color: $value;
     }
   }
-
+  
   @mixin icon-base {
     &.dark{
         background-color: $bg_dark
@@ -33,22 +31,22 @@
   }
 
   @each $name, $size in $avatar-sizes {
-
+    
     &[class*=_#{$name}] {
-
+      
       $avatar_size: map-get($avatar-sizes, $name);
-      $icon_size: math.div($avatar_size, 2);
-      $border_size: math.div($icon_size, 10);
+      $icon_size: $avatar_size / 2;
+      $border_size: $icon_size / 10;
 
       position: relative;
       width: $avatar_size * 1.25;
       height: $avatar_size * 1.1;
       display: flex;
-
+    
       [class^=pb_tooltip_kit] {
         justify-self: center;
       }
-
+    
       &[class*=_bottom] .icon {
         @include icon-base;
         top: $icon_size * 1.27;
@@ -61,8 +59,8 @@
         left: $icon_size * 1.5;
       }
       &[class*=_left] [class^=pb_avatar_kit] {
-        padding-left: math.div($icon_size , 2);
+        padding-left: $icon_size / 2;
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -13,7 +11,7 @@
   align-items: center;
   justify-content: center;
   border-radius: $border_rad_light;
-  padding: 0 math.div($space_xs, 2);
+  padding: 0 $space_xs/2;
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
@@ -36,7 +34,7 @@
     height: $pb_badge_height;
     min-height: $pb_badge_height;
     min-width: $pb_badge_height;
-    border-radius: math.div($pb_badge_height, 2);
+    border-radius: $pb_badge_height / 2;
   }
 
   &[class*=_notification] {

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

@@ -1,70 +1,66 @@
 import React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import BarGraph from '../_bar_graph'
-import Icon from '../../pb_icon/_icon'
 
-const chartData = [
-  {
-    name: 'Role',
-    data: [0, 200, 300, 654, 656],
-  },
-  {
-    name: 'Company',
-    data: [150, 524, 320, 440, 500],
-  },
-]
+import BarGraph from '../_bar_graph'
 
-const renderIcon = (iconName, color) => {
-  return ReactDOMServer.renderToStaticMarkup(
-  <Icon
-      color={color}
-      icon={iconName}
-  />)
-};
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  name: 'Manufacturing',
+  data: [4434, 524, 2320, 440, 500],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387, 743, 1344, 434, 440],
+}, {
+  name: 'Project Development',
+  data: [3227, 878, 999, 780, 1000],
+}, {
+  name: 'Other',
+  data: [1111, 677, 3245, 500, 200],
+}]
 
 const barGraphOptions = {
-  yAxis: {
-    tickInterval: 5,
+  subtitle: {
+    text: "Overwritten subtitle",
+    style: {
+      color: "red"
+    }
   },
   xAxis: {
-    categories: ['1', '2', '3', '4', '5'],
-    labels: {
-      useHTML: true,
-      formatter: function () {
-        switch (this.value) {
-          case '1':
-            return `${renderIcon('frown', 'error')}`;
-          case '2':
-            return `${renderIcon('frown', 'warning')}`;
-          case '3':
-            return `${renderIcon('frown-open', 'neutral')}`;
-          case '4':
-            return `${renderIcon('smile', 'category_7')}`;
-          case '5':
-            return `${renderIcon('smile-beam', 'success')}`;
-          default:
-            return ''
-        }
-      },
-      style: {
-        fontSize: '1.4em',
-      },
-      y: 42,
-    },
-  },
-  legend: {
-    itemMarginTop: 62,
-  },
+      labels: {
+          useHTML: true,
+          formatter: function() {
+              switch (this.value) {
+                  case 'Jan':
+                      return `<i class="far fa-apple-whole"></i> ${this.value}`
+                  case 'Feb':
+                      return `<i class="far fa-strawberry"></i> ${this.value}`
+                  case 'Mar':
+                      return `<i class="far fa-lemon"></i> ${this.value}`
+                  case 'Apr':
+                      return `<i class="far fa-pear"></i> ${this.value}`
+                  case 'May':
+                      return `<i class="far fa-peach"></i> ${this.value}`
+                  default:
+                      return ''
+              }
+          }
+      }
+  }
 }
 
-const BarGraphCustom = () => (
+const BarGraphCustom = (props) => (
   <div>
     <BarGraph
+        axisTitle="Number of Employees"
         chartData={chartData}
         customOptions={barGraphOptions}
-        id="happiness-dashboard"
-        legend
+        id="bar-custom"
+        subTitle="Subtitle to replace"
         title="Bar Graph with Custom Overrides"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
     />
   </div>
 )

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

@@ -1,42 +1,49 @@
 <% data = [{
-  name: 'Role',
-  data: [0, 200, 300, 654, 656],
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
 }, {
-  name: 'Company',
-  data: [150, 524, 320, 440, 500],
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
 }] %>
 
 <% bar_graph_options = {
-  customOptions: {
-    yAxis: {
-      tickInterval: 5,
-    },
-    xAxis: {
-      categories: [
-        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
-      ],
-      labels: {
-        useHTML: true,
-        sytle: {
-          fontSize: '1.4em',
+    customOptions: {
+        subtitle: {
+            text: "Overwritten subtitle",
+            style: {
+                color: "red"
+            }
         },
-        y: 42,
-      },
-    },
-    legend: {
-      itemMarginTop: 62,
-    },
-  } 
+        xAxis: {
+            categories: [
+                '<i class="far fa-apple-whole"></i> Jan',
+                '<i class="far fa-strawberry"></i> Feb',
+                '<i class="far fa-lemon"></i> Mar',
+                '<i class="far fa-pear"></i> Apr',
+                '<i class="far fa-peach"></i> May'
+            ],
+            labels: {
+                useHTML: true,
+            }
+        }
+    }
 } %>
 
 <%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
     chart_data: data,
     id: "bar-default",
-    legend: true,
+    y_axis_min: 0,
+    subtitle: 'Subtitle to replace',
     title: 'Bar Graph with Custom Overrides',
     custom_options: bar_graph_options
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,25 +1,24 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-[class^="pb_body_kit"] {
+[class^=pb_body_kit]{
   @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{"" + $color_name}] {
       @include pb_body($color_value);
     }
     @each $status_name, $status_value in $pb_body_status {
-      &[class*="_default_#{$status_name}"] {
+      &[class*=_default_#{$status_name}] {
         @include pb_body($status_value);
       }
     }
   }
-  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
-    &[class*="_#{$dark_color_name}"][class*="dark"] {
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
       @include pb_body($dark_color_value);
     }
   }
-  b,
-  strong {
+  b, strong {
     font-weight: $bold;
   }
 
@@ -30,8 +29,7 @@
     }
   }
 
-  em,
-  i {
+  em, i {
     font-style: italic;
   }
 
@@ -41,25 +39,26 @@
   }
 
   @each $status_name, $status_value in $pb_body_status {
-    &[class*="#{$status_name}"] {
+    &[class*=#{$status_name}] {
       @include pb_body($status_value);
     }
   }
 
-  &[class*="dark"] {
+  &[class*=dark] {
     a {
       color: $active_dark;
     }
     @include pb_body_dark();
-    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
-      &[class*="_#{$dark_color_name}"][class*="dark"] {
+    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+      &[class*=_#{$dark_color_name}][class*=dark]{
         @include pb_body($dark_color_value);
       }
     }
-    @each $status_name, $status_value in $pb_dark_body_status {
-      &[class*="_#{$status_name}"] {
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*=_#{$status_name}] {
         @include pb_body($status_value);
       }
     }
   }
+
 }

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -3,35 +3,29 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default: $text_lt_default,
-  light: $text_lt_light,
-  lighter: $text_lt_lighter,
-  link: $primary,
-  error: $error,
-  success: $text_lt_success_sm,
+  default:        $text_lt_default,
+  light:          $text_lt_light,
+  lighter:        $text_lt_lighter,
+  link:           $primary,
+  error:          $error,
+  success:        $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
-  default: $text_dk_default,
-  light: $text_dk_light,
-  lighter: $text_dk_lighter,
-  link: $active_dark,
-  error: $error,
-  success: $text_dk_success_sm,
+  default:        $text_dk_default,
+  light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
+  link:           $active_dark,
+  error:          $error,
+  success:        $text_dk_success_sm,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default: $text_lt_default,
-  negative: $error,
-  dark_error: $error_dark_body,
-  positive: $text_lt_success_sm,
-);
-
-$pb_dark_body_status: (
-  default: $text_dk_default,
-  negative: $error_dark,
-  positive: $text_dk_success_sm,
+  default:        $text_lt_default,
+  negative:       $error,
+  dark_error:     $error_dark_body,
+  positive:       $text_lt_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
@@ -11,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 math.div($space_xs, 2);
+  padding: 0 $space_xs/2;
 
   svg {
    margin-right: 8px;

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -13,7 +13,6 @@ const BreadCrumbsDefault = (props) => {
       <Icon
           icon="home"
           size="1x"
-          {...props}
       />
       <BreadCrumbItem
           {...props}
@@ -23,13 +22,11 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Home"
-            {...props}
         />
       </BreadCrumbItem>
       <Icon
           icon="users"
           size="1x"
-          {...props}
       />
       <Link
           {...props}
@@ -39,20 +36,17 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Users"
-            {...props}
         />
       </Link>
       <Icon
           icon="user"
           size="1x"
-          {...props}
       />
       <Link {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
-            {...props}
         />
       </Link>
     </BreadCrumbs>

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "./button_mixins";
 @import "../tokens/colors";
 @import "../tokens/border_radius";
@@ -19,7 +17,7 @@ $pb_button_sizes: (
   @each $name, $size in $pb_button_sizes {
     &[class*=size_#{$name}] {
       font-size: $size;
-      padding: math.div($size, 2) $size * 2.42;
+      padding: $size / 2 $size * 2.42;
       @if $name == "sm" {
         min-height: 0;
       }

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -13,10 +13,9 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
-  lighter:        $text_dk_lighter,
   link:           $active_dark,
   success:        $text_dk_success_sm,
-  error:          $error_dark,
+  error:          $error,
 );
 
 

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

@@ -21,14 +21,6 @@
     border-width: 0px;
   }
 
-  @function ends-with($string, $suffix) {
-    $suffix-length: str-length($suffix);
-    @if $suffix-length == 0 {
-      @return true;
-    }
-    @return str-slice($string, -$suffix-length) == $suffix;
-  }
-
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;
@@ -38,19 +30,9 @@
     border: 0;
     border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
     @each $color_name, $color_value in $pb_card_header_colors {
-      @if not ends-with($color_name, '_subtle') {
-        &[class*="_#{$color_name}"] {
-          @include pb_card_header_color($color_value);
-          color: lightenText($color_value);
-        }
-      }
-    }
-    @each $color_name, $color_value in $pb_card_header_colors {
-      @if ends-with($color_name, '_subtle') {
-        &[class*="_#{$color_name}"] {
-          @include pb_card_header_color($color_value);
-          color: lightenText($color_value);
-        }
+      &[class*=_#{"" + $color_name}] {
+        @include pb_card_header_color($color_value);
+        color: lightenText($color_value);
       }
     }
     @each $color_name, $color_value in $pb_card_header_colors {

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

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
-import type { ProductColors, CategoryColors, BackgroundColors, StatusColors } from '../types/colors'
+import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
 import Flex from '../pb_flex/_flex'
@@ -36,7 +36,7 @@ type CardPropTypes = {
 } & GlobalProps
 
 type CardHeaderProps = {
-  headerColor?: BackgroundColors | ProductColors | CategoryColors | StatusColors | "none",
+  headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
   headerColorStriped?: boolean,
   children: React.ReactChild[] | React.ReactChild,
   className?: string,
@@ -127,12 +127,12 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'
-
+  
   return (
     <>
     {
       draggableItem ? (
-        <Draggable.Item dragId={dragId}
+        <Draggable.Item dragId={dragId} 
             key={dragId}
         >
         <Tag
@@ -140,14 +140,14 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             className={classnames(cardCss, globalProps(props), className)}
             {...restHtmlProps}
-            style={mergedStyles}
+            style={mergedStyles} 
         >
           {subComponentTags('Header')}
           {
             dragHandle ? (
               <Flex>
                 <span className="card_draggable_handle">
-                  <Icon
+                  <Icon 
                       icon="grip-dots-vertical"
                       paddingRight="xs"
                       verticalAlign="middle"
@@ -169,7 +169,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               className={classnames(cardCss, globalProps(props), className)}
               {...restHtmlProps}
-              style={mergedStyles}
+              style={mergedStyles} 
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

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

@@ -24,7 +24,7 @@ $additional_colors: (
   "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
-$pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $additional_colors), $category_colors), $status_colors);
+$pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
@@ -32,7 +32,7 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
 }
 
 @mixin pb_card_selected_dark {
-  @include pb_card_selected($primary_action_dark);
+  @include pb_card_selected($primary_action);
 }
 
 @mixin pb_card($background: $card_light, $border_color: $border_light) {

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

@@ -67,42 +67,4 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
-
-<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success" }) do %>
-    <%= pb_rails("body", props: { text: "Success", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error" }) do %>
-    <%= pb_rails("body", props: { text: "Error", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
-    <%= pb_rails("body", props: { text: "Success Subtle" }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
-    <%= pb_rails("body", props: { text: "Error Subtle"}) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
+<% end %>