playbook_ui 6.3.1 → 6.4.0

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

@@ -5,6 +5,7 @@
 
 [class^=pb_radio_kit] {
   display: inline-flex;
+  cursor: pointer;
 
   .pb_radio_button {
     width: 22px;
@@ -18,8 +19,10 @@
     transition-timing-function: $easeIn;
   }
 
-  &:hover .pb_radio_button {
-    border-color: $primary_action;
+  @media (hover:hover) {
+    &:hover .pb_radio_button {
+      border-color: $primary_action;
+    }
   }
 
   input {
@@ -37,8 +40,10 @@
       border: 6px solid $primary;
     }
 
-    &:hover .pb_radio_button {
-      border-color: $primary_action;
+    @media (hover:hover) {
+      &:hover .pb_radio_button {
+        border-color: $primary_action;
+      }
     }
     &.error {
       > .pb_radio_button {

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;
@@ -60,8 +62,10 @@
       @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_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_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;
 				}
 			}

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

@@ -19,14 +19,16 @@ $transition-speed: 0.2s;
             transition: all $transition-speed ease;
           }
 
-          &:hover {
-            box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
+          @media (hover:hover) {
+            &: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;
+              }
             }
           }
         }
@@ -38,11 +40,12 @@ $transition-speed: 0.2s;
               border-top-color: $border_light;
               border-top-width: 1px;
             }
-
-            &:hover {
-              td {
-                border-top-width: 1px;
-                border-top-color: $border_light;
+            @media (hover:hover) {
+              &:hover {
+                td {
+                  border-top-width: 1px;
+                  border-top-color: $border_light;
+                }
               }
             }
           }

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

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

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

@@ -42,10 +42,12 @@ $table-dark-card-bg: $bg_dark;
       &:not(.no-hover) {
         tbody {
           tr {
-            &:hover {
-              td {
-                border-color: $border_dark !important;
-                background: $bg_dark;
+            @media (hover:hover) {
+              &: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:first-child {
+    input {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
@@ -38,7 +38,7 @@
         @include pb_body_light_dark;
       }
 
-      > input:first-child {
+      input {
         @include pb_textarea_dark;
         @include pb_title_4;
         @include pb_title_dark;
@@ -54,7 +54,7 @@
 
     &.error {
       .text_input_wrapper {
-        > input:first-child {
+        input {
           border-color: $error_dark;
         }
       }
@@ -66,7 +66,7 @@
       [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
-      > input:first-child {
+      input {
         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, showTimezone, size } = props
+  const { align, className, date, size, timeZone } = props
   const classes = classnames(
     className,
     buildCss('pb_time_kit', align, size),
     globalProps(props)
   )
 
-  const dateTimestamp = new DateTime({ value: date })
+  const dateTimestamp = new DateTime({ value: date, zone: timeZone })
 
   return (
     <div className={classes}>
@@ -53,7 +53,9 @@ const Time = (props: TimeProps) => {
                   text={dateTimestamp.toTimeWithMeridian()}
               />
             </If>
-            { showTimezone && <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span> }
+            <If condition={timeZone !== undefined}>
+              <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span>
+            </If>
           </span>
         </time>
       </span>

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

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

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

@@ -0,0 +1,59 @@
+import React from 'react'
+import Time from '../_time.jsx'
+
+const TimeTimeZone = () => {
+  const zones = {
+    east: 'America/New_York',
+    central: 'America/Chicago',
+    mountain: 'America/Denver',
+    west: 'America/Los_Angeles',
+    asia: 'Asia/Tokyo',
+  }
+  return (
+    <div>
+      <h4>{'East Coast'}</h4>
+      <Time
+          date={new Date().toLocaleString('en-US', { timeZone: zones.east })}
+          size="lg"
+          timeZone={zones.east}
+      />
+      <br />
+      <br />
+      <h4>{'Central'}</h4>
+      <Time
+          date={new Date().toLocaleString('en-US', { timeZone: zones.central })}
+          size="sm"
+          timeZone={zones.central}
+      />
+      <br />
+      <br />
+      <h4>{'Mountain'}</h4>
+      <Time
+          date={new Date().toLocaleString('en-US', { timeZone: zones.mountain })}
+          size="sm"
+          timeZone={zones.mountain}
+      />
+
+      <br />
+      <br />
+      <h4>{'West Coast'}</h4>
+      <Time
+          date={new Date().toLocaleString('en-US', { timeZone: zones.west })}
+          size="sm"
+          timeZone={zones.west}
+      />
+
+      <br />
+      <br />
+      <h4>{'Tokyo, Japan'}</h4>
+      <Time
+          date={new Date('2012-08-02T09:49:29Z').toLocaleString('en-US', { timeZone: zones.asia })}
+          size="sm"
+          timeZone={zones.asia}
+      />
+
+    </div>
+  )
+}
+
+export default TimeTimeZone