`
+ : html`
`
- } `;
+ This documentation is in need of completion as the component is built out.
+-
+
- **@todo:** Complete component. +
- **@todo:** Update documentation. +
+ +## Introduction to the **`outline-core-accordion`** component + + +## Usage + +## CSS Variables + diff --git a/packages/components/outline-core-accordion/index.ts b/packages/components/outline-core-accordion/index.ts new file mode 100644 index 000000000..95f17af03 --- /dev/null +++ b/packages/components/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/components/outline-core-accordion/package.json b/packages/components/outline-core-accordion/package.json new file mode 100644 index 000000000..7d7ce2791 --- /dev/null +++ b/packages/components/outline-core-accordion/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-accordion", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-accordion/src/config.ts b/packages/components/outline-core-accordion/src/config.ts new file mode 100644 index 000000000..9fbf3f531 --- /dev/null +++ b/packages/components/outline-core-accordion/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-accordion` component. + */ diff --git a/packages/components/outline-core-accordion/src/outline-core-accordion.css b/packages/components/outline-core-accordion/src/outline-core-accordion.css new file mode 100644 index 000000000..fd67b8a03 --- /dev/null +++ b/packages/components/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/components/outline-core-accordion/src/outline-core-accordion.ts b/packages/components/outline-core-accordion/src/outline-core-accordion.ts new file mode 100644 index 000000000..97f91d255 --- /dev/null +++ b/packages/components/outline-core-accordion/src/outline-core-accordion.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-alert/index.ts b/packages/components/outline-core-alert/index.ts new file mode 100644 index 000000000..5240d8c77 --- /dev/null +++ b/packages/components/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/components/outline-core-alert/package.json b/packages/components/outline-core-alert/package.json new file mode 100644 index 000000000..a3447a727 --- /dev/null +++ b/packages/components/outline-core-alert/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-alert", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-alert/src/config.ts b/packages/components/outline-core-alert/src/config.ts new file mode 100644 index 000000000..937c16706 --- /dev/null +++ b/packages/components/outline-core-alert/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-alert` component. + */ diff --git a/packages/components/outline-core-alert/src/outline-core-alert.css b/packages/components/outline-core-alert/src/outline-core-alert.css new file mode 100644 index 000000000..acef8b574 --- /dev/null +++ b/packages/components/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/components/outline-core-alert/src/outline-core-alert.ts b/packages/components/outline-core-alert/src/outline-core-alert.ts new file mode 100644 index 000000000..c336a152e --- /dev/null +++ b/packages/components/outline-core-alert/src/outline-core-alert.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-breadcrumb/index.ts b/packages/components/outline-core-breadcrumb/index.ts new file mode 100644 index 000000000..387b51f7c --- /dev/null +++ b/packages/components/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/components/outline-core-breadcrumb/package.json b/packages/components/outline-core-breadcrumb/package.json new file mode 100644 index 000000000..3f8402937 --- /dev/null +++ b/packages/components/outline-core-breadcrumb/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-breadcrumb", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-breadcrumb/src/config.ts b/packages/components/outline-core-breadcrumb/src/config.ts new file mode 100644 index 000000000..f57af9dff --- /dev/null +++ b/packages/components/outline-core-breadcrumb/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-breadcrumb` component. + */ diff --git a/packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.css b/packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.css new file mode 100644 index 000000000..ae52be805 --- /dev/null +++ b/packages/components/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/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts b/packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts new file mode 100644 index 000000000..da1c90e56 --- /dev/null +++ b/packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-card/index.ts b/packages/components/outline-core-card/index.ts new file mode 100644 index 000000000..fb94a09fe --- /dev/null +++ b/packages/components/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/components/outline-core-card/package.json b/packages/components/outline-core-card/package.json new file mode 100644 index 000000000..61cd32b39 --- /dev/null +++ b/packages/components/outline-core-card/package.json @@ -0,0 +1,42 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-card", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-card/src/config.ts b/packages/components/outline-core-card/src/config.ts new file mode 100644 index 000000000..a7ed005c6 --- /dev/null +++ b/packages/components/outline-core-card/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-card` component. + */ diff --git a/packages/components/outline-core-card/src/outline-core-card.css b/packages/components/outline-core-card/src/outline-core-card.css new file mode 100644 index 000000000..4f2135b0c --- /dev/null +++ b/packages/components/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/components/outline-core-card/src/outline-core-card.ts b/packages/components/outline-core-card/src/outline-core-card.ts new file mode 100644 index 000000000..655f80b8a --- /dev/null +++ b/packages/components/outline-core-card/src/outline-core-card.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-container/index.ts b/packages/components/outline-core-container/index.ts new file mode 100644 index 000000000..e7ef30f55 --- /dev/null +++ b/packages/components/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/components/outline-core-container/package.json b/packages/components/outline-core-container/package.json new file mode 100644 index 000000000..eb94165b5 --- /dev/null +++ b/packages/components/outline-core-container/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-container", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-container/src/config.ts b/packages/components/outline-core-container/src/config.ts new file mode 100644 index 000000000..b251f2ad0 --- /dev/null +++ b/packages/components/outline-core-container/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-container` component. + */ diff --git a/packages/components/outline-core-container/src/outline-core-container.css b/packages/components/outline-core-container/src/outline-core-container.css new file mode 100644 index 000000000..a3475d6ed --- /dev/null +++ b/packages/components/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/components/outline-core-container/src/outline-core-container.ts b/packages/components/outline-core-container/src/outline-core-container.ts new file mode 100644 index 000000000..a24a8cf7d --- /dev/null +++ b/packages/components/outline-core-container/src/outline-core-container.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-form/index.ts b/packages/components/outline-core-form/index.ts new file mode 100644 index 000000000..5a1c7a5cd --- /dev/null +++ b/packages/components/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/components/outline-core-form/package.json b/packages/components/outline-core-form/package.json new file mode 100644 index 000000000..01eb80f4b --- /dev/null +++ b/packages/components/outline-core-form/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-form", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-form/src/config.ts b/packages/components/outline-core-form/src/config.ts new file mode 100644 index 000000000..cf0fd1189 --- /dev/null +++ b/packages/components/outline-core-form/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-form` component. + */ diff --git a/packages/components/outline-core-form/src/outline-core-form.css b/packages/components/outline-core-form/src/outline-core-form.css new file mode 100644 index 000000000..2b20479a5 --- /dev/null +++ b/packages/components/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/components/outline-core-form/src/outline-core-form.ts b/packages/components/outline-core-form/src/outline-core-form.ts new file mode 100644 index 000000000..4515a7461 --- /dev/null +++ b/packages/components/outline-core-form/src/outline-core-form.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-icon/index.ts b/packages/components/outline-core-icon/index.ts new file mode 100644 index 000000000..9b7477763 --- /dev/null +++ b/packages/components/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/components/outline-core-icon/package.json b/packages/components/outline-core-icon/package.json new file mode 100644 index 000000000..da1b3f980 --- /dev/null +++ b/packages/components/outline-core-icon/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-icon", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-icon/src/config.ts b/packages/components/outline-core-icon/src/config.ts new file mode 100644 index 000000000..d3682a9a8 --- /dev/null +++ b/packages/components/outline-core-icon/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-icon` component. + */ diff --git a/packages/components/outline-core-icon/src/outline-core-icon.css b/packages/components/outline-core-icon/src/outline-core-icon.css new file mode 100644 index 000000000..6ba5396e4 --- /dev/null +++ b/packages/components/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/components/outline-core-icon/src/outline-core-icon.ts b/packages/components/outline-core-icon/src/outline-core-icon.ts new file mode 100644 index 000000000..8d5fad920 --- /dev/null +++ b/packages/components/outline-core-icon/src/outline-core-icon.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-image/index.ts b/packages/components/outline-core-image/index.ts new file mode 100644 index 000000000..cf560a4fa --- /dev/null +++ b/packages/components/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/components/outline-core-image/package.json b/packages/components/outline-core-image/package.json new file mode 100644 index 000000000..0e127ec62 --- /dev/null +++ b/packages/components/outline-core-image/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-image", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-image/src/config.ts b/packages/components/outline-core-image/src/config.ts new file mode 100644 index 000000000..99a10b457 --- /dev/null +++ b/packages/components/outline-core-image/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-image` component. + */ diff --git a/packages/components/outline-core-image/src/outline-core-image.css b/packages/components/outline-core-image/src/outline-core-image.css new file mode 100644 index 000000000..8587644d2 --- /dev/null +++ b/packages/components/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/components/outline-core-image/src/outline-core-image.ts b/packages/components/outline-core-image/src/outline-core-image.ts new file mode 100644 index 000000000..bd4f54a5a --- /dev/null +++ b/packages/components/outline-core-image/src/outline-core-image.ts @@ -0,0 +1,40 @@ +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`
Tabnabbing vulnerability 🤯
TLDR: when a link has the attribute target="_blank", always add ref="noreferrer noopener"
https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#tabnabbing | +| `linkTargetRender` | `(): string \| undefined` | You can override target manually, but if not, we'll set it to "_blank" if the link is external. | + +## Slots + +| Name | Description | +|------|------------------------------------| +| | The default slot for this element. | + +## CSS Custom Properties + +| Property | Description | +|-----------------------------------------|--------------------------------------------------| +| `--outline-core-link-color` | default: The default link color. | +| `--outline-core-link-color-default` | decoration: Text decoration for the default link. | +| `--outline-core-link-color-hover` | decoration: Text decoration for the link when hovering. | +| `--outline-core-link-transition` | property: The CSS transition property to use for the link. | +| `--outline-core-link-transition-timing` | function: The CSS transition timing function to use for the link. | + + +# outline-core-link + +The Outline Core Link component + +## Properties + +| Property | Attribute | Type | Description | +|--------------|---------------|------------------|-------------| +| `linkHref` | `link-href` | `string` | Link url | +| `linkRel` | `link-rel` | `LinkRelType` | Link rel | +| `linkTarget` | `link-target` | `LinkTargetType` | Link target | +| `linkText` | `link-text` | `string` | Link text | + +## Methods + +| Method | Type | Description | +|--------------------|--------------------------------------------------|--------------------------------------------------| +| `isURLExternal` | `(url: string): boolean` | Check to see if the link is external, pass target="_blank" and rel="external" if so. Returns true if the link is external. | +| `linkRelRender` | `(): string \| undefined` | You can override Rel manually, but if not, we'll set it to "noreferrer noopener" if the link is external.
Tabnabbing vulnerability 🤯
TLDR: when a link has the attribute target="_blank", always add ref="noreferrer noopener"
https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#tabnabbing | +| `linkTargetRender` | `(): "_blank" \| "_self" \| "_parent" \| "_top" \| undefined` | You can override target manually, but if not, we'll set it to "_blank" if the link is external. | + +## Slots + +| Name | Description | +|------|------------------------------------| +| | The default slot for this element. | + +## CSS Custom Properties + +| Property | Description | +|-----------------------------------------|--------------------------------------------------| +| `--outline-core-link-color` | default: The default link color. | +| `--outline-core-link-color-default` | decoration: Text decoration for the default link. | +| `--outline-core-link-color-hover` | decoration: Text decoration for the link when hovering. | +| `--outline-core-link-transition` | property: The CSS transition property to use for the link. | +| `--outline-core-link-transition-timing` | function: The CSS transition timing function to use for the link. | diff --git a/packages/components/outline-core-link/index.ts b/packages/components/outline-core-link/index.ts new file mode 100644 index 000000000..db0490239 --- /dev/null +++ b/packages/components/outline-core-link/index.ts @@ -0,0 +1,3 @@ +export { OutlineCoreLink } from './src/outline-core-link'; +export { default as linkVars } from './src/css-variables/vars-link.css.lit'; +export type { LinkTargetType, LinkRelType } from './src/config'; diff --git a/packages/components/outline-core-link/package.json b/packages/components/outline-core-link/package.json new file mode 100644 index 000000000..2af8f07d9 --- /dev/null +++ b/packages/components/outline-core-link/package.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-link", + "version": "0.0.7", + "description": "The Outline Components for the web link component", + "keywords": [ + "outline", + "web-components", + "design system", + "link" + ], + "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-link" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-link", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1", + "tslib": "^2.1.0" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-link/src/config.ts b/packages/components/outline-core-link/src/config.ts new file mode 100644 index 000000000..f0cb6c81b --- /dev/null +++ b/packages/components/outline-core-link/src/config.ts @@ -0,0 +1,22 @@ +export type LinkTargetType = '_blank' | '_self' | '_parent' | '_top'; +export type LinkRelType = + | 'alternate' + | 'author' + | 'bookmark' + | 'external' + | 'help' + | 'license' + | 'next' + | 'nofollow' + | 'noopener' + | 'noreferrer' + | 'prev' + | 'search' + | 'tag'; + +export interface LinkType { + linkTarget?: LinkTargetType; + linkRel?: LinkRelType; + linkText?: string; + linkHref?: string; +} diff --git a/packages/components/outline-core-link/src/css-variables/vars-link.css b/packages/components/outline-core-link/src/css-variables/vars-link.css new file mode 100644 index 000000000..65c8aa97a --- /dev/null +++ b/packages/components/outline-core-link/src/css-variables/vars-link.css @@ -0,0 +1,21 @@ +/* +Default CSS Variables for `outline-core-link`. +You can override these using `outline.theme.css`, +or any css file in your consumer application with +a later loading order than `outline.theme.css`. +The variables used to override the default +`outline-core-link` styling can be found in +`outline-core-link.ts` delcared with the `@cssprop` annotations. +*/ + +:host { + --outline-core-link--color--computed: var(--outline-core-link--color, var(--outline-blue-600)); + --outline-core-link--text-decoration--computed: var(--outline-core-link--text-decoration, none); + --outline-core-link--color-hover--computed: var(--outline-core-link--color-hover, var(--outline-gray-600)); + --outline-core-link--text-decoration-hover--computed: var(--outline-core-link--text-decoration-hover, underline); + --outline-core-link--color-focus--computed: var(--outline-core-link--color-focus, var(--outline-gray-600)); + --outline-core-link--text-decoration-focus--computed: var(--outline-core-link--text-decoration-focus, underline); + --outline-core-link--transition-property--computed: var(--outline-core-link--transition-property, color, background-color, border-color, text-decoration-color, fill, stroke); + --outline-core-link--transition-duration--computed: var(--outline-core-link--transition-duration, 150ms); + --outline-core-link--transition-timing-function--computed: var(--outline-core-link--transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)); +} diff --git a/packages/components/outline-core-link/src/outline-core-link.css b/packages/components/outline-core-link/src/outline-core-link.css new file mode 100644 index 000000000..5df9a02a5 --- /dev/null +++ b/packages/components/outline-core-link/src/outline-core-link.css @@ -0,0 +1,35 @@ +@import './css-variables/vars-link.css'; + +a, +::slotted(a) { + font-family: var(--ff-body) !important; + text-decoration: var( + --outline-core-link--text-decoration--computed + ) !important; + color: var(--outline-core-link--color--computed) !important; + transition-property: var( + --outline-core-link--transition-property--computed + ) !important; + transition-timing-function: var( + --outline-core-link--transition-timing-function--computed + ) !important; + transition-duration: var( + --outline-core-link--transition-duration--computed + ) !important; +} + +a:hover, +::slotted(a:hover) { + text-decoration: var( + --outline-core-link--text-decoration-hover--computed + ) !important; + color: var(--outline-core-link--color-hover--computed) !important; +} + +a:focus, +::slotted(a:focus) { + text-decoration: var( + --outline-core-link--text-decoration-focus--computed + ) !important; + color: var(--outline-core-link--color-focus--computed) !important; +} diff --git a/packages/components/outline-core-link/src/outline-core-link.ts b/packages/components/outline-core-link/src/outline-core-link.ts new file mode 100644 index 000000000..3b0a854d2 --- /dev/null +++ b/packages/components/outline-core-link/src/outline-core-link.ts @@ -0,0 +1,187 @@ +import { html, TemplateResult, CSSResultGroup } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; + +// Our base component, which all others extend. +import { OutlineElement } from '@phase2/outline-core'; + +import type { LinkTargetType, LinkRelType } from './config'; +import componentStyles from './outline-core-link.css.lit'; + +/** The element name, reused throughout the codebase */ +const componentName = 'outline-core-link'; + +/** + * + * The Outline Core Link component + * + * @element outline-core-link + * @extends OutlineElement + * @slot - The default slot for this element. + * @cssprop --outline-core-link-transition-property: The CSS transition property to use for the link. + * @cssprop --outline-core-link-transition-duration: The CSS transition duration to use for the link. + * @cssprop --outline-core-link-transition-timing-function: The CSS transition timing function to use for the link. + * @cssprop --outline-core-link-color-default: The default link color. + * @cssprop --outline-core-link-color-default-decoration: Text decoration for the default link. + * @cssprop --outline-core-link-color-hover: The link color when hovering on the link. + * @cssprop --outline-core-link-color-hover-decoration: Text decoration for the link when hovering. + * @cssprop --outline-core-link-color-focus: The link color when focusing on the link. + * @todo - Add support for outline/ring on the focus state of the link. + */ +@customElement(componentName) +export class OutlineCoreLink extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + + /** + * Link url + */ + @property({ type: String, attribute: 'link-href' }) + linkHref: string; + + /** + * Link text + */ + @property({ type: String, attribute: 'link-text' }) + linkText: string; + + /** + * Link target + */ + @property({ type: String, attribute: 'link-target' }) + linkTarget: LinkTargetType; + + /** + * Link rel + */ + @property({ type: String, attribute: 'link-rel' }) + linkRel: LinkRelType; + + /** + * Check to see if the link is external, pass target="_blank" and rel="external" if so. Returns true if the link is external. + */ + isURLExternal(url: string): boolean { + return ( + new URL(url, window.location.href).hostname !== window.location.hostname + ); + } + + /** + * You can override Rel manually, but if not, we'll set it to "noreferrer noopener" if the link is external. + * Tabnabbing vulnerability 🤯 + * TLDR: when a link has the attribute target="_blank", always add ref="noreferrer noopener" + * https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#tabnabbing + */ + linkRelRender(): string | undefined { + if (this.linkRel) { + return this.linkRel; + } + return this.isURLExternal(this.linkHref) + ? 'noreferrer noopener' + : undefined; + } + + /** + * You can override target manually, but if not, we'll set it to "_blank" if the link is external. + */ + linkTargetRender(): LinkTargetType | undefined { + if (this.linkTarget) { + return this.linkTarget; + } + return this.isURLExternal(this.linkHref) ? '_blank' : undefined; + } + + generateLink(): TemplateResult { + return html` + ${this.linkText ? html`${this.linkText}` : html`
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/components/outline-core-list/index.ts b/packages/components/outline-core-list/index.ts new file mode 100644 index 000000000..f0abafbcb --- /dev/null +++ b/packages/components/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/components/outline-core-list/package.json b/packages/components/outline-core-list/package.json new file mode 100644 index 000000000..661e2c03e --- /dev/null +++ b/packages/components/outline-core-list/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-list", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-list/src/config.ts b/packages/components/outline-core-list/src/config.ts new file mode 100644 index 000000000..7d9bceabb --- /dev/null +++ b/packages/components/outline-core-list/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-list` component. + */ diff --git a/packages/components/outline-core-list/src/outline-core-list.css b/packages/components/outline-core-list/src/outline-core-list.css new file mode 100644 index 000000000..ba1f72bf3 --- /dev/null +++ b/packages/components/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/components/outline-core-list/src/outline-core-list.ts b/packages/components/outline-core-list/src/outline-core-list.ts new file mode 100644 index 000000000..e827ef970 --- /dev/null +++ b/packages/components/outline-core-list/src/outline-core-list.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-modal/index.ts b/packages/components/outline-core-modal/index.ts new file mode 100644 index 000000000..c9bb599cc --- /dev/null +++ b/packages/components/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/components/outline-core-modal/package.json b/packages/components/outline-core-modal/package.json new file mode 100644 index 000000000..8f70e295e --- /dev/null +++ b/packages/components/outline-core-modal/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-modal", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-modal/src/config.ts b/packages/components/outline-core-modal/src/config.ts new file mode 100644 index 000000000..a3e3287ab --- /dev/null +++ b/packages/components/outline-core-modal/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-modal` component. + */ diff --git a/packages/components/outline-core-modal/src/outline-core-modal.css b/packages/components/outline-core-modal/src/outline-core-modal.css new file mode 100644 index 000000000..e9f3c9002 --- /dev/null +++ b/packages/components/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/components/outline-core-modal/src/outline-core-modal.ts b/packages/components/outline-core-modal/src/outline-core-modal.ts new file mode 100644 index 000000000..0bc37821c --- /dev/null +++ b/packages/components/outline-core-modal/src/outline-core-modal.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-text/index.ts b/packages/components/outline-core-text/index.ts new file mode 100644 index 000000000..9da430943 --- /dev/null +++ b/packages/components/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/components/outline-core-text/package.json b/packages/components/outline-core-text/package.json new file mode 100644 index 000000000..2e5f4e455 --- /dev/null +++ b/packages/components/outline-core-text/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-text", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-text/src/config.ts b/packages/components/outline-core-text/src/config.ts new file mode 100644 index 000000000..7042492d2 --- /dev/null +++ b/packages/components/outline-core-text/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-text` component. + */ diff --git a/packages/components/outline-core-text/src/outline-core-text.css b/packages/components/outline-core-text/src/outline-core-text.css new file mode 100644 index 000000000..0949851ad --- /dev/null +++ b/packages/components/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/components/outline-core-text/src/outline-core-text.ts b/packages/components/outline-core-text/src/outline-core-text.ts new file mode 100644 index 000000000..0e0fe7ce6 --- /dev/null +++ b/packages/components/outline-core-text/src/outline-core-text.ts @@ -0,0 +1,40 @@ +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`
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/components/outline-core-youtube/index.ts b/packages/components/outline-core-youtube/index.ts new file mode 100644 index 000000000..abad81974 --- /dev/null +++ b/packages/components/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/components/outline-core-youtube/package.json b/packages/components/outline-core-youtube/package.json new file mode 100644 index 000000000..7ef6983a0 --- /dev/null +++ b/packages/components/outline-core-youtube/package.json @@ -0,0 +1,43 @@ +{ + "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" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-youtube", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.2.5", + "lit": "^2.3.1" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-youtube/src/config.ts b/packages/components/outline-core-youtube/src/config.ts new file mode 100644 index 000000000..e417c8cb6 --- /dev/null +++ b/packages/components/outline-core-youtube/src/config.ts @@ -0,0 +1,3 @@ +/** + * @file Shared configuration for the `outline-core-youtube` component. + */ diff --git a/packages/components/outline-core-youtube/src/outline-core-youtube.css b/packages/components/outline-core-youtube/src/outline-core-youtube.css new file mode 100644 index 000000000..cee2eb98c --- /dev/null +++ b/packages/components/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/components/outline-core-youtube/src/outline-core-youtube.ts b/packages/components/outline-core-youtube/src/outline-core-youtube.ts new file mode 100644 index 000000000..28d590238 --- /dev/null +++ b/packages/components/outline-core-youtube/src/outline-core-youtube.ts @@ -0,0 +1,40 @@ +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`
This documentation is accurate, though the inclusion of several of the following topics or examples would be ideal.
+-
+
- **@todo:** Include example linked images when `outline-core-image` is complete. +
- **@todo:** Include example linked icons when `outline-core-icon` is complete. +
- **@todo:** Include example linked headings when `outline-core-heading` is complete. +
- **@todo:** Include multiple examples of utilizing and modifying the CSS variables avaiable to `outline-core-link` +
+ +## Introduction to the **`outline-core-link`** component + +The `outline-core-link` component allows for two distinct types of usages. +We will call these usages **Consumer Links** and **Component Links**. The former is the consumer application providing the `a`, and the latter is the web component itself generating the `a`. + +**The default reccomendation** is to use the **Consumer Links** option as it is the most flexible, allows for the most control over the link element. +Additionally, the **Consumer Links** method avoids any issues with tools that are still unable to penetrate the Shadow DOM, and are only able to accurately scan and/or operate on the Light DOM. + +As links are a foundational component, utilized across the board in a variety of component and consumer usages, it is imporant the `outline-core-link` component is as flexible as possible allowing for a variety of consumer needs up front to ensure that our core components are ready for whatever may be thrown their way. + + +## Consumer Links + +Consumer Links are links that are created by a consumer application that uses the `outline-core-link` component as a wrapper for links generated by another backend/frontend system using the component. + +> *If you would like to render your link via properties, you should use the **Component Link** method described below.* + +--- + + + +```html preview-story +