playbook_ui 6.1.0 → 6.4.0

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

@@ -3,17 +3,18 @@ import { Radio } from '../../'
 
 const RadioDark = () => {
   return (
-    <div>
+    <>
       <Radio
           dark
+          defaultChecked
           label="Power"
           name="Group1"
           value="Power"
       />
       <br />
       <Radio
-          checked
           dark
+          defaultChecked={false}
           label="Nitro"
           name="Group1"
           value="Nitro"
@@ -21,11 +22,12 @@ const RadioDark = () => {
       <br />
       <Radio
           dark
+          defaultChecked={false}
           label="Google"
           name="Group1"
           value="Google"
       />
-    </div>
+    </>
   )
 }
 export default RadioDark

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

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

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

@@ -13,8 +13,6 @@ 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 :name, type: Playbook::Props::String,
@@ -23,9 +21,9 @@ module Playbook
                   default: "Radio Text"
       prop :value, type: Playbook::Props::String,
                    default: "radio_text"
-      prop :object
+
       def classname
-        generate_classname("pb_radio_kit", dark_class) + error_class
+        generate_classname("pb_radio_kit") + error_class
       end
 
       def input
@@ -45,10 +43,6 @@ 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

@@ -7,12 +7,12 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SectionSeparatorProps = {
   aria: object,
-  className: String,
-  dark?: Boolean,
+  className: string,
+  dark?: boolean,
   data: object,
-  id: String,
+  id: string,
   orientation?: "horizontal" | "vertical",
-  text: String,
+  text: string,
   variant?: "card" | "background",
 }
 

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, dark: object.dark, }) %>
+      <%= pb_rails("caption", props: { text: object.label }) %>
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
     <% if object.children %>
       <%= capture(&object.children) %>
-      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% else %>
       <%= select_tag(
         object.name,
@@ -28,7 +28,7 @@
         include_blank: object.include_blank,
       )
       %>
-      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { 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,7 +29,6 @@ type SelectProps = {
   blankSelection?: string,
   children?: React.Node,
   className?: string,
-  dark?: boolean,
   data?: object,
   disabled?: boolean,
   error?: string,
@@ -58,7 +57,7 @@ const Select = ({
   aria = {},
   blankSelection,
   children,
-  dark = false,
+  className,
   data = {},
   disabled = false,
   error,
@@ -71,17 +70,18 @@ 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={css}
+        className={classes}
     >
       <If condition={label}>
         <label
@@ -89,13 +89,12 @@ const Select = ({
             htmlFor={name}
         >
           <Caption
-              dark={dark}
               text={label}
           />
         </label>
       </If>
       <label
-          className="pb_select_kit_wrapper"
+          className={selectWrapperClass}
           htmlFor={name}
       >
         <If condition={children}>
@@ -119,7 +118,6 @@ const Select = ({
         </If>
         <If condition={error}>
           <Body
-              dark={dark}
               status="negative"
               text={error}
           />

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

@@ -12,8 +12,10 @@
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
     padding-right: $space_lg;
-    &:hover, &:active, &:focus {
-      background-color: $focus_input_light;
+    @media (hover:hover) {
+      &:hover, &:active, &:focus {
+        background-color: $focus_input_light;
+      }
     }
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
@@ -53,15 +55,17 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  &[class*=_dark] {
+  &.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);
-      &:hover, &:active, &:focus {
-        background-color: tint($focus_input_dark, 5%);
+      @media (hover:hover) {
+        &: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/select.rb

@@ -12,7 +12,6 @@ module Playbook
       partial "pb_select/select"
 
       prop :blank_selection
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :error
       prop :include_blank
@@ -24,7 +23,7 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_select", dark_class)
+        generate_classname("pb_select")
       end
 
       def select_wrapper_class
@@ -58,10 +57,6 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
-
-      def dark_class
-        dark ? "dark" : nil
-      end
     end
   end
 end

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

@@ -17,19 +17,19 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SelectableCardProps = {
   aria?: object,
-  checked: Boolean,
-  children?: Array<React.ReactChild>,
-  className?: String,
+  checked: boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
   data: object,
-  disabled?: Boolean,
-  icon?: Boolean,
-  id?: String,
-  inputId?: String,
-  multi?: Boolean,
-  name?: String,
+  disabled?: boolean,
+  icon?: boolean,
+  id?: string,
+  inputId?: string,
+  multi?: boolean,
+  name?: string,
   onChange: InputCallback<HTMLInputElement>,
-  text?: String,
-  value?: String,
+  text?: string,
+  value?: string,
 }
 
 const SelectableCard = ({
@@ -54,8 +54,8 @@ const SelectableCard = ({
   const classes = classnames(buildCss('pb_selectable_card_kit',
     { 'checked': checked,
       'disabled': disabled,
-      'enabled': !disabled },
-    className), globalProps(props))
+      'enabled': !disabled }),
+  globalProps(props), className)
 
   const displayIcon = () => {
     if (icon === true) {

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

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

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

@@ -13,19 +13,19 @@ import {
 
 type SelectableCardIconProps = {
   aria?: Object,
-  checked?: Boolean,
-  checkmark: Boolean,
-  className?: String,
-  dark?: Boolean,
+  checked?: boolean,
+  checkmark: boolean,
+  className?: string,
+  dark?: boolean,
   data?: Object,
-  disabled?: Boolean,
-  icon?: String,
-  inputId?: String,
-  multi?: Boolean,
-  name?: String,
-  titleText?: String,
-  bodyText?: String,
-  value?: String,
+  disabled?: boolean,
+  icon?: string,
+  inputId?: string,
+  multi?: boolean,
+  name?: string,
+  titleText?: string,
+  bodyText?: string,
+  value?: string,
   onChange?: (e) => void,
 }
 
@@ -51,11 +51,15 @@ 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 },
-    className), globalProps(props))
+  const classes = classnames(
+    buildCss('pb_selectable_card_icon_kit', {
+      checked: checked,
+      disabled: disabled,
+      enabled: !disabled,
+    }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx

@@ -14,17 +14,17 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SelectableIconProps = {
   aria?: Object,
-  checked?: Boolean,
-  className?: String,
-  disabled?: Boolean,
+  checked?: boolean,
+  className?: string,
+  disabled?: boolean,
   data?: Object,
-  icon: String,
-  inputId: String,
-  inputs: String,
-  multi?: Boolean,
-  name: String,
-  text: String,
-  value?: String
+  icon: string,
+  inputId: string,
+  inputs: string,
+  multi?: boolean,
+  name: string,
+  text: string,
+  value?: string
 }
 
 const SelectableIcon = ({
@@ -45,11 +45,15 @@ const SelectableIcon = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(buildCss('pb_selectable_icon_kit',
-    { 'checked': checked,
-      'disabled': disabled,
-      'enabled': !disabled },
-    className), globalProps(props))
+  const classes = classnames(
+    buildCss('pb_selectable_icon_kit', {
+      checked: checked,
+      disabled: disabled,
+      enabled: !disabled,
+    }),
+    globalProps(props),
+    className
+  )
 
   const inputType = multi === false ? 'radio' : 'checkbox'
 

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -1,82 +1,80 @@
+@import "../tokens/transition";
+
 [class^=pb_selectable_icon] {
 
-  text-align: center;
-  cursor: pointer;
+	text-align: center;
+	cursor: pointer;
+	transition: all $transition_short ease;
+	@media (hover:hover) {
+		&:hover * {
+			transition: all $transition_short ease;
+			transform: translateY(-2px);
+		}
+	}
 
-  :hover * {
-		filter: drop-shadow(0 0 8px rgba($shadow, 0.25));
-		transition-duration: $transition_short;
-		transition-timing-function: $easeIn;
-  }
+	* {
+		cursor: pointer;
+	}
 
-  * {
-    cursor: pointer;
-  }
+	h4 {
+		margin-top: $space_xs !important;
+		user-select: none;
+		transition: color $transition_short ease;
+	}
 
-  h4 {
-    margin-top: $space_xs !important;
-    user-select: none;
-  }
+	label {
+		transition: color $transition_short ease;
+	}
 
-  &[class*=_disabled] {
+	&[class*=_disabled] {
 		opacity: $opacity_6;
 		cursor: not-allowed;
-
 		* {
-				cursor: not-allowed;
+			cursor: not-allowed;
 		}
 	}
 	
-  input[type="checkbox"],
-  input[type="radio"] {
+	input[type="checkbox"],
+	input[type="radio"] {
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		display: none;
 		appearance: none;
-
-		transition-property: color;
-		transition-duration: $transition_short;
+		transition: color $transition_short ease;
 
 		&:checked ~ label * {
-			transition-timing-function: $easeIn;
+			transition: color $transition_short ease;
 			color: $primary;
 		}
 		
 		&:not(:checked) ~ label {
-			transition-timing-function: $easeOut;
+			transition: color $transition_short ease;
 			color: $slate;
 
-			h4 {
-				transition-delay: .15s;
-			}
 		}
 	}
 
 
-  &.dark {
-
+	&.dark {
 		input[type="checkbox"],
 		input[type="radio"] {
 			-webkit-appearance: none;
 			-moz-appearance: none;
 			display: none;
 			appearance: none;
-
-			transition-property: color;
-			transition-duration: $transition_short;
-
-
+			transition: color $transition_short ease;
+			
 			&:checked ~ label * {
-				transition-timing-function: $easeIn;
+				transition: color $transition_short ease;
 				color: $active_dark !important;
 			}
 				
 			&:not(:checked) ~ label {
-				transition-timing-function: $easeOut;
+				transition: color $transition_short ease;
 				color: $text_dk_lighter;
 
 				h4 {
-					transition-delay: .15s;
+					transition: color $transition_short ease;
 					color: $text_dk_default;
 				}
 			}