diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/README.md b/examples/carbon-for-ibm-products/InterstitialScreen/README.md
new file mode 100644
index 0000000000..ef65b127fc
--- /dev/null
+++ b/examples/carbon-for-ibm-products/InterstitialScreen/README.md
@@ -0,0 +1,61 @@
+# Carbon for IBM Products `InterstitialScreen` example
+
+This example was initially generated by `@carbon/ibm-products` using the script `update-gallery-config` found in `package.json`.
+
+## Adding an example
+
+If using the `generate` script then a base example should be created for you. If for some reason this is not the case do the following:
+
+1. Duplicate an existing example e.g. `examples/carbon-for-ibm-products/AboutModal` and rename it to your match your component e.g. `MyComponent`
+2. Edit `gallery.config.json` which has the following form.
+
+```json
+{
+ "label": "Name of example in gallery",
+ "package-config": {
+ "flags": {
+ "component": {
+ "MyComponent": true
+ },
+ "feature": {
+ "MyFeature": true
+ }
+ "prefix": "alt-prefix",
+ },
+ "templates-variation": "templates-react-16"
+ }
+}
+```
+
+NOTE: All fields are optional, although most specify a label.
+
+The `package-config` section is used to specify the config used with the example, including prefix and any flags enabled.
+
+The `template-variation` is used to specify an alternative to the default template. This is currently used for React versions only.
+
+3. Edit the `src/Example` folder to show your component.
+4. Run the example and replace `thumbnail.png` with a picture of your example.
+
+NOTE 2: The only files retained after each run of the update script are `thumbnail.png`, `gallery.config.json`, and those in `src/Example`, so ensure all of your example source sits in the `src/Example` folder.
+
+## Updating examples
+
+Skip step 1 for `Adding an example` otherwise the same.
+
+## Adding / Updating a template or variant
+
+The simplest way to update a template is as follows.
+
+1. Copy the a generated example to the `scripts/example-gallery-builder/update-example` folder.
+2. Update it as necessary.
+3. Test that it works.
+4. Remove the folder `scripts/example-gallery-builder/update-example/templates` and rename your folder to this.
+5. Review the changes made and restore/rectify the template TAGS typically in capitals. These are replaced as part of the build process. E.g. InterstitialScreen, 2024, import './config'
+. For a full set of current tags review the code in `scripts/example-gallery-builder/update-example/index.js`.
+6. Remove the files `gallery.config.json`, `thumbnail.png` and the folder `src/Example`.
+
+### If a variant
+
+To reduce maintenance variants only need files which differ from the core `templates` folder. Delete any new files you did not intend to add.
+
+Variants are selected by folder name in the `gallery.config.json` file.
diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/gallery.config.json b/examples/carbon-for-ibm-products/InterstitialScreen/gallery.config.json
new file mode 100644
index 0000000000..bde7fd1c1a
--- /dev/null
+++ b/examples/carbon-for-ibm-products/InterstitialScreen/gallery.config.json
@@ -0,0 +1,12 @@
+{
+ "label": "Interstitial-Screen",
+ "package-config": {
+ "flags": {
+ "component": {
+ "InterstitialScreen": true
+ }
+ }
+ },
+ "dependencies": {},
+ "devDependencies": {}
+}
diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/index.html b/examples/carbon-for-ibm-products/InterstitialScreen/index.html
new file mode 100644
index 0000000000..56d5e127b5
--- /dev/null
+++ b/examples/carbon-for-ibm-products/InterstitialScreen/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+ Vite + React
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/package.json b/examples/carbon-for-ibm-products/InterstitialScreen/package.json
new file mode 100644
index 0000000000..d3d0cf57a4
--- /dev/null
+++ b/examples/carbon-for-ibm-products/InterstitialScreen/package.json
@@ -0,0 +1,56 @@
+{
+ "name": "InterstitialScreen-component-example",
+ "description": "An example showing use of the InterstitialScreen component from the @carbon/ibm-products component library.",
+ "keywords": [
+ "carbon",
+ "ibm",
+ "ibm-products",
+ "component",
+ "interstitialscreen",
+ "interstitial",
+ "screen"
+ ],
+ "license": "Apache-2.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@carbon/ibm-products": "^2.11.2",
+ "@carbon/react": "^1.40.0",
+ "lodash": "^4.17.21",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "sass": "^1.69.3"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.28",
+ "@types/react-dom": "^18.2.13",
+ "@vitejs/plugin-react": "^4.1.0",
+ "eslint": "^8.51.0",
+ "eslint-plugin-react": "^7.33.2",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.3",
+ "vite": "^4.5.2"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app"
+ ]
+ }
+}
diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/src/App.jsx b/examples/carbon-for-ibm-products/InterstitialScreen/src/App.jsx
new file mode 100644
index 0000000000..3406fb08c3
--- /dev/null
+++ b/examples/carbon-for-ibm-products/InterstitialScreen/src/App.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ThemeProvider } from './ThemeSelector/ThemeContext';
+import { ThemeDropdown } from './ThemeSelector/ThemeDropdown';
+import './config';
+import Example from './Example/Example';
+
+function App() {
+ return (
+
+ );
+ };
+
+ return isFullScreen
+ ? renderFullScreen(renderBody())
+ : renderModal(renderBody());
+ }
+);
+
+// Return a placeholder if not released and not enabled by feature flag
+InterstitialScreen = pkg.checkComponentEnabled(
+ InterstitialScreen,
+ componentName
+);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InterstitialScreen.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+InterstitialScreen.propTypes = {
+ /**
+ * Provide the contents of the InterstitialScreen.
+ */
+ children: PropTypes.node.isRequired,
+
+ /**
+ * Provide an optional class to be applied to the containing node.
+ */
+ className: PropTypes.string,
+
+ /**
+ * Tooltip text and aria label for the Close button icon.
+ */
+ closeIconDescription: PropTypes.string,
+ /**
+ * The domain this app belongs to, e.g. "IBM Cloud Pak".
+ */
+ domainName: PropTypes.string,
+ /**
+ * Provide an optional class to be applied to the element >.
+ */
+ headerClassName: PropTypes.string,
+ /**
+ * Provide an optional class to be applied to the element >.
+ */
+ headerTitle: PropTypes.string,
+ /**
+ * Optional parameter to hide the progress indicator when multiple steps are used.
+ */
+ hideProgressIndicator: PropTypes.bool,
+
+ /**
+ * The aria label applied to the Interstitial Screen component
+ */
+ interstitialAriaLabel: PropTypes.string,
+ /**
+ * Specifies whether the component is shown as a full-screen
+ * experience, else it is shown as a modal by default.
+ */
+ isFullScreen: PropTypes.bool,
+ /**
+ * Specifies whether the component is currently open.
+ */
+ isOpen: PropTypes.bool,
+ /**
+ * The object describing an image in one of two shapes.
+ *
+ * If a single media element is required, use `{render}`.
+ *
+ * If a stepped animation is required, use `{filePaths}`.
+ *
+ * Breakpoints are used to set the media content column size as well as the remainder for the main content areas column size.
+ * Medium and small breakpoints will be set to 0 internally to focus on the main content area.
+ * @see {@link MEDIA_PROP_TYPE}.
+ */
+ media: PropTypes.oneOfType([
+ PropTypes.shape({
+ render: PropTypes.func,
+ breakpoints: PropTypes.shape({
+ xlg: PropTypes.number,
+ lg: PropTypes.number,
+ }),
+ }),
+ PropTypes.shape({
+ filePaths: PropTypes.arrayOf(PropTypes.string),
+ breakpoints: PropTypes.shape({
+ xlg: PropTypes.number,
+ lg: PropTypes.number,
+ }),
+ }),
+ ]),
+ /**
+ * The label for the Next button.
+ */
+ nextButtonLabel: PropTypes.string,
+ /**
+ * Function to call when the close button is clicked.
+ */
+ onClose: PropTypes.func,
+ /**
+ * The label for the Previous button.
+ */
+ previousButtonLabel: PropTypes.string,
+ /**
+ * The name of this app, e.g. "QRadar".
+ */
+ productName: PropTypes.string,
+
+ /**
+ * The label for the skip button.
+ */
+ skipButtonLabel: PropTypes.string,
+ /**
+ * The label for the start button.
+ */
+ startButtonLabel: PropTypes.string,
+};
diff --git a/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.mdx b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.mdx
new file mode 100644
index 0000000000..af217fb9e6
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.mdx
@@ -0,0 +1,65 @@
+import { Story, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import {
+ getStoryId,
+ CodesandboxLink,
+} from '../../global/js/utils/story-helper';
+import { InterstitialScreen } from '.';
+
+# InterstitialScreen
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Expected Composability](#expected-composability)
+- [About Novice to pro](#about-novice-to-pro)
+- [Component API](#component-api)
+
+## Overview
+
+[Interstitial screen](https://pages.github.ibm.com/cdai-design/pal/components/onboarding/interstitial/usage)
+can be a full page or an overlay, and are shown on the first time a user
+accesses a new experience (e.g. upon first login or first time opening a page
+where a newly purchased capability is presented).
+
+## Expected Composability
+
+Interstitial Screen was designed to be used with N number of
+**InterstitialScreenView** children. As a convenience, a provided
+**InterstitialScreenViewModule** is also available, although not required as a
+child of InterstitialScreenView.
+
+## About Novice to pro
+
+[Novice to pro](https://pages.github.ibm.com/security/security-design/teams-across-security/novice-to-pro/overview/)
+is a continuous learning methodology and framework that aims to orient, onboard,
+explain, educate, and cultivate novice users into high-functioning power users.
+
+## Interstitial Screen Code sample
+
+```jsx
+
+
+
+
+
+```
+
+## Component API
+
+
diff --git a/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.stories.js b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.stories.js
new file mode 100644
index 0000000000..897c1c130b
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.stories.js
@@ -0,0 +1,428 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState } from 'react';
+import { Button } from '@carbon/react';
+
+// TODO: import action to handle events if required.
+// import { action } from '@storybook/addon-actions';
+
+import { InterstitialScreenView } from '..';
+import { InterstitialScreenViewModule } from '..';
+import {
+ getStoryTitle,
+ prepareStory,
+} from '../../global/js/utils/story-helper';
+
+import { InterstitialScreen } from '.';
+import mdx from './InterstitialScreen.mdx';
+
+import HowACaseIsCreated1 from './_story-assets/illustrations/how-a-case-is-created-1.json';
+import HowACaseIsCreated2 from './_story-assets/illustrations/how-a-case-is-created-2.json';
+import HowACaseIsCreated3 from './_story-assets/illustrations/how-a-case-is-created-3.json';
+import InterstitialExampleImg from './_story-assets/illustrations/interstitial-ph.png';
+
+import styles from './_storybook-styles.scss';
+const storyClass = 'interstitial-stories';
+
+export default {
+ title: getStoryTitle(InterstitialScreen.displayName),
+ component: InterstitialScreen,
+ tags: ['autodocs'],
+ argTypes: {
+ media: {
+ options: ['None', 'With a static image', 'With an animation'],
+ control: { type: 'select' },
+ },
+ children: { control: { disable: true } },
+ },
+ decorators: [
+ (Story) => {
+ return
+ );
+ }
+);
+
+// Return a placeholder if not released and not enabled by feature flag
+InterstitialScreenView = pkg.checkComponentEnabled(
+ InterstitialScreenView,
+ componentName
+);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InterstitialScreenView.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+InterstitialScreenView.propTypes = {
+ /**
+ * Provide the contents of the InterstitialScreenView.
+ */
+ children: PropTypes.node,
+
+ /**
+ * Optional class name for this component.
+ */
+ className: PropTypes.string,
+
+ /**
+ * The label to pass to the ProgressStep component.
+ */
+ stepTitle: PropTypes.string.isRequired,
+};
diff --git a/packages/ibm-products/src/components/InterstitialScreenView/InterstitialScreenView.mdx b/packages/ibm-products/src/components/InterstitialScreenView/InterstitialScreenView.mdx
new file mode 100644
index 0000000000..affee1aaa0
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenView/InterstitialScreenView.mdx
@@ -0,0 +1,53 @@
+import { Story, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import {
+ getStoryId,
+ CodesandboxLink,
+} from '../../global/js/utils/story-helper';
+import { InterstitialScreenView } from '.';
+
+# InterstitialScreenView
+
+## Table of Contents
+
+- [Overview](#overview)
+- [About Novice to pro](#about-novice-to-pro)
+- [Example usage](#example-usage)
+- [Component API](#component-api)
+
+## Overview
+
+InterstitialScreenView is designed as a child of **InterstitialScreen**. The
+provided `stepTitle` prop is used as an aria-label within the component, as well
+as by the parent InterstitialScreen component when multiple
+InterstitialScreenView's are used in a Carbon
+[ProgressIndicator](https://carbondesignsystem.com/components/progress-indicator/usage/)
+to display the user's progression.
+
+## About Novice to pro
+
+[Novice to pro](https://pages.github.ibm.com/security/security-design/teams-across-security/novice-to-pro/overview/)
+is a continuous learning methodology and framework that aims to orient, onboard,
+explain, educate, and cultivate novice users into high-functioning power users.
+
+## Example usage
+
+
+
+## Code sample
+
+```jsx
+
+
Hello world
+
+```
+
+## Component API
+
+
diff --git a/packages/ibm-products/src/components/InterstitialScreenView/InterstitialScreenView.stories.js b/packages/ibm-products/src/components/InterstitialScreenView/InterstitialScreenView.stories.js
new file mode 100644
index 0000000000..7b3a1b911c
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenView/InterstitialScreenView.stories.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+// TODO: import action to handle events if required.
+// import { action } from '@storybook/addon-actions';
+
+import {
+ getStoryTitle,
+ prepareStory,
+} from '../../global/js/utils/story-helper';
+
+import { InterstitialScreenView } from '.';
+import mdx from './InterstitialScreenView.mdx';
+
+import styles from './_storybook-styles.scss';
+
+export default {
+ title: getStoryTitle(InterstitialScreenView.displayName),
+ component: InterstitialScreenView,
+ tags: ['autodocs'],
+ argTypes: {
+ children: { control: { disable: true } },
+ },
+ parameters: {
+ styles,
+ docs: {
+ page: mdx,
+ },
+ },
+};
+
+/**
+ * TODO: Declare template(s) for one or more scenarios.
+ */
+const Template = (args) => {
+ return (
+
+
Hello world
+
+ );
+};
+
+/**
+ * TODO: Declare one or more stories, generally one per design scenario.
+ * NB no need for a 'Playground' because all stories have all controls anyway.
+ */
+export const interstitialScreenView = prepareStory(Template, {
+ args: {
+ stepTitle: 'Step 1',
+ },
+});
diff --git a/packages/ibm-products/src/components/InterstitialScreenView/InterstitialScreenView.test.js b/packages/ibm-products/src/components/InterstitialScreenView/InterstitialScreenView.test.js
new file mode 100644
index 0000000000..325da5a690
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenView/InterstitialScreenView.test.js
@@ -0,0 +1,109 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+
+import { pkg } from '../../settings';
+import uuidv4 from '../../global/js/utils/uuidv4';
+
+import { InterstitialScreenView } from '.';
+
+const blockClass = `${pkg.prefix}--interstitial-screen-view`;
+const componentName = InterstitialScreenView.displayName;
+
+// values to use
+const children = `hello, world (${uuidv4()})`;
+const className = `class-${uuidv4()}`;
+const dataTestId = uuidv4();
+
+describe(componentName, () => {
+ it('renders a component InterstitialScreenView', () => {
+ render(
+
+ {children}
+
+ );
+ expect(screen.getByTestId(dataTestId)).toHaveClass(blockClass);
+ });
+
+ it('has no accessibility violations', async () => {
+ const { container } = render(
+
+ {children}
+
+ );
+ await expect(container).toBeAccessible(componentName);
+ await expect(container).toHaveNoAxeViolations();
+ });
+
+ it(`renders children`, () => {
+ render(
+
+ {children}
+
+ );
+ screen.getByText(children);
+ });
+
+ it('applies className to the containing node', () => {
+ render(
+
+ {children}
+
+ );
+ expect(screen.getByTestId(dataTestId)).toHaveClass(className);
+ });
+
+ it('adds additional props to the containing node', () => {
+ render(
+
+ {children}
+
+ );
+ screen.getByTestId(dataTestId);
+ });
+
+ it('forwards a ref to an appropriate node', () => {
+ const ref = React.createRef();
+ render(
+
+ {children}
+
+ );
+ expect(ref.current).toHaveClass(blockClass);
+ });
+
+ it('adds the Devtools attribute to the containing node', () => {
+ render(
+
+ {children}
+
+ );
+
+ expect(screen.getByTestId(dataTestId)).toHaveDevtoolsAttribute(
+ componentName
+ );
+ });
+});
diff --git a/packages/ibm-products/src/components/InterstitialScreenView/_storybook-styles.scss b/packages/ibm-products/src/components/InterstitialScreenView/_storybook-styles.scss
new file mode 100644
index 0000000000..56c3eda080
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenView/_storybook-styles.scss
@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
diff --git a/packages/ibm-products/src/components/InterstitialScreenView/index.js b/packages/ibm-products/src/components/InterstitialScreenView/index.js
new file mode 100644
index 0000000000..5c5704799f
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenView/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { InterstitialScreenView } from './InterstitialScreenView';
diff --git a/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js b/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js
new file mode 100644
index 0000000000..95e19a6afd
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg /*, carbon */ } from '../../settings';
+
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--interstitial-screen-view-module`;
+const componentName = 'InterstitialScreenViewModule';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+
+/**
+ * View module to help in building interstitial screen views.
+ */
+export let InterstitialScreenViewModule = React.forwardRef(
+ (
+ {
+ // The component props, in alphabetical order (for consistency).
+
+ className,
+ title,
+ description,
+ // Collect any other property values passed in.
+ ...rest
+ },
+ ref
+ ) => {
+ return (
+
+
{title}
+
{description}
+
+ );
+ }
+);
+
+// Return a placeholder if not released and not enabled by feature flag
+InterstitialScreenViewModule = pkg.checkComponentEnabled(
+ InterstitialScreenViewModule,
+ componentName
+);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InterstitialScreenViewModule.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+InterstitialScreenViewModule.propTypes = {
+ /**
+ * Provide an optional class to be applied to the containing node.
+ */
+ className: PropTypes.string,
+ /**
+ * The description of this component.
+ */
+ description: PropTypes.string.isRequired,
+ /**
+ * The title of this component.
+ */
+ title: PropTypes.string.isRequired,
+};
diff --git a/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.mdx b/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.mdx
new file mode 100644
index 0000000000..e5c537a273
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.mdx
@@ -0,0 +1,51 @@
+import { Story, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
+import {
+ getStoryId,
+ CodesandboxLink,
+} from '../../global/js/utils/story-helper';
+import { InterstitialScreenViewModule } from '.';
+
+# InterstitialScreenViewModule
+
+## Table of Contents
+
+- [Overview](#overview)
+- [About Novice to pro](#about-novice-to-pro)
+- [Example usage](#example-usage)
+- [Component API](#component-api)
+
+## Overview
+
+InterstitialScreenViewModule is an optional view module to jump start
+development and is designed to be used as a child of InterstitialScreenView.
+
+## About Novice to pro
+
+[Novice to pro](https://pages.github.ibm.com/security/security-design/teams-across-security/novice-to-pro/overview/)
+is a continuous learning methodology and framework that aims to orient, onboard,
+explain, educate, and cultivate novice users into high-functioning power users.
+
+## Example usage
+
+
+
+## Code sample
+
+```jsx
+
+```
+
+## Component API
+
+
diff --git a/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.stories.js b/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.stories.js
new file mode 100644
index 0000000000..c2a5f2d53a
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.stories.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+// TODO: import action to handle events if required.
+// import { action } from '@storybook/addon-actions';
+
+import {
+ getStoryTitle,
+ prepareStory,
+} from '../../global/js/utils/story-helper';
+
+import { InterstitialScreenViewModule } from '.';
+import mdx from './InterstitialScreenViewModule.mdx';
+
+import styles from './_storybook-styles.scss';
+
+export default {
+ title: getStoryTitle(InterstitialScreenViewModule.displayName),
+ component: InterstitialScreenViewModule,
+ tags: ['autodocs'],
+ argTypes: {
+ // egProp: { control: 'color' },
+ //
+ title: {
+ control: { type: 'text' },
+ },
+ description: {
+ control: { type: 'text' },
+ },
+ className: {
+ control: { type: 'text' },
+ },
+ size: {
+ options: ['sm', 'md', 'lg'],
+ control: { type: 'radio' },
+ },
+ },
+ parameters: {
+ styles,
+ docs: {
+ page: mdx,
+ },
+ },
+};
+
+/**
+ * TODO: Declare template(s) for one or more scenarios.
+ */
+const Template = (args) => {
+ return (
+
+ );
+};
+
+/**
+ * TODO: Declare one or more stories, generally one per design scenario.
+ * NB no need for a 'Playground' because all stories have all controls anyway.
+ */
+export const interstitialScreenViewModule = prepareStory(Template, {
+ args: {
+ // TODO: Component args - https://storybook.js.org/docs/react/writing-stories/args#InterstitialScreenViewModule-args
+ className: 'MyInterstitialScreenViewModule',
+ title: 'Example title',
+ description: 'This is an example of a description',
+ },
+});
diff --git a/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.test.js b/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.test.js
new file mode 100644
index 0000000000..6b5b23cca8
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenViewModule/InterstitialScreenViewModule.test.js
@@ -0,0 +1,103 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
+
+import { pkg } from '../../settings';
+import uuidv4 from '../../global/js/utils/uuidv4';
+
+import { InterstitialScreenViewModule } from '.';
+
+const blockClass = `${pkg.prefix}--interstitial-screen-view-module`;
+const componentName = InterstitialScreenViewModule.displayName;
+
+// values to use
+const className = `class-${uuidv4()}`;
+const dataTestId = uuidv4();
+const tmpTitle = `title-${uuidv4()}`;
+const tmpDesc = `description-${uuidv4()}`;
+
+describe(componentName, () => {
+ it('renders a component InterstitialScreenViewModule', () => {
+ render(
+
+ );
+ expect(screen.getByTestId(dataTestId)).toHaveClass(blockClass);
+ });
+
+ it('has no accessibility violations', async () => {
+ const { container } = render(
+
+ );
+ await expect(container).toBeAccessible(componentName);
+ await expect(container).toHaveNoAxeViolations();
+ });
+
+ it('applies className to the containing node', () => {
+ render(
+
+ );
+ expect(screen.getByTestId(dataTestId)).toHaveClass(className);
+ });
+
+ it('adds additional props to the containing node', () => {
+ render(
+
+ );
+ screen.getByTestId(dataTestId);
+ });
+
+ it('forwards a ref to an appropriate node', () => {
+ const ref = React.createRef();
+ render(
+
+ );
+ expect(ref.current).toHaveClass(blockClass);
+ });
+
+ it('adds the Devtools attribute to the containing node', () => {
+ render(
+
+ );
+
+ expect(screen.getByTestId(dataTestId)).toHaveDevtoolsAttribute(
+ componentName
+ );
+ });
+});
diff --git a/packages/ibm-products/src/components/InterstitialScreenViewModule/_storybook-styles.scss b/packages/ibm-products/src/components/InterstitialScreenViewModule/_storybook-styles.scss
new file mode 100644
index 0000000000..214171187a
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenViewModule/_storybook-styles.scss
@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// TODO: add any additional styles used by InterstitialScreenViewModule.stories.js
diff --git a/packages/ibm-products/src/components/InterstitialScreenViewModule/index.js b/packages/ibm-products/src/components/InterstitialScreenViewModule/index.js
new file mode 100644
index 0000000000..6f45efe4e6
--- /dev/null
+++ b/packages/ibm-products/src/components/InterstitialScreenViewModule/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { InterstitialScreenViewModule } from './InterstitialScreenViewModule';
diff --git a/packages/ibm-products/src/components/index.js b/packages/ibm-products/src/components/index.js
index 49c0e8d064..c24b934c4b 100644
--- a/packages/ibm-products/src/components/index.js
+++ b/packages/ibm-products/src/components/index.js
@@ -97,4 +97,7 @@ export {
} from './Guidebanner';
export { InlineTip, InlineTipButton, InlineTipLink } from './InlineTip';
export { NonLinearReading } from './NonLinearReading';
+export { InterstitialScreen } from './InterstitialScreen';
+export { InterstitialScreenView } from './InterstitialScreenView';
+export { InterstitialScreenViewModule } from './InterstitialScreenViewModule';
export { DelimitedList } from './DelimitedList';
diff --git a/packages/ibm-products/src/global/js/package-settings.js b/packages/ibm-products/src/global/js/package-settings.js
index 1fe1e1f65f..e14ce8be55 100644
--- a/packages/ibm-products/src/global/js/package-settings.js
+++ b/packages/ibm-products/src/global/js/package-settings.js
@@ -69,6 +69,12 @@ const defaults = {
EditTearsheetNarrow: false,
EditFullPage: false,
EditUpdateCards: false,
+ DelimitedList: false,
+
+ /* new component flags here - comment used by generate CLI */
+
+ // Novice to pro components not yet reviewed and released:
+ Checklist: false,
Coachmark: false,
CoachmarkBeacon: false,
CoachmarkButton: false,
@@ -76,12 +82,6 @@ const defaults = {
CoachmarkOverlayElement: false,
CoachmarkOverlayElements: false,
CoachmarkStack: false,
- DelimitedList: false,
-
- /* new component flags here - comment used by generate CLI */
-
- // Novice to pro components not yet reviewed and released:
- Checklist: false,
Guidebanner: false,
GuidebannerElement: false,
GuidebannerElementButton: false,
@@ -89,6 +89,9 @@ const defaults = {
InlineTip: false,
InlineTipButton: false,
InlineTipLink: false,
+ InterstitialScreen: false,
+ InterstitialScreenView: false,
+ InterstitialScreenViewModule: false,
NonLinearReading: false,
},