playbook_ui 12.24.0.pre.alpha.railsmultilevelimprovements749 → 12.25.0

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

@@ -8,25 +8,44 @@
     size = "sm" if object.size == "xs"
     size = "md" if object.size == "lg"
   %>
-  <% if size == "md" %>
+
+  <% if object.unstyled %>
+    <% if object.show_icon %>
+      <span>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
+      </span>
+    <% end %>
+
+    <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
+      <span><%= object.format_time_string %></span>
+      <% if object.show_timezone %>
+        <span><%= object.pb_date_time.to_timezone.upcase %></span>
+      <% end %>
+    <% end %>
+
+  <% elsif 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 %>
-    <%= 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 }) %>
+
+    <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
+      <%= 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 %>
     <% end %>
+
   <% else %>
     <% 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(:time, datetime: object.pb_date_time.to_iso) do %>
+      <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
         <%= object.format_time_string %>
         <% if object.show_timezone %>
           <span class="pb_time_timezone">

data/app/pb_kits/playbook/pb_time/time.rb

@@ -15,6 +15,8 @@ module Playbook
                        default: false
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: true
+      prop :unstyled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         # convert deprecated prop values

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -18,6 +18,7 @@
   &[class*=_3] {
     @include pb_title_3;
     @include title_colors;
+    @include pb_title_bold;
   }
 
   &[class*=_4] {
@@ -29,7 +30,7 @@
     @include pb_title_dark;
   }
 
-  &[class*=_thin] {
+  &[class*=thin] {
     @include pb_title_thin;
   }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -21,13 +21,13 @@ const Title = (props: TitleProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
-    bold = true,
     children,
     className,
     color,
     data = {},
     id,
     size = 3,
+    bold = size === 3 ? false : true,
     tag = 'h3',
     text,
     variant = null,
@@ -35,9 +35,10 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
+
   const getBold = bold ? '' : 'thin'
   const classes = classnames(
-    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
+    buildCss("pb_title_kit", `size_${size}`, variant, color) + ` ${getBold}`,
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_title/title.rb

@@ -17,14 +17,21 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: true
-      prop :bold, type: Playbook::Props::Boolean, default: true
+
+      def initialize(props)
+        props[:bold] = [1, 2, 4].include?(props[:size]) unless props.key?(:bold)
+        props[:bold] = false if props[:size].nil? && !props.key?(:bold)
+        super(props)
+      end
+
+      prop :bold, type: Playbook::Props::Boolean
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color, is_bold)
+        generate_classname("pb_title_kit", size, variant, color) + is_bold
       end
 
       def is_bold
-        bold ? nil : "thin"
+        bold ? "" : " thin"
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3')
+  expect(kit).toHaveClass('pb_title_kit_size_3 thin')
 })
 
 test('with thin font weight', () => {
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3 thin')
 })
 
 test('with colors', () => {
@@ -38,5 +38,5 @@ test('with colors', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_success')
+  expect(kit).toHaveClass('pb_title_kit_size_3_success thin')
 })