playbook_ui 6.3.0 → 6.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea80542999ec742ea75a790d08063f434344edc4b3271924f885d8262da2e71e
-  data.tar.gz: '038fe977294f1ab1bba1b24f898ade044a7b01b973b9b1f45b2e0ffd1b65e687'
+  metadata.gz: 9abf95612efac0b8a04b431ccb4f430c0cb70ce3f31aaa3b09645ef945bdc979
+  data.tar.gz: bc0bcf2f8394a0350ce32a508bf40bd4dc9330d1f0aa56799677a1d892f58072
 SHA512:
-  metadata.gz: eeb81eeae28752fa79ed22bdfc94b2e84edced942326ebaf091bf629c79beff2ab6b7f7bd4bae1fd0b28aa8aedd4a900de11a44ad1abd15fa251d73938a3c5dc
-  data.tar.gz: 9c1c7d3eec96485cec557a1a9f496212acd49cfb85444ad6dca3d2dfbb9490bd01dfa80799ad15433f3d9f60e3e221b6e10e12d529948d5fbb9d0a8a357996f2
+  metadata.gz: e46b996ef8cbf16390ff72d30696591ba8e11c3904e346ad0ad5b49b5bfe1cc0ea5eb5b44e15bc94084280e0b52b9ac6f63b17ff58031346567f571ac3b695ff
+  data.tar.gz: 4b11ef993b8fc7ecf3b9864ecc357823ee741bd83d999c40c243111eab87790116433e0d68d970a561d576e922e341efe7ee32fb770c2f1734a30c8b110b4187

data/app/pb_kits/playbook/_playbook.scss

@@ -15,6 +15,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

@@ -14,6 +14,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'
@@ -91,6 +92,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/packs/examples.js

@@ -28,6 +28,7 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -108,6 +109,7 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,
@@ -172,4 +174,3 @@ WebpackerReact.setup({
   ...UserBadge,
   ...WeekdayStacked,
 })
-

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -114,7 +114,6 @@
     background: $bg_dark;
 
     .pb--kit-example {
-      color: $white;
 
       &::after {
         background: $border-dark;

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

@@ -14,6 +14,7 @@ type CaptionProps = {
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
   text?: string,
+  variant?: null | "link",
 }
 
 const Caption = (props: CaptionProps) => {
@@ -26,13 +27,14 @@ const Caption = (props: CaptionProps) => {
     size = 'md',
     tag = 'div',
     text,
+    variant = null,
   } = props
   const Tag = `${tag}`
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size),
+    buildCss('pb_caption_kit', size, variant),
     className,
     globalProps(props)
   )

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -9,6 +9,9 @@
 
   &[class^=pb_caption_kit_xs] {
     @include caption_xs;
+    &[class*=_link]  {
+      color: $primary;
+    }
   }
   &[class*=dark]{
     @include caption_dark

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -14,9 +14,12 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p span div],
                  default: "div"
       prop :text
+      prop :variant, type: Playbook::Props::Enum,
+                     values: [nil, "link"],
+                     default: nil
 
       def classname
-        generate_classname("pb_caption_kit", size)
+        generate_classname("pb_caption_kit", size, variant)
       end
     end
   end

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("caption", props: { text: "Subcaption (link)", size: 'xs', variant: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionVariants = () => {
+  return (
+    <div>
+      <Caption
+          size="xs"
+          text="Subcaption (link)"
+          variant="link"
+      />
+    </div>
+  )
+}
+
+export default CaptionVariants

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.md

@@ -0,0 +1,3 @@
+Wrap anchor tags around the kit to make it clickable.
+
+Link variant can only be applied to size `xs`.