Skip to content

Commit e771e92

Browse files
himerushimerus
authored
Merge pull request #414 from phase2/feature/component-stubs
OUTLINE-165: Creating ready to develop placeholders for upcoming components
2 parents 4678119 + ec02013 commit e771e92

File tree

88 files changed

+2305
-11
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+2305
-11
lines changed

‎.changeset/config.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,18 @@
77
"access": "restricted",
88
"baseBranch": "next",
99
"updateInternalDependencies": "patch",
10-
"ignore": []
10+
"ignore": [
11+
"@phase2/outline-core-accordion",
12+
"@phase2/outline-core-alert",
13+
"@phase2/outline-core-breadcrumb",
14+
"@phase2/outline-core-card",
15+
"@phase2/outline-core-container",
16+
"@phase2/outline-core-form",
17+
"@phase2/outline-core-icon",
18+
"@phase2/outline-core-image",
19+
"@phase2/outline-core-list",
20+
"@phase2/outline-core-modal",
21+
"@phase2/outline-core-text",
22+
"@phase2/outline-core-youtube"
23+
]
1124
}

‎.storybook/main.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ module.exports = {
1212
'../packages/outline-docs/src/guides/tooling/**/*.mdx',
1313
// Documentation stories.
1414
'../packages/outline-docs/src/guides/**/*.@(js|ts|mdx)',
15-
// Component stories.
15+
// Modern component stories.
16+
'../packages/**/docs/*.mdx',
17+
// Old component stories.
1618
'../packages/outline-storybook/stories/**/*.stories.@(js|ts|mdx)',
1719
],
1820
typescript: {

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
3+
import '@phase2/outline-alert';
4+
5+
<Meta
6+
title="In Progress/Accordion"
7+
component="outline-core-accordion"
8+
parameters={{
9+
viewMode: 'docs',
10+
previewTabs: {
11+
canvas: {
12+
hidden: true,
13+
},
14+
},
15+
}}
16+
/>
17+
18+
[![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)
19+
20+
# `<outline-core-accordion>` `OutlineCoreAccordion`
21+
22+
The `outline-core-accordion` component ...
23+
24+
<outline-alert status="warning" size="large">
25+
<span slot="header">Documentation Status: @TODO</span>
26+
<p>This documentation is in need of completion as the component is built out.</p>
27+
<ul>
28+
<li>**@todo:** Complete component.</li>
29+
<li>**@todo:** Update documentation.</li>
30+
</ul>
31+
</outline-alert>
32+
<br />
33+
34+
## Introduction to the **`outline-core-accordion`** component
35+
36+
37+
## Usage
38+
39+
## CSS Variables
40+

‎packages/outline-core-accordion/index.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* @file Exports for the OutlineCoreAccordion component.
3+
*
4+
* Any export here is then available via the following import,
5+
* which should be available in the consuming application:
6+
*
7+
* @code
8+
* import { OutlineCoreAccordion } from '@phase2/outline-core-accordion';
9+
* import { constantOne, constantTwo } from '@phase2/outline-core-accordion';
10+
* import type { ThingType } from '@phase2/outline-core-accordion';
11+
* @endcode
12+
*
13+
* Any of the above exports can be used in the consuming application
14+
* based on the contents of this file, and creativity of what functionality
15+
* you wish to expose to the consuming application(s).
16+
*/
17+
18+
// Export the primary component.
19+
export { OutlineCoreAccordion } from './src/outline-core-accordion';
20+
21+
// Export any additional sub-components, variables and methods as required.

‎packages/outline-core-accordion/package.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "@phase2/outline-core-accordion",
3+
"private": true,
4+
"version": "0.0.0",
5+
"description": "The Outline Components for the image component",
6+
"keywords": [
7+
"outline",
8+
"web-components",
9+
"design system",
10+
"image",
11+
"picture"
12+
],
13+
"main": "index.ts",
14+
"types": "index.ts",
15+
"typings": "index.d.ts",
16+
"files": [
17+
"/dist/",
18+
"/src/",
19+
"!/dist/tsconfig.build.tsbuildinfo"
20+
],
21+
"author": "Phase2 Technology",
22+
"repository": {
23+
"type": "git",
24+
"url": "https://github.com/phase2/outline.git",
25+
"directory": "packages/outline-core-accordion"
26+
},
27+
"license": "BSD-3-Clause",
28+
"scripts": {
29+
"build": "node ../../scripts/build.js",
30+
"package": "yarn publish"
31+
},
32+
"dependencies": {
33+
"@phase2/outline-core": "^0.2.3",
34+
"lit": "^2.3.1"
35+
},
36+
"publishConfig": {
37+
"access": "public"
38+
},
39+
"exports": {
40+
".": "./index.ts"
41+
}
42+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/**
2+
* @file Shared configuration for the `outline-core-accordion` component.
3+
*/

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

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

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { html, TemplateResult, CSSResultGroup } from 'lit';
2+
import { customElement } from 'lit/decorators.js';
3+
4+
// Our base component, which all others extend.
5+
import { OutlineElement } from '@phase2/outline-core';
6+
7+
import componentStyles from './outline-core-accordion.css.lit';
8+
9+
/** The element name, reused throughout the codebase */
10+
const componentName = 'outline-core-accordion';
11+
12+
/**
13+
*
14+
* The Outline Core Accordion component
15+
*
16+
* @element outline-core-accordion
17+
* @extends OutlineElement
18+
* @slot - The default slot for this element.
19+
*
20+
* @todo: Complete component.
21+
* @todo: Update `../docs/outline-core-accordion.mdx` to accurately document the component.
22+
* @todo: Run `yarn analyze` to generate README.md.
23+
* @todo: Update `package.json` to remove the `private` flag.
24+
* @todo: Update `.changeset/config.json` to remove this component from the `ignore` list.
25+
* @todo: Create PR for updated and completed component.
26+
*/
27+
@customElement(componentName)
28+
export class OutlineCoreAccordion extends OutlineElement {
29+
static styles: CSSResultGroup = [componentStyles];
30+
31+
render(): TemplateResult {
32+
return html`
33+
<slot></slot>
34+
`;
35+
}
36+
}
37+
38+
declare global {
39+
interface HTMLElementTagNameMap {
40+
[componentName]: OutlineCoreAccordion;
41+
}
42+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"rootDir": ".",
5+
"outDir": "./dist"
6+
},
7+
"include": ["index.ts", "src/**/*", "tests/**/*"],
8+
"references": [{ "path": "../outline-core/tsconfig.build.json" }]
9+
}

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
3+
import '@phase2/outline-alert';
4+
5+
<Meta
6+
title="In Progress/Alert"
7+
component="outline-core-alert"
8+
parameters={{
9+
viewMode: 'docs',
10+
previewTabs: {
11+
canvas: {
12+
hidden: true,
13+
},
14+
},
15+
}}
16+
/>
17+
18+
[![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)
19+
20+
# `<outline-core-alert>` `OutlineCoreAlert`
21+
22+
The `outline-core-alert` component ...
23+
24+
<outline-alert status="warning" size="large">
25+
<span slot="header">Documentation Status: @TODO</span>
26+
<p>This documentation is in need of completion as the component is built out.</p>
27+
<ul>
28+
<li>**@todo:** Complete component.</li>
29+
<li>**@todo:** Update documentation.</li>
30+
</ul>
31+
</outline-alert>
32+
<br />
33+
34+
## Introduction to the **`outline-core-alert`** component
35+
36+
37+
## Usage
38+
39+
## CSS Variables
40+

0 commit comments

Comments
 (0)