playbook_ui 4.12.0 → 4.13.0

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

@@ -3,6 +3,7 @@ examples:
   - card_light: Default
   - card_dark: Dark Cards
   - card_highlight: Highlight Cards
+  - card_header: Header Cards
   - card_selected: Selected
   - card_padding: Padding Size
   - card_shadow: Shadow Size
@@ -12,6 +13,7 @@ examples:
   - card_light: Default
   - card_dark: Dark Cards
   - card_highlight: Highlight Cards
+  - card_header: Header Cards
   - card_selected: Selected
   - card_padding: Padding Size
   - card_shadow: Shadow Size

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

@@ -1,5 +1,6 @@
 export { default as CardLight } from './_card_light.jsx'
 export { default as CardHighlight } from './_card_highlight.jsx'
+export { default as CardHeader } from './_card_header.jsx'
 export { default as CardSelected } from './_card_selected.jsx'
 export { default as CardPadding } from './_card_padding.jsx'
 export { default as CardShadow } from './_card_shadow.jsx'

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.html.erb

@@ -0,0 +1,15 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+
+    <%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
+      <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
+      <% end %>
+      <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", date: object.date, tag: "caption" }) %>
+      <% end %>
+    <% end %>
+
+<% end %>

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx

@@ -0,0 +1,46 @@
+/* @flow */
+
+import React from 'react'
+import {
+  DateStacked,
+  Flex,
+  FlexItem,
+  TimeStacked,
+} from '../'
+
+type DateTimeStackedProps = {
+  data?: String,
+  id?: String,
+  date: Date,
+  dark: Boolean,
+}
+
+const DateTimeStacked = ({
+  date,
+  dark,
+}: DateTimeStackedProps) => (
+  <Flex
+      orientation="row"
+      vertical="center"
+  >
+    <FlexItem>
+      <DateStacked
+          align="right"
+          dark={dark}
+          date={date}
+          reverse
+          size="sm"
+      />
+    </FlexItem>
+    <FlexItem>
+      <TimeStacked
+          className="pb_date_time_stacked_kit"
+          dark={dark}
+          date={date}
+          tag="caption"
+      />
+    </FlexItem>
+  </Flex>
+)
+
+export default DateTimeStacked

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss

@@ -0,0 +1,6 @@
+@import "../pb_title/title";
+@import "../pb_body/body";
+
+.pb_date_time_stacked_kit {
+  padding-left: $space-xs;
+}

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDateTimeStacked
+    class DateTimeStacked
+      include Playbook::Props
+
+      partial "pb_date_time_stacked/date_time_stacked"
+
+      prop :date, type: Playbook::Props::Date,
+                  default: ::DateTime.current
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= pb_rails("date_time_stacked", props: { dark: true }) %>

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DateTimeStacked } from '../../'
+
+const DateTimeStackedDark = () => (
+  <div>
+    <DateTimeStacked
+        dark
+        date={new Date}
+    />
+  </div>
+)
+
+export default DateTimeStackedDark

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

@@ -0,0 +1 @@
+<%= pb_rails("date_time_stacked") %>

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { DateTimeStacked } from '../../'
+
+const DateTimeStackedDefault = () => (
+  <div>
+    <DateTimeStacked date={new Date} />
+  </div>
+)
+
+export default DateTimeStackedDefault

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

@@ -0,0 +1,11 @@
+examples:
+
+  rails:
+  - date_time_stacked_default: Default
+  - date_time_stacked_dark: Dark
+
+
+  react:
+  - date_time_stacked_default: Default
+  - date_time_stacked_dark: Dark
+

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

@@ -0,0 +1,2 @@
+export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
+export { default as DateTimeStackedDark } from './_date_time_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -72,4 +72,16 @@ export default class DateTime {
   toIso() {
     return this.value.toISOString()
   }
+
+  toTime() {
+    return this.value.strftime('%I:%M')
+  }
+
+  toTimezone() {
+    return this.value.strftime('%Z')
+  }
+
+  toTimeWithMeridian() {
+    return this.toTime() + this.toMeridian()
+  }
 }

data/app/pb_kits/playbook/pb_kit/pb_date_time.rb

@@ -67,6 +67,10 @@ module Playbook
         @value.strftime("%l")
       end
 
+      def to_full_hour
+        @value.strftime("%I")
+      end
+
       def to_minutes
         @value.strftime("%M")
       end

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -6,7 +6,7 @@ import DateTime from '../pb_kit/dateTime.js'
 import { Body, Caption, Icon, Title } from '../'
 
 const dateString = (value: DateTime) => {
-  const month = value.toMonthNumber()
+  const month = value.toMonthNum()
   const day = value.toDay()
 
   return ` · ${month}/${day}`

data/app/pb_kits/playbook/pb_table/_table.scss

@@ -1 +1,25 @@
 @import "styles/all";
+@import "../tokens/colors";
+
+$pb_table_row_kit_side_highlight_colors: map-merge($status_colors, $product_colors);
+
+@mixin pb_table_row_kit_side_highlight($background) {
+    box-shadow: inset 4px 0 0 0 $background;
+    border-top: 0px;
+}
+
+[class^=pb_table] {
+    tbody {
+        [class^=pb_table_row_kit] {
+            @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
+                &[class*=_side_highlight_#{$color_name}] {
+                    td {
+                        &:first-child {
+                            @include pb_table_row_kit_side_highlight($color_value);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

data/app/pb_kits/playbook/pb_table/_table_row.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:tr,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_table/_table_row.jsx

@@ -0,0 +1,27 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+
+type TableRowPropTypes = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  className: String,
+  sideHighlightColor: String,
+}
+
+const TableRow = ({
+  children,
+  className,
+  sideHighlightColor = 'windows',
+}: TableRowPropTypes) => {
+  const sideHighlightClass = sideHighlightColor != '' ? `side_highlight_${sideHighlightColor}` : null
+  const tableRowCss = buildCss('pb_table_row_kit', sideHighlightClass)
+
+  return (
+    <tr className={classnames(tableRowCss, className)}>
+      {children}
+    </tr>
+  )
+}
+
+export default TableRow

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb

@@ -0,0 +1,85 @@
+<%= pb_rails("table", props: { size: "md" }) do %>
+  <thead>
+    <tr>
+      <th>Product Colors</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "windows" }) do %>
+			<td>Windows</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+		<%= pb_rails("table/table_row", props: { side_highlight_color: "siding" }) do %>
+			<td>Siding</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "doors" }) do %>
+			<td>Doors</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "none" }) do %>
+			<td>None</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+  </tbody>
+<% end %>
+
+<br/>
+
+<%= pb_rails("table", props: { size: "md" }) do %>
+  <thead>
+    <tr>
+      <th>Status Colors</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "success" }) do %>
+			<td>Success</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+		<%= pb_rails("table/table_row", props: { side_highlight_color: "warning" }) do %>
+			<td>Warning</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "error" }) do %>
+			<td>Error</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "none" }) do %>
+			<td>None</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Table, TableRow } from '../../'
+
+const TableSideHighlight = () => {
+  return (
+    <div>
+      <Table size="md">
+        <thead>
+          <tr>
+            <th>{'Product colors'}</th>
+            <th>{'Column 2'}</th>
+            <th>{'Column 3'}</th>
+            <th>{'Column 4'}</th>
+            <th>{'Column 5'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <TableRow sideHighlightColor="windows">
+            <td>{'Windows'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="siding">
+            <td>{'Siding'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="doors">
+            <td>{'Doors'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="none">
+            <td>{'None'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+        </tbody>
+      </Table>
+
+      <br />
+
+      <Table size="md">
+        <thead>
+          <tr>
+            <th>{'Status colors'}</th>
+            <th>{'Column 2'}</th>
+            <th>{'Column 3'}</th>
+            <th>{'Column 4'}</th>
+            <th>{'Column 5'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <TableRow sideHighlightColor="success">
+            <td>{'Success'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="warning">
+            <td>{'Warning'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="error">
+            <td>{'Error'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="none">
+            <td>{'None'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+        </tbody>
+      </Table>
+    </div>
+  )
+}
+
+export default TableSideHighlight