RubyGems - playbook_ui - Versions diffs - 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown752 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756 - Mend

playbook_ui 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown752 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756

Files changed (25) hide show

checksums.yaml +4 -4
data/app/pb_kits/playbook/pb_date/_date.tsx +96 -42
data/app/pb_kits/playbook/pb_date/date.html.erb +22 -2
data/app/pb_kits/playbook/pb_date/date.rb +2 -0
data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb +30 -0
data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +47 -0
data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +1 -0
data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +74 -78
data/app/pb_kits/playbook/pb_time/_time.tsx +71 -35
data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +37 -0
data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +58 -0
data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +1 -0
data/app/pb_kits/playbook/pb_time/docs/example.yml +2 -0
data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
data/app/pb_kits/playbook/pb_time/time.html.erb +26 -7
data/app/pb_kits/playbook/pb_time/time.rb +2 -0
data/app/pb_kits/playbook/pb_title/_title.scss +2 -1
data/app/pb_kits/playbook/pb_title/_title.tsx +3 -2
data/app/pb_kits/playbook/pb_title/title.rb +10 -3
data/app/pb_kits/playbook/pb_title/title.test.js +3 -3
data/dist/playbook-rails.js +5 -5
data/lib/playbook/version.rb +1 -1
metadata +7 -1

data/app/pb_kits/playbook/pb_time/_time.tsx CHANGED Viewed

@@ -20,6 +20,7 @@ type TimeProps = {
   size?: "md" | "sm";
   showTimezone?: boolean;
   timeZone?: string;
+  unstyled?: boolean;
 } & GlobalProps
 const Time = (props: TimeProps) => {
@@ -30,8 +31,10 @@ const Time = (props: TimeProps) => {
     showIcon,
     size,
     timeZone,
+    unstyled = false,
     showTimezone = true,
   } = props;
   const classes = classnames(
     buildCss("pb_time_kit", align, size),
     globalProps(props),
@@ -43,46 +46,79 @@ const Time = (props: TimeProps) => {
   return (
     <div className={classes}>
       {showIcon && (
-        <>
-          <Body color="light" tag="span">
-            <Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
-          </Body>{" "}
-        </>
-      )}
-      <time dateTime={date}>
-        <span>
-          {size === "md" ? (
-            <>
-              <Body
-                className="pb_time"
-                tag="span"
-                text={dateTimestamp.toTimeWithMeridian()}
-              />{" "}
-              {showTimezone && (
-                <Body
-                  color="light"
-                  tag="span"
-                  text={dateTimestamp.toTimezone()}
+        unstyled
+          ? (
+              <span>
+                <Icon fixedWidth
+                    icon="clock"
                 />
-              )}
-            </>
-          ) : (
+                {" "}
+              </span>
+            )
+          : (
             <>
-              <Caption
-                color="light"
-                tag="span"
-                text={dateTimestamp.toTimeWithMeridian()}
-              />{" "}
-              {showTimezone && (
-                <Caption
-                  color="light"
+              <Body color="light"
                   tag="span"
-                  text={dateTimestamp.toTimezone()}
+              >
+                <Icon fixedWidth
+                    icon="clock"
+                    size={size === "md" ? "" : "sm"}
                 />
-              )}
+                {" "}
+              </Body>
             </>
-          )}
+            )
+      )}
+      <time dateTime={date}>
+        <span>
+          {unstyled
+            ? (
+                <>
+                  <span>
+                    {dateTimestamp.toTimeWithMeridian()}
+                  </span>
+                  {" "}
+                  {showTimezone && (
+                    <span>
+                      {dateTimestamp.toTimezone()}
+                    </span>
+                  )}
+                </>
+              )
+            : size === "md"
+              ? (
+                  <>
+                    <Body
+                        className="pb_time"
+                        tag="span"
+                        text={dateTimestamp.toTimeWithMeridian()}
+                    />{" "}
+                    {showTimezone && (
+                      <Body
+                          color="light"
+                          tag="span"
+                          text={dateTimestamp.toTimezone()}
+                      />
+                    )}
+                  </>
+                )
+              : (
+                  <>
+                    <Caption
+                        color="light"
+                        tag="span"
+                        text={dateTimestamp.toTimeWithMeridian()}
+                    />{" "}
+                    {showTimezone && (
+                      <Caption
+                          color="light"
+                          tag="span"
+                          text={dateTimestamp.toTimezone()}
+                      />
+                    )}
+                  </>
+                )}
         </span>
       </time>
     </div>

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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