Merge pull request #10 from halkeye/2022-10-12

2022 10 12

.eslintignore

@@ -4,3 +4,13 @@ docs-src/*
 rollup-config.js
 custom-elements.json
 web-dev-server.config.js
+!.storybook
+node_modules/
+docs/node_modules/
+docs/
+coverage/
+/lib/
+/test/
+build/
+dist/
+storybook-static/

.eslintrc.cjs

@@ -1,6 +1,14 @@
 module.exports = {
   "root": true,
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:wc/recommended", "plugin:lit/all", "plugin:storybook/recommended", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:wc/recommended",
+    "plugin:lit/all",
+    "plugin:storybook/recommended",
+    "prettier"
+  ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2020,
@@ -23,7 +31,10 @@ module.exports = {
     }]
   },
   "overrides": [{
-    "files": ["rollup.config.js", "web-test-runner.config.js", ".eslintrc.cjs", "*.cjs"],
+    "files": ["rollup.config.js", "web-test-runner.config.js", ".eslintrc.cjs", "*.cjs", ".storybook/*.cjs"],
+    "rules": {
+      "@typescript-eslint/no-var-requires": "off"
+    },
     "env": {
       "node": true
     }

.storybook/main.cjs

@@ -1,4 +1,3 @@
-const path = require('path');
 const postcss = require('postcss');
 
 const processor = postcss(require('../postcss.config.cjs'));
@@ -22,7 +21,7 @@ module.exports = {
     "name": "@storybook/web-components-webpack5",
     "options": {}
   },
-  webpackFinal: async (config, {}) => {
+  webpackFinal: async (config/*, {}*/) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.

.storybook/preview.js

@@ -3,9 +3,9 @@ import customElements from '../custom-elements.json';
 setCustomElementsManifest(customElements);
 
 export const parameters = {
-  // docs: {inlineStories: false, },
   actions: {argTypesRegex: "^on[A-Z].*"},
   controls: {
+    expanded: true,
     matchers: {
       color: /(background|color)$/i,
       date: /(^date$|Date$)/,

package.json

@@ -18,7 +18,7 @@
     "build:watch": "rollup -c --watch",
     "clean": "rimraf build jio-*.{d.ts,d.ts.map,js,js.map} test/jio-*.{d.ts,d.ts.map,js,js.map} test/jio-*_test.{d.ts,d.ts.map,js,js.map} shared-styles.{d.ts,d.ts.map,js,js.map}",
     "lint": "npm run lint:eslint && npm run lint:css",
-    "lint:eslint": "eslint 'src/**/*.ts'",
+    "lint:eslint": "eslint .",
     "lint:css": "stylelint \"src/**/*.css\"",
     "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
     "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
@@ -96,7 +96,7 @@
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-lit": "^1.6.1",
-    "eslint-plugin-storybook": "^0.6.5",
+    "eslint-plugin-storybook": "^0.6.6",
     "eslint-plugin-wc": "^1.3.2",
     "lint-staged": "^13.0.3",
     "lit-css-loader": "^2.0.0",

src/jio-navbar-link.ts

@@ -0,0 +1,91 @@
+import {LitElement, html, css} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {customElement, property} from 'lit/decorators.js';
+
+import {NavbarItemLink} from './jio-navbar';
+import './jio-cdf-logo';
+
+@customElement('jio-navbar-link')
+export class NavbarLink extends LitElement {
+  static override styles = css`
+.nav-link {
+  color: rgba(255, 255, 255, 0.55);
+  display: block;
+  padding: 0.5em 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+.dropdown-item {
+  background-color: transparent;
+  border: 0;
+  clear: both;
+  color: #212529;
+  display: block;
+  font-weight: 400;
+  padding: 0.25em 1rem;
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.dropdown-item:focus,
+.dropdown-item:hover {
+  background-color: #cbd3da;
+  color: #16181b;
+  text-decoration: none;
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  background-color: #007bff;
+  color: #fff;
+  text-decoration: none;
+}
+
+  `;
+
+  @property()
+  menuItem: NavbarItemLink | undefined;
+
+  /**
+   * Eg plugins.jenkins.io
+   */
+  @property()
+  property = 'https://www.jenkins.io';
+
+  @property()
+  class = "";
+
+  override render() {
+    if (!this.menuItem) {return;}
+    if (Array.isArray(this.menuItem.link)) {return;}
+    let href = this.menuItem.link;
+
+    const parsedMenuItem = new URL(this.menuItem.link, 'https://www.jenkins.io');
+    const parsedPropertyUrl = new URL(this.property);
+
+    // if its one of my properties, then its a relative link
+    if (parsedPropertyUrl.host === parsedMenuItem.host) {
+      href = parsedMenuItem.toString().substring(parsedMenuItem.toString().split('/').slice(0, 3).join('/').length);
+      // if its a different property, then full url
+    } else if (parsedPropertyUrl.host !== parsedMenuItem.host) {
+      href = parsedMenuItem.toString();
+    } else {
+      throw new Error(this.menuItem.toString());
+    }
+    return html`<a class=${`nav-link ${this.class}`} title=${ifDefined(this.menuItem.title)} href=${href}>
+        ${this.menuItem.header ? html`<strong>${this.menuItem.label}</strong>` : this.menuItem.label}
+      </a>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'jio-navbar-link': NavbarLink;
+  }
+}
+
+
+

src/jio-navbar.css

@@ -101,6 +101,7 @@ button.nav-link {
   box-shadow: 0 2px 4px -3px rgb(0 0 0 / 25%);
 }
 
+/* FIXME - move to jio-navbar-link */
 .nav-link {
   color: rgba(255, 255, 255, 0.55);
   display: block;
@@ -170,33 +171,6 @@ button.nav-link {
   vertical-align: 0.255em;
 }
 
-.dropdown-item {
-  background-color: transparent;
-  border: 0;
-  clear: both;
-  color: #212529;
-  display: block;
-  font-weight: 400;
-  padding: 0.25em 1rem;
-  text-align: inherit;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.dropdown-item:focus,
-.dropdown-item:hover {
-  background-color: #cbd3da;
-  color: #16181b;
-  text-decoration: none;
-}
-
-.dropdown-item.active,
-.dropdown-item:active {
-  background-color: #007bff;
-  color: #fff;
-  text-decoration: none;
-}
-
 .searchbox {
   box-sizing: border-box;
   display: inline-block;

src/jio-navbar.ts

@@ -1,12 +1,11 @@
-import {LitElement, html, TemplateResult} from 'lit';
-import {ifDefined} from 'lit/directives/if-defined.js';
+import {LitElement, html, css, TemplateResult} from 'lit';
 import {customElement, state, property} from 'lit/decorators.js';
 
 import './jio-cdf-logo';
 
 import styles from './jio-navbar.css';
 
-type NavbarItemLink = {
+export type NavbarItemLink = {
   label: TemplateResult | string;
   link: string | Array<NavbarItemLink>;
   header?: boolean;
@@ -231,24 +230,9 @@ export class Navbar extends LitElement {
   renderNavItemLink(menuItem: NavbarItemLink, extraClasses: Array<string> = []) {
     if (Array.isArray(menuItem.link)) {
       throw new Error('dropdown passed into render item');
-      return null;
     }
 
-    const parsedMenuItem = new URL(menuItem.link, 'https://www.jenkins.io');
-    const parsedPropertyUrl = new URL(menuItem.link, this.property);
-    let href = menuItem.link;
-    // if the property is not the same as the url (eg /downloads), then full link
-    if (parsedPropertyUrl.host !== parsedMenuItem.host) {
-      href = parsedMenuItem.toString();
-    } else {
-      href = parsedMenuItem.toString().substring(parsedMenuItem.toString().split('/').slice(0, 3).join('/').length);
-    }
-    return html`<a
-      class=${['nav-link'].concat(extraClasses).join(' ')}
-      title=${ifDefined(menuItem.title)}
-      href=${href}>
-        ${menuItem.header ? html`<strong>${menuItem.label}</strong>` : menuItem.label}
-      </a>`;
+    return html`<jio-navbar-link class=${extraClasses.join(" ")} .property=${this.property} .menuItem=${menuItem}></jio-navbar-link>`;
   }
 
   private _clickCollapseButton(e: Event) {
@@ -271,6 +255,7 @@ export class Navbar extends LitElement {
 declare global {
   interface HTMLElementTagNameMap {
     'jio-navbar': Navbar;
+    'jio-navbar-link': NavbarLink;
   }
 }
 

src/stories/DatetimeBox.stories.ts

@@ -1,4 +1,4 @@
-import {StoryFn, StoryObj, Meta} from '@storybook/web-components';
+import {StoryObj, Meta} from '@storybook/web-components';
 import {html} from 'lit';
 import {ifDefined} from 'lit/directives/if-defined.js';
 

src/stories/Navbar.stories.ts

@@ -1,4 +1,4 @@
-import {Story, Meta} from '@storybook/web-components';
+import {StoryFn, Meta} from '@storybook/web-components';
 import {html} from 'lit';
 import {ifDefined} from 'lit/directives/if-defined.js';
 
@@ -12,13 +12,13 @@ export default {
     expanded: true
   },
   argTypes: {
-    showSearchBox: {
-      control: {type: 'boolean'},
-    }
+    showSearchBox: {control: {type: 'boolean'}, },
+    visibleMenu: {table: {disable: true}},
+    menuToggled: {table: {disable: true}},
   }
 } as Meta;
 
-const Template: Story<Partial<Navbar>> = ({property, showSearchBox}) => html`<jio-navbar
+const Template: StoryFn<Partial<Navbar>> = ({property, showSearchBox}) => html`<jio-navbar
   property=${ifDefined(property)}
   ?showSearchBox=${showSearchBox}
 ></jio-navbar>`;