playbook_ui 7.0.0.pre.alpha5 → 7.0.0.pre.alpha10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: db3423cbf2f95fde18f38882e86bc3342bfe232ed8adac2f030e5be811137e29
-  data.tar.gz: ddc14660d5bd2c8a3192ef72419424a81d9d352aeec400d84089d23c78d157b5
+  metadata.gz: 194c10ec06ce124dbe76ef242188655e8858047a6390fbf32471f54aabdd9c10
+  data.tar.gz: f17c05ef7b24bf389b1d646559faaa89862d684b0ff3bb6c81fd6f7e81e1c43f
 SHA512:
-  metadata.gz: ce6421c6e87c2b544a60e066892101949410e9d15f9b82b674d1abfc782036ad4d37ed483fc14b012bdc7ff1e887d956daa16b39af23fa5e27aeb3d0b6d822d6
-  data.tar.gz: a5c6308837a164bbbb09ad5bbac767593511531ae79e7706dc0a5774d632ab9e117cbf1b29c5ed73c4fb4974694111c86bdf3dab1f72dc42ec3284822a12f722
+  metadata.gz: b5eb92a1873b2e77da0083aa018dada538cd2642ec23135a4b299ed75d21a0fee7d76f41954862a214c9b201c62cce3da9c9f4dac567b8d3671e55a47e16a64e
+  data.tar.gz: fcd1e7d53968d610fff6919e56341621d3286b331181861bc286e6483e1580d0732ece53915ce0ecd1f2a5818f813aacd59f8a5d370de8e66d4802ee153708d5

data/README.md

@@ -35,10 +35,9 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 See [docs/upgrade-guide](./docs/upgrade-guide)
 
-### Nitro & Releases
+### Releases
 
-* [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)
-* [Creating Releases](https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version)
+* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
 
 ### Development Environment
 
@@ -63,4 +62,4 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
 6.  Inside of your Playbook repository, run `yarn unlink`. 
 
-Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.

data/app/pb_kits/playbook/_playbook.scss

@@ -16,6 +16,7 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
+@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';

data/app/pb_kits/playbook/data/menu.yml

@@ -25,6 +25,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -18,6 +18,7 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
+export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -83,6 +84,7 @@ export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
+export Typeahead from './pb_typeahead/_typeahead.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
 export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'
@@ -95,6 +97,7 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
+export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

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_button/_button.jsx

@@ -97,6 +97,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);
+    }
   }
 }
 

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

@@ -4,26 +4,22 @@ import { Button } from '../../'
 const ButtonDefault = () => (
   <div>
     <Button
-        dark
-        marginRight="xl"
         onClick={() => alert('button clicked!')}
         text="Button Primary"
     />
+    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Secondary"
         variant="secondary"
     />
+    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Link"
         variant="link"
     />
-    <Button
-        disabled
-        onClick={() => alert('button clicked!')}
-        text="Button Disabled"
-    />
+    {' '}
     <Button
         disabled
         onClick={() => alert('button clicked!')}

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

@@ -7,16 +7,19 @@ const ButtonDefaultDark = () => (
         dark
         text="Button Primary"
     />
+    {' '}
     <Button
         dark
         text="Button Secondary"
         variant="secondary"
     />
+    {' '}
     <Button
         dark
         text="Button Link"
         variant="link"
     />
+    {' '}
     <Button
         dark
         disabled

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

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

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

@@ -7,11 +7,13 @@ const ButtonLoading = () => (
         loading
         text="Button Primary"
     />
+    {' '}
     <Button
         loading
         text="Button Secondary"
         variant="secondary"
     />
+    {' '}
     <Button
         loading
         text="A Tag Button Disabled"

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

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

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

@@ -53,6 +53,7 @@ $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,8 +1,10 @@
 @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;
@@ -15,7 +17,8 @@ $transition: $transition_cubic;
     width: 22px;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
-    .check_icon{
+    transition: background $transition_default ease, border-color $transition_default ease;
+    .check_icon {
       opacity: 0;
       position: relative;
       top: -2px;
@@ -26,9 +29,10 @@ $transition: $transition_cubic;
 
     }
   }
-
-  &:hover input ~ .pb_checkbox_checkmark {
-    border-color: $primary_action;
+  @media (hover:hover) {
+    &:hover input ~ .pb_checkbox_checkmark {
+      border-color: $primary_action;
+    }
   }
 
   input {
@@ -58,8 +62,10 @@ $transition: $transition_cubic;
       border-color: $primary_action;
     }
 
-    &:hover .pb_checkbox_checkmark {
-      border-color: $primary_action;
+    @media (hover:hover) {
+      &:hover .pb_checkbox_checkmark {
+        border-color: $primary_action;
+      }
     }
 
     &.error {

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb

@@ -3,8 +3,9 @@
   icon: "search",
   link: "https://google.com"
 }) %>
+<br/>
 <%= pb_rails("circle_icon_button", props: {
-  variant: "primary",
+  variant: "secondary",
   icon: "window",
   link: "https://google.com",
   new_window: true

data/app/pb_kits/playbook/pb_date/_date.html.erb

@@ -1,38 +1,14 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    aria: object.aria) do %>
-
-  <!-- icon -->
-  <% if object.show_icon %>
-    <%= pb_rails("body", props: {
-      color: "light",
-      tag: "div",
-    }) do %>
-      <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
-    <% end %>
-  <% end %>
-
-  <!-- day_of_week -->
-  <% if object.show_day_of_week %>
-    <%= pb_rails("title", props: { tag: "div", text: object.date_day_of_week, size: 4 }) %>
-    <%= pb_rails("body", props: {
-    text: "•",
-    color: "light",
-    tag: "div",
-  }) %>
-  <% end %>
-
-  <!-- month day, year -->
-  
-  <%# if not current year %>
-  <% if object.year.to_s == DateTime.now.year.to_s %>
-    <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
-  <%# if is current year %>
-  <% else %>
-    <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
+    class: object.classname) do %>
+    <% if object.size == "lg" %>
+      <%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
+    <% elsif object.size == "sm" %>
+      <%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
+      <%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
+    <% else %>
+      <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
   <% end %>
-  
 <% end %>