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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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