playbook_ui 13.22.0 → 13.23.0.pre.alpha.PLAY1284investigation2657

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/pb_typeahead/_typeahead.tsx

@@ -7,17 +7,21 @@ import { get, isString, uniqueId } from 'lodash'
 import { globalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
-import Control from './components/Control'
-import ClearIndicator from './components/ClearIndicator'
-import IndicatorsContainer from './components/IndicatorsContainer'
-import MenuList from './components/MenuList'
-import MultiValue from './components/MultiValue'
-import Option from './components/Option'
-import Placeholder from './components/Placeholder'
-import ValueContainer from './components/ValueContainer'
+import {
+  Control,
+  ClearIndicator,
+  IndicatorsContainer,
+  MenuList,
+  MultiValue,
+  Option,
+  Placeholder,
+  ValueContainer,
+} from "./components"
+
+import * as kitComponents from "./components"
 
 import { noop, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { Noop } from '../types'
+import { GenericObject, Noop } from '../types'
 
 /**
  * @typedef {object} Props
@@ -29,7 +33,7 @@ import { Noop } from '../types'
 type TypeaheadProps = {
   async?: boolean,
   className?: string,
-  components?: object,
+  components?: GenericObject,
   createable?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
@@ -100,7 +104,7 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
-    onMultiValueClick: (_option: SelectValueType) => { },
+    onMultiValueClick: (_option: SelectValueType): any => undefined,
     ...props,
   }
 
@@ -137,19 +141,23 @@ const Typeahead = ({
   const inlineClass = selectProps.inline ? 'inline' : null
 
   return (
-    <div 
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(classes, inlineClass)}
+    <div
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(classes, inlineClass)}
     >
       <Tag
-        classNamePrefix="typeahead-kit-select"
-        error={error}
-        onChange={handleOnChange}
-        {...selectProps}
+          classNamePrefix="typeahead-kit-select"
+          error={error}
+          onChange={handleOnChange}
+          {...selectProps}
       />
     </div>
   )
 }
 
+Object.keys(kitComponents).forEach((k) => {
+  (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
+})
+
 export default Typeahead

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const MenuList = (props: any) => (
+const MenuList = (props: any) => {
+  return (
   <components.MenuList {...props}>
     {props.children}
+    {props.footer}
   </components.MenuList>
-)
+)}
 
 export default MenuList

data/app/pb_kits/playbook/pb_typeahead/components/index.tsx

@@ -0,0 +1,19 @@
+import Control from './Control'
+import ClearIndicator from './ClearIndicator'
+import IndicatorsContainer from './IndicatorsContainer'
+import MenuList from './MenuList'
+import MultiValue from './MultiValue'
+import Option from './Option'
+import Placeholder from './Placeholder'
+import ValueContainer from './ValueContainer'
+
+export {
+  Control,
+  ClearIndicator,
+  IndicatorsContainer,
+  MenuList,
+  MultiValue,
+  Option,
+  Placeholder,
+  ValueContainer,
+}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+
+import {
+  Button,
+} from '../..'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Amaranth', value: '#9F2B68' },
+  { label: 'Key Lime', value: '#DAF7A6' },
+  { label: 'Turquois', value: '#00FFD0' },
+]
+
+const TypeaheadCustomMenuList = (props) => {
+  const defaultColorOptions = options.slice(0, 3)
+  const [colorOptions, setColorOptions] = useState(defaultColorOptions)
+
+  const moreToLoad = colorOptions.length == defaultColorOptions.length
+  const loadColors = moreToLoad ? () => setColorOptions(options) : () => setColorOptions(defaultColorOptions)
+
+  const menuListProps = {
+    footer: (<Button
+        margin="sm"
+        onClick={loadColors}
+        text={`Load ${moreToLoad ? "More" : "Less"}`}
+             />)
+  }
+
+  const MenuList = (props) => (
+    <Typeahead.MenuList
+        {...menuListProps}
+        {...props}
+    />
+  )
+
+  return (
+    <Typeahead
+        components={{ MenuList }}
+        label="Colors"
+        options={colorOptions}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadCustomMenuList

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -46,7 +46,7 @@ const TypeaheadWithHighlight = (props) => {
       if (!inputValue.length) return text
       return text.replace(
         new RegExp(inputValue, 'gi'),
-        highlighted => `<mark>${highlighted}</mark>`
+        (highlighted) => `<mark>${highlighted}</mark>`
       )
     }
     return (

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

@@ -22,3 +22,4 @@ examples:
     - typeahead_createable: Createable
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
+    - typeahead_custom_menu_list: Custom MenuList

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

@@ -9,3 +9,4 @@ export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
 export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
+export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'

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.