`
+ : 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 in need of additional work, or is currently in progress. +
++ This documentation is in need of additional work, or is currently in progress. +
++ This documentation is in need of additional work, or is currently in progress. +
+
+
+ `;
+ }
+ ...
+}
+```
++ Simple "hard coded" paragraph/element inside the component's + ShadowDOM. +
++ +## Partial Templates + +```typescript +... + render(): TemplateResult { + return html`${headerTemplate}`; + } + + /* Example usage of a partial template, implemented above * in the render() function. */ + + headerTemplate(): TemplateResult { + if (boolProperty) { + return html` +
Hello World
+ `; + } + else { + return html` +Hola Mundo
+ `; + } + } + ... +} +``` +[Partial Templates](https://lit.dev/docs/components/rendering/#composing-templates) are used to break up the render function into smaller chunks and allows for overriding of pieces of the template in subclasses. This is also great for extracting conditional logic from the render function. diff --git a/packages/documentation/outline-docs/src/guides/development/component-development/06-properties.mdx b/packages/documentation/outline-docs/src/guides/development/component-development/06-properties.mdx new file mode 100644 index 000000000..b36cd51ac --- /dev/null +++ b/packages/documentation/outline-docs/src/guides/development/component-development/06-properties.mdx @@ -0,0 +1,132 @@ +import { Meta } from '@storybook/addon-docs'; +import '@phase2/outline-alert'; +import '@phase2/outline-container'; + + + ++ This documentation is in need of additional work, or is currently in progress. +
++ This documentation is in need of additional work, or is currently in progress. +
+"Hard coded" element inside the component's ShadowDOM.
+ ` + } +... +``` + +### Default placeholder content in slots. + +```typescript +... + render(): TemplateResult { + return html` ++ +## Using Slots + +```html + +
This paragraph is content that will be passed to the default slot in the component.
+This is passed to the heading slot.
+This is passed to the default slot.
+This is passed to the footer slot.
++ This documentation is in need of additional work, or is currently in progress. +
++ This documentation is in need of additional work, or is currently in progress. +
++ This documentation is in need of additional work, or is currently in progress. +
++ This documentation is in need of additional work, or is currently in progress. +
++ This documentation is in need of additional work, or is currently in progress. +
+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 +