playbook_ui 6.4.0 → 7.0.0.pre.alpha5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c5b7e2c43b42ee78da647dd0633e8377ec033c91290dc4bc2cedcd6c4d8afff
-  data.tar.gz: 42acc945643e2a6269fd8fc900fdc8874c5a4fcb27b26daab9b362d4851a1c6a
+  metadata.gz: db3423cbf2f95fde18f38882e86bc3342bfe232ed8adac2f030e5be811137e29
+  data.tar.gz: ddc14660d5bd2c8a3192ef72419424a81d9d352aeec400d84089d23c78d157b5
 SHA512:
-  metadata.gz: 4c07c0929e4c7a4cb31de00fad7a166bdbe07cdb55bc64c2fc268afd1509acfbd2b2f3814393d38c044289d930b56c1ede0e7a0dc687730fe67e5caf19b6d241
-  data.tar.gz: 2964f0ebeec2ae295b307f628d4a1076cc6d6a034aefafe98c8bd7db1675dbabe451b8faf6d93326b8bb83c9e1245d9a34572a7d00edb6a2028cc204464cd47a
+  metadata.gz: ce6421c6e87c2b544a60e066892101949410e9d15f9b82b674d1abfc782036ad4d37ed483fc14b012bdc7ff1e887d956daa16b39af23fa5e27aeb3d0b6d822d6
+  data.tar.gz: a5c6308837a164bbbb09ad5bbac767593511531ae79e7706dc0a5774d632ab9e117cbf1b29c5ed73c4fb4974694111c86bdf3dab1f72dc42ec3284822a12f722

data/app/controllers/playbook/application_controller.rb

@@ -2,8 +2,6 @@
 
 module Playbook
   class ApplicationController < ActionController::Base
-    protect_from_forgery with: :exception
-
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper

data/app/helpers/playbook/pb_kit_helper.rb

@@ -15,6 +15,7 @@ module Playbook
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
+    # deprecated
     def pb_react(kit, props: {}, options: {})
       ::Webpacker::React::Component.new(kit.camelize).render(props, options)
     end

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+@import "tokens/fonts";
 @import "pb_body/body";
 @import "pb_button/button";
 @import 'pb_button_toolbar/button_toolbar';

data/app/pb_kits/playbook/index.js

@@ -1,3 +1,7 @@
+import './_playbook.scss'
+import 'lazysizes/plugins/attrchange/ls.attrchange'
+import 'lazysizes'
+
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.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.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_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,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_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_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.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 {

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Date as FormattedDate } from '../../'
+
+const DateDefault = () => {
+  return (
+    <div>
+      <FormattedDate
+          date="2012-12-25"
+      />
+
+      <FormattedDate
+          date={new Date()}
+      />
+    </div>
+  )
+}
+
+export default DateDefault

data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Date as FormattedDate } from '../..'
 
-const DateDefaultReact = () => {
+const DateDefault = () => {
   return (
     <div>
       <FormattedDate
@@ -17,4 +17,4 @@ const DateDefaultReact = () => {
   )
 }
 
-export default DateDefaultReact
+export default DateDefault

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

@@ -3,11 +3,12 @@ examples:
   rails:
   - date_default: Default
   - date_timezone: Timezones
+  
   - date_variants: Variants
   - date_alignment: Alignment
   
   react:
-  - date_default_react: Default
+  - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
   

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

@@ -1,3 +1,3 @@
-export { default as DateDefaultReact } from './_date_default_react.jsx'
+export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb

@@ -1,8 +1 @@
-<%= content_tag(:figure,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <% object.widths_to_percentages.each do |percentage| %>
-    <div class="pb_distribution_width" style="width:<%= percentage %>%"></div>
-  <% end %>
-<% end %>
+<%= react_component('DistributionBar', object.chart_options) %>

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -33,7 +33,7 @@ const FileUpload = (props: FileUploadProps) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
+        className={classnames(buildCss('pb_file_upload_kit', className), globalProps(props))}
         {...getRootProps()}
     >
       <Card>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -18,16 +18,13 @@ $form_pill_colors: (
   padding: 0 $space-sm/3;
   height: $pb_form_pill_height;
   border-radius: $pb_form_pill_height/2;
-  cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: rgba($color_value, $opacity-1);
       transition: background-color 0.2s ease;
       box-shadow: none;
-      @media (hover:hover) {
-        &:hover {
-          background-color: rgba($color_value, $opacity-2);
-        }
+      &:hover {
+        background-color: rgba($color_value, $opacity-2);
       }
       #{$selector}_text {
         color: $color_value;

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb

@@ -1,3 +1 @@
-<%= pb_rails("body", props: { dark: true }) %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
-<% end %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx

@@ -1,15 +1,13 @@
 import React from 'react'
-import { Body, Icon } from '../../'
+import { Icon } from '../../'
 
 const IconDefaultDark = () => {
   return (
     <div>
-      <Body dark>
-        <Icon
-            fixedWidth
-            icon="user"
-        />
-      </Body>
+      <Icon
+          fixedWidth
+          icon="user"
+      />
     </div>
   )
 }