playbook_ui 8.2.1.alpha.iconacc → 8.2.1.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b7526c42c57c64b2f20becc559569747cda234e5478190b62e170ad5be74ac4a
-  data.tar.gz: c2167d4d617d1fa829b96ee32d6b8ca490734b416dabd261806756868b6b4431
+  metadata.gz: 8cbf51b2d7235622879cdc471204d3becf81ea6002ea3c7951c3d5ffd7edc09a
+  data.tar.gz: 515a63cbc2842c17b189a127e5efb8920c0ebd046e43a1c549fb85e1141bd3b5
 SHA512:
-  metadata.gz: 61791c852673487ced56bfa3eb2e47c336017172b79ecb447ff48fb02d5b800ce85cb335f93347d7771c7e5dbe5ce2c92ba8ddf4d4dc07d776516de703d47e77
-  data.tar.gz: af3ccf64210ecba24d6898579f51333f3b9be8e8f85d6d4feb6cf1ca5002e927f63e70eb2c51188270dde52b85f228c1f789acda840a7931b7b39327e6c23539
+  metadata.gz: 5512cbf48886764a35bbef6252f89d6472ec869232f8ff628e015ee9f2c78884443bcd0fee4cda2d6063bd6ee714936b9b1d535d8e52e58d60a08246460843d9
+  data.tar.gz: 32e359b3596106cc2ee242cb4a7cf390f5a575b13713397351568ccc75d56bdb796b29e5e5cbc030ead10766a1893c4118f6d69eb4c6065ace18e12f092fff29

data/Rakefile

@@ -4,12 +4,29 @@ rescue LoadError
   puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
 end
 
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Playbook'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
 APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
 load 'rails/tasks/engine.rake'
+
 load 'rails/tasks/statistics.rake'
 
 require 'bundler/gem_tasks'
 
-Dir["private/tasks/*.rake"].each(&method(:load))
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'spec/**/*_spec.rb'
+  t.verbose = false
+end
 
 task default: :test

data/app/pb_kits/playbook/_playbook.scss

@@ -43,6 +43,7 @@
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
 @import 'pb_image/image';
+@import 'pb_inline/inline';
 @import 'pb_label_pill/label_pill';
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';

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

@@ -42,6 +42,7 @@ kits:
   - icon_stat_value
   - icon_value
   - image
+  - inline
   - layout
   - list
   - loading_inline

data/app/pb_kits/playbook/index.js

@@ -47,6 +47,7 @@ export IconCircle from './pb_icon_circle/_icon_circle.jsx'
 export IconStatValue from './pb_icon_stat_value/_icon_stat_value.jsx'
 export IconValue from './pb_icon_value/_icon_value.jsx'
 export Image from './pb_image/_image.jsx'
+export Inline from './pb_inline/_inline.jsx'
 export LabelPill from './pb_label_pill/_label_pill.jsx'
 export LabelValue from './pb_label_value/_label_value.jsx'
 export Layout from './pb_layout/_layout.jsx'

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { Icon } from '../'
 
 import {
   buildAriaProps,
@@ -13,8 +14,15 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
+  closeProps?: {
+    onClick?: EventHandler,
+    onMouseDown?: EventHandler,
+    onTouchEnd?: EventHandler,
+  },
   data?: object,
   id?: string,
+  removeIcon?: Boolean,
+  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -23,8 +31,11 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
+    closeProps = {},
     data = {},
     id,
+    removeIcon = false,
+    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -44,7 +55,21 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>{text}</span>
+      <span>
+        <If condition={removeIcon}>
+          <span
+              onClick={removeOnClick}
+              style={{ cursor: 'pointer' }}
+              {...closeProps}
+          >
+            <Icon
+                fixedWidth
+                icon="times"
+            />
+          </span>
+        </If>
+        {text}
+      </span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -25,6 +25,8 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
+  inputOnChange?: (String) => void,
+  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -55,6 +57,8 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
+    inputOnChange,
+    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -126,7 +130,9 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
+            onChange={inputOnChange}
             placeholder={placeholder}
+            value={inputValue}
         />
         <If condition={!hideIcon}>
           <div

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -2,14 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type IconProps = {
-  aria?: object,
+  aria?: Object,
   border?: boolean,
   className?: string,
-  data?: object,
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
   icon: string,
@@ -43,10 +41,8 @@ const flipMap = {
 
 const Icon = (props: IconProps) => {
   const {
-    aria = {},
     border = false,
     className,
-    data = {},
     fixedWidth = true,
     flip = false,
     icon,
@@ -79,22 +75,11 @@ const Icon = (props: IconProps) => {
     className
   )
 
-  aria.label ? null : aria.label = `${icon} icon`
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-
   return (
-    <>
-      <i
-          {...dataProps}
-          className={classes}
-          id={id}
-      />
-      <span
-          {...ariaProps}
-          hidden="true"
-      />
-    </>
+    <i
+        className={classes}
+        id={id}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,7 +1,5 @@
 <%= content_tag(:i, nil,
     id: object.id,
     data: object.data,
-    class: object.classname ) %>
-<%= content_tag(:span, nil,
-    aria: { label: "#{object.icon} icon" }.merge(object.aria),
-    hidden: true ) %>
+    class: object.classname,
+    aria: object.aria) %>

data/app/pb_kits/playbook/pb_inline/_inline.jsx

@@ -0,0 +1,83 @@
+/* @flow */
+
+import React, { useEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import './_inline.scss'
+
+type InlineProps = {
+  aria?: object,
+  className?: string,
+  data?: object,
+  displayKit?: React.Node,
+  formInput?: React.Node,
+  id?: string,
+}
+
+const Inline = (props: InlineProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    displayKit,
+    id,
+    formInput,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_inline'), globalProps(props), className)
+
+  const [editing, setEditing] = useState(false)
+
+  const ToggleClickHandler = () => {
+    setEditing(!editing)
+  }
+
+  useEffect(() => {
+    if (editing) {
+      modifiedInput.ref.current.focus()
+
+      modifiedInput.ref.current.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' || e.key === 'Enter') {
+          setEditing(!editing)
+        }
+      })
+    }
+  }, [editing])
+
+  const { kitType, size } = displayKit.props
+  const textInputClassName = kitType ? (kitType.toLowerCase() + (size ? `_${size}` : '')) : ''
+
+  const modifiedInput = React.cloneElement(formInput, {
+    className: textInputClassName,
+    onBlur: () => setEditing(!editing),
+    ref: useRef(null),
+  })
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <If condition={editing}>
+        {modifiedInput}
+      </If>
+      <If condition={!editing}>
+        <div
+            onClick={() => ToggleClickHandler()}
+            onFocus={() => ToggleClickHandler()}
+            tabIndex="0"
+        >
+          {displayKit}
+        </div>
+      </If>
+
+    </div>
+  )
+}
+
+export default Inline

data/app/pb_kits/playbook/pb_inline/_inline.scss

@@ -0,0 +1,58 @@
+@import "../pb_title/title_mixin";
+@import "../pb_body/body_mixins";
+@import "../pb_caption/caption_mixin";
+
+.pb_inline {
+  .pb_text_input_kit {
+    &.title_1 {
+      .text_input_wrapper input {
+        @include pb_title_1;
+      }
+      &.dark .text_input_wrapper input {
+        @include pb_title_1;
+        @include pb_title_dark;
+      }
+    }
+    &.title_2 {
+      .text_input_wrapper input {
+        @include pb_title_2;
+      }
+      &.dark .text_input_wrapper input {
+        @include pb_title_2;
+        @include pb_title_dark;
+      }
+    }
+    &.title_3 {
+      .text_input_wrapper input {
+        @include pb_title_3;
+      }
+      &.dark .text_input_wrapper input {
+        @include pb_title_3;
+        @include pb_title_dark;
+      }
+    }
+    &.body {
+      .text_input_wrapper input {
+        @include pb_body;
+      }
+      &.dark .text_input_wrapper input {
+        @include pb_body_dark;
+      }
+    }
+    &.caption {
+      .text_input_wrapper input {
+        @include caption;
+      }
+      &.dark .text_input_wrapper input {
+        @include caption;
+        @include caption_dark;
+      }
+    }
+    .text_input_wrapper input {
+      padding: 8px 5px;
+    }
+    .text_input_wrapper, .pb_textarea_kit {
+      margin-bottom: 0;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_inline/docs/_inline_default.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import { Inline, TextInput, Title } from '../../'
+
+const InlineDefault = (props) => {
+  const [formValue, setFormValue] = useState('Default Value')
+
+  const handleInputChange = (event) => {
+    setFormValue(event.target.value)
+  }
+
+  return (
+    <div>
+      <Inline
+          {...props}
+          displayKit={
+            <Title
+                {...props}
+                kitType="Title"
+                size={4}
+                tag="h4"
+                text={formValue}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                onChange={handleInputChange}
+                value={formValue}
+            />
+          }
+      />
+    </div>
+  )
+}
+
+export default InlineDefault

data/app/pb_kits/playbook/pb_inline/docs/_inline_input_options.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { Body, Inline, Textarea, TextInput } from '../../'
+
+const InlineInputOptions = (props) => {
+  const [formFields, setFormFields] = useState({
+    inputOne: 'Input One',
+    inputTwo: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+  })
+
+  const handleChange = ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  return (
+    <div>
+      <Inline
+          {...props}
+          displayKit={
+            <Body
+                {...props}
+                kitType="Body"
+                text={formFields.inputOne}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputOne"
+                onChange={handleChange}
+                value={formFields.inputOne}
+            />
+          }
+      />
+      <Inline
+          {...props}
+          displayKit={
+            <Body
+                {...props}
+                kitType="Body"
+                text={formFields.inputTwo}
+            />
+          }
+          formInput={
+            <Textarea
+                {...props}
+                name="inputTwo"
+                onChange={handleChange}
+                resize="auto"
+                value={formFields.inputTwo}
+            />
+          }
+      />
+    </div>
+  )
+}
+
+export default InlineInputOptions

data/app/pb_kits/playbook/pb_inline/docs/_inline_text_options.jsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import { Body, Caption, Inline, TextInput, Title } from '../../'
+
+const InlineTextOptions = (props) => {
+  const [formFields, setFormFields] = useState({
+    inputOne: 'Input One',
+    inputTwo: 'Input Two',
+    inputThree: 'Input Three',
+    inputFour: 'Input Four',
+  })
+
+  const handleChange = ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  return (
+    <div>
+      <Inline
+          {...props}
+          displayKit={
+            <Title
+                {...props}
+                kitType="Title"
+                size={1}
+                tag="h1"
+                text={formFields.inputOne}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputOne"
+                onChange={handleChange}
+                value={formFields.inputOne}
+            />
+          }
+      />
+      <Inline
+          {...props}
+          displayKit={
+            <Title
+                {...props}
+                kitType="Title 4"
+                size={4}
+                tag="h4"
+                text={formFields.inputTwo}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputTwo"
+                onChange={handleChange}
+                value={formFields.inputTwo}
+            />
+          }
+      />
+      <Inline
+          {...props}
+          displayKit={
+            <Body
+                {...props}
+                kitType="Body"
+                text={formFields.inputThree}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputThree"
+                onChange={handleChange}
+                value={formFields.inputThree}
+            />
+          }
+      />
+      <Inline
+          {...props}
+          displayKit={
+            <Caption
+                {...props}
+                kitType="Caption"
+                text={formFields.inputFour}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputFour"
+                onChange={handleChange}
+                value={formFields.inputFour}
+            />
+          }
+      />
+    </div>
+  )
+}
+
+export default InlineTextOptions

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

@@ -0,0 +1,5 @@
+examples:
+  react:
+  - inline_default: Default
+  - inline_text_options: Text Options
+  - inline_input_options: Input Options

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

@@ -0,0 +1,3 @@
+export { default as InlineDefault } from './_inline_default.jsx'
+export { default as InlineTextOptions } from './_inline_text_options.jsx'
+export { default as InlineInputOptions } from './_inline_input_options.jsx'

data/app/pb_kits/playbook/pb_inline/inline.test.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import { Inline } from '../'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  const testId = "test1"
+
+  render(
+    <Inline
+      data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx

@@ -22,7 +22,6 @@ const LoadingInline = (props: LoadingInlineProps) => {
     >
       <Body color="light">
         <Icon
-            aria={{ label: 'loading icon' }}
             fixedWidth
             icon="spinner"
             pulse

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -4,6 +4,6 @@
     class: object.classname) do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
+    <%= pb_rails("icon", props: { fixed_width: true, icon: "spinner", pulse: true }) %> Loading
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -75,6 +75,7 @@ const NavItem = (props: NavItemProps) => {
               key={iconLeft}
           >
             <Icon
+                aria={{ label: iconLeft }}
                 className="pb_nav_list_item_icon_left"
                 fixedWidth
                 icon={iconLeft}
@@ -90,6 +91,7 @@ const NavItem = (props: NavItemProps) => {
               key={iconRight}
           >
             <Icon
+                aria={{ label: iconRight }}
                 className="pb_nav_list_item_icon_right"
                 fixedWidth
                 icon={iconRight}

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

@@ -9,13 +9,13 @@
       <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
     <% end %>
     <% if object.icon_left %>
-      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { aria: { label: object.icon_left }, icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>
     <span class="pb_nav_list_item_text">
       <%= object.text %><%= content.presence %>
     </span>
     <% if object.icon_right %>
-      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { aria: { label: object.icon_right }, icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { useEffect, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import useFocus from './useFocus.js'
 import Trix from 'trix'
@@ -22,7 +22,7 @@ type RichTextEditorProps = {
   value?: string,
 }
 
-const RichTextEditor = (props: RichTextEditorProps) => {
+const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input">) => {
   const {
     aria = {},
     className,
@@ -120,6 +120,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       <input
           id={id}
           name={name}
+          ref={ref}
           type="hidden"
           value={value}
       />
@@ -133,4 +134,4 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   )
 }
 
-export default RichTextEditor
+export default forwardRef(RichTextEditor)

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -19,6 +19,7 @@ type TextInputProps = {
   id?: string,
   name: string,
   label: string,
+  onBlur: (String) => void,
   onChange: (String) => void,
   placeholder: string,
   required?: boolean,
@@ -41,6 +42,7 @@ const TextInput = (
     id,
     name,
     label,
+    onBlur = () => {},
     onChange = () => {},
     placeholder,
     required,
@@ -79,6 +81,7 @@ const TextInput = (
               disabled={disabled}
               id={id}
               name={name}
+              onBlur={onBlur}
               onChange={onChange}
               placeholder={placeholder}
               ref={ref}

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -24,6 +24,7 @@ type TextareaProps = {
   required?: boolean,
   rows?: number,
   resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
+  onBlur?: InputCallback<HTMLTextAreaElement>,
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
@@ -37,6 +38,7 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
+  onBlur = () => {},
   onChange = () => {},
   placeholder,
   required,
@@ -75,6 +77,7 @@ const Textarea = ({
             className="pb_textarea_kit"
             disabled={disabled}
             name={name}
+            onBlur={onBlur}
             onChange={onChange}
             placeholder={placeholder}
             ref={ref}

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -3,12 +3,14 @@
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
+import CreateableSelect from 'react-select/creatable'
 import { get } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Control from './components/Control'
 import ClearIndicator from './components/ClearIndicator'
 import IndicatorsContainer from './components/IndicatorsContainer'
+import Input from './components/Input'
 import MenuList from './components/MenuList'
 import MultiValue from './components/MultiValue'
 import Option from './components/Option'
@@ -26,6 +28,7 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
+  createable?: boolean,
   dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
@@ -41,12 +44,14 @@ type Props = {
 
 const Typeahead = (props: Props) => {
   const selectProps = {
+    badges: false,
     cacheOptions: true,
     components: {
       Control,
       ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null,
+      Input,
       MenuList,
       MultiValue,
       Option,
@@ -58,6 +63,8 @@ const Typeahead = (props: Props) => {
     isClearable: true,
     isSearchable: true,
     name,
+    onCreate: () => {},
+    plusIcon: false,
     ...props,
   }
 
@@ -65,7 +72,8 @@ const Typeahead = (props: Props) => {
   if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
   if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
 
-  const Tag = props.async ? AsyncSelect : Select
+  let Tag = props.async ? AsyncSelect : Select
+  if (props.createable) Tag = CreateableSelect
 
   const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {

data/app/pb_kits/playbook/pb_typeahead/components/Input.jsx

@@ -0,0 +1,24 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+import { Flex, Icon } from '../../'
+
+const Input = (props: any) => (
+  <Flex
+      align="center"
+  >
+    <If condition={props.selectProps.plusIcon}>
+      <Icon
+          className="typeahead-plus-icon"
+          icon="plus"
+      />
+    </If>
+    <components.Input
+        className="input"
+        {...props}
+    />
+  </Flex>
+)
+
+export default Input

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import { FormPill } from '../../'
+import { FormPill, Badge } from '../../'
 
 type Props = {
   data: object,
@@ -28,7 +28,7 @@ const MultiValue = (props: Props) => {
         className="text_input_multivalue_container"
         {...props}
     >
-      <If condition={imageUrl}>
+      {/* <If condition={imageUrl}>
         <FormPill
             avatarUrl={imageUrl}
             closeProps={removeProps}
@@ -41,6 +41,29 @@ const MultiValue = (props: Props) => {
             marginRight="xs"
             text={label}
         />
+      </If> */}
+      <If condition={props.selectProps.badges}>
+        <Badge
+            closeProps={removeProps}
+            removeIcon
+            text={label}
+            variant="primary"
+        />
+        <Else />
+        <If condition={imageUrl}>
+          <FormPill
+              avatarUrl={imageUrl}
+              closeProps={removeProps}
+              marginRight="xs"
+              name={label}
+          />
+          <Else />
+          <FormPill
+              closeProps={removeProps}
+              marginRight="xs"
+              text={label}
+          />
+        </If>
       </If>
     </components.MultiValueContainer>
   )

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

@@ -13,6 +13,7 @@ const options = [
 const TypeaheadDefault = (props) => {
   return (
     <Typeahead
+        // badges
         label="Colors"
         options={options}
         {...props}

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

@@ -1,9 +1,9 @@
 /* @flow */
 
-import React from 'react'
+import React, { useState } from 'react'
 import { Typeahead } from '../..'
 
-const options = [
+const initOptions = [
   { label: 'Windows', value: '#FFA500' },
   { label: 'Siding', value: '#FF0000' },
   { label: 'Doors', value: '#00FF00' },
@@ -11,13 +11,18 @@ const options = [
 ]
 
 const TypeaheadWithPills = (props) => {
+  const [values, setValues] = useState([])
   return (
     <>
       <Typeahead
+          badges
+          createable
           isMulti
           label="Colors"
-          options={options}
+          onChange={(value) => console.log(value)}
+          options={initOptions}
           placeholder=""
+          plusIcon
           {...props}
       />
     </>

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "8.2.1.alpha.iconacc"
+  VERSION = "8.2.1.pre.alpha1"
 end
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 8.2.1.alpha.iconacc
+  version: 8.2.1.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-03-31 00:00:00.000000000 Z
+date: 2021-03-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1187,6 +1187,14 @@ files:
 - app/pb_kits/playbook/pb_image/image.html.erb
 - app/pb_kits/playbook/pb_image/image.rb
 - app/pb_kits/playbook/pb_image/image.test.js
+- app/pb_kits/playbook/pb_inline/_inline.jsx
+- app/pb_kits/playbook/pb_inline/_inline.scss
+- app/pb_kits/playbook/pb_inline/docs/_inline_default.jsx
+- app/pb_kits/playbook/pb_inline/docs/_inline_input_options.jsx
+- app/pb_kits/playbook/pb_inline/docs/_inline_text_options.jsx
+- app/pb_kits/playbook/pb_inline/docs/example.yml
+- app/pb_kits/playbook/pb_inline/docs/index.js
+- app/pb_kits/playbook/pb_inline/inline.test.jsx
 - app/pb_kits/playbook/pb_kit/dateTime.js
 - app/pb_kits/playbook/pb_kit/pb_date_time.rb
 - app/pb_kits/playbook/pb_label_pill/_label_pill.jsx
@@ -1961,6 +1969,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
 - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
+- app/pb_kits/playbook/pb_typeahead/components/Input.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Option.jsx