diff --git a/.gitignore b/.gitignore
index 15092eff35..e0fa50cb9c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@ docs/assets/javascript/elements/**/*.js
docs/_plugins/**/*.js
docs/_includes/**/*.js
docs/_data/playgrounds.json
+docs/_data/*.js
docs/assets/javascript/elements/playground-elements.js
docs/assets/javascript/elements/assets/playground-typescript-worker-*.js
docs/assets/javascript/environment.js
diff --git a/docs/_data/repoStatus.ts b/docs/_data/repoStatus.ts
new file mode 100644
index 0000000000..3e2813c1dc
--- /dev/null
+++ b/docs/_data/repoStatus.ts
@@ -0,0 +1,506 @@
+/**
+ * Guidelines:
+ * Creating repoStatus data for a new component
+ *
+ * - tagName: rh-jazz-hands
+ * name: Jazz hands - name should match the same format as sidenav, typically uppercase first word rest lower.
+ * type: element # element | hidden
+ * overallStatus: ready # na | planned | ready
+ * libraries: - Dict of 4 name/status key values pairs (Figma library, RH Elements, RH Shared Libs, Documentation)
+ * figma: ready # ready | planned | na
+ * ...
+ *
+*/
+
+export type RepoStatus =
+ | 'planned'
+ | 'inProgress'
+ | 'ready'
+ | 'deprecated'
+ | 'na'
+ | 'beta'
+ | 'experimental'
+ | 'new';
+
+export interface RepoStatusLibraryRecord {
+ figma: RepoStatus;
+ rhds: RepoStatus;
+ shared: RepoStatus;
+ docs: RepoStatus;
+}
+
+export interface RepoStatusRecord {
+ tagName: `rh-${string}`;
+ type: 'element' | 'pattern' | 'hidden';
+ /** pretty name, as appears in sidenav */
+ name: string;
+ /** Appears on the header of the docs page */
+ description?: string;
+ /** Controls the optional appearance of status tags in listings such as sidenav */
+ overallStatus: RepoStatus;
+ /** Controls the content of the repo status table element on docs pages */
+ libraries: RepoStatusLibraryRecord;
+}
+
+export default [
+ {
+ tagName: 'rh-accordion',
+ name: 'Accordion',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-alert',
+ name: 'Alert',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-audio-player',
+ name: 'Audio player',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-avatar',
+ name: 'Avatar',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-back-to-top',
+ name: 'Back to top',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'planned',
+ docs: 'inProgress',
+ },
+ },
+ {
+ tagName: 'rh-badge',
+ name: 'Badge',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-blockquote',
+ name: 'Blockquote',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-breadcrumb',
+ name: 'Breadcrumb',
+ type: 'element',
+ overallStatus: 'new',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'planned',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-button',
+ name: 'Button',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-cta',
+ name: 'Call to action',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-card',
+ name: 'Card',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-code-block',
+ name: 'Code block',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-dialog',
+ name: 'Dialog',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-footer',
+ name: 'Footer',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-footnote',
+ name: 'Footnote',
+ type: 'element',
+ overallStatus: 'planned',
+ libraries: {
+ figma: 'planned',
+ rhds: 'planned',
+ shared: 'planned',
+ docs: 'planned',
+ },
+ },
+ {
+ tagName: 'rh-health-index',
+ name: 'Health index',
+ type: 'element',
+ overallStatus: 'new',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'planned',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-icon',
+ name: 'Icon',
+ type: 'element',
+ overallStatus: 'new',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'planned',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-jump-links',
+ name: 'Jump links',
+ type: 'element',
+ overallStatus: 'planned',
+ libraries: {
+ figma: 'na',
+ rhds: 'na',
+ shared: 'na',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-menu',
+ name: 'Menu',
+ type: 'hidden',
+ description: 'A subcomponent of rh-audio-player, hidden from end users.',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'planned',
+ docs: 'planned',
+ },
+ },
+ {
+ tagName: 'rh-navigation-primary',
+ name: 'Navigation (primary)',
+ type: 'element',
+ description: `The Primary navigation is a container of menus and utilities, it allows visitors to orient themselves and move through a website. It is persistent on every page to ensure a consistent user experience across websites.`,
+ overallStatus: 'planned',
+ libraries: {
+ figma: 'planned',
+ rhds: 'planned',
+ shared: 'planned',
+ docs: 'planned',
+ },
+ },
+ {
+ tagName: 'rh-navigation-secondary',
+ name: 'Navigation (secondary)',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-pagination',
+ name: 'Pagination',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-popover',
+ name: 'Popover',
+ type: 'element',
+ overallStatus: 'ready',
+ description: `A Popover displays content in a non-modal dialog and adds contextual information or provides resources via text and links.`,
+ libraries: {
+ figma: 'ready',
+ rhds: 'planned',
+ shared: 'planned',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-progress-steps',
+ name: 'Progress steps',
+ type: 'element',
+ overallStatus: 'ready',
+ description: `Progress steps guide a user through a task with multiple sequential steps toward the completion of a linear process.`,
+ libraries: {
+ figma: 'ready',
+ rhds: 'planned',
+ shared: 'planned',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-skip-link',
+ name: 'Skip link',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'planned',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-site-status',
+ name: 'Site status',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'planned',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-spinner',
+ name: 'Spinner',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-stat',
+ name: 'Statistic',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-subnav',
+ name: 'Subnavigation',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-surface',
+ name: 'Surface',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-switch',
+ name: 'Switch',
+ type: 'element',
+ overallStatus: 'new',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'planned',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-table',
+ name: 'Table',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-tabs',
+ name: 'Tabs',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-tag',
+ name: 'Tag',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'inProgress',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-tile',
+ name: 'Tile',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-timestamp',
+ name: 'Timestamp',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-tooltip',
+ name: 'Tooltip',
+ type: 'element',
+ overallStatus: 'ready',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'ready',
+ docs: 'ready',
+ },
+ },
+ {
+ tagName: 'rh-video-embed',
+ name: 'Video embed',
+ type: 'element',
+ overallStatus: 'new',
+ libraries: {
+ figma: 'ready',
+ rhds: 'ready',
+ shared: 'planned',
+ docs: 'ready',
+ },
+ },
+] satisfies RepoStatusRecord[];
diff --git a/docs/_data/repoStatus.yaml b/docs/_data/repoStatus.yaml
deleted file mode 100644
index c84a9ed51d..0000000000
--- a/docs/_data/repoStatus.yaml
+++ /dev/null
@@ -1,364 +0,0 @@
-# Guidelines:
-# Creating repoStatus data for a new component
-#
-# - tagName: rh-jazz-hands
-# name: Jazz hands - name should match the same format as sidenav, typically uppercase first word rest lower.
-# type: element # element | hidden
-# overallStatus: ready # na | planned | ready
-# libraries: - Dict of 4 name/status key values pairs (Figma library, RH Elements, RH Shared Libs, Documentation)
-# figma: ready # ready | planned | na
-# ...
-#
-- tagName: rh-accordion
- name: Accordion
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-alert
- name: Alert
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-audio-player
- name: Audio player
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-avatar
- name: Avatar
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-back-to-top
- name: Back to top
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: planned
- docs: inProgress
-- tagName: rh-badge
- name: Badge
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-blockquote
- name: Blockquote
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-breadcrumb
- name: Breadcrumb
- type: element
- overallStatus: new
- libraries:
- figma: ready
- rhds: ready
- shared: planned
- docs: ready
-- tagName: rh-button
- name: Button
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-cta
- name: Call to action
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-card
- name: Card
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-code-block
- name: Code block
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-dialog
- name: Dialog
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-footer
- name: Footer
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-footnote
- name: Footnote
- type: element
- overallStatus: planned
- libraries:
- figma: planned
- rhds: planned
- shared: planned
- docs: planned
-- tagName: rh-health-index
- name: Health index
- type: element
- overallStatus: new
- libraries:
- figma: ready
- rhds: ready
- shared: planned
- docs: ready
-- tagName: rh-icon
- name: Icon
- type: element
- overallStatus: new
- libraries:
- figma: ready
- rhds: ready
- shared: planned
- docs: ready
-- tagName: rh-jump-links
- name: Jump links
- type: element
- overallStatus: planned
- libraries:
- figma: na
- rhds: na
- shared: na
- docs: ready
-- tagName: rh-menu
- name: Menu
- type: hidden
- description: A subcomponent of rh-audio-player, hidden from end users.
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: planned
- docs: planned
-- tagName: rh-navigation-primary
- name: Navigation (primary)
- type: element
- description: >
- The Primary navigation is a container of menus and utilities, it allows
- visitors to orient themselves and move through a website. It is persistent
- on every page to ensure a consistent user experience across websites.
- overallStatus: planned
- libraries:
- figma: planned
- rhds: planned
- shared: planned
- docs: planned
-- tagName: rh-navigation-secondary
- name: Navigation (secondary)
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-pagination
- name: Pagination
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-popover
- name: Popover
- type: element
- overallStatus: ready
- description: >
- A Popover displays content in a non-modal dialog and adds contextual
- information or provides resources via text and links.
- libraries:
- figma: ready
- rhds: planned
- shared: planned
- docs: ready
-- tagName: rh-progress-steps
- name: Progress steps
- type: element
- overallStatus: ready
- description: >
- Progress steps guide a user through a task with multiple sequential steps
- toward the completion of a linear process.
- libraries:
- figma: ready
- rhds: planned
- shared: planned
- docs: ready
-- tagName: rh-skip-link
- name: Skip link
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: planned
- docs: ready
-- tagName: rh-site-status
- name: Site status
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: planned
- docs: ready
-- tagName: rh-spinner
- name: Spinner
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-stat
- name: Statistic
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-subnav
- name: Subnavigation
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-surface
- name: Surface
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-switch
- name: Switch
- type: element
- overallStatus: new
- libraries:
- figma: ready
- rhds: ready
- shared: planned
- docs: ready
-- tagName: rh-table
- name: Table
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-tabs
- name: Tabs
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-tag
- name: Tag
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: inProgress
- docs: ready
-- tagName: rh-tile
- name: Tile
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-timestamp
- name: Timestamp
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-tooltip
- name: Tooltip
- type: element
- overallStatus: ready
- libraries:
- figma: ready
- rhds: ready
- shared: ready
- docs: ready
-- tagName: rh-video-embed
- name: Video embed
- type: element
- overallStatus: new
- libraries:
- figma: ready
- rhds: ready
- shared: planned
- docs: ready
diff --git a/docs/_plugins/element-docs.ts b/docs/_plugins/element-docs.ts
index c2632e3220..acc66bdab8 100644
--- a/docs/_plugins/element-docs.ts
+++ b/docs/_plugins/element-docs.ts
@@ -1,6 +1,5 @@
///
import type { UserConfig } from '@11ty/eleventy';
-import type { TagStatus } from '#uxdot/uxdot-repo.js';
import slugify from 'slugify';
import { basename, dirname, join, sep } from 'node:path';
import { glob, readFile, readdir, stat } from 'node:fs/promises';
@@ -8,7 +7,8 @@ import { deslugify, getPfeConfig } from '@patternfly/pfe-tools/config.js';
import { getAllManifests } from '@patternfly/pfe-tools/custom-elements-manifest/custom-elements-manifest.js';
import { capitalize } from '#11ty-plugins/tokensHelpers.js';
import { DocsPage } from '@patternfly/pfe-tools/11ty/DocsPage.js';
-import yaml from 'js-yaml';
+
+import repoStatus from '#11ty-data/repoStatus.js';
interface ElementDocsPageTabData {
url: string;
@@ -64,8 +64,6 @@ export interface ElementDocsPageData extends ElementDocsPageFileSystemData {
const cwd = process.cwd();
const pfeconfig = getPfeConfig();
-const repoStatus: TagStatus[] =
- yaml.load(await readFile(join(cwd, './docs/_data/repoStatus.yaml'), 'utf8')) as TagStatus[]; ;
const isElementSource = (x: string) => x && x.startsWith('rh-') && !x.endsWith('.d.ts');
const stripExtension = (x: string) => x?.split('.').shift();
diff --git a/docs/_plugins/rhds.ts b/docs/_plugins/rhds.ts
index 1cfc0538d3..eb60a5c5f8 100644
--- a/docs/_plugins/rhds.ts
+++ b/docs/_plugins/rhds.ts
@@ -2,7 +2,7 @@ import type { UserConfig } from '@11ty/eleventy';
import * as ChildProcess from 'node:child_process';
import { join, dirname } from 'node:path';
import { promisify } from 'node:util';
-import { readdir, readFile, writeFile, mkdir } from 'node:fs/promises';
+import { readdir, writeFile, mkdir } from 'node:fs/promises';
import { makeDemoEnv } from '#scripts/environment.js';
import yaml from 'js-yaml';
@@ -15,10 +15,7 @@ import RHDSElementDemosPlugin from '#11ty-plugins/element-demos.js';
import { getPfeConfig } from '@patternfly/pfe-tools/config.js';
import { capitalize } from '#11ty-plugins/tokensHelpers.js';
-const repoStatus = yaml.load(await readFile(
- new URL('../_data/repoStatus.yaml', import.meta.url),
- 'utf8',
-));
+import repoStatus from '#11ty-data/repoStatus.js';
const exec = promisify(ChildProcess.exec);
const cwd = process.cwd();
@@ -85,10 +82,14 @@ interface Options {
}
export default async function(eleventyConfig: UserConfig, options?: Options) {
- eleventyConfig.on('eleventy.before', async ({ directories }) => {
+ eleventyConfig.on('eleventy.before', async ({ runMode, directories }) => {
const outPath = join(directories.output, 'assets/javascript/repoStatus.json');
- await mkdir(dirname(outPath), { recursive: true });
- await writeFile(outPath, JSON.stringify(repoStatus), 'utf8');
+ switch (runMode) {
+ case 'watch':
+ case 'build':
+ await mkdir(dirname(outPath), { recursive: true });
+ await writeFile(outPath, JSON.stringify(repoStatus), 'utf8');
+ }
});
/** add the normalized pfe-tools config to global data */
diff --git a/eleventy.config.ts b/eleventy.config.ts
index 52741fbdb7..894ac4105b 100644
--- a/eleventy.config.ts
+++ b/eleventy.config.ts
@@ -86,7 +86,7 @@ export default async function(eleventyConfig: UserConfig) {
}
eleventyConfig.addWatchTarget('docs/styles/');
- eleventyConfig.addWatchTarget('docs/patterns/**/*.md');
+ eleventyConfig.addWatchTarget('docs/**/*.md');
eleventyConfig.addGlobalData('isLocal', isLocal);
diff --git a/package.json b/package.json
index 4bd1bee3f0..b176f57a16 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"#scripts/*": "./scripts/*",
"#uxdot/*": "./uxdot/*",
"#11ty-plugins/*": "./docs/_plugins/*",
+ "#11ty-data/*": "./docs/_data/*",
"#eleventy.config": "./eleventy.config.ts"
},
"contributors": [
diff --git a/uxdot/repoStatus.ts b/uxdot/repoStatus.ts
deleted file mode 100644
index 874629c457..0000000000
--- a/uxdot/repoStatus.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { TagStatus } from './uxdot-repo.js';
-
-import { join, dirname } from 'node:path';
-import { readFile } from 'node:fs/promises';
-import { fileURLToPath } from 'node:url';
-import yaml from 'js-yaml';
-
-const rootDir = fileURLToPath(dirname(import.meta.resolve('@rhds/elements')));
-const text = await readFile(join(rootDir, 'docs/_data/repoStatus.yaml'), 'utf8');
-export default yaml.load(text) as TagStatus[];
diff --git a/uxdot/tsconfig.json b/uxdot/tsconfig.json
index 93e0117542..501ec7c129 100644
--- a/uxdot/tsconfig.json
+++ b/uxdot/tsconfig.json
@@ -5,7 +5,8 @@
"include": [
"./**/*",
"../declaration.d.ts",
- "../docs/11ty-types.d.ts"
+ "../docs/11ty-types.d.ts",
+ "../docs/_data/repoStatus.ts"
],
"compilerOptions": {
"composite": true
diff --git a/uxdot/uxdot-repo.ts b/uxdot/uxdot-repo.ts
index 03af51a3b1..51db376f3f 100644
--- a/uxdot/uxdot-repo.ts
+++ b/uxdot/uxdot-repo.ts
@@ -1,3 +1,4 @@
+import type { RepoStatus, RepoStatusRecord } from '#11ty-data/repoStatus.js';
import { isServer, LitElement } from 'lit';
type Color = 'purple' | 'green' | 'orange' | 'gray' | 'cyan';
@@ -10,21 +11,6 @@ type LibraryKey =
| 'shared'
| 'docs';
-type StatusKey =
-| 'planned'
-| 'inProgress'
-| 'ready'
-| 'deprecated'
-| 'na'
-| 'beta'
-| 'experimental'
-| 'new';
-
-type OverallStatusKey =
-| 'ready'
-| 'new'
-| 'planned';
-
interface Status {
pretty: string;
description?: string;
@@ -39,15 +25,6 @@ interface LibraryStatus {
status: string;
}
-export interface TagStatus {
- tagName: string;
- name: string;
- type: string;
- description?: string;
- overallStatus: OverallStatusKey;
- libraries: Record;
-}
-
interface ComputedLibraryStatus extends LibraryStatus {
name: string;
color: Color;
@@ -57,7 +34,7 @@ interface ComputedLibraryStatus extends LibraryStatus {
description: string;
}
-export interface ComputedTagStatus extends Omit {
+export interface ComputedTagStatus extends Omit {
color: Color;
variant: Variant;
icon: Icon;
@@ -65,8 +42,8 @@ export interface ComputedTagStatus extends Omit {
libraries: ComputedLibraryStatus[];
}
-const repoStatus: TagStatus[] =
- isServer ? await import('./repoStatus.js').then(x => x.default)
+const repoStatus: RepoStatusRecord[] =
+ isServer ? await import('#11ty-data/repoStatus.js').then(x => x.default)
: await fetch('/assets/javascript/repoStatus.json').then(x => x.json());
export class UxdotRepoElement extends LitElement {
@@ -77,7 +54,7 @@ export class UxdotRepoElement extends LitElement {
docs: 'Documentation',
};
- private static legend: Record = {
+ private static legend: Record = {
planned: {
pretty: 'Planned',
description: 'Ready to be worked on or ready to be released',
@@ -133,7 +110,7 @@ export class UxdotRepoElement extends LitElement {
},
};
- private static checklist: Record> = {
+ private static checklist: Record> = {
figma: {
ready: 'Component is available in the Figma library',
inProgress: 'Component will be added to the Figma library when finished',
@@ -178,8 +155,8 @@ export class UxdotRepoElement extends LitElement {
private static allStatus: ComputedTagStatus[] = repoStatus.map(UxdotRepoElement.getStatus);
- private static getStatus(status: TagStatus) {
- const libraries = Object.entries(status.libraries) as [LibraryKey, StatusKey][];
+ private static getStatus(status: RepoStatusRecord) {
+ const libraries = Object.entries(status.libraries) as [LibraryKey, RepoStatus][];
const overall = UxdotRepoElement.legend[status.overallStatus];
return {
...status!,