RubyGems - playbook_ui - Versions diffs - 12.19.0.pre.alpha.PLAY699zindexresponsive650 → 12.19.0.pre.alpha.movemarkdown637 - Mend

playbook_ui 12.19.0.pre.alpha.PLAY699zindexresponsive650 → 12.19.0.pre.alpha.movemarkdown637

Files changed (1468) hide show

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.html.erb DELETED Viewed

@@ -1,27 +0,0 @@
-<div class="pb--doc-demo-row">
-  <%= pb_rails("selectable_card", props: {
-    input_id: "selectable-image-default",
-    name: "selectable-image-default",
-    value: "selectable-image-default",
-    checked: true,
-    icon: true
-  }) do %>
-    <%= pb_rails("image", props: { rounded: true, size: "xl",url: "https://unsplash.it/500/400/?image=634" }) %>
-    <%= pb_rails("body", props: { tag: "span"}) do %>
-      Add text here
-    <% end %>
-  <% end %>
-  <%= pb_rails("selectable_card", props: {
-    input_id: "selectable-image-xl",
-    name: "selectable-image-xl",
-    value: "selectable-image-xl",
-    checked: false,
-    icon: true
-  }) do %>
-    <%= pb_rails("image", props: { rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
-  <% end %>
-</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx DELETED Viewed

@@ -1,54 +0,0 @@
-import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import Image from '../../pb_image/_image'
-import SelectableCard from '../../pb_selectable_card/_selectable_card'
-const SelectableCardImage = (props) => {
-  const [selectedImage, setSelectedImage] = useState(true)
-  const [unselectedImage, setUnselectedImage] = useState(false)
-  return (
-    <div className="pb--doc-demo-row">
-      <SelectableCard
-          checked={selectedImage}
-          icon
-          inputId="selectableImage"
-          name="selectableImage"
-          onChange={() => setSelectedImage(!selectedImage)}
-          value="selectableImage"
-          {...props}
-      >
-        <Image
-            rounded
-            size="xl"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-        <Body>{'Add text here'}</Body>
-      </SelectableCard>
-      <SelectableCard
-          checked={unselectedImage}
-          icon
-          inputId="unselectedImage"
-          name="unselectedImage"
-          onChange={() => setUnselectedImage(!unselectedImage)}
-          value="unselectedImage"
-          {...props}
-      >
-        <Image
-            rounded
-            size="xl"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </SelectableCard>
-    </div>
-  )
-}
-export default SelectableCardImage

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Selectable Cards can pass images with optional text.

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

@@ -1,105 +0,0 @@
-<%= 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 DELETED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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