Revert "[PLAY-802] Implementing Responsive Title (#2631)"

This reverts commit 3b73300.

Signed-off-by: Jasper <jasperfurniss@gmail.com>

playbook/app/pb_kits/playbook/pb_label_value/label_value.test.js

@@ -103,7 +103,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const activeProp = kit.querySelector(".pb_title_kit_link")
+        const activeProp = kit.querySelector(".pb_title_kit_size_4_link")
         expect(activeProp).toBeInTheDocument()
     })
 })

playbook/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,6 +1,5 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
-@import "../tokens/screen_sizes";
 @import './title_mixin';
 
 [class^=pb_title_kit]{
@@ -34,21 +33,4 @@
   &[class*=_thin] {
     @include pb_title_thin;
   }
-
-  @each $size, $size_value in $breakpoints_grid {
-    @each $title_size_value in [1, 2, 3, 4] {
-        $min_size: map-get($size_value, "min");
-        $max_size: map-get($size_value, "max");
-        &[class*=_#{$size}_#{$title_size_value}] {
-          @include break_on($min_size, $max_size) {
-            @if $title_size_value == 1 { @include pb_title_1; }
-            @else if $title_size_value == 2 { @include pb_title_2; }
-            @else if $title_size_value == 3 { @include pb_title_3; }
-            @else if $title_size_value == 4 { @include pb_title_4; }
-            @include title_colors;
-            @if $title_size_value != 4 { @include pb_title_bold; }
-          }
-        }
-    }
-  }
 }

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

@@ -3,9 +3,6 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
-type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
-type SizeResponsiveType = {[key: string]: SizeType}
-
 type TitleProps = {
   aria?: {[key: string]: string},
   bold?: boolean,
@@ -14,7 +11,7 @@ type TitleProps = {
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
   id?: string,
-  size?: SizeType | SizeResponsiveType,
+  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -39,25 +36,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 generateSizeClasses = () => {
-    let css = ''
-
-    if (typeof size == "number" || typeof size == "string") {
-      css += `pb_title_kit_size_${size} `
-    } else {
-      Object.entries(size).forEach((sizeObj) => {
-        css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
-      })
-    }
-
-    return css.trim()
-  }
-
   const classes = classnames(
-    buildCss('pb_title_kit', variant, color, getBold),
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
-    generateSizeClasses(),
     className
   )
   const Tag: React.ReactElement | any = `${tag}`

playbook/app/pb_kits/playbook/pb_title/docs/example.yml

@@ -3,10 +3,8 @@ examples:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
-  - title_responsive: Responsive
 
   react:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
-  - title_responsive: Responsive

playbook/app/pb_kits/playbook/pb_title/docs/index.js

@@ -1,4 +1,3 @@
 export { default as TitleDefault } from './_title_default.jsx'
 export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
-export { default as TitleResponsive } from './_title_responsive.jsx'

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

@@ -6,7 +6,9 @@ class Title < Playbook::KitBase
       prop :color, type: Playbook::Props::Enum,
                    values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
-      prop :size, default: 3
+      prop :size, type: Playbook::Props::Enum,
+                  values: [1, 2, 3, 4],
+                  default: 3
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
@@ -18,27 +20,12 @@ class Title < Playbook::KitBase
       prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        title_class = generate_classname("pb_title_kit", variant, color, is_bold)
-        title_class + generate_size_classname
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
       end
 
       def is_bold
         bold ? nil : "thin"
       end
-
-      def generate_size_classname
-        responsive = try(:size).is_a?(::Hash)
-        css = ""
-        if responsive
-          size.each do |key, value|
-            css += " pb_title_kit_#{key}_#{value}"
-          end
-        else
-          css += " pb_title_kit_size_#{size}"
-        end
-
-        css unless css.blank?
-      end
     end
   end
 end

playbook/app/pb_kits/playbook/pb_title/title.test.js

@@ -25,7 +25,7 @@ test('with thin font weight', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_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_success')
+  expect(kit).toHaveClass('pb_title_kit_size_3_success')
 })

playbook/spec/pb_kits/playbook/kits/title_spec.rb

@@ -15,7 +15,7 @@
     is_expected.to define_boolean_prop(:dark)
       .with_default(false)
   }
-  it { is_expected.to define_prop(:size).with_default(3) }
+  it { is_expected.to define_prop(:size).of_type(Playbook::Props::Enum).with_default(3) }
   it {
     is_expected.to define_enum_prop(:tag)
       .with_values("h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "span")
@@ -29,15 +29,15 @@
 
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
-      expect(subject.new({}).classname).to eq "pb_title_kit pb_title_kit_size_3"
-
-      expect(subject.new(classname: "additional_class").classname).to eq "pb_title_kit additional_class pb_title_kit_size_3"
-      expect(subject.new(dark: true).classname).to eq "pb_title_kit dark pb_title_kit_size_3"
-      expect(subject.new(size: nil).classname).to eq "pb_title_kit pb_title_kit_size_3"
-      expect(subject.new(size: 4).classname).to eq "pb_title_kit pb_title_kit_size_4"
-      expect(subject.new(tag: "h3").classname).to eq "pb_title_kit pb_title_kit_size_3"
-      expect(subject.new(size: 4, color: "link").classname).to eq "pb_title_kit_link pb_title_kit_size_4"
-      expect(subject.new(bold: false).classname).to eq "pb_title_kit_thin pb_title_kit_size_3"
+      expect(subject.new({}).classname).to eq "pb_title_kit_3"
+
+      expect(subject.new(classname: "additional_class").classname).to eq "pb_title_kit_3 additional_class"
+      expect(subject.new(dark: true).classname).to eq "pb_title_kit_3 dark"
+      expect(subject.new(size: nil).classname).to eq "pb_title_kit_3"
+      expect(subject.new(size: 4).classname).to eq "pb_title_kit_4"
+      expect(subject.new(tag: "h3").classname).to eq "pb_title_kit_3"
+      expect(subject.new(size: 4, color: "link").classname).to eq "pb_title_kit_4_link"
+      expect(subject.new(bold: false).classname).to eq "pb_title_kit_3_thin"
     end
   end