@hotosm/ui 0.2.0-a2 → 0.2.0-a4

package/README.md

@@ -9,7 +9,7 @@
 </p>
 <p align="center">
   <a href="https://github.com/hotosm/ui/actions/workflows/publish.yml" target="_blank">
-      <img src="https://github.com/hotosm/ui/actions/workflows/publish.yml/badge.svg" alt="Publish">
+      <img src="https://github.com/hotosm/ui/actions/workflows/publish.yml/badge.svg?event=release" alt="Publish">
   </a>
   <a href="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml" target="_blank">
       <img src="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml/badge.svg?branch=main" alt="CDN Deploy">
@@ -65,13 +65,13 @@ pnpm install @hotosm/ui
 // Import the components
 <script
   type="module"
-  src="https://s3.amazonaws.com/hotosm-ui/latest/ui.js"
+  src="https://s3.amazonaws.com/hotosm-ui/latest/components/Button.js"
 ></script>
 
 // Import the styles (or create your own)
 <link
   rel="stylesheet"
-  href="https://s3.amazonaws.com/hotosm-ui/latest/style.css"
+  href="https://s3.amazonaws.com/hotosm-ui/latest/theme/hot.css"
 />
 
 <div>
@@ -96,7 +96,7 @@ pnpm install @hotosm/ui
 ```
 
 ```js
-import { hot-button } from '@hotosm/ui';
+import '@hotosm/ui/components/Button'
 
 const HomePage = ({}) => {
   return (

package/components/Button.d.ts

@@ -0,0 +1,16 @@
+import "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import { LitElement } from "lit";
+export declare class Button extends LitElement {
+    name: string;
+    /** Disable the button, greyed out, not clickable. */
+    disabled: boolean;
+    /** CVA button type. */
+    variant: "primary" | "secondary";
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+    private _handleClick;
+}
+export default Button;

package/components/Button.js

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+const buttonStyle = cva("bg-primary text-white py-3 px-6 rounded leading-[1.15]", {
+    variants: {
+        variant: {
+            primary: "bg-primary border-2 border-primary text-white",
+            secondary: `
+          bg-white border-2 border-primary text-primary! hover:bg-lightGray
+          focus:bg-transparent focus:border-primary
+        `,
+        },
+        disabled: {
+            true: "opacity-50 cursor-not-allowed",
+            false: "",
+        },
+    },
+});
+export class Button extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "hot-button";
+        /** Disable the button, greyed out, not clickable. */
+        this.disabled = false;
+        /** CVA button type. */
+        this.variant = "primary";
+    }
+    render() {
+        return html `<sl-button
+      class=${buttonStyle({
+            variant: this.variant,
+            disabled: this.disabled,
+        })}
+      ?disabled=${this.disabled}
+      @click=${(e) => {
+            this._handleClick(e);
+        }}
+    >
+      <slot></slot>
+    </sl-button>`;
+    }
+    _handleClick(e) {
+        // As the original event is also named 'click'
+        // stop propagation of the original event
+        e.stopPropagation();
+        this.dispatchEvent(new Event("click"));
+    }
+}
+Button.styles = [
+    css `
+      @unocss-placeholder;
+    `,
+];
+__decorate([
+    property()
+], Button.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "variant", void 0);
+export default Button;
+// Define web component
+customElements.define("hot-button", Button);

package/components/Toolbar.js

@@ -13,7 +13,6 @@ import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
-// import reset from "./tailwind-reset";
 // import { cva } from "class-variance-authority";
 // const toolbarStyle = cva(
 //   "some-css-var",

package/components/Tracking.d.ts

@@ -0,0 +1,25 @@
+import "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/alert/alert.js';
+import { LitElement } from "lit";
+declare global {
+    interface Window {
+        _paq: any[];
+    }
+}
+export declare class Tracking extends LitElement {
+    name: string;
+    /** The Matomo site id for tracking. */
+    siteId: string;
+    /** The domains to apply tracking. */
+    domain: string;
+    isOpen: boolean;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+    private _closeAlert;
+    private _setAgree;
+    private _setDisagree;
+    connectedCallback(): void;
+}
+export default Tracking;

package/components/Tracking.js

@@ -0,0 +1,156 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/alert/alert.js';
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+export class Tracking extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "hot-tracking";
+        /** The Matomo site id for tracking. */
+        this.siteId = "";
+        /** The domains to apply tracking. */
+        this.domain = "";
+        this.isOpen = true;
+    }
+    render() {
+        return html `<sl-alert
+      variant="danger"
+      ?open=${this.isOpen}
+    >
+    <sl-icon id="hot-red-text" slot="icon" name="info-circle"></sl-icon>
+
+    <p id="tracking-header">
+    About the information we collect
+    </p>
+
+    <p>
+    We use cookies and similar technologies to recognize and analyze your visits,
+    and measure traffic usage and activity. You can learn about how we use the data
+    about your visit or information you provide reading our
+      <a
+        id="hot-red-text"
+        href="https://www.hotosm.org/privacy"
+        target="_blank"
+        rel="noopener noreferrer"
+      >privacy policy</a>.
+    By clicking "I Agree", you consent to the use of cookies.
+    </p>
+
+    <sl-button @click=${(e) => {
+            this._setAgree(e);
+        }}>I Agree</sl-button>
+    <sl-button @click=${(e) => {
+            this._setDisagree(e);
+        }}>I Do Not Agree</sl-button>
+    </sl-alert>`;
+    }
+    _closeAlert() {
+        this.isOpen = false;
+        localStorage.setItem(`${this.siteId}-optout-closed`, 'true');
+    }
+    _setAgree(_e) {
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        const _paq = (window._paq = window._paq || []);
+        if (_paq.length === 0) {
+            return;
+        }
+        _paq.push(['rememberConsentGiven']);
+        this._closeAlert();
+        this.dispatchEvent(new Event('agree', { bubbles: true, composed: true }));
+    }
+    _setDisagree(_e) {
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        const _paq = (window._paq = window._paq || []);
+        if (_paq.length === 0) {
+            return;
+        }
+        _paq.push(['forgetConsentGiven']);
+        this._closeAlert();
+        this.dispatchEvent(new Event('disagree', { bubbles: true, composed: true }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (localStorage.getItem(`${this.siteId}-optout-closed`) === 'true') {
+            // Close automatically if already optout
+            this.isOpen = false;
+        }
+        // Configure Matomo tracking
+        const matomoTrackingId = this.siteId;
+        if ((matomoTrackingId.length === 0) || this.domain.length === 0) {
+            console.warn('Matomo init failed. No site id or domains provided.');
+            this.isOpen = false;
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        const _paq = (window._paq = window._paq || []);
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['requireConsent']);
+        _paq.push(['setDomains', [this.domain]]);
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']); // Tracks downloads
+        _paq.push(['trackVisibleContentImpressions']); // Tracks content blocks
+        (function () {
+            const u = '//matomo.hotosm.org/';
+            _paq.push(['setTrackerUrl', u + 'matomo.php']);
+            _paq.push(['setSiteId', matomoTrackingId]);
+            const d = document;
+            const g = d.createElement('script');
+            const s = d.getElementsByTagName('script')[0];
+            if ((s?.parentNode) != null) {
+                g.async = true;
+                g.src = u + 'matomo.js';
+                s.parentNode.insertBefore(g, s);
+            }
+            else {
+                console.warn('Script insertion failed. Parent node is null.');
+            }
+        })();
+    }
+}
+Tracking.styles = [
+    css `
+      @unocss-placeholder;
+    `,
+    // Temp styles until UnoCSS setup
+    css `
+      #tracking-header {
+        font-weight: var(--sl-font-weight-bold);
+        font-size: var(--sl-font-size-large);
+        color: #d63f3f;
+      }
+      #hot-red-text {
+        color: #d63f3f;
+      }
+      sl-alert::part(base) {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1000;
+        width: 80vw;
+      }
+    `
+];
+__decorate([
+    property()
+], Tracking.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: "site-id" })
+], Tracking.prototype, "siteId", void 0);
+__decorate([
+    property({ type: String })
+], Tracking.prototype, "domain", void 0);
+__decorate([
+    state()
+], Tracking.prototype, "isOpen", void 0);
+export default Tracking;
+// Define web component
+customElements.define("hot-tracking", Tracking);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/ui",
-  "version": "0.2.0a2",
+  "version": "0.2.0a4",
   "description": "Shared UI components with theming for use across HOTOSM tools.",
   "type": "module",
   "engines": {
@@ -87,9 +87,9 @@
   "scripts": {
     "dev": "pnpm run build && storybook dev -p 3001",
     "build": "tsc",
-    "build:docstrings": "wca analyze 'components/**/*.{js,ts}' --outDir 'docs/components' --format 'markdown'",
-    "build:stories": "storybook build --output-dir=docs/stories",
-    "build:docs": "pnpm run build:docstrings && pnpm run dev:build-web-components && pnpm run build:stories",
+    "build:docstrings": "wca analyze 'components/*.ts' --outDir 'docs/components' --format 'markdown'",
+    "build:stories": "pnpm run build && storybook build --output-dir=docs/stories",
+    "build:docs": "pnpm run build:docstrings && pnpm run build:stories",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint --ext .js,.ts ./"
   }