playbook_ui 7.12.0 → 7.15.0

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Icon } from '../'
+import { Card, Checkbox, Flex, Icon, Radio } from '../'
 
 import type { InputCallback } from '../types'
 
@@ -20,6 +20,7 @@ type SelectableCardProps = {
   checked: boolean,
   children?: array<React.ReactChild>,
   className?: string,
+  dark?: boolean,
   data: object,
   disabled?: boolean,
   icon?: boolean,
@@ -30,6 +31,7 @@ type SelectableCardProps = {
   onChange: InputCallback<HTMLInputElement>,
   text?: string,
   value?: string,
+  variant?: string,
 }
 
 const SelectableCard = ({
@@ -37,6 +39,7 @@ const SelectableCard = ({
   checked = false,
   children,
   className,
+  dark = false,
   data = {},
   disabled = false,
   icon = false,
@@ -46,6 +49,7 @@ const SelectableCard = ({
   onChange = noop,
   text,
   value,
+  variant = 'default',
   ...props
 }: SelectableCardProps) => {
   const ariaProps = buildAriaProps(aria)
@@ -55,7 +59,9 @@ const SelectableCard = ({
     { 'checked': checked,
       'disabled': disabled,
       'enabled': !disabled }),
-  globalProps(props), className)
+  dark ? 'dark' : '',
+  className
+  )
 
   const displayIcon = () => {
     if (icon === true) {
@@ -70,9 +76,16 @@ const SelectableCard = ({
     }
   }
 
-  const inputType = multi === false ? 'radio' : 'checkbox'
+  const inputRef = React.createRef()
+  // Delegate clicks to hidden input from visible one
+  const handleClick = () => {
+    inputRef.current.click()
+  }
 
+  const inputType = multi ? 'checkbox' : 'radio'
   const inputIdPresent = inputId !== null ? inputId : name
+  const Input = multi ? Checkbox : Radio
+  const labelProps = variant === 'displayInput' ? Object.assign(props, { padding: 'none' }) : props
 
   return (
     <div
@@ -87,15 +100,49 @@ const SelectableCard = ({
           id={inputIdPresent}
           name={name}
           onChange={onChange}
+          ref={inputRef}
           type={inputType}
           value={value}
       />
+
       <label
-          className={globalProps(props)}
+          className={globalProps(labelProps)}
           htmlFor={inputIdPresent}
       >
-        {text || children}
-        {displayIcon()}
+        <div className="buffer">
+          <Choose>
+            <When condition={variant === 'displayInput'}>
+              <Flex vertical="center">
+                <Flex
+                    orientation="column"
+                    padding="sm"
+                    paddingRight="xs"
+                    vertical="center"
+                >
+                  <Input dark={dark}>
+                    <input
+                        checked={checked}
+                        disabled={disabled}
+                        onClick={handleClick}
+                        type={inputType}
+                    />
+                  </Input>
+                </Flex>
+                <div className="separator" />
+                <Card.Body
+                    dark={dark}
+                    padding="sm"
+                >
+                  {text || children}
+                </Card.Body>
+              </Flex>
+            </When>
+            <Otherwise>
+              {text || children}
+            </Otherwise>
+          </Choose>
+          {displayIcon()}
+        </div>
       </label>
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -14,9 +14,20 @@ $pb_selectable_card_border: 2px;
   display: block;
   margin-bottom: 0;
 
-  label {
+
+  > label {
+    > .buffer {
+      display: inherit;
+      flex-direction: inherit;
+      padding: 1px;
+      transition-property: all;
+      transition-duration: $transition_short;
+      transition-timing-function: $easeIn;
+    }
+
     @include pb_card;
-    padding: $space_sm + 1;
+    padding: $space_sm;
+    margin-bottom: $space_sm;
     cursor: pointer;
 
     @media (hover:hover) {
@@ -57,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;
 
@@ -87,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

@@ -1,55 +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(props) {
-    return (
-      <div className="pb--doc-demo-row">
-
-        <SelectableCard
-            checked={this.state.block}
-            inputId="block"
-            name="block"
-            onChange={this.handleSelect}
-            value="block"
-            {...props}
-        >
-          <Title
-              size={4}
-              text="Block"
-              {...props}
-          />
-          <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

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

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