playbook_ui 12.24.0 → 12.25.0.pre.alpha.PLAY733DetailKit761

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Detail } from '../../'
+
+const DetailDefault = (props) => (
+  <div>
+    <Detail
+        text="I am a detail kit (Default)"
+        {...props}
+    />
+
+    <Detail
+        color="default"
+        text="I am a detail kit (Default as a color)"
+        {...props}
+    />
+
+    <Detail
+        color="lighter"
+        text="I am a detail kit (Lighter)"
+        {...props}
+    />
+
+    <Detail
+        color="link"
+        text="I am a detail kit (Link)"
+        {...props}
+    />
+
+    <Detail
+        color="error"
+        text="I am a detail kit (Error)"
+        {...props}
+    />
+
+    <Detail
+        color="success"
+        text="I am a detail kit (Success)"
+        {...props}
+    />
+  </div>
+)
+
+export default DetailDefault

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.md

@@ -0,0 +1,6 @@
+##### Prop
+This kit uses the `light` color by default, and can be replaced with colors below:
+
+- `default` `lighter` `link` `error` `success`
+
+- These colors are not for standard usage. You can use the `color` prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it.

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("detail") do %>
+    <b>This text is using the <%="<b>"%> tag.</b>
+    <br />
+    <br />
+    <strong>This text is using the <%="<strong>"%> tag.</strong>
+    <br />
+    <br />
+    <a>This text is using the <%="<a>"%> tag.</a>
+    <br />
+    <br />
+    <i>This text is using the <%="<i>"%> tag.</i>
+    <br />
+    <br />
+    This <em>word</em> is using an <%="<em>"%> tag.
+    <br />
+    <br />
+    <small>This text is using the <%="<small>"%> tag.</small>
+    <br />
+    <br />
+    <u>This text is using the <%="<u>"%> tag.</u>
+    <br />
+<% end %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Detail } from '../..'
+
+const DetailStyled = (props) => (
+  <>
+    <Detail {...props}>
+      <b>{"This text is using the <b> tag."}</b>
+      <br />
+      <br />
+      <strong>{"This text is using the <strong> tag."}</strong>
+      <br />
+      <br />
+      <a>{"This text is using the <a> tag."}</a>
+      <br />
+      <br />
+      <i>{"This text is using the <i> tag."}</i>
+      <br />
+      <br />
+      {"This "}<em>{"word"}</em>{" is using an <em> tag."}
+      <br />
+      <br />
+      <small>{"This text is using the <small> tag."}</small>
+      <br />
+      <br />
+      <u>{"This text is using the <u> tag."}</u>
+      <br />
+      <br />
+    </Detail>
+  </>
+)
+
+export default DetailStyled

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

@@ -0,0 +1,11 @@
+examples:
+
+  rails:
+  - detail_default: Variants
+  - detail_styled: Styled
+  - detail_bolded: Bolded
+
+  react:
+  - detail_default: Variants
+  - detail_styled: Styled
+  - detail_bolded: Bolded

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

@@ -0,0 +1,3 @@
+export { default as DetailDefault } from './_detail_default.jsx'
+export { default as DetailStyled } from './_detail_styled.jsx'
+export { default as DetailBolded } from './_detail_bolded.jsx'

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -5,8 +5,6 @@
 module Playbook
   module PbDocs
     class KitExample < Playbook::KitBase
-      include Playbook::Markdown::Helper
-
       prop :kit, type: Playbook::Props::String, required: true
       prop :example_title, type: Playbook::Props::String, required: true
       prop :example_key, type: Playbook::Props::String, required: true

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

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

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

data/app/pb_kits/playbook/playbook-doc.js

@@ -30,6 +30,7 @@ import * as DateStacked from 'pb_date_stacked/docs'
 import * as DateTime from 'pb_date_time/docs'
 import * as DateTimeStacked from 'pb_date_time_stacked/docs'
 import * as DateYearStacked from 'pb_date_year_stacked/docs'
+import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
 import * as FileUpload from 'pb_file_upload/docs'
@@ -130,6 +131,7 @@ WebpackerReact.setup({
   ...DateTime,
   ...DateTimeStacked,
   ...DateYearStacked,
+  ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
   ...FileUpload,

data/dist/menu.yml

@@ -90,6 +90,7 @@ kits:
   - typography:
     - body
     - caption
+    - detail
     - title
   - typography_patterns:
     - contact