playbook_ui 13.22.0 → 13.24.0

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import FormGroup from '../_form_group'
-
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 
@@ -18,11 +18,16 @@ const FormGroupSelect = (props) => {
     { value: 'Other' },
   ]
 
+  const phoneOptions = [
+    { value: 'Cell' },
+    { value: 'Work' },
+    { value: 'Home' },
+  ]
+
   return (
     <div>
       <FormGroup>
         <TextInput
-            label="Artist"
             placeholder="Enter Artist Name"
             {...props}
         />
@@ -32,6 +37,17 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
+      <br />
+      <br />
+      <FormGroup>
+        <Select
+            blankSelection="Phone"
+            options={phoneOptions}
+            />
+        <PhoneNumberInput
+            id='default'
+        />
+    </FormGroup>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -5,6 +5,7 @@
 @import "../pb_icon/icon";
 
 $pb_icon_circle_sizes: (
+  "xxs":  16px,
   "xs":   28px,
   "sm":   38px,
   "md":   60px,
@@ -13,6 +14,16 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
+@mixin svg_size($name, $match, $adjust) {
+  @if $name == $match {
+    $svg_xy: $adjust;
+    & > svg {
+      width: #{$svg_xy};
+      height: #{$svg_xy};
+    }
+  }
+}
+
 [class^=pb_icon_circle_kit] {
   display: flex;
   justify-content: center;
@@ -51,6 +62,8 @@ $pb_icon_circle_sizes: (
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
+
+      @include svg_size($name, "xxs", $size - 6px);
     }
   }
 
@@ -64,3 +77,4 @@ $pb_icon_circle_sizes: (
     }
   }
 }
+

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -15,7 +15,7 @@ type IconCircleProps = {
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",
+  size?: "base" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   variant?: | "default"
     | "royal"
     | "blue"

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb

@@ -1,3 +1,8 @@
+<%= pb_rails("icon_circle", props: {
+  icon: "rocket",
+  size: "xxs"
+}) %>
+<br />
 <%= pb_rails("icon_circle", props: {
   icon: "rocket",
   size: "xs"

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

@@ -4,6 +4,12 @@ import { IconCircle } from '../..'
 const IconCircleSizes = (props) => {
   return (
     <div>
+      <IconCircle
+          icon="rocket"
+          size="xxs"
+          {...props}
+      />
+      <br />
       <IconCircle
           icon="rocket"
           size="xs"

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -7,7 +7,7 @@ module Playbook
       prop :emoji, type: Playbook::Props::String,
                    default: ""
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md base lg xl],
+                  values: %w[xxs xs sm md base lg xl],
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default royal blue orange purple teal red yellow green orange],

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -74,6 +74,7 @@ describe("IconCircle Kit", () => {
 
       test('displays size as expected', () => {
         [
+          "xxs",
           "xs",
           "sm",
           "md",

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -33,7 +33,6 @@ module Playbook
       end
 
       def title_size
-        # rubocop:disable Style/CaseLikeIf
         if size == "lg"
           1
         elsif size == "md"
@@ -41,7 +40,6 @@ module Playbook
         else
           3
         end
-        # rubocop:enable Style/CaseLikeIf
       end
     end
   end

data/app/pb_kits/playbook/pb_list/list.rb

@@ -41,7 +41,6 @@ module Playbook
         dark ? "dark" : nil
       end
 
-      # rubocop:disable Style/CaseLikeIf
       def layout_class
         if layout == "right"
           "layout_right"
@@ -51,7 +50,6 @@ module Playbook
           ""
         end
       end
-      # rubocop:enable Style/CaseLikeIf
 
       def size_class
         size ? "large" : nil

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md

@@ -1,5 +1,5 @@
-`selected_ids` (Rails) / `selectedIds` (React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
+`selected_ids` is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
 
 Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
 
-When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids.jsx → _multi_level_select_selected_ids_react.jsx}

@@ -68,7 +68,7 @@ const treeData = [
   },
 ];
 
-const MultiLevelSelectSelectedIds = (props) => {
+const MultiLevelSelectSelectedIdsReact = (props) => {
   return (
     <div>
       <MultiLevelSelect
@@ -85,4 +85,4 @@ const MultiLevelSelectSelectedIds = (props) => {
   );
 };
 
-export default MultiLevelSelectSelectedIds;
+export default MultiLevelSelectSelectedIdsReact;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md

@@ -0,0 +1,5 @@
+`selected_ids` is an optional prop that accepts an array of ids and controls the selected state of the tree nodes that match the values passed. When used within react-hook-form, this prop can be used to manage the selected state of any ids passed to it. 
+
+Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
+
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

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

@@ -12,4 +12,4 @@ examples:
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids: Selected Ids
+  - multi_level_select_selected_ids_react: Selected Ids

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

@@ -2,4 +2,4 @@ export { default as MultiLevelSelectDefault } from './_multi_level_select_defaul
 export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
-export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
+export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"

data/app/pb_kits/playbook/pb_online_status/_online_status.scss

@@ -5,16 +5,7 @@
 
   @each $status_name, $status_value in $pb_online_status_statuses {
     &[class*=_#{$status_name}]  {
-      background: $status_value;
+      @include pb_online_status($status_value);
     }
   }
-  &[class*=_online]  {
-    @include pb_online_status_online;
-  }
-  &[class*=_away]  {
-    @include pb_online_status_away;
-  }
-  &[class*=_offline]  {
-    @include pb_online_status_offline;
-  }
 }

data/app/pb_kits/playbook/pb_online_status/_online_status.tsx

@@ -10,7 +10,7 @@ type OnlineStatusProps = {
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  status?: "online" | "offline" | "away",
+  status?: "away" | "error" | "info" | "neutral" | "offline" |"online" | "primary"| "success" | "warning",
 } & GlobalProps
 
 const OnlineStatus = (props: OnlineStatusProps) => {

data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss

@@ -7,6 +7,12 @@ $pb_online_status_statuses: (
   online: $success,
   away: $warning,
   offline: $neutral,
+  success: $success,
+  warning: $warning,
+  error: $error,
+  info: $info,
+  neutral: $neutral,
+  primary: $primary,
 );
 
 @mixin pb_online_status($background: $neutral) {
@@ -23,16 +29,4 @@ $pb_online_status_statuses: (
   border-style: solid;
   border-radius: 50%;
   background: $background;
-}
-
-@mixin pb_online_status_away {
-  @include pb_online_status($warning);
-}
-
-@mixin pb_online_status_online {
-  @include pb_online_status($success);
-}
-
-@mixin pb_online_status_offline {
-  @include pb_online_status($neutral);
-}
+}

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb

@@ -1,9 +1,6 @@
-<%= pb_rails("online_status", props: { status: "offline" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "online" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "away" }) %>
+<%= pb_rails("online_status", props: { status: "offline", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "online", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "away", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "error", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "info", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "primary", margin_y: "xs" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -5,24 +5,35 @@ import OnlineStatus from '../_online_status'
 const OnlineStatusDefault = (props) => (
   <>
     <OnlineStatus
+        marginY="xs"
         status="offline"
         {...props}
     />
-
-    <br />
-
     <OnlineStatus
+        marginY="xs"
         status="online"
         {...props}
     />
-
-    <br />
-
     <OnlineStatus
+        marginY="xs"
         status="away"
         {...props}
     />
-
+    <OnlineStatus
+        marginY="xs"
+        status="error"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        status="info"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        status="primary"
+        {...props}
+    />
   </>
 )
 

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbOnlineStatus
     class OnlineStatus < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
-                    values: %w[online offline away],
+                    values: %w[online offline away success warning error info neutral primary],
                     default: "offline"
 
       def classname

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

@@ -1 +1,2 @@
-<%= pb_rails("pagination", props: { model: @users, view: self}) %>
+<%= pb_rails("pagination", props: { model: @users, view: self}) %>
+

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,5 +1,5 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
@@ -9,4 +9,4 @@
             if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
         })
     })
-<% end %>
+<% 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.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/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)
     }
   }
 }