diff --git a/src/components.d.ts b/src/components.d.ts index c1fb418b0c11f016ca372d236867adac8e8ab0ac..77b586bd3310a510147174d777814a9f5b7f4b5c 100644 --- a/src/components.d.ts +++ b/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 {*} diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 8eb28bb50162763ebde7868f9a44b81d96054384..29e893b9de060138e44e27c2f0d749c5a9675505 100644 --- a/src/components/heading/heading.scss +++ b/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, diff --git a/src/components/heading/heading.tsx b/src/components/heading/heading.tsx index ee5ccfae5f5f66fc841203fcda0108403592e94f..cb583281f8648b9022674154110136ad38255778 100644 --- a/src/components/heading/heading.tsx +++ b/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,8 @@ export class Heading { const classAttributes = [ 'hy-heading', this.negative ? 'negative' : '', + this.isSearch ? 'hy-heading__search' : '', + this.isSearch ? `hy-heading__search__${this.headerstyle}` : '', `hy-heading__${this.section}`, `hy-heading__${this.headerstyle}`, `hy-heading__${this.section}__${this.headerstyle}`, diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md index 8e1ff079c3cfc0d08e5a4b748db8ca886312942e..f9e807c93ab5c8ab5ce0ffae528b69794aac5725 100644 --- a/src/components/heading/readme.md +++ b/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` |