playbook_ui 7.0.0 → 7.0.1.pre.alpha1

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

@@ -1,2 +1,5 @@
 export { default as RadioDefault } from './_radio_default.jsx'
+export { default as RadioDark } from './_radio_dark.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
+export { default as RadioError } from './_radio_error.jsx'
+export { default as RadioDarkError } from './_radio_dark_error.jsx'

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -15,8 +15,6 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
-      prop :input_options, type: Playbook::Props::Hash,
-                           default: {}
       prop :name, type: Playbook::Props::String,
                   default: "radio_name"
       prop :text, type: Playbook::Props::String,
@@ -28,6 +26,10 @@ module Playbook
         generate_classname("pb_radio_kit") + error_class
       end
 
+      def input
+        check_box_tag(name, value, checked)
+      end
+
       def selected
         "checked" if checked == true
       end

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -30,7 +30,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   const themeStyle = dark === true ? '_dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, globalProps(props))
 
   return (
 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("section_separator", props: { text: "Title Separator", variant: "background", dark: true }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dark.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { SectionSeparator } from '../../'
+
+const SectionSeparatorDark = () => {
+  return (
+    <SectionSeparator
+        dark
+        text="Title Separator"
+        variant="background"
+    />
+  )
+}
+
+export default SectionSeparatorDark

data/app/pb_kits/playbook/pb_section_separator/docs/example.yml

@@ -5,10 +5,11 @@ examples:
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
-
+  - section_separator_dark: Dark
 
   react:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
+  - section_separator_dark: Dark

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

@@ -2,3 +2,4 @@ export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
+export { default as SectionSeparatorDark } from './_section_separator_dark.jsx'

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

@@ -11,11 +11,9 @@
     appearance: none;
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
-    padding-right: $space_xl;
-    @media (hover:hover) {
-      &:hover, &:active, &:focus {
-        background-color: $focus_input_light;
-      }
+    padding-right: $space_lg;
+    &:hover, &:active, &:focus {
+      background-color: $focus_input_light;
     }
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
@@ -62,10 +60,8 @@
       @include pb_title_dark;
       background: $focus_input_dark;
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
-      @media (hover:hover) {
-        &:hover, &:active, &:focus {
-          background-color: tint($focus_input_dark, 5%);
-        }
+      &:hover, &:active, &:focus {
+        background-color: tint($focus_input_dark, 5%);
       }
       text-shadow: 0 0 0 $text_dk_default;
     }

data/app/pb_kits/playbook/pb_select/docs/_select_dark.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  dark: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_dark.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Select } from '../../'
+
+const SelectDark = () => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          dark
+          label="Favorite Food"
+          name="food"
+          options={options}
+          value="2"
+      />
+    </div>
+  )
+}
+
+export default SelectDark

data/app/pb_kits/playbook/pb_select/docs/_select_dark_error.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("select", props: {
+  dark: true,
+  error: "Please make a valid selection",
+  label: "Favorite Food",
+  name: "food",
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_dark_error.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Body, Select } from '../..'
+
+const SelectDarkError = () => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          dark
+          error="Please make a valid selection"
+          label="Favorite Food"
+          name="food"
+          options={options}
+          value="2"
+      />
+      <Body
+          dark
+          error="Please make a valid selection"
+          status="negative"
+      />
+    </div>
+  )
+}
+
+export default SelectDarkError

data/app/pb_kits/playbook/pb_select/docs/example.yml

@@ -8,8 +8,9 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
+  - select_dark: Dark Select
   - select_error: Select w/ Error
-
+  - select_dark_error: Select Dark w/ Error
 
 
   react:
@@ -20,4 +21,6 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
+  - select_dark: Dark Select
   - select_error: Select w/ Error
+  - select_dark_error: Select Dark w/ Error

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

@@ -1,4 +1,5 @@
 export { default as SelectDefault } from './_select_default.jsx'
+export { default as SelectDark } from './_select_dark.jsx'
 export { default as SelectBlank } from './_select_blank.jsx'
 export { default as SelectDisabledOptions } from './_select_disabled_options.jsx'
 export { default as SelectDisabled } from './_select_disabled.jsx'
@@ -6,3 +7,4 @@ export { default as SelectRequired } from './_select_required.jsx'
 export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
+export { default as SelectDarkError } from './_select_dark_error.jsx'

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

@@ -18,11 +18,9 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm + 1;
     cursor: pointer;
 
-    @media (hover:hover) {
-      &:hover {
-        box-shadow: $shadow-deep;
-        border-color: $slate;
-      }
+    &:hover {
+      box-shadow: $shadow-deep;
+      border-color: $slate;
     }
 
     .pb_selectable_card_circle {
@@ -68,7 +66,6 @@ $pb_selectable_card_border: 2px;
   }
 
   &.dark {
-    color: $white;
     label {
       @include pb_card_dark;
       background: transparent;

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

@@ -0,0 +1,45 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card", props: {
+    input_id: "selected_with_icon_dark",
+    name: "selected_with_icon_dark",
+    value: "selected_with_icon_dark",
+    checked: true,
+    icon: true,
+    dark: true
+  }) do %>
+    Selected, with icon
+  <% end %>
+
+  <%= pb_rails("selectable_card", props: {
+    input_id: "selected_without_icon_dark",
+    name: "selected_without_icon_dark",
+    value: "selected_without_icon_dark",
+    checked: true,
+    icon: false,
+    dark: true
+  }) do %>
+    Selected, without icon
+  <% end %>
+
+  <%= pb_rails("selectable_card", props: {
+    input_id: "unselected_dark",
+    name: "unselected_dark",
+    value: "unselected_dark",
+    checked: false,
+    dark: true
+  }) do %>
+    Unselected
+  <% end %>
+
+  <%= pb_rails("selectable_card", props: {
+    input_id: "disabled_dark",
+    name: "disabled_dark",
+    value: "disabled_dark",
+    disabled: true,
+    dark: true
+  }) do %>
+    Disabled
+  <% end %>
+  
+</div>

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

@@ -0,0 +1,72 @@
+import React from 'react'
+import SelectableCard from '../_selectable_card.jsx'
+
+class SelectableCardDark extends React.Component {
+  state = {
+    selectedWithIconDark: true,
+    selectedWithoutIconDark: true,
+    unselectedDark: false,
+  }
+
+  handleSelect = (event) => {
+    this.setState({
+      [event.target.id]: event.target.checked,
+    })
+  }
+
+  render() {
+    return (
+      <div className="pb--doc-demo-row">
+
+        <SelectableCard
+            checked={this.state.selectedWithIconDark}
+            dark
+            icon
+            inputId="selectedWithIconDark"
+            name="selectedWithIconDark"
+            onChange={this.handleSelect}
+            value="selectedWithIconDark"
+        >
+          {'Selected, with icon'}
+        </SelectableCard>
+
+        <SelectableCard
+            checked={this.state.selectedWithoutIconDark}
+            dark
+            icon={false}
+            inputId="selectedWithoutIconDark"
+            name="selectedWithoutIconDark"
+            onChange={this.handleSelect}
+            value="selectedWithoutIconDark"
+        >
+          {'Selected, without icon'}
+        </SelectableCard>
+
+        <SelectableCard
+            checked={this.state.unselectedDark}
+            dark
+            inputId="unselectedDark"
+            name="unselectedDark"
+            onChange={this.handleSelect}
+            value="unselectedDark"
+        >
+          {'Unselected'}
+        </SelectableCard>
+
+        <SelectableCard
+            dark
+            disabled
+            inputId="disabled_dark"
+            name="disabled_dark"
+            onChange={this.handleSelect}
+            value="disabled_dark"
+        >
+          {'Unselected'}
+        </SelectableCard>
+
+      </div>
+    )
+  }
+}
+
+export default SelectableCardDark

data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml

@@ -4,9 +4,10 @@ examples:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
-
+  - selectable_card_dark: Dark
   
   react:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
+  - selectable_card_dark: Dark

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

@@ -1,3 +1,4 @@
 export { default as SelectableCardDefault } from './_selectable_card_default.jsx'
 export { default as SelectableCardSingleSelect } from './_selectable_card_single_select.jsx'
+export { default as SelectableCardDark } from './_selectable_card_dark.jsx'
 export { default as SelectableCardBlock } from './_selectable_card_block.jsx'

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx

@@ -51,15 +51,11 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(
-    buildCss('pb_selectable_card_icon_kit', {
-      checked: checked,
-      disabled: disabled,
-      enabled: !disabled,
-    }),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_selectable_card_icon_kit',
+    { 'checked': checked,
+      'disabled': disabled,
+      'enabled': !disabled },
+    className), globalProps(props))
 
   return (
     <div