playbook_ui 7.11.1 → 7.12.0

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>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

@@ -1,8 +1,11 @@
 import React from 'react'
 import { Timestamp } from '../../'
 
-const TimestampDefault = () => (
-  <Timestamp text="20 seconds ago" />
+const TimestampDefault = (props) => (
+  <Timestamp
+      text="20 seconds ago"
+      {...props}
+  />
 )
 
 export default TimestampDefault

data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx

@@ -1,30 +1,37 @@
 import React from 'react'
 import { Title } from '../../'
 
-const TitleLight = () => {
+const TitleLight = (props) => {
   return (
     <div>
-      <Title text="Default Title" />
+      <Title
+          text="Default Title"
+          {...props}
+      />
       <br />
       <Title
           size={4}
           tag="h4"
           text="Title 4"
+          {...props}
       />
       <Title
           size={3}
           tag="h3"
           text="Title 3"
+          {...props}
       />
       <Title
           size={2}
           tag="h2"
           text="Title 2"
+          {...props}
       />
       <Title
           size={1}
           tag="h1"
           text="Title 1"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Title } from '../../'
 
-const TitleVariants = () => {
+const TitleVariants = (props) => {
   return (
     <div>
       <Title
@@ -9,6 +9,7 @@ const TitleVariants = () => {
           tag="h4"
           text="Title 4 (link)"
           variant="link"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { TitleCount } from '../../'
 
-const TitleCountAlign = () => {
+const TitleCountAlign = (props) => {
   return (
     <>
       <TitleCount
           count={527}
           title="Remodeling Consultants"
+          {...props}
       />
 
       <br />
@@ -15,6 +16,7 @@ const TitleCountAlign = () => {
           align="center"
           count={527}
           title="Remodeling Consultants"
+          {...props}
       />
 
       <br />
@@ -23,6 +25,7 @@ const TitleCountAlign = () => {
           align="right"
           count={527}
           title="Remodeling Consultants"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { TitleCount } from '../../'
 
-const TitleCountDefault = () => {
+const TitleCountDefault = (props) => {
   return (
     <>
       <TitleCount
           count={35.78}
           title="Appointments"
+          {...props}
       />
 
       <br />
@@ -15,6 +16,7 @@ const TitleCountDefault = () => {
           count={7399}
           size="lg"
           title="Appointments"
+          {...props}
       />
 
       <br />
@@ -23,6 +25,7 @@ const TitleCountDefault = () => {
           count={-379503.372}
           size="lg"
           title="Appointments"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -1,23 +1,26 @@
 import React from 'react'
 import { TitleDetail } from '../../'
 
-const TitleDetailDefault = () => (
+const TitleDetailDefault = (props) => (
   <div>
     <TitleDetail
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
     <TitleDetail
         align="center"
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
     <TitleDetail
         align="right"
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
   </div>

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

@@ -100,7 +100,16 @@
       }
       &_value_container {
         flex-grow: 1;
+        position: relative;
       }
     }
+    .placeholder {
+      position: absolute;
+      margin-right: 2px;
+      margin-left: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      box-sizing: border-box;
+    }
   }
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -10,11 +10,12 @@ const options = [
   { label: 'Blue', value: '#0000FF' },
 ]
 
-const TypeaheadDefault = () => {
+const TypeaheadDefault = (props) => {
   return (
     <Typeahead
         label="Colors"
         options={options}
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -10,7 +10,7 @@ const options = [
   { label: 'Roofs', value: '#0000FF' },
 ]
 
-const TypeaheadWithPills = () => {
+const TypeaheadWithPills = (props) => {
   return (
     <>
       <Typeahead
@@ -18,6 +18,7 @@ const TypeaheadWithPills = () => {
           label="Colors"
           options={options}
           placeholder=""
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -45,7 +45,7 @@ const promiseOptions = (inputValue) =>
     }
   })
 
-const TypeaheadWithPillsAsync = () => {
+const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
   const handleOnChange = (value) => setUsers(value)
 
@@ -55,6 +55,7 @@ const TypeaheadWithPillsAsync = () => {
         <Caption
             marginBottom="xs"
             text="State (Users)"
+            {...props}
         />
         <For
             each="user"
@@ -66,6 +67,7 @@ const TypeaheadWithPillsAsync = () => {
               marginBottom="md"
               name={user.label}
               orientation="horizontal"
+              {...props}
           />
         </For>
       </If>
@@ -78,6 +80,7 @@ const TypeaheadWithPillsAsync = () => {
           loadOptions={promiseOptions}
           onChange={handleOnChange}
           placeholder="type the name of a Github user"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -46,7 +46,7 @@ const promiseOptions = (inputValue) =>
     }
   })
 
-const TypeaheadWithPillsAsyncUsers = () => {
+const TypeaheadWithPillsAsyncUsers = (props) => {
   const [users, setUsers] = useState([])
   const handleOnChange = (value) => setUsers(value)
 
@@ -67,6 +67,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
         <Caption
             marginBottom="xs"
             text="State (Users)"
+            {...props}
         />
         <For
             each="user"
@@ -79,6 +80,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
               marginBottom="md"
               name={user.label}
               orientation="horizontal"
+              {...props}
           />
         </For>
       </If>
@@ -90,6 +92,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { User } from '../../'
 
-const UserDefault = () => {
+const UserDefault = (props) => {
   return (
     <div className="pb--doc-demo-row">
 
@@ -13,6 +13,7 @@ const UserDefault = () => {
             orientation="vertical"
             size="lg"
             title="Remodeling Consultant"
+            {...props}
         />
       </div>
 
@@ -23,6 +24,7 @@ const UserDefault = () => {
             name="Anna Black"
             orientation="horizontal"
             title="Remodeling Consultant"
+            {...props}
         />
       </div>
 
@@ -32,6 +34,7 @@ const UserDefault = () => {
             avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
             name="Anna Black"
             orientation="horizontal"
+            {...props}
         />
 
         <br />
@@ -41,6 +44,7 @@ const UserDefault = () => {
             avatar
             name="Anna Black"
             orientation="horizontal"
+            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { User } from '../../'
 
-const UserDefault = () => {
+const UserDefault = (props) => {
   return (
     <div className="pb--doc-demo-row">
       <User
@@ -9,6 +9,7 @@ const UserDefault = () => {
           name="Anna Black"
           size="sm"
           title="Remodeling Consultant"
+          {...props}
       />
 
       <User
@@ -16,6 +17,7 @@ const UserDefault = () => {
           name="Anna Black"
           size="md"
           title="Remodeling Consultant"
+          {...props}
       />
 
       <User
@@ -23,6 +25,7 @@ const UserDefault = () => {
           name="Anna Black"
           size="lg"
           title="Remodeling Consultant"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { User } from '../../'
 
-const UserTextOnly = () => {
+const UserTextOnly = (props) => {
   return (
     <div className="pb--doc-demo-row">
       <User
@@ -10,12 +10,14 @@ const UserTextOnly = () => {
           orientation="horizontal"
           size="lg"
           title="Remodeling Consultant"
+          {...props}
       />
       <User
           align="left"
           name="Anna Black"
           orientation="horizontal"
           title="Remodeling Consultant"
+          {...props}
       />
     </div>
   )