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

data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("logistic", props: {
+  project_name: "Jefferson-Smith",
+  project_number: "33-12345",
+  date: Date.new(2019, 11, 18),
+  link: "#",
+  dark: true
+}) %>
+<br/><br/>
+<%= pb_rails("logistic", props: {
+  project_name: "Jefferson-Smith",
+  project_number: "33-12345",
+  date: Date.new(2019, 11, 18),
+  dark: true
+}) %>
+<br/><br/>
+<%= pb_rails("logistic", props: {
+  project_name: "Jefferson-Smith",
+  project_number: "33-12345",
+  link: "#",
+  dark: true
+}) %>
+<br/><br/>
+<%= pb_rails("logistic", props: {
+  project_name: "Jefferson-Smith",
+  project_number: "33-12345",
+  dark: true
+}) %>

data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Logistic } from '../../'
+
+const LogisticDark = () => (
+  <div>
+    <Logistic
+        dark
+        date={new Date('18 Nov 2019')}
+        link="#"
+        projectName="Jefferson-Smith"
+        projectNumber="33-12345"
+    />
+    <br />
+    <br />
+    <Logistic
+        dark
+        date={new Date('18 Nov 2019')}
+        projectName="Jefferson-Smith"
+        projectNumber="33-12345"
+    />
+    <br />
+    <br />
+    <Logistic
+        dark
+        link="#"
+        projectName="Jefferson-Smith"
+        projectNumber="33-12345"
+    />
+    <br />
+    <br />
+    <Logistic
+        dark
+        projectName="Jefferson-Smith"
+        projectNumber="33-12345"
+    />
+  </div>
+)
+
+export default LogisticDark

data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("logistic", props: {
+  project_name: "Jefferson-Smith",
+  project_number: "33-12345",
+  date: Date.new(2019, 11, 18),
+  link: "#"
+}) %>
+<br/><br/>
+<%= pb_rails("logistic", props: {
+  project_name: "Jefferson-Smith",
+  project_number: "33-12345",
+  date: Date.new(2019, 11, 18),
+}) %>
+<br/><br/>
+<%= pb_rails("logistic", props: {
+  project_name: "Jefferson-Smith",
+  project_number: "33-12345",
+  link: "#"
+}) %>
+<br/><br/>
+<%= pb_rails("logistic", props: {
+  project_name: "Jefferson-Smith",
+  project_number: "33-12345",
+}) %>
+

data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Logistic } from '../../'
+
+const LogisticDefault = () => (
+  <div>
+    <Logistic
+        date={new Date('18 Nov 2019')}
+        link="#"
+        projectName="Jefferson-Smith"
+        projectNumber="33-12345"
+    />
+    <br />
+    <br />
+    <Logistic
+        date={new Date('18 Nov 2019')}
+        projectName="Jefferson-Smith"
+        projectNumber="33-12345"
+    />
+    <br />
+    <br />
+    <Logistic
+        link="#"
+        projectName="Jefferson-Smith"
+        projectNumber="33-12345"
+    />
+    <br />
+    <br />
+    <Logistic
+        projectName="Jefferson-Smith"
+        projectNumber="33-12345"
+    />
+  </div>
+)
+
+export default LogisticDefault

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

@@ -0,0 +1,11 @@
+examples:
+
+  rails:
+  - logistic_default: Default
+  - logistic_dark: Dark
+
+
+  react:
+  - logistic_default: Default
+  - logistic_dark: Dark
+

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

@@ -0,0 +1,2 @@
+export { default as LogisticDefault } from './_logistic_default.jsx'
+export { default as LogisticDark } from './_logistic_dark.jsx'

data/app/pb_kits/playbook/pb_logistic/logistic.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbLogistic
+    class Logistic
+      include Playbook::Props
+
+      partial "pb_logistic/logistic"
+
+      prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :project_name
+      prop :project_number
+      prop :date
+      prop :link
+
+      def classname
+        generate_classname("pb_logistic_kit", dark_class)
+      end
+
+      def date_element
+        "· #{date.strftime('%m/%d')}".html_safe
+      end
+
+    private
+
+      def dark_class
+        dark ? "dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -1,5 +1,7 @@
 @import "../pb_textarea/textarea_mixin";
 @import "../pb_title/title_mixin";
+@import "../tokens/colors";
+
 
 [class^=pb_text_input_kit] {
   .pb_text_input_kit_label {
@@ -21,8 +23,10 @@
       overflow: hidden;
     }
 
-    input:focus {
+    input:focus, input:-webkit-autofill:focus {
       @include pb_textarea_focus;
+      -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
+      transition: background-color 5000s ease-in-out 0s;
     }
   }
 
@@ -41,8 +45,10 @@
         overflow: hidden;
       }
 
-      input:focus {
+      input:focus, input:-webkit-autofill:focus {
         @include pb_textarea_focus_dark;
+        -webkit-box-shadow: 0 0 0px 1000px $focus_input_dark inset;
+        transition: background-color 5000s ease-in-out 0s;
       }
     }
 

data/app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss

@@ -21,7 +21,7 @@
   overflow: auto;
   overflow-wrap: break-word;
   resize: none;
-  transition-property: border-color, box-shadow, color, background-color;
+  transition-property: box-shadow, color, background-color;
   transition-duration: .24s;
   transition-timing-function: $bezier;
   &[type=number] {
@@ -37,6 +37,14 @@
     box-shadow: none;
     opacity: 0.5;
   }
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-internal-autofill-selected {
+    -webkit-text-fill-color: $text_color;
+    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
+    transition: background-color 5000s ease-in-out 0s;
+    font-family: $font_family_base;
+  }
 }
 
 @mixin pb_textarea_focus($focus_color: $focus_input_light) {

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+      <div class="pb_time_range_inline_wrapper">
+        <% if object.icon == true %>
+          <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
+        <% end %>
+        <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.format_start_time_string }) %>
+        <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, classname:"pb_time_range_inline_dash", text: "—" }) %>
+        <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.format_end_time_string }) %>
+        <% if object.timezone == true %>
+          <%= pb_rails(object.text_kit, props: { tag: "span", color: object.text_timezone_color, classname:"pb_time_range_inline_timezone", text: object.pb_date_end_time.to_timezone.upcase }) %>
+        <% end %>
+      </div>
+<% end %>

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx

@@ -0,0 +1,134 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { Body, Caption, Icon } from '../'
+import DateTime from '../pb_kit/dateTime.js'
+
+type TimeRangeInlineProps = {
+  className?: String,
+  id?: String,
+  data?: String,
+  alignment?: 'left' | 'center' | 'vertical',
+  size?: 'sm' | 'xs',
+  dark?: Boolean,
+  icon?: Boolean,
+  timezone?: Boolean,
+  startTime: String,
+  endTime: String
+}
+
+const timezoneString = (dateValue) => {
+  const date = new DateTime({ value: dateValue })
+  return `${date.convertToTimezone()}`
+}
+
+const dateTimestamp = (dateValue) => {
+  const date = new DateTime({ value: dateValue })
+  return `${date.toHour()}:${date.toMinute()}${date.toMeridian()}`
+}
+
+const dateTimeIso = (dateValue) => {
+  const date = new DateTime({ value: dateValue })
+  return date.toIso()
+}
+
+const TimeRangeInline = ({
+  className,
+  alignment = 'left',
+  size = 'sm',
+  dark = false,
+  icon = false,
+  timezone = false,
+  startTime,
+  endTime,
+}: TimeRangeInlineProps) => {
+  const separator = `${'—'}`
+
+  const iconContent = () => {
+    return (
+      <If condition={icon}>
+        <Icon
+            className="pb_time_range_inline_icon"
+            dark={dark}
+            fixedWidth
+            icon="clock"
+            size={size}
+            tag="span"
+        />
+      </If>
+    )
+  }
+
+  return (
+    <div className={classnames('pb_time_range_inline_kit_' + alignment, className)}>
+      <div className="pb_time_range_inline_wrapper">
+        <If condition={size == 'xs'}>
+          <Caption
+              dark={dark}
+              tag="span"
+          >
+            {iconContent()}
+            <time dateTime={dateTimeIso(startTime)}>{` ${dateTimestamp(startTime)} `}</time>
+          </Caption>
+          <Caption
+              className="pb_time_range_inline_dash"
+              dark={dark}
+              tag="span"
+          >
+            {separator}
+          </Caption>
+          <Caption
+              dark={dark}
+              tag="span"
+          >
+            <time dateTime={dateTimeIso(endTime)}>{` ${dateTimestamp(endTime)} `}</time>
+          </Caption>
+          <If condition={timezone}>
+            <Caption
+                className="pb_time_range_inline_timezone"
+                dark={dark}
+                tag="span"
+            >
+              {timezoneString(endTime)}
+            </Caption>
+          </If>
+        </If>
+        <If condition={size == 'sm'}>
+          <Body
+              dark={dark}
+              tag="span"
+          >
+            {iconContent()}
+            <time dateTime={dateTimeIso(startTime)}>{` ${dateTimestamp(startTime)} `}</time>
+          </Body>
+          <Body
+              className="pb_time_range_inline_dash"
+              dark={dark}
+              tag="span"
+          >
+            {separator}
+          </Body>
+          <Body
+              dark={dark}
+              tag="span"
+          >
+            <time dateTime={dateTimeIso(endTime)}>{` ${dateTimestamp(endTime)} `}</time>
+          </Body>
+          <If condition={timezone}>
+            <Body
+                className="pb_time_range_inline_timezone"
+                color="light"
+                dark={dark}
+                tag="span"
+            >
+              {timezoneString(endTime)}
+            </Body>
+          </If>
+        </If>
+      </div>
+    </div>
+  )
+}
+
+export default TimeRangeInline

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -0,0 +1,33 @@
+[class^=pb_time_range_inline_kit] {
+  &[class*=_center]  {
+    & > [class^=pb_caption],
+    & > [class^=pb_body] {
+      text-align: center;
+    }
+    & > [class*=pb_time_range_inline_wrapper] {
+      justify-content: center;
+    }
+  }
+  &[class*=_right] {
+    & > [class^=pb_caption],
+    & > [class^=pb_body] {
+      text-align: right;
+    }
+    & > [class*=pb_time_range_inline_wrapper] {
+      justify-content: flex-end;
+    }
+  }
+  [class^=pb_time_range_inline_wrapper] {
+    display: flex;
+    [class*=pb_time_range_inline_dash] {
+      margin-left: 4px;
+      margin-right: 4px;
+    }
+    [class*=pb_time_range_inline_timezone] {
+      margin-left: 4px;
+    }
+    [class*=pb_time_range_inline_icon] {
+      margin-right: 4px;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_dark.html.erb

@@ -0,0 +1,72 @@
+<%= pb_rails("time_range_inline", props: {
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "xs",
+    dark: true
+}) %>
+<br />
+<%= pb_rails("time_range_inline", props: {
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "sm",
+    dark: true
+}) %>
+<br />
+<br />
+<%= pb_rails("time_range_inline", props: {
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "xs",
+    timezone: true,
+    alignment: "center",
+    dark: true
+}) %>
+<br />
+<%= pb_rails("time_range_inline", props: {
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "sm",
+    timezone: true,
+    alignment: "center",
+    dark: true
+}) %>
+<br />
+<br />
+<%= pb_rails("time_range_inline", props: {
+    icon: true,
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "xs",
+    alignment: "center",
+    dark: true
+}) %>
+<br />
+<%= pb_rails("time_range_inline", props: {
+    icon: true,
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "sm",
+    alignment: "center",
+    dark: true
+}) %>
+<br />
+<br />
+<%= pb_rails("time_range_inline", props: {
+    icon: true,
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "xs",
+    timezone: true,
+    alignment: "right",
+    dark: true
+}) %>
+<br />
+<%= pb_rails("time_range_inline", props: {
+    icon: true,
+    start_time: "2012-08-02T15:49:29Z",
+    end_time: "2012-08-02T17:49:29Z",
+    size: "sm",
+    timezone: true,
+    alignment: "right",
+    dark: true
+}) %>