playbook_ui 7.13.0 → 7.16.0.pre.alpha1

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

@@ -1,73 +1,64 @@
-import React from 'react'
+import React, { useState } from 'react'
 import SelectableCard from '../_selectable_card.jsx'
 
-class SelectableCardDefault extends React.Component {
-  state = {
-    selectedWithIcon: true,
-    selectedWithoutIcon: true,
-    unselected: false,
-  }
+const SelectableCardDefault = (props) => {
+  const [selectedWithIcon, setSelectedWithIcon] = useState(true)
+  const [selectedNoIcon, setSelectedNoIcon] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+  const [disabled, setDisabled] = useState(false)
 
-  handleSelect = (event) => {
-    this.setState({
-      [event.target.id]: event.target.checked,
-    })
-  }
+  return (
+    <div className="pb--doc-demo-row">
 
-  render(props) {
-    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={this.state.selectedWithIcon}
-            icon
-            inputId="selectedWithIcon"
-            name="selectedWithIcon"
-            onChange={this.handleSelect}
-            value="selectedWithIcon"
-            {...props}
-        >
-          {'Selected, with icon'}
-        </SelectableCard>
+      <SelectableCard
+          checked={selectedNoIcon}
+          icon={false}
+          inputId="selectedWithoutIcon"
+          name="selectedWithoutIcon"
+          onChange={() => setSelectedNoIcon(!selectedNoIcon)}
+          value="selectedWithoutIcon"
+          {...props}
+      >
+        {'Selected, without icon'}
+      </SelectableCard>
 
-        <SelectableCard
-            checked={this.state.selectedWithoutIcon}
-            icon={false}
-            inputId="selectedWithoutIcon"
-            name="selectedWithoutIcon"
-            onChange={this.handleSelect}
-            value="selectedWithoutIcon"
-            {...props}
-        >
-          {'Selected, without icon'}
-        </SelectableCard>
+      <SelectableCard
+          checked={unselected}
+          inputId="unselected"
+          name="unselected"
+          onChange={() => setUnselected(!unselected)}
+          value="unselected"
+          {...props}
+      >
+        {'Unselected'}
+      </SelectableCard>
 
-        <SelectableCard
-            checked={this.state.unselected}
-            inputId="unselected"
-            name="unselected"
-            onChange={this.handleSelect}
-            value="unselected"
-            {...props}
-        >
-          {'Unselected'}
-        </SelectableCard>
+      <SelectableCard
+          checked={disabled}
+          disabled
+          inputId="disabled"
+          name="disabled"
+          onChange={() => setDisabled(!disabled)}
+          value="disabled"
+          {...props}
+      >
+        {'Disabled'}
+      </SelectableCard>
 
-        <SelectableCard
-            checked={this.state.disabled}
-            disabled
-            inputId="disabled"
-            name="disabled"
-            onChange={this.handleSelect}
-            value="disabled"
-            {...props}
-        >
-          {'Disabled'}
-        </SelectableCard>
-
-      </div>
-    )
-  }
+    </div>
+  )
 }
 
 export default SelectableCardDefault

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

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

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

@@ -1,65 +1,55 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Body,
   Image,
   SelectableCard,
 } from '../../'
 
-class SelectableCardImage extends React.Component {
-  state = {
-    selectableImage: true,
-    unselectedImage: false,
-  }
-
-  handleSelect = (event) => {
-    this.setState({
-      [event.target.id]: event.target.checked,
-    })
-  }
-
-  render(props) {
-    return (
-      <div className="pb--doc-demo-row">
-
-        <SelectableCard
-            checked={this.state.selectableImage}
-            icon
-            inputId="selectableImage"
-            name="selectableImage"
-            onChange={this.handleSelect}
-            value="selectableImage"
+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}
-        >
-          <Image
-              rounded
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-              {...props}
-          />
-
-          <Body>{'Add text here'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.unselectedImage}
-            icon
-            inputId="unselectedImage"
-            name="unselectedImage"
-            onChange={this.handleSelect}
-            value="unselectedImage"
+        />
+
+        <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}
-        >
-          <Image
-              rounded
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-              {...props}
-          />
-        </SelectableCard>
+        />
+      </SelectableCard>
 
-      </div>
-    )
-  }
+    </div>
+  )
 }
 
 export default SelectableCardImage

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

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

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