RubyGems - playbook_ui - Versions diffs - 3.4.0 → 3.5.0 - Mend

playbook_ui 3.4.0 → 3.5.0

Files changed (80) hide show

data/app/pb_kits/playbook/pb_select/docs/_select_dark_error.jsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Body, Select } from '../..'
+const SelectDarkError = () => {
+  return (
+    <div>
+      <Select
+          dark
+          error="Please make a valid selection"
+          label="Favorite Food"
+          name="food"
+          options={[
+          {
+            value: '1',
+            valueText: 'Burgers',
+          },
+          {
+            value: '2',
+            selected: true,
+            valueText: 'Pizza',
+          },
+          {
+            value: '3',
+            valueText: 'Tacos',
+          },
+        ]}
+      />
+      <Body
+          dark
+          error="Please make a valid selection"
+          status="negative"
+      />
+    </div>
+  )
+}
+export default SelectDarkError

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  error: "Please make a valid selection",
+  label: "Favorite Food",
+  name: "food",
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx ADDED Viewed

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Body, Select } from '../..'
+const SelectError = () => {
+  return (
+    <div>
+      <Select
+          error="Please make a valid selection"
+          label="Favorite Food"
+          name="food"
+          options={[
+          {
+            value: '1',
+            valueText: 'Burgers',
+          },
+          {
+            value: '2',
+            selected: true,
+            valueText: 'Pizza',
+          },
+          {
+            value: '3',
+            valueText: 'Tacos',
+          },
+        ]}
+      />
+      <Body
+          error="Please make a valid selection"
+          status="negative"
+      />
+    </div>
+  )
+}
+export default SelectError

data/app/pb_kits/playbook/pb_select/docs/example.yml CHANGED Viewed

@@ -9,6 +9,8 @@ examples:
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
   - select_dark: Dark Select
+  - select_error: Select w/ Error
+  - select_dark_error: Select Dark w/ Error
   react:
@@ -20,3 +22,5 @@ examples:
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
   - select_dark: Dark Select
+  - select_error: Select w/ Error
+  - select_dark_error: Select Dark w/ Error

data/app/pb_kits/playbook/pb_select/docs/index.js CHANGED Viewed

@@ -6,3 +6,5 @@ export { default as SelectDisabled } from './_select_disabled.jsx'
 export { default as SelectRequired } from './_select_required.jsx'
 export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
+export { default as SelectError } from './_select_error.jsx'
+export { default as SelectDarkError } from './_select_dark_error.jsx'

data/app/pb_kits/playbook/pb_select/select.rb CHANGED Viewed

@@ -11,26 +11,26 @@ module Playbook
       partial "pb_select/select"
-      prop :label
-      prop :required, type: Playbook::Props::Boolean, default: false
+      prop :blank_selection
+      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :disabled, type: Playbook::Props::Boolean, default: false
+      prop :error
+      prop :include_blank
+      prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
       prop :onchange
-      prop :include_blank
-      prop :blank_selection
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
-      prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :required, type: Playbook::Props::Boolean, default: false
       def classname
-        generate_classname("pb_select", dark_class)
+        generate_classname("pb_select", dark_class) + error_class
       end
       def options_to_array
         options.map { |option| [option[:value_text] || option[:value], option[:value]] }
       end
       def selected
         selections = options.map { |option| option[:value] if option[:selected] == true }.compact
         if selections.empty?
@@ -49,12 +49,15 @@ module Playbook
         end
       end
-      private
+    private
-        def dark_class
-          dark ? "dark" : nil
-        end
+      def error_class
+        error ? " error" : ""
+      end
+      def dark_class
+        dark ? "dark" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb CHANGED Viewed

@@ -6,7 +6,10 @@
   <%= content_tag(:div,
       class: "text_input_wrapper") do %>
     <% if object.children.present? %>
-      <% capture(&object.children) %>
+      <%= capture(&object.children) %>
+      <% if object.error %>
+        <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <% end %>
     <% else %>
       <%= tag(:input,
           id: object.id,
@@ -16,6 +19,9 @@
           placeholder: object.placeholder,
           type: object.type,
           value: object.value) %>
+      <% if object.error %>
+        <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -1,23 +1,28 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import { Caption } from '../'
+import {
+  Body,
+  Caption,
+} from '../'
 type TextInputProps = {
-  className: string,
+  className: String,
   dark: boolean,
-  name: string,
-  label: string,
-  onChange: (string) => void,
-  placeholder: string,
-  type: string,
-  value: string | number,
+  error?: String,
+  name: String,
+  label: String,
+  onChange: (String) => void,
+  placeholder: String,
+  type: String,
+  value: String | number,
   children: Node,
 }
 const TextInput = ({
   className,
-  dark,
+  dark = false,
+  error,
   name,
   label,
   onChange = () => {},
@@ -29,6 +34,7 @@ const TextInput = ({
   const css = classnames([
     `pb_text_input_kit${dark === true ? '_dark' : ''}`,
     className,
+    error ? 'error' : null,
   ])
   return (
@@ -50,6 +56,13 @@ const TextInput = ({
               type={type}
               value={value}
           />
+          <If condition={error}>
+            <Body
+                dark={dark}
+                status="negative"
+                text={error}
+            />
+          </If>
         </If>
       </div>
     </div>

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

@@ -42,5 +42,24 @@
         @include pb_textarea_focus_dark;
       }
     }
+    &.error {
+      .text_input_wrapper {
+        > input:first-child {
+          border-color: $error_dark;
+        }
+      }
+    }
+  }
+  &.error {
+    .text_input_wrapper {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+      > input:first-child {
+        border-color: $error;
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark_error.html.erb ADDED Viewed

@@ -0,0 +1,14 @@
+<%= pb_rails("text_input", props: {
+  dark: true,
+  error: "Please enter a valid email address",
+  label: "Email Address",
+  type: "email",
+  placeholder: "Enter email address"
+}) %>
+<%= pb_rails("text_input", props: {
+  dark: true,
+  label: "Confirm Email Address",
+  type: "email",
+  placeholder: "Confirm email address"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark_error.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from 'react'
+import {
+  TextInput,
+} from '../..'
+const TextInputDarkError = () => (
+  <div>
+    <TextInput
+        dark
+        error="Please enter a valid email address"
+        label="Email Address"
+        placeholder="Enter email address"
+        type="email"
+    />
+  </div>
+)
+export default TextInputDarkError

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <%= pb_rails("text_input", props: { error: "Please enter a valid email address", label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
2	+ <%= pb_rails("text_input", props: { label: "Confirm Email Address", type: "email", placeholder: "Confirm email address" }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react'
+import {
+  TextInput,
+} from '../..'
+const TextInputError = () => (
+  <div>
+    <TextInput
+        error="Please enter a valid email address"
+        label="Email Address"
+        placeholder="Enter email address"
+        type="email"
+    />
+  </div>
+)
+export default TextInputError

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

@@ -2,9 +2,13 @@ examples:
   rails:
   - text_input_default: Default
   - text_input_dark: Dark
+  - text_input_error: With Error
+  - text_input_dark_error: Dark With Error
   - text_input_custom: Custom
   react:
   - text_input_default: Default
   - text_input_dark: Dark
+  - text_input_error: With Error
+  - text_input_dark_error: Dark With Error
   - text_input_custom: Custom

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

@@ -1,3 +1,5 @@
 export { default as TextInputDefault } from './_text_input_default.jsx'
 export { default as TextInputDark } from './_text_input_dark.jsx'
+export { default as TextInputDarkError } from './_text_input_dark_error.jsx'
 export { default as TextInputCustom } from './_text_input_custom.jsx'
+export { default as TextInputError } from './_text_input_error.jsx'

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

@@ -9,17 +9,26 @@ module Playbook
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
+      prop :error
       prop :label
       prop :name
       prop :placeholder
-      prop :value
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
       prop :type, default: "text"
+      prop :value
       def classname
-        generate_classname("pb_text_input_kit", dark_class)
+        generate_classname("pb_text_input_kit", dark_class) + error_class
       end
-      private
+    private
+      def error_class
+        error ? " error" : ""
+      end
       def dark_class
         dark ? "dark" : nil

data/app/pb_kits/playbook/pb_textarea/_textarea.html.erb CHANGED Viewed

@@ -7,6 +7,9 @@
   <% end %>
   <% if object.children %>
     <%= capture(&object.children) %>
+    <% if object.error %>
+      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+    <% end %>
   <% else %>
     <%= text_area(
         :object,
@@ -16,5 +19,8 @@
         :placeholder => object.placeholder,
         :rows => object.rows,
         :value => object.value )%>
+    <% if object.error %>
+      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -2,13 +2,14 @@
 import React from 'react'
 import classnames from 'classnames'
-import { Caption } from '../'
+import { Body, Caption } from '../'
 import { type InputCallback } from '../types.js'
 type TextareaProps = {
   className?: String,
   children?: Array<React.ReactChild>,
   data?: String,
+  error?: String,
   id?: String,
   object?: String,
   method?: String,
@@ -24,18 +25,20 @@ type TextareaProps = {
 const Textarea = ({
   className,
   children,
+  dark = false,
+  error,
   label,
+  name,
   onChange = () => {},
   placeholder,
-  value,
-  dark = false,
   rows = 4,
-  name,
+  value,
 }: TextareaProps) => {
   const textareaClass = `pb_textarea_kit${dark ? '_dark' : ''}`
+  const errorClass = error ? 'error' : null
   return (
-    <div className={classnames(textareaClass, className)}>
+    <div className={classnames(textareaClass, className, errorClass)}>
       <Caption
           dark={dark}
           text={label}
@@ -51,6 +54,13 @@ const Textarea = ({
             rows={rows}
             value={value}
         />
+        <If condition={error}>
+          <Body
+              dark={dark}
+              status="negative"
+              text={error}
+          />
+        </If>
       </If>
     </div>
   )