RubyGems - playbook_ui - Versions diffs - 12.24.0.pre.alpha.railsmultilevelimprovements749 → 12.25.0.pre.alpha.PLAY733DetailKit761 - Mend

playbook_ui 12.24.0.pre.alpha.railsmultilevelimprovements749 → 12.25.0.pre.alpha.PLAY733DetailKit761

Files changed (51) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c6fe605ba32fd5f0d1b3a69fa8dc0459b1f15336526f1f615bcd35b271adcdaf
-  data.tar.gz: 696f4ef6e81087809a81f79a4c04a9a719eeac93b00c27365d365c151da9c37c
+  metadata.gz: 0e2ca337968fddb4b7339377411e960bfe5a908c7236bd183a5cf1175abb1d45
+  data.tar.gz: 1dae2d3a4a0e5af085133891b141a46806bc6245559dae96b474d27c6143f5b0
 SHA512:
-  metadata.gz: 1d402c24afb0d5c5d45131ab241dd8b3fc3906c4e79f0fd7d00337ab2299456676e2c892b31b11fe186cc3beaee8e5124061f6fbe18d76405dafc5722bdfbaea
-  data.tar.gz: 0b94788ff8de309a8b6e2649523ceef0ef17b0bdda8c691425fccf18d30bec309cdc1d062d37266227962dc5c2448a046b8c7dd373649152c877e26f6764493d
+  metadata.gz: 7840f0f79113c13267b17e9cc6dc68058b8cd9abc24618caee84177c0b4baf168ee163f76bc847bdbec9b132190f01f80ff6107d9868a115a3793165899b11c1
+  data.tar.gz: 22eeca8bbc3b6474277b8ae9adb61338b87a7537404a081fd707949559840dfbdf64a202eaa73d88ef81b100f3c45112153baebf9f495f5d8b3a64aaf532d61f

data/app/pb_kits/playbook/_playbook.scss CHANGED Viewed

@@ -5,6 +5,7 @@
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';
 @import 'pb_card/card';
+@import 'pb_detail/detail';
 @import 'pb_title/title';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';

data/app/pb_kits/playbook/index.js CHANGED Viewed

@@ -31,6 +31,7 @@ export { default as DateStacked } from './pb_date_stacked/_date_stacked'
 export { default as DateTime } from './pb_date_time/_date_time'
 export { default as DateTimeStacked } from './pb_date_time_stacked/_date_time_stacked'
 export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_stacked'
+export { default as Detail} from './pb_detail/_detail'
 export { default as Dialog } from './pb_dialog/_dialog'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
 export { default as FileUpload } from './pb_file_upload/_file_upload'

data/app/pb_kits/playbook/pb_date/_date.tsx CHANGED Viewed

@@ -19,6 +19,7 @@ type PbDateProps = {
   showDayOfWeek?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
+  unstyled?: boolean;
   value: string | Date;
 };
@@ -32,6 +33,7 @@ const PbDate = (props: PbDateProps) => {
     showDayOfWeek = false,
     showIcon = false,
     size = "md",
+    unstyled = false,
     value,
   } = props;
@@ -52,48 +54,100 @@ const PbDate = (props: PbDateProps) => {
   );
   return (
-    <div {...ariaProps} {...dataProps} className={classes} id={id}>
-      {size == "md" || size == "lg" ? (
-        <Title size={4} tag="h4">
-          {showIcon && (
-            <Body className="pb_icon_kit_container" color="light" tag="span">
-              <Icon fixedWidth icon="calendar-alt" />
-            </Body>
-          )}
-          {showDayOfWeek && (
-            <>
-              {weekday}
-              <Body color="light" tag="span" text=" • " />
-            </>
-          )}
-          <span>
-            {month} {day}
-          </span>
-          {currentYear != year && <span>{`, ${year}`}</span>}
-        </Title>
-      ) : (
-        <>
-          {showIcon && (
-            <Caption className="pb_icon_kit_container" tag="span">
-              <Icon fixedWidth icon="calendar-alt" size="sm" />
-            </Caption>
-          )}
-          {showDayOfWeek && (
-            <>
-              <Caption tag="div">{weekday}</Caption>
-              <Caption color="light" tag="div" text=" • " />
-            </>
-          )}
-          <Caption tag="span">
-            {month} {day}
-            {currentYear != year && <>{`, ${year}`}</>}
-          </Caption>
-        </>
-      )}
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {unstyled
+        ? <>
+            {showIcon && (
+              <div>
+                <Icon fixedWidth
+                    icon="calendar-alt"
+                />
+              </div>
+            )}
+            {showDayOfWeek && (
+              <>
+                <div>
+                  {weekday}
+                </div>
+                <div>{"•"}</div>
+              </>
+            )}
+            <span>
+              <span>
+                {month} {day}
+              </span>
+              {currentYear != year && <span>{`, ${year}`}</span>}
+            </span>
+          </>
+        : size == "md" || size == "lg"
+          ? (
+            <Title size={4}
+                tag="h4"
+            >
+              {showIcon && (
+                <Body className="pb_icon_kit_container"
+                    color="light"
+                    tag="span"
+                >
+                  <Icon fixedWidth
+                      icon="calendar-alt"
+                  />
+                </Body>
+              )}
+              {showDayOfWeek && (
+                <>
+                  {weekday}
+                  <Body color="light"
+                      tag="span"
+                      text=" • "
+                  />
+                </>
+              )}
+              <span>
+                {month} {day}
+              </span>
+              {currentYear != year && <span>{`, ${year}`}</span>}
+            </Title>
+            )
+          : (
+              <>
+                {showIcon && (
+                  <Caption className="pb_icon_kit_container"
+                      tag="span"
+                  >
+                    <Icon fixedWidth
+                        icon="calendar-alt"
+                        size="sm"
+                    />
+                  </Caption>
+                )}
+                {showDayOfWeek && (
+                  <>
+                    <Caption tag="div">{weekday}</Caption>
+                    <Caption color="light"
+                        tag="div"
+                        text=" • "
+                    />
+                  </>
+                )}
+                <Caption tag="span">
+                  {month} {day}
+                  {currentYear != year && <>{`, ${year}`}</>}
+                </Caption>
+              </>
+            )}
     </div>
   );
 };

data/app/pb_kits/playbook/pb_date/date.html.erb CHANGED Viewed

@@ -4,7 +4,28 @@
     class: object.classname,
     aria: object.aria) do %>
-  <% if object.size == "md" %>
+  <% if object.unstyled %>
+    <!-- icon -->
+    <% if object.show_icon %>
+      <div><%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %></div>
+    <% end %>
+    <!-- day_of_week -->
+    <% if object.show_day_of_week %>
+      <div><%= object.day_of_week %></div>
+      <div>•</div>
+    <% end %>
+    <!-- month day, year -->
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
+      <span><%= "#{object.month} #{object.day}" %></span>
+    <%# if is current year %>
+    <% else %>
+      <span><%= "#{object.month} #{object.day}, #{object.year}" %></span>
+    <% end %>
+  <% elsif object.size == "md" || object.size == "lg" %>
     <!-- icon -->
     <% if object.show_icon %>
       <%= pb_rails("body", props: {
@@ -36,7 +57,6 @@
     <% end %>
   <% else %>
     <!-- icon -->
     <% if object.show_icon %>
       <%= pb_rails("caption", props: {

data/app/pb_kits/playbook/pb_date/date.rb CHANGED Viewed

@@ -15,6 +15,8 @@ module Playbook
                   values: %w[lg md sm xs],
                   default: "md"
       prop :timezone, default: "America/New_York"
+      prop :unstyled, type: Playbook::Props::Boolean,
+                      default: false
       def classname
         generate_classname("pb_date_kit", alignment)

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb ADDED Viewed

@@ -0,0 +1,30 @@
+<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
+<%= pb_rails("date", props: {
+  date: Date.today,
+  unstyled: true
+}) %>
+<br />
+<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("date", props: {
+    date: "2012-08-02T15:49:29Z",
+    unstyled: true
+  }) %>
+<% end %>
+<br />
+<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
+<%= pb_rails("caption", props: { size: "xs" }) do %>
+  <%= pb_rails("date", props: {
+    date: "2012-08-02T15:49:29Z",
+    show_icon: true,
+    unstyled: true,
+    show_day_of_week: true
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx ADDED Viewed

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Caption, Date as FormattedDate, Title } from '../../'
+const DateUnstyled = (props) => {
+  return (
+    <>
+      <Caption size="xs"
+          text="Basic unstyled example"
+      />
+      <FormattedDate
+          unstyled
+          value={new Date()}
+          {...props}
+      />
+      <br />
+      <Caption size="xs"
+          text="Example with wrapping typography kit"
+      />
+      <Title size={1}>
+        <FormattedDate
+            unstyled
+            value="1995-12-25"
+            {...props}
+        />
+      </Title>
+      <br />
+      <Caption size="xs"
+          text="Example with icon + subcaption"
+      />
+      <Caption size="xs">
+        <FormattedDate
+            showDayOfWeek
+            showIcon
+            unstyled
+            value="1995-12-25"
+            {...props}
+        />
+      </Caption>
+    </>
+  )
+}
+export default DateUnstyled

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md ADDED Viewed

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

data/app/pb_kits/playbook/pb_date/docs/example.yml CHANGED Viewed

@@ -1,14 +1,14 @@
 examples:
   rails:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
+  - date_unstyled: Unstyled
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
+  - date_unstyled: Unstyled

data/app/pb_kits/playbook/pb_date/docs/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
+export { default as DateUnstyled } from './_date_unstyled.jsx'

data/app/pb_kits/playbook/pb_detail/_detail.scss ADDED Viewed

@@ -0,0 +1,44 @@
+@import "./detail_mixins";
+@import "../tokens/titles";
+@import "../tokens/typography";
+[class^=pb_detail_kit]{
+  @include pb_detail;
+  @each $color_name, $color_value in $pb_detail_colors {
+    &[class*=_#{$color_name}] {
+      @include pb_detail($color_value);
+    }
+  }
+  @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_detail($dark_color_value)
+    }
+  }
+  // Styles
+  b, strong {
+    @include pb_title_4;
+    color: inherit;
+    font-size: $text_small;
+    font-weight: $bold;
+  }
+  a {
+    color: $primary;
+    &:hover {
+      cursor: pointer;
+      color: $text_lt_default;
+    }
+  }
+  em {
+    font-weight: $bold;
+  }
+  small {
+    font-size: $font_smaller;
+    letter-spacing: $lspace_loose;
+  }
+}

data/app/pb_kits/playbook/pb_detail/_detail.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+type DetailProps = {
+  aria?: { [key: string]: string },
+  children?: React.ReactChild[] | React.ReactChild,
+  className?: string,
+  color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
+  dark?: boolean,
+  data?: { [key: string]: string },
+  id?: string,
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  text?: string,
+} & GlobalProps
+const Detail = (props: DetailProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    color = 'light',
+    data = {},
+    id = '',
+    tag = 'div',
+    text= ''
+  } = props
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_detail_kit', color),
+    globalProps(props),
+    className
+  )
+  const Tag: React.ReactElement | any = `${tag}`
+  return (
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {text || children}
+    </Tag>
+  )
+}
+export default Detail

data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss ADDED Viewed

@@ -0,0 +1,29 @@
+@import "../tokens/colors";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+$pb_detail_colors: (
+  light:          $text_lt_light,
+  default:        $text_lt_default,
+  lighter:        $text_lt_lighter,
+  link:           $primary,
+  error:          $error,
+  success:        $text_lt_success_sm,
+);
+$pb_dark_detail_colors: (
+  light:          $text_dk_light,
+  default:        $text_dk_default,
+  lighter:        $text_dk_lighter,
+  link:           $primary,
+  error:          $error_dark,
+  success:        $text_dk_success_sm,
+);
+@mixin pb_detail($color: $text_lt_light) {
+  line-height: $lh_tight;
+  color: $color;
+  font-size: $text_small;
+  font-weight: $regular;
+  font-family: $font-family-base;
+}

data/app/pb_kits/playbook/pb_detail/detail.html.erb ADDED Viewed

@@ -0,0 +1,7 @@
+<%= content_tag(object.tag,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <%= object.content %>
+<% end %>

data/app/pb_kits/playbook/pb_detail/detail.rb ADDED Viewed

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+module Playbook
+  module PbDetail
+    class Detail < ::Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[light default lighter link error success],
+                   default: "light"
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[h1 h2 h3 h4 h5 h6 p span div],
+                 default: "div"
+      prop :text
+      def classname
+        generate_classname("pb_detail_kit", color)
+      end
+      def content
+        super.presence || text
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_detail/detail.test.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Detail from './_detail'
+test('returns namespaced class name', () => {
+  render(
+    <Detail
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_detail_kit_light')
+})
+test('with colors', () => {
+  ['light', 'default', 'lighter', 'link', 'success', 'error'].forEach((color) => {
+    const testId = `colors-test-${color}`
+    render(
+      <Detail
+          color={color}
+          data={{ testid: testId }}
+          text="Test colors"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_detail_kit_${color}`)
+  })
+})

data/app/pb_kits/playbook/pb_detail/docs/_description.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Used for tables or designs with large amounts of data or text. This kit's font size is smaller than the `Body` kit and larger than the Caption's kit `subcaption` variant.

data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.html.erb ADDED Viewed

@@ -0,0 +1,33 @@
+<%= pb_rails("detail") do %>
+  <b>I am a bolded detail kit (Default)</b>
+<% end %>
+<%= pb_rails("detail", props: {
+  color: "default"
+}) do %>
+  <b>I am a bolded detail kit (Default as a color)</b>
+<% end %>
+<%= pb_rails("detail", props: {
+  color: "lighter"
+}) do %>
+  <b>I am a bolded detail kit (lighter)</b>
+<% end %>
+<%= pb_rails("detail", props: {
+  color: "link"
+}) do %>
+  <b>I am a bolded detail kit (link)</b>
+<% end %>
+<%= pb_rails("detail", props: {
+  color: "error"
+}) do %>
+  <b>I am a bolded detail kit (Error)</b>
+<% end %>
+<%= pb_rails("detail", props: {
+  color: "success"
+}) do %>
+  <b>I am a bolded detail kit (Success)</b>
+<% end %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.jsx ADDED Viewed

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

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb ADDED Viewed

@@ -0,0 +1,28 @@
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit (Default)"
+}) %>
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit (Default as a color)",
+  color: "default"
+}) %>
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit (Lighter)",
+  color: "lighter"
+}) %>
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit (Link)",
+  color: "link"
+}) %>
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit (Error)",
+  color: "error"
+}) %>
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit (Success)",
+  color: "success"
+}) %>