Merge pull request #6 from openscd/5-improve-and-cleanup-action-pane-…

…component fix: improve and cleanup action pane component
openscd · Jul 17, 2023 · 096873c · 096873c
2 parents ca3b06f + fa2921d
commit 096873c
Show file tree

Hide file tree

Showing 15 changed files with 2,650 additions and 2,347 deletions.
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
@@ -28,5 +28,3 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
         if: ${{ steps.release.outputs.release_created }}
-      - run: npm run deploy
-        if: ${{ steps.release.outputs.release_created }}
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -2,6 +2,10 @@
   href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
   rel="stylesheet"
 />
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Roboto:wght@300;400;500&display=swap"
+  rel="stylesheet"
+/>
 <style>
   body {
     --oscd-action-pane-theme-on-surface: #657b83;

diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ npm i @openscd/oscd-action-pane
 
 ```html
 <script type="module">
-  import 'oscd-action-pane';
+  import '@openscd/oscd-action-pane';
 </script>
 
 <oscd-action-pane></oscd-action-pane>
@@ -60,13 +60,24 @@ To build a production version of Storybook, run
 npm run storybook:build
 ```
 
-
 ## Tooling configs
 
 For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
 
 If you customize the configuration a lot, you can consider moving them to individual files.
 
+### Icon font
+
+Material Icons are being used for the icons. This font needs to be added in the html first.
+You can add it like so:
+
+```html
+<link
+  href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
+  rel="stylesheet"
+/>
+```
+
 ## Local Demo with `web-dev-server`
 
 ```bash
@@ -75,31 +86,63 @@ npm start
 
 To run a local development server that serves the basic demo located in `demo/index.html`
 
-## `oscd-action-pane.ts`:
 
-### class: `OscdActionPane`
+## `src/oscd-action-pane.ts`:
+
+### class: `OscdActionPane`, `oscd-action-pane`
 
 #### Superclass
 
 | Name         | Module | Package |
 | ------------ | ------ | ------- |
 | `LitElement` |        | lit     |
 
-#### Properties/Attributes
+#### Fields
+
+| Name          | Privacy | Type                  | Default | Description                                                   | Inherited From |
+| ------------- | ------- | --------------------- | ------- | ------------------------------------------------------------- | -------------- |
+| `label`       |         | `string \| undefined` |         | caption text, displayed in the header                         |                |
+| `icon`        |         | `string \| undefined` |         | icon name, displayed unless the "icon" slot is filled         |                |
+| `secondary`   |         | `boolean`             | `false` | color header with secondary theme color while focus is within |                |
+| `highlighted` |         | `boolean`             | `false` | highlight pane with dotted outline                            |                |
+| `level`       |         | `number`              | `1`     | nesting level, default (closest pane ancestor's level) + 1    |                |
+
+#### CSS Properties
+
+| Name                                  | Default                   | Description                        |
+| ------------------------------------- | ------------------------- | ---------------------------------- |
+| `--oscd-action-icon-theme-primary`    | `--oscd-theme-primary`    | Color for border on even levels.   |
+| `--oscd-action-icon-theme-on-primary` | `--oscd-theme-on-primary` | Pane color for the uneven levels.  |
+| `--oscd-action-icon-theme-secondary`  | `--oscd-theme-secondary`  | Color for border on uneven levels. |
+| `--oscd-action-pane-theme-surface`    | `--oscd-theme-surface`    | Pane color for the even levels.    |
+| `--oscd-action-icon-theme-on-surface` | `--oscd-theme-on-surface` | Icon and label color.              |
+| `--oscd-action-icon-theme-font`       | `--oscd-theme-font`       | Font for label.                    |
+
+#### Slots
+
+| Name     | Description                                                              |
+| -------- | ------------------------------------------------------------------------ |
+| `action` | May contain up to eight icon buttons.                                    |
+| `icon`   | If filled overrides the icon property.                                   |
+|          | The default slot will be rendered into the pane body in a single column. |
 
-| Name          | Type      | Default     | Description                                                    |
-| ------------- | --------- | ----------- | -------------------------------------------------------------- |
-| `label`       | `string`  | `undefined` | Caption text, displayed in the header.                         |
-| `icon`        | `string`  | `undefined` | Icon name, displays icon as described in `@material/mwc-icon`. |
-| `secondary`   | `boolean` | `false`     | Color header with secondary theme color while focus is within. |
-| `highlighted` | `boolean` | `false`     | highlight pane with dotted outline item.                       |
-| `level`       | `number`  | `1`         | nesting level, default (closest pane ancestor's level) + 1     |
 <hr/>
 
 ### Exports
 
-| Kind | Name               | Declaration      | Module              | Package |
-| ---- | ------------------ | ---------------- | ------------------- | ------- |
-| `js` | `oscd-action-pane` | oscd-action-pane | oscd-action-pane.ts |         |
+| Kind | Name             | Declaration    | Module                  | Package |
+| ---- | ---------------- | -------------- | ----------------------- | ------- |
+| `js` | `OscdActionPane` | OscdActionPane | src/oscd-action-pane.ts |         |
+
+## `src/OscdActionPane.ts`:
+
+### Exports
+
+| Kind                        | Name               | Declaration    | Module                   | Package |
+| --------------------------- | ------------------ | -------------- | ------------------------ | ------- |
+| `custom-element-definition` | `oscd-action-pane` | OscdActionPane | /src/oscd-action-pane.js |         |
+| `js`                        | `OscdActionPane`   | OscdActionPane | src/OscdActionPane.ts    |         |
+
+
 
 &copy; 2023 Alliander N.V.
diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
@@ -1,13 +1,14 @@
 import { readmePlugin } from 'cem-plugin-readme';
 
 export default {
-  globs: ['*.ts'],
-  exclude: ['**/*.spec.ts', '**/*.test.ts', '**/*.stories.ts'],
+  globs: ['src/*.ts'],
+  exclude: ['test/*.ts', 'stories/*.ts'],
   litelement: true,
   plugins: [
     readmePlugin({
-      header: 'README.head.md',
-      footer: 'README.foot.md',
+      header: 'head.md',
+      footer: 'foot.md',
+      private: 'hidden',
     }),
-  ]
-}
+  ],
+};
diff --git a/demo/index.html b/demo/index.html
@@ -6,6 +6,10 @@
       href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
     <style>
       body {
         --oscd-action-pane-theme-on-surface: #657b83;
@@ -23,7 +27,7 @@
 
     <script type="module">
       import { html, render, css } from 'lit';
-      import '../dist/src/oscd-action-pane.js';
+      import '../dist/OscdActionPane.js';
       import '@material/mwc-icon';
 
       const title = 'Click this pane!';

diff --git a/README.foot.md → foot.md b/README.foot.md → foot.md
diff --git a/README.head.md → head.md b/README.head.md → head.md
@@ -12,7 +12,7 @@ npm i @openscd/oscd-action-pane
 
 ```html
 <script type="module">
-  import 'oscd-action-pane';
+  import '@openscd/oscd-action-pane';
 </script>
 
 <oscd-action-pane></oscd-action-pane>
@@ -60,13 +60,24 @@ To build a production version of Storybook, run
 npm run storybook:build
 ```
 
-
 ## Tooling configs
 
 For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
 
 If you customize the configuration a lot, you can consider moving them to individual files.
 
+### Icon font
+
+Material Icons are being used for the icons. This font needs to be added in the html first.
+You can add it like so:
+
+```html
+<link
+  href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
+  rel="stylesheet"
+/>
+```
+
 ## Local Demo with `web-dev-server`
 
 ```bash