playbook_ui 12.24.0 → 12.25.0.pre.alpha.railsmultilevelimprovements758

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

@@ -0,0 +1,37 @@
+<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
+
+<%= pb_rails("time", props: {
+  show_icon: true,
+  show_timezone: true,
+  time: DateTime.now,
+  timezone: "America/New_York",
+  unstyled: true
+}) %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
+
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("time", props: {
+    show_icon: true,
+    show_timezone: true,
+    time: DateTime.now,
+    timezone: "America/New_York",
+    unstyled: true
+  }) %>
+<% end %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
+
+<%= pb_rails("caption", props: { size: "xs" }) do %>
+  <%= pb_rails("time", props: {
+    show_icon: true,
+    show_timezone: true,
+    time: DateTime.now,
+    timezone: "America/New_York",
+    unstyled: true
+  }) %>
+<% end %>

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import Time from '../_time'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+
+const TimeUnstyled = (props) => {
+  return (
+    <>
+      <Caption size="xs"
+          text="Basic unstyled example"
+      />
+      <Time
+          date={new Date()}
+          showIcon
+          showTimezone
+          timeZone="America/New_York"
+          unstyled
+          {...props}
+      />
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with wrapping typography kit"
+      />
+      <Title size={1}>
+        <Time
+            date={new Date()}
+            showIcon
+            showTimezone
+            timeZone="America/New_York"
+            unstyled
+            {...props}
+        />
+      </Title>
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with icon + subcaption"
+      />
+      <Caption size="xs">
+        <Time
+            date={new Date()}
+            showIcon
+            showTimezone
+            timeZone="America/New_York"
+            unstyled
+            {...props}
+        />
+      </Caption>
+
+      <br />
+    </>
+  )
+}
+
+export default TimeUnstyled

data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md

@@ -0,0 +1 @@
+For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Time` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Time` kit to inherit any of our typography styles.

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

@@ -6,6 +6,7 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
+  - time_unstyled: Unstyled
 
   react:
   - time_default: Default
@@ -13,3 +14,4 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
+  - time_unstyled: Unstyled

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

@@ -3,3 +3,4 @@ export { default as TimeSizes } from './_time_sizes.jsx'
 export { default as TimeTimestamp } from './_time_timestamp.jsx'
 export { default as TimeAlign } from './_time_align.jsx'
 export { default as TimeTimezone } from './_time_timezone.jsx'
+export { default as TimeUnstyled } from './_time_unstyled.jsx'

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')
 })