Feature/stencil updates1

package.json

@@ -15,7 +15,9 @@
     "react-sb": "npm run storybook -w packages/react-components",
     "react-build": "npm run build -w packages/react-components",
     "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-generate": "npm run generate -w packages/web-components",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build-all": "npm run vanilla-build && npm run build-pages -w packages/ux-guidelines && npm run build-pages -w packages/vanilla && npm run build-pages -w packages/react-components"
   },

packages/web-components/.gitignore

@@ -24,3 +24,7 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 .env
+
+# Generated files that will cause constant conflicts
+components.d.ts
+readme.md

packages/web-components/.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon"  type="image/x-icon" href="assets/images/cbp-seal.svg">

packages/web-components/.storybook/manager.js

@@ -3,7 +3,7 @@
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming';
 
-import cbpLogo from '../assets/images/CBP_SEAL.svg';
+import cbpLogo from '../assets/images/cbp-seal.svg';
 
 const theme =  create({
   base: 'light',

packages/web-components/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+
+<!-- Loading the CBP DS components as a module allows them to be rebuilt and watched properly -->
+<!--<script type="module" src="../www/build/cbp-web-components.esm.js" /> -->

packages/web-components/package.json

@@ -20,15 +20,15 @@
   ],
   "scripts": {
     "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
+    "start": "stencil build --dev --watch",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "storybook": "storybook dev -p 6008",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@stencil/core": "^4.0.0",
+    "@stencil/core": "^4.7.0",
     "npm": "^10.2.1"
   },
   "devDependencies": {

packages/web-components/src/components/cbp-app/cbp-app.scss

@@ -0,0 +1,4 @@
+@use 'reset.scss';
+@use 'roboto.scss';
+@use 'css-variables.scss';
+@use 'core.scss';

packages/web-components/src/components/cbp-app/cbp-app.tsx

@@ -0,0 +1,24 @@
+import { Component, Host, h } from '@stencil/core';
+
+/*
+  An overarching "app" tag can act as a low-barrier way to get core design system elements (CSS, fonts)
+  as well as a way to manage site/page-level settings such as dark mode.
+*/
+
+@Component({
+  tag: 'cbp-app',
+  styleUrl: 'cbp-app.scss'
+   //this is not working: appears to be a Stencil bug - verify
+  //styleUrls: ['reset.scss', 'roboto.scss', 'css-variables.scss', 'core.scss']
+})
+export class CbpApp {
+
+  render() {
+    return (
+      <Host>
+        <slot />
+      </Host>
+    );
+  }
+
+}

packages/web-components/src/components/cbp-app/core.scss

@@ -0,0 +1,43 @@
+html {
+  font-size: 100%;
+}
+
+body {
+  color: var(--cbp-color-text-darkest);
+  background-color: var(--cbp-color-branding-cbp-light);
+  font: var(--cbp-font-size-body)/1rem var(--cbp-font-family-roboto);
+}
+
+[data-cbp-theme="dark"] body {
+  color: var(--cbp-color-text-lightest);
+  background-color: var(--cbp-color-branding-cbp-dark);
+}
+
+p,
+blockquote,
+ul:not(ul ul):not(ul ol),
+ol:not(ol ol):not(ol ul) {
+  margin-bottom: var(--cbp-space-4x);
+}
+
+// TODO: Should this include blockquote and list items?
+p {
+  line-height: 1.25rem;
+}
+
+a[href],
+button {
+  cursor: pointer;
+}
+
+[aria-disabled=true],
+:disabled,
+input:read-only:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
+textarea:read-only {
+  cursor: not-allowed;
+}
+
+/* Ensure that `hidden` is not overridden by other selectors setting display, such as flex or grid */
+[hidden] {
+  display: none !important;
+}