Skip to content

Commit d9cc5c4

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

36 files changed

+929
-426
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

+6-1
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,14 @@ 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 run build
26+
if: ${{ steps.release.outputs.release_created }}
27+
- run: npm publish --access public
2628
env:
2729
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
2830
if: ${{ steps.release.outputs.release_created }}
31+
- run: |
32+
git config user.name "GitHubActions"
33+
git config user.email "<[email protected]>"
2934
- run: npm run deploy
3035
if: ${{ steps.release.outputs.release_created }}

‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,15 @@
99
/node_modules/
1010
/npm-debug.log
1111

12+
## failed screenshots
13+
/screenshots/*/failed/
14+
1215
## testing
1316
/coverage/
1417

18+
## local debug
19+
/.npmrc
20+
1521
## temp folders
1622
/.tmp/
1723

‎.npmignore

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
## failed screenshots
13+
/screenshots/*/failed/
14+
15+
## testing
16+
/coverage/
17+
18+
## local debug
19+
/.npmrc
20+
21+
## temp folders
22+
/.tmp/
23+
24+
# build
25+
/_site/
26+
/out-tsc/
27+
28+
storybook-static
29+
custom-elements.json

‎.storybook/preview-head.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<link
2+
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
3+
rel="stylesheet"
4+
/>
5+
<style>
6+
body {
7+
--oscd-action-icon-theme-on-surface: #657b83;
8+
--oscd-action-icon-theme-primary: #2aa198;
9+
--oscd-action-icon-theme-on-primary: #eee8d5;
10+
--oscd-action-icon-theme-secondary: #6c71c4;
11+
--oscd-action-icon-theme-font: 'Roboto', sans-serif;
12+
}
13+
</style>

‎README.foot.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
2-
&copy; 1970 THE AUTHORS
1+
&copy; 2023 Alliander N.V.

‎README.head.md

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
# \<oscd-component>
1+
# \<oscd-action-icon>
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-icon
99
```
1010

1111
## Usage
1212

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

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

2121
## Linting and formatting
@@ -60,7 +60,6 @@ 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.

‎README.md

+63-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-icon>
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-icon
669
```
6710

6811
## Usage
6912

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

75-
<oscd-component></oscd-component>
18+
<oscd-action-icon></oscd-action-icon>
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,62 @@ npm start
13173
```
13274

13375
To run a local development server that serves the basic demo located in `demo/index.html`
76+
77+
78+
## `src/oscd-action-icon.ts`:
79+
80+
### class: `OscdActionIcon`, `oscd-action-icon`
81+
82+
#### Superclass
83+
84+
| Name | Module | Package |
85+
| ------------ | ------ | ------- |
86+
| `LitElement` | | lit |
87+
88+
#### Fields
89+
90+
| Name | Privacy | Type | Default | Description | Inherited From |
91+
| ------------- | ------- | --------------------- | ------- | ------------------------------------------------------------- | -------------- |
92+
| `label` | | `string \| undefined` | | caption text, displayed in the header | |
93+
| `icon` | | `string \| undefined` | | icon name, displayed unless the "icon" slot is filled | |
94+
| `secondary` | | `boolean` | `false` | color header with secondary theme color while focus is within | |
95+
| `highlighted` | | `boolean` | `false` | highlight pane with dotted outline | |
96+
| `hideActions` | | `boolean` | `false` | disables CSS adoption to action buttons | |
97+
98+
#### CSS Properties
99+
100+
| Name | Default | Description |
101+
| ------------------------------------- | ------------------------- | ----------- |
102+
| `--oscd-action-icon-theme-primary` | `--oscd-theme-primary` | |
103+
| `--oscd-action-icon-theme-on-primary` | `--oscd-theme-on-primary` | |
104+
| `--oscd-action-icon-theme-secondary` | `--oscd-theme-secondary` | |
105+
| `--oscd-action-icon-theme-on-surface` | `--oscd-theme-on-surface` | |
106+
| `--oscd-action-icon-theme-font` | `--oscd-theme-font` | |
107+
108+
#### Slots
109+
110+
| Name | Description |
111+
| -------- | ------------------------------------------------------------------------ |
112+
| `action` | May contain up to eight icon buttons. |
113+
| `icon` | If filled overrides the icon property. |
114+
| | The default slot will be rendered into the pane body in a single column. |
115+
116+
<hr/>
117+
118+
### Exports
119+
120+
| Kind | Name | Declaration | Module | Package |
121+
| ---- | ---------------- | -------------- | ----------------------- | ------- |
122+
| `js` | `OscdActionIcon` | OscdActionIcon | src/oscd-action-icon.ts | |
123+
124+
## `src/OscdActionIcon.ts`:
125+
126+
### Exports
127+
128+
| Kind | Name | Declaration | Module | Package |
129+
| --------------------------- | ------------------ | -------------- | ------------------------ | ------- |
130+
| `custom-element-definition` | `oscd-action-icon` | OscdActionIcon | /src/oscd-action-icon.js | |
131+
| `js` | `OscdActionIcon` | OscdActionIcon | src/OscdActionIcon.ts | |
132+
133+
134+
&copy; 2023 Alliander N.V.

‎custom-elements-manifest.config.js

+4-3
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'],
4+
globs: ['src/*.ts'],
55
exclude: ['**/*.spec.ts', '**/*.test.ts', '**/*.stories.ts'],
66
litelement: true,
77
plugins: [
88
readmePlugin({
99
header: 'README.head.md',
1010
footer: 'README.foot.md',
11+
private: 'hidden',
1112
}),
12-
]
13-
}
13+
],
14+
};

‎custom-elements.md

-24
This file was deleted.

‎demo/index.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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+
--oscd-action-icon-theme-on-surface: #657b83;
12+
--oscd-action-icon-theme-surface: #fdf6e3;
13+
--oscd-action-icon-theme-primary: #2aa198;
14+
--oscd-action-icon-theme-on-primary: #eee8d5;
15+
--oscd-action-icon-theme-secondary: #6c71c4;
16+
--oscd-action-icon-theme-font: 'Roboto', sans-serif;
17+
background: white;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<div id="demo"></div>
23+
24+
<script type="module">
25+
import { html, render, css } from 'lit';
26+
import '../dist/src/OscdActionIcon.js';
27+
28+
const title = 'Hello owc World';
29+
const icon = 'edit';
30+
render(
31+
html`
32+
<oscd-action-icon .label=${'Label and icon'} .icon=${icon}>
33+
</oscd-action-icon>
34+
<oscd-action-icon
35+
.label=${'Label, icon and highlighted'}
36+
.icon=${icon}
37+
highlighted
38+
>
39+
</oscd-action-icon>
40+
<oscd-action-icon
41+
.label=${'Label, icon and secondary color when selected'}
42+
.icon=${icon}
43+
secondary
44+
>
45+
</oscd-action-icon>
46+
<oscd-action-icon
47+
.label=${'Same as above but highlighted'}
48+
.icon=${icon}
49+
secondary
50+
highlighted
51+
>
52+
</oscd-action-icon>
53+
<oscd-action-icon
54+
.label=${'Same as above but without CSS adoption'}
55+
.icon=${icon}
56+
secondary
57+
highlighted
58+
hideActions
59+
>
60+
</oscd-action-icon>
61+
`,
62+
document.querySelector('#demo')
63+
);
64+
</script>
65+
</body>
66+
</html>

0 commit comments

Comments
 (0)