playbook_ui 12.25.0.pre.alpha.PLAY818multilevelrebuild779 → 12.25.0.pre.alpha.play824786

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 45ce97781d531eee9bac71e554381e5689917756bf97d616f407398c96d5461e
-  data.tar.gz: d2daf8e00f66a758050063f334379b4c7485d886ca0a61fff1820b7f4e6fc8b4
+  metadata.gz: 0d16e0bc40834178270464f25bde81545d40620d3c632b7adda792ae7f7e6bed
+  data.tar.gz: 10ac729f13f811e0f16f4e83dfddcfd897ff2bbb234fdd012d3737f70a1c2c0a
 SHA512:
-  metadata.gz: a07b07d02827d55ce03612e89341bddae2dcb6d157cc470571548350b0d74a9dfab7d95d04c90e878e54e34267fcff872eed82e814eed22b05264c0262574be9
-  data.tar.gz: 1c9aa705ca47fd3381588b9e3d83913b62d9e13d8f104b9dcec1013ccecd842a531910d80ddc1e5af8d199cabd40356636f2b65aba123c0a9e3486da185ea44d
+  metadata.gz: 9b8880be33d9fbe2f373640058faa2392f405c0404b9f83d54831f709ecd06ae500834cbc66c0d36e4ae840724825ad56c03eece94df03eea9d1601bd24da115
+  data.tar.gz: 8a1c0f8500386822a9f30217ea506eb463000d2d83db924ba3e90f1e3b3b0dff88ebd2f24b30e945e3b5e65d1e2f31900cf18fb6d347a47afec1d2ea7423950d

data/app/pb_kits/playbook/_playbook.scss

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

@@ -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_detail/_detail.scss

@@ -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
+  &.bold,
+  &.bold.dark,
+  b,
+  strong {
+    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

@@ -0,0 +1,55 @@
+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 },
+  bold?: boolean,
+  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 = {},
+    bold = false,
+    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 isBold = bold ? "bold" : null
+  const classes = classnames(
+    buildCss('pb_detail_kit', color),
+    isBold,
+    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

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

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDetail
+    class Detail < Playbook::KitBase
+      prop :bold, type: Playbook::Props::Boolean,
+                  default: false
+      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) + is_bold
+      end
+
+      def content
+        super.presence || text
+      end
+
+    private
+
+      def is_bold
+        bold ? " bold" : ""
+      end
+    end
+  end
+end

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

@@ -0,0 +1,46 @@
+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 class name"
+    />
+  )
+
+  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}`)
+  })
+})
+
+test('bold font-weight should be 600', () => {
+  render(
+    <Detail
+        bold
+        data={{ testid: 'primary-test' }}
+        text="Test bold prop"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass("bold")
+})

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

@@ -0,0 +1 @@
+Used for tables or designs with large amounts of data or text.

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

@@ -0,0 +1,34 @@
+<%= pb_rails("detail", props: {
+  bold: true,
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "default",
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "lighter",
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "link",
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "error",
+  text: "I am a bold detail kit"
+}) %>
+
+<%= pb_rails("detail", props: {
+  bold: true,
+  color: "success",
+  text: "I am a bold detail kit"
+}) %>

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Detail } from '../..'
+
+const DetailBold = (props) => (
+  <div>
+    <Detail
+        bold
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="default"
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="lighter"
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="link"
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="error"
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="success"
+        text="I am a bold detail kit"
+        {...props}
+    />
+  </div>
+)
+
+export default DetailBold

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

@@ -0,0 +1 @@
+Use the `bold` prop to strongly emphasis your text.

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

@@ -0,0 +1,24 @@
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "default"
+}) %>
+
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "lighter"
+}) %>
+
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "link"
+}) %>
+
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "error"
+}) %>
+
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "success"
+}) %>

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Detail } from '../..'
+
+const DetailColors = (props) => (
+  <div>
+    <Detail
+        color="default"
+        text="I am a detail kit"
+        {...props}
+    />
+
+    <Detail
+        color="lighter"
+        text="I am a detail kit"
+        {...props}
+    />
+
+    <Detail
+        color="link"
+        text="I am a detail kit"
+        {...props}
+    />
+
+    <Detail
+        color="error"
+        text="I am a detail kit"
+        {...props}
+    />
+
+    <Detail
+        color="success"
+        text="I am a detail kit"
+        {...props}
+    />
+  </div>
+)
+
+export default DetailColors

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.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_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit"
+}) %>

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Detail } from '../..'
+
+const DetailDefault = (props) => (
+  <div>
+    <Detail
+        text="I am a detail kit"
+        {...props}
+    />
+  </div>
+)
+
+export default DetailDefault

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: Default
+  - detail_colors: Colors
+  - detail_bold: Bold
+
+  react:
+  - detail_default: Default
+  - detail_colors: Colors
+  - detail_bold: Bold

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

@@ -0,0 +1,4 @@
+export { default as DetailDefault } from './_detail_default.jsx'
+export { default as DetailColors } from './_detail_colors.jsx'
+export { default as DetailStyled } from './_detail_styled.jsx'
+export { default as DetailBold } from './_detail_bold.jsx'