playbook_ui 12.24.0.pre.alpha.play833boldoptionfortitle2and3721 → 12.24.0.pre.alpha.railsmultilevelimprovements739

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bd4e3864286b541e0caf3e640c35a8f942dbcb6ab2d7baad716ac5a0e6d3e3ff
-  data.tar.gz: 95157177f65e2b812bcf3cae77037188b8f1020c7662e6d6b1232d792feb7bc1
+  metadata.gz: ca13d82593114ee6fa9797c521e2e7da4b675f48923d7ad41c74fc14d5d224d6
+  data.tar.gz: 8f1309ad083e6e90c2a6278b7f3afb4cdcea79e06dcfbb7481ae9273d4f9f6ec
 SHA512:
-  metadata.gz: b0e07bf633784eb9262db46a90d2c334062e23f6dc30630cca188b3de480e1f28eea51841d0c1347712eda7826e947c3459f7d52b9a39599c4ef530b7eee8d3a
-  data.tar.gz: db69cd005df2c3408d3f3cb72de4d3cb6c2c49ba40b426096cda9763dd157d51a56277d0d11a7ae69b993cceb52011ca9547ab7fe21c6f5be8aeff45592bf3d0
+  metadata.gz: 8f1e03060911871628a3c79d92bb7c01fbedf754b705a2feefe065082b03dca4bde92bec88d390a508639a1e5ac1f157d0130775cf6056d55260beae9b149c18
+  data.tar.gz: 0ce1d542f2d0a41150fb52757501f9423392495c0554b5757330c178db347168973bb55f41fd86e017dee8475d27545f58332d60609667ec727d17da63241583

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_title/_title.scss

@@ -18,7 +18,6 @@
   &[class*=_3] {
     @include pb_title_3;
     @include title_colors;
-    @include pb_title_bold;
   }
 
   &[class*=_4] {
@@ -30,7 +29,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,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/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')
 })