playbook_ui 7.0.0.pre.alpha6 → 7.0.1.pre.alpha2

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,15 +1,25 @@
 import React from 'react'
-import { Date as FormattedDate } from '../../'
+import { Date } from '../../'
 
 const DateDefault = () => {
   return (
     <div>
-      <FormattedDate
-          date="2012-12-25"
+      <Date
+          size="lg"
+          value="1995-12-25"
       />
 
-      <FormattedDate
-          date={new Date()}
+      <br />
+
+      <Date
+          value="17 Mar 69"
+      />
+
+      <br />
+
+      <Date
+          size="xs"
+          value="2020-04-20T04:20:00.000Z"
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date/docs/_description.md

@@ -1,3 +1 @@
 Use to display the date. Year will not display if it is the current year.
-
-`DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.

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

@@ -2,13 +2,8 @@ examples:
   
   rails:
   - date_default: Default
-  - date_timezone: Timezones
   
-  - date_variants: Variants
-  - date_alignment: Alignment
   
   react:
   - date_default: Default
-  - date_variants: Variants
-  - date_alignment: Alignment
   

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

@@ -1,3 +1 @@
 export { default as DateDefault } from './_date_default.jsx'
-export { default as DateVariants } from './_date_variants.jsx'
-export { default as DateAlignment } from './_date_alignment.jsx'

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx

@@ -5,7 +5,7 @@ const DateTimeStackedDark = () => (
   <div>
     <DateTimeStacked
         dark
-        date={new Date()}
+        date={new Date}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -3,7 +3,7 @@ import { DateTimeStacked } from '../../'
 
 const DateTimeStackedDefault = () => (
   <div>
-    <DateTimeStacked date={new Date()} />
+    <DateTimeStacked date={new Date} />
   </div>
 )
 

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb

@@ -1 +1,8 @@
-<%= react_component('DistributionBar', object.chart_options) %>
+<%= content_tag(:figure,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <% object.widths_to_percentages.each do |percentage| %>
+    <div class="pb_distribution_width" style="width:<%= percentage %>%"></div>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -22,13 +22,6 @@ module Playbook
           (width.to_f * 100 / widths.sum).round(2)
         end
       end
-
-      def chart_options
-        {
-          size: size,
-          widths: widths,
-        }
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Hashtag } from '../../'
 
-const HashtagDefault = () => {
+const HashtagDefault = (props) => {
   return (
     <div>
       <Hashtag
           text="470297"
           type="project"
           url="https://google.com"
+          {...props}
       />
       <br />
       <br />
@@ -15,6 +16,7 @@ const HashtagDefault = () => {
           text="123456"
           type="home"
           url="https://google.com"
+          {...props}
       />
       <br />
       <br />
@@ -22,6 +24,7 @@ const HashtagDefault = () => {
           text="456789"
           type="appointment"
           url="https://google.com"
+          {...props}
       />
       <br />
       <br />
@@ -29,6 +32,7 @@ const HashtagDefault = () => {
           text="654321"
           type="default"
           url="https://google.com"
+          {...props}
       />
     </div>
   )

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

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

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

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

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

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

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

@@ -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_legend/_legend.html.erb

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

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

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

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

@@ -69,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/_vertical_nav.scss

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

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

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

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

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

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

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

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>