Skip to content
This repository was archived by the owner on Nov 25, 2025. It is now read-only.

Commit 096873c

Browse files
Stef3stStef3st
authored
Merge pull request #6 from openscd/5-improve-and-cleanup-action-pane-component
fix: improve and cleanup action pane component
2 parents ca3b06f + fa2921d commit 096873c

15 files changed

Lines changed: 2650 additions & 2347 deletions

‎.github/workflows/release-please.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,3 @@ jobs:
2828
env:
2929
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
3030
if: ${{ steps.release.outputs.release_created }}
31-
- run: npm run deploy
32-
if: ${{ steps.release.outputs.release_created }}

‎.storybook/preview-head.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
33
rel="stylesheet"
44
/>
5+
<link
6+
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Roboto:wght@300;400;500&display=swap"
7+
rel="stylesheet"
8+
/>
59
<style>
610
body {
711
--oscd-action-pane-theme-on-surface: #657b83;

‎README.md‎

Lines changed: 58 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ npm i @openscd/oscd-action-pane
1212

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

1818
<oscd-action-pane></oscd-action-pane>
@@ -60,13 +60,24 @@ To build a production version of Storybook, run
6060
npm run storybook:build
6161
```
6262

63-
6463
## Tooling configs
6564

6665
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
6766

6867
If you customize the configuration a lot, you can consider moving them to individual files.
6968

69+
### Icon font
70+
71+
Material Icons are being used for the icons. This font needs to be added in the html first.
72+
You can add it like so:
73+
74+
```html
75+
<link
76+
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
77+
rel="stylesheet"
78+
/>
79+
```
80+
7081
## Local Demo with `web-dev-server`
7182

7283
```bash
@@ -75,31 +86,63 @@ npm start
7586

7687
To run a local development server that serves the basic demo located in `demo/index.html`
7788

78-
## `oscd-action-pane.ts`:
7989

80-
### class: `OscdActionPane`
90+
## `src/oscd-action-pane.ts`:
91+
92+
### class: `OscdActionPane`, `oscd-action-pane`
8193

8294
#### Superclass
8395

8496
| Name | Module | Package |
8597
| ------------ | ------ | ------- |
8698
| `LitElement` | | lit |
8799

88-
#### Properties/Attributes
100+
#### Fields
101+
102+
| Name | Privacy | Type | Default | Description | Inherited From |
103+
| ------------- | ------- | --------------------- | ------- | ------------------------------------------------------------- | -------------- |
104+
| `label` | | `string \| undefined` | | caption text, displayed in the header | |
105+
| `icon` | | `string \| undefined` | | icon name, displayed unless the "icon" slot is filled | |
106+
| `secondary` | | `boolean` | `false` | color header with secondary theme color while focus is within | |
107+
| `highlighted` | | `boolean` | `false` | highlight pane with dotted outline | |
108+
| `level` | | `number` | `1` | nesting level, default (closest pane ancestor's level) + 1 | |
109+
110+
#### CSS Properties
111+
112+
| Name | Default | Description |
113+
| ------------------------------------- | ------------------------- | ---------------------------------- |
114+
| `--oscd-action-icon-theme-primary` | `--oscd-theme-primary` | Color for border on even levels. |
115+
| `--oscd-action-icon-theme-on-primary` | `--oscd-theme-on-primary` | Pane color for the uneven levels. |
116+
| `--oscd-action-icon-theme-secondary` | `--oscd-theme-secondary` | Color for border on uneven levels. |
117+
| `--oscd-action-pane-theme-surface` | `--oscd-theme-surface` | Pane color for the even levels. |
118+
| `--oscd-action-icon-theme-on-surface` | `--oscd-theme-on-surface` | Icon and label color. |
119+
| `--oscd-action-icon-theme-font` | `--oscd-theme-font` | Font for label. |
120+
121+
#### Slots
122+
123+
| Name | Description |
124+
| -------- | ------------------------------------------------------------------------ |
125+
| `action` | May contain up to eight icon buttons. |
126+
| `icon` | If filled overrides the icon property. |
127+
| | The default slot will be rendered into the pane body in a single column. |
89128

90-
| Name | Type | Default | Description |
91-
| ------------- | --------- | ----------- | -------------------------------------------------------------- |
92-
| `label` | `string` | `undefined` | Caption text, displayed in the header. |
93-
| `icon` | `string` | `undefined` | Icon name, displays icon as described in `@material/mwc-icon`. |
94-
| `secondary` | `boolean` | `false` | Color header with secondary theme color while focus is within. |
95-
| `highlighted` | `boolean` | `false` | highlight pane with dotted outline item. |
96-
| `level` | `number` | `1` | nesting level, default (closest pane ancestor's level) + 1 |
97129
<hr/>
98130

99131
### Exports
100132

101-
| Kind | Name | Declaration | Module | Package |
102-
| ---- | ------------------ | ---------------- | ------------------- | ------- |
103-
| `js` | `oscd-action-pane` | oscd-action-pane | oscd-action-pane.ts | |
133+
| Kind | Name | Declaration | Module | Package |
134+
| ---- | ---------------- | -------------- | ----------------------- | ------- |
135+
| `js` | `OscdActionPane` | OscdActionPane | src/oscd-action-pane.ts | |
136+
137+
## `src/OscdActionPane.ts`:
138+
139+
### Exports
140+
141+
| Kind | Name | Declaration | Module | Package |
142+
| --------------------------- | ------------------ | -------------- | ------------------------ | ------- |
143+
| `custom-element-definition` | `oscd-action-pane` | OscdActionPane | /src/oscd-action-pane.js | |
144+
| `js` | `OscdActionPane` | OscdActionPane | src/OscdActionPane.ts | |
145+
146+
104147

105148
&copy; 2023 Alliander N.V.

‎custom-elements-manifest.config.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { readmePlugin } from 'cem-plugin-readme';
22

33
export default {
4-
globs: ['*.ts'],
5-
exclude: ['**/*.spec.ts', '**/*.test.ts', '**/*.stories.ts'],
4+
globs: ['src/*.ts'],
5+
exclude: ['test/*.ts', 'stories/*.ts'],
66
litelement: true,
77
plugins: [
88
readmePlugin({
9-
header: 'README.head.md',
10-
footer: 'README.foot.md',
9+
header: 'head.md',
10+
footer: 'foot.md',
11+
private: 'hidden',
1112
}),
12-
]
13-
}
13+
],
14+
};

‎demo/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
77
rel="stylesheet"
88
/>
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Roboto:wght@300;400;500&display=swap"
11+
rel="stylesheet"
12+
/>
913
<style>
1014
body {
1115
--oscd-action-pane-theme-on-surface: #657b83;
@@ -23,7 +27,7 @@
2327

2428
<script type="module">
2529
import { html, render, css } from 'lit';
26-
import '../dist/src/oscd-action-pane.js';
30+
import '../dist/OscdActionPane.js';
2731
import '@material/mwc-icon';
2832

2933
const title = 'Click this pane!';

README.foot.md renamed to foot.md

File renamed without changes.

README.head.md renamed to head.md

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ npm i @openscd/oscd-action-pane
1212

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

1818
<oscd-action-pane></oscd-action-pane>
@@ -60,13 +60,24 @@ To build a production version of Storybook, run
6060
npm run storybook:build
6161
```
6262

63-
6463
## Tooling configs
6564

6665
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
6766

6867
If you customize the configuration a lot, you can consider moving them to individual files.
6968

69+
### Icon font
70+
71+
Material Icons are being used for the icons. This font needs to be added in the html first.
72+
You can add it like so:
73+
74+
```html
75+
<link
76+
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
77+
rel="stylesheet"
78+
/>
79+
```
80+
7081
## Local Demo with `web-dev-server`
7182

7283
```bash

0 commit comments

Comments
 (0)