playbook_ui 9.10.0 → 9.14.1.alpha.highcharts9

data/app/pb_kits/playbook/pb_text_input/add_on.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTextInput
+    class AddOn < Playbook::KitBase
+      prop :icon, type: Playbook::Props::String, required: true
+      prop :alignment, type: Playbook::Props::Enum, values: %w[right left], default: "right"
+      prop :border, type: Playbook::Props::Boolean, default: true
+
+      def border_css
+        border_toggle = border ? "on" : "off"
+        border_to_change = if alignment == "left"
+                             "right"
+                           else
+                             "left"
+                           end
+
+        "border_#{border_to_change}_#{border_toggle}"
+      end
+
+      def left_aligned?
+        alignment == "left"
+      end
+
+      def dark_mode_css
+        dark ? "add-on-card-dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("text_input", props: {
+  label: "Add On With Defaults",
+  add_on: { icon: "bat" }
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Right-Aligned Add On With Border",
+  add_on: { icon: "user", alignment: 'right', border: true }
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Left-Aligned Add On With No Border",
+  add_on: { icon: "percent", alignment: 'left', border: false }
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Left-Aligned Add On With Border",
+  add_on: { icon: "user", alignment: 'left', border: true }
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Right-Aligned Add On With No Border",
+  add_on: { icon: "percent", alignment: 'right', border: false }
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { TextInput } from '../../'
+
+const TextInputAddOn = (props) => {
+  const [defaultInput, setDefaultInput] = useState('')
+  const [firstInput, setFirstInput] = useState('')
+  const [secondInput, setSecondInput] = useState('')
+  const [thirdInput, setThirdInput] = useState('')
+  const [fourthInput, setFourthInput] = useState('')
+
+  const handleUpdateDefaultInput = ({ target }) => {
+    setDefaultInput(target.value)
+  }
+
+  const handleUpdateFirstInput = ({ target }) => {
+    setFirstInput(target.value)
+  }
+
+  const handleUpdateSecondInput = ({ target }) => {
+    setSecondInput(target.value)
+  }
+
+  const handleUpdateThirdInput = ({ target }) => {
+    setThirdInput(target.value)
+  }
+
+  const handleUpdateFourthInput = ({ target }) => {
+    setFourthInput(target.value)
+  }
+
+  return (
+    <>
+      <div>
+        <TextInput
+            addOn={{ icon: 'bat' }}
+            label="Add On With Defaults"
+            onChange={handleUpdateDefaultInput}
+            value={defaultInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'user', alignment: 'right', border: true }}
+            label="Right-Aligned Add On With Border"
+            onChange={handleUpdateFirstInput}
+            value={firstInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'left', border: false }}
+            label="Left-Aligned Add On With No Border"
+            onChange={handleUpdateSecondInput}
+            value={secondInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'right', border: false }}
+            label="Right-Aligned Add On With No Border"
+            onChange={handleUpdateThirdInput}
+            value={thirdInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'left', border: true }}
+            label="Left-Aligned Add On With Border"
+            onChange={handleUpdateFourthInput}
+            value={fourthInput}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default TextInputAddOn

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("text_input", props: {label: "Custom Input"}) do %>
     <input placeholder="Custom placeholder" name="custom-name"></input>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("text_input", props: {
+  inline: true,
+  label: "Hover Over Text Below",
+  value: "Inline Input"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { TextInput } from '../../'
+
+const TextInputInline = (props) => {
+  const [value, setValue] = useState('Inline Input')
+  const handleValueChange = ({ target }) => {
+    setValue(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          inline
+          label="Hover Over Text Below"
+          onChange={handleValueChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextInputInline

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

@@ -4,8 +4,12 @@ examples:
   - text_input_error: With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
+  - text_input_add_on: Add On
+  - text_input_inline: Inline
   react:
   - text_input_default: Default
   - text_input_error: With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
+  - text_input_add_on: Add On
+  - text_input_inline: Inline

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

@@ -2,3 +2,5 @@ export { default as TextInputDefault } from './_text_input_default.jsx'
 export { default as TextInputCustom } from './_text_input_custom.jsx'
 export { default as TextInputError } from './_text_input_error.jsx'
 export { default as TextInputDisabled } from './_text_input_disabled.jsx'
+export { default as TextInputAddOn } from './_text_input_add_on.jsx'
+export { default as TextInputInline } from './_text_input_inline.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -5,25 +5,16 @@
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>
-  <%= content_tag(:div, class: "text_input_wrapper") do %>
+  <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
       <%= content %>
+    <% elsif has_add_on? %>
+      <%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
+        <%= input_tag %>
+      <% end %>
     <% else %>
-      <%= tag(:input,
-          autocomplete: object.autocomplete ? nil : "off",
-          class: "text_input",
-          data: object.validation_data,
-          disabled: object.disabled,
-          id: object.id,
-          name: object.name,
-          pattern: object.validation_pattern,
-          placeholder: object.placeholder,
-          required: object.required,
-          type: object.type,
-          value: object.value) %>
-    <% end %>
-    <% if object.error %>
-      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <%= input_tag %>
     <% end %>
+    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
       prop :label
       prop :name
       prop :placeholder
@@ -17,9 +19,45 @@ module Playbook
       prop :validation, type: Playbook::Props::Hash,
                         default: {}
       prop :value
+      prop :add_on, type: Playbook::Props::NestedProps,
+                    nested_kit: Playbook::PbTextInput::AddOn
 
       def classname
-        generate_classname("pb_text_input_kit") + error_class
+        generate_classname("pb_text_input_kit") + error_class + inline_class
+      end
+
+      def input_tag
+        tag(:input, input_options)
+      end
+
+      def has_add_on?
+        add_on.present?
+      end
+
+      def add_on_class
+        has_add_on? ? "text_input_wrapper_add_on" : nil
+      end
+
+      def add_on_props
+        { dark: dark }.merge(add_on || {})
+      end
+
+    private
+
+      def input_options
+        {
+          autocomplete: autocomplete ? nil : "off",
+          class: "text_input",
+          data: validation_data,
+          disabled: disabled,
+          id: id,
+          name: name,
+          pattern: validation_pattern,
+          placeholder: placeholder,
+          required: required,
+          type: type,
+          value: value,
+        }
       end
 
       def validation_message
@@ -36,11 +74,13 @@ module Playbook
         fields
       end
 
-    private
-
       def error_class
         error ? " error" : ""
       end
+
+      def inline_class
+        inline ? " inline" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -3,10 +3,10 @@
     data: object.data,
     class: object.classname) do %>
 
-    <%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
+    <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>
         <%= object.format_time_string %>
-        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
+        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, dark: object.dark, classname: "pb_time_stacked" }) %>
       </time>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -20,7 +20,7 @@ module Playbook
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
-          pb_tooltip_tooltip_id: tooltip_id,
+          pb_tooltip_tooltip_id: tooltip_id
         )
       end
 

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

@@ -3,8 +3,10 @@
 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 classnames from 'classnames'
 
 import Control from './components/Control'
 import ClearIndicator from './components/ClearIndicator'
@@ -26,6 +28,7 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
+  createable?: boolean,
   dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
@@ -55,9 +58,13 @@ const Typeahead = (props: Props) => {
     },
     defaultOptions: true,
     id: 'react-select-input',
+    inline: false,
     isClearable: true,
     isSearchable: true,
     name,
+    multiKit: '',
+    onCreateOption: null,
+    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') {
@@ -84,9 +92,10 @@ const Typeahead = (props: Props) => {
   }
 
   const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
+  const inlineClass = selectProps.inline ? 'inline' : null
 
   return (
-    <div className={classes}>
+    <div className={classnames(classes, inlineClass)}>
       <Tag
           classNamePrefix="typeahead-kit-select"
           onChange={handleOnChange}

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

@@ -154,4 +154,27 @@
       box-sizing: border-box;
     }
   }
+  .placeholder+.input-wrapper .typeahead-plus-icon {
+    display: none;
+  }
+  .typeahead-kit-select__control--is-focused .typeahead-plus-icon {
+    display: none;
+  }
+  .typeahead-plus-icon {
+    color: $text_lt_lighter;
+  }
+  [class^=pb_badge_kit] span {
+    line-height: 16.5px;
+    letter-spacing: normal;
+  }
+  &.inline {
+    &:not(:hover) {
+      .text_input {
+        border-color: transparent;
+      }
+      .text_input_indicators .css-tlfecz-indicatorContainer {
+        color: transparent;
+      }
+    }
+  }
 }

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 { Badge, FormPill } from '../../'
 
 type Props = {
   data: object,
@@ -15,6 +15,7 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
+  const { multiKit } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -28,19 +29,30 @@ const MultiValue = (props: Props) => {
         className="text_input_multivalue_container"
         {...props}
     >
-      <If condition={imageUrl}>
-        <FormPill
-            avatarUrl={imageUrl}
+      <If condition={multiKit === 'badge'}>
+        <Badge
             closeProps={removeProps}
-            marginRight="xs"
-            name={label}
-        />
-        <Else />
-        <FormPill
-            closeProps={removeProps}
-            marginRight="xs"
+            removeIcon
             text={label}
+            variant="primary"
         />
+        <Else />
+        <If condition={imageUrl}>
+          <FormPill
+              avatarUrl={imageUrl}
+              closeProps={removeProps}
+              marginRight="xs"
+              name={label}
+              size={multiKit === 'smallPill' ? 'small' : ''}
+          />
+          <Else />
+          <FormPill
+              closeProps={removeProps}
+              marginRight="xs"
+              size={multiKit === 'smallPill' ? 'small' : ''}
+              text={label}
+          />
+        </If>
       </If>
     </components.MultiValueContainer>
   )