playbook_ui 6.1.0 → 6.4.0

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

@@ -6,23 +6,23 @@ import { pbChart } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type BarGraphProps = {
-  axisTitle: String,
-  xAxisCategories: Array,
-  yAxisMin: Number,
-  yAxisMax: Number,
-  chartData: Array<{
-    name: String,
-    data: Array<Number>,
+  axisTitle: string,
+  xAxisCategories: array,
+  yAxisMin: number,
+  yAxisMax: number,
+  chartData: array<{
+    name: string,
+    data: array<number>,
   }>,
-  className?: String,
-  id: Number,
-  pointStart: Number,
-  subTitle?: String,
-  title: String,
-  type?: String,
-  legend?: Boolean,
-  toggleLegendClick?: Boolean,
-  height?: String,
+  className?: string,
+  id: number,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
 }
 
 export default class BarGraph extends React.Component<BarGraphProps> {

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

@@ -8,17 +8,17 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type BodyProps = {
   aria?: object,
-  className?: String,
-  children?: Array<React.ReactChild>,
-  color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
-  dark?: Boolean,
+  className?: string,
+  children?: array<React.ReactChild>,
+  color?: 'default' | 'light' | 'lighter',
+  dark?: boolean,
   data?: object,
-  highlightedText?: Array<String>,
-  highlighting?: Boolean,
-  id?: String,
+  highlightedText?: array<string>,
+  highlighting?: boolean,
+  id?: string,
   status?: 'negative' | 'neutral' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
-  text?: String,
+  text?: string,
 }
 
 const Body = (props: BodyProps) => {
@@ -31,7 +31,7 @@ const Body = (props: BodyProps) => {
     highlightedText = [],
     highlighting = false,
     id,
-    status = '',
+    status,
     tag = 'div',
     text,
   } = props

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

@@ -1,23 +1,42 @@
 @import "./body_mixins";
 
-.pb_body_kit {
-  &.dark {
-    @include pb_body_dark;
-  }
-}
-
 [class^=pb_body_kit]{
-  @include pb_body;
-
+  @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}] {
+        @include pb_body($status_value);
+      }
+    }
   }
 
+  @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_body_status {
-    &[class*=_#{$status_name}] {
+    &[class*=#{$status_name}] {
       @include pb_body($status_value);
     }
   }
+
+  &[class*=dark] {
+    @include pb_body_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_body_status {
+      &[class*=_#{$status_name}] {
+        @include pb_body($status_value);
+      }
+    }
+  }
+ 
 }

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

@@ -6,9 +6,12 @@ $pb_body_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
   lighter:        $text_lt_lighter,
-  dark:           $text_dk_default,
-  light_dark:     $text_dk_light,
-  lighter_dark:   $text_dk_lighter,
+);
+
+$pb_dark_body_colors: (
+  default:        $text_dk_default,
+  light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
 );
 
 // Order is important here!

data/app/pb_kits/playbook/pb_body/body.rb

@@ -9,7 +9,7 @@ module Playbook
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter dark light_dark lighter_dark],
+                   values: %w[default light lighter],
                    default: "default"
       prop :status, type: Playbook::Props::Enum,
                     values: %w[neutral negative positive],
@@ -41,11 +41,11 @@ module Playbook
       end
 
       def color_class
-        color != "default" ? color : nil
+        color == "default" ? nil : color
       end
 
       def status_class
-        status != "neutral" ? status : nil
+        status == "neutral" ? nil : status
       end
     end
   end

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

@@ -9,26 +9,26 @@ import Icon from '../pb_icon/_icon.jsx'
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
   aria?: {
-    label: String,
+    label: string,
   },
-  children?: Array<React.ReactChild>,
-  className?: String | Array<String>,
-  disabled?: Boolean,
-  fixedWidth?: Boolean,
-  fullWidth?: Boolean,
-  icon?: String,
-  id?: String,
-  link?: String,
-  loading?: Boolean,
-  newWindow?: Boolean,
+  children?: array<React.ReactChild>,
+  className?: string | array<string>,
+  disabled?: boolean,
+  fixedWidth?: boolean,
+  fullWidth?: boolean,
+  icon?: string,
+  id?: string,
+  link?: string,
+  loading?: boolean,
+  newWindow?: boolean,
   onClick?: EventHandler,
   size: 'large' | 'medium' | 'small',
-  text?: String,
+  text?: string,
   type: 'inline' | null,
-  htmlType: String | 'button',
-  value?: String | null,
+  htmlType: string | 'button',
+  value?: string | null,
   variant: 'primary' | 'secondary' | 'link',
-  wrapperClass: String,
+  wrapperClass: string,
 }
 
 const buttonClassName = (props: ButtonPropTypes) => {

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

@@ -10,7 +10,8 @@ $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
 $pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
-$pb_button_border_width: 1px;
+$pb_button_border_width: 0px;
+
 
 @mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
   text-rendering: optimizeLegibility;
@@ -47,16 +48,17 @@ $pb_button_border_width: 1px;
     visibility: visible;
   }
 
-  &:hover {
+  &:hover, &:focus {
     outline: none;
+    
   }
 
-  &:active,
-  &:focus {
+  &:active {
     outline: none;
     border-width: $pb_button_border_width;
     border-color: darken($bg, $pb_button_hover_darken);
   }
+  
 };
 
 @mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
@@ -67,8 +69,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_primary {
   @include pb_button;
 
-  &:hover {
-    @include pb_button_hover;
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover;
+    }
   }
 }
 
@@ -76,17 +80,21 @@ $pb_button_border_width: 1px;
 @mixin pb_button_secondary {
   @include pb_button(rgba($primary_action, 0.05), $primary_action);
 
-  &:hover {
-    @include pb_button_hover(rgba($primary_action, $opacity_3));
-  }
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover(rgba($primary_action, $opacity_3));
+    }
+  } 
 }
 
 // Link =========================
 @mixin pb_button_link {
   @include pb_button($transparent, $primary_action);
 
-  &:hover {
-    @include pb_button_hover($transparent);
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($transparent);
+    }
   }
 }
 
@@ -120,8 +128,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_primary_dark{
   @include pb_button($primary_action);
 
-  &:hover {
-    @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
+    }
   }
 }
 
@@ -129,8 +139,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_secondary_dark{
   @include pb_button(rgba($white, 0.2), $white);
 
-  &:hover {
-    @include pb_button_hover(rgba($primary_action, $opacity_2));
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover(rgba($primary_action, $opacity_2));
+    }
   }
 }
 
@@ -138,8 +150,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_link_dark {
   @include pb_button($transparent, $primary_action);
 
-  &:hover {
-    @include pb_button_hover($transparent);
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($transparent);
+    }
   }
 }
 

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx

@@ -9,15 +9,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type ButtonToolbarProps = {
   aria?: object,
-  children?: Array<React.ReactChild>,
-  className?: String,
-  connected?: Boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
+  connected?: boolean,
   data?: object,
-  id?: String,
+  id?: string,
   onClick?: EventHandler,
   orientation?: "horizontal" | "vertical",
-  text?: String,
-  variant?: String,
+  text?: string,
+  variant?: string,
 }
 
 const ButtonToolbar  = (props: ButtonToolbarProps) => {

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -13,13 +13,17 @@
       & > [class^=pb_button]  {
         margin-right: $space-xs;
 
-        &:hover {
-          background-color:darken($royal, 20%);
+        @media (hover:hover) {
+          &:hover {
+            background-color:darken($royal, 20%);
+          }
         }
 
         &[class*=secondary] {
-          &:hover {
-            background-color:rgba($primary_action, $opacity_3)
+          @media (hover:hover) {
+            &:hover {
+              background-color:rgba($primary_action, $opacity_3)
+            }
           }
         }
   
@@ -42,13 +46,17 @@
         width: 100%;
         margin-bottom: $space-xs;
 
-        &:hover {
-          background-color:darken($royal, 20%);
+        @media (hover:hover) {
+          &:hover {
+            background-color:darken($royal, 20%);
+          }
         }
 
         &[class*=secondary] {
-          &:hover {
-            background-color:rgba($primary_action, $opacity_3)
+          @media (hover:hover) {
+            &:hover {
+              background-color:rgba($primary_action, $opacity_3)
+            }
           }
         }
   

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -7,13 +7,14 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CaptionProps = {
   aria?: object,
-  className?: String,
-  children: Array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  children: array<React.ReactNode> | React.ReactNode,
   data?: object,
-  id?: String,
+  id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
-  text?: String,
+  text?: string,
+  variant?: null | "link",
 }
 
 const Caption = (props: CaptionProps) => {
@@ -26,13 +27,14 @@ const Caption = (props: CaptionProps) => {
     size = 'md',
     tag = 'div',
     text,
+    variant = null,
   } = props
   const Tag = `${tag}`
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size),
+    buildCss('pb_caption_kit', size, variant),
     className,
     globalProps(props)
   )

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

@@ -9,5 +9,11 @@
 
   &[class^=pb_caption_kit_xs] {
     @include caption_xs;
+    &[class*=_link]  {
+      color: $primary;
+    }
+  }
+  &[class*=dark]{
+    @include caption_dark
   }
 }

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -14,9 +14,12 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p span div],
                  default: "div"
       prop :text
+      prop :variant, type: Playbook::Props::Enum,
+                     values: [nil, "link"],
+                     default: nil
 
       def classname
-        generate_classname("pb_caption_kit", size)
+        generate_classname("pb_caption_kit", size, variant)
       end
     end
   end

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("caption", props: { text: "Subcaption (link)", size: 'xs', variant: "link" }) %>