playbook_ui 7.0.0.pre.alpha9 → 7.0.1.pre.alpha5

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

@@ -45,15 +45,11 @@ const SelectableIcon = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(
-    buildCss('pb_selectable_icon_kit', {
-      checked: checked,
-      disabled: disabled,
-      enabled: !disabled,
-    }),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_selectable_icon_kit',
+    { 'checked': checked,
+      'disabled': disabled,
+      'enabled': !disabled },
+    className), globalProps(props))
 
   const inputType = multi === false ? 'radio' : 'checkbox'
 

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

@@ -1,80 +1,82 @@
-@import "../tokens/transition";
-
 [class^=pb_selectable_icon] {
 
-	text-align: center;
-	cursor: pointer;
-	transition: all $transition_short ease;
-	@media (hover:hover) {
-		&:hover * {
-			transition: all $transition_short ease;
-			transform: translateY(-2px);
-		}
-	}
+  text-align: center;
+  cursor: pointer;
 
-	* {
-		cursor: pointer;
-	}
+  :hover * {
+		filter: drop-shadow(0 0 8px rgba($shadow, 0.25));
+		transition-duration: $transition_short;
+		transition-timing-function: $easeIn;
+  }
 
-	h4 {
-		margin-top: $space_xs !important;
-		user-select: none;
-		transition: color $transition_short ease;
-	}
+  * {
+    cursor: pointer;
+  }
 
-	label {
-		transition: color $transition_short ease;
-	}
+  h4 {
+    margin-top: $space_xs !important;
+    user-select: none;
+  }
 
-	&[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: color $transition_short ease;
+
+		transition-property: color;
+		transition-duration: $transition_short;
 
 		&:checked ~ label * {
-			transition: color $transition_short ease;
+			transition-timing-function: $easeIn;
 			color: $primary;
 		}
 		
 		&:not(:checked) ~ label {
-			transition: color $transition_short ease;
+			transition-timing-function: $easeOut;
 			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: color $transition_short ease;
-			
+
+			transition-property: color;
+			transition-duration: $transition_short;
+
+
 			&:checked ~ label * {
-				transition: color $transition_short ease;
+				transition-timing-function: $easeIn;
 				color: $active_dark !important;
 			}
 				
 			&:not(:checked) ~ label {
-				transition: color $transition_short ease;
+				transition-timing-function: $easeOut;
 				color: $text_dk_lighter;
 
 				h4 {
-					transition: color $transition_short ease;
+					transition-delay: .15s;
 					color: $text_dk_default;
 				}
 			}

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -19,16 +19,14 @@ $transition-speed: 0.2s;
             transition: all $transition-speed ease;
           }
 
-          @media (hover:hover) {
-            &:hover {
-              box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
+          &:hover {
+            box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
 
-              td {
-                background: $white;
-                border-color: darken($border_light, 10%);
-                border-top-width: 1px;
-                border-top-color: transparent;
-              }
+            td {
+              background: $white;
+              border-color: darken($border_light, 10%);
+              border-top-width: 1px;
+              border-top-color: transparent;
             }
           }
         }
@@ -40,12 +38,11 @@ $transition-speed: 0.2s;
               border-top-color: $border_light;
               border-top-width: 1px;
             }
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-top-width: 1px;
-                  border-top-color: $border_light;
-                }
+
+            &:hover {
+              td {
+                border-top-width: 1px;
+                border-top-color: $border_light;
               }
             }
           }

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -91,12 +91,10 @@
           }
         }
       }
-      @media (hover:hover) {
-        &:hover {
-          tbody {
-            tr {
-              box-shadow: 0 0 0 $white !important;
-            }
+      &:hover {
+        tbody {
+          tr {
+            box-shadow: 0 0 0 $white !important;
           }
         }
       }

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -42,12 +42,10 @@ $table-dark-card-bg: $bg_dark;
       &:not(.no-hover) {
         tbody {
           tr {
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-color: $border_dark !important;
-                  background: $bg_dark;
-                }
+            &:hover {
+              td {
+                border-color: $border_dark !important;
+                background: $bg_dark;
               }
             }
           }

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -17,7 +17,7 @@
       @include pb_body_light;
     }
 
-    input {
+    > input:first-child {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
@@ -38,7 +38,7 @@
         @include pb_body_light_dark;
       }
 
-      input {
+      > input:first-child {
         @include pb_textarea_dark;
         @include pb_title_4;
         @include pb_title_dark;
@@ -54,7 +54,7 @@
 
     &.error {
       .text_input_wrapper {
-        input {
+        > input:first-child {
           border-color: $error_dark;
         }
       }
@@ -66,7 +66,7 @@
       [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
-      input {
+      > input:first-child {
         border-color: $error;
       }
     }

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -10,24 +10,24 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Body, Icon, Title  } from '../'
 
 type TimeProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: 'left" | "center' | 'right',
   className?: string | array<string>,
   data?: string,
   date: string,
   id?: string,
+  showTimezone?: boolean,
   size?: 'lg' | 'sm' | 'xs',
-  timeZone?: string,
 }
 
 const Time = (props: TimeProps) => {
-  const { align, className, date, size, timeZone } = props
+  const { align, className, date, showTimezone, size } = props
   const classes = classnames(
     className,
     buildCss('pb_time_kit', align, size),
     globalProps(props)
   )
 
-  const dateTimestamp = new DateTime({ value: date, zone: timeZone })
+  const dateTimestamp = new DateTime({ value: date })
 
   return (
     <div className={classes}>
@@ -53,9 +53,7 @@ const Time = (props: TimeProps) => {
                   text={dateTimestamp.toTimeWithMeridian()}
               />
             </If>
-            <If condition={timeZone !== undefined}>
-              <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span>
-            </If>
+            { showTimezone && <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span> }
           </span>
         </time>
       </span>

data/app/pb_kits/playbook/pb_time/docs/_time_dark.jsx

@@ -12,12 +12,14 @@ const TimeDark = () => {
       <Time
           dark
           date={new Date()}
+          showTimezone
           size="lg"
       />
       <br />
       <Time
           dark
           date={new Date()}
+          showTimezone
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

@@ -6,17 +6,19 @@ const TimeDefault = () => {
     <div>
       <Time
           date={new Date()}
+          showTimezone
           size="lg"
-          timeZone="America/New_York"
       />
       <br />
       <Time
           date={new Date().getTime()}
+          showTimezone
           size="sm"
       />
       <br />
       <Time
           date="2012-08-02T09:49:29Z"
+          showTimezone
           size="xs"
       />
     </div>

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx

@@ -6,6 +6,7 @@ const TimeStamp = () => {
     <div>
       <Time
           date={new Date()}
+          showTimezone
           size="sm"
       />
 
@@ -13,6 +14,7 @@ const TimeStamp = () => {
 
       <Time
           date={new Date().getTime()}
+          showTimezone
           size="sm"
       />
 
@@ -20,6 +22,7 @@ const TimeStamp = () => {
 
       <Time
           date="2012-08-02T15:49:29Z"
+          showTimezone
           size="sm"
       />
     </div>

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

@@ -7,6 +7,5 @@ examples:
   react:
   - time_default: Sizes
   - time_timestamp: Timestamp Values
-  - time_timezone: Handling Timezones
   - time_align: Alignment
   - time_dark: Dark

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

@@ -2,4 +2,3 @@ export { default as TimeDefault } from './_time_default.jsx'
 export { default as TimeTimestamp } from './_time_timestamp.jsx'
 export { default as TimeAlign } from './_time_align.jsx'
 export { default as TimeDark } from './_time_dark.jsx'
-export { default as TimeTimezone } from './_time_timezone.jsx'

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -14,7 +14,7 @@ type TitleProps = {
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
-  variant?: null | "link",
+  variant?: null | "primary",
 }
 
 const Title = (props: TitleProps) => {

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -16,14 +16,14 @@
 
   &[class*=_4] {
     @include pb_title_4;
-
-    &[class*=_link]  {
-      color: $primary;
-    }
-
   }
 
   &.dark {
     @include pb_title_dark;
   }
+
+  &[class*=_link]  {
+    color: $primary;
+  }
+
 }

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

@@ -1,9 +1,7 @@
 examples:
   rails:
   - title_light: Light UI
-  - title_variants: Variants
   - title_dark: Dark UI
   react:
   - title_light: Light UI
-  - title_variants: Variants
   - title_dark: Dark UI

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

@@ -1,3 +1,2 @@
 export { default as TitleLight } from './_title_light.jsx'
 export { default as TitleDark } from './_title_dark.jsx'
-export { default as TitleVariants } from './_title_variants.jsx'

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -10,11 +10,11 @@ import { buildCss, buildDataProps } from '../utilities/props'
 
 type TitleDetailProps = {
   align?: "left" | "center" | "right",
-  className?: string,
+  className?: String,
   data?: object,
-  detail: string,
-  id?: string,
-  title: string,
+  detail: String,
+  id?: String,
+  title: String,
 }
 
 const TitleDetail = (props: TitleDetailProps) => {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -25,10 +25,8 @@
   .pb_item_kit {
     padding: ($space_xs + 2) 0;
 
-    @media (hover:hover) {
-      &:hover {
-        background-color: $bg_light;
-      }
+    &:hover {
+      background-color: $bg_light;
     }
   }
   

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -1,10 +1,10 @@
 @import "./opacity";
 
-/*=====================================
-Base colors should not be documented.
-Only document color use.
+//=====================================
+// Base colors should not be documented.
+// Only document color use.
 
-Colors -----------------------------*/
+// Colors -----------------------------
 $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
@@ -22,11 +22,11 @@ $colors: (
   orange:             $orange
 );
 
-/* Specialty Gradient -----------------*/
+// Specialty Gradient -----------------
 $gradient_start:      #1C75F2;
 $gradient_end:        $royal;
 
-/* Interface colors -------------------*/
+// Interface colors -------------------
 $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
@@ -42,7 +42,7 @@ $interface_colors: (
 
 );
 
-/* Main colors ------------------------*/
+// Main colors ------------------------
 $primary:             $royal;
 $secondary:           $yellow;
 $tertiary:            $purple;
@@ -51,17 +51,17 @@ $main_colors: (
   secondary:          $secondary,
   tertiary:           $tertiary
 );
-/*=====================================
+//=====================================
 
-Background colors ------------------*/
+// Background colors ------------------
 $bg_light:            $silver;
-$bg_dark:             #172257;
+$bg_dark:             #0a0527;
 $background_colors: (
   bg_light:           $bg_light,
   bg_dark:            $bg_dark
 );
 
-/* Card colors ------------------*/
+// Card colors ------------------
 $card_light:          $white;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
@@ -74,15 +74,15 @@ $action_colors: (
   primary_action:            $primary-action
 );
 
-/* Active colors ----------------------*/
+// Active colors ----------------------
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff;
+$active_dark:         #0082ff; 
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
 );
 
-/* Hover colors -----------------------*/
+// Hover colors -----------------------
 $hover_light:         darken($silver, 5%);
 $hover_dark:          rgba($white, $opacity_2);
 $hover_colors: (
@@ -90,7 +90,7 @@ $hover_colors: (
   hover_dark:         $hover_dark
 );
 
-/* Focus colors -----------------------*/
+// Focus colors -----------------------
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
@@ -98,7 +98,7 @@ $focus_input_colors: (
   focus_input_dark:         $focus_input_dark
 );
 
-/* Border colors ----------------------*/
+// Border colors ----------------------
 $border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
@@ -106,13 +106,13 @@ $border_colors: (
   border_dark:        $border_dark
 );
 
-/* Shadow colors ----------------------*/
+// Shadow colors ----------------------
 $shadow:        rgba(#3C6AAC, $opacity_2);
 $shadow_colors: (
   shadow:       $shadow,
 );
 
-/* Text colors ------------------------*/
+// Text colors ------------------------
 $text_lt_default:     $charcoal;
 $text_lt_light:       #919EAB;
 $text_lt_lighter:     $slate;
@@ -128,7 +128,7 @@ $text_colors: (
   text_dk_lighter:    $text_dk_lighter
 );
 
-/* Data colors ------------------------*/
+// Data colors ------------------------
 $data_1:              $royal;
 $data_2:              $yellow;
 $data_3:              $purple;
@@ -148,7 +148,7 @@ $data_colors: (
   data_8:             $data_8
 );
 
-/* Status colors ----------------------*/
+// Status colors ----------------------
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
@@ -174,10 +174,10 @@ $status_color_text: (
   primary:            $primary
 );
 
-/* Link colors ------------------------*/
+// Link colors ------------------------
 $primary_action:      $primary;
 
-/* Product colors ---------------------*/
+// Product colors ---------------------
 $windows:             $royal;
 $siding:              $yellow;
 $doors:               $teal;
@@ -195,7 +195,7 @@ $product_colors: (
   insulation:         $insulation
 );
 
-/* Category colors ---------------------*/
+// Category colors ---------------------
 $category_1:   $royal;
 $category_2:   #0CD2E5;
 $category_3:   $yellow;
@@ -252,6 +252,7 @@ $transparent: transparent;
 }
 
 :export {
+
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
       #{$name}: $color;