@hotosm/ui 0.2.0-b4 → 0.2.0-b5

package/components/react/index.ts

@@ -0,0 +1,63 @@
+export { default as Header } from './Header';
+export { default as Toolbar } from './Toolbar';
+export { default as Tracking } from './Tracking';
+export { default as Logo } from './Logo';
+
+export { default as Alert } from '@shoelace-style/shoelace/dist/react/alert/index.js';
+export { default as AnimatedImage } from '@shoelace-style/shoelace/dist/react/animated-image/index.js';
+export { default as Animation } from '@shoelace-style/shoelace/dist/react/animation/index.js';
+export { default as Avatar } from '@shoelace-style/shoelace/dist/react/avatar/index.js';
+export { default as Badge } from '@shoelace-style/shoelace/dist/react/badge/index.js';
+export { default as Breadcrumb } from '@shoelace-style/shoelace/dist/react/breadcrumb/index.js';
+export { default as BreadcrumbItem } from '@shoelace-style/shoelace/dist/react/breadcrumb-item/index.js';
+export { default as Button } from '@shoelace-style/shoelace/dist/react/button/index.js';
+export { default as ButtonGroup } from '@shoelace-style/shoelace/dist/react/button-group/index.js';
+export { default as Card } from '@shoelace-style/shoelace/dist/react/card/index.js';
+export { default as Carousel } from '@shoelace-style/shoelace/dist/react/carousel/index.js';
+export { default as CarouselItem } from '@shoelace-style/shoelace/dist/react/carousel-item/index.js';
+export { default as Checkbox } from '@shoelace-style/shoelace/dist/react/checkbox/index.js';
+export { default as ColorPicker } from '@shoelace-style/shoelace/dist/react/color-picker/index.js';
+export { default as CopyButton } from '@shoelace-style/shoelace/dist/react/copy-button/index.js';
+export { default as Details } from '@shoelace-style/shoelace/dist/react/details/index.js';
+export { default as Dialog } from '@shoelace-style/shoelace/dist/react/dialog/index.js';
+export { default as Divider } from '@shoelace-style/shoelace/dist/react/divider/index.js';
+export { default as Drawer } from '@shoelace-style/shoelace/dist/react/drawer/index.js';
+export { default as Dropdown } from '@shoelace-style/shoelace/dist/react/dropdown/index.js';
+export { default as FormatBytes } from '@shoelace-style/shoelace/dist/react/format-bytes/index.js';
+export { default as FormatDate } from '@shoelace-style/shoelace/dist/react/format-date/index.js';
+export { default as FormatNumber } from '@shoelace-style/shoelace/dist/react/format-number/index.js';
+export { default as Icon } from '@shoelace-style/shoelace/dist/react/icon/index.js';
+export { default as IconButton } from '@shoelace-style/shoelace/dist/react/icon-button/index.js';
+export { default as ImageComparer } from '@shoelace-style/shoelace/dist/react/image-comparer/index.js';
+export { default as Include } from '@shoelace-style/shoelace/dist/react/include/index.js';
+export { default as Input } from '@shoelace-style/shoelace/dist/react/input/index.js';
+export { default as Menu } from '@shoelace-style/shoelace/dist/react/menu/index.js';
+export { default as MenuItem } from '@shoelace-style/shoelace/dist/react/menu-item/index.js';
+export { default as MenuLabel } from '@shoelace-style/shoelace/dist/react/menu-label/index.js';
+export { default as MutationObserver } from '@shoelace-style/shoelace/dist/react/mutation-observer/index.js';
+export { default as Option } from '@shoelace-style/shoelace/dist/react/option/index.js';
+export { default as Popup } from '@shoelace-style/shoelace/dist/react/popup/index.js';
+export { default as ProgressBar } from '@shoelace-style/shoelace/dist/react/progress-bar/index.js';
+export { default as ProgressRing } from '@shoelace-style/shoelace/dist/react/progress-ring/index.js';
+export { default as QRCode } from '@shoelace-style/shoelace/dist/react/qr-code/index.js';
+export { default as Radio } from '@shoelace-style/shoelace/dist/react/radio/index.js';
+export { default as RadioButton } from '@shoelace-style/shoelace/dist/react/radio-button/index.js';
+export { default as RadioGroup } from '@shoelace-style/shoelace/dist/react/radio-group/index.js';
+export { default as Range } from '@shoelace-style/shoelace/dist/react/range/index.js';
+export { default as Rating } from '@shoelace-style/shoelace/dist/react/rating/index.js';
+export { default as RelativeTime } from '@shoelace-style/shoelace/dist/react/relative-time/index.js';
+export { default as ResizeObserver } from '@shoelace-style/shoelace/dist/react/resize-observer/index.js';
+export { default as Select } from '@shoelace-style/shoelace/dist/react/select/index.js';
+export { default as Skeleton } from '@shoelace-style/shoelace/dist/react/skeleton/index.js';
+export { default as Spinner } from '@shoelace-style/shoelace/dist/react/spinner/index.js';
+export { default as SplitPanel } from '@shoelace-style/shoelace/dist/react/split-panel/index.js';
+export { default as Switch } from '@shoelace-style/shoelace/dist/react/switch/index.js';
+export { default as Tab } from '@shoelace-style/shoelace/dist/react/tab/index.js';
+export { default as TabGroup } from '@shoelace-style/shoelace/dist/react/tab-group/index.js';
+export { default as TabPanel } from '@shoelace-style/shoelace/dist/react/tab-panel/index.js';
+export { default as Tag } from '@shoelace-style/shoelace/dist/react/tag/index.js';
+export { default as Textarea } from '@shoelace-style/shoelace/dist/react/textarea/index.js';
+export { default as Tooltip } from '@shoelace-style/shoelace/dist/react/tooltip/index.js';
+export { default as Tree } from '@shoelace-style/shoelace/dist/react/tree/index.js';
+export { default as TreeItem } from '@shoelace-style/shoelace/dist/react/tree-item/index.js';
+export { default as VisuallyHidden } from '@shoelace-style/shoelace/dist/react/visually-hidden/index.js';

package/components/toolbar/toolbar.styles.ts

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+export default css`
+  .toolbar {
+  }
+`

package/components/toolbar/toolbar.ts

@@ -1,80 +1,123 @@
-import "../../theme/sl-custom.css";
+import "../../theme/hot-sl.css";
 
-import '@shoelace-style/shoelace/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import "@shoelace-style/shoelace/dist/components/button/button.js";
+import "@shoelace-style/shoelace/dist/components/button-group/button-group.js";
+import "@shoelace-style/shoelace/dist/components/icon/icon.js";
+import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
 
-import { LitElement, css, html, unsafeCSS } from "lit";
+import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
+import styles from './toolbar.styles.js';
+import type { CSSResultGroup } from 'lit';
 
-import registerBundledIcons from '../../components/icons';
+import registerBundledIcons from "../../components/icons";
 
 registerBundledIcons();
 
-// import { cva } from "class-variance-authority";
+export class Toolbar extends LitElement {
 
-// const toolbarStyle = cva(
-//   "some-css-var",
-//   {
-//     variants: {
-//       someProperty: {
-//         true: "some-css-var",
-//         false: "some-css-var",
-//       },
-//     },
-//   },
-// );
+  static styles: CSSResultGroup = [styles];
 
-export class Toolbar extends LitElement {
-  @property() name = "hot-toolbar";
+  name = "hot-toolbar";
 
   /** Change the position of the tooltips relative to buttons. */
-  @property({ type: String, attribute: "tooltip-position" }) tooltipPosition = "top";
-
-  static styles = [
-    css`
-      @unocss-placeholder;
-    `,
-    // unsafeCSS(reset),
-  ];
-
-  // class=${toolbarStyle({
-  //   someProperty: this.someProperty,
-  // })}
+  @property({ type: String, attribute: "tooltip-position" })
+  accessor tooltipPosition =
+    "top";
+
   protected render() {
     return html`
-      <div class="button-group-toolbar">
-        ${this.renderButtonGroup('History', [
-          { content: 'Undo', icon: 'arrow-counterclockwise', label: 'Undo', action: this.undo },
-          { content: 'Redo', icon: 'arrow-clockwise', label: 'Redo', action: this.redo }
+      <div class="toolbar">
+        ${this.renderButtonGroup("History", [
+          {
+            content: "Undo",
+            icon: "arrow-counterclockwise",
+            label: "Undo",
+            action: this.undo,
+          },
+          {
+            content: "Redo",
+            icon: "arrow-clockwise",
+            label: "Redo",
+            action: this.redo,
+          },
         ])}
-        ${this.renderButtonGroup('Formatting', [
-          { content: 'Bold', icon: 'type-bold', label: 'Bold', action: this.bold },
-          { content: 'Italic', icon: 'type-italic', label: 'Italic', action: this.italic },
-          { content: 'Underline', icon: 'type-underline', label: 'Underline', action: this.underline }
+        ${this.renderButtonGroup("Formatting", [
+          {
+            content: "Bold",
+            icon: "type-bold",
+            label: "Bold",
+            action: this.bold,
+          },
+          {
+            content: "Italic",
+            icon: "type-italic",
+            label: "Italic",
+            action: this.italic,
+          },
+          {
+            content: "Underline",
+            icon: "type-underline",
+            label: "Underline",
+            action: this.underline,
+          },
         ])}
-        ${this.renderButtonGroup('Alignment', [
-          { content: 'Align Left', icon: 'justify-left', label: 'Align Left', action: this.alignLeft },
-          { content: 'Align Center', icon: 'justify', label: 'Align Center', action: this.alignCenter },
-          { content: 'Align Right', icon: 'justify-right', label: 'Align Right', action: this.alignRight }
+        ${this.renderButtonGroup("Alignment", [
+          {
+            content: "Align Left",
+            icon: "justify-left",
+            label: "Align Left",
+            action: this.alignLeft,
+          },
+          {
+            content: "Align Center",
+            icon: "justify",
+            label: "Align Center",
+            action: this.alignCenter,
+          },
+          {
+            content: "Align Right",
+            icon: "justify-right",
+            label: "Align Right",
+            action: this.alignRight,
+          },
         ])}
       </div>
     `;
   }
 
-  private renderButtonGroup(label: string, buttons: Array<{ content: string, icon: string, label: string, action?: (e: MouseEvent) => void }>) {
+  private renderButtonGroup(
+    label: string,
+    buttons: Array<{
+      content: string;
+      icon: string;
+      label: string;
+      action?: (e: MouseEvent) => void;
+    }>
+  ) {
     return html`
       <sl-button-group label=${label}>
-        ${buttons.map(button => this.renderButton(button))}
+        ${buttons.map((button) => this.renderButton(button))}
       </sl-button-group>
     `;
   }
 
-  private renderButton({ content, icon, label, action }: { content: string, icon: string, label: string, action?: (e: MouseEvent) => void }) {
+  private renderButton({
+    content,
+    icon,
+    label,
+    action,
+  }: {
+    content: string;
+    icon: string;
+    label: string;
+    action?: (e: MouseEvent) => void;
+  }) {
     return html`
       <sl-tooltip content=${content} placement="${this.tooltipPosition}">
-        <sl-button @click=${action ?? (() => {})}><sl-icon library="bundled" name=${icon} label=${label}></sl-icon></sl-button>
+        <sl-button @click=${action ?? (() => {})}
+          ><sl-icon library="bundled" name=${icon} label=${label}></sl-icon
+        ></sl-button>
       </sl-tooltip>
     `;
   }
@@ -84,42 +127,42 @@ export class Toolbar extends LitElement {
     // stop propagation of the original event
     e.stopPropagation();
     this.dispatchEvent(new Event("undo"));
-  }
+  };
 
   private readonly redo = (e: MouseEvent) => {
     e.stopPropagation();
     this.dispatchEvent(new Event("redo"));
-  }
+  };
 
   private readonly bold = (e: MouseEvent) => {
     e.stopPropagation();
     this.dispatchEvent(new Event("bold"));
-  }
+  };
 
   private readonly italic = (e: MouseEvent) => {
     e.stopPropagation();
     this.dispatchEvent(new Event("italic"));
-  }
+  };
 
   private readonly underline = (e: MouseEvent) => {
     e.stopPropagation();
     this.dispatchEvent(new Event("underline"));
-  }
+  };
 
   private readonly alignLeft = (e: MouseEvent) => {
     e.stopPropagation();
     this.dispatchEvent(new Event("leftalign"));
-  }
+  };
 
   private readonly alignCenter = (e: MouseEvent) => {
     e.stopPropagation();
     this.dispatchEvent(new Event("centeralign"));
-  }
+  };
 
   private readonly alignRight = (e: MouseEvent) => {
     e.stopPropagation();
     this.dispatchEvent(new Event("rightalign"));
-  }
+  };
 }
 
 export default Toolbar;

package/components/tracking/tracking.styles.ts

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+
+export default css`
+  .tracking {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: 80vw;
+    text-align: center;
+  }
+
+  .tracking--header {
+    font-weight: var(--sl-font-weight-bold);
+    font-size: var(--sl-font-size-large);
+    text-align: center;
+  }
+
+  .tracking--link {
+    color: var(--sl-color-primary-700);
+  }
+`

package/components/tracking/tracking.ts

@@ -1,11 +1,13 @@
-import "../../theme/sl-custom.css";
+import "../../theme/hot-sl.css";
 
-import '@shoelace-style/shoelace/dist/components/alert/alert.js';
+import "@shoelace-style/shoelace/dist/components/alert/alert.js";
 
-import { LitElement, css, html, unsafeCSS } from "lit";
+import { LitElement, html } from "lit";
 import { property, state } from "lit/decorators.js";
+import styles from './tracking.styles.js';
+import type { CSSResultGroup } from 'lit';
 
-import registerBundledIcons from '../../components/icons';
+import registerBundledIcons from "../../components/icons";
 
 registerBundledIcons();
 
@@ -16,69 +18,62 @@ declare global {
 }
 
 export class Tracking extends LitElement {
-  @property() name = "hot-tracking";
+
+  static styles: CSSResultGroup = [styles];
+
+  name = "hot-tracking";
 
   /** The Matomo site id for tracking. */
-  @property({ type: String, attribute: "site-id" }) siteId: string = "";
+  @property({ type: String, attribute: "site-id" })
+  accessor siteId: string = "";
 
   /** The domains to apply tracking. */
-  @property({ type: String }) domain: string = "";
+  @property({ type: String })
+  accessor domain: string = "";
 
   /** Force display the banner. */
-  @property({ type: Boolean }) force: boolean = false;
-
-  @state() isOpen: boolean = true;
+  @property({ type: Boolean })
+  accessor force: boolean = false;
 
-  static 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);
-        text-align: center;
-      }
-      sl-alert::part(base) {
-        position: absolute;
-        bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 1000;
-        width: 80vw;
-        text-align: center;
-      }
-    `
-  ];
+  @property({ type: Boolean })
+  accessor isOpen: boolean = true;
 
   protected render() {
-    return html`<sl-alert
-      variant="danger"
-      ?open=${this.isOpen}
-    >
-    <sl-icon id="hot-red-text" library="bundled" 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
-        style="color: #d63f3f;"
-        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: MouseEvent) => {this._setAgree(e)}}>I Agree</sl-button>
-    <sl-button @click=${(e: MouseEvent) => {this._setDisagree(e)}}>I Do Not Agree</sl-button>
+    return html`<sl-alert class="tracking" variant="danger" ?open=${this.isOpen}>
+      <sl-icon
+        id="hot-red-text"
+        library="bundled"
+        slot="icon"
+        name="info-circle"
+      ></sl-icon>
+
+      <p id="tracking-header" class="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
+          class="tracking--link"
+          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: MouseEvent) => {
+          this._setAgree(e);
+        }}
+        >I Agree</sl-button
+      >
+      <sl-button
+        @click=${(e: MouseEvent) => {
+          this._setDisagree(e);
+        }}
+        >I Do Not Agree</sl-button
+      >
     </sl-alert>`;
   }
 
@@ -87,10 +82,10 @@ export class Tracking extends LitElement {
     const _paq = (window._paq = window._paq || []);
     if (_paq.length === 0) return;
 
-    _paq.push(['rememberConsentGiven']);
+    _paq.push(["rememberConsentGiven"]);
     this.isOpen = false;
-    localStorage.setItem(`${this.siteId}-matomo-agree`, 'true');
-    this.dispatchEvent(new Event('agree', {bubbles: true, composed: true}));
+    localStorage.setItem(`${this.siteId}-matomo-agree`, "true");
+    this.dispatchEvent(new Event("agree", { bubbles: true, composed: true }));
   }
 
   private _setDisagree(_e: MouseEvent) {
@@ -98,10 +93,12 @@ export class Tracking extends LitElement {
     const _paq = (window._paq = window._paq || []);
     if (_paq.length === 0) return;
 
-    _paq.push(['forgetConsentGiven']);
+    _paq.push(["forgetConsentGiven"]);
     this.isOpen = false;
-    localStorage.setItem(`${this.siteId}-matomo-agree`, 'false');
-    this.dispatchEvent(new Event('disagree', {bubbles: true, composed: true}));
+    localStorage.setItem(`${this.siteId}-matomo-agree`, "false");
+    this.dispatchEvent(
+      new Event("disagree", { bubbles: true, composed: true })
+    );
   }
 
   connectedCallback() {
@@ -109,59 +106,66 @@ export class Tracking extends LitElement {
 
     // Close and halt execution if wrong domain
     if (!this.force && window.location.hostname !== this.domain) {
-      console.warn(`Matomo init failed. ${window.location.hostname} does not match ${this.domain}.`);
+      console.warn(
+        `Matomo init failed. ${window.location.hostname} does not match ${this.domain}.`
+      );
       this.isOpen = false;
       return;
     }
-  
+
     const matomoTrackingId = this.siteId;
 
     // Close and halt execution if siteId or domain not set
-    if (!this.force && (matomoTrackingId.length === 0 || this.domain.length === 0)) {
-      console.warn('Matomo init failed. No site id or domains provided.');
+    if (
+      !this.force &&
+      (matomoTrackingId.length === 0 || this.domain.length === 0)
+    ) {
+      console.warn("Matomo init failed. No site id or domains provided.");
       this.isOpen = false;
       return;
     }
 
     // Close and halt execution if already disagreed
     const consent = localStorage.getItem(`${this.siteId}-matomo-agree`);
-    if (consent === 'false') {
+    if (consent === "false") {
       this.isOpen = false;
       return;
     }
 
     // Close prompt only if already agreed, continue
-    if (consent === 'true') {
+    if (consent === "true") {
       this.isOpen = false;
     }
 
-    console.log(`Setting Matomo tracking for site=${matomoTrackingId} domain=${this.domain}`);
+    console.log(
+      `Setting Matomo tracking for site=${matomoTrackingId} domain=${this.domain}`
+    );
 
     // 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
-  
+    _paq.push(["requireConsent"]);
+    _paq.push(["setDomains", [this.domain]]);
+    _paq.push(["trackPageView"]);
+    _paq.push(["enableLinkTracking"]); // Tracks downloads
+    _paq.push(["trackVisibleContentImpressions"]); // Tracks content
+
     (function () {
-      const u = '//matomo.hotosm.org/';
-      _paq.push(['setTrackerUrl', u + 'matomo.php']);
-      _paq.push(['setSiteId', matomoTrackingId]);
+      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];
+      const g = d.createElement("script");
+      const s = d.getElementsByTagName("script")[0];
 
       if (s?.parentNode != null) {
         g.async = true;
-        g.src = u + 'matomo.js';
+        g.src = u + "matomo.js";
         s.parentNode.insertBefore(g, s);
       } else {
-        console.warn('Script insertion failed. Parent node is null.');
+        console.warn("Script insertion failed. Parent node is null.");
       }
     })();
   }

package/dist/components/header/header.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { sizes } from './header.styles.js';
+
+interface MenuItem {
+    label: string;
+    clickEvent: () => void;
+}
+export declare class Header extends LitElement {
+    static styles: CSSResultGroup;
+    name: string;
+    /** Use a text-based title in the header. */
+    accessor title: string;
+    /** Display a logo on the left of the header. */
+    accessor logo: string | URL;
+    /** Add a drawer icon with a click event to e.g. open a sidebar. */
+    accessor drawer: boolean;
+    /** Array of menu items to include as navigation tabs. */
+    accessor tabs: MenuItem[];
+    /** Size of toolbar vertically. */
+    accessor size: sizes;
+    /** Border bottom. */
+    accessor borderBottom: boolean;
+    accessor selectedTab: number;
+    protected render(): import('lit').TemplateResult<1>;
+    private _selectTab;
+    private _handleLogin;
+}
+export default Header;

package/dist/components/header/header.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const headerVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    borderBottom?: boolean | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export type sizes = "small" | "medium" | "large";
+export declare const styles: import('lit').CSSResult;