RubyGems - playbook_ui - Versions diffs - 7.0.0.pre.alpha9 → 7.0.1.pre.alpha1 - Mend

playbook_ui 7.0.0.pre.alpha9 → 7.0.1.pre.alpha1

Files changed (258) hide show

data/app/pb_kits/playbook/pb_hashtag/docs/example.yml CHANGED

@@ -2,8 +2,6 @@ examples:
   rails:
   - hashtag_default: Hashtag Types
-  - hashtag_dark: Dark
   react:
   - hashtag_default: Hashtag Types
-  - hashtag_dark: Dark

data/app/pb_kits/playbook/pb_hashtag/docs/index.js CHANGED

	@@ -1,2 +1 @@
1 1	export { default as HashtagDefault } from './_hashtag_default.jsx'
2	- export { default as HashtagDark } from './_hashtag_dark.jsx'

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx CHANGED

@@ -1,7 +1,7 @@
 import React from 'react'
 import { HomeAddressStreet } from '../../'
-const HomeAddressStreetEmphasis = () => {
+const HomeAddressStreetEmphasis = (props) => {
   return (
     <div>
       <HomeAddressStreet
@@ -14,6 +14,7 @@ const HomeAddressStreetEmphasis = () => {
           state="PA"
           territory="PHL"
           zipcode="19382"
+          {...props}
       />
       <br />
       <br />
@@ -28,6 +29,7 @@ const HomeAddressStreetEmphasis = () => {
           state="PA"
           territory="PHL"
           zipcode="19382"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx CHANGED

@@ -1,7 +1,7 @@
 import React from 'react'
 import { HomeAddressStreet } from '../../'
-const HomeAddressStreetModified = () => {
+const HomeAddressStreetModified = (props) => {
   return (
     <HomeAddressStreet
         address="70 Prospect Ave"
@@ -9,6 +9,7 @@ const HomeAddressStreetModified = () => {
         state="PA"
         territory="PHL"
         zipcode="19382"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml CHANGED

@@ -4,12 +4,10 @@ examples:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
-  - home_address_street_dark: Dark
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
-  - home_address_street_dark: Dark

data/app/pb_kits/playbook/pb_home_address_street/docs/index.js CHANGED

@@ -1,4 +1,3 @@
 export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
-export { default as HomeAddressStreetDark } from './_home_address_street_dark.jsx'

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb CHANGED

@@ -1,3 +1 @@
-<%= pb_rails("body", props: { dark: true }) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
-<% end %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx CHANGED

@@ -1,15 +1,13 @@
 import React from 'react'
-import { Body, Icon } from '../../'
+import { Icon } from '../../'
 const IconDefaultDark = () => {
   return (
     <div>
-      <Body dark>
-        <Icon
-            fixedWidth
-            icon="user"
-        />
-      </Body>
+      <Icon
+          fixedWidth
+          icon="user"
+      />
     </div>
   )
 }

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

@@ -1 +1,13 @@
-<%= react_component('LineGraph', object.chart_options) %>
+<%= 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 %>

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

@@ -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 CHANGED

@@ -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;
-          }
         }
       }
     }
@@ -71,4 +69,28 @@ $selector: ".pb_nav_list";
       }
     }
   }
+  &[class*=dark]{
+    [class*=pb_nav_list_kit_item]{
+      [class*=_link]{
+        border-color: rgba($white, $opacity_3);
+      }
+      &[class*=_active] [class*=_link]{
+        border-color: $white;
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_default;
+        }
+      }
+      [class*=_link] {
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_lighter;
+        }
+        &:hover{
+          background-color: rgba($white, $opacity_1);
+          [class*=_icon],[class*=_text] {
+            color: $white;
+          }
+        }
+      }
+    }
+  }
 }

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

@@ -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 CHANGED

@@ -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;
           }
         }
       }
@@ -136,7 +132,35 @@ $selector: ".pb_nav_list";
     [class*=_active] {
       background-color: $active_light;
     }
+    &[class*=dark]{
+      [class*=_active] {
+      background-color: rgba($white, $opacity_1);
+    }
+    }
   }
+  &[class*=dark]{
+    background: tint($bg_dark,10%);
+    [class*=pb_nav_list_kit_item]{
+      border-color: rgba($white, $opacity_1);
+      &[class*=_active] [class*=_link]{
+        border-color: $white;
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_default;
+        }
+      }
+      [class*=_link] {
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_lighter;
+        }
+        &:hover{
+          background-color: rgba($white, $opacity_1);
+          [class*=_icon],[class*=_text] {
+            color: $white;
+          }
+        }
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx CHANGED

@@ -1,17 +1,26 @@
 import React from 'react'
 import { OnlineStatus } from '../../'
-const OnlineStatusDefault = () => (
+const OnlineStatusDefault = (props) => (
   <>
-    <OnlineStatus status="offline" />
+    <OnlineStatus
+        status="offline"
+        {...props}
+    />
     <br />
-    <OnlineStatus status="online" />
+    <OnlineStatus
+        status="online"
+        {...props}
+    />
     <br />
-    <OnlineStatus status="away" />
+    <OnlineStatus
+        status="away"
+        {...props}
+    />
   </>
 )

data/app/pb_kits/playbook/pb_online_status/docs/example.yml CHANGED

@@ -2,8 +2,7 @@ examples:
   rails:
   - online_status_default: Default
-  - online_status_dark: Dark
   react:
   - online_status_default: Default
-  - online_status_dark: Dark

data/app/pb_kits/playbook/pb_online_status/docs/index.js CHANGED

	@@ -1,2 +1 @@
1 1	export { default as OnlineStatusDefault } from './_online_status_default.jsx'
2	- export { default as OnlineStatusDark } from './_online_status_dark.jsx'

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

@@ -73,23 +73,22 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={`valid-contact-${index}`}
+            key={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={`wrong-contact-${index}`}
+              key={index}
           />
-        </div>
-      ))}
+        </>
+          ))}
     </div>
   )
 }

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

@@ -23,7 +23,6 @@ const PersonContactWithWrongNumbers = () => {
             },
           ]}
           firstName="Pauline"
-          key="person-contact-1"
           lastName="Smith"
       />
     </>

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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