-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #414 from phase2/feature/component-stubs
OUTLINE-165: Creating ready to develop placeholders for upcoming components
- Loading branch information
Showing
88 changed files
with
2,305 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
packages/outline-core-accordion/docs/outline-core-accordion.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { Meta } from '@storybook/addon-docs'; | ||
|
||
import '@phase2/outline-alert'; | ||
|
||
<Meta | ||
title="In Progress/Accordion" | ||
component="outline-core-accordion" | ||
parameters={{ | ||
viewMode: 'docs', | ||
previewTabs: { | ||
canvas: { | ||
hidden: true, | ||
}, | ||
}, | ||
}} | ||
/> | ||
|
||
[![Latest version for outline-core-accordion](https://img.shields.io/npm/v/@phase2/outline-core-accordion)](https://www.npmjs.com/package/@phase2/outline-core-accordion) | ||
|
||
# `<outline-core-accordion>` `OutlineCoreAccordion` | ||
|
||
The `outline-core-accordion` component ... | ||
|
||
<outline-alert status="warning" size="large"> | ||
<span slot="header">Documentation Status: @TODO</span> | ||
<p>This documentation is in need of completion as the component is built out.</p> | ||
<ul> | ||
<li>**@todo:** Complete component.</li> | ||
<li>**@todo:** Update documentation.</li> | ||
</ul> | ||
</outline-alert> | ||
<br /> | ||
|
||
## Introduction to the **`outline-core-accordion`** component | ||
|
||
|
||
## Usage | ||
|
||
## CSS Variables | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
{ | ||
"name": "@phase2/outline-core-accordion", | ||
"private": true, | ||
"version": "0.0.0", | ||
"description": "The Outline Components for the image component", | ||
"keywords": [ | ||
"outline", | ||
"web-components", | ||
"design system", | ||
"image", | ||
"picture" | ||
], | ||
"main": "index.ts", | ||
"types": "index.ts", | ||
"typings": "index.d.ts", | ||
"files": [ | ||
"/dist/", | ||
"/src/", | ||
"!/dist/tsconfig.build.tsbuildinfo" | ||
], | ||
"author": "Phase2 Technology", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/phase2/outline.git", | ||
"directory": "packages/outline-core-accordion" | ||
}, | ||
"license": "BSD-3-Clause", | ||
"scripts": { | ||
"build": "node ../../scripts/build.js", | ||
"package": "yarn publish" | ||
}, | ||
"dependencies": { | ||
"@phase2/outline-core": "^0.2.3", | ||
"lit": "^2.3.1" | ||
}, | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"exports": { | ||
".": "./index.ts" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
/** | ||
* @file Shared configuration for the `outline-core-accordion` component. | ||
*/ |
33 changes: 33 additions & 0 deletions
33
packages/outline-core-accordion/src/outline-core-accordion.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) === | ||
*/ |
42 changes: 42 additions & 0 deletions
42
packages/outline-core-accordion/src/outline-core-accordion.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { html, TemplateResult, CSSResultGroup } from 'lit'; | ||
import { customElement } from 'lit/decorators.js'; | ||
|
||
// Our base component, which all others extend. | ||
import { OutlineElement } from '@phase2/outline-core'; | ||
|
||
import componentStyles from './outline-core-accordion.css.lit'; | ||
|
||
/** The element name, reused throughout the codebase */ | ||
const componentName = 'outline-core-accordion'; | ||
|
||
/** | ||
* | ||
* The Outline Core Accordion component | ||
* | ||
* @element outline-core-accordion | ||
* @extends OutlineElement | ||
* @slot - The default slot for this element. | ||
* | ||
* @todo: Complete component. | ||
* @todo: Update `../docs/outline-core-accordion.mdx` to accurately document the component. | ||
* @todo: Run `yarn analyze` to generate README.md. | ||
* @todo: Update `package.json` to remove the `private` flag. | ||
* @todo: Update `.changeset/config.json` to remove this component from the `ignore` list. | ||
* @todo: Create PR for updated and completed component. | ||
*/ | ||
@customElement(componentName) | ||
export class OutlineCoreAccordion extends OutlineElement { | ||
static styles: CSSResultGroup = [componentStyles]; | ||
|
||
render(): TemplateResult { | ||
return html` | ||
<slot></slot> | ||
`; | ||
} | ||
} | ||
|
||
declare global { | ||
interface HTMLElementTagNameMap { | ||
[componentName]: OutlineCoreAccordion; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"extends": "../../tsconfig.json", | ||
"compilerOptions": { | ||
"rootDir": ".", | ||
"outDir": "./dist" | ||
}, | ||
"include": ["index.ts", "src/**/*", "tests/**/*"], | ||
"references": [{ "path": "../outline-core/tsconfig.build.json" }] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { Meta } from '@storybook/addon-docs'; | ||
|
||
import '@phase2/outline-alert'; | ||
|
||
<Meta | ||
title="In Progress/Alert" | ||
component="outline-core-alert" | ||
parameters={{ | ||
viewMode: 'docs', | ||
previewTabs: { | ||
canvas: { | ||
hidden: true, | ||
}, | ||
}, | ||
}} | ||
/> | ||
|
||
[![Latest version for outline-core-alert](https://img.shields.io/npm/v/@phase2/outline-core-alert)](https://www.npmjs.com/package/@phase2/outline-core-alert) | ||
|
||
# `<outline-core-alert>` `OutlineCoreAlert` | ||
|
||
The `outline-core-alert` component ... | ||
|
||
<outline-alert status="warning" size="large"> | ||
<span slot="header">Documentation Status: @TODO</span> | ||
<p>This documentation is in need of completion as the component is built out.</p> | ||
<ul> | ||
<li>**@todo:** Complete component.</li> | ||
<li>**@todo:** Update documentation.</li> | ||
</ul> | ||
</outline-alert> | ||
<br /> | ||
|
||
## Introduction to the **`outline-core-alert`** component | ||
|
||
|
||
## Usage | ||
|
||
## CSS Variables | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
{ | ||
"name": "@phase2/outline-core-alert", | ||
"private": true, | ||
"version": "0.0.0", | ||
"description": "The Outline Components for the image component", | ||
"keywords": [ | ||
"outline", | ||
"web-components", | ||
"design system", | ||
"image", | ||
"picture" | ||
], | ||
"main": "index.ts", | ||
"types": "index.ts", | ||
"typings": "index.d.ts", | ||
"files": [ | ||
"/dist/", | ||
"/src/", | ||
"!/dist/tsconfig.build.tsbuildinfo" | ||
], | ||
"author": "Phase2 Technology", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/phase2/outline.git", | ||
"directory": "packages/outline-core-alert" | ||
}, | ||
"license": "BSD-3-Clause", | ||
"scripts": { | ||
"build": "node ../../scripts/build.js", | ||
"package": "yarn publish" | ||
}, | ||
"dependencies": { | ||
"@phase2/outline-core": "^0.2.3", | ||
"lit": "^2.3.1" | ||
}, | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"exports": { | ||
".": "./index.ts" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
/** | ||
* @file Shared configuration for the `outline-core-alert` component. | ||
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) === | ||
*/ |
Oops, something went wrong.