playbook_ui 7.11.1 → 7.14.0

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Textarea } from '../../'
 
-const TextareaCustom = () => {
+const TextareaCustom = (props) => {
   return (
     <div>
       <Textarea label="Label">
@@ -9,6 +9,7 @@ const TextareaCustom = () => {
             className="my_custom_class"
             name="custom_textarea"
             rows={4}
+            {...props}
         >
           {'Content goes here.'}
         </textarea>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { Textarea } from '../../'
 
-const TextareaDefault = () => {
+const TextareaDefault = (props) => {
   return (
     <div>
       <Textarea
           label="Label"
           rows={4}
+          {...props}
       />
 
       <br />
@@ -14,6 +15,7 @@ const TextareaDefault = () => {
       <Textarea
           label="Label"
           placeholder="Placeholder text"
+          {...props}
       />
 
       <br />
@@ -23,6 +25,7 @@ const TextareaDefault = () => {
           name="comment"
           placeholder="Placeholder text"
           value="Default value text"
+          {...props}
       />
 
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Textarea } from '../..'
 
-const TextareaError = () => {
+const TextareaError = (props) => {
   return (
     <div>
       <Textarea
@@ -10,6 +10,7 @@ const TextareaError = () => {
           name="comment"
           placeholder="Placeholder text"
           value="Default value text"
+          {...props}
       />
 
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Textarea } from '../../'
 
-const TextareaResize = () => {
+const TextareaResize = (props) => {
   return (
     <div>
       <Textarea
           label="vertical"
           placeholder="Resize Vertical"
           resize="vertical"
+          {...props}
       />
 
       <br />
@@ -16,6 +17,7 @@ const TextareaResize = () => {
           label="both"
           placeholder="Resize Both"
           resize="both"
+          {...props}
       />
 
       <br />
@@ -24,6 +26,7 @@ const TextareaResize = () => {
           label="horizontal"
           placeholder="Resize Horizontal"
           resize="horizontal"
+          {...props}
       />
 
     </div>

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

@@ -5,12 +5,11 @@ examples:
   - textarea_custom: Custom Textarea Input
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
-
-
-
+  - textarea_character_counter: Character Counter
 
   react:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
+  - textarea_character_counter: Character Counter

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

@@ -2,3 +2,4 @@ export { default as TextareaDefault } from './_textarea_default.jsx'
 export { default as TextareaResize } from './_textarea_resize.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'
+export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -19,11 +19,18 @@ module Playbook
       prop :rows, type: Playbook::Props::Number,
             default: 4
       prop :value
+      prop :character_count
+      prop :onkeyup
+      prop :max_characters
 
       def classname
         generate_classname("pb_textarea_kit") + error_class + resize_class
       end
 
+      def character_counter
+        max_characters && character_count ? "#{character_count} / #{max_characters}" : character_count
+      end
+
     private
 
       def error_class

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import { TimeRangeInline } from '../../'
 
-const TimeRangeInlineDefault = () => (
+const TimeRangeInlineDefault = (props) => (
   <div>
     <TimeRangeInline
         endTime="2012-08-02T17:49:29Z"
         size="xs"
         startTime="2012-08-02T15:49:29Z"
+        {...props}
     />
     <br />
     <TimeRangeInline
         endTime="2012-08-02T17:49:29Z"
         size="sm"
         startTime="2012-08-02T15:49:29Z"
+        {...props}
     />
     <br />
     <br />
@@ -22,6 +24,7 @@ const TimeRangeInlineDefault = () => (
         size="xs"
         startTime="2012-08-02T15:49:29Z"
         timezone="true"
+        {...props}
     />
     <br />
     <TimeRangeInline
@@ -30,6 +33,7 @@ const TimeRangeInlineDefault = () => (
         size="sm"
         startTime="2012-08-02T15:49:29Z"
         timezone="true"
+        {...props}
     />
     <br />
     <br />
@@ -39,6 +43,7 @@ const TimeRangeInlineDefault = () => (
         icon="true"
         size="xs"
         startTime="2012-08-02T15:49:29Z"
+        {...props}
     />
     <br />
     <TimeRangeInline
@@ -47,6 +52,7 @@ const TimeRangeInlineDefault = () => (
         icon="true"
         size="sm"
         startTime="2012-08-02T15:49:29Z"
+        {...props}
     />
     <br />
     <br />
@@ -57,6 +63,7 @@ const TimeRangeInlineDefault = () => (
         size="xs"
         startTime="2012-08-02T15:49:29Z"
         timezone="true"
+        {...props}
     />
     <br />
     <TimeRangeInline
@@ -66,6 +73,7 @@ const TimeRangeInlineDefault = () => (
         size="sm"
         startTime="2012-08-02T15:49:29Z"
         timezone="true"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx

@@ -2,43 +2,51 @@ import React from 'react'
 import Timeline from '../_timeline.jsx'
 import { Body, TitleDetail } from '../../'
 
-const TimelineDefault = () => (
+const TimelineDefault = (props) => (
   <div>
     <Timeline>
       <Timeline.Item
           icon="user"
           iconColor="royal"
+          {...props}
       >
         <Body
             color="light"
             text="Conversation started"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="check"
           iconColor="teal"
+          {...props}
       >
         <Body
             color="light"
             text="Trip #12422"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="credit-card"
           iconColor="red"
+          {...props}
       >
         <Body
             color="light"
             text="Refund issue #12422"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="smile"
           iconColor="green"
+          {...props}
       >
         <Body
             color="light"
             text="Conversation resolved"
+            {...props}
         />
       </Timeline.Item>
     </Timeline>
@@ -51,19 +59,23 @@ const TimelineDefault = () => (
           icon="user"
           iconColor="royal"
           lineStyle="dotted"
+          {...props}
       >
         <TitleDetail
             detail="37-27 74th Street"
             title="Jackson heights"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="check"
           iconColor="teal"
+          {...props}
       >
         <TitleDetail
             detail="81 Gate St Brooklyn"
             title="Greenpoint"
+            {...props}
         />
       </Timeline.Item>
     </Timeline>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx

@@ -2,43 +2,51 @@ import React from 'react'
 import Timeline from '../_timeline.jsx'
 import { Body, TitleDetail } from '../../'
 
-const TimelineVertical = () => (
+const TimelineVertical = (props) => (
   <div>
     <Timeline orientation="vertical">
       <Timeline.Item
           icon="user"
           iconColor="royal"
+          {...props}
       >
         <Body
             color="light"
             text="Conversation started"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="check"
           iconColor="teal"
+          {...props}
       >
         <Body
             color="light"
             text="Trip #12422"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="credit-card"
           iconColor="red"
+          {...props}
       >
         <Body
             color="light"
             text="Refund issue #12422"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="smile"
           iconColor="green"
+          {...props}
       >
         <Body
             color="light"
             text="Conversation resolved"
+            {...props}
         />
       </Timeline.Item>
     </Timeline>
@@ -51,19 +59,23 @@ const TimelineVertical = () => (
           icon="user"
           iconColor="royal"
           lineStyle="dotted"
+          {...props}
       >
         <TitleDetail
             detail="37-27 74th Street"
-            title="Jackson heights"
+            title="Jackson Heights"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="check"
           iconColor="teal"
+          {...props}
       >
         <TitleDetail
             detail="81 Gate St Brooklyn"
             title="Greenpoint"
+            {...props}
         />
       </Timeline.Item>
     </Timeline>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx

@@ -2,40 +2,47 @@ import React from 'react'
 import Timeline from '../_timeline.jsx'
 import { TitleDetail } from '../../'
 
-const TimelineWithDate = () => (
+const TimelineWithDate = (props) => (
   <div>
     <Timeline
         orientation="horizontal"
         showDate
+        {...props}
     >
       <Timeline.Item
           date={new Date()}
           icon="user"
           iconColor="royal"
+          {...props}
       >
         <TitleDetail
             detail="37-27 74th Street"
-            title="Jackson heights"
+            title="Jackson Heights"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="check"
           iconColor="teal"
           lineStyle="dotted"
+          {...props}
       >
         <TitleDetail
             detail="81 Gate St Brooklyn"
             title="Greenpoint"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           date={new Date().setDate(new Date().getDate() + 1)}
           icon="map-marker-alt"
           iconColor="purple"
+          {...props}
       >
         <TitleDetail
             detail="72 E St Astoria"
             title="Society Hill"
+            {...props}
         />
       </Timeline.Item>
     </Timeline>
@@ -47,35 +54,42 @@ const TimelineWithDate = () => (
     <Timeline
         orientation="vertical"
         showDate
+        {...props}
     >
       <Timeline.Item
           date={new Date()}
           icon="user"
           iconColor="royal"
+          {...props}
       >
         <TitleDetail
             detail="37-27 74th Street"
-            title="Jackson heights"
+            title="Jackson Heights"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           icon="check"
           iconColor="teal"
           lineStyle="dotted"
+          {...props}
       >
         <TitleDetail
             detail="81 Gate St Brooklyn"
             title="Greenpoint"
+            {...props}
         />
       </Timeline.Item>
       <Timeline.Item
           date={new Date().setDate(new Date().getDate() + 1)}
           icon="map-marker-alt"
           iconColor="purple"
+          {...props}
       >
         <TitleDetail
             detail="72 E St Astoria"
             title="Society Hill"
+            {...props}
         />
       </Timeline.Item>
     </Timeline>