OUTLINE-165: Creating ready to develop placeholders for upcoming components

.changeset/config.json

@@ -7,5 +7,18 @@
   "access": "restricted",
   "baseBranch": "next",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": [
+    "@phase2/outline-core-accordion",
+    "@phase2/outline-core-alert",
+    "@phase2/outline-core-breadcrumb",
+    "@phase2/outline-core-card",
+    "@phase2/outline-core-container",
+    "@phase2/outline-core-form",
+    "@phase2/outline-core-icon",
+    "@phase2/outline-core-image",
+    "@phase2/outline-core-list",
+    "@phase2/outline-core-modal",
+    "@phase2/outline-core-text",
+    "@phase2/outline-core-youtube"
+  ]
 }

.storybook/main.js

@@ -12,7 +12,9 @@ module.exports = {
     '../packages/outline-docs/src/guides/tooling/**/*.mdx',
     // Documentation stories.
     '../packages/outline-docs/src/guides/**/*.@(js|ts|mdx)',
-    // Component stories.
+    // Modern component stories.
+    '../packages/**/docs/*.mdx',
+    // Old component stories.
     '../packages/outline-storybook/stories/**/*.stories.@(js|ts|mdx)',
   ],
   typescript: {

packages/outline-core-accordion/docs/outline-core-accordion.mdx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Accordion"
+  component="outline-core-accordion"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-accordion](https://img.shields.io/npm/v/@phase2/outline-core-accordion)](https://www.npmjs.com/package/@phase2/outline-core-accordion)
+
+# `<outline-core-accordion>` `OutlineCoreAccordion`
+
+The `outline-core-accordion` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-accordion`** component
+
+
+## Usage
+
+## CSS Variables
+

packages/outline-core-accordion/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreAccordion component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreAccordion } from '@phase2/outline-core-accordion';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-accordion';
+ * import type { ThingType } from '@phase2/outline-core-accordion';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreAccordion } from './src/outline-core-accordion';
+
+// Export any additional sub-components, variables and methods as required.

packages/outline-core-accordion/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-accordion",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-accordion"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "^0.2.3",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}

packages/outline-core-accordion/src/config.ts

@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-accordion` component.
+ */

packages/outline-core-accordion/src/outline-core-accordion.css

@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-accordion.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/

packages/outline-core-accordion/src/outline-core-accordion.ts

@@ -0,0 +1,42 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// Our base component, which all others extend.
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-accordion.css.lit';
+
+/** The element name, reused throughout the codebase */
+const componentName = 'outline-core-accordion';
+
+/**
+ *
+ * The Outline Core Accordion component
+ *
+ * @element outline-core-accordion
+ * @extends OutlineElement
+ * @slot - The default slot for this element.
+ *
+ * @todo: Complete component.
+ * @todo: Update `../docs/outline-core-accordion.mdx` to accurately document the component.
+ * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Update `package.json` to remove the `private` flag.
+ * @todo: Update `.changeset/config.json` to remove this component from the `ignore` list.
+ * @todo: Create PR for updated and completed component.
+ */
+@customElement(componentName)
+export class OutlineCoreAccordion extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  render(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [componentName]: OutlineCoreAccordion;
+  }
+}

packages/outline-core-accordion/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

packages/outline-core-alert/docs/outline-core-alert.mdx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+import '@phase2/outline-alert';
+
+<Meta
+  title="In Progress/Alert"
+  component="outline-core-alert"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+[![Latest version for outline-core-alert](https://img.shields.io/npm/v/@phase2/outline-core-alert)](https://www.npmjs.com/package/@phase2/outline-core-alert)
+
+# `<outline-core-alert>` `OutlineCoreAlert`
+
+The `outline-core-alert` component ...
+
+<outline-alert status="warning" size="large">
+  <span slot="header">Documentation Status: @TODO</span>
+  <p>This documentation is in need of completion as the component is built out.</p>
+  <ul>
+    <li>**@todo:** Complete component.</li>
+    <li>**@todo:** Update documentation.</li>
+  </ul>
+</outline-alert>
+<br />
+
+## Introduction to the **`outline-core-alert`** component
+
+
+## Usage
+
+## CSS Variables
+

packages/outline-core-alert/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreAlert component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreAlert } from '@phase2/outline-core-alert';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-alert';
+ * import type { ThingType } from '@phase2/outline-core-alert';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreAlert } from './src/outline-core-alert';
+
+// Export any additional sub-components, variables and methods as required.

packages/outline-core-alert/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@phase2/outline-core-alert",
+  "private": true,
+  "version": "0.0.0",
+  "description": "The Outline Components for the image component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-alert"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "^0.2.3",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}

packages/outline-core-alert/src/config.ts

@@ -0,0 +1,3 @@
+/**
+ * @file Shared configuration for the `outline-core-alert` component.
+ */

packages/outline-core-alert/src/outline-core-alert.css

@@ -0,0 +1,33 @@
+/* 
+Styles for `outline-core-alert.css`
+
+=== REMOVE BELOW THIS LINE (AFTER READING) ===
+@todo: Extrapolate these comments/documentation to a more official location
+Add any component level, structural CSS for the `COMPONENT-NAME` component.
+This would be CSS that is targeted to this component only, 
+and is dependent on the HTML structure of the component that 
+is encapsulated in the component's Shadow DOM.
+--- 
+Shoud the need arise to style the component based on slotted content 
+with an unknown markup structure provided by the consuming application 
+in the Light DOM via slots provided by the component, 
+consider the following best practices:
+
+The root element of a `slot` should either be 
+- Semantically expected tag at the top level 
+  - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot.
+  - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot.
+- A custom element that provides its own styling and encapsulation
+  - `outline-core-card` would be a component example that
+    - Provides its own styling and encapsulation to handle functionality and responsive behaviors
+    - And also either:
+      - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 
+      - Allows for slotted content to be styled by the consuming application
+
+Upcoming work will allow for the "styling by the consuming application" option to be more easily 
+implemented in a standardized and simplified way.
+
+When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 
+and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file.
+=== REMOVE ABOVE THIS LINE (AFTER YOU READ IT) ===
+*/