ni · jattasNI · Mar 31, 2023 · Jan 11, 2023 · Mar 22, 2023 · Mar 24, 2023
diff --git a/change/@ni-nimble-components-1fb65473-c803-4f85-ad46-02ad52a5b22b.json b/change/@ni-nimble-components-1fb65473-c803-4f85-ad46-02ad52a5b22b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add missing anchored region import to menu component",
+  "packageName": "@ni/nimble-components",
+  "email": "jattasNI@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/.babelrc.json b/packages/nimble-components/.babelrc.json
@@ -0,0 +1,15 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": []
+}
@@ -1,9 +1,6 @@
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
 module.exports = {
-    core: {
-        builder: 'webpack5'
-    },
     stories: ['../src/**/*.stories.@(ts|mdx)', '../docs/**/*.stories.mdx'],
     addons: [
         {
@@ -12,14 +9,9 @@ module.exports = {
                 outline: false
             }
         },
-        'storybook-addon-xd-designs',
         '@storybook/addon-a11y',
         '@storybook/addon-interactions'
     ],
-    features: {
-        previewCsfV3: true,
-        previewMdx2: true
-    },
     webpackFinal: config => {
         config.module.rules.push({
             test: /\.ts$/,
@@ -38,8 +30,11 @@ module.exports = {
         config.performance = {
             hints: false
         };
-
         return config;
     },
-    staticDirs: ['public']
+    staticDirs: ['public'],
+    framework: {
+        name: '@storybook/html-webpack5',
+        options: {}
+    }
 };
@@ -14,7 +14,6 @@ Add a `docs.description.component` string to the component `parameters` object.
 ```ts
 const metadata: Meta<ComponentArgs> = {
     title: 'SomeComponent',
-    decorators: [withXD],
     parameters: {
         docs: {
             description: {

@@ -35,7 +35,6 @@ Refer to the
 contributing to the component library. To add or update component design documentation, 
 refer to the [documentation guide](https://github.com/ni/nimble/tree/main/packages/nimble-components/docs/creating-storybook-component-documentation.md).
 
-/* The following links only works when published to Chomatic or GitHub Pages, not when running Storybook locally */
 See the <a href="./example-client-app" target="_blank">example Angular app</a> or <a href="./blazor-client-app/wwwroot" target="_blank">example Blazor app</a> using the components!
 
 ## How to use this site?
@@ -45,12 +44,10 @@ design system components.
 
 <img src={overviewImage} width="100%"/>
 
-- **Canvas** tab (**#1**) to preview isolated components and use the **Docs** tab to review 
+- Browse or search the components tree (**#1**) to preview isolated components and use the **Docs** item to review 
 component-specific design and technical usage information. 
-- **… menu** (**#3**) to open and position the addons pane (**#4**). 
+- **⚙ menu** (**#2**) to open and position the addons pane (**#3**). 
     - **Controls** tab to interactively configure the component.
     - **Actions** tab to review events sent by the component.
-    - **XD Design** tab to review the component design page.
     - **Accessibility** tab to check the component for accessibility issues.
-    - **Interactions** tab to simulate component interactions.
-- **Background** toolbar button (**#2**) to switch the preview between supported component themes.
+- **Background** toolbar button (**#4**) to switch the preview between supported component themes.
@@ -12,8 +12,8 @@
     "prettier-fix": "prettier-eslint \"**/*.*\" --write --prettier-ignore",
     "pack": "npm pack",
     "invoke-publish": "npm publish",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o dist/storybook --webpack-stats-json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o dist/storybook",
     "storybook-open-webkit": "playwright wk http://localhost:6006",
     "build-components": "tsc -p ./tsconfig.json",
     "build-components:watch": "tsc -p ./tsconfig.json -w",
@@ -71,25 +71,25 @@
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
-    "@mdx-js/react": "^2.2.1",
+    "@babel/preset-typescript": "^7.18.6",
     "@ni/eslint-config-javascript": "^4.2.0",
     "@ni/eslint-config-typescript": "^4.2.0",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-terser": "^0.4.0",
-    "@storybook/addon-a11y": "^6.5.10",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-docs": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/addons": "^6.5.10",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/html": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/mdx2-csf": "^0.0.4",
-    "@storybook/theming": "^6.5.10",
+    "@storybook/addon-a11y": "^7.0.0-rc.8",
+    "@storybook/addon-actions": "^7.0.0-rc.8",
+    "@storybook/addon-docs": "^7.0.0-rc.8",
+    "@storybook/addon-essentials": "^7.0.0-rc.8",
+    "@storybook/addon-interactions": "^7.0.0-rc.8",
+    "@storybook/addon-links": "^7.0.0-rc.8",
+    "@storybook/addons": "^7.0.0-rc.8",
+    "@storybook/cli": "^7.0.0-rc.8",
+    "@storybook/csf": "0.0.2-next.10",
+    "@storybook/html": "^7.0.0-rc.8",
+    "@storybook/html-webpack5": "^7.0.0-rc.8",
+    "@storybook/theming": "^7.0.0-rc.8",
     "@types/jasmine": "^4.3.1",
     "@types/webpack-env": "^1.15.2",
     "babel-loader": "^ 9.1.2",
@@ -114,9 +114,12 @@
     "prettier": "^2.0.0",
     "prettier-eslint": "^15.0.1",
     "prettier-eslint-cli": "^7.1.0",
+    "puppeteer": "^10.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^3.10.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "storybook-addon-xd-designs": "^6.0.0",
+    "storybook": "^7.0.0-rc.8",
     "ts-loader": "^9.2.5",
     "typescript": "~4.6.4",
     "webpack": "^5.75.0",

@@ -1,5 +1,4 @@
-import type { Meta, Story } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
+import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
 import { pascalCase } from '@microsoft/fast-web-utilities';
 import {
@@ -23,7 +22,7 @@ import { iconArrowExpanderRightTag } from '../../icons/arrow-expander-right';
 
 const metadata: Meta = {
     title: 'Tests/Anchor Button',
-    decorators: [withXD],
+
     parameters: {
         ...sharedMatrixParameters(),
         design: {
@@ -75,7 +74,7 @@ const component = (
     </${anchorButtonTag}>
 `;
 
-export const anchorButtonThemeMatrix: Story = createMatrixThemeStory(
+export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
         disabledStates,
         appearanceStates,
@@ -84,15 +83,15 @@ export const anchorButtonThemeMatrix: Story = createMatrixThemeStory(
     ])
 );
 
-export const hiddenAnchorButton: Story = createStory(
+export const hiddenAnchorButton: StoryFn = createStory(
     hiddenWrapper(
         html`<${anchorButtonTag} hidden
             >Hidden Anchor Button</${anchorButtonTag}
         >`
     )
 );
 
-export const textCustomized: Story = createMatrixThemeStory(
+export const textCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
         html`<${anchorButtonTag}>Anchor Button</${anchorButtonTag}>`
     )

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
+
 import { html, when } from '@microsoft/fast-element';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import {
@@ -33,7 +33,8 @@ interface AnchorButtonArgs {
 
 const metadata: Meta<AnchorButtonArgs> = {
     title: 'Anchor Button',
-    decorators: [withXD],
+    tags: ['autodocs'],
+
     parameters: {
         docs: {
             description: {

@@ -1,5 +1,4 @@
 import type { Meta, Story } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
 import {
     createMatrixThemeStory,
@@ -19,7 +18,6 @@ import { buttonTag } from '../../button';
 
 const metadata: Meta = {
     title: 'Tests/Anchor Tabs',
-    decorators: [withXD],
     parameters: {
         ...sharedMatrixParameters(),
         design: {

@@ -1,6 +1,5 @@
 import { html, when } from '@microsoft/fast-element';
 import type { Meta, StoryObj } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { anchorTabsTag } from '..';
 import { anchorTabTag } from '../../anchor-tab';
@@ -21,7 +20,8 @@ tab panels hosted on the same page.`;
 
 const metadata: Meta<TabsArgs> = {
     title: 'Anchor Tabs',
-    decorators: [withXD],
+    tags: ['autodocs'],
+
     parameters: {
         docs: {
             description: {

@@ -1,5 +1,4 @@
-import type { Meta, Story } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
+import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate } from '@microsoft/fast-element';
 import { pascalCase } from '@microsoft/fast-web-utilities';
 import {
@@ -18,9 +17,12 @@ import { anchorTag } from '..';
 
 const metadata: Meta = {
     title: 'Tests/Anchor',
-    decorators: [withXD],
+
     parameters: {
         ...sharedMatrixParameters(),
+        docs: {
+            autodocs: false
+        },
         design: {
             artboardUrl:
                 'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/bfadf499-caf5-4ca0-9814-e777fbae0d46/specs/'
@@ -61,23 +63,23 @@ const component = (
             ${() => `${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
 `;
 
-export const anchorThemeMatrix: Story = createMatrixThemeStory(
+export const anchorThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
         disabledStates,
         underlineHiddenStates,
         appearanceStates
     ])
 );
 
-export const hiddenAnchor: Story = createStory(
+export const hiddenAnchor: StoryFn = createStory(
     hiddenWrapper(html`<${anchorTag} hidden>Hidden Anchor</${anchorTag}>`)
 );
 
-export const textCustomized: Story = createMatrixThemeStory(
+export const textCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(html`<${anchorTag}>Link</${anchorTag}>`)
 );
 
-export const textWrapping: Story = createStory(
+export const textWrapping: StoryFn = createStory(
     // prettier-ignore
     html`
     <p style="width: 300px; border: 1px solid black">

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
+
 import { html } from '@microsoft/fast-element';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { AnchorAppearance } from '../types';
@@ -21,7 +21,8 @@ interface AnchorArgs {
 
 const metadata: Meta<AnchorArgs> = {
     title: 'Anchor',
-    decorators: [withXD],
+    tags: ['autodocs'],
+
     parameters: {
         docs: {
             description: {

@@ -1,4 +1,4 @@
-import type { Meta, Story } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate } from '@microsoft/fast-element';
 import {
     createMatrix,
@@ -93,11 +93,11 @@ const component = (
         <div></div>
     </div>`;
 
-export const anchoredRegionThemeMatrix: Story = createStory(
+export const anchoredRegionThemeMatrix: StoryFn = createStory(
     createMatrix(component, [horizontalPositionStates, verticalPositionStates])
 );
 
-export const hiddenAnchoredRegion: Story = createStory(
+export const hiddenAnchoredRegion: StoryFn = createStory(
     hiddenWrapper(
         html`<${anchoredRegionTag} hidden>Hidden Anchored Region</${anchoredRegionTag}>`
     )

@@ -1,5 +1,4 @@
 import type { Story, Meta } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
 import { pascalCase } from '@microsoft/fast-web-utilities';
 import {
@@ -21,7 +20,6 @@ import { iconKeyTag } from '../../icons/key';
 
 const metadata: Meta = {
     title: 'Tests/Banner',
-    decorators: [withXD],
     parameters: {
         ...sharedMatrixParameters(),
         design: {

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/html';
-import { withXD } from 'storybook-addon-xd-designs';
 import { html, when } from '@microsoft/fast-element';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { BannerSeverity } from '../types';
@@ -42,7 +41,7 @@ should be spaced apart using the \`${bannerGapSize.cssCustomProperty}\` design t
 
 const metadata: Meta<BannerArgs> = {
     title: 'Banner',
-    decorators: [withXD],
+    tags: ['autodocs'],
     parameters: {
         docs: {
             description: {
@@ -87,7 +86,7 @@ export const _banner: StoryObj<BannerArgs> = {
         </${bannerTag}>
 `),
     // eslint-disable-next-line storybook/no-redundant-story-name
-    storyName: 'Banner',
+    name: 'Banner',
     argTypes: {
         open: {
             description: 'Controls whether the banner is visible.'