playbook_ui 7.0.1.pre.alpha8 → 7.0.1.pre.alpha9

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

@@ -3,10 +3,8 @@ examples:
   rails:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
-  - selectable_icon_dark: Dark
+
   
   react:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
-  - selectable_icon_dark: Dark
-  

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

@@ -1,3 +1,2 @@
 export { default as SelectableIconDefault } from './_selectable_icon_default.jsx'
 export { default as SelectableIconSingleSelect } from './_selectable_icon_single_select.jsx'
-export { default as SelectableIconDark } from './_selectable_icon_dark.jsx'

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

@@ -10,8 +10,7 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_dark: Table Dark
-    - table_container_dark: Table Container Off Dark
+ 
   react:
     - table_sm: Small
     - table_md: Medium
@@ -23,5 +22,3 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
-    - table_dark: Table Dark
-    - table_container_dark: Table Container Off Dark

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

@@ -5,8 +5,6 @@ export { default as TableSideHighlight } from './_table_side_highlight.jsx'
 export { default as TableContainer } from './_table_container.jsx'
 export { default as TableDataTable } from './_table_data_table.jsx'
 export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
-export { default as TableDark } from './_table_dark.jsx'
-export { default as TableContainerDark } from './_table_container_dark.jsx'
 export { default as TableDisableHover } from './_table_disable_hover.jsx'
 export { default as TableSingleLine } from './_table_single_line.jsx'
 export { default as TableMultiline } from './_table_multiline.jsx'

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_table/table.rb

@@ -33,9 +33,9 @@ module Playbook
 
     private
 
-      def dark_class	
-        dark ? "table-dark" : nil	
-      end	
+      def dark_class
+        dark ? "table-dark" : nil
+      end
 
       def data_table_class
         data_table ? "data_table" : nil

data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb

@@ -14,6 +14,7 @@
       <% end %>
     <% else %>
       <%= tag(:input,
+          autocomplete: object.autocomplete ? nil : "off",
           class: "text_input",
           data: object.validation_data,
           disabled: object.disabled,

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

@@ -13,6 +13,7 @@ type TextInputProps = {
   aria?: object,
   className: string,
   data?: object,
+  dark?: boolean,
   disabled?: boolean,
   error?: string,
   id?: string,
@@ -26,23 +27,25 @@ type TextInputProps = {
   children: Node,
 }
 
-const TextInput = ({
-  aria = {},
-  className,
-  data = {},
-  disabled,
-  error,
-  id,
-  name,
-  label,
-  onChange = () => {},
-  placeholder,
-  required,
-  type = 'text',
-  value,
-  children = null,
-  ...props
-}: TextInputProps) => {
+const TextInput = (props: TextInputProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    dark = false,
+    disabled,
+    error,
+    id,
+    name,
+    label,
+    onChange = () => {},
+    placeholder,
+    required,
+    type = 'text',
+    value,
+    children = null,
+  } = props
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames([
@@ -60,6 +63,7 @@ const TextInput = ({
     >
       <Caption
           className="pb_text_input_kit_label"
+          dark={dark}
           text={label}
       />
       <div className="text_input_wrapper">

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_text_input/docs/example.yml

@@ -1,16 +1,11 @@
 examples:
   rails:
   - text_input_default: Default
-  - text_input_dark: Dark
   - text_input_error: With Error
-  - text_input_dark_error: Dark With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
   react:
   - text_input_default: Default
-  - text_input_dark: Dark
   - text_input_error: With Error
-  - text_input_dark_error: Dark With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
-

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

@@ -1,6 +1,4 @@
 export { default as TextInputDefault } from './_text_input_default.jsx'
-export { default as TextInputDark } from './_text_input_dark.jsx'
-export { default as TextInputDarkError } from './_text_input_dark_error.jsx'
 export { default as TextInputCustom } from './_text_input_custom.jsx'
 export { default as TextInputError } from './_text_input_error.jsx'
 export { default as TextInputDisabled } from './_text_input_disabled.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -7,6 +7,8 @@ module Playbook
 
       partial "pb_text_input/text_input"
 
+      prop :autocomplete, type: Playbook::Props::Boolean,
+                          default: true
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error

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

@@ -3,17 +3,14 @@ examples:
   rails:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
-  - textarea_dark: Dark
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
-  - textarea_dark_error: Textarea w/ Error
+
 
 
 
   react:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
-  - textarea_dark: Dark
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
-  - textarea_dark_error: Textarea w/ Error

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

@@ -1,6 +1,4 @@
 export { default as TextareaDefault } from './_textarea_default.jsx'
 export { default as TextareaResize } from './_textarea_resize.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
-export { default as TextareaDark } from './_textarea_dark.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'
-export { default as TextareaDarkError } from './_textarea_dark_error.jsx'

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

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

@@ -0,0 +1,11 @@
+Simply enter the timezone you would like to use and it will appear.
+
+The list of supported timezones is exhaustive and we're most likely to only use timezones from the Americas so we've highlighted those in the examples.
+
+However, if you need to support another timezone you should be able to Google a specific list, otherwise you can follow the string pattern and try entering a continent and a city.
+
+Remember, this is just labeling the timezone, please verify the actual time for a specified timezone is rendering properly. 
+
+Format: `<Continent>/<Large_City_Name>`
+
+Continent Options: ` America | Europe | Asia | Africa | Pacific | India | Atlantic | Australia `