Skip to content

Commit

Permalink
Merge pull request #224 from US-CBP/feature/api-docs
Browse files Browse the repository at this point in the history
Feature/api docs
  • Loading branch information
dgibson666 authored Oct 31, 2024
2 parents ba90c84 + 95d1dff commit 62126e3
Show file tree
Hide file tree
Showing 86 changed files with 526 additions and 58 deletions.
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -139,4 +139,7 @@ _site
.pnp.*

# .public folder holds all static builds of /packages for github pages artifact
.public
.public

# Personal config files
chromatic.config.json
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"stencil-build": "npm run build -w packages/web-components",
"stencil-start": "npm run start -w packages/web-components",
"stencil-sb": "npm run storybook -w packages/web-components",
"stencil-build-sb": "npm run build-pages -w packages/web-components",
"stencil-generate": "npm run generate -w packages/web-components",
"test": "echo \"Error: no test specified\" && exit 1",
"build-pages": "npm run vanilla-build && npm run build-pages -w packages/vanilla && npm run stencil-build && npm run build-pages -w packages/web-components",
Expand All @@ -25,14 +26,17 @@
},
"repository": {
"type": "git",
"url": "https://github.com/US-CBP/design-system.git"
"url": "git+https://github.com/US-CBP/design-system.git"
},
"keywords": [
"CBP",
"CBP Design System",
"CBP Theme"
],
"author": "Creative Services <CreativeServices@cbp.dhs.gov>",
"author": {
"name": "Creative Services",
"email": "CreativeServices@cbp.dhs.gov"
},
"license": "CC0-1.0",
"bugs": {
"url": "https://github.com/US-CBP/design-system/issues"
Expand Down
11 changes: 7 additions & 4 deletions packages/web-components/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,19 @@ function getAbsolutePath(value) {

/** @type { import('@storybook/web-components-vite').StorybookConfig } */
const config = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
stories: [
'../src/**/*.mdx',
//'../src**/*.md',
'../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
],
addons: [
getAbsolutePath('@storybook/addon-links'),
//getAbsolutePath('@storybook/addon-essentials'),
{
name: getAbsolutePath('@storybook/addon-essentials'),
options: {
actions: false,
},
},
//getAbsolutePath('@chromatic-com/storybook'),
{
name: '@whitespace/storybook-addon-html',
title: 'Code',
Expand All @@ -29,6 +31,7 @@ const config = {
//getAbsolutePath('@storybook/addon-interactions'),
getAbsolutePath('@storybook/addon-a11y'),
getAbsolutePath("@storybook/addon-mdx-gfm"),
//getAbsolutePath('@chromatic-com/storybook'),
'@chromatic-com/storybook'
],
framework: {
Expand All @@ -44,4 +47,4 @@ const config = {
disableTelemetry: true
},
};
export default config;
export default config;
2 changes: 1 addition & 1 deletion packages/web-components/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const preview = {
},
options: {
storySort: {
//method: 'alphabetical',
method: 'alphabetical',
order: [
'Introduction',
'Design Tokens',
Expand Down
11 changes: 6 additions & 5 deletions packages/web-components/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# CHANGELOG

This CHANGELOG.md tracks the updates to the web components package of the CBP design system, which is currently in active development/pre-release alpha state. As such, not all changes will be logged; only new components and breaking changes. As a pre-release, there WILL be breaking changes. Upon official release, this log may be wiped clean and started fresh.
This CHANGELOG.md tracks the updates to the web components package of the CBP design system, which is currently in active development/pre-release alpha state. As such, not all changes will be logged; only new components and breaking changes. As a pre-release, there WILL be breaking changes. Upon official release, this log may be wiped clean and started fresh and [semantic versioning](https://semver.org/) will be followed.

The React components are wrappers generated from this package and will share the same changes.

Expand Down Expand Up @@ -88,19 +88,20 @@ The React components are wrappers generated from this package and will share the

* Set the Stencil config setting `enableImportInjection: true` to support projects using Vite as a bundler and allow lazy loading of components.
* Breaking: Deprecated/removed `cbp-visuallyhidden` since its functionality was included in cbp-hide.
* First cut of cbp-hide, a component that allows content to be programatically hidden (or visually hidden) based on property or media query.
* First cut of `cbp-hide`, a component that allows content to be programmatically hidden (or visually hidden) based on property or media query.
* Updated designs of `cbp-badge`, `cbp-chip`, and `cbp-tag` to use the correct design tokens.
* Updated the cbp-chip component by adding `name` and `value` properties and updating the custom event.
* Updated Template and Universal Header stories to use `cbp-hide` for responsiveness.
* Updated the Template to wrap the Universal Header and Application Header in an HTML5 `header` landmark tag.

## [0.0.1-develop.5] 02-29-2024

* First cut of tabs with responsive behavior: cbp-tabs, cbp-tab, cbp-tab-panel.
* Updates to cbp-button to support responsive tabs controls.
* Fixed cbp-drawer close control.
* First cut of tabs with responsive behavior: `cbp-tabs`, `cbp-tab`, `cbp-tab-panel`.
* Updates to `cbp-button` to support responsive tabs controls.
* Fixed `cbp-drawer` close control.
* Upgraded Stencil to v4.12.3 and enabled new `slot` fixes.

## [0.0.1-develop.4] 01-08-2024

* Created CHANGELOG.md to start tracking changes during beta for pilot projects.
* Added cbp-drawer backdrop.
186 changes: 186 additions & 0 deletions packages/web-components/config-file.schema.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"$id": "https://www.chromatic.com/config-file.schema.json",
"additionalProperties": false,
"$defs": {
"string-or-boolean": {
"anyOf": [
{
"type": "string"
},
{
"type": "boolean"
}
]
},
"array-of-strings": {
"type": "array",
"items": {
"type": "string"
}
}
},
"description": "Configuration schema for visual testing tool Chromatic",
"title": "Chromatic Config File Schema",
"type": "object",
"properties": {
"$schema": {
"type": "string",
"description": "The schema file (https://www.chromatic.com/docs/chromatic-config.schema.json)"
},
"autoAcceptChanges": {
"$ref": "#/$defs/string-or-boolean",
"description": "If there are any changes to the build, automatically accept them. Only for given branch, if specified.",
"markdownDescription": "If there are any changes to the build, automatically accept them. Only for given branch, if specified.\n"
},
"buildCommand": {
"type": "string",
"description": "The command that builds your Storybook. Use this if your Storybook build command does not exist in the \"scripts\" field of your package.json.Requires --output-dir.",
"markdownDescription": "The command that builds your Storybook. Use this if your Storybook build command does not exist in the \"scripts\" field of your package.json.<br/>Requires `--output-dir`.\n"
},
"buildScriptName": {
"type": "string",
"description": "The npm script that builds your Storybook. Use this if your Storybook build script is named differently.",
"markdownDescription": "The npm script that builds your Storybook. Use this if your Storybook build script is named differently.\n",
"default": "build-storybook"
},
"debug": {
"type": "boolean",
"description": "Output verbose debugging information. This option implies interactive: false",
"markdownDescription": "Output verbose debugging information. This option implies `interactive: false`\n"
},
"diagnosticsFile": {
"$ref": "#/$defs/string-or-boolean",
"description": "When enabled, write process context information to a JSON file.Defaults to chromatic-diagnostics.json",
"markdownDescription": "When enabled, write process context information to a JSON file.<br/>Defaults to `chromatic-diagnostics.json`\n"
},
"exitOnceUploaded": {
"$ref": "#/$defs/string-or-boolean",
"description": "Exit with status 0 (OK) once the built version has been published to Chromatic. Only for given branch, if specified.",
"markdownDescription": "Exit with status `0` (OK) once the built version has been published to Chromatic. Only for given branch, if specified.\n"
},
"exitZeroOnChanges": {
"$ref": "#/$defs/string-or-boolean",
"description": "If all snapshots render, but there are visual changes, exit with code 0 rather than the usual exit code 1. Only for given branch, if specified.",
"markdownDescription": "If all snapshots render, but there are visual changes, exit with code `0` rather than the usual exit code `1`. Only for given branch, if specified.\n"
},
"externals": {
"$ref": "#/$defs/array-of-strings",
"description": "Disable TurboSnap when any of these files have changed since the baseline build.Requires onlyChanged.",
"markdownDescription": "Disable [TurboSnap](https://www.chromatic.com/docs/turbosnap) when any of these files have changed since the baseline build.<br/>Requires `onlyChanged`.\n"
},
"ignoreLastBuildOnBranch": {
"type": "string",
"description": "Do not use the last build on this branch as a baseline if it is no longer in history (i.e., the branch was rebased).",
"markdownDescription": "Do not use the last build on this branch as a baseline if it is no longer in history (i.e., the branch was rebased).\n"
},
"junitReport": {
"$ref": "#/$defs/string-or-boolean",
"description": "When enabled, write the build results to a JUnit XML file.Defaults to chromatic-build-{buildNumber}.xml where the {buildNumber} will be replaced with the actual build number.",
"markdownDescription": "When enabled, write the build results to a JUnit XML file.<br/>Defaults to `chromatic-build-{buildNumber}.xml` where the `{buildNumber}` will be replaced with the actual build number.\n"
},
"logFile": {
"$ref": "#/$defs/string-or-boolean",
"description": "Write CLI logs to a file. Defaults to chromatic.log",
"markdownDescription": "Write CLI logs to a file. Defaults to `chromatic.log`\n"
},
"fileHashing": {
"type": "boolean",
"description": "Enabling this option will turn off the built-in file hashing mechanism, leading to all the files being uploaded to Chromatic on every build.",
"markdownDescription": "Enabling this option will turn off the built-in file hashing mechanism, leading to all the files being uploaded to Chromatic on every build.\n"
},
"onlyChanged": {
"$ref": "#/$defs/string-or-boolean",
"description": "Enables TurboSnap.Runs Chromatic for stories affected by files and dependencies that have changed since the baseline build, including the specified branch if provided.",
"markdownDescription": "Enables [TurboSnap](https://www.chromatic.com/docs/turbosnap).<br/>Runs Chromatic for stories affected by files and dependencies that have changed since the baseline build, including the specified branch if provided.\n"
},
"onlyStoryFiles": {
"$ref": "#/$defs/array-of-strings",
"description": "Only run a single story or a subset of stories by their filename(s). Specify the full path to the story file relative to the root of your Storybook project.",
"markdownDescription": "Only run a single story or a subset of stories by their filename(s). Specify the full path to the story file relative to the root of your Storybook project.\n"
},
"onlyStoryNames": {
"$ref": "#/$defs/array-of-strings",
"description": "Only run a single story or a subset of stories by their name.",
"markdownDescription": "Only run a single story or a subset of stories by their name.\n"
},
"outputDir": {
"type": "string",
"description": "Relative path to target directory for building your Storybook. Use this if you want to preserve it for other tasks.",
"markdownDescription": "Relative path to target directory for building your Storybook. Use this if you want to preserve it for other tasks.\n"
},
"projectId": {
"type": "string",
"description": "The unique identifier for your project, sometimes referred to as appId.",
"markdownDescription": "The unique identifier for your project, sometimes referred to as `appId`.\n"
},
"projectToken": {
"type": "string",
"deprecated": true,
"description": "DEPRECATED The secret token for your project. Prefer to use CHROMATIC_PROJECT_TOKEN instead if you can.",
"markdownDescription": "DEPRECATED The secret token for your project. Prefer to use `CHROMATIC_PROJECT_TOKEN` instead if you can.\n"
},
"skip": {
"$ref": "#/$defs/string-or-boolean",
"description": "Skip Chromatic tests, but mark the commit as passing. It avoids blocking PRs due to required merge checks. Only for given branch, if specified.",
"markdownDescription": "Skip Chromatic tests, but mark the commit as passing. It avoids blocking PRs due to required merge checks. Only for given branch, if specified.\n"
},
"skipUpdateCheck": {
"type": "boolean",
"description": "Skips Chromatic CLI update check.",
"markdownDescription": "Skips Chromatic CLI update check.\n"
},
"storybookBaseDir": {
"type": "string",
"description": "Relative path from repository root to Storybook project root.Use with onlyChanged and storybookBuildDir when your Storybook is located in a subdirectory of your repository.",
"markdownDescription": "Relative path from repository root to Storybook project root.<br/>Use with `onlyChanged` and `storybookBuildDir` when your Storybook is located in a subdirectory of your repository.\n"
},
"storybookBuildDir": {
"type": "string",
"description": "If you have already built your Storybook, provide the path to the static build directory.",
"markdownDescription": "If you have already built your Storybook, provide the path to the static build directory.\n"
},
"storybookConfigDir": {
"type": "string",
"description": "Relative path from where you run Chromatic to your Storybook config directory.Use with onlyChanged and storybookBuildDir when using a custom --config-dir flag for Storybook.",
"markdownDescription": "Relative path from where you run Chromatic to your Storybook config directory.<br/>Use with `onlyChanged` and `storybookBuildDir` when using a custom [`--config-dir`](https://storybook.js.org/docs/api/cli-options#build) flag for Storybook.\n",
"default": ".storybook"
},
"storybookLogFile": {
"$ref": "#/$defs/string-or-boolean",
"description": "Write Storybook build logs to a custom file path.",
"markdownDescription": "Write Storybook build logs to a custom file path.\n",
"default": "build-storybook.log"
},
"traceChanged": {
"$ref": "#/$defs/string-or-boolean",
"description": "Print dependency trace for changed files to affected story files. Set to \"expanded\" to list individual modules.Requires onlyChanged.",
"markdownDescription": "Print dependency trace for changed files to affected story files. Set to \"expanded\" to list individual modules.<br/>Requires `onlyChanged`.\n"
},
"untraced": {
"$ref": "#/$defs/array-of-strings",
"description": "Disregard these files and their dependencies when tracing dependent stories for TurboSnap.Requires onlyChanged.",
"markdownDescription": "Disregard these files and their dependencies when tracing dependent stories for [TurboSnap](https://www.chromatic.com/docs/turbosnap).<br/>Requires `onlyChanged`.\n"
},
"uploadMetadata": {
"type": "boolean",
"description": "Upload Chromatic metadata files as part of the published Storybook. This option implies diagnosticsFile: true and logFile: true",
"markdownDescription": "Upload Chromatic metadata files as part of the published Storybook. This option implies `diagnosticsFile: true` and `logFile: true`\n"
},
"zip": {
"type": "boolean",
"description": "Publish your Storybook to Chromatic as a single zip file instead of individual content files.",
"markdownDescription": "Publish your Storybook to Chromatic as a single zip file instead of individual content files.\n"
},
"playwright": {
"type": "boolean",
"description": "Use your Playwright tests to power visual tests with Chromatic. Learn more",
"markdownDescription": "Use your Playwright tests to power visual tests with Chromatic. [Learn more](https://www.chromatic.com/docs/playwright)\n"
},
"cypress": {
"type": "boolean",
"description": "Use your Cypress tests to power visual tests with Chromatic. Learn more",
"markdownDescription": "Use your Cypress tests to power visual tests with Chromatic. [Learn more](https://www.chromatic.com/docs/cypress)\n"
}
}
}
2 changes: 1 addition & 1 deletion packages/web-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"generate": "stencil generate",
"storybook": "stencil build --docs && storybook dev -p 6006",
"build-storybook": "storybook build",
"build-pages": "storybook build --output-dir storybook-static"
"build-pages": "stencil build --docs && storybook build --output-dir storybook-static"
},
"dependencies": {
"@stencil/core": "4.15.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Meta, Markdown } from "@storybook/blocks";
import AccordionDocs from './readme.md?raw';
import AccordionItemDocs from '../cbp-accordion-item/readme.md?raw';

<Meta title="Components/Accordion/API Docs" />

<Markdown>{AccordionDocs}</Markdown>

<Markdown>{AccordionItemDocs}</Markdown>
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default {
title: 'Components/Accordion',
tags: ['autodocs'],
//tags: ['autodocs'],
argTypes: {
items: {
name: 'Accordion Items',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { Meta, Markdown } from "@storybook/blocks";
import Docs from './readme.md?raw';

<Meta title="Components/Action Bar/API Docs" />

<Markdown>{Docs}</Markdown>
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default {
title: 'Components/Action Bar',
tags: ['autodocs'],
//tags: ['autodocs'],
argTypes: {

variant: {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { Meta, Markdown } from "@storybook/blocks";
import Docs from './readme.md?raw';

<Meta title="Components/Application Header/API Docs" />

<Markdown>{Docs}</Markdown>
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default {
title: 'Components/Application Header',
tags: ['autodocs'],
//tags: ['autodocs'],
parameters: {
layout: 'fullscreen',
},
Expand Down
6 changes: 6 additions & 0 deletions packages/web-components/src/components/cbp-app/api-docs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { Meta, Markdown } from "@storybook/blocks";
import Docs from './readme.md?raw';

<Meta title="Components/App/API Docs" />

<Markdown>{Docs}</Markdown>
6 changes: 6 additions & 0 deletions packages/web-components/src/components/cbp-badge/api-docs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { Meta, Markdown } from "@storybook/blocks";
import Docs from './readme.md?raw';

<Meta title="Components/Badge/API Docs" />

<Markdown>{Docs}</Markdown>
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default {
title: 'Components/Badge',
tags: ['autodocs'],
//tags: ['autodocs'],
argTypes: {
label: {
name: 'label (slotted)',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { Meta, Markdown } from "@storybook/blocks";
import Docs from './readme.md?raw';

<Meta title="Components/Banner/API Docs" />

<Markdown>{Docs}</Markdown>
Loading

0 comments on commit 62126e3

Please sign in to comment.