playbook_ui 4.11.0.pre.alpha.pre.2 → 4.11.0

data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.html.erb

@@ -1,31 +1,35 @@
-<%= pb_rails("title", props: {size: 4, text: "Wrap"}) %><br/>
+<div class="flex-doc-example">
 
-<%= pb_rails("flex", props: {wrap: true}) do %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>1<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>2<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>3<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>4<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>5<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>6<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>7<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>8<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>9<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>10<% end %>
-<% end %>
+  <%= pb_rails("title", props: {size: 4, text: "Wrap"}) %><br/>
 
-<br/><br/>
+  <%= pb_rails("flex", props: {wrap: true}) do %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>4<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>5<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>6<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>7<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>8<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>9<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>10<% end %>
+  <% end %>
 
-<%= pb_rails("title", props: {size: 4, text: "No Wrap"}) %><br/>
+  <br/><br/>
 
-<%= pb_rails("flex") do %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>1<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>2<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>3<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>4<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>5<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>6<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>7<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>8<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>9<% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>10<% end %>
-<% end %>
+  <%= pb_rails("title", props: {size: 4, text: "No Wrap"}) %><br/>
+
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>4<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>5<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>6<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>7<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>8<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>9<% end %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>10<% end %>
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx

@@ -4,89 +4,90 @@ import { Body, Flex, FlexItem, Title } from  '../..'
 const FlexWrap = () => {
   return (
     <>
-      <Body
-          text="Resize your browser"
-      />
-      <Title
-          size={4}
-          text="Wrap"
-      />
-      <br />
-      <Flex
-          className="bg_light"
-          wrap
-      >
-        <FlexItem fixedSize="300px">
-          {'1'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'2'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'3'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'4'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'5'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'6'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'7'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'8'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'9'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'10'}
-        </FlexItem>
-      </Flex>
-
-      <br />
-      <Title
-          size={4}
-          text="No Wrap"
-      />
-      <br />
-      <Flex className="bg_light wide">
-        <FlexItem fixedSize="300px">
-          {'1'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'2'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'3'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'4'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'5'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'6'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'7'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'8'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'9'}
-        </FlexItem>
-        <FlexItem fixedSize="300px">
-          {'10'}
-        </FlexItem>
-      </Flex>
+      <div className="flex-doc-example">
+        <Body
+            text="Resize your browser"
+        />
+        <Title
+            size={4}
+            text="Wrap"
+        />
+        <br />
+        <Flex
+            className="bg_light"
+            wrap
+        >
+          <FlexItem fixedSize="300px">
+            {'1'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'2'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'3'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'4'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'5'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'6'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'7'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'8'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'9'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'10'}
+          </FlexItem>
+        </Flex>
 
+        <br />
+        <Title
+            size={4}
+            text="No Wrap"
+        />
+        <br />
+        <Flex className="bg_light wide">
+          <FlexItem fixedSize="300px">
+            {'1'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'2'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'3'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'4'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'5'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'6'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'7'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'8'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'9'}
+          </FlexItem>
+          <FlexItem fixedSize="300px">
+            {'10'}
+          </FlexItem>
+        </Flex>
+      </div>
     </>
   )
 }

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

@@ -10,6 +10,8 @@ type DateTimeType = {
   zone?: String,
 }
 
+const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
+
 export default class DateTime {
   constructor({ value, zone = 'America/New_York' }: DateTimeType) {
     this.value = this.convertToTimestampZone(value, zone)
@@ -20,7 +22,7 @@ export default class DateTime {
   }
 
   convertToTimezone() {
-    return this.value.strftime('%a')
+    return this.value.strftime('%Z')
   }
 
   toYear() {
@@ -31,6 +33,10 @@ export default class DateTime {
     return this.value.strftime('%b')
   }
 
+  toMonthNum() {
+    return this.value.strftime('%-m')
+  }
+
   toMonthFull() {
     return this.value.strftime('%B')
   }
@@ -39,10 +45,26 @@ export default class DateTime {
     return this.value.strftime('%e')
   }
 
+  toDayAbbr() {
+    return ABBR_DAYS[this.value.day()]
+  }
+
   toWeekday() {
     return this.value.strftime('%a')
   }
 
+  toHour() {
+    return this.value.strftime('%l')
+  }
+
+  toMinute() {
+    return this.value.strftime('%M')
+  }
+
+  toMeridian() {
+    return this.value.strftime('%P')[0]
+  }
+
   toIso() {
     return this.value.toISOString()
   }

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

@@ -26,6 +26,11 @@ module Playbook
         @value.strftime("%a")
       end
 
+      def to_day_of_week_compact
+        abbr_days = %w[SU M T W TH F S]
+        abbr_days[@value.strftime("%w").to_i]
+      end
+
       def to_year
         @value.strftime("%Y")
       end
@@ -34,6 +39,14 @@ module Playbook
         @value.strftime("%^b")
       end
 
+      def to_month_number
+        @value.strftime("%m")
+      end
+
+      def to_unpadded_month_number
+        @value.strftime("%-m")
+      end
+
       def to_month_downcase
         @value.strftime("%b")
       end
@@ -46,6 +59,10 @@ module Playbook
         @value.strftime("%e")
       end
 
+      def to_unpadded_day
+        @value.strftime("%-d")
+      end
+
       def to_hour
         @value.strftime("%l")
       end

data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb

@@ -0,0 +1,19 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= pb_rails("body", props: {color: "light" }) do %>
+      <%= pb_rails("caption", props: { text: "Project" }) %>
+      <%= pb_rails("icon", props: { icon: "home", fixed_width: true }) %>
+      <%= object.project_number%>
+      <% if object.link %>
+        <%= link_to object.link, class: "pb_logistic_kit_links" do %>
+          <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4, dark: object.dark }) %>
+          <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, dark: object.dark }) if object.date.present? %>
+        <% end %>
+      <% else %>
+        <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4, dark: object.dark }) %>
+        <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, dark: object.dark} ) if object.date.present? %>
+      <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,96 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import DateTime from '../pb_kit/dateTime.js'
+import { Body, Caption, Icon, Title } from '../'
+
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNumber()
+  const day = value.toDay()
+
+  return ` · ${month}/${day}`
+}
+
+type LogisticProps = {
+  dark?: Boolean,
+  date: String,
+  link?: String,
+  projectName: String,
+  projectNumber: Number,
+}
+
+const Logistic = ({
+  dark = false,
+  date,
+  link,
+  projectName,
+  projectNumber,
+}: LogisticProps) => {
+  const formattedDate = new DateTime({ value: date })
+
+  return (
+    <div
+        className={classnames('pb_logistic_kit')}
+    >
+      <Body color="light">
+        <Caption text="Project" />
+        <Icon
+            fixedWidth
+            icon="home"
+        />
+
+        {` ${projectNumber}`}
+
+        <Choose>
+          <When condition={link}>
+            <a
+                className="pb_logistic_kit_links"
+                href={link}
+            >
+              <Choose>
+                <When condition={date}>
+                  <Title
+                      size={4}
+                      tag="span"
+                      text={' ' + projectName + dateString(formattedDate)}
+                  />
+                </When>
+                <Otherwise>
+                  <Title
+                      size={4}
+                      tag="span"
+                      text={' ' + projectName}
+                  />
+                </Otherwise>
+              </Choose>
+            </a>
+          </When>
+          <Otherwise>
+            <Choose>
+              <When condition={date}>
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                    text={' ' + projectName + dateString(formattedDate)}
+                />
+              </When>
+              <Otherwise>
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                    text={' ' + projectName}
+                />
+              </Otherwise>
+            </Choose>
+
+          </Otherwise>
+        </Choose>
+      </Body>
+    </div>
+  )
+}
+
+export default Logistic

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

@@ -0,0 +1,7 @@
+[class^=pb_logistic_kit] {
+  .pb_logistic_kit_links {
+    span {
+      color: $data_1;
+    }
+  }
+}