playbook_ui 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1

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

@@ -0,0 +1,160 @@
+import React from 'react'
+import Badge from '../_badge.jsx'
+
+const BadgeDark = () => {
+  return (
+    <div>
+      <div>
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="primary"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+4"
+            variant="primary"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+1000"
+            variant="primary"
+        />
+      </div>
+
+      <div>
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="success"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+4"
+            variant="success"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+1000"
+            variant="success"
+        />
+      </div>
+
+      <div>
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="warning"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+4"
+            variant="warning"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+1000"
+            variant="warning"
+        />
+      </div>
+
+      <div>
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="error"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+4"
+            variant="error"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+1000"
+            variant="error"
+        />
+      </div>
+
+      <div>
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="info"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+4"
+            variant="info"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+1000"
+            variant="info"
+        />
+      </div>
+
+      <div>
+        <Badge
+            dark
+            rounded
+            text="+1"
+            variant="neutral"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+4"
+            variant="neutral"
+        />
+
+        &nbsp;
+
+        <Badge
+            dark
+            text="+1000"
+            variant="neutral"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default BadgeDark

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

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

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

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

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

@@ -3,9 +3,10 @@ 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,3 +1,4 @@
 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

@@ -1,12 +1 @@
-<%= 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 %>
+<%= react_component('BarGraph', object.chart_options) %>

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

@@ -10,7 +10,7 @@ type BodyProps = {
   aria?: object,
   className?: string,
   children?: array<React.ReactChild>,
-  color?: 'default' | 'light' | 'lighter',
+  color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
   dark?: boolean,
   data?: object,
   highlightedText?: array<string>,
@@ -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,42 +1,23 @@
 @import "./body_mixins";
 
+.pb_body_kit {
+  &.dark {
+    @include pb_body_dark;
+  }
+}
+
 [class^=pb_body_kit]{
-  @include pb_body($text_lt_default);
+  @include pb_body;
+
   @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,12 +6,9 @@ $pb_body_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
   lighter:        $text_lt_lighter,
-);
-
-$pb_dark_body_colors: (
-  default:        $text_dk_default,
-  light:          $text_dk_light,
-  lighter:        $text_dk_lighter,
+  dark:           $text_dk_default,
+  light_dark:     $text_dk_light,
+  lighter_dark:   $text_dk_lighter,
 );
 
 // Order is important here!

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

@@ -5,11 +5,11 @@ module Playbook
     class Body
       include Playbook::Props
       include ActionView::Helpers
-
+      
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter],
+                   values: %w[default light lighter dark light_dark lighter_dark],
                    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" ? nil : color
+        color != "default" ? color : nil
       end
 
       def status_class
-        status == "neutral" ? nil : status
+        status != "neutral" ? status : nil
       end
     end
   end

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

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

data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb

@@ -0,0 +1,28 @@
+<%= pb_rails("body", props: {
+  text: "I am a body kit",
+  dark: true,
+}) %>
+
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Light)",
+  color: "light",
+  dark: true
+}) %>
+
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Lighter)",
+  color: "lighter",
+  dark: true
+}) %>
+
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Status: negative)",
+  status: "negative",
+  dark: true
+}) %>
+
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Status: positive)",
+  status: "positive",
+  dark: true
+}) %>

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

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