RubyGems - playbook_ui - Versions diffs - 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665 - Mend

playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

Files changed (1425) hide show

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.html.erb ADDED Viewed

@@ -0,0 +1,105 @@
+<%= pb_rails("title", props: {
+  size: 3,
+  text: "What programming languages do you know?"
+}) %>
+<br />
+<%= pb_rails("selectable_card", props: {
+  checked: true,
+  input_id: "ruby",
+  name: "ruby",
+  value: "ruby",
+  variant: "display_input"
+}) do %>
+  Ruby
+<% end %>
+<%= pb_rails("selectable_card", props: {
+  checked: true,
+  input_id: "javascript",
+  name: "javascript",
+  value: "javascript",
+  variant: "display_input"
+}) do %>
+  JavaScript
+<% end %>
+<%= pb_rails("selectable_card", props: {
+  input_id: "typescript",
+  name: "typescript",
+  value: "typescript",
+  variant: "display_input"
+}) do %>
+  TypeScript
+<% end %>
+<%= pb_rails("selectable_card", props: {
+  input_id: "swift",
+  name: "swift",
+  value: "swift",
+  variant: "display_input"
+}) do %>
+  Swift
+<% end %>
+<br />
+<%= pb_rails("title", props: {
+  size: 3,
+  text: "How likely are you to recommend Playbook to a friend?"
+}) %>
+<br />
+<%= pb_rails("selectable_card", props: {
+  checked: true,
+  input_id: "first_radio",
+  multi: false,
+  name: "radio_group",
+  value: "first_radio",
+  variant: "display_input"
+}) do %>
+  5
+<% end %>
+<%= pb_rails("selectable_card", props: {
+  input_id: "second_radio",
+  multi: false,
+  name: "radio_group",
+  value: "second_radio",
+  variant: "display_input"
+}) do %>
+  4
+<% end %>
+<%= pb_rails("selectable_card", props: {
+  input_id: "third_radio",
+  multi: false,
+  name: "radio_group",
+  value: "third_radio",
+  variant: "display_input"
+}) do %>
+  3
+<% end %>
+<%= pb_rails("selectable_card", props: {
+  input_id: "fourth_radio",
+  multi: false,
+  name: "radio_group",
+  value: "fourth_radio",
+  variant: "display_input"
+}) do %>
+  2
+<% end %>
+<%= pb_rails("selectable_card", props: {
+  input_id: "fifth_radio",
+  multi: false,
+  name: "radio_group",
+  value: "fifth_radio",
+  variant: "display_input"
+}) do %>
+  1
+<% end %>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx ADDED Viewed

@@ -0,0 +1,167 @@
+import React, { useState } from 'react'
+import Body from '../../pb_body/_body'
+import SelectableCard from '../../pb_selectable_card/_selectable_card'
+import Title from '../../pb_title/_title'
+const SelectableCardInput = (props) => {
+  const [state, setState] = useState({
+    firstCheckbox: true,
+    secondCheckbox: true,
+    thirdCheckbox: false,
+    forthCheckbox: false,
+    radioSelected: 'first',
+  })
+  const handleSelect = (event) => {
+    setState({ ...state,
+      [event.target.name]: event.target.checked,
+    })
+  }
+  const handleRadioSelect = (event) => {
+    setState({
+      ...state,
+      radioSelected: event.target.value,
+    })
+  }
+  return (
+    <>
+      <Title
+          size={3}
+          text="What programming languages do you know?"
+          {...props}
+      />
+      <br />
+      <SelectableCard
+          checked={state.firstCheckbox}
+          inputId="firstCheckbox"
+          name="firstCheckbox"
+          onChange={handleSelect}
+          value="firstCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'Ruby'}</Body>
+      </SelectableCard>
+      <SelectableCard
+          checked={state.secondCheckbox}
+          inputId="secondCheckbox"
+          name="secondCheckbox"
+          onChange={handleSelect}
+          value="secondCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'JavaScript'}</Body>
+      </SelectableCard>
+      <SelectableCard
+          checked={state.thirdCheckbox}
+          inputId="thirdCheckbox"
+          name="thirdCheckbox"
+          onChange={handleSelect}
+          value="thirdCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'TypeScript'}</Body>
+      </SelectableCard>
+      <SelectableCard
+          checked={state.fourthCheckbox}
+          inputId="fourthCheckbox"
+          name="fourthCheckbox"
+          onChange={handleSelect}
+          value="fourthCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'Swift'}</Body>
+      </SelectableCard>
+      <br />
+      <Title
+          size={3}
+          text="How likely are you to recommend Playbook to a friend?"
+          {...props}
+      />
+      <br />
+      <SelectableCard
+          checked={state.radioSelected === 'first'}
+          inputId="radio-1"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="first"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'5'}</Body>
+      </SelectableCard>
+      <SelectableCard
+          checked={state.radioSelected === 'second'}
+          inputId="radio-2"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="second"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>
+          {'4'}
+        </Body>
+      </SelectableCard>
+      <SelectableCard
+          checked={state.radioSelected === 'third'}
+          inputId="radio-3"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="third"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'3'}</Body>
+      </SelectableCard>
+      <SelectableCard
+          checked={state.radioSelected === 'fourth'}
+          inputId="radio-4"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="fourth"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'2'}</Body>
+      </SelectableCard>
+      <SelectableCard
+          checked={state.radioSelected === 'fifth'}
+          inputId="radio-5"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="fifth"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'1'}</Body>
+      </SelectableCard>
+    </>
+  )
+}
+export default SelectableCardInput

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Selectable Cards can show an input indicating state.

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card", props: {
+    text: "Selected With Options",
+    input_id: "selected_with options",
+    name: "selected_with options",
+    value: "selected_with options",
+    checked: true,
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb ADDED Viewed

@@ -0,0 +1,30 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card", props: {
+    input_id: "male",
+    name: "gender",
+    value: "male",
+    multi: false
+  }) do %>
+    Male
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "female",
+    name: "gender",
+    value: "female",
+    multi: false
+  }) do %>
+    Female
+  <% end %>
+  <%= pb_rails("selectable_card", props: {
+    input_id: "other",
+    name: "gender",
+    value: "other",
+    multi: false
+  }) do %>
+    Other
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx ADDED Viewed

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import SelectableCard from '../_selectable_card.tsx'
+const SelectableCardSingleSelect = (props) => {
+  const [selected, setSelected] = useState(null)
+  const handleSelect = (event) => {
+    setSelected(event.target.value)
+  }
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCard
+          checked={selected === 'male'}
+          inputId="male1"
+          multi={false}
+          name="gender"
+          onChange={handleSelect}
+          value="male"
+          {...props}
+      >
+        {'Male'}
+      </SelectableCard>
+      <SelectableCard
+          checked={selected === 'female'}
+          inputId="female1"
+          multi={false}
+          name="gender"
+          onChange={handleSelect}
+          value="female"
+          {...props}
+      >
+        {'Female'}
+      </SelectableCard>
+      <SelectableCard
+          checked={selected === 'other'}
+          inputId="other1"
+          multi={false}
+          name="gender"
+          onChange={handleSelect}
+          value="other"
+          {...props}
+      >
+        {'Other'}
+      </SelectableCard>
+    </div>
+  )
+}
+export default SelectableCardSingleSelect

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.md ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ Single Select allows only one selectable card in the set to be selected.
2	+

data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml ADDED Viewed

@@ -0,0 +1,19 @@
+examples:
+  rails:
+  - selectable_card_default: Default
+  - selectable_card_single_select: Single Select
+  - selectable_card_block: Block
+  - selectable_card_options: With Options
+  - selectable_card_image: Image Example
+  - selectable_card_input: Input Variant
+  - selectable_card_error: With Errors
+  react:
+  - selectable_card_default: Default
+  - selectable_card_single_select: Single Select
+  - selectable_card_block: Block
+  - selectable_card_image: Image Example
+  - selectable_card_input: Input Variant
+  - selectable_card_error: With Errors

data/app/pb_kits/playbook/pb_selectable_card/docs/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+export { default as SelectableCardDefault } from './_selectable_card_default.jsx'
+export { default as SelectableCardSingleSelect } from './_selectable_card_single_select.jsx'
+export { default as SelectableCardBlock } from './_selectable_card_block.jsx'
+export { default as SelectableCardError } from './_selectable_card_error.jsx'
+export { default as SelectableCardImage } from './_selectable_card_image.jsx'
+export { default as SelectableCardInput } from './_selectable_card_input.jsx'

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.html.erb ADDED Viewed

@@ -0,0 +1,29 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "hat-cowboy",
+    title_text: "Cowboy",
+    body_text: "Howdy partner.",
+    input_id: 4,
+    checked: true,
+    checkmark: true
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "hat-wizard",
+    title_text: "Wizard",
+    body_text: "Poof, you're a sandwich.",
+    input_id: 5,
+    checkmark: true
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "hat-chef",
+    title_text: "Chef",
+    body_text: "Where is the lamb sauce?",
+    input_id: 6,
+    disabled: true,
+    checkmark: true
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx ADDED Viewed

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import SelectableCardIcon from '../_selectable_card_icon'
+const SelectableCardIconCheckmark = (props) => {
+  const [selected, setSelected] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Howdy Partner."
+          checked={selected}
+          checkmark
+          icon="hat-cowboy"
+          inputId={4}
+          onChange={() => setSelected(!selected)}
+          titleText="Cowboy"
+          {...props}
+      />
+      <SelectableCardIcon
+          bodyText="Poof, you're a sandwich."
+          checked={unselected}
+          checkmark
+          icon="hat-wizard"
+          inputId={5}
+          onChange={() => setUnselected(!unselected)}
+          titleText="Wizard"
+          {...props}
+      />
+      <SelectableCardIcon
+          bodyText="Where is the lamb sauce?"
+          checkmark
+          disabled
+          icon="hat-chef"
+          inputId={6}
+          titleText="Chef"
+          {...props}
+      />
+    </div>
+  )
+}
+export default SelectableCardIconCheckmark

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.html.erb ADDED Viewed

@@ -0,0 +1,26 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-line",
+    title_text: "Quarterly Report",
+    body_text: "Export",
+    input_id: 1,
+    checked: true,
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-pie",
+    title_text: "Market Share",
+    body_text: "Export",
+    input_id: 2,
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "analytics",
+    title_text: "Comprehensive",
+    body_text: "Export",
+    input_id: 3,
+    disabled: true
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.jsx ADDED Viewed

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import SelectableCardIcon from '../_selectable_card_icon'
+const SelectableCardIconDefault = (props) => {
+  const [selected, setSelected] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Export"
+          checked={selected}
+          icon="chart-line"
+          inputId={1}
+          onChange={() => setSelected(!selected)}
+          titleText="Quarterly Report"
+          {...props}
+      />
+      <SelectableCardIcon
+          bodyText="Export"
+          checked={unselected}
+          icon="chart-pie"
+          inputId={2}
+          onChange={() => setUnselected(!unselected)}
+          titleText="Market Share"
+          {...props}
+      />
+      <SelectableCardIcon
+          bodyText="Export"
+          disabled
+          icon="analytics"
+          inputId={3}
+          titleText="Comprehensive"
+          {...props}
+      />
+    </div>
+  )
+}
+export default SelectableCardIconDefault

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_options.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-line",
+    title_text: "Quarterly Report",
+    body_text: "Export",
+    input_id: "card-icon-id",
+    checked: true,
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.html.erb ADDED Viewed

@@ -0,0 +1,27 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "car",
+    title_text: "Car",
+    input_id: 7,
+    name: "select",
+    multi: false,
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "bus",
+    title_text: "Bus",
+    input_id: 8,
+    name: "select",
+    multi: false,
+  }) %>
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "subway",
+    title_text: "Subway",
+    input_id: 9,
+    name: "select",
+    multi: false,
+  }) %>
+</div>

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

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

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

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

@@ -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>