diff --git a/cspell.json b/cspell.json
index 122f0530567..a74c4c07e4a 100644
--- a/cspell.json
+++ b/cspell.json
@@ -206,6 +206,7 @@
"uuidv",
"webfonts",
"useravatar",
- "rendericon"
+ "rendericon",
+ "csvg"
]
}
diff --git a/e2e/components/AboutModal/AboutModal-test.avt.e2e.js b/e2e/components/AboutModal/AboutModal-test.avt.e2e.js
index 45dfed5c004..33f7ec4b394 100644
--- a/e2e/components/AboutModal/AboutModal-test.avt.e2e.js
+++ b/e2e/components/AboutModal/AboutModal-test.avt.e2e.js
@@ -87,9 +87,7 @@ test.describe('AboutModal @avt', () => {
);
// Reopening modal from trigger button to check if focus trap is working
- const openButton = page.getByText(
- 'Reopen the About modal with all props set'
- );
+ const openButton = page.getByText('Open Modal');
await openButton.click();
await modalElement.evaluate((element) =>
Promise.all(
diff --git a/packages/ibm-products/src/components/AboutModal/AboutModal.mdx b/packages/ibm-products/src/components/AboutModal/AboutModal.mdx
new file mode 100644
index 00000000000..58c9c51c041
--- /dev/null
+++ b/packages/ibm-products/src/components/AboutModal/AboutModal.mdx
@@ -0,0 +1,58 @@
+import { Story, Controls, Source, Canvas } from '@storybook/addon-docs';
+import { CodesandboxLink } from '../../global/js/utils/story-helper';
+import { AboutModal } from '.';
+import * as stories from './AboutModal.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
+
+# About Modal
+
+[AboutModal usage guidelines](https://pages.github.ibm.com/carbon/ibm-products/components/about-modal/usage/) | [Carbon Modal usage guidelines](https://www.carbondesignsystem.com/components/modal/usage) | [Carbon Modal documentation](https://react.carbondesignsystem.com/?path=/docs/components-modal)
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Example usage](#example-usage)
+ - [About Modal](#about-modal-1)
+ - [About Modal With All Props Set](#about-modal-with-all-props-set)
+- [Component API](#component-api)
+
+## Overview
+
+The About modal component conveys product information, including the version number, copyright information, and license details.
+The About modal is triggered by a user’s action which appears on top of the main page content and is persistent until dismissed.
+The purpose of this modal should be immediately apparent to the user, with a clear and obvious path to completion.
+
+### About Modal
+
+
+
+
+### About Modal With All Props Set
+
+
+
+## Component API
+
+
diff --git a/packages/ibm-products/src/components/AboutModal/AboutModal.stories.jsx b/packages/ibm-products/src/components/AboutModal/AboutModal.stories.jsx
index 474a90dfd98..9341e561af8 100644
--- a/packages/ibm-products/src/components/AboutModal/AboutModal.stories.jsx
+++ b/packages/ibm-products/src/components/AboutModal/AboutModal.stories.jsx
@@ -7,23 +7,15 @@
// cspell:words grafana
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
import { pkg } from '../../settings';
import { AboutModal } from '.';
import { Button, Link } from '@carbon/react';
-
-import ExampleLogo from './_story-assets/example-logo.svg';
-import ansibleLogo from './_story-assets/ansible-logo.png';
-import grafanaLogo from './_story-assets/grafana-logo.png';
-import jsLogo from './_story-assets/js-logo.png';
-
import styles from './_storybook-styles.scss?inline';
-const blockClass = `${pkg.prefix}--about-modal`;
-
-import DocsPage from './AboutModal.docs-page';
+import mdx from './AboutModal.mdx';
export default {
title: 'IBM Products/Components/About modal/AboutModal',
@@ -32,7 +24,7 @@ export default {
parameters: {
styles,
docs: {
- page: DocsPage,
+ page: mdx,
},
controls: { sort: 'requiredFirst' },
},
@@ -46,29 +38,6 @@ export default {
},
},
options: [0, 1],
- mapping: {
- 0: null,
- 1: (
- <>
-
Powered by
-
-
-
-
- ),
- },
},
links: {
control: {
@@ -76,33 +45,6 @@ export default {
labels: { 0: 'none', 1: 'one link', 2: 'two links', 3: 'three links' },
},
options: [0, 1, 2, 3],
- mapping: {
- 0: null,
- 1: [
-
- Link action
- ,
- ],
- 2: [
-
- Link action
- ,
-
- Link action
- ,
- ],
- 3: [
-
- Link action
- ,
-
- Link action
- ,
-
- Link action
- ,
- ],
- },
},
content: {
control: {
@@ -115,12 +57,6 @@ export default {
},
},
options: [0, 1, 2, 3],
- mapping: {
- 0: null,
- 1: 'This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed.',
- 2: "This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed. Please see the tab entitled 'Copyright and trademark information' for related information. IBM grants you a non-exclusive, non-transferable, limited permission to access and display the Web pages within this site as a customer or potential customer of IBM provided you comply with these Terms of Use, and all copyright, trademark, and other proprietary notices remain intact.",
- 3: "This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed. Please see the tab entitled 'Copyright and trademark information' for related information. IBM grants you a non-exclusive, non-transferable, limited permission to access and display the Web pages within this site as a customer or potential customer of IBM provided you comply with these Terms of Use, and all copyright, trademark, and other proprietary notices remain intact. You may only use a crawler to crawl this Web site as permitted by this Web site's robots.txt protocol, and IBM may block any crawlers in its sole discretion. The use authorized under this agreement is non-commercial in nature (e.g., you may not sell the content you access on or through this Web site.) All other use of this site is prohibited. Except for the limited permission in the preceding paragraph, IBM does not grant you any express or implied rights or licenses under any patents, trademarks, copyrights, or other proprietary or intellectual property rights. You may not mirror any of the content from this site on another Web site or in any other media. Any software and other materials that are made available for downloading, access, or other use from this site with their own license terms will be governed by such terms, conditions, and notices. Your failure to comply with such terms or any of the terms on this site will result in automatic termination of any rights granted to you, without prior notice, and you must immediately destroy all copies of downloaded materials in your possession, custody or control. This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed. Please see the tab entitled “Copyright and trademark information” for related information. IBM grants you a non-exclusive, non-transferable, limited permission to access and display the Web pages within this site as a customer or potential customer of IBM provided you comply with these Terms of Use, and all copyright, trademark, and other proprietary notices remain intact. You may only use a crawler to crawl this Web site as permitted by this Web site’s robots.txt protocol, and IBM may block any crawlers in its sole discretion. The use authorized under this agreement is non-commercial in nature (e.g., you may not sell the content you access on or through this Web site.) All other use of this site is prohibited. Except for the limited permission in the preceding paragraph, IBM does not grant you any express or implied rights or licenses under any patents, trademarks, copyrights, or other proprietary or intellectual property rights. You may not mirror any of the content from this site on another Web site or in any other media. Any software and other materials that are made available for downloading, access, or other use from this site with their own license terms will be governed by such terms, conditions, and notices. Your failure to comply with such terms or any of the terms on this site will result in automatic termination of any rights granted to you, without prior notice, and you must immediately destroy all copies of downloaded materials in your possession, custody or control.",
- },
},
logo: {
control: false,
@@ -138,49 +74,135 @@ export default {
},
},
options: [0, 1, 2],
- mapping: {
- 0: <>IBM Product name,
- 1: <>IBM Product name example that is longer than one line,
- 2: (
- <>
- IBM{' '}
-
- Product name
-
-
- ),
- },
},
},
};
-const logo = (
-
-);
+const Template = (args, context) => {
+ const blockClass = `${pkg.prefix}--about-modal`;
+ const { title, content, additionalInfo, links } = args;
-const Template = (storyName, storyInitiallyOpen, args, context) => {
+ const logo = (
+
+ );
+
+ const getTitle = (value) => {
+ if (value === 0) {
+ return <>IBM Product name;
+ } else if (value === 1) {
+ return <>IBM Product name example that is longer than one line';
+ } else value === 2;
+ {
+ return (
+ <>
+ IBM{' '}
+
+ Product name
+
+
+ );
+ }
+ };
+
+ const getLinks = (value) => {
+ if (value === 0) {
+ return null;
+ } else if (value === 1) {
+ return [
+
+ Link action
+ ,
+ ];
+ } else if (value === 2) {
+ return [
+
+ Link action
+ ,
+
+ Link action
+ ,
+ ];
+ } else {
+ return [
+
+ Link action
+ ,
+
+ Link action
+ ,
+
+ Link action
+ ,
+ ];
+ }
+ };
+
+ const getContent = (value) => {
+ if (value === 0) {
+ return null;
+ } else if (value === 1) {
+ return 'This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed.';
+ } else if (value === 2) {
+ return "This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed. Please see the tab entitled 'Copyright and trademark information' for related information. IBM grants you a non-exclusive, non-transferable, limited permission to access and display the Web pages within this site as a customer or potential customer of IBM provided you comply with these Terms of Use, and all copyright, trademark, and other proprietary notices remain intact.";
+ } else {
+ return "This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed. Please see the tab entitled 'Copyright and trademark information' for related information. IBM grants you a non-exclusive, non-transferable, limited permission to access and display the Web pages within this site as a customer or potential customer of IBM provided you comply with these Terms of Use, and all copyright, trademark, and other proprietary notices remain intact. You may only use a crawler to crawl this Web site as permitted by this Web site's robots.txt protocol, and IBM may block any crawlers in its sole discretion. The use authorized under this agreement is non-commercial in nature (e.g., you may not sell the content you access on or through this Web site.) All other use of this site is prohibited. Except for the limited permission in the preceding paragraph, IBM does not grant you any express or implied rights or licenses under any patents, trademarks, copyrights, or other proprietary or intellectual property rights. You may not mirror any of the content from this site on another Web site or in any other media. Any software and other materials that are made available for downloading, access, or other use from this site with their own license terms will be governed by such terms, conditions, and notices. Your failure to comply with such terms or any of the terms on this site will result in automatic termination of any rights granted to you, without prior notice, and you must immediately destroy all copies of downloaded materials in your possession, custody or control. This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed. Please see the tab entitled “Copyright and trademark information” for related information. IBM grants you a non-exclusive, non-transferable, limited permission to access and display the Web pages within this site as a customer or potential customer of IBM provided you comply with these Terms of Use, and all copyright, trademark, and other proprietary notices remain intact. You may only use a crawler to crawl this Web site as permitted by this Web site’s robots.txt protocol, and IBM may block any crawlers in its sole discretion. The use authorized under this agreement is non-commercial in nature (e.g., you may not sell the content you access on or through this Web site.) All other use of this site is prohibited. Except for the limited permission in the preceding paragraph, IBM does not grant you any express or implied rights or licenses under any patents, trademarks, copyrights, or other proprietary or intellectual property rights. You may not mirror any of the content from this site on another Web site or in any other media. Any software and other materials that are made available for downloading, access, or other use from this site with their own license terms will be governed by such terms, conditions, and notices. Your failure to comply with such terms or any of the terms on this site will result in automatic termination of any rights granted to you, without prior notice, and you must immediately destroy all copies of downloaded materials in your possession, custody or control.";
+ }
+ };
+
+ const getAdditionalInfo = (value) => {
+ if (value === 0) {
+ return null;
+ } else {
+ return (
+ <>
+
%20-%20https://sketchapp.com%20--%3e%3ctitle%3eGroup%3c/title%3e%3cdesc%3eCreated%20with%20Sketch.%3c/desc%3e%3cdefs%3e%3clinearGradient%20x1=%27-9.94443222%25%27%20y1=%2750%25%27%20x2=%27106.211488%25%27%20y2=%2750%25%27%20id=%27linearGradient-1%27%3e%3cstop%20stop-color=%27%23BE95FF%27%20offset=%270%25%27%3e%3c/stop%3e%3cstop%20stop-color=%27%234589FF%27%20offset=%27100%25%27%3e%3c/stop%3e%3c/linearGradient%3e%3ccircle%20id=%27path-2%27%20cx=%2786%27%20cy=%2786%27%20r=%2771%27%3e%3c/circle%3e%3c/defs%3e%3cg%20id=%27Page-1%27%20stroke=%27none%27%20stroke-width=%271%27%20fill=%27none%27%20fill-rule=%27evenodd%27%3e%3cg%20id=%27Group%27%3e%3cg%20id=%27Oval%27%3e%3cuse%20fill=%27%23D8D8D8%27%20xlink:href=%27%23path-2%27%3e%3c/use%3e%3cuse%20fill=%27url(%23linearGradient-1)%27%20xlink:href=%27%23path-2%27%3e%3c/use%3e%3c/g%3e%3ccircle%20id=%27Oval%27%20fill=%27%23FFFFFF%27%20cx=%2739.5%27%20cy=%2739.5%27%20r=%2739.5%27%3e%3c/circle%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
+ );
+
+ const getTitle = (value) => {
+ if (value === 0) {
+ return <>IBM Product name;
+ } else if (value === 1) {
+ return <>IBM Product name example that is longer than one line';
+ } else value === 2;
+ {
+ return (
+ <>
+ IBM{' '}
+
+ Product name
+
+
+ );
+ }
+ };
+
+ const getLinks = (value) => {
+ if (value === 0) {
+ return null;
+ } else if (value === 1) {
+ return [
+
+ Link action
+ ,
+ ];
+ } else if (value === 2) {
+ return [
+
+ Link action
+ ,
+
+ Link action
+ ,
+ ];
+ } else {
+ return [
+
+ Link action
+ ,
+
+ Link action
+ ,
+
+ Link action
+ ,
+ ];
+ }
+ };
+
+ const getContent = (value) => {
+ if (value === 0) {
+ return null;
+ } else if (value === 1) {
+ return 'This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed.';
+ } else if (value === 2) {
+ return "This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed. Please see the tab entitled 'Copyright and trademark information' for related information. IBM grants you a non-exclusive, non-transferable, limited permission to access and display the Web pages within this site as a customer or potential customer of IBM provided you comply with these Terms of Use, and all copyright, trademark, and other proprietary notices remain intact.";
+ } else {
+ return "This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed. Please see the tab entitled 'Copyright and trademark information' for related information. IBM grants you a non-exclusive, non-transferable, limited permission to access and display the Web pages within this site as a customer or potential customer of IBM provided you comply with these Terms of Use, and all copyright, trademark, and other proprietary notices remain intact. You may only use a crawler to crawl this Web site as permitted by this Web site's robots.txt protocol, and IBM may block any crawlers in its sole discretion. The use authorized under this agreement is non-commercial in nature (e.g., you may not sell the content you access on or through this Web site.) All other use of this site is prohibited. Except for the limited permission in the preceding paragraph, IBM does not grant you any express or implied rights or licenses under any patents, trademarks, copyrights, or other proprietary or intellectual property rights. You may not mirror any of the content from this site on another Web site or in any other media. Any software and other materials that are made available for downloading, access, or other use from this site with their own license terms will be governed by such terms, conditions, and notices. Your failure to comply with such terms or any of the terms on this site will result in automatic termination of any rights granted to you, without prior notice, and you must immediately destroy all copies of downloaded materials in your possession, custody or control. This Web site contains proprietary notices and copyright information, the terms of which must be observed and followed. Please see the tab entitled “Copyright and trademark information” for related information. IBM grants you a non-exclusive, non-transferable, limited permission to access and display the Web pages within this site as a customer or potential customer of IBM provided you comply with these Terms of Use, and all copyright, trademark, and other proprietary notices remain intact. You may only use a crawler to crawl this Web site as permitted by this Web site’s robots.txt protocol, and IBM may block any crawlers in its sole discretion. The use authorized under this agreement is non-commercial in nature (e.g., you may not sell the content you access on or through this Web site.) All other use of this site is prohibited. Except for the limited permission in the preceding paragraph, IBM does not grant you any express or implied rights or licenses under any patents, trademarks, copyrights, or other proprietary or intellectual property rights. You may not mirror any of the content from this site on another Web site or in any other media. Any software and other materials that are made available for downloading, access, or other use from this site with their own license terms will be governed by such terms, conditions, and notices. Your failure to comply with such terms or any of the terms on this site will result in automatic termination of any rights granted to you, without prior notice, and you must immediately destroy all copies of downloaded materials in your possession, custody or control.";
+ }
+ };
+
+ const getAdditionalInfo = (value) => {
+ if (value === 0) {
+ return null;
+ } else {
+ return (
+ <>
+