Skip to content

Commit ac0f45d

Browse files
Stef3stStef3st
committed
feat: create oscd action pane component
Signed-off-by: Stef3st <[email protected]>
1 parent 1aad71f commit ac0f45d

34 files changed

+952
-362
lines changed

‎.eslintrc

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"parserOptions": {
3+
"requireConfigFile": false,
4+
"ecmaVersion": 6,
5+
"ecmaFeatures": {
6+
"experimentalObjectRestSpread": true
7+
},
8+
"sourceType": "module",
9+
"allowImportExportEverywhere": true
10+
},
11+
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
12+
"parser": "@typescript-eslint/parser",
13+
"plugins": ["@typescript-eslint"],
14+
"root": true,
15+
"ignorePatterns": ["**/*.html", "*.config.js"]
16+
}

‎.github/workflows/release-please.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ jobs:
2222
if: ${{ steps.release.outputs.release_created }}
2323
- run: npm ci
2424
if: ${{ steps.release.outputs.release_created }}
25-
- run: npm publish
25+
- run: npm publish --access public
2626
env:
2727
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
2828
if: ${{ steps.release.outputs.release_created }}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
## testing
1313
/coverage/
1414

15+
## local debug
16+
/.npmrc
17+
1518
## temp folders
1619
/.tmp/
1720

‎.npmignore

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
## editors
2+
/.idea
3+
/.vscode
4+
5+
## system files
6+
.DS_Store
7+
8+
## npm
9+
/node_modules/
10+
/npm-debug.log
11+
12+
## testing
13+
/coverage/
14+
15+
## local debug
16+
/.npmrc
17+
18+
## temp folders
19+
/.tmp/
20+
21+
# build
22+
/_site/
23+
/out-tsc/
24+
25+
storybook-static
26+
custom-elements.json

‎README.foot.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11

2-
&copy; 1970 THE AUTHORS
2+
&copy; 2023 Alliander N.V.

‎README.head.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
# \<oscd-component>
1+
# \<oscd-action-pane>
22

33
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
44

55
## Installation
66

77
```bash
8-
npm i oscd-component
8+
npm i @openscd/oscd-action-pane
99
```
1010

1111
## Usage
1212

1313
```html
1414
<script type="module">
15-
import 'oscd-component';
15+
import 'oscd-action-pane';
1616
</script>
1717

18-
<oscd-component></oscd-component>
18+
<oscd-action-pane></oscd-action-pane>
1919
```
2020

2121
## Linting and formatting

‎README.md

+34-62
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,21 @@
1-
# \<oscd-component>
2-
3-
## Renaming the component
4-
5-
After instantiating this template repository, you will want to rename your component and then remove this section from the `README.md` file.
6-
7-
To find places where you have to search for and replace the string `oscd-component` you can use
8-
9-
```sh
10-
$ git grep oscd-component
11-
```
12-
13-
<details>
14-
<summary>=></summary>
15-
16-
```
17-
README.md:# \<oscd-component>
18-
README.md:npm i oscd-component
19-
README.md: import 'oscd-component';
20-
README.md:<oscd-component></oscd-component>
21-
index.html: import './dist/oscd-component.js';
22-
index.html: <oscd-component .title=${title}>
23-
index.html: </oscd-component>
24-
oscd-component.stories.ts:import './oscd-component.js';
25-
oscd-component.stories.ts: component: 'oscd-component',
26-
oscd-component.stories.ts: <oscd-component
27-
oscd-component.stories.ts: style="--oscd-component-text-color: ${textColor || 'black'}"
28-
oscd-component.stories.ts: </oscd-component>
29-
oscd-component.spec.ts:import './oscd-component.js';
30-
oscd-component.spec.ts:import type { OscdComponent } from './oscd-component.js';
31-
oscd-component.spec.ts: html`<oscd-component></oscd-component>`
32-
oscd-component.spec.ts: html`<oscd-component></oscd-component>`
33-
oscd-component.spec.ts: html`<oscd-component title="attribute title"></oscd-component>`
34-
oscd-component.spec.ts: html`<oscd-component></oscd-component>`
35-
oscd-component.ts:@customElement('oscd-component')
36-
oscd-component.ts: color: var(--oscd-component-text-color, #000);
37-
package.json: "name": "oscd-component",
38-
package.json: "description": "Webcomponent oscd-component following open-wc recommendations",
39-
package.json: "main": "dist/oscd-component.js",
40-
package.json: "module": "dist/oscd-component.js",
41-
package.json: ".": "./dist/oscd-component.js"
42-
```
43-
44-
</details>
45-
46-
In order to replace all instances of the string `oscd-component` in your repository at once, you can use a tool like [git sed](https://github.com/ext/git-sed/blob/master/git-sed) in order to execute a substitute expression on all files in the worktree:
47-
48-
```sh
49-
git sed s/oscd-component/my-widget/g
50-
```
51-
52-
Make sure to use a dash `-` in the new component name and to rename all files with names starting with `oscd-component`:
53-
54-
```
55-
oscd-component.stories.ts
56-
oscd-component.spec.ts
57-
oscd-component.ts
58-
```
1+
# \<oscd-action-pane>
592

603
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
614

625
## Installation
636

647
```bash
65-
npm i oscd-component
8+
npm i @openscd/oscd-action-pane
669
```
6710

6811
## Usage
6912

7013
```html
7114
<script type="module">
72-
import 'oscd-component';
15+
import 'oscd-action-pane';
7316
</script>
7417

75-
<oscd-component></oscd-component>
18+
<oscd-action-pane></oscd-action-pane>
7619
```
7720

7821
## Linting and formatting
@@ -117,7 +60,6 @@ To build a production version of Storybook, run
11760
npm run storybook:build
11861
```
11962

120-
12163
## Tooling configs
12264

12365
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
@@ -131,3 +73,33 @@ npm start
13173
```
13274

13375
To run a local development server that serves the basic demo located in `demo/index.html`
76+
77+
## `oscd-action-pane.ts`:
78+
79+
### class: `OscdActionPane`
80+
81+
#### Superclass
82+
83+
| Name | Module | Package |
84+
| ------------ | ------ | ------- |
85+
| `LitElement` | | lit |
86+
87+
#### Properties/Attributes
88+
89+
| Name | Type | Default | Description |
90+
| ------------- | --------- | ----------- | -------------------------------------------------------------- |
91+
| `label` | `string` | `undefined` | Caption text, displayed in the header. |
92+
| `icon` | `string` | `undefined` | Icon name, displays icon as described in `@material/mwc-icon`. |
93+
| `secondary` | `boolean` | `false` | Color header with secondary theme color while focus is within. |
94+
| `highlighted` | `boolean` | `false` | highlight pane with dotted outline item. |
95+
| `level` | `number` | `1` | nesting level, default (closest pane ancestor's level) + 1 |
96+
97+
<hr/>
98+
99+
### Exports
100+
101+
| Kind | Name | Declaration | Module | Package |
102+
| ---- | ------------------ | ---------------- | ------------------- | ------- |
103+
| `js` | `oscd-action-pane` | oscd-action-pane | oscd-action-pane.ts | |
104+
105+
&copy; 2023 Alliander N.V.

‎custom-elements.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# `oscd-component.ts`:
1+
# `oscd-action-pane.ts`:
22

3-
## class: `OscdComponent`
3+
## class: `OscdActionPane`
44

55
### Superclass
66

‎demo/index.html

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en-GB">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link
6+
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
7+
rel="stylesheet"
8+
/>
9+
<style>
10+
body {
11+
--mdc-theme-on-surface: #657b83;
12+
--mdc-theme-surface: #fdf6e3;
13+
--mdc-theme-primary: #2aa198;
14+
--mdc-theme-on-primary: #eee8d5;
15+
--mdc-theme-secondary: #6c71c4;
16+
background: white;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<div id="demo"></div>
22+
23+
<script type="module">
24+
import { html, render, css } from 'lit';
25+
import '../dist/src/oscd-action-pane.js';
26+
import '@material/mwc-icon';
27+
28+
const title = 'Click this pane!';
29+
const icon = 'shopping_cart';
30+
const level = 2;
31+
32+
const styles = css``;
33+
34+
render(
35+
html`
36+
<oscd-action-pane .label=${title}> just a title </oscd-action-pane>
37+
<oscd-action-pane .label=${title} .icon=${icon}>
38+
tiltle and icon
39+
</oscd-action-pane>
40+
<oscd-action-pane .label=${title} .icon=${icon} highlighted>
41+
title, icon and always highlighted with dotted lines
42+
</oscd-action-pane>
43+
<oscd-action-pane
44+
.label=${title}
45+
.icon=${icon}
46+
secondary
47+
.level=${level}
48+
>
49+
title, icon and secondary color highlight when selected and a level
50+
below the rest
51+
</oscd-action-pane>
52+
<oscd-action-pane .label=${title} .icon=${icon} .level=${level + 1}>
53+
same as above but 1 level lower and primary color highlight when
54+
selected
55+
</oscd-action-pane>
56+
<oscd-action-pane
57+
.label=${title}
58+
.icon=${icon}
59+
secondary
60+
highlighted
61+
.level=${level + 2}
62+
>
63+
same as above but 1 level lower and secondary color highligh when
64+
selected and always highlighted with dotted lines
65+
</oscd-action-pane>
66+
`,
67+
68+
document.querySelector('#demo')
69+
);
70+
</script>
71+
</body>
72+
</html>

‎index.html

-29
This file was deleted.

‎oscd-component.spec.ts

-41
This file was deleted.

0 commit comments

Comments
 (0)