From 0ee0595631c2c2a34ed23feea97de4ff28f6d0e8 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 4 Aug 2021 15:10:11 -0500 Subject: [PATCH 1/8] feat(link-with-icon): introduce wrapping inline icon behavior --- .../components/link-with-icon/_link-with-icon.scss | 14 ++++++++++++++ .../components/link-with-icon/link-with-icon.ts | 12 +++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss index bb3e83c47d6..d81d53ec536 100644 --- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss +++ b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss @@ -58,6 +58,20 @@ } } + :host(#{$dds-prefix}-link-with-icon), + :host(#{$dds-prefix}-link-list-item) { + .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon { + display: inline-block; + + svg, + ::slotted(svg[slot='icon']) { + display: inline; + vertical-align: middle; + white-space: nowrap; + } + } + } + .#{$prefix}--link-with-icon, :host(#{$dds-prefix}-link-with-icon), :host(#{$dds-prefix}-text-cta) { diff --git a/packages/web-components/src/components/link-with-icon/link-with-icon.ts b/packages/web-components/src/components/link-with-icon/link-with-icon.ts index 3cc1b85bbed..6ebd8ed9ef9 100644 --- a/packages/web-components/src/components/link-with-icon/link-with-icon.ts +++ b/packages/web-components/src/components/link-with-icon/link-with-icon.ts @@ -35,6 +35,12 @@ class DDSLinkWithIcon extends StableSelectorMixin(BXLink) { @property({ attribute: 'icon-placement', reflect: true }) iconPlacement = ICON_PLACEMENT.RIGHT; + /** + * Positions the icon inline with text when `true` + */ + @property({ type: Boolean }) + iconInline = true; + /** * @returns The main content. */ @@ -62,7 +68,7 @@ class DDSLinkWithIcon extends StableSelectorMixin(BXLink) { } updated() { - const { iconPlacement, _linkNode: linkNode } = this; + const { iconInline, iconPlacement, _linkNode: linkNode } = this; if (linkNode) { linkNode.classList.add(`${prefix}--link-with-icon`); linkNode.classList.toggle(`${prefix}--link-with-icon__icon-${ICON_PLACEMENT.LEFT}`, iconPlacement === ICON_PLACEMENT.LEFT); @@ -70,6 +76,10 @@ class DDSLinkWithIcon extends StableSelectorMixin(BXLink) { `${prefix}--link-with-icon__icon-${ICON_PLACEMENT.RIGHT}`, iconPlacement === ICON_PLACEMENT.RIGHT ); + + if (iconInline) { + linkNode.classList.add(`${prefix}--link-with-icon--inline-icon`); + } } } From a813c0389d16edd0808ee13700b421a3964a2614 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 4 Aug 2021 15:10:56 -0500 Subject: [PATCH 2/8] fix(link-list-item): set `iconInline` to false by default --- .../src/components/link-list/link-list-item.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/web-components/src/components/link-list/link-list-item.ts b/packages/web-components/src/components/link-list/link-list-item.ts index 0cf854c0d44..ae67cafdc6d 100644 --- a/packages/web-components/src/components/link-list/link-list-item.ts +++ b/packages/web-components/src/components/link-list/link-list-item.ts @@ -29,6 +29,12 @@ class DDSLinkListItem extends DDSLinkWithIcon { @property({ reflect: true }) type = LINK_LIST_ITEM_TYPE.DEFAULT; + /** + * Positions the icon inline with text when `true` + */ + @property({ type: Boolean }) + iconInline = false; + connectedCallback() { if (!this.hasAttribute('role')) { this.setAttribute('role', 'listitem'); From fd7d37feab717d865717faf388fe1ae856578303 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 4 Aug 2021 15:12:16 -0500 Subject: [PATCH 3/8] fix(link-list): set inline icon on horizontal and vertical variants --- .../web-components/src/components/link-list/link-list.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts index 5da8d9b8a21..74251aa9243 100644 --- a/packages/web-components/src/components/link-list/link-list.ts +++ b/packages/web-components/src/components/link-list/link-list.ts @@ -125,6 +125,12 @@ class DDSLinkList extends StableSelectorMixin(LitElement) { (elem as DDSLinkListItem).type = LINK_LIST_ITEM_TYPE.END; }); } + + if (this.type === LINK_LIST_TYPE.HORIZONTAL || this.type === LINK_LIST_TYPE.VERTICAL) { + this._childItems.forEach(elem => { + (elem as DDSLinkListItem).iconInline = true; + }); + } } /** From eb09b1e5b992ba0db05411bd974364c0562496b3 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 4 Aug 2021 15:13:07 -0500 Subject: [PATCH 4/8] fix(card-footer): preserve card footer display rules --- packages/styles/scss/components/card/index.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/styles/scss/components/card/index.scss b/packages/styles/scss/components/card/index.scss index 49f90c92e25..524963dbc55 100644 --- a/packages/styles/scss/components/card/index.scss +++ b/packages/styles/scss/components/card/index.scss @@ -255,6 +255,17 @@ } } + :host(#{$dds-prefix}-card-footer) { + .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon { + display: flex; + + svg, + ::slotted(svg[slot='icon']) { + display: block; + } + } + } + .#{$prefix}--card .#{$prefix}--card__footer, :host(#{$dds-prefix}-card-footer) a, :host(#{$dds-prefix}-card-cta-footer) a, From 8e0a4aec6312acbd34b22ce322bfc2aecf6cf8a0 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 5 Aug 2021 10:24:17 -0500 Subject: [PATCH 5/8] fix(link-with-icon): add additional dependency host selectors --- .../scss/components/link-with-icon/_link-with-icon.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss index d81d53ec536..7ed4c1e1c01 100644 --- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss +++ b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss @@ -58,8 +58,12 @@ } } + :host(#{$dds-prefix}-callout-link-with-icon), + :host(#{$dds-prefix}-card-cta-footer), :host(#{$dds-prefix}-link-with-icon), - :host(#{$dds-prefix}-link-list-item) { + :host(#{$dds-prefix}-link-list-item), + :host(#{$dds-prefix}-link-list-item-cta), + :host(#{$dds-prefix}-text-cta) { .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon { display: inline-block; From 98503fbfd7faa22029cf63fa0d349a6a99b69d84 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 5 Aug 2021 13:22:03 -0500 Subject: [PATCH 6/8] fix(link-with-icon): keep flex container for left side icon placement --- .../src/components/link-with-icon/link-with-icon.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/components/link-with-icon/link-with-icon.ts b/packages/web-components/src/components/link-with-icon/link-with-icon.ts index 6ebd8ed9ef9..c432353ac2d 100644 --- a/packages/web-components/src/components/link-with-icon/link-with-icon.ts +++ b/packages/web-components/src/components/link-with-icon/link-with-icon.ts @@ -77,7 +77,7 @@ class DDSLinkWithIcon extends StableSelectorMixin(BXLink) { iconPlacement === ICON_PLACEMENT.RIGHT ); - if (iconInline) { + if (iconInline && iconPlacement === ICON_PLACEMENT.RIGHT) { linkNode.classList.add(`${prefix}--link-with-icon--inline-icon`); } } From ca13243a7a2a02c460a3cce6b3ce88abccada742 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 5 Aug 2021 13:22:44 -0500 Subject: [PATCH 7/8] feat(LinkWithIcon): add iconInline support --- packages/react/src/components/CTA/TextCTA.js | 2 ++ packages/react/src/components/LinkList/LinkList.js | 2 ++ .../react/src/components/LinkWithIcon/LinkWithIcon.js | 11 ++++++++++- .../components/link-with-icon/_link-with-icon.scss | 1 + 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/CTA/TextCTA.js b/packages/react/src/components/CTA/TextCTA.js index 3df5d597b82..2fd1302601c 100644 --- a/packages/react/src/components/CTA/TextCTA.js +++ b/packages/react/src/components/CTA/TextCTA.js @@ -35,6 +35,7 @@ const TextCTA = ({ CTALogic.setLightBox(e, openLightBox)} + iconInline={otherProps.iconInline} {...(iconPlacement && { iconPlacement })}> {formatCTAcopy({ @@ -51,6 +52,7 @@ const TextCTA = ({ href={href} target={CTALogic.external(type)} onClick={e => CTALogic.jump(e, type)} + iconInline={otherProps.iconInline} {...(iconPlacement && { iconPlacement })}> {otherProps.copy} {type !== 'default' && } diff --git a/packages/react/src/components/LinkList/LinkList.js b/packages/react/src/components/LinkList/LinkList.js index 38069d10370..e98ee59a462 100644 --- a/packages/react/src/components/LinkList/LinkList.js +++ b/packages/react/src/components/LinkList/LinkList.js @@ -24,6 +24,7 @@ const { prefix } = settings; */ const LinkList = ({ heading, iconPlacement, items, style }) => { const linkStyle = style === 'card' ? 'card' : 'text'; + const iconInline = style === 'vertical' || style === 'horizontal'; return (
{ disableImage {...(iconPlacement && linkStyle === 'text' && { iconPlacement })} + {...(linkStyle === 'text' && { iconInline })} /> ); diff --git a/packages/react/src/components/LinkWithIcon/LinkWithIcon.js b/packages/react/src/components/LinkWithIcon/LinkWithIcon.js index e9a3236847b..dd2b085da7f 100644 --- a/packages/react/src/components/LinkWithIcon/LinkWithIcon.js +++ b/packages/react/src/components/LinkWithIcon/LinkWithIcon.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 2021 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -23,6 +23,7 @@ const LinkWithIcon = ({ className: customClassName, href, inverse, + iconInline, iconPlacement, ...props }) => { @@ -40,6 +41,8 @@ const LinkWithIcon = ({ href={href} className={classNames(`${prefix}--link-with-icon`, { [`${prefix}--link-with-icon__icon-left`]: iconPlacement === 'left', + [`${prefix}--link-with-icon--inline-icon`]: + iconInline && iconPlacement === 'right', })} {...props}> {children} @@ -59,6 +62,11 @@ LinkWithIcon.propTypes = { */ href: PropTypes.string, + /** + * Positions the icon inline with text when `true` + */ + iconInline: PropTypes.bool, + /** * Icon placement. */ @@ -78,6 +86,7 @@ LinkWithIcon.propTypes = { LinkWithIcon.defaultProps = { children: [], href: '', + iconInline: true, iconPlacement: 'right', }; diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss index 7ed4c1e1c01..1ad1e4b312d 100644 --- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss +++ b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss @@ -58,6 +58,7 @@ } } + .#{$prefix}--link-with-icon__container, :host(#{$dds-prefix}-callout-link-with-icon), :host(#{$dds-prefix}-card-cta-footer), :host(#{$dds-prefix}-link-with-icon), From 0be5991f5b8fbf8bede4d23ac7b48cfc5fc2a273 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 5 Aug 2021 13:24:55 -0500 Subject: [PATCH 8/8] chore: update snapshots --- .../__snapshots__/storyshots.test.js.snap | 840 +++++++++++++----- .../tests/snapshots/dds-card-cta-footer.md | 4 +- .../tests/snapshots/dds-card-cta.md | 2 +- .../tests/snapshots/dds-text-cta.md | 4 +- 4 files changed, 603 insertions(+), 247 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index fceba412ab8..180271098dc 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -1614,6 +1614,7 @@ exports[`Storyshots Components|CTA Text 1`] = ` >
@@ -20006,6 +20010,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` } disableImage={true} href="" + iconInline={true} style="text" type="local" > @@ -20021,6 +20026,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -20038,6 +20044,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` > @@ -20124,6 +20132,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -20141,6 +20150,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` > @@ -20331,6 +20342,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -20348,6 +20360,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` > @@ -20434,6 +20448,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -20451,6 +20466,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` > @@ -20627,6 +20644,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -20644,6 +20662,7 @@ exports[`Storyshots Components|Content block horizontal Default 1`] = ` > @@ -35217,6 +35247,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -35234,6 +35265,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` > @@ -35320,6 +35353,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -35337,6 +35371,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` > @@ -35527,6 +35563,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -35544,6 +35581,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` > @@ -35630,6 +35669,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -35647,6 +35687,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` > @@ -35823,6 +35865,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -35840,6 +35883,7 @@ exports[`Storyshots Components|Content group horizontal Default 1`] = ` > @@ -37264,6 +37309,7 @@ exports[`Storyshots Components|Content item horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -37281,6 +37327,7 @@ exports[`Storyshots Components|Content item horizontal Default 1`] = ` > @@ -37367,6 +37415,7 @@ exports[`Storyshots Components|Content item horizontal Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -37384,6 +37433,7 @@ exports[`Storyshots Components|Content item horizontal Default 1`] = ` > @@ -39101,6 +39152,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -39118,6 +39170,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = > @@ -39204,6 +39258,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -39221,6 +39276,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = > @@ -39307,6 +39364,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -39324,6 +39382,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = > @@ -41183,6 +41246,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -41200,6 +41264,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = > @@ -41276,6 +41342,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -41293,6 +41360,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = > @@ -41472,6 +41541,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -41489,6 +41559,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = > @@ -41565,6 +41637,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -41582,6 +41655,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = >
@@ -43331,6 +43406,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] = > @@ -46067,6 +46145,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -46084,6 +46163,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` > @@ -46170,6 +46251,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -46187,6 +46269,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` > @@ -46273,6 +46357,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -46290,6 +46375,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` > @@ -48149,6 +48239,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -48166,6 +48257,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` > @@ -48242,6 +48335,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -48259,6 +48353,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` > @@ -48438,6 +48534,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -48455,6 +48552,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` > @@ -48531,6 +48630,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -48548,6 +48648,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` >
@@ -50297,6 +50399,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = ` > @@ -52052,6 +52157,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -52069,6 +52175,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` > @@ -52155,6 +52263,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -52172,6 +52281,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` > @@ -52258,6 +52369,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -52275,6 +52387,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` > @@ -54134,6 +54251,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -54151,6 +54269,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` > @@ -54227,6 +54347,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -54244,6 +54365,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` > @@ -54423,6 +54546,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -54440,6 +54564,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` > @@ -54516,6 +54642,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -54533,6 +54660,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` >
@@ -56282,6 +56411,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = ` > @@ -63154,6 +63286,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -63171,6 +63304,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` > @@ -63257,6 +63392,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -63274,6 +63410,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` > @@ -63360,6 +63498,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -63377,6 +63516,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` > @@ -65236,6 +65380,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -65253,6 +65398,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` > @@ -65329,6 +65476,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -65346,6 +65494,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` > @@ -65525,6 +65675,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -65542,6 +65693,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` > @@ -65618,6 +65771,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -65635,6 +65789,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` >
@@ -67384,6 +67540,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = ` > @@ -69371,6 +69530,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -69388,6 +69548,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` > @@ -69474,6 +69636,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -69491,6 +69654,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` > @@ -69577,6 +69742,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -69594,6 +69760,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` > @@ -71453,6 +71624,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -71470,6 +71642,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` > @@ -71546,6 +71720,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -71563,6 +71738,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` > @@ -71742,6 +71919,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -71759,6 +71937,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` > @@ -71835,6 +72015,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -71852,6 +72033,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` >
@@ -73601,6 +73784,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1` > @@ -75344,6 +75530,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -75361,6 +75548,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` > @@ -75447,6 +75636,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -75464,6 +75654,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` > @@ -75550,6 +75742,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -75567,6 +75760,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` > @@ -77426,6 +77624,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -77443,6 +77642,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` > @@ -77519,6 +77720,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -77536,6 +77738,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` > @@ -77715,6 +77919,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -77732,6 +77937,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` > @@ -77808,6 +78015,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -77825,6 +78033,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` >
@@ -79574,6 +79784,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = ` > @@ -81064,6 +81277,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -81081,6 +81295,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` > @@ -81167,6 +81383,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -81184,6 +81401,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` > @@ -81270,6 +81489,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -81287,6 +81507,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` > @@ -83146,6 +83371,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -83163,6 +83389,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` > @@ -83239,6 +83467,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -83256,6 +83485,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` > @@ -83435,6 +83666,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -83452,6 +83684,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` > @@ -83528,6 +83762,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -83545,6 +83780,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` >
@@ -85294,6 +85531,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = ` > @@ -87285,6 +87525,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -87302,6 +87543,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` > @@ -87388,6 +87631,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -87405,6 +87649,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` > @@ -87491,6 +87737,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -87508,6 +87755,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` > @@ -89367,6 +89619,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -89384,6 +89637,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` > @@ -89460,6 +89715,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -89477,6 +89733,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` > @@ -89656,6 +89914,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -89673,6 +89932,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` > @@ -89749,6 +90010,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -89766,6 +90028,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` >
@@ -91515,6 +91779,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1` > @@ -94318,6 +94585,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -94335,6 +94603,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` > @@ -94421,6 +94691,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -94438,6 +94709,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` > @@ -94524,6 +94797,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -94541,6 +94815,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` > @@ -96400,6 +96679,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -96417,6 +96697,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` > @@ -96493,6 +96775,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -96510,6 +96793,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` > @@ -96689,6 +96974,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -96706,6 +96992,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` > @@ -96782,6 +97070,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="https://example.com" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -96799,6 +97088,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` >
@@ -98548,6 +98839,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = ` > @@ -110819,6 +111113,7 @@ exports[`Storyshots Components|Lead space block Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -110836,6 +111131,7 @@ exports[`Storyshots Components|Lead space block Default 1`] = ` > @@ -110922,6 +111219,7 @@ exports[`Storyshots Components|Lead space block Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -110939,6 +111237,7 @@ exports[`Storyshots Components|Lead space block Default 1`] = ` > @@ -111025,6 +111325,7 @@ exports[`Storyshots Components|Lead space block Default 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -111042,6 +111343,7 @@ exports[`Storyshots Components|Lead space block Default 1`] = ` > @@ -111662,6 +111965,7 @@ exports[`Storyshots Components|Lead space block With Video 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -111679,6 +111983,7 @@ exports[`Storyshots Components|Lead space block With Video 1`] = ` > @@ -111765,6 +112071,7 @@ exports[`Storyshots Components|Lead space block With Video 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -111782,6 +112089,7 @@ exports[`Storyshots Components|Lead space block With Video 1`] = ` > @@ -111868,6 +112177,7 @@ exports[`Storyshots Components|Lead space block With Video 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -111885,6 +112195,7 @@ exports[`Storyshots Components|Lead space block With Video 1`] = ` > @@ -113953,6 +114265,7 @@ exports[`Storyshots Components|Link list End Of Section 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -113970,6 +114283,7 @@ exports[`Storyshots Components|Link list End Of Section 1`] = ` > @@ -114056,6 +114371,7 @@ exports[`Storyshots Components|Link list End Of Section 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -114073,6 +114389,7 @@ exports[`Storyshots Components|Link list End Of Section 1`] = ` > @@ -114159,6 +114477,7 @@ exports[`Storyshots Components|Link list End Of Section 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={false} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -114176,6 +114495,7 @@ exports[`Storyshots Components|Link list End Of Section 1`] = ` > @@ -114507,6 +114830,7 @@ exports[`Storyshots Components|Link list Horizontal 1`] = ` } disableImage={true} href="" + iconInline={true} iconPlacement="right" style="text" type="local" @@ -114523,6 +114847,7 @@ exports[`Storyshots Components|Link list Horizontal 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="right" openLightBox={[Function]} renderLightBox={false} @@ -114540,6 +114865,7 @@ exports[`Storyshots Components|Link list Horizontal 1`] = ` > @@ -115524,6 +115865,7 @@ exports[`Storyshots Components|Link list Vertical With Cards 1`] = ` } disableImage={true} href="" + iconInline={true} iconPlacement="left" style="text" type="local" @@ -115540,6 +115882,7 @@ exports[`Storyshots Components|Link list Vertical With Cards 1`] = ` disableImage={true} formatCTAcopy={[Function]} href="" + iconInline={true} iconPlacement="left" openLightBox={[Function]} renderLightBox={false} @@ -115557,6 +115900,7 @@ exports[`Storyshots Components|Link list Vertical With Cards 1`] = ` > @@ -116845,6 +117198,7 @@ exports[`Storyshots Components|Link with icon Default 1`] = ` >