RubyGems - playbook_ui - Versions diffs - 6.1.0 → 6.4.0 - Mend

playbook_ui 6.1.0 → 6.4.0

Files changed (321) hide show

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

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

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

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

@@ -7,19 +7,20 @@ import type { InputCallback } from '../types.js'
 import { globalProps } from '../utilities/globalProps.js'
 type TextareaProps = {
-  className?: String,
-  children?: Array<React.ReactChild>,
-  data?: String,
-  error?: String,
-  id?: String,
-  object?: String,
-  method?: String,
-  label?: String,
-  placeholder?: String,
-  value?: String,
-  name?: String,
-  rows?: Number,
-  dark?: Boolean,
+  className?: string,
+  children?: array<React.ReactChild>,
+  data?: string,
+  disabled?: boolean,
+  error?: string,
+  id?: string,
+  object?: string,
+  method?: string,
+  label?: string,
+  placeholder?: string,
+  value?: string,
+  name?: string,
+  required?: boolean,
+  rows?: number,
   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 CHANGED

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

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

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

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

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

@@ -10,24 +10,24 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Body, Icon, Title  } from '../'
 type TimeProps = {
-  align?: 'left" | "center' | 'right',
-  className?: String | Array<String>,
-  data?: String,
-  date: String,
-  id?: String,
-  showTimezone?: Boolean,
+  align?: 'left' | 'center' | 'right',
+  className?: string | array<string>,
+  data?: string,
+  date: string,
+  id?: string,
   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 CHANGED

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

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

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

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

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

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

@@ -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_time_range_inline/_time_range_inline.jsx CHANGED

@@ -7,16 +7,16 @@ import DateTime from '../pb_kit/dateTime.js'
 import { globalProps } from '../utilities/globalProps.js'
 type TimeRangeInlineProps = {
-  className?: String,
-  id?: String,
-  data?: String,
+  className?: string,
+  id?: string,
+  data?: string,
   alignment?: "left" | "center" | "vertical",
   size?: "sm" | "xs",
-  dark?: Boolean,
-  icon?: Boolean,
-  timezone?: Boolean,
-  startTime: String,
-  endTime: String,
+  dark?: boolean,
+  icon?: boolean,
+  timezone?: boolean,
+  startTime: string,
+  endTime: string,
 }
 const timezoneString = (dateValue) => {

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx CHANGED

@@ -14,11 +14,11 @@ const Components = {
 }
 type TimeStackedProps = {
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  date: String,
-  id?: String,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  date: string,
+  id?: string,
   align?: "left" | "center" | "right",
   tag?: "body" | "caption",
 }

data/app/pb_kits/playbook/pb_timeline/_item.jsx CHANGED

@@ -7,8 +7,8 @@ import { DateStacked, IconCircle } from '..'
 type ItemProps = {
   className?: string,
-  children?: Array<React.Node>,
-  date?: Date,
+  children?: array<React.Node>,
+  date?: date,
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',

data/app/pb_kits/playbook/pb_timeline/_timeline.jsx CHANGED

@@ -7,12 +7,12 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 type TimelineProps = {
   aria?: object,
-  children?: Array<React.ReactChild>,
-  className?: String,
-  data?: String,
-  id?: String,
-  orientation?: String,
-  showDate?: Boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
+  data?: string,
+  id?: string,
+  orientation?: string,
+  showDate?: boolean,
 }
 const Timeline = ({