Improve Spright documentation in Storybook and README

packages/spright-components/README.md

@@ -6,6 +6,15 @@
 
 [![NPM Version](https://img.shields.io/npm/v/@ni/spright-components.svg)](https://www.npmjs.com/package/@ni/spright-components)
 
-NI-styled web components following [Nimble Design System](https://nimble.ni.dev) patterns but not part of the core design system.
+NI-styled web components following [Nimble Design System](https://nimble.ni.dev) patterns and built on the same technologies (FAST, native web components, etc.), but not part of the core design system.
 
-The `spright-components` package is intended for components that do not belong in [`nimble-components`](/packages/nimble-components) due to being: ["molecules"](https://atomicdesign.bradfrost.com/chapter-2/), product-specific, data-connected, or not "general utility". The primary component implementations are built on Nimble technologies (FAST, native web components, etc).
+The `spright-components` package is intended for components that do not belong in [`nimble-components`](/packages/nimble-components) due to being: ["molecules"](https://atomicdesign.bradfrost.com/chapter-2/), product-specific, data-connected, or not "general utility". Some examples:
+
+-   Molecule: a group of card buttons with a specific layout
+-   Product-specific: a configuration pane that uses product-specific terminology or connects to a product-specific data model
+-   Data-connected: a table that populates itself by making HTTP requests to a specific service
+-   Experimental components that are trying out new UX patterns to see if they should someday be promoted to Nimble.
+
+## Why Spright?
+
+"Spright" is an archaic variant of "sprite" that is the root of "sprightly"; think of it as a rapidly moving peer of Nimble.

packages/storybook/.storybook/main.js

@@ -6,6 +6,7 @@ import TerserPlugin from 'terser-webpack-plugin';
 // All files participating in storybook should be in src
 // so that TypeScript and linters can track them correctly
 export const stories = [
+    '../src/docs',
     '../src/nimble',
     '../src/spright'
 ];

packages/storybook/README.md

@@ -4,5 +4,5 @@ Private package containing the Storybook for the Nimble repo.
 
 ## Contributing
 
-See `Getting Started` in [`CONTRIBUTING.md`](/CONTRIBUTING.md#getting-started) to get started with building
+See `Getting Started` in [`CONTRIBUTING.md`](/packages/storybook/CONTRIBUTING.md) to get started with building
 and running storybook.

packages/storybook/src/nimble/patterns/docs/component-apis-link.mdx → packages/storybook/src/docs/component-apis-link.mdx

@@ -1 +1,5 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Patterns/all/component-apis-link" />
+
 For more information about the structure of Nimble APIs, see [Component APIs](?path=/docs/component-apis--docs).

packages/storybook/src/nimble/tests/component-status.stories.ts → packages/storybook/src/docs/component-status.stories.ts

@@ -11,7 +11,7 @@ import { ComponentFrameworkStatus } from './types';
 import {
     createUserSelectedThemeStory,
     fastParameters
-} from '../../utilities/storybook';
+} from '../utilities/storybook';
 
 const statusOptions = ['active', 'future'] as const;
 

packages/storybook/src/nimble/tests/internal.mdx → packages/storybook/src/docs/internal.mdx

@@ -5,4 +5,4 @@ import { Meta } from '@storybook/addon-docs';
 # Internal
 
 🙈 Nothing to see here! The **Internal** section contains stories that are used by other documentation.
-It's hidden from public documentation on nimble.ni.dev.
+It's hidden from public documentation on [nimble.ni.dev](https://nimble.ni.dev/storybook).

packages/storybook/src/nimble/tests/nimble-intro.mdx → packages/storybook/src/docs/nimble-intro.mdx

@@ -10,13 +10,15 @@ import nimbleLogo from './nimble-logo-icon.svg';
 
 ## Overview
 
-The [Nimble Design System](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/) is an easy to use collection of well-designed,
+The Nimble Design System is an easy to use collection of well-designed,
 styled components that can be used in any NI web application.
 
+Outside the core design system, the [Spright component collection](https://github.com/ni/nimble/tree/main/packages/spright-components/README.md) is home to more complex, experimental, or application-specific components.
+
 Refer to the
 [Nimble GitHub repository](https://github.com/ni/nimble) for documentation on using or
-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).
+contributing to the component libraries. To add or update component design documentation,
+refer to the [documentation guide](https://github.com/ni/nimble/tree/main/packages/storybook/CONTRIBUTING.md).
 
 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!
 

packages/storybook/src/nimble/tests/patterns.mdx → packages/storybook/src/docs/patterns.mdx

@@ -5,4 +5,4 @@ import { Meta } from '@storybook/addon-docs';
 # Patterns
 
 🙈 Nothing to see here! The **Patterns** section contains shared documentation snippets for shared implementation patterns.
-It's hidden from public documentation on nimble.ni.dev.
+It's hidden from public documentation on [nimble.ni.dev](https://nimble.ni.dev/storybook).

packages/storybook/src/docs/spright.mdx

@@ -0,0 +1,14 @@
+import { Story, Meta } from '@storybook/addon-docs';
+
+<Meta title="Spright/Docs" />
+
+# Spright components
+
+These components adhere to Nimble's styling and API conventions, but are not part of the core design system due to having one or more of the following characteristics:
+
+- more complex ["molecules"](https://atomicdesign.bradfrost.com/chapter-2/) composed of Nimble "atom" components
+- inherently product-specific in a way that makes reuse by other applications unlikely
+- data-connected
+- otherwise lacking general utility
+
+Spright components are production-quality, but may not have the same level of documentation or cross-framework support as Nimble components.

packages/storybook/src/docs/tests-spright.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Tests Spright/Docs" />
+
+# Tests Spright
+
+🙈 Nothing to see here! The **Tests Spright** section contains stories that are used by Nimble for visual comparison testing.
+It's hidden from public documentation on [nimble.ni.dev](https://nimble.ni.dev/storybook).

packages/storybook/src/nimble/tests/tests.mdx → packages/storybook/src/docs/tests.mdx

@@ -5,4 +5,4 @@ import { Meta } from '@storybook/addon-docs';
 # Tests
 
 🙈 Nothing to see here! The **Tests** section contains stories that are used by Nimble for visual comparison testing.
-It's hidden from public documentation on nimble.ni.dev.
+It's hidden from public documentation on [nimble.ni.dev](https://nimble.ni.dev/storybook).

packages/storybook/src/nimble/menu-button/menu-button.mdx

@@ -1,7 +1,7 @@
 import { Controls, Canvas, Meta, Title } from '@storybook/blocks';
 import ContentHiddenDocs from '../patterns/button/content-hidden-docs.mdx';
 import StylingDocs from '../patterns/button/styling-docs.mdx';
-import ComponentApisLink from '../patterns/docs/component-apis-link.mdx';
+import ComponentApisLink from '../../docs/component-apis-link.mdx';
 import { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';
 import * as menuButtonStories from './menu-button.stories';
 

packages/storybook/src/nimble/menu/menu.mdx

@@ -1,6 +1,6 @@
 import { Controls, Canvas, Meta, Title } from '@storybook/blocks';
 import TargetDocs from '../patterns/anchor/target-docs.mdx';
-import ComponentApisLink from '../patterns/docs/component-apis-link.mdx';
+import ComponentApisLink from '../../docs/component-apis-link.mdx';
 import * as menuStories from './menu.stories';
 import { menuTag } from '@ni/nimble-components/dist/esm/menu';
 import { menuItemTag } from '@ni/nimble-components/dist/esm/menu-item';