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

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

Files changed (1479) hide show

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+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/_selectable_card.scss CHANGED Viewed

@@ -81,10 +81,11 @@ $pb_selectable_card_border: 2px;
         }
         .separator {
-          width: 2px;
-          margin-right: 0px;
           background: $royal;
         }
+        .psuedo_separator {
+          background-color: $royal;
+        }
       }
     }
   }
@@ -125,13 +126,17 @@ $pb_selectable_card_border: 2px;
   .separator {
     align-self: stretch;
-    width: 1px;
-    margin-right: 1px;
+    padding-right: 1px;
     margin-top: -1px;
     margin-bottom: -1px;
     background: $border_light;
   }
+  .psuedo_separator {
+    align-self: stretch;
+    padding-right: 1px;
+  }
   &.error {
     > label {
       border-color: $error;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx CHANGED Viewed

@@ -13,9 +13,9 @@ import {
 import Icon from '../pb_icon/_icon'
 import Checkbox from '../pb_checkbox/_checkbox'
-import Card from '../pb_card/_card'
 import Flex from '../pb_flex/_flex'
 import Radio from '../pb_radio/_radio'
+import Card from '../pb_card/_card'
 type SelectableCardProps = {
   aria?: { [key: string]: string },
@@ -149,13 +149,15 @@ const SelectableCard = (props: SelectableCardProps) => {
                   </Input>
                 </Flex>
                 <div className="separator" />
-                <Card.Body
+                <div className="psuedo_separator"/>
+                <Card
+                    borderNone
                     dark={dark}
                     padding="sm"
                     status={error ? 'negative' : null}
                 >
                   {text ||props.children}
-                </Card.Body>
+                </Card>
               </Flex>
               :
             text || props.children

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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