search page title styles

src/components.d.ts

@@ -419,6 +419,7 @@ export namespace Components {
      * @type {*}
      */
     heading: HeadingVarians;
+    isSearch: boolean;
     negative: boolean;
     /**
      * @type {*}
@@ -1796,6 +1797,7 @@ declare namespace LocalJSX {
      * @type {*}
      */
     heading?: HeadingVarians;
+    isSearch?: boolean;
     negative?: boolean;
     /**
      * @type {*}

src/components/heading/heading.scss

@@ -40,6 +40,24 @@
     }
   }
 
+  h1.hy-heading__search {
+    margin-bottom: 0;
+    padding: 16px 0 0;
+
+    @include breakpoint($narrow) {
+      padding: 28px 0 0;
+    }
+    @include breakpoint($wide) {
+      padding: 32px 0 0;
+    }
+
+    &__large {
+      @include breakpoint($extrawide) {
+        padding: 40px 0 0;
+      }
+    }
+  }
+
   h2,
   h3,
   h4,

src/components/heading/heading.tsx

@@ -12,6 +12,7 @@ export class Heading {
    * @type {*}
    */
   @Prop() heading: HeadingVarians = HeadingVarians.default as any;
+  @Prop() isSearch: boolean = false;
   /**
    * @type {*}
    */
@@ -35,6 +36,7 @@ export class Heading {
     const classAttributes = [
       'hy-heading',
       this.negative ? 'negative' : '',
+      this.isSearch ? 'hy-heading__search' : '',
       `hy-heading__${this.section}`,
       `hy-heading__${this.headerstyle}`,
       `hy-heading__${this.section}__${this.headerstyle}`,

src/components/heading/readme.md

@@ -91,6 +91,7 @@ Provide heading attribute for the component to choose what type of heading to us
 | ------------- | ------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
 | `headerstyle` | `headerstyle` |             | `string`                                                                                                                                                                                             | `'common'`                              |
 | `heading`     | `heading`     |             | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6`                                                                    | `HeadingVarians.default as any`         |
+| `isSearch`    | `is-search`   |             | `boolean`                                                                                                                                                                                            | `false`                                 |
 | `negative`    | `negative`    |             | `boolean`                                                                                                                                                                                            | `false`                                 |
 | `section`     | `section`     |             | `HeadingSectionVariants.contentPageHeader \| HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.landingPageHeader \| HeadingSectionVariants.subSection` | `HeadingSectionVariants.default as any` |