playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.html.erb

@@ -0,0 +1,23 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "dollar-sign", 
+    input_id: 1, 
+    checked: true, 
+    text: "US Dollar" 
+  }) %>
+  
+  <%= pb_rails("selectable_icon", props: {
+    icon: "euro-sign", 
+    input_id: 2, 
+    text: "Euro" 
+  }) %>
+  
+  <%= pb_rails("selectable_icon", props: {
+    icon: "yen-sign", 
+    input_id: 3, 
+    disabled: true, 
+    text: "Yen" 
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import SelectableIcon from '../_selectable_icon'
+
+const SelectableIconDefault = () => {
+  const [ checkSelected, toggleSelected ] = useState(true)
+  const [ checkUnselected, toggleUnselected ] = useState(false)
+  const [ checkDisabled, toggleDisabled ] = useState(false)
+
+  return (
+
+    <div className="pb--doc-demo-row">
+      <SelectableIcon
+          checked={checkSelected}
+          icon="dollar-sign"
+          inputId={10}
+          onChange={() => toggleSelected(!checkSelected)}
+          text="US Dollar"
+      />
+
+      <SelectableIcon
+          checked={checkUnselected}
+          icon="euro-sign"
+          inputId={11}
+          onChange={() => toggleUnselected(!checkUnselected)}
+          text="Euro"
+      />
+
+      <SelectableIcon
+          checked={checkDisabled}
+          disabled
+          icon="yen-sign"
+          inputId={12}
+          onChange={() => toggleDisabled(!checkDisabled)}
+          text="Yen"
+      />
+    </div>
+  )
+}
+
+export default SelectableIconDefault

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb

@@ -0,0 +1,15 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "dollar-sign",
+    input_id: "options-id",
+    checked: true,
+    text: "US Dollar",
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.html.erb

@@ -0,0 +1,27 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "cassette-tape",
+    input_id: 4,
+    multi: false,
+    name: "select",
+    text: "Cassette"
+  }) %>
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "compact-disc",
+    input_id: 5,
+    multi: false,
+    name: "select",
+    text: "CD"
+  }) %>
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "album-collection",
+    input_id: 6,
+    multi: false,
+    name: "select",
+    text: "Vinyl"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+
+import SelectableIcon from '../_selectable_icon'
+
+const SelectableIconSingleSelect = () => {
+  const [ selectedFormat, toggleFormat ] = useState(null)
+
+  return (
+
+    <div className="pb--doc-demo-row">
+      <SelectableIcon
+          checked={selectedFormat === 'Cassette'}
+          icon="cassette-tape"
+          inputId={13}
+          multi={false}
+          name="music-format"
+          onChange={() => toggleFormat('Cassette')}
+          text="Cassette"
+          value="Cassette"
+      />
+
+      <SelectableIcon
+          checked={selectedFormat === 'CD'}
+          icon="compact-disc"
+          inputId={14}
+          multi={false}
+          name="music-format"
+          onChange={() => toggleFormat('CD')}
+          text="CD"
+          value="CD"
+      />
+
+      <SelectableIcon
+          checked={selectedFormat === 'Vinyl'}
+          icon="album-collection"
+          inputId={15}
+          multi={false}
+          name="music-format"
+          onChange={() => toggleFormat('Vinyl')}
+          text="Vinyl"
+          value="Vinyl"
+      />
+    </div>
+  )
+}
+
+export default SelectableIconSingleSelect

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

@@ -0,0 +1,11 @@
+examples:
+
+  rails:
+  - selectable_icon_default: Default
+  - selectable_icon_single_select: Single Select
+  - selectable_icon_options: With Options
+
+
+  react:
+  - selectable_icon_default: Default
+  - selectable_icon_single_select: Single Select

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

@@ -0,0 +1,2 @@
+export { default as SelectableIconDefault } from './_selectable_icon_default.jsx'
+export { default as SelectableIconSingleSelect } from './_selectable_icon_single_select.jsx'

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("selectable_list",
+        props: {
+          variant: "checkbox",
+          items: [
+            { text: "Mild",
+              input_options: {
+                value: "1",
+                name: "checkbox-name-1",
+              }
+            },
+            { text: "Medium",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "checkbox-name-2",
+              }
+            },
+            { text: "Hot",
+              input_options: {
+                value: "3",
+                name: "checkbox-name-3",
+              }
+            }
+          ]
+        }
+    )
+%>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { SelectableList } from '../..'
+
+const SelectableListDefault = (props) => {
+  return (
+    <div>
+      <SelectableList variant="checkbox">
+        <SelectableList.Item
+            label="Mild"
+            name="checkbox-name-1"
+            value="1"
+            {...props}
+        />
+        <SelectableList.Item
+            checked
+            label="Medium"
+            name="checkbox-name-2"
+            value="2"
+            {...props}
+        />
+        <SelectableList.Item
+            label="Hot"
+            name="checkbox-name-3"
+            value="3"
+            {...props}
+        />
+      </SelectableList>
+    </div>
+  )
+}
+
+export default SelectableListDefault

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("selectable_list",
+        props: {
+          variant: "radio",
+          items: [
+            { text: "Small",
+              input_options: {
+                value: "1",
+                name: "radio-name",
+              }
+            },
+            { text: "Medium",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "radio-name",
+              }
+            },
+            { text: "Large",
+              input_options: {
+                value: "3",
+                name: "radio-name",
+              }
+            }
+          ]
+        }
+    )
+%>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { SelectableList } from '../..'
+
+const SelectableListDefault = (props) => {
+  return (
+    <div>
+      <SelectableList variant="radio">
+        <SelectableList.Item
+            label="Small"
+            name="radio"
+            value="1"
+            {...props}
+        />
+        <SelectableList.Item
+            defaultChecked
+            label="Medium"
+            name="radio"
+            value="2"
+            {...props}
+        />
+        <SelectableList.Item
+            label="Large"
+            name="radio"
+            value="3"
+            {...props}
+        />
+      </SelectableList>
+    </div>
+  )
+}
+
+export default SelectableListDefault

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

@@ -0,0 +1,12 @@
+examples:
+
+  rails:
+  - selectable_list_checkbox: Default
+  - selectable_list_radio: Radio variant
+
+
+  react:
+  - selectable_list_checkbox: Default
+  - selectable_list_radio: Radio variant
+
+

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

@@ -0,0 +1,2 @@
+export { default as SelectableListCheckbox } from './_selectable_list_checkbox.jsx'
+export { default as SelectableListRadio } from './_selectable_list_radio.jsx'

data/app/pb_kits/playbook/pb_source/docs/_description.md

@@ -0,0 +1 @@
+General use is to describe the discovery of businesses, customers, etc. This kit can also be used for other purposes as well.

data/app/pb_kits/playbook/pb_source/docs/_source_default.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("source", props: {
+  source: "BJ's Johnston-208",
+  type: "retail"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Referral-phrg",
+  type: "inbound"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "BJ's Future CB",
+  type: "user",
+  user: {
+    name: "Anna Black",
+    image: {
+      url: "https://randomuser.me/api/portraits/women/44.jpg"
+    },
+    user_id: "48582"
+  }
+}) %>

data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import Source from '../_source'
+
+const SourceDefault = (props) => (
+  <>
+    <Source
+        source="BJ's Johnston-208"
+        type="retail"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Referral-phrg"
+        type="inbound"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="BJ's Future CB"
+        type="user"
+        user={
+              { name: 'Anna Black',
+                image: {
+                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
+                },
+                userId: '48582',
+              }
+            }
+        {...props}
+    />
+  </>
+)
+
+export default SourceDefault

data/app/pb_kits/playbook/pb_source/docs/_source_noicon.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("source", props: {
+  source: "BJ's Johnston-208",
+  type: "retail",
+  hide_icon: true
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Referral-phrg",
+  type: "inbound",
+  hide_icon: true
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "BJ's Future CB",
+  type: "user",
+  user: {
+    name: "Anna Black",
+    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
+    user_id: "48582"
+  },
+  hide_icon: true
+}) %>

data/app/pb_kits/playbook/pb_source/docs/_source_noicon.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import Source from '../_source'
+
+const SourceNoicon = (props) => (
+  <>
+    <Source
+        hideIcon
+        source="BJ's Johnston-208"
+        type="retail"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        hideIcon
+        source="Referral-phrg"
+        type="inbound"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        hideIcon
+        source="BJ's Future CB"
+        type="user"
+        user={
+              { name: 'Anna Black',
+                image: {
+                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
+                  },
+                userId: '48582',
+                }
+              }
+        {...props}
+    />
+  </>
+)
+
+export default SourceNoicon

data/app/pb_kits/playbook/pb_source/docs/_source_types.html.erb

@@ -0,0 +1,63 @@
+<%= pb_rails("source", props: {
+  source: "BJ's Johnston-208",
+  type: "retail"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Referral-phrg",
+  type: "inbound"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "B.B.B. Outbound",
+  type: "outbound"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Contractor.com",
+  type: "prospecting"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Beards, Beers and Brats",
+  type: "events"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "BJ's Johnston-208",
+  type: "referral"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Employee Referral",
+  type: "referral",
+  user: {
+    name: "Anna Black",
+    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
+    user_id: "48582"
+  }
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "BJ's Future CB",
+  type: "user",
+  user: {
+    name: "Anna Black",
+    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
+    user_id: "48582"
+  }
+}) %>

data/app/pb_kits/playbook/pb_source/docs/_source_types.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+
+import Source from '../_source'
+
+const SourceTypes = (props) => (
+  <>
+    <Source
+        source="BJ's Johnston-208"
+        type="retail"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Referral-phrg"
+        type="inbound"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="B.B.B. Outbound"
+        type="outbound"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Contractor.com"
+        type="prospecting"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Beards, Beers and Brats"
+        type="events"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="BJ's Johnston-208"
+        type="referral"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Employee Referral"
+        type="referral"
+        user={
+              { name: 'Anna Black',
+                image: {
+                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
+                },
+                userId: '48582',
+              }
+            }
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="BJ's Future CB"
+        type="user"
+        user={
+              { name: 'Anna Black',
+                image: {
+                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
+                },
+                userId: '48582',
+              }
+            }
+        {...props}
+    />
+  </>
+)
+
+export default SourceTypes

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

@@ -0,0 +1,12 @@
+examples:
+
+  rails:
+  - source_default: Default
+  - source_noicon: Hide Icon
+  - source_types: Source Types
+
+
+  react:
+  - source_default: Default
+  - source_noicon: Hide Icon
+  - source_types: Source Types

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

@@ -0,0 +1,5 @@
+export { default as SourceDefault } from './_source_default.jsx'
+
+export { default as SourceNoicon } from './_source_noicon.jsx'
+
+export { default as SourceTypes } from './_source_types.jsx'

data/app/pb_kits/playbook/pb_star_rating/docs/_description.md

@@ -0,0 +1 @@
+A component to view other people’s opinions and experiences. Use when you want to show evaluation or a quick quantitative rating. Most effective when paired with reviews.

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("star_rating") %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 3 }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 1.5 }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 5 }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import StarRating from '../_star_rating'
+
+const StarRatingDefault = (props) => (
+  <>
+    <StarRating />
+
+    <br />
+
+    <StarRating
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        rating={1.5}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        rating={5}
+        {...props}
+    />
+  </>
+)
+
+export default StarRatingDefault

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("star_rating", props: { rating: 3.5, hide_rating: true }) %>