playbook_ui 12.19.0.pre.alpha.PLAY699zindexresponsive650 → 12.19.0.pre.alpha.movemarkdown637

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb

@@ -1,14 +0,0 @@
-<div>
-  <%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20), size: "xs" }) %>
-  <%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
-  <br>
-  <br>
-
-  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'center' }) %>
-  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'center' }) %>
-  <br>
-  <br>
-
-  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'right' }) %>
-  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'right' }) %>
-</div>

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import DateRangeInline from '../_date_range_inline'
-
-const DateRangeInlineDefault = (props) => {
-  return (
-    <div>
-      <DateRangeInline
-          endDate={new Date('20 Mar 2015')}
-          size="xs"
-          startDate={new Date('18 Jun 2013')}
-          {...props}
-      />
-      <DateRangeInline
-          endDate={new Date('20 Mar 2015')}
-          size="sm"
-          startDate={new Date('18 Jun 2013')}
-          {...props}
-      />
-      <br />
-      <br />
-      <DateRangeInline
-          align="center"
-          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
-          icon
-          size="xs"
-          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
-          {...props}
-      />
-      <DateRangeInline
-          align="center"
-          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
-          icon
-          size="sm"
-          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
-          {...props}
-      />
-      <br />
-      <br />
-      <DateRangeInline
-          align="right"
-          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
-          icon
-          size="xs"
-          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
-          {...props}
-      />
-      <DateRangeInline
-          align="right"
-          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
-          icon
-          size="sm"
-          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DateRangeInlineDefault

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

@@ -1 +0,0 @@
-Use to display a date range. Year will not show if it is the current year.

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

@@ -1,9 +0,0 @@
-examples:
-  
-  rails:
-  - date_range_inline_default: Default
-  
-  
-  react:
-  - date_range_inline_default: Default
-  

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

@@ -1 +0,0 @@
-export { default as DateRangeInlineDefault } from './_date_range_inline_default.jsx'

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("date_range_stacked", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { DateRangeStacked } from '../../'
-
-const DateRangeStackedDefault = (props) => (
-  <div>
-    <DateRangeStacked
-        endDate={new Date('20 Mar 2020')}
-        startDate={new Date('18 Jun 2019')}
-        {...props}
-    />
-  </div>
-)
-
-export default DateRangeStackedDefault

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

@@ -1,7 +0,0 @@
-examples:
-  
-  rails:
-  - date_range_stacked_default: Default
-  
-  react:
-  - date_range_stacked_default: Default

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

@@ -1 +0,0 @@
-export { default as DateRangeStackedDefault } from './_date_range_stacked_default.jsx'

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb

@@ -1,21 +0,0 @@
-<%= pb_rails("date_stacked", props: { date: DateTime.now }) %>
-
-<br>
-
-<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "center" }) %>
-
-<br>
-
-<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right" }) %>
-
-<br>
-
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>
-
-<br>
-
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", align: "center" }) %>
-
-<br>
-
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", align: "right" }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import DateStacked from '../_date_stacked'
-
-const DateStackedAlign = (props) => {
-  return (
-    <div>
-      <DateStacked
-          date={new Date()}
-          size="sm"
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          align="center"
-          date={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          align="right"
-          date={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          date={new Date()}
-          size="md"
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          align="center"
-          date={new Date()}
-          size="md"
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          align="right"
-          date={new Date()}
-          size="md"
-          {...props}
-      />
-
-    </div>
-  )
-}
-
-export default DateStackedAlign

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "left", bold: true }) %>
-<br>
-<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), align: "center", bold: true }) %>
-<br>
-<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right", bold: true }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import DateStacked from '../_date_stacked'
-
-const DateStackedBold = (props) => {
-  return (
-    <div>
-      <DateStacked
-          align="left"
-          bold
-          date={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          align="center"
-          bold
-          date={new Date('20 Mar 2018')}
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          align="right"
-          bold
-          date={new Date()}
-          {...props}
-      />
-
-      <br />
-
-    </div>
-  )
-}
-
-export default DateStackedBold

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("date_stacked", props: { date: DateTime.now}) %>
-
-<br>
-
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import DateStacked from '../_date_stacked'
-
-const DateStackedDefault = (props) => {
-  return (
-    <div>
-
-      <DateStacked
-          align="left"
-          date={new Date()}
-          size="sm"
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          date={new Date()}
-          size="md"
-          {...props}
-      />
-
-    </div>
-  )
-}
-
-export default DateStackedDefault

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20) }) %>
-
-<br>
-
-<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import DateStacked from '../_date_stacked'
-
-const DateStackedNotCurrentYear = (props) => {
-  return (
-    <div>
-
-      <DateStacked
-          date={new Date('20 Mar 2018')}
-          size="sm"
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          date={new Date('20 Mar 2018')}
-          size="md"
-          {...props}
-      />
-
-    </div>
-  )
-}
-
-export default DateStackedNotCurrentYear

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("date_stacked", props: { date: DateTime.now, reverse: true}) %>
-
-<br>
-
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", reverse: true}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import DateStacked from '../_date_stacked'
-
-const DateStackedDefault = (props) => {
-  return (
-    <div>
-
-      <DateStacked
-          align="left"
-          date={new Date()}
-          reverse
-          size="sm"
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          date={new Date()}
-          reverse
-          size="md"
-          {...props}
-      />
-
-    </div>
-  )
-}
-
-export default DateStackedDefault

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "sm" }) %>
-
-<br>
-
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md" }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import DateStacked from '../_date_stacked'
-
-const DateStackedSizes = (props) => {
-  return (
-    <div>
-      <DateStacked
-          date={new Date()}
-          size="sm"
-          {...props}
-      />
-      <br />
-      <DateStacked
-          date={new Date()}
-          size="md"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DateStackedSizes

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

@@ -1 +0,0 @@
-Use to display the date, stacking month and day. Year will not show if it is the current year.

data/app/pb_kits/playbook/pb_date_stacked/docs/_footer.md

@@ -1,2 +0,0 @@
-### Things to Avoid
-Do not use in data tables where data density is a priority.

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

@@ -1,17 +0,0 @@
-examples:
-
-  rails:
-  - date_stacked_default: Default
-  - date_stacked_not_current_year: Not Current Year
-  - date_stacked_reverse: Day & Month Reverse
-  - date_stacked_sizes: Sizes
-  - date_stacked_align: Alignment
-  - date_stacked_bold: Bold
-
-
-  react:
-  - date_stacked_default: Default
-  - date_stacked_not_current_year: Not Current Year
-  - date_stacked_reverse: Day & Month Reverse
-  - date_stacked_sizes: Sizes
-  - date_stacked_bold: Bold

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

@@ -1,6 +0,0 @@
-export { default as DateStackedBold } from './_date_stacked_bold.jsx'
-export { default as DateStackedDefault } from './_date_stacked_default.jsx'
-export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
-export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
-export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
-export { default as DateStackedAlign } from './_date_stacked_align.jsx'

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb

@@ -1,17 +0,0 @@
-<%= pb_rails("date_time", props: {
-    date: DateTime.now
-}) %>
-    
-<br />
-
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    align:"center"
-}) %>
-    
-<br />
-
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    align:"right"
-}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import DateTime from '../_date_time'
-
-const DateTimeAlign = (props) => (
-  <div>
-    <DateTime
-        datetime={new Date()}
-        dayOfWeek
-        icon
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        align="center"
-        datetime={new Date()}
-        dayOfWeek
-        icon
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        align="right"
-        datetime={new Date()}
-        dayOfWeek
-        icon
-        {...props}
-    />
-  </div>
-)
-
-export default DateTimeAlign

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb

@@ -1,20 +0,0 @@
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true
-}) %>
-<br />
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    show_day_of_week: true
-}) %>
-<br />
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    show_icon: true
-}) %>
-<br />
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    timezone: "Asia/Tokyo"
-}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx

@@ -1,39 +0,0 @@
-import React from 'react'
-import DateTime from '../_date_time'
-
-const DateTimeDefault = (props) => (
-  <div>
-    <DateTime
-        datetime={new Date('2020-12-31 14:24:09')}
-        showDayOfWeek
-        showIcon
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        datetime={new Date()}
-        showDayOfWeek
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        datetime={new Date()}
-        showIcon
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        datetime={new Date('2020/12/31 14:24:09 -0500')}
-        timeZone="Asia/Tokyo"
-        {...props}
-    />
-  </div>
-)
-
-export default DateTimeDefault

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb

@@ -1,26 +0,0 @@
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true,
-    size: "sm"
-}) %>
-<br>
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    timezone: "Asia/Tokyo",
-    size: "sm"
-}) %>
-
-<br>
-<br>
-
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true
-}) %>
-<br >
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    timezone: "Asia/Tokyo"
-}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import DateTime from '../_date_time'
-
-const DateTimeDefault = (props) => (
-  <div>
-    <DateTime
-        datetime={new Date()}
-        showDayOfWeek
-        showIcon
-        size="sm"
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        datetime={new Date()}
-        showDayOfWeek
-        size="sm"
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        datetime={new Date()}
-        showIcon
-        size="sm"
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        datetime={new Date()}
-        size="sm"
-        {...props}
-    />
-
-    <br />
-    <br />
-
-    <DateTime
-        datetime={new Date()}
-        showDayOfWeek
-        showIcon
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        datetime={new Date()}
-        showDayOfWeek
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        datetime={new Date()}
-        showIcon
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        datetime={new Date()}
-        {...props}
-    />
-  </div>
-)
-
-export default DateTimeDefault

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

@@ -1 +0,0 @@
-Date Time is a composite kit that leverages the [Date](/kits/date) and [Time](/kits/time) kits. The Date Time kit is affected by time zones and defaults to "America/New_York".

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

@@ -1,11 +0,0 @@
-examples:
-  
-  rails:
-  - date_time_default: Default
-  - date_time_align: Alignment
-  - date_time_size: Size
-
-  react:
-  - date_time_default: Default
-  - date_time_align: Alignment
-  - date_time_size: Size

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

@@ -1,3 +0,0 @@
-export { default as DateTimeDefault } from './_date_time_default.jsx'
-export { default as DateTimeAlign } from './_date_time_align.jsx'
-export { default as DateTimeSize } from './_date_time_size.jsx'

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb

@@ -1,8 +0,0 @@
-<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now }) %>
-<br>
-<%= pb_rails("date_time_stacked", props: { date_time: Date.new(2018, 03, 20) }) %>
-<br>
-<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "Asia/Tokyo" }) %>
-<br>
-<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "America/Denver" }) %>
-