RubyGems - playbook_ui - Versions diffs - 7.0.0.pre.alpha9 → 7.0.1.pre.alpha1 - Mend

playbook_ui 7.0.0.pre.alpha9 → 7.0.1.pre.alpha1

Files changed (258) hide show

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

@@ -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.html.erb CHANGED

@@ -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.rb CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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_body/docs/_body_block.jsx CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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_mixins.scss CHANGED

@@ -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,10 +129,8 @@ $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));
   }
 }
@@ -150,10 +138,8 @@ $pb_button_border_width: 0px;
 @mixin pb_button_link_dark {
   @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_accessibility.jsx CHANGED

@@ -1,9 +1,10 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonAccessibility = () => (
+const ButtonAccessibility = (props) => (
   <div>
     <Button
+        {...props}
         aria={{ label: 'button' }}
         link="https://google.com"
         tag="a"

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx CHANGED

@@ -1,9 +1,10 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonBlockContent = () => (
+const ButtonBlockContent = (props) => (
   <div>
     <Button
+        {...props}
         fixedWidth
         icon="users"
         text="Button with Block Content"

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

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonDefault = () => (
+const ButtonDefault = (props) => (
   <div>
     <Button
-        dark
+        {...props}
         marginRight="xl"
         onClick={() => alert('button clicked!')}
         text="Button Primary"
@@ -13,21 +13,19 @@ const ButtonDefault = () => (
         onClick={() => alert('button clicked!')}
         text="Button Secondary"
         variant="secondary"
+        {...props}
     />
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Link"
         variant="link"
+        {...props}
     />
     <Button
         disabled
         onClick={() => alert('button clicked!')}
         text="Button Disabled"
-    />
-    <Button
-        disabled
-        onClick={() => alert('button clicked!')}
-        text="Button Disabled"
+        {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx CHANGED

@@ -1,9 +1,10 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonFullWidth = () => (
+const ButtonFullWidth = (props) => (
   <div>
     <Button
+        {...props}
         fullWidth
         text="Button Full Width"
     />

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

@@ -1,18 +1,21 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonLink = () => (
+const ButtonLink = (props) => (
   <div>
     <Button
+        {...props}
         link="https://google.com"
         text="A Tag Button"
     />
     <Button
+        {...props}
         link="https://google.com"
         newWindow
         text="Open in New Window"
     />
     <Button
+        {...props}
         disabled
         link="https://google.com"
         text="A Tag Button Disabled"

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

@@ -1,18 +1,21 @@
 import React from 'react'
 import { Button } from '../../'
-const ButtonLoading = () => (
+const ButtonLoading = (props) => (
   <div>
     <Button
+        {...props}
         loading
         text="Button Primary"
     />
     <Button
+        {...props}
         loading
         text="Button Secondary"
         variant="secondary"
     />
     <Button
+        {...props}
         loading
         text="A Tag Button Disabled"
         variant="link"

data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx CHANGED

@@ -1,9 +1,10 @@
 import React from 'react'
 import Button from '../_button.jsx'
-const ButtonOptions = () => (
+const ButtonOptions = (props) => (
   <div>
     <Button
+        {...props}
         htmlType="submit"
         onClick={() => alert('Click!')}
         text="Button with options"

data/app/pb_kits/playbook/pb_button/docs/example.yml CHANGED

@@ -1,7 +1,6 @@
 examples:
   rails:
   - button_default: Button Variants
-  - button_default_dark: Button Variants Dark
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading
@@ -10,7 +9,6 @@ examples:
   - button_options: Button Additional Options
   react:
   - button_default: Button Variants
-  - button_default_dark: Button Variants Dark
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading

data/app/pb_kits/playbook/pb_button/docs/index.js CHANGED

@@ -4,5 +4,4 @@ export { default as ButtonLink } from './_button_link.jsx'
 export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
-export { default as ButtonDefaultDark } from './_button_default_dark.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'

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

@@ -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)
           }
         }