playbook_ui 7.0.1.pre.alpha12 → 7.1.0.pre.alpha2

data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md

@@ -0,0 +1 @@
+If there are more than two actions on each row, then they should be contained in secondary circle icon button with the `ellipsis-h` icon (horizontal ellipsis) at the end of the row

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

@@ -10,6 +10,12 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
+    - table_one_action: Table with 1 Action
+    - table_two_actions: Table with 2 Actions
+    - table_two_plus_actions: Table with 2+ Actions
+    - table_action_middle: Table with Actions in the Middle
+    - table_icon_buttons: Table with Icon Buttons
+
  
   react:
     - table_sm: Small
@@ -22,3 +28,9 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
+    - table_one_action: Table with 1 Action
+    - table_two_actions: Table with 2 Actions
+    - table_two_plus_actions: Table with 2+ Actions
+    - table_action_middle: Table with Actions in the Middle
+    - table_icon_buttons: Table with Icon Buttons
+

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

@@ -8,3 +8,9 @@ export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
 export { default as TableDisableHover } from './_table_disable_hover.jsx'
 export { default as TableSingleLine } from './_table_single_line.jsx'
 export { default as TableMultiline } from './_table_multiline.jsx'
+export { default as TableOneAction } from './_table_one_action.jsx'
+export { default as TableTwoActions } from './_table_two_actions.jsx'
+export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
+export { default as TableActionMiddle } from './_table_action_middle.jsx'
+export { default as TableIconButtons } from './_table_icon_buttons.jsx'
+

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

@@ -50,9 +50,9 @@ const TextInput = (props: TextInputProps) => {
   const dataProps = buildDataProps(data)
   const css = classnames([
     'pb_text_input_kit',
-    className,
     error ? 'error' : null,
     globalProps(props),
+    className,
   ])
 
   return (

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

@@ -13,17 +13,22 @@
     margin-bottom: $space_sm;
     display: block;
 
-    input::placeholder {
+    input::placeholder,
+    .text_input .placeholder {
       @include pb_body_light;
     }
 
-    input {
+    input,
+    .text_input {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
     }
 
-    input:focus, input:-webkit-autofill:focus {
+    input:focus,
+    .text_input:focus,
+    input:-webkit-autofill:focus,
+    .text_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;
@@ -34,18 +39,22 @@
     .text_input_wrapper {
       margin-bottom: 1rem;
 
-      input::placeholder {
+      input::placeholder,
+      .text_input .placeholder {
         @include pb_body_light_dark;
       }
 
-      input {
+      input, .text_input {
         @include pb_textarea_dark;
         @include pb_title_4;
         @include pb_title_dark;
         overflow: hidden;
       }
 
-      input:focus, input:-webkit-autofill:focus {
+      input:focus,
+      .text_input:focus,
+      input:-webkit-autofill:focus,
+      .text_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;
@@ -54,7 +63,7 @@
 
     &.error {
       .text_input_wrapper {
-        input {
+        input, .text_input {
           border-color: $error_dark;
         }
       }
@@ -66,7 +75,7 @@
       [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
-      input {
+      input, .text_input {
         border-color: $error;
       }
     }

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -42,7 +42,7 @@ const Textarea = ({
 }: TextareaProps) => {
   const errorClass = error ? 'error' : null
   const resizeClass = `resize_${resize}`
-  const classes = classnames('pb_textarea_kit', className, errorClass, resizeClass, globalProps(props))
+  const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
 
   return (
     <div className={classes}>

data/app/pb_kits/playbook/pb_time/_time.html.erb

@@ -2,33 +2,36 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <% if object.size == "lg" %>
-    <%= pb_rails("title", props: { tag: "span", text: object.format_time_string, size: 3 }) %>
-    <%= content_tag(:span) do %>
-      <%= content_tag(:span, class: "pb_time_timezone") do %>
-        <%= object.pb_date_time.to_timezone.upcase %>
+  <%
+    # convert deprecated prop values
+    size = object.size
+    size = "sm" if object.size == "xs"
+    size = "md" if object.size == "lg"
+  %>
+  <% if size == "md" %>
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-  <% elsif object.size == "sm" %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
-      <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
-      <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= content_tag(:span) do %>
-          <%= object.format_time_string %>
-          <%= content_tag(:span, class: "pb_time_timezone") do %>
-            <%= object.pb_date_time.to_timezone.upcase %>
-          <% end %>
-        <% end %>
-      <% end %>
+    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
+    <% if object.show_timezone %>
+      <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
     <% end %>
   <% else %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
+      <% end %>
+    <% end %>
+    
+    <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
       <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= content_tag(:span) do %>
-          <%= object.format_time_string %>
-          <%= content_tag(:span, class: "pb_time_timezone") do %>
+        <%= object.format_time_string %>
+        <% if object.show_timezone %>
+          <span class="pb_time_timezone">
             <%= object.pb_date_time.to_timezone.upcase %>
-          <% end %>
+          </span>
         <% end %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -7,58 +7,80 @@ import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
-import { Body, Icon, Title  } from '../'
+import { Body, Caption, Icon } from '../'
 
 type TimeProps = {
   align?: 'left' | 'center' | 'right',
   className?: string | array<string>,
   data?: string,
   date: string,
+  dark?: boolean,
   id?: string,
-  size?: 'lg' | 'sm' | 'xs',
+  showIcon?: boolean,
+  size?: 'md' | 'sm',
+  showTimezone?: boolean,
   timeZone?: string,
 }
 
 const Time = (props: TimeProps) => {
-  const { align, className, date, size, timeZone } = props
+  const { align, className, date, showIcon, size, timeZone, showTimezone = true } = props
   const classes = classnames(
-    className,
     buildCss('pb_time_kit', align, size),
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   const dateTimestamp = new DateTime({ value: date, zone: timeZone })
 
   return (
     <div className={classes}>
-      <span className="pb_body_kit">
-        <If condition={size === 'sm'}>
+      <If condition={showIcon}>
+        <Body
+            color="light"
+            tag="span"
+        >
           <Icon
               fixedWidth
               icon="clock"
+              size={size === 'md' ? '' : 'sm'}
           />
-          {' '}
-        </If>
-        <time dateTime={date}>
-          <span>
-            <If condition={size !== 'lg'}>
+        </Body>
+        {' '}
+      </If>
+
+      <time dateTime={date}>
+        <span>
+          <If condition={size === 'md'}>
+            <Body
+                className="pb_time"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+            />
+            {' '}
+            <If condition={showTimezone}>
               <Body
+                  color="light"
                   tag="span"
-                  text={dateTimestamp.toTimeWithMeridian()}
+                  text={dateTimestamp.toTimezone()}
               />
-              <Else />
-              <Title
-                  size={3}
+            </If>
+            <Else />
+            <Caption
+                color="light"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+            />
+            {' '}
+            <If condition={showTimezone}>
+              <Caption
+                  color="light"
                   tag="span"
-                  text={dateTimestamp.toTimeWithMeridian()}
+                  text={dateTimestamp.toTimezone()}
               />
             </If>
-            <If condition={timeZone !== undefined}>
-              <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span>
-            </If>
-          </span>
-        </time>
-      </span>
+          </If>
+        </span>
+      </time>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -2,7 +2,7 @@
 @import "../tokens/typography";
 @import "../pb_icon/icon";
 @import "../pb_body/body";
-@import "../pb_title/title";
+@import "../pb_caption/caption";
 
 [class^=pb_time_kit] {
   &[class*=_center]  {
@@ -13,33 +13,21 @@
     text-align: right;
   }
 
-  [class^=pb_body] {
-    font-weight: $bold !important;
-  }
-
   [class^=pb_time_timezone] {
-    font-size: $font-small;
-    font-weight: $regular;
-    color: $text-lt-light;
+    color: $text_lt_light;
+    font-weight: $bold;
 
     &::before {
       content: " ";
     }
   }
 
-  &[class*=_lg] {
-    [class^=pb_time_timezone] {
-      font-size: $font-large !important;
-      color: $text-lt-light;
+  &[class*=dark] {
+    & * {
+      @include caption_dark;
     }
-  }
-
-  &.dark {
-    & > * [class^=pb_title_kit] {
+    .pb_time {
       color: $text_dk_default;
     }
-    & > * [class^=pb_body_kit] {
-      color: $text_dk_light;
-    }
   }
 }

data/app/pb_kits/playbook/pb_time/docs/_time_align.html.erb

@@ -0,0 +1,18 @@
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx

@@ -1,24 +1,27 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeAlign = () => {
+const TimeAlign = (props) => {
   return (
     <div>
       <Time
           date={new Date()}
-          size="lg"
+          size="md"
+          {...props}
       />
       <br />
       <Time
           align="center"
           date={new Date()}
-          size="lg"
+          size="md"
+          {...props}
       />
       <br />
       <Time
           align="right"
           date={new Date()}
-          size="lg"
+          size="md"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb

@@ -1,18 +1,62 @@
 <%= pb_rails("time", props: {
+  show_timezone: false,
+  time: Time.now
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  timezone: "America/New_York"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  show_icon: true,
+  show_timezone: false,
+  time: "2012-08-02T15:49:29Z",
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  show_icon: true,
+  time: "2012-08-02T15:49:29Z",
+  timezone: "America/New_York"
+}) %>
+
+<br>
+<br>
+
+<%= pb_rails("time", props: {
+  show_timezone: false,
+  size: "md",
   time: Time.now,
-  size: "lg"
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
+  size: "md",
   time: DateTime.now,
-  size: "sm"
+  timezone: "America/New_York",
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  show_icon: true,
+  show_timezone: false,
+  size: "md",
+  time: "2012-08-02T15:49:29Z",
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
+  show_icon: true,
+  size: "md",
   time: "2012-08-02T15:49:29Z",
-  size: "xs"
+  timezone: "America/New_York",
 }) %>