fix(novice-to-pro): change to onboarding and added getStartedCard (#5422

) * fix(novice-to-pro): change to onboarding and added getStartedCard * fix(checklist): typo * fix(avt): updates * fix(getStarted): avt
carbon-design-system · Jun 11, 2024 · 7442150 · 7442150
1 parent dc4a98a
commit 7442150
Show file tree

Hide file tree

Showing 46 changed files with 69 additions and 72 deletions.
diff --git a/e2e/components/Checklist/Checklist-test.avt.e2e.js b/e2e/components/Checklist/Checklist-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('Checklist @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'Checklist',
-      id: 'ibm-products-novice-to-pro-checklist--checklist',
+      id: 'ibm-products-onboarding-checklist--checklist',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/e2e/components/GetStartedCard/GetStartedCard-test.avt.e2e.js b/e2e/components/GetStartedCard/GetStartedCard-test.avt.e2e.js
@@ -15,7 +15,7 @@ test.describe('GetStartedCard @avt', () => {
     await visitStory(page, {
       component: 'GetStartedCard',
       // cspell:disable-next-line
-      id: 'ibm-products-components-cards-getstartedcard--default',
+      id: 'ibm-products-onboarding-getstartedcard--default',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/e2e/components/Guidebanner/GuidebannerCollapsible-test.avt.e2e.js b/e2e/components/Guidebanner/GuidebannerCollapsible-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('Guidebanner @avt', () => {
   test('@avt-collapsible-state', async ({ page }) => {
     await visitStory(page, {
       component: 'Guidebanner',
-      id: 'ibm-products-novice-to-pro-guidebanner--collapsible',
+      id: 'ibm-products-onboarding-guidebanner--collapsible',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/e2e/components/InlineTip/InlineTip-test.avt.e2e.js b/e2e/components/InlineTip/InlineTip-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('InlineTip @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'InlineTip',
-      id: 'ibm-products-novice-to-pro-inline-tip-inlinetip--inline-tip',
+      id: 'ibm-products-onboarding-inline-tip-inlinetip--inline-tip',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/e2e/components/InterstitialScreen/InterstitialScreen-test.avt.e2e.js b/e2e/components/InterstitialScreen/InterstitialScreen-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('InterstitialScreen @avt', () => {
   test('@avt-full-screen-state', async ({ page }) => {
     await visitStory(page, {
       component: 'InterstitialScreen',
-      id: 'ibm-products-novice-to-pro-interstitial-screen-interstitialscreen--interstitial-screen-full-screen-image',
+      id: 'ibm-products-onboarding-interstitial-screen-interstitialscreen--interstitial-screen-full-screen-image',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/e2e/components/InterstitialScreenView/InterstitialScreenView-test.avt.e2e.js b/e2e/components/InterstitialScreenView/InterstitialScreenView-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('InterstitialScreenView @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'InterstitialScreenView',
-      id: 'ibm-products-novice-to-pro-interstitial-screen-interstitialscreenview--interstitial-screen-view',
+      id: 'ibm-products-onboarding-interstitial-screen-interstitialscreenview--interstitial-screen-view',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/e2e/components/InterstitialScreenViewModule/InterstitialScreenViewModule-test.avt.e2e.js b/e2e/components/InterstitialScreenViewModule/InterstitialScreenViewModule-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('InterstitialScreenViewModule @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'InterstitialScreenViewModule',
-      id: 'ibm-products-novice-to-pro-interstitial-screen-interstitialscreenviewmodule--interstitial-screen-view-module',
+      id: 'ibm-products-onboarding-interstitial-screen-interstitialscreenviewmodule--interstitial-screen-view-module',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/e2e/components/NonLinearReading/NonLinearReading-test.avt.e2e.js b/e2e/components/NonLinearReading/NonLinearReading-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('NonLinearReading @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'NonLinearReading',
-      id: 'ibm-products-novice-to-pro-non-linear-reading-nonlinearreading--single-level',
+      id: 'ibm-products-onboarding-non-linear-reading-nonlinearreading--single-level',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js
@@ -120,7 +120,7 @@ const parameters = {
         'Overview',
         ['Welcome', 'Getting started', 'Examples', '*'],
         'IBM Products',
-        ['Components', 'Patterns', 'Internal', 'Novice to pro'],
+        ['Components', 'Patterns', 'Internal', 'Onboarding'],
         'Community',
       ],
     },

diff --git a/packages/ibm-products-styles/src/components/NonLinearReading/_non-linear-reading.scss b/packages/ibm-products-styles/src/components/NonLinearReading/_non-linear-reading.scss
@@ -104,7 +104,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
   padding: $spacing-03 $spacing-04;
   border-left: to-rem(1.25px) solid $text-primary;
   margin: $spacing-02 0;
-  // Novice to pro does not always use Carbon defaults/tokens
+  // Onboarding does not always use Carbon defaults/tokens
   // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
   animation: fade 600ms;
 

diff --git a/packages/ibm-products/carbon.yml b/packages/ibm-products/carbon.yml
@@ -139,7 +139,7 @@ assets:
       - type: storybook
         name: Storybook
         action: link
-        url: https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-novice-to-pro-checklist--checklist
+        url: https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-onboarding-checklist--checklist
     tags:
       - content-block
   combo-button:

diff --git a/packages/ibm-products/src/components/Carousel/Carousel.stories.jsx b/packages/ibm-products/src/components/Carousel/Carousel.stories.jsx
@@ -31,8 +31,8 @@ export const carousel = Template.bind({});
 carousel.args = {
   children: (
     <>
-      Carousel is a <em>Novice to Pro</em> internal component and is not
-      intended for general use.
+      Carousel is an <em>Onboarding</em> internal component and is not intended
+      for general use.
     </>
   ),
 };
diff --git a/packages/ibm-products/src/components/Carousel/Carousel.tsx b/packages/ibm-products/src/components/Carousel/Carousel.tsx
@@ -70,7 +70,7 @@ const defaults = {
 };
 
 /**
- * The Carousel acts as a scaffold for other Novice to Pro content.
+ * The Carousel acts as a scaffold for other Onboarding content.
  *
  * This component is not intended for general use.
  *

diff --git a/packages/ibm-products/src/components/Checklist/Checklist.mdx b/packages/ibm-products/src/components/Checklist/Checklist.mdx
@@ -8,7 +8,7 @@ import * as CheckListStories from './Checklist.stories';
 ## Table of Contents
 
 - [Overview](#overview)
-- [About Novice to pro](#about-novice-to-pro)
+- [About Onboarding](#about-onboarding)
 - [Example usage](#example-usage)
 - [Component API](#component-api)
 
@@ -18,9 +18,9 @@ The Checklist tracks a user's progress much like Your Learning or WalkMe. Each
 item in the list can be clickable, and each item has an icon that defines the
 item's state as "not started", "in progress", and "complete".
 
-## About Novice to pro
+## About Onboarding
 
-[Novice to pro](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/novice-to-pro/overview/)
+[Onboarding](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/onboarding/overview/)
 is a continuous learning methodology and framework that aims to orient, onboard,
 explain, educate, and cultivate novice users into high-functioning power users.
 

diff --git a/packages/ibm-products/src/components/Checklist/Checklist.stories.jsx b/packages/ibm-products/src/components/Checklist/Checklist.stories.jsx
@@ -60,7 +60,7 @@ const taskLists = [
 ];
 
 export default {
-  title: 'IBM Products/Novice to pro/Checklist',
+  title: 'IBM Products/Onboarding/Checklist',
   component: Checklist,
   tags: ['autodocs'],
   argTypes: {

diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.mdx b/packages/ibm-products/src/components/Coachmark/Coachmark.mdx
@@ -10,7 +10,7 @@ import * as CoachmarkStories from './Coachmark.stories';
 ## Table of Contents
 
 - [Overview](#overview)
-- [About Novice to pro](#about-novice-to-pro)
+- [About Onboarding](#about-onboarding)
 - [Note on theming](#note-on-theming)
 - [Overview](#overview)
 - [Tooltip example usage](#tooltip-example-usage)
@@ -33,9 +33,9 @@ understand.
 - BEACON_KIND, COACHMARK_OVERLAY_KIND, COACHMARK_ALIGNMENT are enums exported as
   a convenience from Coachmark.
 
-## About Novice to pro
+## About Onboarding
 
-[Novice to pro](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/novice-to-pro/overview/)
+[Onboarding](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/onboarding/overview/)
 is a continuous learning methodology and framework that aims to orient, onboard,
 explain, educate, and cultivate novice users into high-functioning power users.
 

diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.stories.jsx b/packages/ibm-products/src/components/Coachmark/Coachmark.stories.jsx
@@ -26,7 +26,7 @@ import mdx from './Coachmark.mdx';
 import styles from './_storybook-styles.scss?inline';
 
 export default {
-  title: 'IBM Products/Novice to pro/Coachmark',
+  title: 'IBM Products/Onboarding/Coachmark',
   component: Coachmark,
   tags: ['autodocs'],
   argTypes: {

diff --git a/packages/ibm-products/src/components/Coachmark/CoachmarkDragbar.tsx b/packages/ibm-products/src/components/Coachmark/CoachmarkDragbar.tsx
@@ -66,7 +66,7 @@ interface CoachmarkDragbarProps {
 
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export let CoachmarkDragbar = React.forwardRef<
   HTMLElement,

diff --git a/packages/ibm-products/src/components/Coachmark/CoachmarkHeader.tsx b/packages/ibm-products/src/components/Coachmark/CoachmarkHeader.tsx
@@ -50,7 +50,7 @@ interface CoachmarkHeaderProps {
 
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export let CoachmarkHeader = React.forwardRef<
   HTMLElement,

diff --git a/packages/ibm-products/src/components/Coachmark/CoachmarkOverlay.tsx b/packages/ibm-products/src/components/Coachmark/CoachmarkOverlay.tsx
@@ -78,7 +78,7 @@ type StyledTune = {
 
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export let CoachmarkOverlay = forwardRef<HTMLDivElement, CoachmarkOverlayProps>(
   (

diff --git a/packages/ibm-products/src/components/Coachmark/CoachmarkTagline.tsx b/packages/ibm-products/src/components/Coachmark/CoachmarkTagline.tsx
@@ -48,7 +48,7 @@ interface CoachmarkTaglineProps {
 
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export let CoachmarkTagline = React.forwardRef<
   HTMLDivElement,

diff --git a/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.mdx b/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.mdx
@@ -8,7 +8,7 @@ import * as CoachmarkBeaconStories from './CoachmarkBeacon.stories';
 ## Table of Contents
 
 - [Overview](#overview)
-- [About Novice to pro](#about-novice-to-pro)
+- [About Onboarding](#about-onboarding)
 - [Note on theming](#note-on-theming)
 - [Example usage](#example-usage)
 - [Code Sample](#code-sample)
@@ -22,9 +22,9 @@ use a pulsing action to call a user’s attention to a specific area in the UI.
 The `target` prop of the Coachmark should always be either a CoachmarkBeacon or
 a CoachmarkButton.
 
-## About Novice to pro
+## About Onboarding
 
-[Novice to pro](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/novice-to-pro/overview/)
+[Onboarding](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/onboarding/overview/)
 is a continuous learning methodology and framework that aims to orient, onboard,
 explain, educate, and cultivate novice users into high-functioning power users.
 

diff --git a/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.stories.jsx b/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.stories.jsx
@@ -22,8 +22,7 @@ import styles from './_storybook-styles.scss?inline';
 import { BEACON_KIND } from '../Coachmark/utils/enums';
 
 export default {
-  title:
-    'IBM Products/Novice to pro/Coachmark/Coachmark elements/CoachmarkBeacon',
+  title: 'IBM Products/Onboarding/Coachmark/Coachmark elements/CoachmarkBeacon',
   component: CoachmarkBeacon,
   tags: ['autodocs'],
   // TODO: Define argTypes for props not represented by standard JS types.

diff --git a/packages/ibm-products/src/components/CoachmarkButton/CoachmarkButton.stories.jsx b/packages/ibm-products/src/components/CoachmarkButton/CoachmarkButton.stories.jsx
@@ -20,8 +20,7 @@ import mdx from './CoachmarkButton.mdx';
 import styles from './_storybook-styles.scss?inline';
 
 export default {
-  title:
-    'IBM Products/Novice to pro/Coachmark/Coachmark elements/CoachmarkButton',
+  title: 'IBM Products/Onboarding/Coachmark/Coachmark elements/CoachmarkButton',
   component: CoachmarkButton,
   tags: ['autodocs'],
   // TODO: Define argTypes for props not represented by standard JS types.

diff --git a/packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.mdx b/packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.mdx
@@ -8,7 +8,7 @@ import * as CoachmarkFixedStories from './CoachmarkFixed.stories';
 ## Table of Contents
 
 - [Overview](#overview)
-- [About Novice to pro](#about-novice-to-pro)
+- [About Onboarding](#about-onboarding)
 - [Note on theming](#note-on-theming)
 - [Example usage](#example-usage)
 - [Component API](#component-api)
@@ -21,9 +21,9 @@ loads. It starts in a minimized state, to cover as little of the UI as possible;
 when shown in tests as expanded by default, users immediately closed it without
 reading, to get it out of the way. When dismissed, it slides down off the page.
 
-## About Novice to pro
+## About Onboarding
 
-[Novice to pro](https://pages.github.ibm.com/security/security-design/teams-across-security/novice-to-pro/overview/)
+[Onboarding](https://pages.github.ibm.com/security/security-design/teams-across-security/onboarding/overview/)
 is a continuous learning methodology and framework that aims to orient, onboard,
 explain, educate, and cultivate novice users into high-functioning power users.
 

diff --git a/packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.stories.jsx b/packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.stories.jsx
@@ -18,7 +18,7 @@ import mdx from './CoachmarkFixed.mdx';
 import styles from './_storybook-styles.scss?inline';
 
 export default {
-  title: 'IBM Products/Novice to pro/Coachmark/CoachmarkFixed',
+  title: 'IBM Products/Onboarding/Coachmark/CoachmarkFixed',
   component: CoachmarkFixed,
   tags: ['autodocs'],
   // TODO: Define argTypes for props not represented by standard JS types.

diff --git a/...ibm-products/src/components/CoachmarkOverlayElement/CoachmarkOverlayElement.mdx b/...ibm-products/src/components/CoachmarkOverlayElement/CoachmarkOverlayElement.mdx
@@ -8,7 +8,7 @@ import * as CoachmarkOverlayElementStories from './CoachmarkOverlayElement.stori
 ## Table of Contents
 
 - [Overview](#overview)
-- [About Novice to pro](#about-novice-to-pro)
+- [About Onboarding](#about-onboarding)
 - [Note on theming](#note-on-theming)
 - [Example usage](#example-usage)
 - [Code Sample](#code-sample)
@@ -24,9 +24,9 @@ CoachmarkOverlayElements. When more than one CoachmarkOverlayElement components
 are used in a CoachmarkOverlayElements, the components are displayed in a
 paginated fashion within a carousel.
 
-## About Novice to pro
+## About Onboarding
 
-[Novice to pro](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/novice-to-pro/overview/)
+[Onboarding](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/onboarding/overview/)
 is a continuous learning methodology and framework that aims to orient, onboard,
 explain, educate, and cultivate novice users into high-functioning power users.
 

diff --git a/...s/ibm-products/src/components/CoachmarkOverlayElement/CoachmarkOverlayElement.stories.jsx b/...s/ibm-products/src/components/CoachmarkOverlayElement/CoachmarkOverlayElement.stories.jsx
@@ -24,7 +24,7 @@ import styles from './_storybook-styles.scss?inline';
 
 export default {
   title:
-    'IBM Products/Novice to pro/Coachmark/Coachmark elements/CoachmarkOverlayElement',
+    'IBM Products/Onboarding/Coachmark/Coachmark elements/CoachmarkOverlayElement',
   component: CoachmarkOverlayElement,
   tags: ['autodocs'],
   argTypes: {

diff --git a/...m-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.mdx b/...m-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.mdx
@@ -8,7 +8,7 @@ import * as CoachmarkOverlayElementsStories from './CoachmarkOverlayElements.sto
 ## Table of Contents
 
 - [Overview](#overview)
-- [About Novice to pro](#about-novice-to-pro)
+- [About Onboarding](#about-onboarding)
 - [Note on theming](#note-on-theming)
 - [Example usage](#example-usage)
 - [Code Sample](#code-sample)
@@ -23,9 +23,9 @@ components as children. When more than one CoachmarkOverlayElement component is
 used in a CoachmarkOverlayElements, the components are displayed in a paginated
 fashion within a carousel.
 
-## About Novice to pro
+## About Onboarding
 
-[Novice to pro](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/novice-to-pro/overview/)
+[Onboarding](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/onboarding/overview/)
 is a continuous learning methodology and framework that aims to orient, onboard,
 explain, educate, and cultivate novice users into high-functioning power users.
 

diff --git a/...ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.stories.jsx b/...ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.stories.jsx
@@ -18,7 +18,7 @@ import styles from './_storybook-styles.scss?inline';
 
 export default {
   title:
-    'IBM Products/Novice to pro/Coachmark/Coachmark elements/CoachmarkOverlayElements',
+    'IBM Products/Onboarding/Coachmark/Coachmark elements/CoachmarkOverlayElements',
   component: CoachmarkOverlayElements,
   tags: ['autodocs'],
   argTypes: {

diff --git a/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.mdx b/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.mdx
@@ -8,7 +8,7 @@ import * as CoachmarkStackStories from './CoachmarkStack.stories';
 ## Table of Contents
 
 - [Overview](#overview)
-- [About Novice to pro](#about-novice-to-pro)
+- [About Onboarding](#about-onboarding)
 - [Note on theming](#note-on-theming)
 - [Example usage](#example-usage)
 - [Component API](#component-api)
@@ -26,9 +26,9 @@ When dismissed, the stacked layer exits by sliding back down, revealing the main
 layer. When the main layer is dismissed, it slides down off the page. Only one
 layer can be stacked on the main layer.
 
-## About Novice to pro
+## About Onboarding
 
-[Novice to pro](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/novice-to-pro/overview)
+[Onboarding](https://pages.github.ibm.com/security/security-design/department/end-to-end-experiences/onboarding/overview)
 is a continuous learning methodology and framework that aims to orient, onboard,
 explain, educate, and cultivate novice users into high-functioning power users.
 

diff --git a/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.stories.jsx b/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.stories.jsx
@@ -19,7 +19,7 @@ import mdx from './CoachmarkStack.mdx';
 import styles from './_storybook-styles.scss?inline';
 
 export default {
-  title: 'IBM Products/Novice to pro/Coachmark/CoachmarkStack',
+  title: 'IBM Products/Onboarding/Coachmark/CoachmarkStack',
   component: CoachmarkStack,
   tags: ['autodocs'],
   // TODO: Define argTypes for props not represented by standard JS types.

diff --git a/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStackHome.js b/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStackHome.js
@@ -27,7 +27,7 @@ const componentName = 'CoachmarkStackHome';
 
 /**
  * DO NOT USE. This component is for the exclusive use
- * of other Novice to Pro components.
+ * of other Onboarding components.
  */
 export let CoachmarkStackHome = forwardRef(
   (
@@ -58,7 +58,7 @@ export let CoachmarkStackHome = forwardRef(
 
     if (!navLinkLabels) {
       return pconsole.warn(
-        `${componentName} is a Novice to Pro internal component and is not intended for general use.`
+        `${componentName} is an Onboarding internal component and is not intended for general use.`
       );
     }