playbook_ui 7.13.0.pre.alpha1 → 7.16.0

data/app/pb_kits/playbook/pb_popover/docs/index.js

@@ -3,8 +3,3 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
-export { default as PopoverDark } from './_popover_dark.jsx'
-export { default as PopoverListDark } from './_popover_list_dark.jsx'
-export { default as PopoverCloseDark } from './_popover_close_dark.jsx'
-export { default as PopoverZIndexDark } from './_popover_z_index_dark.jsx'
-export { default as PopoverScrollHeightDark } from './_popover_scroll_height_dark.jsx'

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -11,6 +11,7 @@
     width: 22px;
     min-width: 22px;
     height: 22px;
+    box-sizing: border-box;
     border-radius: 1000px;
     border: 2px solid $border_light;
     margin-right: $space_xs;

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -12,6 +12,11 @@
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
     padding-right: $space_xl;
+    color: transparent !important;
+    text-shadow: 0 0 0 $text_lt_default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $focus_input_light;
@@ -20,8 +25,6 @@
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
     }
-    color: transparent !important;
-    text-shadow: 0 0 0 $text_lt_default;
   }
   option {
     color: $text_lt_default;
@@ -62,12 +65,12 @@
       @include pb_title_dark;
       background: $focus_input_dark;
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+      text-shadow: 0 0 0 $text_dk_default;
       @media (hover:hover) {
         &:hover, &:active, &:focus {
           background-color: tint($focus_input_dark, 5%);
         }
       }
-      text-shadow: 0 0 0 $text_dk_default;
     }
     .pb_select_kit_caret {
       color: $white;
@@ -82,5 +85,4 @@
       }
     }
   }
-
 }

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb

@@ -9,17 +9,60 @@
     <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
   <% end %>
 
-  <label for="<%= object.input_id_present %>">
-    <% if object.children.nil? %>
-      <%= pb_rails("body", props: { text: object.text }) %>
-    <% else %>
-      <%= capture(&object.children) %>
-    <% end %>
-    <% if object.icon %>
-      <div class="pb_selectable_card_circle">
-        <%= pb_rails("icon", props: { icon: "check", fixed_width: true }) %>
-      </div>
-    <% end %>
+  <label class="<%= object.label_class %>" for="<%= object.input_id_present %>">
+    <div class="buffer">
+      <% if object.variant == "display_input" %>
+        <%= pb_rails("flex", props: { vertical: "center" }) do %>
+          <%= pb_rails("flex", props: {
+            orientation: "column",
+            padding: "sm",
+            padding_right: "xs",
+            vertical: "center",
+          }) do %>
+            <%= pb_rails(object.input, props: { text: "" }) do %>
+              <input <%= object.is_checked %> <%= object.is_disabled %> id="checkbox-styled" name="<%= object.name %>-display" type="<%= object.input %>">
+            <% end %>
+          <% end %>
+          <div class="separator"></div>
+          <%= pb_rails("card/card_body", props: { padding: "sm", status: object.status }) do %>
+            <% if object.children.nil? %>
+              <%= pb_rails("body", props: { text: object.text }) %>
+            <% else %>
+              <%= capture(&object.children) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% else %>
+        <% if object.children.nil? %>
+          <%= pb_rails("body", props: { text: object.text }) %>
+        <% else %>
+          <%= capture(&object.children) %>
+        <% end %>
+        <% if object.icon %>
+          <div class="pb_selectable_card_circle">
+            <%= pb_rails("icon", props: { icon: "check", fixed_width: true }) %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
   </label>
 
+  <% if object.variant == "display_input" %>
+    <script>
+      var outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
+      var innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
+
+      outerCheckbox.addEventListener("change", () => {
+        const outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
+        const innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
+        innerCheckbox.checked = outerCheckbox.checked
+      })
+
+      innerCheckbox.addEventListener("change", () => {
+        const outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
+        const innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
+        outerCheckbox.checked = innerCheckbox.checked
+      })
+    </script>
+  <% end %>
 <% end %>

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,8 +20,10 @@ type SelectableCardProps = {
   checked: boolean,
   children?: array<React.ReactChild>,
   className?: string,
+  dark?: boolean,
   data: object,
   disabled?: boolean,
+  error?: boolean,
   icon?: boolean,
   id?: string,
   inputId?: string,
@@ -30,6 +32,7 @@ type SelectableCardProps = {
   onChange: InputCallback<HTMLInputElement>,
   text?: string,
   value?: string,
+  variant?: string,
 }
 
 const SelectableCard = ({
@@ -37,8 +40,10 @@ const SelectableCard = ({
   checked = false,
   children,
   className,
+  dark = false,
   data = {},
   disabled = false,
+  error = false,
   icon = false,
   inputId = null,
   multi = true,
@@ -46,16 +51,22 @@ const SelectableCard = ({
   onChange = noop,
   text,
   value,
+  variant = 'default',
   ...props
 }: SelectableCardProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
   const classes = classnames(buildCss('pb_selectable_card_kit',
-    { 'checked': checked,
+    {
+      'checked': checked,
       'disabled': disabled,
-      'enabled': !disabled }),
-  globalProps(props), className)
+      'enabled': !disabled,
+    }),
+  { error },
+  dark ? 'dark' : '',
+  className
+  )
 
   const displayIcon = () => {
     if (icon === true) {
@@ -70,9 +81,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 +105,51 @@ 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}
+                        readOnly
+                        type={inputType}
+                    />
+                  </Input>
+                </Flex>
+                <div className="separator" />
+                <Card.Body
+                    dark={dark}
+                    padding="sm"
+                    status={error ? 'negative' : null}
+                >
+                  {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,19 @@ $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 +67,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 +109,41 @@ $pb_selectable_card_border: 2px;
         background: transparent;
       }
     }
+
+    .separator {
+      background: $bg_dark;
+    }
+
+    &.error {
+      > label {
+        border-color: $error_dark;
+      }
+      .separator{
+        background: $error_dark;
+        width: 2px;
+      }
+    }
+  }
+
+  .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;
+  }
+
+  &.error {
+    > label {
+      border-color: $error;
+    }
+    .separator {
+      background: $error;
+      width: 2px;
+    }
   }
 }

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