playbook_ui 14.10.0.pre.rc.4 → 14.10.0.pre.rc.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3396642ec5cfae17bef9b53f44d2049d56298ba4f102f056dc52a19fd5e47a3
-  data.tar.gz: 3e9b0d43df3db0b75a244ca703a1b0c2205b42b5c4a4f492a6f21e4dd8b687e4
+  metadata.gz: 82790dcaee27051f2c5369f2cbe759f3cf6f9a1ea6157a25d7be9fb5d1d4ecee
+  data.tar.gz: eb7adf43940561d8fed09bc4fd4248e754346aad3e7e2b7f76d960e9272345fb
 SHA512:
-  metadata.gz: 014b4912bfcd479840a80c09ccee004dea23a1988ad08698524774e5d56550c1f1128eb1c86dedb620e1a441a667be2c658542566f22df181c073dfe0d1ba118
-  data.tar.gz: 18426142a74be01e1935a9ff1b7e5a78b13eb9d735d471d85e3093c7c999af91ac7017b3d42afc7ab6ef0293c2c7db6e23c1618cda48cbd19d4ad96312dc195e
+  metadata.gz: 184cc2fa69f77949717a88bec5cd749dfb40d55536aa0075f2d464141031be32c80240d8231299bafabefc2d4cf1848fe262571a6f60519ce56f76767c8c8d60
+  data.tar.gz: aae779651f3ad34e2eb0380bf3e3e920b1af503673e1275c38f55651aeace6c0d539b8b0e5ece9c87cf59f655655d69dc42fbfc0b667395234997e07fadb134f

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,24 +1,25 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-[class^=pb_body_kit]{
+[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);
     }
     @each $status_name, $status_value in $pb_body_status {
-      &[class*=_default_#{$status_name}] {
+      &[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]{
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
+    &[class*="_#{$dark_color_name}"][class*="dark"] {
       @include pb_body($dark_color_value);
     }
   }
-  b, strong {
+  b,
+  strong {
     font-weight: $bold;
   }
 
@@ -29,7 +30,8 @@
     }
   }
 
-  em, i {
+  em,
+  i {
     font-style: italic;
   }
 
@@ -39,26 +41,25 @@
   }
 
   @each $status_name, $status_value in $pb_body_status {
-    &[class*=#{$status_name}] {
+    &[class*="#{$status_name}"] {
       @include pb_body($status_value);
     }
   }
 
-  &[class*=dark] {
+  &[class*="dark"] {
     a {
       color: $active_dark;
     }
     @include pb_body_dark();
-    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
-      &[class*=_#{$dark_color_name}][class*=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}] {
+    @each $status_name, $status_value in $pb_dark_body_status {
+      &[class*="_#{$status_name}"] {
         @include pb_body($status_value);
       }
     }
   }
-
 }

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -3,29 +3,35 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default:        $text_lt_default,
-  light:          $text_lt_light,
-  lighter:        $text_lt_lighter,
-  link:           $primary,
-  error:          $error,
-  success:        $text_lt_success_sm,
+  default: $text_lt_default,
+  light: $text_lt_light,
+  lighter: $text_lt_lighter,
+  link: $primary,
+  error: $error,
+  success: $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
-  default:        $text_dk_default,
-  light:          $text_dk_light,
-  lighter:        $text_dk_lighter,
-  link:           $active_dark,
-  error:          $error,
-  success:        $text_dk_success_sm,
+  default: $text_dk_default,
+  light: $text_dk_light,
+  lighter: $text_dk_lighter,
+  link: $active_dark,
+  error: $error,
+  success: $text_dk_success_sm,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default:        $text_lt_default,
-  negative:       $error,
-  dark_error:     $error_dark_body,
-  positive:       $text_lt_success_sm,
+  default: $text_lt_default,
+  negative: $error,
+  dark_error: $error_dark_body,
+  positive: $text_lt_success_sm,
+);
+
+$pb_dark_body_status: (
+  default: $text_dk_default,
+  negative: $error_dark,
+  positive: $text_dk_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {

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

@@ -13,9 +13,10 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
   link:           $active_dark,
   success:        $text_dk_success_sm,
-  error:          $error,
+  error:          $error_dark,
 );
 
 

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

@@ -11,3 +11,8 @@
   }
 }
 
+.dark [class*='pb_file_upload_kit'] {
+  [class*='pb_card_kit'] {
+    border: 1px $text_dk_lighter dashed;
+  }
+}

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

@@ -13,6 +13,7 @@ type FileUploadProps = {
   accept?: string[],
   className?: string,
   customMessage?: string,
+  dark?: boolean,
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   acceptedFilesDescription?: string,
@@ -31,6 +32,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     acceptedFilesDescription = '',
     className,
     customMessage,
+    dark = false,
     data = {},
     htmlOptions = {},
     maxSize,
@@ -94,9 +96,12 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
         {...htmlProps}
         {...getRootProps()}
     >
-      <Card>
+      <Card dark={dark}>
         <input {...getInputProps()} />
-        <Body color="light">
+        <Body
+            color="light"
+            dark={dark}
+        >
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -5,11 +5,17 @@
     id: object.id,
     **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
-        <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
+        <label
+          for="upload-<%= object.id %>"
+          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
+        >
+          <%= "#{object.label}" %>
+        </label>
         <%= pb_rails("text_input", props: {
           type: "file",
+          dark: object.dark,
           input_options: {
-            id: "upload-#{object.id}", 
+            id: "upload-#{object.id}",
             classname: "cursor_pointer",
           }.merge(object.input_options)
         }) %>

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss

@@ -19,6 +19,16 @@
           font-weight: $bolder;
         }
       }
-   }
+    }
+  }
+
+  .dark & {
+    [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
+      &[class*=_link] {
+        &[class*=_active] {
+          box-shadow: 0 2px 10px 0 $shadow_dark;
+        }
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -223,6 +223,7 @@
         }
       }
       [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
+        box-shadow: unset !important;
         .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
@@ -240,11 +241,17 @@
 
       .pb_collapsible_main_kit:hover {
         background-color: mix($white, $card_dark, 20%);
-        .pb_nav_list_item_text_collapsible,
-        svg {
+        .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
       }
+
+      .pb_collapsible_main_kit {
+        svg {
+          color: $text_dk_default !important;
+        }
+      }
+
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
@@ -256,6 +263,13 @@
           }
         }
       }
+
+      &[class*="_active"] {
+        > .pb_collapsible_main_kit {
+          background-color: $primary;
+          box-shadow: 0 2px 10px 0 $shadow_dark;
+        }
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -115,7 +115,7 @@ $selector: ".pb_nav_list";
       }
       [class*="_item_text"],
       [class*="_item_icon"] {
-        color: $text_dk_lighter !important;
+        color: $text_dk_light !important;
       }
       &[class*="_link"] {
         &:hover {

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx

@@ -1,40 +1,46 @@
-import React from 'react'
-import classnames from 'classnames'
+import React from "react"
+import classnames from "classnames"
 
-import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { buildCss, buildHtmlProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps"
 
-import Body from '../pb_body/_body'
-import Icon from '../pb_icon/_icon'
+import Body from "../pb_body/_body"
+import Icon from "../pb_icon/_icon"
 
-const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
-  increase: 'positive',
-  decrease: 'negative',
-  neutral: 'neutral',
+const statusMap: {
+  neutral: "neutral"
+  decrease: "negative"
+  increase: "positive"
+} = {
+  increase: "positive",
+  decrease: "negative",
+  neutral: "neutral",
 }
 
 const iconMap = {
-  increase: 'arrow-up',
-  decrease: 'arrow-down',
+  increase: "arrow-up",
+  decrease: "arrow-down",
 }
 
 type StatChangeProps = {
-  change?: 'increase' | 'decrease' | 'neutral',
-  className?: string,
-  icon?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  value?: string | number,
+  change?: "increase" | "decrease" | "neutral"
+  className?: string
+  dark?: boolean
+  icon?: string
+  id?: string
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  value?: string | number
 }
 
 const StatChange = (props: StatChangeProps): React.ReactElement => {
-  const { 
-    change = 'neutral', 
-    className, 
+  const {
+    change = "neutral",
+    className,
+    dark = false,
     htmlOptions = {},
-    icon, 
-    id, 
-    value 
+    icon,
+    id,
+    value,
   } = props
 
   const status = statusMap[change as keyof typeof statusMap]
@@ -47,30 +53,32 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
 
   return (
     <>
-      {value &&
+      {value && (
         <div
             className={classnames(
-              buildCss('pb_stat_change_kit', status),
-              globalProps(props),
-              className
-              )}
+            buildCss("pb_stat_change_kit", status),
+            globalProps(props),
+            className
+          )}
             id={id}
             {...htmlProps}
         >
-          <Body status={status}>
-            {returnedIcon &&
+          <Body dark={dark}
+              status={status}
+          >
+            {" "}
+            {returnedIcon && (
               <>
-                <Icon
+                <Icon dark={dark}
                     fixed_width
                     icon={returnedIcon}
-                />
-                {' '}
+                />{" "}
               </>
-            }
+            )}
             {`${value}%`}
           </Body>
         </div>
-      }
+      )}
     </>
   )
 }

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
-      <%= pb_rails("body", props: { status: object.status }) do %>
-        <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
-        <%= "#{object.value}%" if object.value %>
-      <% end %>
+  <%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
+    <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
+    <%= "#{object.value}%" if object.value %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -49,10 +49,11 @@
   }
 
   &.dark {
-    @include pb_title_dark; 
-  }
-
-  &.dark[class*=_link] { 
-    @include pb_title_dark_link; 
+    @include title_dark;
+    @each $name, $color in $pb_dark_title_colors {
+      &[class*="_#{$name}"] {
+        color: $color;
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -9,6 +9,15 @@ $pb_title_colors: (
   link: $primary
 );
 
+$pb_dark_title_colors: (
+  default: $text_dk_default,
+  light: $text_dk_light,
+  lighter: $text_dk_lighter,
+  success: $success,
+  error: $error_dark,
+  link: $active_dark
+);
+
 @mixin title_colors {
   @each $name, $color in $pb_title_colors {
     &[class*=_#{$name}] {
@@ -16,3 +25,7 @@ $pb_title_colors: (
     }
   }
 }
+
+@mixin title_dark {
+  color: $text_dk_default;
+}

data/app/pb_kits/playbook/tokens/_titles.scss

@@ -33,14 +33,6 @@
   @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
-@mixin pb_title_dark {
-    color: $text_dk_default;
-} 
-
-@mixin pb_title_dark_link {
-    color: $active_dark;
-}
-
 @mixin pb_title_bold {
   font-weight: $bolder;
 }