playbook_ui 7.0.0.pre.alpha7 → 7.0.0.pre.alpha12

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

@@ -6,18 +6,10 @@ examples:
   - avatar_action_button_actions: Actions
   - avatar_action_button_onclick: On Click
   - avatar_action_button_tooltip: Tooltip
-  - avatar_action_button_dark: Dark
-  - avatar_action_button_placement_dark: Placement Dark
-  - avatar_action_button_actions_dark: Actions Dark
-  - avatar_action_button_on_click_dark: On Click Dark
-  - avatar_action_button_tooltip_dark: Tooltip Dark
+
   
   react:
   - avatar_action_button_default: Default
   - avatar_action_button_placement: Placement
   - avatar_action_button_actions: Actions
   - avatar_action_button_on_click: On Click
-  - avatar_action_button_dark: Dark
-  - avatar_action_button_placement_dark: Placement Dark
-  - avatar_action_button_actions_dark: Actions Dark
-  - avatar_action_button_on_click_dark: On Click Dark

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

@@ -2,7 +2,3 @@ export { default as AvatarActionButtonDefault } from './_avatar_action_button_de
 export { default as AvatarActionButtonPlacement } from './_avatar_action_button_placement.jsx'
 export { default as AvatarActionButtonActions } from './_avatar_action_button_actions.jsx'
 export { default as AvatarActionButtonOnClick } from './_avatar_action_button_on_click.jsx'
-export { default as AvatarActionButtonDark } from './_avatar_action_button_dark.jsx'
-export { default as AvatarActionButtonPlacementDark } from './_avatar_action_button_placement_dark.jsx'
-export { default as AvatarActionButtonOnClickDark } from './_avatar_action_button_on_click_dark.jsx'
-export { default as AvatarActionButtonActionsDark } from './_avatar_action_button_actions_dark.jsx'

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

@@ -32,8 +32,10 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, { rounded: rounded }), className,
-    globalProps(props))
+    buildCss('pb_badge_kit', variant, { rounded }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import Badge from '../_badge.jsx'
 
-const BadgeColors = () => {
+const BadgeColors = (props) => {
   return (
     <div>
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="primary"
@@ -14,6 +15,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="primary"
         />
@@ -21,6 +23,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="primary"
         />
@@ -28,6 +31,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="success"
@@ -36,6 +40,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="success"
         />
@@ -43,6 +48,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="success"
         />
@@ -50,6 +56,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="warning"
@@ -58,6 +65,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="warning"
         />
@@ -65,6 +73,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="warning"
         />
@@ -72,6 +81,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="error"
@@ -80,6 +90,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="error"
         />
@@ -87,6 +98,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="error"
         />
@@ -94,6 +106,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="info"
@@ -102,6 +115,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="info"
         />
@@ -109,6 +123,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="info"
         />
@@ -116,6 +131,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="neutral"
@@ -124,6 +140,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="neutral"
         />
@@ -131,6 +148,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="neutral"
         />

data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import Badge from '../_badge.jsx'
 
-const BadgeDefault = () => {
+const BadgeDefault = (props) => {
   return (
     <div>
       <Badge
+          {...props}
           text="+1"
           variant="primary"
       />
@@ -12,6 +13,7 @@ const BadgeDefault = () => {
       &nbsp;
 
       <Badge
+          {...props}
           text="+4"
           variant="primary"
       />
@@ -19,6 +21,7 @@ const BadgeDefault = () => {
       &nbsp;
 
       <Badge
+          {...props}
           text="+1000"
           variant="primary"
       />

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import Badge from '../_badge.jsx'
 
-const BadgeRounded = () => {
+const BadgeRounded = (props) => {
   return (
     <div>
       <Badge
+          {...props}
           rounded
           text="+1"
           variant="primary"
@@ -13,6 +14,7 @@ const BadgeRounded = () => {
       &nbsp;
 
       <Badge
+          {...props}
           rounded
           text="+4"
           variant="primary"
@@ -21,6 +23,7 @@ const BadgeRounded = () => {
       &nbsp;
 
       <Badge
+          {...props}
           rounded
           text="+1000"
           variant="primary"

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

@@ -3,10 +3,9 @@ examples:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
-  - badge_dark: Dark
+ 
 
   react:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
-  - badge_dark: Dark

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

@@ -1,4 +1,3 @@
 export { default as BadgeDefault } from './_badge_default.jsx'
 export { default as BadgeRounded } from './_badge_rounded.jsx'
 export { default as BadgeColors } from './_badge_colors.jsx'
-export { default as BadgeDark } from './_badge_dark.jsx'

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(className, globalProps(this.props))}
+          className={classnames(globalProps(this.props), className)}
           id={id}
       />
     )

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

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

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

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

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

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Body } from '../../'
 
-const BodyBlock = () => {
+const BodyBlock = (props) => {
   return (
     <div>
-      <Body>
+      <Body {...props}>
         {'I am a body kit'}
       </Body>
     </div>

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -1,25 +1,30 @@
 import React from 'react'
 import { Body } from '../../'
 
-const BodyLight = () => {
+const BodyLight = (props) => {
   return (
     <div>
       <Body
+          {...props}
           text="I am a body kit (Default)"
       />
       <Body
+          {...props}
           color="light"
           text="I am a body kit (Light)"
       />
       <Body
+          {...props}
           color="lighter"
           text="I am a body kit (Lighter)"
       />
       <Body
+          {...props}
           status="negative"
           text="I am a body kit (Status: negative)"
       />
       <Body
+          {...props}
           status="positive"
           text="I am a body kit (Status: positive)"
       />

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

@@ -1,9 +1,7 @@
 examples:
   rails:
-  - body_light: Light UI
-  - body_dark: Dark UI
+  - body_light: Default
   - body_block: Block
   react:
-  - body_light: Light UI
-  - body_dark: Dark UI
+  - body_light: Default
   - body_block: Block

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

@@ -1,3 +1,2 @@
-export { default as BodyDark } from './_body_dark.jsx'
 export { default as BodyLight } from './_body_light.jsx'
 export { default as BodyBlock } from './_body_block.jsx'

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

@@ -82,7 +82,11 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className, globalProps(props))
+  const css = classnames(
+    buttonClassName(props),
+    globalProps(props),
+    className
+  )
   const loadingIcon = (
     <div className="loading-icon">
       <Icon
@@ -97,6 +101,7 @@ 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,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,17 +139,21 @@ $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));
+    }
   }
 }
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button($transparent, $primary_action);
+  @include pb_button($transparent, $white);
 
-  &:hover {
-    @include pb_button_hover($transparent);
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($transparent);
+    }
   }
 }