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/_selectable_card.scss CHANGED

@@ -12,10 +12,22 @@ $pb_selectable_card_border: 2px;
 [class^=pb_selectable_card_kit] {
   display: block;
+  margin-bottom: 0;
+  > label {
+    > .buffer {
+      display: inherit;
+      flex-direction: inherit;
+      padding: 1px;
+      transition-property: all;
+      transition-duration: $transition_short;
+      transition-timing-function: $easeIn;
+    }
-  label {
     @include pb_card;
-    padding: $space_sm + 1;
+    padding: $space_sm;
+    margin-bottom: $space_sm;
     cursor: pointer;
     @media (hover:hover) {
@@ -56,20 +68,32 @@ $pb_selectable_card_border: 2px;
     appearance: none;
     display: none;
-    &:checked ~ label {
-      position: relative;
-      @include pb_card_selected;
-      padding: $space_sm;
+    &:checked {
-      .pb_selectable_card_circle {
-        opacity: $opacity_10;
+      ~ label {
+        > .buffer {
+          padding: 0;
+        }
+        position: relative;
+        @include pb_card_selected;
+        .pb_selectable_card_circle {
+          opacity: $opacity_10;
+        }
+        .separator {
+          width: 2px;
+          margin-right: 0px;
+          background: $royal;
+        }
       }
     }
   }
   &.dark {
     color: $white;
-    label {
+    > label {
       @include pb_card_dark;
       background: transparent;
@@ -86,5 +110,21 @@ $pb_selectable_card_border: 2px;
         background: transparent;
       }
     }
+    .separator {
+      background: $bg_dark;
+    }
+  }
+  .separator {
+    align-self: stretch;
+    transition-property: all;
+    transition-duration: $transition_short;
+    transition-timing-function: $easeIn;
+    width: 1px;
+    margin-right: 1px;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    background: $border_light;
   }
-}
+}

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

@@ -1,52 +1,52 @@
-import React from 'react'
-import {
-  Body,
-  SelectableCard,
-  Title,
-} from '../../'
+import React, { useState } from 'react'
+import { Body, SelectableCard, Title } from '../../'
-class SelectableCardBlock extends React.Component {
-  state = {
-    block: true,
-    tag: false,
-  }
+const SelectableCardBlock = (props) => {
+  const [block, setBlock] = useState(true)
+  const [tag, setTag] = useState(false)
-  handleSelect = (event) => {
-    this.setState({
-      [event.target.id]: event.target.checked,
-    })
+  const handleSelect = (event) => {
+    setBlock(event.target.checked)
   }
-  render() {
-    return (
-      <div className="pb--doc-demo-row">
-        <SelectableCard
-            checked={this.state.block}
-            inputId="block"
-            name="block"
-            onChange={this.handleSelect}
-            value="block"
-        >
-          <Title
-              size={4}
-              text="Block"
-          />
-          <Body tag="span">{'This uses block'}</Body>
-        </SelectableCard>
+  const handleTag = (event) => {
+    setTag(event.target.checked)
+  }
-        <SelectableCard
-            checked={this.state.tag}
-            inputId="tag"
-            name="tag"
-            onChange={this.handleSelect}
-            text="This passes text through the tag"
-            value="tag"
+  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>
-      </div>
-    )
-  }
+      <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_default.html.erb CHANGED

@@ -5,7 +5,7 @@
     name: "selected_with_icon",
     value: "selected_with_icon",
     checked: true,
-    icon: true
+    icon: true,
   }) do %>
     Selected, with icon
   <% end %>
@@ -35,5 +35,5 @@
   }) do %>
     Disabled
   <% end %>
 </div>

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

@@ -1,69 +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() {
-    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"
-        >
-          {'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"
-        >
-          {'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"
-        >
-          {'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"
-        >
-          {'Disabled'}
-        </SelectableCard>
-      </div>
-    )
-  }
+    </div>
+  )
 }
 export default SelectableCardDefault

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

@@ -1,61 +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() {
-    return (
-      <div className="pb--doc-demo-row">
-        <SelectableCard
-            checked={this.state.selectableImage}
-            icon
-            inputId="selectableImage"
-            name="selectableImage"
-            onChange={this.handleSelect}
-            value="selectableImage"
-        >
-          <Image
-              rounded
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-          <Body>{'Add text here'}</Body>
-        </SelectableCard>
-        <SelectableCard
-            checked={this.state.unselectedImage}
-            icon
-            inputId="unselectedImage"
-            name="unselectedImage"
-            onChange={this.handleSelect}
-            value="unselectedImage"
-        >
-          <Image
-              rounded
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </SelectableCard>
-      </div>
-    )
-  }
+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_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 %>