diff --git a/site/pages/components/structured-list.tsx b/site/pages/components/structured-list.tsx index 9006929eec..4ac07cd8b3 100644 --- a/site/pages/components/structured-list.tsx +++ b/site/pages/components/structured-list.tsx @@ -464,6 +464,13 @@ const StructuredListComponent = (layoutProps: LayoutProps) => ( description: 'Vertically align the Icon when the StructuredListItem is Link', }, + { + name: 'hideIcon', + type: 'boolean', + default: 'false', + description: + 'If true, hides the link icon in the StructuredListItem', + }, ], overridesRows: [ { diff --git a/src/structured-list/__tests__/__snapshots__/structured-list.test.tsx.snap b/src/structured-list/__tests__/__snapshots__/structured-list.test.tsx.snap index f45a67a5dd..e0bb535700 100644 --- a/src/structured-list/__tests__/__snapshots__/structured-list.test.tsx.snap +++ b/src/structured-list/__tests__/__snapshots__/structured-list.test.tsx.snap @@ -63,6 +63,491 @@ exports[`StructuredList with href renders four cells with href 1`] = ` `; +exports[`StructuredList with href renders one cell with disabled link and hidden icon 1`] = ` + + .emotion-0 { + list-style: none; + padding-left: 0; + width: 100%; + margin: 0; +} + +.emotion-1 { + cursor: not-allowed; + list-style: none; + width: 100%; +} + +.emotion-2 { + -webkit-text-decoration: none; + text-decoration: none; + outline-offset: -1px; +} + +.emotion-3 { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + +.emotion-4 { + box-sizing: border-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 24px 16px; + min-height: 80px; +} + +@media screen { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 480px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 768px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 1024px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 1440px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +.emotion-4:hover:not(:disabled) { + background-color: #FAFAFA; +} + +.emotion-4:active:not(:disabled) { + background-color: #F4F4F4; +} + +.emotion-4:disabled { + background-color: transparent; +} + +.emotion-5 { + box-sizing: border-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} + +@media screen { + .emotion-5 { + padding: 0 8px; + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } +} + +@media screen and (min-width: 1024px) { + .emotion-5 { + padding: 0 12px; + } +} + +.emotion-6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-7 { + margin: 0; + color: #0A0A0A; + font-family: "Poppins",sans-serif; + font-size: 16px; + line-height: 18px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; +} + +.emotion-7 svg { + fill: #0A0A0A; +} + +.emotion-7::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-7::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-8 { + border-style: solid; + border-color: #DEDEDE; + border-width: 1px; + border-width: 0px; + margin: 0; + border-top-width: 1px; + width: 100%; +} + + + +`; + +exports[`StructuredList with href renders one cell with external link and hidden icon 1`] = ` + + .emotion-0 { + list-style: none; + padding-left: 0; + width: 100%; + margin: 0; +} + +.emotion-1 { + list-style: none; + width: 100%; +} + +.emotion-2 { + -webkit-text-decoration: none; + text-decoration: none; + outline-offset: -1px; +} + +.emotion-3 { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + +.emotion-4 { + box-sizing: border-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 24px 16px; + min-height: 80px; +} + +@media screen { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 480px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 768px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 1024px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 1440px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +.emotion-4:hover:not(:disabled) { + background-color: #FAFAFA; +} + +.emotion-4:active:not(:disabled) { + background-color: #F4F4F4; +} + +.emotion-4:disabled { + background-color: transparent; +} + +.emotion-5 { + box-sizing: border-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} + +@media screen { + .emotion-5 { + padding: 0 8px; + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } +} + +@media screen and (min-width: 1024px) { + .emotion-5 { + padding: 0 12px; + } +} + +.emotion-6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-7 { + margin: 0; + color: #0A0A0A; + font-family: "Poppins",sans-serif; + font-size: 16px; + line-height: 18px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; +} + +.emotion-7 svg { + fill: #0A0A0A; +} + +.emotion-7::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-7::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-8 { + border-style: solid; + border-color: #DEDEDE; + border-width: 1px; + border-width: 0px; + margin: 0; + border-top-width: 1px; + width: 100%; +} + + + +`; + exports[`StructuredList with href renders one cell with external link icon 1`] = ` .emotion-0 { @@ -474,6 +959,246 @@ exports[`StructuredList with href renders one cell with external link icon 1`] = `; +exports[`StructuredList with href renders one cell with internal link and hidden icon 1`] = ` + + .emotion-0 { + list-style: none; + padding-left: 0; + width: 100%; + margin: 0; +} + +.emotion-1 { + list-style: none; + width: 100%; +} + +.emotion-2 { + -webkit-text-decoration: none; + text-decoration: none; + outline-offset: -1px; +} + +.emotion-3 { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + +.emotion-4 { + box-sizing: border-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 24px 16px; + min-height: 80px; +} + +@media screen { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 480px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 768px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 1024px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +@media screen and (min-width: 1440px) { + .emotion-4 { + margin: -0px 0px 0 0px; + } +} + +.emotion-4:hover:not(:disabled) { + background-color: #FAFAFA; +} + +.emotion-4:active:not(:disabled) { + background-color: #F4F4F4; +} + +.emotion-4:disabled { + background-color: transparent; +} + +.emotion-5 { + box-sizing: border-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} + +@media screen { + .emotion-5 { + padding: 0 8px; + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } +} + +@media screen and (min-width: 1024px) { + .emotion-5 { + padding: 0 12px; + } +} + +.emotion-6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-7 { + margin: 0; + color: #0A0A0A; + font-family: "Poppins",sans-serif; + font-size: 16px; + line-height: 18px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; +} + +.emotion-7 svg { + fill: #0A0A0A; +} + +.emotion-7::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-7::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-8 { + border-style: solid; + border-color: #DEDEDE; + border-width: 1px; + border-width: 0px; + margin: 0; + border-top-width: 1px; + width: 100%; +} + + + +`; + exports[`StructuredList with href renders one cell with internal link icon 1`] = ` .emotion-0 { diff --git a/src/structured-list/__tests__/structured-list.stories.tsx b/src/structured-list/__tests__/structured-list.stories.tsx index 9d6338962e..d0b03d1bd0 100644 --- a/src/structured-list/__tests__/structured-list.stories.tsx +++ b/src/structured-list/__tests__/structured-list.stories.tsx @@ -247,6 +247,58 @@ export const StoryStructuredListInteractive = () => ( ); StoryStructuredListInteractive.storyName = 'structured-list-interactive'; +export const StoryStructuredListInteractiveHideIcon = () => ( + <> + StructuredList + with internal link (hide icon) + + + + Label + + + A short description of the label + + + + + Label + + + + + with external link (hide icon) + + + + Label + + + A short description of the label + + + + + Label + + + + with disabled link (hide icon) + + + + Label + + + A short description of the label + + + + +); +StoryStructuredListInteractiveHideIcon.storyName = + 'structured-list-interactive-hide-icon'; + export const StoryStructuredListCombined = () => ( <> StructuredList combines diff --git a/src/structured-list/__tests__/structured-list.test.tsx b/src/structured-list/__tests__/structured-list.test.tsx index dd77d6a141..f676e91d58 100644 --- a/src/structured-list/__tests__/structured-list.test.tsx +++ b/src/structured-list/__tests__/structured-list.test.tsx @@ -334,6 +334,36 @@ describe('StructuredList', () => { ); }); + test('renders one cell with internal link and hidden icon', () => { + const props: StructuredListItemProps = { + children: OneCellDefault, + hideIcon: true, + }; + + const fragment = renderToFragmentWithTheme(renderWithInternalLink, props); + expect(fragment).toMatchSnapshot(); + }); + + test('renders one cell with external link and hidden icon', () => { + const props: StructuredListItemProps = { + children: OneCellDefault, + hideIcon: true, + }; + + const fragment = renderToFragmentWithTheme(renderWithExternalLink, props); + expect(fragment).toMatchSnapshot(); + }); + + test('renders one cell with disabled link and hidden icon', () => { + const props: StructuredListItemProps = { + children: OneCellDefault, + hideIcon: true, + }; + + const fragment = renderToFragmentWithTheme(renderWithDisabledLink, props); + expect(fragment).toMatchSnapshot(); + }); + test('fires click event onClick with custom originator for list item', async () => { const mockFireEvent = jest.fn(); diff --git a/src/structured-list/structured-list-item.tsx b/src/structured-list/structured-list-item.tsx index b6b9e5445d..c4470266b6 100644 --- a/src/structured-list/structured-list-item.tsx +++ b/src/structured-list/structured-list-item.tsx @@ -31,6 +31,7 @@ const ThemelessStructuredListItem = React.forwardRef< disabled, overrides, href, + hideIcon, linkIconAlign, eventContext, eventOriginator = 'list item', @@ -45,7 +46,8 @@ const ThemelessStructuredListItem = React.forwardRef< if ( hasHref && childrenArray.length === 2 && - !getPullRight(childrenArray[1]) + !getPullRight(childrenArray[1]) && + !hideIcon ) { childrenArray.push( @@ -53,7 +55,7 @@ const ThemelessStructuredListItem = React.forwardRef< , ); } - if (hasHref && childrenArray.length === 1) { + if (hasHref && childrenArray.length === 1 && !hideIcon) { childrenArray.push( diff --git a/src/structured-list/types.ts b/src/structured-list/types.ts index 67dcdf37f4..82819a5260 100644 --- a/src/structured-list/types.ts +++ b/src/structured-list/types.ts @@ -28,6 +28,7 @@ export interface StructuredListItemProps ariaLabel?: string; disabled?: boolean; href?: string; + hideIcon?: boolean; linkIconAlign?: StructuredListCellAlign; overrides?: { stylePreset?: MQ;