diff --git a/.changeset/config.json b/.changeset/config.json index 15e3060d4..42b7c627c 100644 --- a/.changeset/config.json +++ b/.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" + ] } diff --git a/.storybook/main.js b/.storybook/main.js index d9add3219..3b5973e64 100644 --- a/.storybook/main.js +++ b/.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: { diff --git a/packages/outline-core-accordion/docs/outline-core-accordion.mdx b/packages/outline-core-accordion/docs/outline-core-accordion.mdx new file mode 100644 index 000000000..1f3e581a9 --- /dev/null +++ b/packages/outline-core-accordion/docs/outline-core-accordion.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![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) + +# `` `OutlineCoreAccordion` + +The `outline-core-accordion` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+ + +
+ +## Introduction to the **`outline-core-accordion`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-accordion/index.ts b/packages/outline-core-accordion/index.ts new file mode 100644 index 000000000..95f17af03 --- /dev/null +++ b/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. diff --git a/packages/outline-core-accordion/package.json b/packages/outline-core-accordion/package.json new file mode 100644 index 000000000..62953a9bb --- /dev/null +++ b/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" + } +} diff --git a/packages/outline-core-accordion/src/config.ts b/packages/outline-core-accordion/src/config.ts new file mode 100644 index 000000000..9fbf3f531 --- /dev/null +++ b/packages/outline-core-accordion/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-accordion` component. + */ diff --git a/packages/outline-core-accordion/src/outline-core-accordion.css b/packages/outline-core-accordion/src/outline-core-accordion.css new file mode 100644 index 000000000..fd67b8a03 --- /dev/null +++ b/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) === +*/ diff --git a/packages/outline-core-accordion/src/outline-core-accordion.ts b/packages/outline-core-accordion/src/outline-core-accordion.ts new file mode 100644 index 000000000..360f02790 --- /dev/null +++ b/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` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreAccordion; + } +} diff --git a/packages/outline-core-accordion/tsconfig.build.json b/packages/outline-core-accordion/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/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" }] +} diff --git a/packages/outline-core-alert/docs/outline-core-alert.mdx b/packages/outline-core-alert/docs/outline-core-alert.mdx new file mode 100644 index 000000000..0fd68395d --- /dev/null +++ b/packages/outline-core-alert/docs/outline-core-alert.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![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) + +# `` `OutlineCoreAlert` + +The `outline-core-alert` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-alert`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-alert/index.ts b/packages/outline-core-alert/index.ts new file mode 100644 index 000000000..5240d8c77 --- /dev/null +++ b/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. diff --git a/packages/outline-core-alert/package.json b/packages/outline-core-alert/package.json new file mode 100644 index 000000000..562a603b6 --- /dev/null +++ b/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" + } +} diff --git a/packages/outline-core-alert/src/config.ts b/packages/outline-core-alert/src/config.ts new file mode 100644 index 000000000..937c16706 --- /dev/null +++ b/packages/outline-core-alert/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-alert` component. + */ diff --git a/packages/outline-core-alert/src/outline-core-alert.css b/packages/outline-core-alert/src/outline-core-alert.css new file mode 100644 index 000000000..acef8b574 --- /dev/null +++ b/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) === +*/ diff --git a/packages/outline-core-alert/src/outline-core-alert.ts b/packages/outline-core-alert/src/outline-core-alert.ts new file mode 100644 index 000000000..3fbc3d08e --- /dev/null +++ b/packages/outline-core-alert/src/outline-core-alert.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-alert.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-alert'; + +/** + * + * The Outline Core Alert component + * + * @element outline-core-alert + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-alert.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 OutlineCoreAlert extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreAlert; + } +} diff --git a/packages/outline-core-alert/tsconfig.build.json b/packages/outline-core-alert/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-alert/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" }] +} diff --git a/packages/outline-core-breadcrumb/docs/outline-core-breadcrumb.mdx b/packages/outline-core-breadcrumb/docs/outline-core-breadcrumb.mdx new file mode 100644 index 000000000..2198df0c6 --- /dev/null +++ b/packages/outline-core-breadcrumb/docs/outline-core-breadcrumb.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-breadcrumb](https://img.shields.io/npm/v/@phase2/outline-core-breadcrumb)](https://www.npmjs.com/package/@phase2/outline-core-breadcrumb) + +# `` `OutlineCoreBreadcrumb` + +The `outline-core-breadcrumb` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-breadcrumb`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-breadcrumb/index.ts b/packages/outline-core-breadcrumb/index.ts new file mode 100644 index 000000000..387b51f7c --- /dev/null +++ b/packages/outline-core-breadcrumb/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreBreadcrumb component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreBreadcrumb } from '@phase2/outline-core-breadcrumb'; + * import { constantOne, constantTwo } from '@phase2/outline-core-breadcrumb'; + * import type { ThingType } from '@phase2/outline-core-breadcrumb'; + * @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 { OutlineCoreBreadcrumb } from './src/outline-core-breadcrumb'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-breadcrumb/package.json b/packages/outline-core-breadcrumb/package.json new file mode 100644 index 000000000..e2321b0e8 --- /dev/null +++ b/packages/outline-core-breadcrumb/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-breadcrumb", + "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-breadcrumb" + }, + "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" + } +} diff --git a/packages/outline-core-breadcrumb/src/config.ts b/packages/outline-core-breadcrumb/src/config.ts new file mode 100644 index 000000000..f57af9dff --- /dev/null +++ b/packages/outline-core-breadcrumb/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-breadcrumb` component. + */ diff --git a/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.css b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.css new file mode 100644 index 000000000..ae52be805 --- /dev/null +++ b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-breadcrumb.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) === +*/ diff --git a/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.ts new file mode 100644 index 000000000..52a5fb020 --- /dev/null +++ b/packages/outline-core-breadcrumb/src/outline-core-breadcrumb.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-breadcrumb.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-breadcrumb'; + +/** + * + * The Outline Core Breadcrumb component + * + * @element outline-core-breadcrumb + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-breadcrumb.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 OutlineCoreBreadcrumb extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreBreadcrumb; + } +} diff --git a/packages/outline-core-breadcrumb/tsconfig.build.json b/packages/outline-core-breadcrumb/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-breadcrumb/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" }] +} diff --git a/packages/outline-core-card/docs/outline-core-card.mdx b/packages/outline-core-card/docs/outline-core-card.mdx new file mode 100644 index 000000000..16ebb3281 --- /dev/null +++ b/packages/outline-core-card/docs/outline-core-card.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-card](https://img.shields.io/npm/v/@phase2/outline-core-card)](https://www.npmjs.com/package/@phase2/outline-core-card) + +# `` `OutlineCoreCard` + +The `outline-core-card` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-card`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-card/index.ts b/packages/outline-core-card/index.ts new file mode 100644 index 000000000..fb94a09fe --- /dev/null +++ b/packages/outline-core-card/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreCard component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreCard } from '@phase2/outline-core-card'; + * import { constantOne, constantTwo } from '@phase2/outline-core-card'; + * import type { ThingType } from '@phase2/outline-core-card'; + * @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 { OutlineCoreCard } from './src/outline-core-card'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-card/package.json b/packages/outline-core-card/package.json new file mode 100644 index 000000000..72c69b3b8 --- /dev/null +++ b/packages/outline-core-card/package.json @@ -0,0 +1,41 @@ +{ + "name": "@phase2/outline-core-card", + "private": true, + "version": "0.0.0", + "description": "The Outline Components for the card component", + "keywords": [ + "outline", + "web-components", + "design system", + "card" + ], + "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-card" + }, + "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" + } +} diff --git a/packages/outline-core-card/src/config.ts b/packages/outline-core-card/src/config.ts new file mode 100644 index 000000000..a7ed005c6 --- /dev/null +++ b/packages/outline-core-card/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-card` component. + */ diff --git a/packages/outline-core-card/src/outline-core-card.css b/packages/outline-core-card/src/outline-core-card.css new file mode 100644 index 000000000..4f2135b0c --- /dev/null +++ b/packages/outline-core-card/src/outline-core-card.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-card.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) === +*/ diff --git a/packages/outline-core-card/src/outline-core-card.ts b/packages/outline-core-card/src/outline-core-card.ts new file mode 100644 index 000000000..b7359eef4 --- /dev/null +++ b/packages/outline-core-card/src/outline-core-card.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-card.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-card'; + +/** + * + * The Outline Core Card component + * + * @element outline-core-card + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-card.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 OutlineCoreCard extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreCard; + } +} diff --git a/packages/outline-core-card/tsconfig.build.json b/packages/outline-core-card/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-card/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" }] +} diff --git a/packages/outline-core-container/docs/outline-core-container.mdx b/packages/outline-core-container/docs/outline-core-container.mdx new file mode 100644 index 000000000..3f51b106b --- /dev/null +++ b/packages/outline-core-container/docs/outline-core-container.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-container](https://img.shields.io/npm/v/@phase2/outline-core-container)](https://www.npmjs.com/package/@phase2/outline-core-container) + +# `` `OutlineCoreContainer` + +The `outline-core-container` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-container`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-container/index.ts b/packages/outline-core-container/index.ts new file mode 100644 index 000000000..e7ef30f55 --- /dev/null +++ b/packages/outline-core-container/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreContainer component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreContainer } from '@phase2/outline-core-container'; + * import { constantOne, constantTwo } from '@phase2/outline-core-container'; + * import type { ThingType } from '@phase2/outline-core-container'; + * @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 { OutlineCoreContainer } from './src/outline-core-container'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-container/package.json b/packages/outline-core-container/package.json new file mode 100644 index 000000000..0407581c9 --- /dev/null +++ b/packages/outline-core-container/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-container", + "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-container" + }, + "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" + } +} diff --git a/packages/outline-core-container/src/config.ts b/packages/outline-core-container/src/config.ts new file mode 100644 index 000000000..b251f2ad0 --- /dev/null +++ b/packages/outline-core-container/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-container` component. + */ diff --git a/packages/outline-core-container/src/outline-core-container.css b/packages/outline-core-container/src/outline-core-container.css new file mode 100644 index 000000000..a3475d6ed --- /dev/null +++ b/packages/outline-core-container/src/outline-core-container.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-container.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) === +*/ diff --git a/packages/outline-core-container/src/outline-core-container.ts b/packages/outline-core-container/src/outline-core-container.ts new file mode 100644 index 000000000..c252f36d3 --- /dev/null +++ b/packages/outline-core-container/src/outline-core-container.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-container.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-container'; + +/** + * + * The Outline Core Container component + * + * @element outline-core-container + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-container.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 OutlineCoreContainer extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreContainer; + } +} diff --git a/packages/outline-core-container/tsconfig.build.json b/packages/outline-core-container/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-container/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" }] +} diff --git a/packages/outline-core-form/docs/outline-core-form.mdx b/packages/outline-core-form/docs/outline-core-form.mdx new file mode 100644 index 000000000..83a157011 --- /dev/null +++ b/packages/outline-core-form/docs/outline-core-form.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-form](https://img.shields.io/npm/v/@phase2/outline-core-form)](https://www.npmjs.com/package/@phase2/outline-core-form) + +# `` `OutlineCoreForm` + +The `outline-core-form` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-form`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-form/index.ts b/packages/outline-core-form/index.ts new file mode 100644 index 000000000..5a1c7a5cd --- /dev/null +++ b/packages/outline-core-form/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreForm component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreForm } from '@phase2/outline-core-form'; + * import { constantOne, constantTwo } from '@phase2/outline-core-form'; + * import type { ThingType } from '@phase2/outline-core-form'; + * @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 { OutlineCoreForm } from './src/outline-core-form'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-form/package.json b/packages/outline-core-form/package.json new file mode 100644 index 000000000..59fcc074b --- /dev/null +++ b/packages/outline-core-form/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-form", + "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-form" + }, + "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" + } +} diff --git a/packages/outline-core-form/src/config.ts b/packages/outline-core-form/src/config.ts new file mode 100644 index 000000000..cf0fd1189 --- /dev/null +++ b/packages/outline-core-form/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-form` component. + */ diff --git a/packages/outline-core-form/src/outline-core-form.css b/packages/outline-core-form/src/outline-core-form.css new file mode 100644 index 000000000..2b20479a5 --- /dev/null +++ b/packages/outline-core-form/src/outline-core-form.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-form.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) === +*/ diff --git a/packages/outline-core-form/src/outline-core-form.ts b/packages/outline-core-form/src/outline-core-form.ts new file mode 100644 index 000000000..7045f3c9f --- /dev/null +++ b/packages/outline-core-form/src/outline-core-form.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-form.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-form'; + +/** + * + * The Outline Core Form component + * + * @element outline-core-form + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-form.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 OutlineCoreForm extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreForm; + } +} diff --git a/packages/outline-core-form/tsconfig.build.json b/packages/outline-core-form/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-form/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" }] +} diff --git a/packages/outline-core-icon/docs/outline-core-icon.mdx b/packages/outline-core-icon/docs/outline-core-icon.mdx new file mode 100644 index 000000000..495c7c496 --- /dev/null +++ b/packages/outline-core-icon/docs/outline-core-icon.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-icon](https://img.shields.io/npm/v/@phase2/outline-core-icon)](https://www.npmjs.com/package/@phase2/outline-core-icon) + +# `` `OutlineCoreIcon` + +The `outline-core-icon` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-icon`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-icon/index.ts b/packages/outline-core-icon/index.ts new file mode 100644 index 000000000..9b7477763 --- /dev/null +++ b/packages/outline-core-icon/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreIcon component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreIcon } from '@phase2/outline-core-icon'; + * import { constantOne, constantTwo } from '@phase2/outline-core-icon'; + * import type { ThingType } from '@phase2/outline-core-icon'; + * @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 { OutlineCoreIcon } from './src/outline-core-icon'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-icon/package.json b/packages/outline-core-icon/package.json new file mode 100644 index 000000000..1de8a1c39 --- /dev/null +++ b/packages/outline-core-icon/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-icon", + "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-icon" + }, + "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" + } +} diff --git a/packages/outline-core-icon/src/config.ts b/packages/outline-core-icon/src/config.ts new file mode 100644 index 000000000..d3682a9a8 --- /dev/null +++ b/packages/outline-core-icon/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-icon` component. + */ diff --git a/packages/outline-core-icon/src/outline-core-icon.css b/packages/outline-core-icon/src/outline-core-icon.css new file mode 100644 index 000000000..6ba5396e4 --- /dev/null +++ b/packages/outline-core-icon/src/outline-core-icon.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-icon.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) === +*/ diff --git a/packages/outline-core-icon/src/outline-core-icon.ts b/packages/outline-core-icon/src/outline-core-icon.ts new file mode 100644 index 000000000..7c4a7a3df --- /dev/null +++ b/packages/outline-core-icon/src/outline-core-icon.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-icon.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-icon'; + +/** + * + * The Outline Core Image component + * + * @element outline-core-icon + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-icon.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 OutlineCoreIcon extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreIcon; + } +} diff --git a/packages/outline-core-icon/tsconfig.build.json b/packages/outline-core-icon/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-icon/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" }] +} diff --git a/packages/outline-core-image/docs/outline-core-image.mdx b/packages/outline-core-image/docs/outline-core-image.mdx new file mode 100644 index 000000000..74db75329 --- /dev/null +++ b/packages/outline-core-image/docs/outline-core-image.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-image](https://img.shields.io/npm/v/@phase2/outline-core-image)](https://www.npmjs.com/package/@phase2/outline-core-image) + +# `` `OutlineCoreImage` + +The `outline-core-image` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-image`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-image/index.ts b/packages/outline-core-image/index.ts new file mode 100644 index 000000000..cf560a4fa --- /dev/null +++ b/packages/outline-core-image/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreImage component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreImage } from '@phase2/outline-core-image'; + * import { constantOne, constantTwo } from '@phase2/outline-core-image'; + * import type { ThingType } from '@phase2/outline-core-image'; + * @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 { OutlineCoreImage } from './src/outline-core-image'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-image/package.json b/packages/outline-core-image/package.json new file mode 100644 index 000000000..1a8463613 --- /dev/null +++ b/packages/outline-core-image/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-image", + "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-image" + }, + "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" + } +} diff --git a/packages/outline-core-image/src/config.ts b/packages/outline-core-image/src/config.ts new file mode 100644 index 000000000..99a10b457 --- /dev/null +++ b/packages/outline-core-image/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-image` component. + */ diff --git a/packages/outline-core-image/src/outline-core-image.css b/packages/outline-core-image/src/outline-core-image.css new file mode 100644 index 000000000..8587644d2 --- /dev/null +++ b/packages/outline-core-image/src/outline-core-image.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-image.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) === +*/ diff --git a/packages/outline-core-image/src/outline-core-image.ts b/packages/outline-core-image/src/outline-core-image.ts new file mode 100644 index 000000000..57827efbf --- /dev/null +++ b/packages/outline-core-image/src/outline-core-image.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-image.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-image'; + +/** + * + * The Outline Core Image component + * + * @element outline-core-image + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-image.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 OutlineCoreImage extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreImage; + } +} diff --git a/packages/outline-core-image/tsconfig.build.json b/packages/outline-core-image/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-image/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" }] +} diff --git a/packages/outline-core-list/docs/outline-core-list.mdx b/packages/outline-core-list/docs/outline-core-list.mdx new file mode 100644 index 000000000..57624b15e --- /dev/null +++ b/packages/outline-core-list/docs/outline-core-list.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-list](https://img.shields.io/npm/v/@phase2/outline-core-list)](https://www.npmjs.com/package/@phase2/outline-core-list) + +# `` `OutlineCoreList` + +The `outline-core-list` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-list`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-list/index.ts b/packages/outline-core-list/index.ts new file mode 100644 index 000000000..f0abafbcb --- /dev/null +++ b/packages/outline-core-list/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreList component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreList } from '@phase2/outline-core-list'; + * import { constantOne, constantTwo } from '@phase2/outline-core-list'; + * import type { ThingType } from '@phase2/outline-core-list'; + * @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 { OutlineCoreList } from './src/outline-core-list'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-list/package.json b/packages/outline-core-list/package.json new file mode 100644 index 000000000..5deff64c7 --- /dev/null +++ b/packages/outline-core-list/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-list", + "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-list" + }, + "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" + } +} diff --git a/packages/outline-core-list/src/config.ts b/packages/outline-core-list/src/config.ts new file mode 100644 index 000000000..7d9bceabb --- /dev/null +++ b/packages/outline-core-list/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-list` component. + */ diff --git a/packages/outline-core-list/src/outline-core-list.css b/packages/outline-core-list/src/outline-core-list.css new file mode 100644 index 000000000..ba1f72bf3 --- /dev/null +++ b/packages/outline-core-list/src/outline-core-list.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-list.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) === +*/ diff --git a/packages/outline-core-list/src/outline-core-list.ts b/packages/outline-core-list/src/outline-core-list.ts new file mode 100644 index 000000000..35897efc9 --- /dev/null +++ b/packages/outline-core-list/src/outline-core-list.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-list.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-list'; + +/** + * + * The Outline Core List component + * + * @element outline-core-list + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-list.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 OutlineCoreList extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreList; + } +} diff --git a/packages/outline-core-list/tsconfig.build.json b/packages/outline-core-list/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-list/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" }] +} diff --git a/packages/outline-core-modal/docs/outline-core-modal.mdx b/packages/outline-core-modal/docs/outline-core-modal.mdx new file mode 100644 index 000000000..e999a0c37 --- /dev/null +++ b/packages/outline-core-modal/docs/outline-core-modal.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-modal](https://img.shields.io/npm/v/@phase2/outline-core-modal)](https://www.npmjs.com/package/@phase2/outline-core-modal) + +# `` `OutlineCoreModal` + +The `outline-core-modal` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-modal`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-modal/index.ts b/packages/outline-core-modal/index.ts new file mode 100644 index 000000000..c9bb599cc --- /dev/null +++ b/packages/outline-core-modal/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreModal component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreModal } from '@phase2/outline-core-modal'; + * import { constantOne, constantTwo } from '@phase2/outline-core-modal'; + * import type { ThingType } from '@phase2/outline-core-modal'; + * @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 { OutlineCoreModal } from './src/outline-core-modal'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-modal/package.json b/packages/outline-core-modal/package.json new file mode 100644 index 000000000..2a9d719bd --- /dev/null +++ b/packages/outline-core-modal/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-modal", + "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-modal" + }, + "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" + } +} diff --git a/packages/outline-core-modal/src/config.ts b/packages/outline-core-modal/src/config.ts new file mode 100644 index 000000000..a3e3287ab --- /dev/null +++ b/packages/outline-core-modal/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-modal` component. + */ diff --git a/packages/outline-core-modal/src/outline-core-modal.css b/packages/outline-core-modal/src/outline-core-modal.css new file mode 100644 index 000000000..e9f3c9002 --- /dev/null +++ b/packages/outline-core-modal/src/outline-core-modal.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-modal.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) === +*/ diff --git a/packages/outline-core-modal/src/outline-core-modal.ts b/packages/outline-core-modal/src/outline-core-modal.ts new file mode 100644 index 000000000..86c135e30 --- /dev/null +++ b/packages/outline-core-modal/src/outline-core-modal.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-modal.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-modal'; + +/** + * + * The Outline Core Image component + * + * @element outline-core-modal + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-modal.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 OutlineCoreModal extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreModal; + } +} diff --git a/packages/outline-core-modal/tsconfig.build.json b/packages/outline-core-modal/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-modal/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" }] +} diff --git a/packages/outline-core-text/docs/outline-core-text.mdx b/packages/outline-core-text/docs/outline-core-text.mdx new file mode 100644 index 000000000..82958f059 --- /dev/null +++ b/packages/outline-core-text/docs/outline-core-text.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-text](https://img.shields.io/npm/v/@phase2/outline-core-text)](https://www.npmjs.com/package/@phase2/outline-core-text) + +# `` `OutlineCoreText` + +The `outline-core-text` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-text`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-text/index.ts b/packages/outline-core-text/index.ts new file mode 100644 index 000000000..9da430943 --- /dev/null +++ b/packages/outline-core-text/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreText component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreText } from '@phase2/outline-core-text'; + * import { constantOne, constantTwo } from '@phase2/outline-core-text'; + * import type { ThingType } from '@phase2/outline-core-text'; + * @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 { OutlineCoreText } from './src/outline-core-text'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-text/package.json b/packages/outline-core-text/package.json new file mode 100644 index 000000000..ff8ccaa04 --- /dev/null +++ b/packages/outline-core-text/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-text", + "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-text" + }, + "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" + } +} diff --git a/packages/outline-core-text/src/config.ts b/packages/outline-core-text/src/config.ts new file mode 100644 index 000000000..7042492d2 --- /dev/null +++ b/packages/outline-core-text/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-text` component. + */ diff --git a/packages/outline-core-text/src/outline-core-text.css b/packages/outline-core-text/src/outline-core-text.css new file mode 100644 index 000000000..0949851ad --- /dev/null +++ b/packages/outline-core-text/src/outline-core-text.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-text.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) === +*/ diff --git a/packages/outline-core-text/src/outline-core-text.ts b/packages/outline-core-text/src/outline-core-text.ts new file mode 100644 index 000000000..90d5719cc --- /dev/null +++ b/packages/outline-core-text/src/outline-core-text.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-text.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-text'; + +/** + * + * The Outline Core Text component + * + * @element outline-core-text + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-text.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 OutlineCoreText extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreText; + } +} diff --git a/packages/outline-core-text/tsconfig.build.json b/packages/outline-core-text/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-text/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" }] +} diff --git a/packages/outline-core-youtube/docs/outline-core-youtube.mdx b/packages/outline-core-youtube/docs/outline-core-youtube.mdx new file mode 100644 index 000000000..e33f0034c --- /dev/null +++ b/packages/outline-core-youtube/docs/outline-core-youtube.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-alert'; + + + +[![Latest version for outline-core-youtube](https://img.shields.io/npm/v/@phase2/outline-core-youtube)](https://www.npmjs.com/package/@phase2/outline-core-youtube) + +# `` `OutlineCoreYouTube` + +The `outline-core-youtube` component ... + + + Documentation Status: @TODO +

This documentation is in need of completion as the component is built out.

+
    +
  • **@todo:** Complete component.
    • +
  • **@todo:** Update documentation.
    • +
+ +
+ +## Introduction to the **`outline-core-youtube`** component + + +## Usage + +## CSS Variables + diff --git a/packages/outline-core-youtube/index.ts b/packages/outline-core-youtube/index.ts new file mode 100644 index 000000000..abad81974 --- /dev/null +++ b/packages/outline-core-youtube/index.ts @@ -0,0 +1,21 @@ +/** + * @file Exports for the OutlineCoreYouTube component. + * + * Any export here is then available via the following import, + * which should be available in the consuming application: + * + * @code + * import { OutlineCoreYouTube } from '@phase2/outline-core-youtube'; + * import { constantOne, constantTwo } from '@phase2/outline-core-youtube'; + * import type { ThingType } from '@phase2/outline-core-youtube'; + * @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 { OutlineCoreYouTube } from './src/outline-core-youtube'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/outline-core-youtube/package.json b/packages/outline-core-youtube/package.json new file mode 100644 index 000000000..5172a8805 --- /dev/null +++ b/packages/outline-core-youtube/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-youtube", + "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-youtube" + }, + "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" + } +} diff --git a/packages/outline-core-youtube/src/config.ts b/packages/outline-core-youtube/src/config.ts new file mode 100644 index 000000000..e417c8cb6 --- /dev/null +++ b/packages/outline-core-youtube/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-youtube` component. + */ diff --git a/packages/outline-core-youtube/src/outline-core-youtube.css b/packages/outline-core-youtube/src/outline-core-youtube.css new file mode 100644 index 000000000..cee2eb98c --- /dev/null +++ b/packages/outline-core-youtube/src/outline-core-youtube.css @@ -0,0 +1,33 @@ +/* +Styles for `outline-core-youtube.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) === +*/ diff --git a/packages/outline-core-youtube/src/outline-core-youtube.ts b/packages/outline-core-youtube/src/outline-core-youtube.ts new file mode 100644 index 000000000..231e3339e --- /dev/null +++ b/packages/outline-core-youtube/src/outline-core-youtube.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-youtube.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-youtube'; + +/** + * + * The Outline Core YouTube video component + * + * @element outline-core-youtube + * @extends OutlineElement + * @slot - The default slot for this element. + * + * @todo: Complete component. + * @todo: Update `../docs/outline-core-youtube.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 OutlineCoreYouTube extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + render(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + [componentName]: OutlineCoreYouTube; + } +} diff --git a/packages/outline-core-youtube/tsconfig.build.json b/packages/outline-core-youtube/tsconfig.build.json new file mode 100644 index 000000000..ebc8e4b8e --- /dev/null +++ b/packages/outline-core-youtube/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" }] +} diff --git a/packages/outline-storybook/config/storybook.main.css b/packages/outline-storybook/config/storybook.main.css index ef96f96b7..5b9e82948 100644 --- a/packages/outline-storybook/config/storybook.main.css +++ b/packages/outline-storybook/config/storybook.main.css @@ -455,7 +455,7 @@ video{ border-color: currentColor; } -.shadow, .shadow-md, .shadow-xl{ +.shadow-xl, .shadow, .shadow-md{ --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; @@ -948,6 +948,13 @@ video{ .no-underline{ text-decoration: none; +} +.shadow-xl{ + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } .shadow{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); @@ -962,13 +969,6 @@ video{ box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} -.shadow-xl{ - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } .outline{ outline-style: solid; diff --git a/packages/outline-templates/default/package.json b/packages/outline-templates/default/package.json index 67af8d81f..fbba01d03 100644 --- a/packages/outline-templates/default/package.json +++ b/packages/outline-templates/default/package.json @@ -89,7 +89,7 @@ "@phase2/outline-code-block": "latest", "@phase2/outline-config": "latest", "@phase2/outline-container": "latest", - "@phase2/outline-core": "latest", + "@phase2/outline-core": "^0.2.3", "@phase2/outline-core-link": "latest", "@phase2/outline-docs": "latest", "@phase2/outline-dropdown": "latest",