playbook_ui_docs 12.37.0.pre.alpha.svgiconmethods1064 → 12.38.0.pre.alpha.PBNTR78selectkitmultipleprop1094

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 320dcb176e88572a505020f6bf955296b12c6022f85165cbeed887d080537ec1
-  data.tar.gz: e6660216f9587db018ed8bbfabed4034d2a25e31860df48b247fd85a2715c6c8
+  metadata.gz: f12c91c026a23ed3fa8df39512011d79eb4807bfb313e0e1db224123042589ea
+  data.tar.gz: 8ba1588e199adbb9de6e86683473fded972a444d66096caa43c4585bb30004a4
 SHA512:
-  metadata.gz: 24047b8470b70e24cc0ae9a1b019a469d6fc5106616bad904308daabe52a4be068822ae61f5fd3bcf18340c3060d753e2143fa0ac9111cacf2aa2b5d5ef00afe
-  data.tar.gz: 7ae61482f5fde0baa7326febb425392ea4b811c772d33d66f5dced9ad80fed507eb333f8fec42f2649cc5de640c183730371befa0b59f090e04f0cb19744ef4f
+  metadata.gz: 773c2337e6335e5c4798b1e01e40539e055acba614f074d9105c5a298f0a5c50e2e83aa3f20a2787d616c547cc85013409608d854e2ffeca51910d6cf6e29a49
+  data.tar.gz: 864e07f65b4ea5faa0ab48362381d1a14e1417c377c0b1b182c90056d300c54f30e49acae16a9f29413a294342cd47939ec6caac5b3df3c6f52b457a56c498c7

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
       <FormattedDate
           dayOfWeek
           icon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
           alignment="center"
           dayOfWeek
           icon
-          value="2020-12-25"
+          value={new Date('25 Dec 2020')}
           {...props}
       />
 

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from '../../'
+import { Date as FormattedDate, Caption, Title } from '../../'
 
 const DateDefault = (props) => {
   return (
@@ -12,9 +12,20 @@ const DateDefault = (props) => {
 
       <br />
 
+      <div style={{display: "flex", columnGap: 4}}>
+        <FormattedDate
+            size="sm"
+            value={"2012-08-03"}
+            {...props}
+        />
+        <Caption>{"(Hyphenated Date)"}</Caption>
+      </div>
+
+      <br />
+
       <FormattedDate
           size="sm"
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -23,7 +34,7 @@ const DateDefault = (props) => {
       <FormattedDate
           showDayOfWeek
           size="sm"
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
 
@@ -37,8 +48,21 @@ const DateDefault = (props) => {
 
       <br />
 
+      <div style={{display: "flex", columnGap: 4}}>
+        <FormattedDate
+            value={"2012-08-03"}
+            {...props}
+        />
+        <Title
+            size={4}
+            text={"(Hyphenated Date)"}
+        />
+      </div>
+
+      <br />
+
       <FormattedDate
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -46,7 +70,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
     </>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
       <Title size={1}>
         <FormattedDate
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
             showDayOfWeek
             showIcon
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -7,7 +7,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showIcon
           size="sm"
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
       <br />
 
       <FormattedDate
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showDayOfWeek
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb

@@ -1,4 +1,3 @@
 <p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
 <br/>
 <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
-

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -14,5 +14,3 @@
     parent element's css color properties."
   } ) %>
 </div>
-
-

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

@@ -1,15 +1,14 @@
 examples:
   rails:
-  # - icon_default: Icon Default
-  # - icon_rotate: Icon Rotate
-  # - icon_flip: Icon Flip
-  # - icon_animate: Icon Animation
-  # - icon_pull: Icon Pull
-  # - icon_border: Icon Border
-  # - icon_sizes: Icon Sizes
-  # - icon_custom: Icon Custom
-  # - icon_fa_kit: Icon with FontAwesome Kit
-  - icon_svg: Icon SVG
+  - icon_default: Icon Default
+  - icon_rotate: Icon Rotate
+  - icon_flip: Icon Flip
+  - icon_animate: Icon Animation
+  - icon_pull: Icon Pull
+  - icon_border: Icon Border
+  - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
 
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("select", props: {
+  attributes: {
+    data: { options: "data_attribute" },
+  },
+  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_attributes.md

@@ -0,0 +1 @@
+Inspect the element and notice the data-attribute being added to the `<select>` element

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb

@@ -0,0 +1,36 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  multiple: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+    {
+      value: "4",
+      value_text: "Sushi",
+    },
+    {
+      value: "4",
+      value_text: "Chinese",
+    },
+    {
+      value: "4",
+      value_text: "Hot Dogs",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectMultiple = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+    {
+      value: '3',
+      text: 'BBQ',
+    },
+    {
+      value: '3',
+      text: 'Sushi',
+    },
+    {
+      value: '3',
+      text: 'Chinese',
+    },
+    {
+      value: '3',
+      text: 'Hot Dogs',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          label="Favorite Food"
+          multiple
+          name="food"
+          options={options}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectMultiple

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md

@@ -0,0 +1 @@
+We recommend using a typeahead for better UX

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

@@ -11,6 +11,8 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
+  - select_attributes: Select W/ Attributes
+  - select_multiple: Select Multiple
 
 
 
@@ -25,3 +27,4 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
+  - select_multiple: Select Multiple

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

@@ -8,3 +8,4 @@ export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
+export { default as SelectMultiple } from './_select_multiple.jsx'