carbon-design-system · amal-k-joy · May 27, 2025 · May 28, 2025 · May 28, 2025 · May 28, 2025
@@ -0,0 +1,22 @@
+<!--
+@license
+
+Copyright IBM Corp. 2025
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>interstitial screen pattern example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,28 @@
+{
+  "name": "carbon-labs-react-firt-time-orientation-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/ibm-products": "^2.65.0",
+    "@carbon/react": "^1.78.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@carbon-labs/react-text-highlighter": "latest",
+    "@carbon-labs/utilities": "canary",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "sass": "~1.83.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
@@ -0,0 +1,63 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { InterstitialScreen, pkg } from '@carbon/ibm-products';
+import { Button } from '@carbon/react';
+import { ContentWrapper } from './components/ContentWrapper';
+import { PersonalizationInterstitial, WelcomeInterstitial } from './components';
+
+function App() {
+  const [showInterstitialModal, setShowInterstitialModal] = useState(true);
+
+  const defaultProps = {
+    headerTitle: 'Welcome to your sandbox, Jack!',
+    interstitialAriaLabel: 'Interstitial Screen',
+  };
+
+  pkg.component.InterstitialScreen = true;
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setShowInterstitialModal(true);
+        }}>
+        Show Interstitial modal
+      </Button>
+      <InterstitialScreen
+        isOpen={showInterstitialModal}
+        onClose={() => {
+          setShowInterstitialModal(false);
+        }}
+        interstitialAriaLabel={defaultProps.interstitialAriaLabel}
+        isFullScreen={false}>
+        <InterstitialScreen.Header
+          headerTitle={defaultProps.headerTitle}></InterstitialScreen.Header>
+        <InterstitialScreen.Body
+          contentRenderer={() => {
+            return (
+              <>
+                <ContentWrapper stepTitle="Welcome">
+                  <WelcomeInterstitial />
+                </ContentWrapper>
+                <ContentWrapper stepTitle="Tailor your experience">
+                  <PersonalizationInterstitial />
+                </ContentWrapper>
+              </>
+            );
+          }}
+        />
+        <InterstitialScreen.Footer />
+      </InterstitialScreen>
+    </>
+  );
+}
+
+export default App;
@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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, { PropsWithChildren, ReactNode } from 'react';
+
+interface ContentWrapperProps extends PropsWithChildren {
+  /**
+   * Provide the contents of the InterstitialScreenView.
+   */
+  children?: ReactNode;
+
+  /**
+   * Optional class name for this component.
+   */
+  className?: string;
+
+  /**
+   * The label to pass to the ProgressStep component.
+   */
+  stepTitle: string;
+
+  /**
+   * Optional method that takes in a message id and returns an internationalized string.
+   */
+  translateWithId?: (id: string) => string;
+}
+/**
+ * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.
+ */
+export const ContentWrapper = React.forwardRef<
+  HTMLDivElement,
+  ContentWrapperProps
+>(
+  (
+    {
+      children,
+      className,
+      stepTitle,
+      // Collect any other property values passed in.
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        aria-label={stepTitle}
+        {
+          // Pass through any other property values as HTML attributes.
+          ...rest
+        }
+        className={className}
+        ref={ref}>
+        {children}
+      </div>
+    );
+  }
+);
+
+ContentWrapper.displayName = 'ContentWrapper';
@@ -0,0 +1,99 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { settings } from '@carbon-labs/utilities/es/index.js';
+import { Column, FlexGrid, Row, SelectableTag } from '@carbon/react';
+import './styles/_firstTimeOrientation.scss';
+
+const PersonalizationInterstitial = () => {
+  const prefix = settings.stablePrefix;
+
+  const tags = [
+    {
+      id: 1,
+      text: 'Accelerate process with automation',
+    },
+    {
+      id: 2,
+      text: 'Proactively identify issues',
+    },
+    {
+      id: 3,
+      text: 'Accelerate response times',
+    },
+    {
+      id: 4,
+      text: 'Create rules with greater efficiency',
+    },
+    {
+      id: 5,
+      text: 'Query faster and monitor in real-time',
+    },
+    {
+      id: 6,
+      text: 'Stay ahead of emerging issues',
+    },
+    {
+      id: 7,
+      text: 'Take action with custom and built-in dashboards',
+    },
+  ];
+  const [selectedTags, setSelectedTags] = useState([
+    {
+      id: 1,
+    },
+    {
+      id: 4,
+    },
+    {
+      id: 6,
+    },
+  ]);
+
+  const handleChange = (tag, selected) => {
+    const nextSelectedTags = selected
+      ? [...selectedTags, tag]
+      : selectedTags.filter((t) => t.id !== tag.id);
+
+    console.log('Selected tags array: ', nextSelectedTags);
+    setSelectedTags(nextSelectedTags);
+  };
+  return (
+    <FlexGrid fullWidth className={`${prefix}__flexContainer`}>
+      <Row>
+        <Column className={`${prefix}__contentColumn`}>
+          <div
+            className={`${prefix}__interstitialTextContainer ${prefix}__firstTimeOrientation`}>
+            <h4>What experience interest you?</h4>
+            <p>
+              Personalize your experience by selecting all areas you want to
+              explore.
+            </p>
+          </div>
+          <div aria-label="Selectable tags" role="group">
+            {tags.map((tag, index) => (
+              <SelectableTag
+                key={index}
+                text={tag.text}
+                selected={!!selectedTags.find((t) => t.id === tag.id)}
+                onChange={(selected) => handleChange(tag, selected)}
+                size="lg"
+              />
+            ))}
+          </div>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
+
+PersonalizationInterstitial.displayName = 'PersonalizationInterstitial';
+
+export { PersonalizationInterstitial };
@@ -0,0 +1,48 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { settings } from '@carbon-labs/utilities/es/index.js';
+import { Column, FlexGrid, Row } from '@carbon/react';
+import welcomeInterstitialImage from './assets/welcomeInterstitial.png';
+import './styles/_firstTimeOrientation.scss';
+
+const WelcomeInterstitial = () => {
+  const prefix = settings.stablePrefix;
+  return (
+    <FlexGrid fullWidth className={`${prefix}__flexContainer`}>
+      <Row>
+        <Column sm={4} md={4} className={`${prefix}__contentColumn`}>
+          <div className={`${prefix}__interstitialTextContainer`}>
+            <h3>
+              <span>Built to scale; made for the analyst</span>
+            </h3>
+            <p>
+              Explore how to leverage search-based detection of your logs,
+              respond to automatically correlated and investigated cases,
+              advanced data source management, extended detection and response,
+              and much more.
+            </p>
+          </div>
+        </Column>
+        <Column sm={4} md={4}>
+          <img
+            src={welcomeInterstitialImage}
+            className={`${prefix}__interstitialImage`}
+            alt="Welcome interstitial"
+          />
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
+
+WelcomeInterstitial.displayName = 'WelcomeInterstitial';
+
+export { WelcomeInterstitial };
@@ -0,0 +1,65 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/type/scss/font-family' as *;
+@use '@carbon/styles/scss/components/tag' as *;
+@use '@carbon/ibm-products/scss/components/InterstitialScreen';
+@use '@carbon/react/scss/grid/flexbox';
+/* example SCSS */
+$prefix: 'clabs' !default;
+
+.#{$prefix}__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 100vh;
+}
+.#{$prefix}__flexContainer {
+  block-size: 100%;
+  padding-inline-end: 0;
+}
+.#{$prefix}__interstitialTextContainer {
+  margin-block-end: $spacing-09;
+
+  h3 {
+    @include type-style('fluid-heading-05', true);
+
+    span.blue-text {
+      color: $interactive;
+    }
+
+    p {
+      @include type-style('body-02');
+    }
+
+    margin-block-end: $spacing-05;
+  }
+  &.#{$prefix}__firstTimeOrientation {
+    h3 {
+      @include type-style('heading-04', true);
+    }
+
+    h4 {
+      @include type-style('heading-02', true);
+
+      margin-block-end: $spacing-03;
+    }
+  }
+}
+.#{$prefix}__contentColumn {
+  position: relative;
+  box-sizing: border-box;
+  padding-block-start: $spacing-10;
+}
+
+img.#{$prefix}__interstitialImage {
+  inline-size: 100%;
+}