RubyGems - playbook_ui - Versions diffs - 12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638 → 12.19.0.pre.alpha.movemarkdown639 - Mend

playbook_ui 12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638 → 12.19.0.pre.alpha.movemarkdown639

Files changed (1477) hide show

data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.jsx DELETED Viewed

@@ -1,48 +0,0 @@
-import React from 'react'
-import Select from '../_select'
-const SelectDisabledOptions = (props) => {
-  const options = [
-    {
-      value: '1',
-      disabled: true,
-      text: 'Espresso',
-    },
-    {
-      value: '2',
-      text: 'Americano',
-    },
-    {
-      value: '3',
-      disabled: true,
-      text: 'Cappuccino',
-    },
-    {
-      value: '4',
-      text: 'Mocha',
-    },
-    {
-      value: '5',
-      text: 'Flat White',
-    },
-    {
-      value: '6',
-      text: 'Latte',
-    },
-  ]
-  return (
-    <div>
-      <Select
-          label="Favorite Coffee"
-          name="coffee"
-          options={options}
-          value="2"
-          {...props}
-      />
-    </div>
-  )
-}
-export default SelectDisabledOptions

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb DELETED Viewed

@@ -1,24 +0,0 @@
-<%= pb_rails("select", props: {
-  error: "Please make a valid selection",
-  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_error.jsx DELETED Viewed

@@ -1,39 +0,0 @@
-import React from 'react'
-import { Body, Select } from '../..'
-const SelectError = (props) => {
-  const options = [
-    {
-      value: '1',
-      text: 'Burgers',
-    },
-    {
-      value: '2',
-      text: 'Pizza',
-    },
-    {
-      value: '3',
-      text: 'Tacos',
-    },
-  ]
-  return (
-    <div>
-      <Select
-          error="Please make a valid selection"
-          label="Favorite Food"
-          name="food"
-          options={options}
-          value="2"
-          {...props}
-      />
-      <Body
-          error="Please make a valid selection"
-          status="negative"
-          {...props}
-      />
-    </div>
-  )
-}
-export default SelectError

data/app/pb_kits/playbook/pb_select/docs/_select_error.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb DELETED Viewed

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

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx DELETED Viewed

@@ -1,37 +0,0 @@
-import React from 'react'
-import { Body, Select } from '../..'
-const SelectInline = (props) => {
-  const options = [
-    {
-      value: '1',
-      text: 'Burgers',
-    },
-    {
-      value: '2',
-      text: 'Pizza',
-    },
-    {
-      value: '3',
-      text: 'Tacos',
-    },
-  ]
-  return (
-    <div>
-      <Select
-          inline
-          label="Favorite Food"
-          name="food"
-          options={options}
-          {...props}
-      />
-      <Body
-          status="negative"
-          {...props}
-      />
-    </div>
-  )
-}
-export default SelectInline

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb DELETED Viewed

@@ -1,24 +0,0 @@
-<%= pb_rails("select", props: {
-  label: "Favorite Food",
-  name: "food",
-  inline: true,
-  compact: true,
-  options: [
-    {
-      value: "1",
-      value_text: "Burgers",
-    },
-    {
-      value: "2",
-      value_text: "Pizza",
-    },
-    {
-      value: "3",
-      value_text: "Tacos",
-    },
-    {
-      value: "4",
-      value_text: "BBQ",
-    },
-  ]
-}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx DELETED Viewed

@@ -1,38 +0,0 @@
-import React from 'react'
-import { Body, Select } from '../..'
-const SelectInlineCompact = (props) => {
-  const options = [
-    {
-      value: '1',
-      text: 'Burgers',
-    },
-    {
-      value: '2',
-      text: 'Pizza',
-    },
-    {
-      value: '3',
-      text: 'Tacos',
-    },
-  ]
-  return (
-    <div>
-      <Select
-          compact
-          inline
-          label="Favorite Food"
-          name="food"
-          options={options}
-          {...props}
-      />
-      <Body
-          status="negative"
-          {...props}
-      />
-    </div>
-  )
-}
-export default SelectInlineCompact

data/app/pb_kits/playbook/pb_select/docs/_select_required.html.erb DELETED Viewed

@@ -1,17 +0,0 @@
-<%= pb_rails("select", props: {
-  label: "Which shoe do you tie first?",
-  required: true,
-  name: "shoe",
-  blank_selection: "Select One...",
-  options: [
-    {
-      value: "Left",
-    },
-    {
-      value: "Right",
-    },
-    {
-      value: "I go without laces",
-    },
-  ]
-}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_required.jsx DELETED Viewed

@@ -1,26 +0,0 @@
-import React from 'react'
-import Select from '../_select'
-const SelectRequired = (props) => {
-  const options = [
-    { value: 'Left' },
-    { value: 'Right' },
-    { value: 'I go without laces' },
-  ]
-  return (
-    <div>
-      <Select
-          blankSelection="Select One..."
-          label="Which shoe do you tie first?"
-          name="shoe"
-          options={options}
-          required
-          {...props}
-      />
-    </div>
-  )
-}
-export default SelectRequired

data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb DELETED Viewed

@@ -1,18 +0,0 @@
-<%= pb_rails("select", props: {
-  label: "Favorite Sport",
-  name: "sports",
-  options: [
-    {
-      value: "Football",
-    },
-    {
-      value: "Baseball",
-    },
-    {
-      value: "Basketball",
-    },
-    {
-      value: "Hockey",
-    },
-  ]
-}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx DELETED Viewed

@@ -1,25 +0,0 @@
-import React from 'react'
-import Select from '../_select'
-const SelectValueTextSame = (props) => {
-  const options = [
-    { value: 'Football' },
-    { value: 'Baseball' },
-    { value: 'Basketball' },
-    { value: 'Hockey' },
-  ]
-  return (
-    <div>
-      <Select
-          label="Favorite Sport"
-          name="sports"
-          options={options}
-          {...props}
-      />
-    </div>
-  )
-}
-export default SelectValueTextSame

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

@@ -1,27 +0,0 @@
-examples:
-  rails:
-  - select_default: Default
-  - select_blank: Blank Selection Text
-  - select_disabled_options: Disabled Options
-  - select_disabled: Disabled Select Field
-  - select_required: Required Select Field
-  - select_value_text_same: Equal option value and value text
-  - select_custom_select: Custom Select
-  - select_error: Select w/ Error
-  - select_inline: Select Inline
-  - select_inline_compact: Select Inline Compact
-  react:
-  - select_default: Default
-  - select_blank: Blank Selection Text
-  - select_disabled_options: Disabled Options
-  - select_disabled: Disabled Select Field
-  - select_required: Required Select Field
-  - select_value_text_same: Equal option value and value text
-  - select_custom_select: Custom Select
-  - select_error: Select w/ Error
-  - select_inline: Select Inline
-  - select_inline_compact: Select Inline Compact

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

@@ -1,10 +0,0 @@
-export { default as SelectDefault } from './_select_default.jsx'
-export { default as SelectBlank } from './_select_blank.jsx'
-export { default as SelectDisabledOptions } from './_select_disabled_options.jsx'
-export { default as SelectDisabled } from './_select_disabled.jsx'
-export { default as SelectRequired } from './_select_required.jsx'
-export { default as SelectCustomSelect } from './_select_custom_select.jsx'
-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'

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

	@@ -1 +0,0 @@
1	- Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.

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

	@@ -1,2 +0,0 @@
1	- ### Things to Avoid
2	- Do not use Forms, Charts & Graphs, Text Input, Textarea, etc inside of selectable card.

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

@@ -1,25 +0,0 @@
-<div class="pb--doc-demo-row">
-  <%= pb_rails("selectable_card", props: {
-    input_id: "block",
-    name: "block",
-    value: "block",
-    checked: true
-  }) do %>
-    <%= pb_rails("title", props: { text: "Block", size: 4 }) %>
-    <%= pb_rails("body", props: { tag: "span"}) do %>
-      This uses block
-    <% end %>
-  <% end %>
-  <br><br>
-  <%= pb_rails("selectable_card", props: {
-    input_id: "tag",
-    name: "tag",
-    value: "tag",
-    text: "This passes in text",
-    checked: false
-  }) %>
-</div>

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

@@ -1,56 +0,0 @@
-import React, { useState } from 'react'
-import SelectableCard from '../_selectable_card'
-import Body from '../../pb_body/_body'
-import Title from '../../pb_title/_title'
-const SelectableCardBlock = (props) => {
-  const [block, setBlock] = useState(true)
-  const [tag, setTag] = useState(false)
-  const handleSelect = (event) => {
-    setBlock(event.target.checked)
-  }
-  const handleTag = (event) => {
-    setTag(event.target.checked)
-  }
-  return (
-    <div className="pb--doc-demo-row">
-      <SelectableCard
-          checked={block}
-          inputId="block"
-          name="block"
-          onChange={handleSelect}
-          value="block"
-          {...props}
-      >
-        <Title
-            size={4}
-            text="Block"
-            {...props}
-        />
-        <Body
-            tag="span"
-            {...props}
-        >
-          {'This uses block'}
-        </Body>
-      </SelectableCard>
-      <SelectableCard
-          checked={tag}
-          inputId="tag"
-          name="tag"
-          onChange={handleTag}
-          text="This passes text through the tag"
-          value="tag"
-          {...props}
-      />
-    </div>
-  )
-}
-export default SelectableCardBlock

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

	@@ -1 +0,0 @@
1	- Selectable Cards can pass text or block content.

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

@@ -1,39 +0,0 @@
-<div class="pb--doc-demo-row">
-  <%= pb_rails("selectable_card", props: {
-    input_id: "selected_with_icon",
-    name: "selected_with_icon",
-    value: "selected_with_icon",
-    checked: true,
-    icon: true,
-  }) do %>
-    Selected, with icon
-  <% end %>
-  <%= pb_rails("selectable_card", props: {
-    input_id: "selected_without_icon",
-    name: "selected_without_icon",
-    value: "selected_without_icon",
-    checked: true,
-  }) do %>
-    Selected, without icon
-  <% end %>
-  <%= pb_rails("selectable_card", props: {
-    input_id: "unselected",
-    name: "unselected",
-    value: "unselected",
-  }) do %>
-    Unselected
-  <% end %>
-  <%= pb_rails("selectable_card", props: {
-    input_id: "disabled",
-    name: "disabled",
-    value: "disabled",
-    disabled: true
-  }) do %>
-    Disabled
-  <% end %>
-</div>

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

@@ -1,63 +0,0 @@
-import React, { useState } from 'react'
-import SelectableCard from '../_selectable_card.tsx'
-const SelectableCardDefault = (props) => {
-  const [selectedWithIcon, setSelectedWithIcon] = useState(true)
-  const [selectedNoIcon, setSelectedNoIcon] = useState(true)
-  const [unselected, setUnselected] = useState(false)
-  const [disabled, setDisabled] = useState(false)
-  return (
-    <div className="pb--doc-demo-row">
-      <SelectableCard
-          checked={selectedWithIcon}
-          icon
-          inputId="selectedWithIcon"
-          name="selectedWithIcon"
-          onChange={() => setSelectedWithIcon(!selectedWithIcon)}
-          value="selectedWithIcon"
-          {...props}
-      >
-        {'Selected, with icon'}
-      </SelectableCard>
-      <SelectableCard
-          checked={selectedNoIcon}
-          inputId="selectedWithoutIcon"
-          name="selectedWithoutIcon"
-          onChange={() => setSelectedNoIcon(!selectedNoIcon)}
-          value="selectedWithoutIcon"
-          {...props}
-      >
-        {'Selected, without icon'}
-      </SelectableCard>
-      <SelectableCard
-          checked={unselected}
-          inputId="unselected"
-          name="unselected"
-          onChange={() => setUnselected(!unselected)}
-          value="unselected"
-          {...props}
-      >
-        {'Unselected'}
-      </SelectableCard>
-      <SelectableCard
-          checked={disabled}
-          disabled
-          inputId="disabled"
-          name="disabled"
-          onChange={() => setDisabled(!disabled)}
-          value="disabled"
-          {...props}
-      >
-        {'Disabled'}
-      </SelectableCard>
-    </div>
-  )
-}
-export default SelectableCardDefault

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

	@@ -1 +0,0 @@
1	- Default Selectable Cards are multi select by default.

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

@@ -1,36 +0,0 @@
-<%= pb_rails("title", props: {
-  size: 3,
-  text: "What sports do you like?"
-}) %>
-<br />
-<%= pb_rails("selectable_card", props: {
-  error: true,
-  input_id: "football",
-  name: "football",
-  value: "football",
-  variant: "display_input"
-}) do %>
-  Football
-<% end %>
-<%= pb_rails("selectable_card", props: {
-  error: true,
-  input_id: "basketball",
-  name: "basketball",
-  value: "basketball",
-  variant: "display_input"
-}) do %>
-  Basketball
-<% end %>
-<%= pb_rails("selectable_card", props: {
-  error: true,
-  input_id: "baseball",
-  name: "baseball",
-  value: "baseball",
-  variant: "display_input"
-}) do %>
-  Baseball
-<% end %>

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

@@ -1,58 +0,0 @@
-import React, { useState } from 'react'
-import { Body, SelectableCard, Title } from '../..'
-const SelectableCardError = (props) => {
-  const [football, setFootball] = useState(false)
-  const [basketball, setBasketball] = useState(false)
-  const [baseball, setBaseball] = useState(false)
-  return (
-    <div>
-      <Title
-          {...props}
-          size={3}
-          text="What sports do you like?"
-      />
-      <br />
-      <SelectableCard
-          {...props}
-          checked={football}
-          error
-          inputId="football"
-          name="football"
-          onChange={() => setFootball(!football)}
-          value="football"
-          variant="displayInput"
-      >
-        <Body {...props}>{'Football'}</Body>
-      </SelectableCard>
-      <SelectableCard
-          {...props}
-          checked={basketball}
-          error
-          inputId="basketball"
-          name="basketball"
-          onChange={() => setBasketball(!basketball)}
-          value="basketball"
-          variant="displayInput"
-      >
-        <Body {...props}>{'Basketball'}</Body>
-      </SelectableCard>
-      <SelectableCard
-          {...props}
-          checked={baseball}
-          error
-          inputId="baseball"
-          name="baseball"
-          onChange={() => setBaseball(!baseball)}
-          value="baseball"
-          variant="displayInput"
-      >
-        <Body {...props}>{'Baseball'}</Body>
-      </SelectableCard>
-    </div>
-  )
-}
-export default SelectableCardError