playbook_ui 6.4.0 → 7.0.0.pre.alpha5

data/app/pb_kits/playbook/pb_legend/_legend.html.erb

@@ -1,11 +1 @@
-<%= content_tag(:div, object.text,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <%= pb_rails("body", props: {color: object.body_color}) do %>
-    <span class="pb_legend_indicator_circle"></span>
-    <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
-    <%= object.text %>
-  <% end %>
-<% end %>
+<%= react_component('Legend', object.chart_options) %>

data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb

@@ -1,13 +1 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname
-    ) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
+<%= react_component('LineGraph', object.chart_options) %>

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }.to_json.html_safe
+        }
       end
 
       def classname

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -45,13 +45,11 @@ $selector: ".pb_nav_list";
         color: $text_lt_default;
       }
 
-      @media (hover:hover) {
-        &:hover {
+      &:hover {
+        color: $primary;
+        #{$selector}_item_icon,
+        #{$selector}_item_text {
           color: $primary;
-          #{$selector}_item_icon,
-          #{$selector}_item_text {
-            color: $primary;
-          }
         }
       }
     }

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -36,13 +36,8 @@ const Nav = (props: NavProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const cardCss = classnames(
-    buildCss('pb_nav_list', variant, orientation, {
-      highlight: highlight,
-    }),
-    className,
-    globalProps(props)
-  )
+  const cardCss = classnames(buildCss('pb_nav_list', variant, orientation, {
+    highlight: highlight }, className, globalProps(props)))
 
   return (
     <div

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -46,15 +46,13 @@ $selector: ".pb_nav_list";
         transition-property: color, border-color, background-color;
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
-        @media (hover:hover) {
-          &:hover {
-            background-color: rgba($primary, 0.03);
-            [class*=_icon] {
-              color: $primary;
-            }
-            [class*=_text] {
-              color: $primary;
-            }
+        &:hover {
+          background-color: rgba($primary, 0.03);
+          [class*=_icon] {
+            color: $primary;
+          }
+          [class*=_text] {
+            color: $primary;
           }
         }
         [class*=_icon_left] {
@@ -112,15 +110,13 @@ $selector: ".pb_nav_list";
           flex: 1;
           font-weight: $regular;
         }
-        @media (hover:hover) {
-          &:hover {
-            background-color: rgba($primary, 0.03);
-            [class*=_icon] {
-              color: $primary;
-            }
-            [class*=_text] {
-              color: $primary;
-            }
+        &:hover {
+          background-color: rgba($primary, 0.03);
+          [class*=_icon] {
+            color: $primary;
+          }
+          [class*=_text] {
+            color: $primary;
           }
         }
       }

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -73,22 +73,23 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={index}
+            key={`valid-contact-${index}`}
         />
-            ))}
+      ))}
       {wrongContacts().map((contactObject, index) => (
-        <>
+        <div key={`wrong-contact-caption-wrapper-${index}`}>
           <Caption
               className="wrong_numbers"
+              key={`wrong-contact-caption-${index}`}
               text="wrong number"
           />
           <Contact
               contactType={contactObject.contactType}
               contactValue={contactObject.contactValue}
-              key={index}
+              key={`wrong-contact-${index}`}
           />
-        </>
-          ))}
+        </div>
+      ))}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -5,6 +5,7 @@ const PersonContactWithWrongNumbers = () => {
   return (
     <>
       <PersonContact
+          key="person-contact-1"
           contacts={[
             {
               contactType: 'email',

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

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

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

@@ -12,10 +12,8 @@
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
     padding-right: $space_lg;
-    @media (hover:hover) {
-      &:hover, &:active, &:focus {
-        background-color: $focus_input_light;
-      }
+    &: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_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_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

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;
           }
         }
       }