playbook_ui 7.0.0.pre.alpha1 → 7.0.0.pre.alpha2

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", disabled: true }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { TextInput } from '../../'
+
+class TextInputDisabled extends React.Component {
+  render() {
+    return (
+      <div>
+        <TextInput
+            disabled
+            label="Last Name"
+            placeholder="Enter last name"
+        />
+      </div>
+    )
+  }
+}
+
+export default TextInputDisabled

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

@@ -5,10 +5,12 @@ examples:
   - 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

@@ -3,3 +3,4 @@ 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,8 +7,6 @@ module Playbook
 
       partial "pb_text_input/text_input"
 
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error
@@ -23,7 +21,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_text_input_kit", dark_class) + error_class
+        generate_classname("pb_text_input_kit") + error_class
       end
 
       def validation_message
@@ -45,10 +43,6 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
-
-      def dark_class
-        dark ? "dark" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -10,6 +10,7 @@ type TextareaProps = {
   className?: string,
   children?: array<React.ReactChild>,
   data?: string,
+  disabled?: boolean,
   error?: string,
   id?: string,
   object?: string,
@@ -18,8 +19,8 @@ type TextareaProps = {
   placeholder?: string,
   value?: string,
   name?: string,
+  required?: boolean,
   rows?: number,
-  dark?: boolean,
   resize: 'none' | 'both' | 'horizontal' | 'vertical',
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
@@ -27,25 +28,25 @@ type TextareaProps = {
 const Textarea = ({
   className,
   children,
-  dark = false,
+  disabled,
   resize = 'none',
   error,
   label,
   name,
   onChange = () => {},
   placeholder,
+  required,
   rows = 4,
   value,
   ...props
 }: TextareaProps) => {
-  const textareaClass = `pb_textarea_kit${dark ? '_dark' : ''}`
   const errorClass = error ? 'error' : null
-  const resizeClass = ` resize_${resize}`
+  const resizeClass = `resize_${resize}`
+  const classes = classnames('pb_textarea_kit', className, errorClass, resizeClass, globalProps(props))
 
   return (
-    <div className={classnames(textareaClass, className, errorClass, resizeClass, globalProps(props))}>
+    <div className={classes}>
       <Caption
-          dark={dark}
           text={label}
       />
       <If condition={children}>
@@ -53,16 +54,17 @@ const Textarea = ({
         <Else />
         <textarea
             {...props}
-            className={textareaClass}
+            className="pb_textarea_kit"
+            disabled={disabled}
             name={name}
             onChange={onChange}
             placeholder={placeholder}
+            required={required}
             rows={rows}
             value={value}
         />
         <If condition={error}>
           <Body
-              dark={dark}
               status="negative"
               text={error}
           />

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -40,9 +40,7 @@
     overflow: auto;
   }
 
-
-
-  &[class*=_dark] {
+  &.dark {
     textarea::placeholder {
       @include pb_body_light_dark;
     }

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.jsx

@@ -27,7 +27,6 @@ const TextareaDark = () => {
           placeholder="Placeholder text"
           value="Default value text"
       />
-
     </div>
   )
 }

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark_error.jsx

@@ -12,7 +12,6 @@ const TextareaDarkError = () => {
           placeholder="Placeholder text"
           value="Default value text"
       />
-
     </div>
   )
 }

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -7,8 +7,6 @@ module Playbook
 
       partial "pb_textarea/textarea"
 
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :error
       prop :object
       prop :label
@@ -23,15 +21,11 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_textarea_kit", dark_class) + error_class + resize_class
+        generate_classname("pb_textarea_kit") + error_class + resize_class
       end
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def error_class
         error ? " error" : ""
       end

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

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 `

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

@@ -7,5 +7,6 @@ examples:
   react:
   - time_default: Sizes
   - time_timestamp: Timestamp Values
+  - time_timezone: Handling Timezones
   - time_align: Alignment
   - time_dark: Dark

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

@@ -2,3 +2,4 @@ export { default as TimeDefault } from './_time_default.jsx'
 export { default as TimeTimestamp } from './_time_timestamp.jsx'
 export { default as TimeAlign } from './_time_align.jsx'
 export { default as TimeDark } from './_time_dark.jsx'
+export { default as TimeTimezone } from './_time_timezone.jsx'

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -14,7 +14,7 @@ type TitleProps = {
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
-  variant?: null | "primary",
+  variant?: null | "link",
 }
 
 const Title = (props: TitleProps) => {

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -16,14 +16,14 @@
 
   &[class*=_4] {
     @include pb_title_4;
+
+    &[class*=_link]  {
+      color: $primary;
+    }
+
   }
 
   &.dark {
     @include pb_title_dark;
   }
-
-  &[class*=_link]  {
-    color: $primary;
-  }
-
 }

data/app/pb_kits/playbook/pb_title/docs/_title_variants.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("title", props: { text: "Title 4 (link)", tag: "h4", size: 4, variant: "link" }) %> 

data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Title } from '../../'
+
+const TitleVariants = () => {
+  return (
+    <div>
+      <Title
+          size={4}
+          tag="h4"
+          text="Title 4 (link)"
+          variant="link"
+      />
+    </div>
+  )
+}
+
+export default TitleVariants

data/app/pb_kits/playbook/pb_title/docs/_title_variants.md

@@ -0,0 +1,3 @@
+Wrap anchor tags around the kit to make it clickable.
+
+Link variant can only be applied to size `4`.

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

@@ -1,7 +1,9 @@
 examples:
   rails:
   - title_light: Light UI
+  - title_variants: Variants
   - title_dark: Dark UI
   react:
   - title_light: Light UI
+  - title_variants: Variants
   - title_dark: Dark UI