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

playbook_ui 7.13.0 → 7.14.0

Files changed (64) hide show

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

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

@@ -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,60 +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(props) {
-    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"
-            {...props}
-        >
-          {'Male'}
-        </SelectableCard>
-        <SelectableCard
-            checked={this.state.selected === 'female'}
-            inputId="female1"
-            multi={false}
-            name="gender"
-            onChange={this.handleSelect.bind(this)}
-            value="female"
-            {...props}
-        >
-          {'Female'}
-        </SelectableCard>
-        <SelectableCard
-            checked={this.state.selected === 'other'}
-            inputId="other1"
-            multi={false}
-            name="gender"
-            onChange={this.handleSelect.bind(this)}
-            value="other"
-            {...props}
-        >
-          {'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