playbook_ui 13.21.0 → 13.22.0.pre.alpha.pbntr254barchartnegativenumber2640

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
 
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -2,7 +2,8 @@
   aria: object.aria,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -2,5 +2,6 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %><%= content.presence || object.text %><% end %>
-    
+    class: object.classname,
+    **combined_html_options) do %><%= content.presence || object.text %><% end %>
+    

data/app/pb_kits/playbook/pb_title_count/title_count.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: {
     dark: object.dark,
     size: object.title_size,

data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.title, size: 4 }) %>
   <%= pb_rails("body", props: { text: object.detail, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -2,16 +2,16 @@
 
 $color_checkbox_success: $data_1;
 $color_checkbox_default: $border_light;
+$color_disabled: darken($border_light, 20%);
 $transition: .2s ease-in-out;
 
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: $width/2;
+  $height: $width / 2;
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
-
   .pb_toggle_wrapper {
     .pb_toggle_control {
       cursor: pointer;
@@ -23,10 +23,11 @@ $transition: .2s ease-in-out;
       border: $border_default;
       position: relative;
       box-sizing: content-box;
+
       &:after {
         transition: $transition;
         content: "";
-        width: $width/2 - 4px;
+        width: $width / 2 - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -34,23 +35,55 @@ $transition: .2s ease-in-out;
         top: 2px;
         left: 2px;
       }
+
       &:hover {
         border: $border_success;
-        &:after{
+
+        &:after {
           background-color: $color_checkbox_success;
         }
       }
     }
+
     input {
       display: none;
+
+      &:disabled + .pb_toggle_control {
+        cursor: not-allowed;
+        opacity: 0.5; 
+        border: 3px solid $border_light;
+        background-color: $border_light;
+
+        &:after {
+          background-color: darken($neutral, 15%);
+        }
+      }
+    }
+
+    input:checked {
+      display: none;
+
       &:checked + .pb_toggle_control {
         border: $border_success;
         background-color: $color_checkbox_success;
-        &:after{
-          left: $width/2 + 2px;
+
+        &:after {
+          left: $width / 2 + 2px;
           background-color: $white;
         }
       }
+
+      &:disabled + .pb_toggle_control {
+        cursor: not-allowed;
+        opacity: 0.5; 
+        border: 3px solid $text_lt_light;
+        background-color: $text_lt_light;
+
+        &:after {
+          background-color: $neutral;
+        }
+      }
     }
   }
 }
+

data/app/pb_kits/playbook/pb_toggle/_toggle.tsx

@@ -17,6 +17,7 @@ type Props = {
   children?: React.ReactNode | React.ReactNode[],
   className?: string,
   data?: { [key: string]: string },
+  disabled?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   name?: string,
@@ -31,10 +32,13 @@ const Toggle = ({
   children,
   className,
   data = {},
+  disabled = false,
   id,
   htmlOptions = {},
   name,
-  onChange = () => { },
+  onChange = (): void => {
+  // Function body here
+  },
   size = 'sm',
   value,
   ...props
@@ -53,23 +57,24 @@ const Toggle = ({
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(css, globalProps(props), className)}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(css, globalProps(props), className)}
+        id={id}
     >
       <label className="pb_toggle_wrapper">
         {children && children}
 
         {!children &&
           <input
-            {...props}
-            defaultChecked={checked}
-            name={name}
-            onChange={onChange}
-            type="checkbox"
-            value={value}
+              {...props}
+              defaultChecked={checked}
+              disabled={disabled}
+              name={name}
+              onChange={onChange}
+              type="checkbox"
+              value={value}
           />
         }
         <div className="pb_toggle_control" />

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("toggle", props: {
+  checked: true,
+  disabled: true
+}) %>
+
+<br>
+
+<%= pb_rails("toggle", props: {
+  checked: false,
+  disabled: true
+}) %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -0,0 +1,21 @@
+// @flow
+
+import React from 'react'
+import { Toggle } from '../..'
+
+const ToggleDisabled= () => {
+  return (
+    <>
+      <Toggle
+          checked
+          disabled 
+      />
+
+      <br />
+
+      <Toggle disabled />
+    </>
+  )
+}
+
+export default ToggleDisabled 

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

@@ -2,6 +2,7 @@ examples:
 
   rails:
   - toggle_default: Default State
+  - toggle_disabled: Disabled
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
@@ -9,6 +10,7 @@ examples:
 
   react:
   - toggle_default: Default State
+  - toggle_disabled: Disabled
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
@@ -16,4 +18,4 @@ examples:
   swift:
     - toggle_default_swift: Default State
     - toggle_name_swift: Name and Value
-    - toggle_props_swift: ""
+    - toggle_props_swift: ""

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

@@ -1,4 +1,5 @@
 export { default as ToggleDefault } from './_toggle_default'
+export { default as ToggleDisabled } from './_toggle_disabled'
 export { default as ToggleCustom } from './_toggle_custom'
 export { default as ToggleName } from './_toggle_name'
 export { default as ToggleCustomRadio } from './_toggle_custom_radio'

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     aria: object.aria,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_toggle/toggle.rb

@@ -15,13 +15,14 @@ module Playbook
                   values: %w[sm md],
                   default: "sm"
       prop :value
+      prop :disabled, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_toggle_kit", size, checked_class)
       end
 
       def input
-        check_box_tag(name, value, checked, input_options)
+        check_box_tag(name, value, checked, input_options.merge(disabled: disabled))
       end
 
     private

data/app/pb_kits/playbook/pb_toggle/toggle.test.js

@@ -60,6 +60,13 @@ test('should have sm size by default', () => {
     expect(kit).toHaveClass('pb_toggle_kit_sm_off')
 })
 
+test('should pass disabled prop', () => {
+    render(<ToggleDefault disabled />)
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('input')
+    expect(input).toHaveAttribute('disabled')
+})  
+
 test('should pass size prop', () => {
     render(<ToggleDefault size='md' />)
     const kit = screen.getByTestId(testId)

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
   <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -4,7 +4,8 @@
   <%= content_tag(:div,
                 id: object.id,
                 data: object.data,
-                class: object.classname + object.inline_class) do %>
+                class: object.classname + object.inline_class,
+                **combined_html_options) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

@@ -2,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
 <% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
     <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
 <% end %>

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -88,18 +88,31 @@ $space_classes: (
 
 $positions: "top", "right", "bottom", "left";
 
+
+@mixin position-property($position, $space_name, $space, $is_inset: false) {
+  @if $space_name == "0" {
+    #{$position}: 0 !important;
+  }
+  @else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" {
+    #{$position}: #{$space} !important;
+  }
+  @else {
+    @if $is_inset {
+      #{$position}: #{$space} !important;
+    } @else {
+      #{$position}: #{-$space} !important;
+    }
+  }
+}
+
 @each $position in $positions {
   @each $space_name, $space in $space_classes {
-    .#{$position}_#{$space_name} {
-      @if $space_name == "0" {
-        #{$position}: 0 !important;
-      }
-      @else if $space_name == "auto" or $space_name == "initial" or $space_name == "inherit" {
-        #{$position}: #{$space} !important;
-      }
-      @else {
-        #{$position}: #{-$space} !important;
-      }
+    $space_name_str: "#{ $space_name }";
+    .#{$position}_#{$space_name_str} {
+      @include position-property($position, $space_name_str, $space)
+    }
+    .#{$position}_#{$space_name_str}_inset {
+      @include position-property($position, $space_name_str, $space, true)
     }
   }
 }

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -119,19 +119,19 @@ type Position = {
 }
 
 type Top = {
-  top?: Sizes,
+  top?: Sizes | {value: string, inset: boolean},
 }
 
 type Right = {
-  right?: Sizes,
+  right?: Sizes | {value: string, inset: boolean},
 }
 
 type Bottom = {
-  bottom?: Sizes,
+  bottom?: Sizes | {value: string, inset: boolean},
 }
 
 type Left = {
-  left?: Sizes,
+  left?: Sizes | {value: string, inset: boolean},
 }
 
 type Shadow = {
@@ -177,6 +177,19 @@ const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: st
   }).join(" ")
 }
 
+//reusable function for top, bottom, right and left props
+const getPositioningPropsClasses = (position: string, value: Sizes | {value: string, inset: boolean} ) => {
+  let css = "";
+  if (typeof value === 'string') {
+    css += `${position}_${value}`;
+  } else if (typeof value === 'object' && value.inset) {
+    css += `${position}_${value.value}_inset`;
+  } else if (typeof value === 'object') {
+    css += `${position}_${value.value}`;
+  }
+  return css;
+};
+
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
 
@@ -441,11 +454,16 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     return css
   },
 
-  topProps: ({ top }: Top) => top ? `top_${top}` : '',
-  rightProps: ({ right }: Right) => right ? `right_${right}` : '',
-  bottomProps: ({ bottom }: Bottom) => bottom ? `bottom_${bottom}` : '',
-  leftProps: ({ left }: Left) => left ? `left_${left}` : '',
 
+  topProps: ({top}) => getPositioningPropsClasses('top', top), 
+
+  rightProps: ({right}) => getPositioningPropsClasses('right', right), 
+
+  bottomProps:({bottom}) =>  getPositioningPropsClasses('bottom', bottom), 
+  
+  leftProps: ({left}) => getPositioningPropsClasses('left', left),
+    
+  
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')

data/dist/menu.yml

@@ -407,6 +407,10 @@ kits:
         platforms: *web
         description: Badges can be used for notification, tags, and status. They are used for count and numbers.
         status: "stable"
+      - name: "online_status"
+        platforms: *web
+        description: Online Status is a small indicator that lets the user know the status of a person or item. 
+        status: "stable"
       - name: "pill"
         platforms: *all
         description: A pill uses both a keyword and a specific color to categorize an item.