playbook_ui 7.1.0 → 7.3.0.pre.alpha1

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     data: object.data,
     class: object.classname) do %>
-  
+
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,
     name: object.name,
@@ -10,7 +10,8 @@
     disabled: object.disabled,
     icon: object.checkmark,
     multi: object.multi,
-    dark: object.dark
+    dark: object.dark,
+    input_options: object.input_options
   }) do %>
 
     <%= pb_rails("selectable_icon", props: {

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_options.html.erb

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-line",
+    title_text: "Quarterly Report",
+    body_text: "Export",
+    input_id: "card-icon-id",
+    checked: true,
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+
+</div>

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

@@ -1,12 +1,13 @@
 examples:
-  
+
   rails:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
+  - selectable_card_icon_options: With Options
+
+
 
-  
-  
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -25,6 +25,9 @@ module Playbook
                        default: false
       prop :value
 
+      prop :input_options, type: Playbook::Props::Hash,
+                                      default: {}
+
       def classname
         generate_classname("pb_selectable_card_icon_kit", checked_class, enabled_disabled_class)
       end

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.html.erb

@@ -4,15 +4,15 @@
     class: object.classname) do %>
 
     <% if object.inputs == "disabled" %>
-    
+
       <%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
       <%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
 
     <% else %>
       <% if object.multi %>
-        <%= check_box_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
+        <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
       <% else %>
-        <%= radio_button_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
+        <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
       <% end %>
 
       <label for="<%= object.input_id_present %>">

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb

@@ -0,0 +1,15 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "dollar-sign",
+    input_id: "options-id",
+    checked: true,
+    text: "US Dollar",
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+
+</div>

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

@@ -1,10 +1,11 @@
 examples:
-  
+
   rails:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
+  - selectable_icon_options: With Options
+
 
-  
   react:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -23,6 +23,9 @@ module Playbook
                       default: false
       prop :value
 
+      prop :input_options, type: Playbook::Props::Hash,
+                                      default: {}
+
       # Conditional rendering for input field
       prop :inputs, type: Playbook::Props::String,
                     default: "enabled"
@@ -35,6 +38,13 @@ module Playbook
         input_id.present? ? input_id : name
       end
 
+      def additional_input_options
+        input_options.merge(
+          id: input_id_present,
+          disabled: disabled
+        )
+      end
+
     private
 
       def checked_class

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

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

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

@@ -18,11 +18,12 @@ type TimeProps = {
   id?: string,
   showIcon?: boolean,
   size?: 'md' | 'sm',
+  showTimezone?: boolean,
   timeZone?: string,
 }
 
 const Time = (props: TimeProps) => {
-  const { align, className, date, showIcon, size, timeZone } = props
+  const { align, className, date, showIcon, size, timeZone, showTimezone = true } = props
   const classes = classnames(
     buildCss('pb_time_kit', align, size),
     globalProps(props),
@@ -33,41 +34,53 @@ const Time = (props: TimeProps) => {
 
   return (
     <div className={classes}>
-      <span className="pb_body_kit">
-        <If condition={showIcon}>
-          <Body
-              color="light"
-              tag="span"
-          >
-            <Icon
-                fixedWidth
-                icon="clock"
-                size={size === 'md' ? 'lg' : 'sm'}
+      <If condition={showIcon}>
+        <Body
+            color="light"
+            tag="span"
+        >
+          <Icon
+              fixedWidth
+              icon="clock"
+              size={size === 'md' ? '' : 'sm'}
+          />
+        </Body>
+        {' '}
+      </If>
+
+      <time dateTime={date}>
+        <span>
+          <If condition={size === 'md'}>
+            <Body
+                className="pb_time"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
             />
-          </Body>
-          {' '}
-        </If>
-        <time dateTime={date}>
-          <span>
-            <If condition={size !== 'md'}>
+            {' '}
+            <If condition={showTimezone}>
               <Body
                   color="light"
                   tag="span"
-                  text={dateTimestamp.toTimeWithMeridian()}
+                  text={dateTimestamp.toTimezone()}
               />
-              <Else />
+            </If>
+            <Else />
+            <Caption
+                color="light"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+            />
+            {' '}
+            <If condition={showTimezone}>
               <Caption
-                  size="lg"
+                  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

@@ -5,8 +5,6 @@
 @import "../pb_caption/caption";
 
 [class^=pb_time_kit] {
-  letter-spacing: $lspace_looser;
-  text-transform: uppercase;
   &[class*=_center]  {
     text-align: center;
   }
@@ -15,10 +13,6 @@
     text-align: right;
   }
 
-  [class^=pb_body] {
-    font-weight: $bold !important;
-  }
-
   [class^=pb_time_timezone] {
     color: $text_lt_light;
     font-weight: $bold;
@@ -28,26 +22,12 @@
     }
   }
 
-  &[class*=_md] {
-    [class^=pb_caption_kit] {
-      color: $text_lt_default;
-      letter-spacing: $lspace_tight;
-      text-transform: capitalize;
-    }
-    [class^=pb_time_timezone] {
-      color: $text_lt_light;
-      font-size: $font-large !important;
-      font-weight: $regular;
-      letter-spacing: $lspace_tight;
+  &[class*=dark] {
+    & * {
+      @include caption_dark;
     }
-  }
-
-  &.dark {
-    [class^=pb_caption_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.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="md"
+          {...props}
       />
       <br />
       <Time
           align="center"
           date={new Date()}
           size="md"
+          {...props}
       />
       <br />
       <Time
           align="right"
           date={new Date()}
           size="md"
+          {...props}
       />
     </div>
   )

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

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

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

@@ -1,45 +1,56 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeDefault = () => {
+const TimeDefault = (props) => {
   return (
     <div>
       <Time
           date={new Date().getTime()}
+          showTimezone={false}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <Time
           date={new Date().getTime()}
           showIcon
+          showTimezone={false}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           showIcon
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <br />
       <Time
           date={new Date()}
+          showTimezone={false}
           size="md"
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           size="md"
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           showIcon
+          showTimezone={false}
           size="md"
+          {...props}
       />
       <br />
       <Time
@@ -47,6 +58,7 @@ const TimeDefault = () => {
           showIcon
           size="md"
           timeZone="America/New_York"
+          {...props}
       />
     </div>
   )