playbook_ui 6.1.0 → 7.0.0.pre.alpha2

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

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

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

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

@@ -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 = ({

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -10,10 +10,10 @@ import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TimestampProps = {
-  id?: String,
+  id?: string,
   data?: object,
-  className?: String,
-  text?: String,
+  className?: string,
+  text?: string,
 }
 
 const Timestamp = (props: TimestampProps) => {

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

@@ -7,14 +7,14 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type TitleProps = {
   aria?: object,
-  children?: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children?: array<React.ReactNode> | React.ReactNode,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
-  text?: String,
-  variant?: null | "primary",
+  text?: string,
+  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

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

@@ -1,2 +1,3 @@
 export { default as TitleLight } from './_title_light.jsx'
 export { default as TitleDark } from './_title_dark.jsx'
+export { default as TitleVariants } from './_title_variants.jsx'

data/app/pb_kits/playbook/pb_title_count/_title_count.html.erb

@@ -1,10 +1,12 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <%= pb_rails("title", props: {
+    dark: object.dark,
     size: object.title_size,
     text: object.title,
     classname: "pb_title_count_text" }) if object.title %>
-  <%= pb_rails("body", props: { color: "light" }) { object.format_count } if object.count %>
+  <%= pb_rails("body", props: { color: "light", dark: object.dark }) { object.format_count } if object.count %>
 <% end %>

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -11,11 +11,12 @@ import { globalProps } from '../utilities/globalProps.js'
 type TitleCountProps = {
   align: "center" | "left" | "right",
   aria?: object,
-  className?: String,
+  className?: string,
   count?: Numeric,
+  dark?: boolean,
   data?: object,
-  id?: String,
-  title?: String,
+  id?: string,
+  title?: string,
   size?: "lg" | "sm",
 };
 
@@ -24,6 +25,7 @@ const TitleCount = (props: TitleCountProps) => {
     align = 'left',
     aria = {},
     className,
+    dark = false,
     data = {},
     count,
     id,
@@ -45,11 +47,15 @@ const TitleCount = (props: TitleCountProps) => {
     >
       <Title
           className={title !== undefined ? 'pb_title_count_text' : ''}
+          dark={dark}
           size={size === 'lg' ? 3 : 4}
           text={title}
       />
 
-      <Body color="light">
+      <Body
+          color="light"
+          dark={dark}
+      >
         <If condition={count}>{formatCount}</If>
       </Body>
 

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { TitleCount } from '../../'
+
+const TitleCountAlignDark = () => {
+  return (
+    <>
+      <TitleCount
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="center"
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="right"
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+    </>
+  )
+}
+
+export default TitleCountAlignDark

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 35.78,
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 7399,
+  size: "lg",
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: -379503.3720,
+  size: "lg",
+  dark: true
+}) %>