RubyGems - playbook_ui - Versions diffs - 7.11.1 → 7.14.0 - Mend

playbook_ui 7.11.1 → 7.14.0

Files changed (343) hide show

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

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

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

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

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb CHANGED

@@ -26,5 +26,5 @@
   }) do %>
     Other
   <% end %>
-</div>
+</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx CHANGED

@@ -1,57 +1,53 @@
-import React from 'react'
+import React, { useState } from 'react'
 import SelectableCard from '../_selectable_card.jsx'
-class SelectableCardSingleSelect extends React.Component {
-  state = {
-    selected: null,
+const SelectableCardSingleSelect = (props) => {
+  const [selected, setSelected] = useState(null)
+  const handleSelect = (event) => {
+    setSelected(event.target.value)
   }
-  handleSelect = (event) => {
-    this.setState({
-      selected: event.target.value,
-    })
-  }
-  render() {
-    return (
-      <div className="pb--doc-demo-row">
-        <SelectableCard
-            checked={this.state.selected === 'male'}
-            inputId="male1"
-            multi={false}
-            name="gender"
-            onChange={this.handleSelect.bind(this)}
-            value="male"
-        >
-          {'Male'}
-        </SelectableCard>
-        <SelectableCard
-            checked={this.state.selected === 'female'}
-            inputId="female1"
-            multi={false}
-            name="gender"
-            onChange={this.handleSelect.bind(this)}
-            value="female"
-        >
-          {'Female'}
-        </SelectableCard>
-        <SelectableCard
-            checked={this.state.selected === 'other'}
-            inputId="other1"
-            multi={false}
-            name="gender"
-            onChange={this.handleSelect.bind(this)}
-            value="other"
-        >
-          {'Other'}
-        </SelectableCard>
-      </div>
-    )
-  }
+  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/example.yml CHANGED

@@ -6,6 +6,7 @@ examples:
   - selectable_card_block: Block
   - selectable_card_options: With Options
   - selectable_card_image: Image Example
+  - selectable_card_input: Input Variant
   react:
@@ -13,3 +14,4 @@ examples:
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
   - selectable_card_image: Image Example
+  - selectable_card_input: Input Variant

data/app/pb_kits/playbook/pb_selectable_card/docs/index.js CHANGED

@@ -2,3 +2,4 @@ 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 SelectableCardImage } from './_selectable_card_image.jsx'
+export { default as SelectableCardInput } from './_selectable_card_input.jsx'

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb CHANGED

@@ -18,13 +18,22 @@ module Playbook
       prop :input_id, type: Playbook::Props::String
       prop :input_options, type: Playbook::Props::Hash,
-                                      default: {}
+                           default: {}
       prop :name
       prop :text
       prop :value
+      prop :variant, type: Playbook::Props::String,
+                     default: "default"
       def classname
-        generate_classname("pb_selectable_card_kit", checked_class, enable_disabled_class)
+        [
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
+          dark_props,
+        ].compact.join(" ")
+      end
+      def spacing_classname
+        generate_classname
       end
       def input_id_present
@@ -38,6 +47,22 @@ module Playbook
         )
       end
+      def input
+        multi ? "checkbox" : "radio"
+      end
+      def label_class
+        variant == "display_input" ? "p_none" : spacing_classname
+      end
+      def is_checked
+        checked ? "checked" : ""
+      end
+      def is_disabled
+        disabled ? "disabled" : ""
+      end
     private
       def checked_class

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss CHANGED

@@ -5,18 +5,18 @@
 	input[type="checkbox"],
 	input[type="radio"] {
     transition-duration: $transition_short;
 		&:checked ~ label {
       transition-timing-function: $easeIn;
 			color: $primary;
 				h4 {
 					color: $primary;
 				}
 			}
     &:not(:checked) ~ label {
       transition-timing-function: $easeOut;
         color: $slate;
@@ -26,7 +26,7 @@
     &[class*=_disabled] {
       opacity: $opacity_6;
       cursor: not-allowed;
       * {
           cursor: not-allowed;
       }
@@ -35,10 +35,10 @@
   &.dark {
     input[type="checkbox"],
-    input[type="radio"] {
+    input[type="radio"] {
       transition-duration: $transition_short;
       &:checked ~ label {
         transition-timing-function: $easeIn;
         color: $active_dark;

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx CHANGED

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { SelectableCardIcon } from '../../'
-const SelectableCardIconCheckmark = () => {
+const SelectableCardIconCheckmark = (props) => {
   const [selected, setSelected] = useState(true)
   const [unselected, setUnselected] = useState(false)
@@ -16,6 +16,7 @@ const SelectableCardIconCheckmark = () => {
           inputId={4}
           onChange={() => setSelected(!selected)}
           titleText="Cowboy"
+          {...props}
       />
       <SelectableCardIcon
           bodyText="Poof, you're a sandwich."
@@ -25,6 +26,7 @@ const SelectableCardIconCheckmark = () => {
           inputId={5}
           onChange={() => setUnselected(!unselected)}
           titleText="Wizard"
+          {...props}
       />
       <SelectableCardIcon
           bodyText="Where is the lamb sauce?"
@@ -33,6 +35,7 @@ const SelectableCardIconCheckmark = () => {
           icon="hat-chef"
           inputId={6}
           titleText="Chef"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.jsx CHANGED

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { SelectableCardIcon } from '../../'
-const SelectableCardIconDefault = () => {
+const SelectableCardIconDefault = (props) => {
   const [selected, setSelected] = useState(true)
   const [unselected, setUnselected] = useState(false)
@@ -14,6 +14,7 @@ const SelectableCardIconDefault = () => {
           inputId={1}
           onChange={() => setSelected(!selected)}
           titleText="Quarterly Report"
+          {...props}
       />
       <SelectableCardIcon
           bodyText="Export"
@@ -22,6 +23,7 @@ const SelectableCardIconDefault = () => {
           inputId={2}
           onChange={() => setUnselected(!unselected)}
           titleText="Market Share"
+          {...props}
       />
       <SelectableCardIcon
           bodyText="Export"
@@ -29,6 +31,7 @@ const SelectableCardIconDefault = () => {
           icon="analytics"
           inputId={3}
           titleText="Comprehensive"
+          {...props}
       />
     </div>
   )