playbook_ui 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.jsx

@@ -1,44 +0,0 @@
-import React, { useState } from 'react'
-
-import SelectableCardIcon from '../_selectable_card_icon'
-
-const SelectableCardIconSingleSelect = (props) => {
-  const [selectedFormat, toggleFormat] = useState(null)
-
-  return (
-    <div className="pb--doc-demo-row">
-      <SelectableCardIcon
-          checked={selectedFormat === 'car'}
-          icon="car"
-          inputId={7}
-          name="select"
-          onChange={() => toggleFormat('car')}
-          titleText="Car"
-          value="car"
-          {...props}
-      />
-      <SelectableCardIcon
-          checked={selectedFormat === 'bus'}
-          icon="bus"
-          inputId={8}
-          name="select"
-          onChange={() => toggleFormat('bus')}
-          titleText="Bus"
-          value="bus"
-          {...props}
-      />
-      <SelectableCardIcon
-          checked={selectedFormat === 'subway'}
-          icon="subway"
-          inputId={9}
-          name="select"
-          onChange={() => toggleFormat('subway')}
-          titleText="Subway"
-          value="subway"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default SelectableCardIconSingleSelect

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

@@ -1,14 +0,0 @@
-examples:
-
-  rails:
-  - selectable_card_icon_default: Default
-  - selectable_card_icon_checkmark: Checkmark
-  - selectable_card_icon_single_select: Single Select
-  - selectable_card_icon_options: With Options
-
-
-
-  react:
-  - selectable_card_icon_default: Default
-  - selectable_card_icon_checkmark: Checkmark
-  - selectable_card_icon_single_select: Single Select

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

@@ -1,3 +0,0 @@
-export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
-export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
-export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'

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

@@ -1,23 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<%= 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

@@ -1,32 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<%= 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

@@ -1,32 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,25 +0,0 @@
-<%= 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

@@ -1,41 +0,0 @@
-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

@@ -1,26 +0,0 @@
-<%= 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

@@ -1,44 +0,0 @@
-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

@@ -1,63 +0,0 @@
-<%= 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

@@ -1,94 +0,0 @@
-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