playbook_ui 9.11.0 → 9.12.0.pre.text.addon

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 11142ed7c777617e2396976979f9d8efaa8d3a8c1ad5bbd5ae4d149bc379c5a8
-  data.tar.gz: 24730f2cff2616c49d86af76a175909ae39b166ba6c99febda0b60fa12834e72
+  metadata.gz: f94c4155e43cfcdf17c58b5afce6b032c570576aff59506dc1751cb4f0763010
+  data.tar.gz: 24b67df04fa47777d4c4f8ec6d43c648e61e7b1f2325c15acd4b125045d45012
 SHA512:
-  metadata.gz: 0d4022c71355d27a1da0d060bad795c690d2fefe57802b4e09ae196757425745676babdb7516fc1501ea9caf28885ebaba7fdfdd74b63534d0f1811044a5dcd3
-  data.tar.gz: 2a07a2bcdfa41fada1839b1ae25f2335d49f9fed661a0145517d0c257cdb2cfe601e4d00305fc88c6c6b2345533dc5c03399c55922e40e273e3457fdaa1ad1a5
+  metadata.gz: f5bd3d916766662441b2e5ca737747554866e2ee519669bdb557da95faccab27a5dcaf1f28b8fa1764cdf5b5687f9972739323e2b97e8aa1bc3516893eb1e4a1
+  data.tar.gz: c4ae6e848dbea60dcc6e6b990579223d65c10fb6fc1b30ceb22769e3d4c95d24338b4086cde2464743db270be9330fc4950cc3b801d0671894e8dac87f1a25e5

data/app/pb_kits/playbook/pb_button/button.rb

@@ -36,7 +36,7 @@ module Playbook
         options.merge(
           href: link,
           role: "link",
-          target: new_window ? "_blank" : "_self",
+          target: new_window ? "_blank" : "_self"
         )
       end
 

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

@@ -1,13 +1,10 @@
 /* @flow */
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { Body, Caption } from '../'
+import { Body, Caption, Card, Flex, Icon } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
-import {
-  buildAriaProps,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 type TextInputProps = {
   aria?: object,
@@ -25,12 +22,14 @@ type TextInputProps = {
   type: string,
   value: string | number,
   children: Node,
+  addOn?: {
+    icon?: string,
+    alignment?: "right" | "left",
+    border?: boolean,
+  },
 }
 
-const TextInput = (
-  props: TextInputProps,
-  ref: React.ElementRef<"input">
-) => {
+const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
   const {
     aria = {},
     className,
@@ -47,16 +46,78 @@ const TextInput = (
     type = 'text',
     value = '',
     children = null,
+    addOn = { icon: null, alignment: 'right', border: true },
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+
+  const { alignment, border, icon } = addOn
+  const addOnAlignment = alignment === 'left' ? 'left' : 'right'
+  const borderToChange = addOnAlignment === 'left' ? 'right' : 'left'
+  const borderToggle = border === false ? 'off' : 'on'
+  const borderCss = `border_${borderToChange}_${borderToggle}`
+
+  const shouldShowAddOn = icon !== null
+  const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : null
+  const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : null
   const css = classnames([
     'pb_text_input_kit',
     error ? 'error' : null,
     globalProps(props),
     className,
   ])
+  const addOnIcon = (
+    <Icon
+        className="add-on-icon"
+        dark={dark}
+        fixedWidth={false}
+        icon={icon}
+    />
+  )
+  const textInput = (
+    <input
+        {...props}
+        className="text_input"
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={onChange}
+        placeholder={placeholder}
+        ref={ref}
+        required={required}
+        type={type}
+        value={value}
+    />
+  )
+
+  const addOnInput = (
+    <React.Fragment>
+      <Flex
+          className={`add-on-${addOnAlignment} ${borderCss}`}
+          inline="flex-container"
+          vertical="center"
+      >
+        <If condition={addOnAlignment == 'left'}>
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+          {textInput}
+          <Else />
+          {textInput}
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+        </If>
+      </Flex>
+    </React.Fragment>
+  )
 
   return (
     <div
@@ -69,29 +130,17 @@ const TextInput = (
           dark={dark}
           text={label}
       />
-      <div className="text_input_wrapper">
-        <If condition={children}>
-          {children}
-          <Else />
-          <input
-              {...props}
-              className="text_input"
-              disabled={disabled}
-              id={id}
-              name={name}
-              onChange={onChange}
-              placeholder={placeholder}
-              ref={ref}
-              required={required}
-              type={type}
-              value={value}
+      <div className={`${addOnCss} text_input_wrapper`}>
+        <Choose>
+          <When condition={children}>{children}</When>
+          <When condition={shouldShowAddOn}>{addOnInput}</When>
+          <Otherwise>{textInput}</Otherwise>
+        </Choose>
+        <If condition={error}>
+          <Body
+              status="negative"
+              text={error}
           />
-          <If condition={error}>
-            <Body
-                status="negative"
-                text={error}
-            />
-          </If>
         </If>
       </div>
     </div>

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

@@ -36,6 +36,16 @@
     }
   }
   &.dark {
+    .add_on_left {
+      .text_input {
+        border-left: 0;
+      }
+    }
+    .add_on_right {
+      .text_input {
+        border-right: 0;
+      }
+    }
     .text_input_wrapper {
       margin-bottom: 1rem;
       input::placeholder,
@@ -80,3 +90,91 @@
     }
   }
 }
+
+.text_input_wrapper_add_on {
+  & > [class^=pb_text_input_kit]:not(:last-child) {
+    .text_input_wrapper_add_on input, [class^=pb_text_input_kit] .text_input_wrapper_add_on .text_input {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+  .section-separator span {
+    padding: 0;
+  }
+
+  .add-on {
+    &-card {
+      height: 45px;
+      margin: 0;
+      padding: 0 !important;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+    }
+    &-icon {
+      color: $text_lt_lighter;
+    }
+    &-card-dark {
+      background-color: $bg-dark;
+    }
+    &-left {
+      .text_input {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+    }
+
+    &-right {
+      .text_input{
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
+    }
+  }
+  .text_input:focus ~ .add-on-card-dark {
+    background-color: $focus_input_dark;
+    border-width: 0px;
+  }
+
+  .card-left-aligned {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  .card-right-aligned {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  .border {
+    &_right_off {
+      .card-left-aligned {
+        border-right: 0;
+      }
+      .text_input {
+        border-left: 0 !important;
+        padding-left: 0 !important;
+      }
+    }
+    &_left_on {
+      .card-right-aligned {
+        border-left: 0;
+      }
+    }
+    &_right_on {
+      .card-left-aligned {
+        border-right: 0;
+      }
+    }
+    &_left_off {
+      .card-right-aligned {
+        border-left: 0;
+      }
+      .text_input {
+        border-right: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+<%= pb_rails("flex", props: { classname: "add-on-#{alignment} #{border_css}", vertical: "center"}) do %>
+  <% if left_aligned? %>
+    <%= pb_rails("card", props: {classname: "#{dark_mode_css} add-on-card card-left-aligned", dark: dark}) do %>
+      <%= pb_rails("icon", props: { icon: icon, classname: "add-on-icon", fixed_width: false, dark: dark }) %>
+    <% end %>
+    <%= content %>
+  <% else %>
+    <%= content %>
+    <%= pb_rails("card", props: {classname: "#{dark_mode_css} add-on-card card-right-aligned", dark: dark}) do %>
+      <%= pb_rails("icon", props: { icon: icon, classname: "add-on-icon", fixed_width: false, dark: dark }) %>
+    <% end %>
+  <% end %>
+<% end %>

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/example.yml

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

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

@@ -2,3 +2,4 @@ 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'

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

@@ -17,11 +17,47 @@ 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
       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
         validation[:message] || ""
       end
@@ -36,8 +72,6 @@ module Playbook
         fields
       end
 
-    private
-
       def error_class
         error ? " error" : ""
       end

data/lib/playbook/props.rb

@@ -17,6 +17,7 @@ require_relative "./props/numeric"
 require_relative "./props/percentage"
 require_relative "./props/proc"
 require_relative "./props/string"
+require_relative "./props/nested_props"
 
 module Playbook
   module Props

data/lib/playbook/props/nested_props.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Props
+    class NestedProps < Playbook::Props::Base
+      def initialize(nested_kit:, **kwargs)
+        super **kwargs
+        @nested_kit = nested_kit
+      end
+
+      def validate(values)
+        return true if values.nil?
+
+        @nested_kit.props.each do |prop_key, definition|
+          definition.validate! definition.value(values[prop_key])
+        end
+        true
+      rescue Playbook::Props::Error
+        false
+      end
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.11.0"
+  VERSION = "9.12.0.pre.text.addon"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.11.0
+  version: 9.12.0.pre.text.addon
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-04 00:00:00.000000000 Z
+date: 2021-05-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -299,22 +299,22 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
 - !ruby/object:Gem::Dependency
   name: rubocop
   requirement: !ruby/object:Gem::Requirement
@@ -1792,8 +1792,12 @@ files:
 - app/pb_kits/playbook/pb_table/table_row.rb
 - app/pb_kits/playbook/pb_text_input/_text_input.jsx
 - app/pb_kits/playbook/pb_text_input/_text_input.scss
+- app/pb_kits/playbook/pb_text_input/add_on.html.erb
+- app/pb_kits/playbook/pb_text_input/add_on.rb
 - app/pb_kits/playbook/pb_text_input/docs/_description.md
 - app/pb_kits/playbook/pb_text_input/docs/_footer.md
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb
@@ -2109,6 +2113,7 @@ files:
 - lib/playbook/props/enum.rb
 - lib/playbook/props/hash.rb
 - lib/playbook/props/hash_array.rb
+- lib/playbook/props/nested_props.rb
 - lib/playbook/props/number.rb
 - lib/playbook/props/number_array.rb
 - lib/playbook/props/numeric.rb
@@ -2123,7 +2128,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2134,12 +2139,13 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubyforge_project:
+rubygems_version: 2.7.3
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []