CityOfDetroit · sreidthomas · Dec 21, 2024 · Dec 21, 2024
diff --git a/build/experimental/assets/js/main.js b/build/experimental/assets/js/main.js
diff --git a/build/experimental/assets/js/runtime.js b/build/experimental/assets/js/runtime.js
diff --git a/build/experimental/assets/js/vendors.babel.js b/build/experimental/assets/js/vendors.babel.js
diff --git a/build/experimental/assets/js/vendors.maplibre-gl.js b/build/experimental/assets/js/vendors.maplibre-gl.js
diff --git a/build/experimental/index.html b/build/experimental/index.html
@@ -0,0 +1 @@
+<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/vendors.babel.js"></script><script defer="defer" src="assets/js/vendors.maplibre-gl.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   "scripts": {
     "check-lint-config": "npx eslint-config-prettier src/index.js",
     "lint": "eslint src && prettier --check src/*",
-    "build": "webpack --mode production",
+    "build:experimental": "webpack --mode production",
     "build-package": "cross-env BABEL_ENV=production babel src -d dist",
     "start": "webpack-dev-server --mode development",
     "storybook": "storybook dev -p 6006",

diff --git a/src/index.js → src/index-experimental.js b/src/index.js → src/index-experimental.js
diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx
@@ -134,6 +134,24 @@ While viewing a component, to the right of the Canvas there is a tabbed Panel wh
 - **Accessibilty** - displays a11y violations of WCAG 2.0 Levels A and AA, WCAG 2.1 Level AA, Section 508, and other best practices through the aXe accessibilty engine.
   Display options and keyboard shortcuts are available via the Ellipsis Menu Icon next to the COD UXDS logo at the top of the sidebar.
 
+<h2>Experimental Components</h2>
+
+<p>
+  The COD UXDS Storybook now includes an Experimental section. These components
+  are in development and should be considered unstable. They are provided for
+  preview and testing purposes only. Please note:
+</p>
+
+<ul>
+  <li>Experimental components are not considered stable.</li>
+  <li>Use these components at your own risk.</li>
+  <li>They may undergo significant changes or be removed without notice.</li>
+  <li>
+    We do not recommend using experimental components in production
+    environments.
+  </li>
+</ul>
+
 <div className="subheading">Configure</div>
 
 <div className="link-list">

diff --git a/src/stories/accordion.stories.js b/src/stories/accordion.stories.js
@@ -5,7 +5,7 @@ import '../components/atoms/AccordionItem/cod-accordion-item';
 import '../components/molecules/Accordion/cod-accordion';
 
 export default {
-  title: 'Components/Molecules/Accordion',
+  title: 'Experimental/Molecules/Accordion',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/actionbutton.stories.js b/src/stories/actionbutton.stories.js
@@ -5,7 +5,7 @@ import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
   component: 'cod-action-button',
-  title: 'Components/Atoms/ActionButton',
+  title: 'Experimental/Atoms/ActionButton',
   // 👇 Creates specific argTypes
   argTypes: {
     // TODO: Make this attr name and accepted

diff --git a/src/stories/actionbuttonV2.stories.js b/src/stories/actionbuttonV2.stories.js
@@ -5,7 +5,7 @@ import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
   component: 'cod-action-button-v2',
-  title: 'Components/Atoms/ActionButtonV2',
+  title: 'Experimental/Atoms/ActionButtonV2',
   // 👇 Creates specific argTypes
   argTypes: {
     // TODO: Make this attr name and accepted

diff --git a/src/stories/alert.stories.js b/src/stories/alert.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/Alert/cod-alert';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Alert',
+  title: 'Experimental/Atoms/Alert',
   argTypes: {
     icon: COMMON_STORY_ARGS.icon,
     iconOrder: COMMON_STORY_ARGS.order,

diff --git a/src/stories/articlecard.stories.js b/src/stories/articlecard.stories.js
@@ -2,7 +2,7 @@ import '../components/organisms/ArticleCard/cod-article-card';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Organisms/ArticleCard',
+  title: 'Experimental/Organisms/ArticleCard',
   argTypes: {
     href: {
       control: { type: 'text' },

diff --git a/src/stories/badge.stories.js b/src/stories/badge.stories.js
@@ -3,7 +3,7 @@ import '../components/atoms/Badge/cod-badge';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Badge',
+  title: 'Experimental/Atoms/Badge',
   argTypes: {
     tag: {
       control: { type: 'select' },

diff --git a/src/stories/breadcrumb.stories.js b/src/stories/breadcrumb.stories.js
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import '../components/atoms/Breadcrumb/cod-breadcrumb';
 
 export default {
-  title: 'Components/Atoms/Breadcrumb',
+  title: 'Experimental/Atoms/Breadcrumb',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/button.stories.js b/src/stories/button.stories.js
@@ -3,7 +3,7 @@ import '../components/atoms/Icon/cod-icon';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Button',
+  title: 'Experimental/Atoms/Button',
   argTypes: {
     primary: {
       control: { type: 'boolean' },

diff --git a/src/stories/buttongroup.stories.js b/src/stories/buttongroup.stories.js
@@ -4,7 +4,7 @@ import '../components/atoms/Button/cod-button';
 import '../components/atoms/FormCheck/cod-formcheck';
 
 export default {
-  title: 'Components/Molecules/ButtonGroup',
+  title: 'Experimental/Molecules/ButtonGroup',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/calendar.stories.js b/src/stories/calendar.stories.js
@@ -1,7 +1,7 @@
 import '../components/organisms/Calendar/cod-calendar';
 
 export default {
-  title: 'Components/Organisms/Calendar',
+  title: 'Experimental/Organisms/Calendar',
   argTypes: {
     events: {
       control: { type: 'text' },

diff --git a/src/stories/card.stories.js b/src/stories/card.stories.js
@@ -7,7 +7,7 @@ import '../components/organisms/Card/cod-card';
 import '../components/atoms/Button/cod-button';
 
 export default {
-  title: 'Components/Organisms/Card',
+  title: 'Experimental/Organisms/Card',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/carousel.stories.js b/src/stories/carousel.stories.js
@@ -5,7 +5,7 @@ import '../components/organisms/Carousel/cod-carousel';
 import '../components/atoms/Button/cod-button';
 
 export default {
-  title: 'Components/Organisms/Carousel',
+  title: 'Experimental/Organisms/Carousel',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/container.stories.js b/src/stories/container.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/Container/cod-container';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Container',
+  title: 'Experimental/Atoms/Container',
   argTypes: {
     type: {
       control: { type: 'select' },

diff --git a/src/stories/countdown.stories.js b/src/stories/countdown.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/Countdown/cod-countdown';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Countdown',
+  title: 'Experimental/Atoms/Countdown',
   argTypes: {
     size: {
       control: { type: 'select' },

diff --git a/src/stories/dropdown.stories.js b/src/stories/dropdown.stories.js
@@ -4,7 +4,7 @@ import '../components/atoms/DropdownMenu/cod-dropdown-menu';
 import '../components/atoms/Button/cod-button';
 
 export default {
-  title: 'Components/Molecules/Dropdown',
+  title: 'Experimental/Molecules/Dropdown',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/form.stories.js b/src/stories/form.stories.js
@@ -2,7 +2,7 @@ import '../components/organisms/Form/cod-form';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Forms/FormValidation',
+  title: 'Experimental/FormValidation',
   argTypes: {
     backgroundColor: COMMON_STORY_ARGS.bootstrapColor,
   },

diff --git a/src/stories/formcheck.stories.js b/src/stories/formcheck.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/FormCheck/cod-formcheck';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Forms/FormCheck',
+  title: 'Experimental/FormCheck',
   argTypes: {
     backgroundColor: COMMON_STORY_ARGS.bootstrapColor,
     btnColor: COMMON_STORY_ARGS.bootstrapColor,

diff --git a/src/stories/formcheckgroup.stories.js b/src/stories/formcheckgroup.stories.js
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import '../components/molecules/FormCheckGroup/cod-form-check-group';
 
 export default {
-  title: 'Forms/FormCheckGroup',
+  title: 'Experimental/FormCheckGroup',
 };
 
 export const RadioGroup = () => html`

diff --git a/src/stories/formcontrol.stories.js b/src/stories/formcontrol.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/FormControl/cod-formcontrol';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Forms/FormControl',
+  title: 'Experimental/FormControl',
   argTypes: {
     backgroundColor: COMMON_STORY_ARGS.bootstrapColor,
     // TODO: Add support for xl to make size

diff --git a/src/stories/formlabel.stories.js b/src/stories/formlabel.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/FormLabel/cod-formlabel';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Forms/FormLabel',
+  title: 'Experimental/FormLabel',
   argTypes: {
     color: COMMON_STORY_ARGS.bootstrapColor,
     required: COMMON_STORY_ARGS.required,

diff --git a/src/stories/formselect.stories.js b/src/stories/formselect.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/FormSelect/cod-formselect';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Forms/FormSelect',
+  title: 'Experimental/FormSelect',
   argTypes: {
     // TODO: Add support for xl to make size
     // consistent. Issue #202.

diff --git a/src/stories/geocoder.stories.js b/src/stories/geocoder.stories.js
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import '../components/organisms/Geocoder/cod-geocoder';
 
 export default {
-  title: 'Components/Organisms/geocoder',
+  title: 'Experimental/Organisms/geocoder',
 };
 
 export const loaded = () => html`<cod-geocoder></cod-geocoder>`;
diff --git a/src/stories/icon.stories.js b/src/stories/icon.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/Icon/cod-icon';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Icon',
+  title: 'Experimental/Atoms/Icon',
   argTypes: {
     icon: COMMON_STORY_ARGS.icon,
     size: COMMON_STORY_ARGS.longSize,

diff --git a/src/stories/image.stories.js b/src/stories/image.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/Image/cod-image';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Image',
+  title: 'Experimental/Atoms/Image',
   argTypes: {
     align: {
       control: { type: 'select' },

diff --git a/src/stories/imgslider.stories.js b/src/stories/imgslider.stories.js
@@ -4,7 +4,7 @@ import img2 from './assets/example-image2.svg';
 import '../components/organisms/ImgSlider/cod-img-slider';
 
 export default {
-  title: 'Components/Organisms/ImgSlider',
+  title: 'Experimental/Organisms/ImgSlider',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/infobutton.stories.js b/src/stories/infobutton.stories.js
@@ -4,7 +4,7 @@ import '../components/atoms/InfoButton/cod-info-button';
 
 export default {
   component: 'cod-info-button',
-  title: 'Components/Atoms/InfoButton',
+  title: 'Experimental/Atoms/InfoButton',
   // 👇 Creates specific argTypes
   argTypes: {
     titlePrimary: {

diff --git a/src/stories/legacybutton.stories.js b/src/stories/legacybutton.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/LegacyButton/cod-legacy-button';
 import { html } from 'lit-html';
 
 export default {
-  title: 'Components/Atoms/LegacyButton',
+  title: 'Experimental/Atoms/LegacyButton',
   argTypes: {
     icon: {
       control: { type: 'select' },

diff --git a/src/stories/legacyicon.stories.js b/src/stories/legacyicon.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/LegacyIcon/cod-legacy-icon';
 import { html } from 'lit-html';
 
 export default {
-  title: 'Components/Atoms/LegacyIcon',
+  title: 'Experimental/Atoms/LegacyIcon',
   argTypes: {
     icon: {
       control: { type: 'select' },

diff --git a/src/stories/listgroup.stories.js b/src/stories/listgroup.stories.js
@@ -3,7 +3,7 @@ import '../components/atoms/ListGroupItem/cod-listgroup-item';
 import '../components/molecules/ListGroup/cod-listgroup';
 
 export default {
-  title: 'Components/Molecules/ListGroup',
+  title: 'Experimental/Molecules/ListGroup',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/loader.stories.js b/src/stories/loader.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/Loader/cod-loader';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Loader',
+  title: 'Experimental/Atoms/Loader',
   argTypes: {
     // TODO: Use bootstrap color names. Issue #202.
     backgroundColor: COMMON_STORY_ARGS.numberColor,

diff --git a/src/stories/map.stories.js b/src/stories/map.stories.js
diff --git a/src/stories/modal.stories.js b/src/stories/modal.stories.js
@@ -6,7 +6,7 @@ import '../components/organisms/Modal/cod-modal';
 import '../components/atoms/Button/cod-button';
 
 export default {
-  title: 'Components/Organisms/Modal',
+  title: 'Experimental/Organisms/Modal',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/nav.stories.js b/src/stories/nav.stories.js
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import '../components/molecules/Nav/cod-nav';
 
 export default {
-  title: 'Components/Molecules/Nav',
+  title: 'Experimental/Molecules/Nav',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/navbar.stories.js b/src/stories/navbar.stories.js
@@ -9,7 +9,7 @@ import '../components/atoms/DropdownMenu/cod-dropdown-menu';
 import '../components/atoms/Button/cod-button';
 
 export default {
-  title: 'Components/Organisms/Navbar',
+  title: 'Experimental/Organisms/Navbar',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/offcanvas.stories.js b/src/stories/offcanvas.stories.js
@@ -4,7 +4,7 @@ import '../components/atoms/OffcanvasBody/cod-offcanvas-body';
 import '../components/organisms/Offcanvas/cod-offcanvas';
 
 export default {
-  title: 'Components/Organisms/Offcanvas',
+  title: 'Experimental/Organisms/Offcanvas',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/pagination.stories.js b/src/stories/pagination.stories.js
@@ -3,7 +3,7 @@ import '../components/atoms/PaginationItem/cod-pagination-item';
 import '../components/molecules/Pagination/cod-pagination';
 
 export default {
-  title: 'Components/Molecules/Pagination',
+  title: 'Experimental/Molecules/Pagination',
 };
 
 export const Basic = () => html`

diff --git a/src/stories/progress.stories.js b/src/stories/progress.stories.js
@@ -2,7 +2,7 @@ import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 import '../components/atoms/Progress/cod-progress';
 
 export default {
-  title: 'Components/Atoms/Progress',
+  title: 'Experimental/Atoms/Progress',
   argTypes: {
     backgroundColor: COMMON_STORY_ARGS.bootstrapColor,
   },

diff --git a/src/stories/range.stories.js b/src/stories/range.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/Range/cod-range';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Forms/Range',
+  title: 'Experimental/Atoms/Forms/Range',
   argTypes: {
     disable: COMMON_STORY_ARGS.disabled,
   },

diff --git a/src/stories/spinner.stories.js b/src/stories/spinner.stories.js
@@ -2,7 +2,7 @@ import '../components/atoms/Spinner/cod-spinner';
 import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
-  title: 'Components/Atoms/Spinner',
+  title: 'Experimental/Atoms/Spinner',
   argTypes: {
     type: {
       control: { type: 'select' },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/vendors.babel.js"></script><script defer="defer" src="assets/js/vendors.maplibre-gl.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>