@grantcodes/ui 2.6.0 → 2.7.0

package/src/components/map/map.component.js

@@ -0,0 +1,135 @@
+import { LitElement, html, nothing } from "lit";
+import mapStyles from "./map.css" with { type: "css" };
+
+const DARK_FILTER = "invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9)";
+
+export class GrantCodesMap extends LitElement {
+	static styles = [mapStyles];
+
+	static properties = {
+		/**
+		 * Latitude coordinate.
+		 * @type {string}
+		 */
+		lat: { type: String },
+		/**
+		 * Longitude coordinate.
+		 * @type {string}
+		 */
+		lng: { type: String },
+		/**
+		 * Map zoom level (1-18).
+		 * @type {number}
+		 */
+		zoom: { type: Number },
+		/**
+		 * Accessible label for the map iframe.
+		 * @type {string}
+		 */
+		label: { type: String },
+		/**
+		 * URL for a "Get directions" link below the map.
+		 * @type {string}
+		 */
+		"directions-url": { type: String, attribute: "directions-url" },
+		/**
+		 * Height of the map. Accepts any CSS length value.
+		 * @type {string}
+		 */
+		height: { type: String },
+	};
+
+	constructor() {
+		super();
+		this.lat = "";
+		this.lng = "";
+		this.zoom = 14;
+		this.label = "Map";
+		this["directions-url"] = "";
+		this.height = "";
+		this._darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		this._onSchemeChange = () => this._updateFilter();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._observer = new MutationObserver(() => this._updateFilter());
+		this._observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"],
+		});
+		this._darkQuery.addEventListener("change", this._onSchemeChange);
+		this._updateFilter();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._observer?.disconnect();
+		this._darkQuery.removeEventListener("change", this._onSchemeChange);
+	}
+
+	_isDark() {
+		if (document.documentElement.classList.contains("dark")) return true;
+		if (document.documentElement.classList.contains("light")) return false;
+		return this._darkQuery.matches;
+	}
+
+	_updateFilter() {
+		this.style.setProperty(
+			"--g-map-filter",
+			this._isDark() ? DARK_FILTER : "none",
+		);
+	}
+
+	get _embedUrl() {
+		if (!this.lat || !this.lng) return "";
+		const bbox = this._getBoundingBox(
+			Number.parseFloat(this.lat),
+			Number.parseFloat(this.lng),
+			this.zoom,
+		);
+		return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&marker=${this.lat},${this.lng}&layers=mapnik`;
+	}
+
+	/**
+	 * Calculate a bounding box around a point for the given zoom level.
+	 */
+	_getBoundingBox(lat, lng, zoom) {
+		const spread = 360 / 2 ** zoom;
+		return `${lng - spread},${lat - spread},${lng + spread},${lat + spread}`;
+	}
+
+	render() {
+		if (!this.lat || !this.lng) {
+			return nothing;
+		}
+
+		const heightStyle = this.height
+			? `--map-height: ${this.height}`
+			: "";
+
+		return html`
+			<div class="map" style="${heightStyle}">
+				<iframe
+					class="map__iframe"
+					src="${this._embedUrl}"
+					title="${this.label}"
+					loading="lazy"
+					referrerpolicy="no-referrer"
+					frameborder="0"
+					seamless
+				></iframe>
+				${
+					this["directions-url"]
+						? html`<a
+								class="map__directions"
+								href="${this["directions-url"]}"
+								target="_blank"
+								rel="noopener noreferrer"
+							>Get directions</a>`
+						: nothing
+				}
+			</div>
+		`;
+	}
+}

package/src/components/map/map.css

@@ -0,0 +1,41 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+  }
+
+  .map {
+    position: relative;
+    border: 1px solid var(--g-theme-color-border-default);
+    border-radius: var(--g-theme-border-radius-md, 0.5rem);
+    overflow: hidden;
+  }
+
+  .map__iframe {
+    display: block;
+    vertical-align: top;
+    width: 100%;
+    height: var(--map-height, 21rem);
+    border: 0;
+    filter: var(--g-map-filter, none);
+  }
+
+  .map__directions {
+    display: block;
+    padding: var(--g-theme-spacing-sm) var(--g-theme-spacing-md);
+    font-size: var(--g-theme-typography-body-sm-font-size);
+    color: var(--g-theme-color-content-brand, #7c3aed);
+    text-decoration: none;
+    border-block-start: 1px solid var(--g-theme-color-border-default);
+    background: var(--g-theme-color-background-subtle);
+    transition: background-color 0.2s ease;
+  }
+
+  .map__directions:hover {
+    background: var(--g-theme-color-background-subtle-hover);
+    text-decoration: underline;
+  }

package/src/components/map/map.js

@@ -0,0 +1,6 @@
+import { GrantCodesMap } from "./map.component.js";
+
+export * from "./map.component.js";
+export default GrantCodesMap;
+
+customElements.define("grantcodes-map", GrantCodesMap);

package/src/components/map/map.react.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesMap } from "./map.js";
+
+export const MapEmbed = createComponent({
+	tagName: "grantcodes-map",
+	elementClass: GrantCodesMap,
+	react: React,
+});

package/src/components/map/map.stories.js

@@ -0,0 +1,68 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./map.js";
+
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-map");
+
+const meta = {
+	title: "Components/Map",
+	component: "grantcodes-map",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+/**
+ * Default map showing a location in Granollers, Catalonia.
+ */
+export const Default = {
+	args: {
+		lat: "41.648747",
+		lng: "2.161975",
+		zoom: 14,
+		label: "Granollers, Catalonia",
+	},
+};
+
+/**
+ * Map with a directions link below.
+ */
+export const WithDirections = {
+	args: {
+		lat: "41.648747",
+		lng: "2.161975",
+		zoom: 14,
+		label: "Granollers, Catalonia",
+		"directions-url": "https://maps.google.com/?q=41.648747,2.161975",
+	},
+};
+
+/**
+ * Map with a custom height.
+ */
+export const CustomHeight = {
+	args: {
+		lat: "48.8566",
+		lng: "2.3522",
+		zoom: 12,
+		label: "Paris, France",
+		height: "600px",
+	},
+};
+
+/**
+ * Zoomed-out world view.
+ */
+export const ZoomedOut = {
+	args: {
+		lat: "0",
+		lng: "0",
+		zoom: 2,
+		label: "World map",
+	},
+};

package/src/components/media-text/media-text.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/newsletter/newsletter.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/notice/notice.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 .notice {
   display: flex;

package/src/components/pagination/pagination.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 .pagination {
   display: flex;

package/src/components/pricing/pricing.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/stats/stats.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/testimonials/testimonials.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/tooltip/tooltip.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 :host,
 .tooltip,

package/src/lib/styles/all.css

@@ -10,6 +10,7 @@
   @import "../../components/card/card.css";
   @import "../../components/code-preview/code-preview.css";
   @import "../../components/container/container.css";
+  @import "../../components/countdown/countdown.css";
   @import "../../components/cta/cta.css";
   @import "../../components/dialog/dialog.css";
   @import "../../components/dropdown/dropdown.css";
@@ -23,6 +24,7 @@
   @import "../../components/icon/icon.css";
   @import "../../components/loading/loading.css";
   @import "../../components/logo-cloud/logo-cloud.css";
+  @import "../../components/map/map.css";
   @import "../../components/media-text/media-text.css";
   @import "../../components/newsletter/newsletter.css";
   @import "../../components/notice/notice.css";

package/src/main.js

@@ -5,6 +5,7 @@ export * from "./components/button-group/index.js";
 export * from "./components/card/index.js";
 export * from "./components/code-preview/index.js";
 export * from "./components/container/index.js";
+export * from "./components/countdown/index.js";
 export * from "./components/cta/index.js";
 export * from "./components/dialog/index.js";
 export * from "./components/dropzone/index.js";
@@ -15,6 +16,7 @@ export * from "./components/hero/index.js";
 export * from "./components/icon/index.js";
 export * from "./components/loading/index.js";
 export * from "./components/logo-cloud/index.js";
+export * from "./components/map/index.js";
 export * from "./components/media-text/index.js";
 export * from "./components/newsletter/index.js";
 export * from "./components/notice/index.js";

package/src/pages/blog-post.stories.js

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import "../components/app-bar/app-bar.js";
+import "../components/app-bar/nav-link.js";
 import "../components/button/button.js";
 import "../components/breadcrumb/breadcrumb.js";
 import "../components/container/container.js";
@@ -93,10 +94,10 @@ export const Default = {
         Flowbase
       </a>
       <div slot="nav" style="display: flex; gap: 0.5rem;">
-        <a href="/">Home</a>
-        <a href="/features">Features</a>
-        <a href="/blog">Blog</a>
-        <a href="/pricing">Pricing</a>
+        <grantcodes-nav-link><a href="/">Home</a></grantcodes-nav-link>
+        <grantcodes-nav-link><a href="/features">Features</a></grantcodes-nav-link>
+        <grantcodes-nav-link><a href="/blog">Blog</a></grantcodes-nav-link>
+        <grantcodes-nav-link><a href="/pricing">Pricing</a></grantcodes-nav-link>
       </div>
       <div slot="actions" style="display: flex; gap: 0.5rem;">
         <grantcodes-button variant="ghost">Sign in</grantcodes-button>
@@ -287,7 +288,7 @@ export const Default = {
 
     <!-- Related posts -->
     <div
-      style="background: var(--g-theme-color-background-subtle); padding-block: var(--g-theme-spacing-2xl);"
+      style="padding-block: var(--g-theme-spacing-2xl);"
     >
       <grantcodes-container>
         <h2
@@ -352,20 +353,7 @@ export const Default = {
       </grantcodes-container>
     </div>
 
-    <grantcodes-cta
-      eyebrow="Ready to try it?"
-      title="See how Flowbase keeps your team in flow"
-      text="Join thousands of teams who've replaced their meeting-heavy workflows with a calmer, more productive way of working."
-      primary-action=${JSON.stringify({
-				label: "Start for free",
-				href: "/signup",
-			})}
-      secondary-action=${JSON.stringify({
-				label: "See all features",
-				href: "/features",
-			})}
-      align="center"
-    ></grantcodes-cta>
+
 
     <grantcodes-footer columns="3">
       ${footerContent}

package/src/react.js

@@ -9,6 +9,7 @@ export { ButtonGroup } from "./components/button-group/button-group.react.js"
 export { Card } from "./components/card/card.react.js"
 export { CodePreview } from "./components/code-preview/code-preview.react.js"
 export { Container } from "./components/container/container.react.js"
+export { Countdown } from "./components/countdown/countdown.react.js"
 export { Cta } from "./components/cta/cta.react.js"
 export { Dialog } from "./components/dialog/dialog.react.js"
 export { Dropdown, DropdownItem } from "./components/dropdown/dropdown.react.js"
@@ -22,6 +23,7 @@ export { Hero } from "./components/hero/hero.react.js"
 export { Icon } from "./components/icon/icon.react.js"
 export { Loading } from "./components/loading/loading.react.js"
 export { LogoCloud } from "./components/logo-cloud/logo-cloud.react.js"
+export { MapEmbed } from "./components/map/map.react.js"
 export { MediaText } from "./components/media-text/media-text.react.js"
 export { Newsletter } from "./components/newsletter/newsletter.react.js"
 export { Notice } from "./components/notice/notice.react.js"

package/src/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Ambient module declarations for @grantcodes/ui.
+ *
+ * Usage: Add to your tsconfig.json:
+ *   { "compilerOptions": { "types": ["@grantcodes/ui"] } }
+ *
+ * Or reference directly:
+ *   /// <reference types="@grantcodes/ui" />
+ */
+
+// Component deep imports
+declare module "@grantcodes/ui/components/*";
+
+// Style imports
+declare module "@grantcodes/ui/styles/*";
+
+// Font imports
+declare module "@grantcodes/ui/fonts/*";