RubyGems - playbook_ui - Versions diffs - 7.13.0 → 7.14.0.pre.alpha1 - Mend

playbook_ui 7.13.0 → 7.14.0.pre.alpha1

Files changed (217) hide show

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

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

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

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

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

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

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

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

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

@@ -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_table/_table.jsx CHANGED Viewed

@@ -4,11 +4,13 @@ import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
+import PbTable from './'
 type TableProps = {
   aria?: object,
   children: array<Node> | Node,
   className: string,
+  collapse?: "sm" | "md" | "lg",
   container: boolean,
   dark?: boolean,
   data?: object,
@@ -25,6 +27,7 @@ const Table = (props: TableProps) => {
     aria = {},
     children,
     className,
+    collapse = 'sm',
     container = true,
     dark,
     data = {},
@@ -38,6 +41,10 @@ const Table = (props: TableProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
+  const instance = new PbTable()
+  instance.connect()
   return (
     <table
@@ -55,6 +62,7 @@ const Table = (props: TableProps) => {
           'no-hover': disableHover,
         },
         globalProps(props),
+        tableCollapseCss,
         className
       )}
         id={id}

data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb CHANGED Viewed

@@ -1,6 +1,6 @@
-<%= pb_rails("title", props: { size: 4, text: "Default" }) %>
+<%= pb_rails("title", props: { size: 4, text: "Not Responsive" }) %>
-<%= pb_rails("table", props: { responsive: "collapse" }) do %>
+<%= pb_rails("table", props: { responsive: "none" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -23,9 +23,34 @@
 <br>
-<%= pb_rails("title", props: { size: 4, text: "Responsive Off" }) %>
+<%= pb_rails("title", props: { size: 4, text: "Collapse Mobile" }) %>
-<%= pb_rails("table", props: { responsive: "none" }) do %>
+<%= pb_rails("table", props: { collapse: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>
+<br>
+<%= pb_rails("title", props: { size: 4, text: "Collapse Tablet" }) %>
+<%= pb_rails("table", props: { collapse: "md" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -45,3 +70,30 @@
     </tr>
   </tbody>
 <% end %>
+<br>
+<%= pb_rails("title", props: { size: 4, text: "Collapse Desktop" }) %>
+<%= pb_rails("table", props: { collapse: "lg" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>