playbook_ui 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1

data/app/pb_kits/playbook/pb_radio/docs/_radio_dark_error.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("radio", props: {
+  dark: true,
+  error: true,
+  text: "Power",
+  name: "group 1",
+  value: "Power"
+}) %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_dark_error.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Radio } from '../..'
+
+const RadioDarkError = () => {
+  return (
+    <div>
+      <Radio
+          dark
+          error
+          label="Power"
+          name="Group2"
+          value="Power"
+      />
+    </div>
+  )
+}
+export default RadioDarkError

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -5,21 +5,19 @@ const RadioDefault = () => {
   return (
     <div>
       <Radio
-          defaultChecked
           label="Power"
           name="Group2"
           value="Power"
       />
       <br />
       <Radio
-          defaultChecked={false}
+          checked
           label="Nitro"
           name="Group2"
           value="Nitro"
       />
       <br />
       <Radio
-          defaultChecked={false}
           label="Google"
           name="Group2"
           value="Google"

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

@@ -2,11 +2,14 @@ examples:
 
   rails:
   - radio_default: Default
+  - radio_dark: Dark
   - radio_custom: Custom
   - radio_error: With Error
-  - radio_options: With Options
+  - radio_dark_error: With Error
 
   react:
   - radio_default: Default
+  - radio_dark: Dark
   - radio_custom: Custom
   - radio_error: With Error
+  - radio_dark_error: Dark With Error

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

@@ -13,19 +13,23 @@ module Playbook
 
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
+      prop :dark, type: Playbook::Props::Boolean,
+                  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,
                   default: "Radio Text"
       prop :value, type: Playbook::Props::String,
                    default: "radio_text"
-
+      prop :object
       def classname
-        generate_classname("pb_radio_kit") + error_class
+        generate_classname("pb_radio_kit", dark_class) + error_class
+      end
+
+      def input
+        check_box_tag(name, value, checked)
       end
 
       def selected
@@ -41,6 +45,10 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
+
+      def dark_class
+        dark ? "dark" : nil
+      end
     end
   end
 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.html.erb

@@ -4,13 +4,13 @@
   class: object.classname) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
-      <%= pb_rails("caption", props: { text: object.label }) %>
+      <%= pb_rails("caption", props: { text: object.label, dark: object.dark, }) %>
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
     <% if object.children %>
       <%= capture(&object.children) %>
-      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
     <% else %>
       <%= select_tag(
         object.name,
@@ -28,7 +28,7 @@
         include_blank: object.include_blank,
       )
       %>
-      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
     <% end %>
     <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
   </label>

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

@@ -29,6 +29,7 @@ type SelectProps = {
   blankSelection?: string,
   children?: React.Node,
   className?: string,
+  dark?: boolean,
   data?: object,
   disabled?: boolean,
   error?: string,
@@ -57,7 +58,7 @@ const Select = ({
   aria = {},
   blankSelection,
   children,
-  className,
+  dark = false,
   data = {},
   disabled = false,
   error,
@@ -70,18 +71,17 @@ const Select = ({
   value,
   ...props
 }: SelectProps) => {
+  const errorClass = error ? ' error' : ''
+  const css = classnames(buildCss('pb_select', { dark }) + errorClass, globalProps(props))
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
 
-  const classes = classnames(buildCss('pb_select'), globalProps(props), className)
-  const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
-
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classes}
+        className={css}
     >
       <If condition={label}>
         <label
@@ -89,12 +89,13 @@ const Select = ({
             htmlFor={name}
         >
           <Caption
+              dark={dark}
               text={label}
           />
         </label>
       </If>
       <label
-          className={selectWrapperClass}
+          className="pb_select_kit_wrapper"
           htmlFor={name}
       >
         <If condition={children}>
@@ -118,6 +119,7 @@ const Select = ({
         </If>
         <If condition={error}>
           <Body
+              dark={dark}
               status="negative"
               text={error}
           />

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;
@@ -55,17 +53,15 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  &.dark {
+  &[class*=_dark] {
     select {
       @include pb_textarea_dark;
       @include pb_title_4;
       @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'