playbook_ui 7.0.0 → 7.0.1.pre.alpha1

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb

@@ -1 +1,12 @@
-<%= react_component('BarGraph', object.chart_options) %>
+<%= content_tag(:div, "",
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) %>
+<% content_for :pb_js do %>
+  <%= javascript_tag do %>
+    window.addEventListener('DOMContentLoaded', function() {
+      new pbChart('.selector', <%= object.chart_options %>)
+    })
+  <% end %>
+<% end %>

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

@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     return (
       <div
-          className={classnames(globalProps(this.props), className)}
+          className={classnames(className, globalProps(this.props))}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }
+        }.to_json.html_safe
       end
 
       def classname

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

@@ -26,7 +26,7 @@ const Body = (props: BodyProps) => {
     aria = {},
     className,
     children,
-    color = '',
+    color = 'default',
     data = {},
     highlightedText = [],
     highlighting = false,

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

@@ -1,7 +1,6 @@
 @import "./body_mixins";
 
 [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);
@@ -20,23 +19,8 @@
   }
   
   @each $status_name, $status_value in $pb_body_status {
-    &[class*=#{$status_name}] {
+    &[class*=_default_#{$status_name}][class*=dark] {
       @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.rb

@@ -41,7 +41,7 @@ module Playbook
       end
 
       def color_class
-        color == "default" ? nil : color
+        color
       end
 
       def status_class

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

@@ -82,11 +82,7 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(
-    buttonClassName(props),
-    globalProps(props),
-    className
-  )
+  const css = classnames(buttonClassName(props), className, globalProps(props))
   const loadingIcon = (
     <div className="loading-icon">
       <Icon
@@ -101,7 +97,6 @@ const Button = (props: ButtonPropTypes) => {
     <span className="pb_button_content">
       <If condition={icon !== null}>
         <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
-        {' '}
       </If>
       <span>{text || children}</span>
     </span>

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

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

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -9,14 +9,12 @@ const ButtonDefault = (props) => (
         onClick={() => alert('button clicked!')}
         text="Button Primary"
     />
-    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Secondary"
         variant="secondary"
         {...props}
     />
-    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Link"

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -8,14 +8,12 @@ const ButtonLink = (props) => (
         link="https://google.com"
         text="A Tag Button"
     />
-    {' '}
     <Button
         {...props}
         link="https://google.com"
         newWindow
         text="Open in New Window"
     />
-    {' '}
     <Button
         {...props}
         disabled

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -8,14 +8,12 @@ const ButtonLoading = (props) => (
         loading
         text="Button Primary"
     />
-    {' '}
     <Button
         {...props}
         loading
         text="Button Secondary"
         variant="secondary"
     />
-    {' '}
     <Button
         {...props}
         loading

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

@@ -35,11 +35,7 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(
-    buildCss('pb_button_toolbar_kit', orientation, { connected }),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_button_toolbar_kit', orientation, { connected: connected }), className, globalProps(props))
 
   return (
     <div

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

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

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

@@ -14,7 +14,6 @@ type CaptionProps = {
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
   text?: string,
-  variant?: null | "link",
 }
 
 const Caption = (props: CaptionProps) => {
@@ -27,16 +26,15 @@ 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, variant),
-    globalProps(props),
-    className
+    buildCss('pb_caption_kit', size),
+    className,
+    globalProps(props)
   )
 
   return (

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

@@ -9,9 +9,6 @@
 
   &[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,12 +14,9 @@ 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, variant)
+        generate_classname("pb_caption_kit", size)
       end
     end
   end

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

@@ -1,2 +1 @@
 export { default as CaptionLight } from './_caption_light.jsx'
-export { default as CaptionVariants } from './_caption_variants.jsx'

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

@@ -53,7 +53,6 @@ $pb_card_padding:(
 }
 
 @mixin pb_card_dark {
-  color: $white;
   @include pb_card($card_dark, $border_dark);
 }
 

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -40,11 +40,8 @@ const Checkbox = (props: CheckboxProps) => {
 
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(
-    buildCss('pb_checkbox_kit', { checked, error }),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_checkbox_kit',
+    { checked: checked, error: error }), className, globalProps(props))
 
   return (
     <label

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -1,10 +1,8 @@
 @import "../tokens/colors";
-@import "../tokens/transition";
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
   display: inline-flex;
-  cursor: pointer;
   .pb_checkbox_label {
     padding-left: $space_xs;
     cursor: pointer;
@@ -17,8 +15,7 @@ $transition: $transition_cubic;
     width: 22px;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
-    transition: background $transition_default ease, border-color $transition_default ease;
-    .check_icon {
+    .check_icon{
       opacity: 0;
       position: relative;
       top: -2px;
@@ -29,10 +26,9 @@ $transition: $transition_cubic;
 
     }
   }
-  @media (hover:hover) {
-    &:hover input ~ .pb_checkbox_checkmark {
-      border-color: $primary_action;
-    }
+
+  &:hover input ~ .pb_checkbox_checkmark {
+    border-color: $primary_action;
   }
 
   input {
@@ -62,10 +58,8 @@ $transition: $transition_cubic;
       border-color: $primary_action;
     }
 
-    @media (hover:hover) {
-      &:hover .pb_checkbox_checkmark {
-        border-color: $primary_action;
-      }
+    &:hover .pb_checkbox_checkmark {
+      border-color: $primary_action;
     }
 
     &.error {