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;