playbook_ui 9.10.0.pre.alpha1 → 9.12.0.pre.text.addon

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b36c79f834fafef501c48ece8fc72990708ab4323f3c172527d9a9a31bb9fa4
-  data.tar.gz: ddc237d11376abb37c4e0d8630fbf06f4f2510dd0bdadefebc364bdf4b4e735a
+  metadata.gz: f94c4155e43cfcdf17c58b5afce6b032c570576aff59506dc1751cb4f0763010
+  data.tar.gz: 24b67df04fa47777d4c4f8ec6d43c648e61e7b1f2325c15acd4b125045d45012
 SHA512:
-  metadata.gz: 71667f6a96f25e9fee0bd7d741b38c09eeced8c397c1126fafc1b3525b984d6a717e6332d2690818df67c0eb7da370429bbc50481f17c820256121d9972f48ae
-  data.tar.gz: 953083fe2726a16fbbd33b7b550c1136230b6dec1043e0fd4f3c6ed47c52249c47b98a9da5e889cec15c05b11a42257f32cc1824d62e6109a8ad0009c1824f5e
+  metadata.gz: f5bd3d916766662441b2e5ca737747554866e2ee519669bdb557da95faccab27a5dcaf1f28b8fa1764cdf5b5687f9972739323e2b97e8aa1bc3516893eb1e4a1
+  data.tar.gz: c4ae6e848dbea60dcc6e6b990579223d65c10fb6fc1b30ceb22769e3d4c95d24338b4086cde2464743db270be9330fc4950cc3b801d0671894e8dac87f1a25e5

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,16 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
-  aria?: {
-    label: string,
-  },
+  aria?: object,
   children?: array<React.ReactChild>,
   className?: string | array<string>,
   data?: object,
@@ -55,20 +53,9 @@ const buttonClassName = (props: ButtonPropTypes) => {
   return className
 }
 
-const buttonAriaProps = (props: ButtonPropTypes) => {
-  const { aria } = props
-  if (typeof aria !== 'object') return {}
-  const { label } = aria
-
-  const ariaProps = {}
-
-  if (label !== null) ariaProps['aria-label'] = label
-
-  return ariaProps
-}
-
 const Button = (props: ButtonPropTypes) => {
   const {
+    aria = {},
     children,
     className,
     data = {},
@@ -84,7 +71,7 @@ const Button = (props: ButtonPropTypes) => {
     value,
   } = props
 
-  const buttonAria = buttonAriaProps(props)
+  const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
@@ -114,11 +101,12 @@ const Button = (props: ButtonPropTypes) => {
   return (
     <If condition={link !== null}>
       <a
-          {...buttonAria}
+          {...ariaProps}
           {...dataProps}
           className={css}
           href={link}
           id={id}
+          role="link"
           target={newWindow ? '_blank' : null}
       >
         <If condition={loading}>{loadingIcon}</If>
@@ -126,12 +114,13 @@ const Button = (props: ButtonPropTypes) => {
       </a>
       <Else />
       <button
-          {...buttonAria}
+          {...ariaProps}
           {...dataProps}
           className={css}
           disabled={disabled}
           id={id}
           onClick={onClick}
+          role="button"
           type={htmlType}
           value={value}
       >

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

@@ -21,11 +21,12 @@ module Playbook
 
       def options
         {
-          id: id,
-          data: data,
+          aria: aria,
           class: classname,
+          data: data,
           disabled: disabled,
-          aria: aria,
+          id: id,
+          role: "button",
           type: type,
           value: value,
         }.compact
@@ -34,6 +35,7 @@ module Playbook
       def link_options
         options.merge(
           href: link,
+          role: "link",
           target: new_window ? "_blank" : "_self"
         )
       end

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb

@@ -1 +1 @@
-<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "button"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx

@@ -4,7 +4,7 @@ import { Button } from '../../'
 const ButtonAccessibility = (props) => (
   <div>
     <Button
-        aria={{ label: 'button' }}
+        aria={{ label: 'Go to Google' }}
         link="https://google.com"
         tag="a"
         text="Button with ARIA"

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "A Tag Button", tag: "a", link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", new_window: true, link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", disabled: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -4,12 +4,14 @@ import { Button } from '../../'
 const ButtonLink = (props) => (
   <div>
     <Button
+        aria={{ label: 'Link to Google' }}
         link="https://google.com"
         text="A Tag Button"
         {...props}
     />
     {' '}
     <Button
+        aria={{ label: 'Link to Google in new window' }}
         link="https://google.com"
         newWindow
         text="Open in New Window"
@@ -17,6 +19,7 @@ const ButtonLink = (props) => (
     />
     {' '}
     <Button
+        aria={{ label: 'Disabled link to Google' }}
         disabled
         link="https://google.com"
         text="A Tag Button Disabled"

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "Button Primary", loading: true }) %>
-<%= pb_rails("button", props: { text: "Button Primary", variant: "secondary", loading: true }) %>
-<%= pb_rails("button", props: { text: "Button Primary", variant: "link", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -4,12 +4,14 @@ import { Button } from '../../'
 const ButtonLoading = (props) => (
   <div>
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="Button Primary"
         {...props}
     />
     {' '}
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="Button Secondary"
         variant="secondary"
@@ -17,6 +19,7 @@ const ButtonLoading = (props) => (
     />
     {' '}
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="A Tag Button Disabled"
         variant="link"

data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js

@@ -15,9 +15,9 @@ export default function useZxcvbn(options) {
 
   useEffect(() => {
     if (confirmation) return
-
-    setResult(calculator(passphrase))
-    const str = result.score
+    const newResult = calculator(passphrase)
+    setResult(newResult)
+    const str = newResult.score
 
     const noPassphrase = passphrase.length <= 0
     const commonPassphrase = common || isPwned

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md

@@ -1,3 +1,3 @@
-Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/utilities" target="_blank">token colors</a>.
+Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">token colors</a>.
 
 Note: Only use category colors for categories. Do not mix it with product or status colors.

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.10.0.pre.alpha1"
+  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.10.0.pre.alpha1
+  version: 9.12.0.pre.text.addon
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-26 00:00:00.000000000 Z
+date: 2021-05-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -17,7 +17,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.4
+        version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -27,7 +27,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.4
+        version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -37,7 +37,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.4
+        version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -47,7 +47,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.4
+        version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -57,7 +57,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.4
+        version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -67,7 +67,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.4
+        version: 5.2.4.5
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -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
@@ -2138,8 +2143,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       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: []