playbook_ui 12.1.0 → 12.3.0.pre.alpha.patchtest1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 637dc98a1badc91927d22a80c40b7dab9ff223d0beef1585f2d588f34aea833d
-  data.tar.gz: 1d95711beb58f0c37cf3dafc98f6c8c38cbd59e6a390290f2574fa612fbcc14e
+  metadata.gz: '0928d7277d3ae8bafae0638314ca0e5b76d4fd09e8c402e281644196b7917903'
+  data.tar.gz: f62293859cddfd9bfe8493e9fd3a40a7515881e99262a329e8914390b99a632c
 SHA512:
-  metadata.gz: 449796d0443af564166cd7fea3d5b3ec3354553c7263aaf00def68b6bbd809aac65b3dc680034faa04564f79d692c3c11618f78a88fe07fa6dbe79c6c56822a3
-  data.tar.gz: 17c5ef327dec5cd35db9d780af9bc4af5b7a7eb6ec8f474ecce9a726e2b8c89f8bf379c4b07e32b9a776abcf630529faf7fb6d37d558cdde5dadf5c75309adbc
+  metadata.gz: afba11e867700ad41542a1e6a6dbff294bbe0d56dbee36ea7484cce52b8c8fc7575dc08c4f63fee38518833102abcc1815b57a4d2b71276291a1a5058a221ea7
+  data.tar.gz: bb698f0b069b59bfac04f05235f1a3a0f73b1ca3fe7e0c00613ba213a398307ee7666f29820f9249ef410ff48395c2b3674bf18d2815fd81f7e23d1aac14d86c

data/app/pb_kits/playbook/_playbook.scss

@@ -51,6 +51,7 @@
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
+@import 'pb_map/map';
 @import 'pb_message/message';
 @import 'pb_multiple_users/multiple_users';
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
@@ -104,3 +105,5 @@
 @import './utilities/line_height';
 @import './utilities/display';
 @import './utilities/flexbox';
+@import './utilities/focus';
+

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

@@ -55,6 +55,7 @@ kits:
   - lightbox
   - list
   - loading_inline
+  - map
   - nav
   - tags:
     - badge

data/app/pb_kits/playbook/index.js

@@ -10,8 +10,8 @@ export { default as Background } from './pb_background/_background'
 export { default as Badge } from './pb_badge/_badge'
 export { default as BarGraph } from './pb_bar_graph/_bar_graph'
 export { default as Body } from './pb_body/_body'
-export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
 export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
+export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
 export { default as Button } from './pb_button/_button'
 export { default as ButtonToolbar } from './pb_button_toolbar/_button_toolbar'
 export { default as Caption } from './pb_caption/_caption'
@@ -53,11 +53,12 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
 export { default as LabelValue } from './pb_label_value/_label_value'
 export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
+export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
-export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
+export { default as Map} from './pb_map/_map'
 export { default as Message } from './pb_message/_message'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
 export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_multiple_users_stacked'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -13,7 +13,7 @@ import classnames from "classnames";
 type BarGraphProps = {
   align?: "left" | "right" | "center";
   axisTitle: string;
-  dark?: Boolean;
+  dark?: boolean;
   xAxisCategories: [];
   yAxisMin: number;
   yAxisMax: number;
@@ -62,7 +62,7 @@ const BarGraph = ({
   x = 0,
   y = 0,
   ...props
-}: BarGraphProps) => {
+}: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const setupTheme = () => {
@@ -130,14 +130,14 @@ const BarGraph = ({
 
   return (
     <HighchartsReact
-      containerProps={{
-        className: classnames(globalProps(props), className),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-      }}
-      highcharts={Highcharts}
-      options={options}
+        containerProps={{
+          className: classnames(globalProps(props), className),
+          id: id,
+          ...ariaProps,
+          ...dataProps,
+        }}
+        highcharts={Highcharts}
+        options={options}
     />
   );
 };

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -29,11 +29,6 @@ $pb_button_sizes: (
   }
   &[class*=_link]  {
     @include pb_button_link;
-    @media (hover:hover) {
-      &:hover {
-        color: $text_lt_default;
-      }
-    } 
   }
 
   // Disabled =================

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -23,6 +23,7 @@ type ButtonPropTypes = {
   loading?: boolean,
   newWindow?: boolean,
   onClick?: EventHandler,
+  tabIndex?: number,
   size?: 'sm' | 'md' | 'lg',
   text?: string,
   type?: 'inline' | null,
@@ -66,6 +67,7 @@ const Button = (props: ButtonPropTypes) => {
     id,
     loading = false,
     onClick,
+    tabIndex,
     link = null,
     newWindow = false,
     text,
@@ -128,6 +130,7 @@ const Button = (props: ButtonPropTypes) => {
             id={id}
             rel="noreferrer"
             role="link"
+            tabIndex={tabIndex}
             target={newWindow ? '_blank' : null}
         >
           {ifLoading()}
@@ -144,6 +147,7 @@ const Button = (props: ButtonPropTypes) => {
             id={id}
             onClick={onClick}
             role="button"
+            tabIndex={tabIndex}
             type={htmlType}
             value={value}
         >

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -5,6 +5,7 @@
 @import "../tokens/spacing";
 @import "../tokens/transition";
 @import "../tokens/typography";
+@import "../utilities/focus";
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
@@ -37,7 +38,7 @@ $pb_button_border_width: 0px;
   padding: $pb_button_v_padding $pb_button_h_padding;
   cursor: pointer;
   outline: none;
-  transition: background $transition_default ease, color $transition_default ease;
+  transition: background $transition_default ease, color $transition_default ease, box-shadow $transition_default ease;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -46,6 +47,12 @@ $pb_button_border_width: 0px;
   width: fit-content;
   font-family: $font_family_base;
   white-space: nowrap;
+  
+  @include focus;
+  
+  &[class*=dark] {
+    @include focus-dark
+  }
 
   .loading-icon {
     position: absolute;
@@ -62,9 +69,8 @@ $pb_button_border_width: 0px;
     margin-left: $space_xs;
   }
 
-  &:hover, &:focus {
+  &:hover {
     outline: none;
-    
   }
 
   &:active {
@@ -86,6 +92,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover;
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant($primary_action);
+    }
   }
 }
 
@@ -97,6 +107,10 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_3));
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
+    }
   } 
 }
 
@@ -107,6 +121,11 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
+      color: $text_lt_default;
+    }
+    &:active {
+      transition: none;
+      @include pb_button_variant($transparent, $primary_action);
     }
   }
 }
@@ -116,6 +135,9 @@ $pb_button_border_width: 0px;
   $disabled_color: rgba($charcoal, $opacity_5);
   @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
+  &:focus {
+    outline: none;
+  }
 }
 
 // Block =======================
@@ -145,17 +167,25 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant($primary_action);
+    }
   }
 }
 
 // Dark Secondary ==============
 @mixin pb_button_secondary_dark{
-  @include pb_button_variant(rgba($white, 0.2), $white);
+  @include pb_button_variant(rgba($white, $opacity_2), $white);
 
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_2));
     }
+    &:active {
+      transition: none;
+      @include pb_button_variant(rgba($white, $opacity_2), $white);
+    }
   }
 }
 
@@ -166,6 +196,11 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
+      color: rgba($white, $opacity_6)
+    }
+    &:active {
+      transition: none;
+      @include pb_button_variant($transparent, $white);
     }
   }
 }

data/app/pb_kits/playbook/pb_button/button.rb

@@ -34,6 +34,7 @@ module Playbook
           disabled: disabled,
           id: id,
           role: "button",
+          tabindex: 0,
           type: type,
           value: value,
           form: form,
@@ -45,6 +46,7 @@ module Playbook
           option[:href] = link
           option[:role] = "link"
           option[:target] = "_blank" if new_window
+          option[:tabindex] = 0
         end
       end
 

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

@@ -6,6 +6,7 @@ const ButtonAccessibility = (props) => (
     <Button
         aria={{ label: 'Go to Google' }}
         link="https://google.com"
+        tabIndex={0}
         tag="a"
         text="Button with ARIA"
         {...props}

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

@@ -5,6 +5,7 @@ const ButtonBlockContent = (props) => (
   <div>
     <Button fixedWidth 
         {...props}
+        tabIndex={0}
     >
       <Pill marginRight="xs"
           text="5"

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

@@ -6,12 +6,14 @@ const ButtonDefault = (props) => (
     <Button
         marginRight='lg'
         onClick={() => alert("button clicked!")}
+        tabIndex={0}
         text='Button Primary'
         {...props}
     />{" "}
     <Button
         marginRight='lg'
         onClick={() => alert("button clicked!")}
+        tabIndex={0}
         text='Button Secondary'
         variant='secondary'
         {...props}
@@ -19,6 +21,7 @@ const ButtonDefault = (props) => (
     <Button
         marginRight='lg'
         onClick={() => alert("button clicked!")}
+        tabIndex={0}
         text='Button Link'
         variant='link'
         {...props}
@@ -27,6 +30,7 @@ const ButtonDefault = (props) => (
         disabled
         marginRight='lg'
         onClick={() => alert("button clicked!")}
+        tabIndex={0}
         text='Button Disabled'
         {...props}
     />

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

@@ -5,6 +5,7 @@ const ButtonForm = (props) => (
   <div>
     <Button
         form="form-id"
+        tabIndex={0}
         text="Button with Form Attribute"
         {...props}
     />

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

@@ -5,6 +5,7 @@ const ButtonFullWidth = (props) => (
   <div>
     <Button
         fullWidth
+        tabIndex={0}
         text="Button Full Width"
         {...props}
     />

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb

@@ -1,2 +1,2 @@
-<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left" }) %>
-<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right" }) %>
+<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right", margin_right: "lg" }) %>

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

@@ -6,6 +6,8 @@ const ButtonIconOptions = (props) => (
       <Button
           fixedWidth
           icon='plus'
+          marginRight='lg'
+          tabIndex={0}
           text="Icon on Left"
           {...props}
       />
@@ -14,6 +16,8 @@ const ButtonIconOptions = (props) => (
           fixedWidth
           icon='chevron-right'
           iconRight
+          marginRight='lg'
+          tabIndex={0}
           text="Icon on Right"
           {...props}
       />

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com",margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com",margin_right: "lg" }) %>

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

@@ -6,6 +6,8 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google' }}
         link="https://google.com"
+        marginRight='lg'
+        tabIndex={0}
         text="A Tag Button"
         {...props}
     />
@@ -13,7 +15,9 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google in new window' }}
         link="https://google.com"
+        marginRight='lg'
         newWindow
+        tabIndex={0}
         text="Open in New Window"
         {...props}
     />
@@ -22,6 +26,8 @@ const ButtonLink = (props) => (
         aria={{ label: 'Disabled link to Google' }}
         disabled
         link="https://google.com"
+        marginRight='lg'
+        tabIndex={0}
         text="A Tag Button Disabled"
         {...props}
     />

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>

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

@@ -6,6 +6,8 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
+        marginRight='lg'
+        
         text="Button Primary"
         {...props}
     />
@@ -13,6 +15,8 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
+        marginRight='lg'
+        tabIndex={0}
         text="Button Secondary"
         variant="secondary"
         {...props}
@@ -21,6 +25,8 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
+        marginRight='lg'
+        tabIndex={0}
         text="A Tag Button Disabled"
         variant="link"
         {...props}

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

@@ -6,6 +6,7 @@ const ButtonOptions = (props) => (
     <Button
         htmlType="submit"
         onClick={() => alert('Click!')}
+        tabIndex={0}
         text="Button with options"
         value="1234"
         {...props}

data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
-<%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
-<%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button sm size", size: "sm", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button md size", size: "md", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button lg size", size: "lg", margin_right: "lg" }) %>

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

@@ -4,19 +4,25 @@ import { Button } from '../../'
 const ButtonSize = (props) => (
   <div>
     <Button
+        marginRight='lg'
         size="sm"
+        tabIndex={0}
         text="Button sm size"
         {...props}
     />
     {' '}
     <Button
+        marginRight='lg'
         size="md"
+        tabIndex={0}
         text="Button md size"
         {...props}
     />
     {' '}
     <Button
+        marginRight='lg'
         size="lg"
+        tabIndex={0}
         text="Button lg size"
         {...props}
     />

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -21,7 +21,7 @@ $transition: $transition_cubic;
     border-radius: $border_rad_light;
     height: 22px;
     position: relative;
-    transition: background $transition_default ease, border-color $transition_default ease;
+    transition: background $transition_default ease, box-shadow $transition_default ease;
     width: 22px;
     .check_icon,
     .indeterminate_icon {
@@ -40,7 +40,7 @@ $transition: $transition_cubic;
 
   @media (hover:hover) {
     &:hover input ~ .pb_checkbox_checkmark {
-      border-color: $primary_action;
+      background-color: $bg_light;
     }
   }
 
@@ -52,13 +52,19 @@ $transition: $transition_cubic;
     position: relative;
     width: 0;
     left: $offscreen;
+
     &:focus ~ .pb_checkbox_checkmark {
-      border-color: $primary_action;
+        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
     }
     &:checked ~ .pb_checkbox_checkmark,
     & ~ .pb_checkbox_indeterminate {
       background-color: $primary_action;
       border-color: $primary_action;
+
+      &:hover {
+        background-color: $primary_action;
+        border-color: $primary_action;
+      }
     }
     &:checked ~ .pb_checkbox_checkmark,
     & ~ .pb_checkbox_indeterminate {
@@ -70,35 +76,36 @@ $transition: $transition_cubic;
     }
   }
 
-  &[class*=_dark] {
-    input:checked ~ .pb_checkbox_checkmark {
-      background-color: $primary_action;
-      border-color: $primary_action;
+  &.dark {
+    input {
+      &:focus ~ .pb_checkbox_checkmark {
+        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
+      }
     }
-
+    
     @media (hover:hover) {
       &:hover .pb_checkbox_checkmark {
-        border-color: $primary_action;
+        background-color: rgba($white,.05);
       }
     }
 
-    &.error {
-      > .pb_checkbox_checkmark {
-        border-color: $error_dark;
-      }
-    }
     &.pb_checkbox_kit_error {
       > .pb_checkbox_checkmark {
         border-color: $error_dark;
+       }
+
+       input {
+        &:checked ~ .pb_checkbox_checkmark,
+        & ~ .pb_checkbox_indeterminate {
+          border-color: $primary;
+          &:hover {
+            border-color: $primary;
+          }
+        }
       }
     }
   }
 
-  &.error {
-    > .pb_checkbox_checkmark {
-      border-color: $error;
-    }
-  }
   &.pb_checkbox_kit_error {
     > .pb_checkbox_checkmark {
       border-color: $error;

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -23,10 +23,34 @@ $pb_button_styles: [
   padding: 0;
 }
 
+@mixin pb_circle_icon_button_active {
+  &:active {
+    transition: none;
+    @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
+  }
+}
+
+@mixin pb_circle_icon_button_active_dark {
+  &:active {
+    transition: none;
+    @include pb_button_variant(rgba($white, $opacity_2), $white);
+  }
+}
+
 [class^=pb_circle_icon_button_kit] {
   @each $style in $pb_button_styles {
     [class^=pb_button_kit][class*=_#{$style}] {
       @include pb_circle_icon_button;
     }
   }
+  :first-child {
+    &[class*=_link]  {
+      @include pb_circle_icon_button_active;
+    }
+    &.dark  {
+      &[class*=_link]  {
+        @include pb_circle_icon_button_active_dark;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -136,6 +136,8 @@ const highchartsDarkTheme: ThemeProps = {
 
   plotOptions: {
     series: {
+      borderColor: colors.bg_dark_card,
+      borderWidth: 2,
       type: 'area',
       nullColor: colors.text_dk_lighter,
       fillColor: {

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -92,7 +92,12 @@
   & > [class^=pb_selectable_card_kit]:not(:last-child) label {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
-    border-right-width: 0;
+    border-right-color: transparent;
+  }
+  & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
+    &:hover {
+      border-right-color: $slate;
+    } 
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {
@@ -112,7 +117,10 @@
 
   & > [class^=pb_selectable_card_icon_kit]:not(:last-child) {
     [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked)~ label {
-      border-right-width: 0;
+      border-right-color: transparent;
+      &:hover {
+        border-right-color: $slate;
+      }
     }
   }
 

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -0,0 +1,8 @@
+@import "../tokens/typography";
+@import "../tokens/colors"; 
+@import "../tokens/shadows";
+
+.pb_map {
+  font-family: $font_family_base !important;
+
+}