playbook_ui 12.25.0.pre.alpha.PLAY733DetailKit761 → 12.25.0.pre.alpha.play822bolddefaultfortitle3764

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e2ca337968fddb4b7339377411e960bfe5a908c7236bd183a5cf1175abb1d45
-  data.tar.gz: 1dae2d3a4a0e5af085133891b141a46806bc6245559dae96b474d27c6143f5b0
+  metadata.gz: 2f92b0ba0b6815c0e58e6245b7ab5c168f842a740774aae7f42157b772d47b65
+  data.tar.gz: 8b6d4937bdf2cd755f0787c25ab8743ea363381f05fcca13627b5363e1f484f0
 SHA512:
-  metadata.gz: 7840f0f79113c13267b17e9cc6dc68058b8cd9abc24618caee84177c0b4baf168ee163f76bc847bdbec9b132190f01f80ff6107d9868a115a3793165899b11c1
-  data.tar.gz: 22eeca8bbc3b6474277b8ae9adb61338b87a7537404a081fd707949559840dfbdf64a202eaa73d88ef81b100f3c45112153baebf9f495f5d8b3a64aaf532d61f
+  metadata.gz: 7ef87aa97ccafa5bd9291457af632c5710747f680e300b8ad56060a0b9b65c1ac22738079663831be6a2e9bd3a705a8f201be0b0a2826e28261d88541a70f80b
+  data.tar.gz: cbc07ce3495e7df2bccb5c40adc653b824de1506e0a64895ff632897529b4250232317278026ef9d9071071ff1ed4c8245ce514fdf6569162e8720d942c84da8

data/app/pb_kits/playbook/_playbook.scss

@@ -5,7 +5,6 @@
 @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,7 +31,6 @@ 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_title/_title.scss

@@ -30,7 +30,7 @@
     @include pb_title_dark;
   }
 
-  &[class*=thin] {
+  &[class*=_thin] {
     @include pb_title_thin;
   }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -27,7 +27,7 @@ const Title = (props: TitleProps): React.ReactElement => {
     data = {},
     id,
     size = 3,
-    bold = size === 3 ? false : true,
+    bold = true,
     tag = 'h3',
     text,
     variant = null,
@@ -35,10 +35,9 @@ 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/docs/_title_light_weight.html.erb

@@ -1,2 +1,3 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -17,6 +17,12 @@ const TitleLightWeight = (props) => {
           text='Title 2'
           {...props}
       />
+      <Title bold={false}
+          size={3}
+          tag='h2'
+          text='Title 3'
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -1,4 +1,3 @@
 ##### Prop
-Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
-Title `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 1`, `size 2`, & `size 3` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
 Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

data/app/pb_kits/playbook/pb_title/title.rb

@@ -17,21 +17,14 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: 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
+      prop :bold, type: Playbook::Props::Boolean, default: true
 
       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 ? "" : " thin"
+        bold ? nil : "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 thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
 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 thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3_success')
 })

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

@@ -30,7 +30,6 @@ 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'
@@ -131,7 +130,6 @@ WebpackerReact.setup({
   ...DateTime,
   ...DateTimeStacked,
   ...DateYearStacked,
-  ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
   ...FileUpload,

data/dist/menu.yml

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