@brad-frost-web/eddie-recipes 0.19.0 → 0.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brad-frost-web/eddie-recipes",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -19,7 +19,7 @@
   },
   "peerDependencies": {
     "@brad-frost-web/eddie-web-components": "^0.19.0",
-    "@brad-frost-web/eddie-design-tokens": "^0.18.0"
+    "@brad-frost-web/eddie-design-tokens": "^0.19.0"
   },
   "devDependencies": {
     "del-cli": "^7.0.0",

package/recipes/bradfrost-com/timeline/timeline.scss

@@ -0,0 +1,24 @@
+@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *;
+/*------------------------------------*\
+    #TIMELINE
+\*------------------------------------*/
+
+/**
+ * Timeline
+ * 1) A vertical timeline that displays a series of nodes along a vertical line
+ * 2) The line runs down the left side with nodes branching to the right
+ */
+.ed-r-c-timeline {
+  position: relative;
+  padding-inline-start: size(6);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: size(2);
+    width: 2px;
+    background: var(--ed-theme-color-border-default);
+  }
+}

package/recipes/bradfrost-com/timeline/timeline.ts

@@ -0,0 +1,35 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+import { html, unsafeCSS } from 'lit';
+import styles from './timeline.scss?inline';
+
+/**
+ * A vertical timeline component that displays a series of timeline nodes
+ * along a vertical line. Used as a wrapper around `ed-r-timeline-node` elements.
+ *
+ * @slot - Timeline node elements (`ed-r-timeline-node`)
+ */
+export class EdRTimeline extends EdElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  render() {
+    const componentClassName = this.componentClassNames('ed-r-c-timeline', {});
+
+    return html`
+      <div class="${componentClassName}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+if (customElements.get('ed-r-timeline') === undefined) {
+  customElements.define('ed-r-timeline', EdRTimeline);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ed-r-timeline': EdRTimeline;
+  }
+}

package/recipes/bradfrost-com/timeline-node/timeline-node.scss

@@ -0,0 +1,92 @@
+@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *;
+/*------------------------------------*\
+    #TIMELINE-NODE
+\*------------------------------------*/
+
+/**
+ * Timeline node
+ * 1) A single entry on the vertical timeline
+ * 2) Positioned relative so the marker can align with the timeline line
+ */
+.ed-r-c-timeline-node {
+  position: relative;
+  padding-block-end: size(4);
+}
+
+/**
+ * Timeline node marker
+ * 1) The circular dot that sits on the timeline line
+ * 2) Absolutely positioned to align with the vertical line from the parent timeline
+ */
+.ed-r-c-timeline-node__marker {
+  position: absolute;
+  top: size(0.5);
+  left: calc(size(-4) - 5px);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--ed-theme-color-background-brand);
+  border: 2px solid var(--ed-theme-color-background-default);
+}
+
+/**
+ * Timeline node marker highlight variant
+ * 1) Larger marker for important timeline events
+ */
+.ed-r-c-timeline-node--highlight .ed-r-c-timeline-node__marker {
+  width: 16px;
+  height: 16px;
+  left: calc(size(-4) - 7px);
+  box-shadow: 0 0 0 3px var(--ed-theme-color-background-brand);
+}
+
+/**
+ * Timeline node body
+ * 1) The content area to the right of the marker
+ */
+.ed-r-c-timeline-node__body {
+  display: flex;
+  flex-direction: column;
+  gap: size(0.5);
+}
+
+/**
+ * Timeline node date
+ * 1) The date label styled with meta typography
+ */
+.ed-r-c-timeline-node__date {
+  @include ed-theme-typography-meta-default();
+  color: var(--ed-theme-color-content-subtle);
+}
+
+/**
+ * Timeline node heading
+ */
+.ed-r-c-timeline-node__heading {
+  display: block;
+}
+
+/**
+ * Timeline node link
+ * 1) Inherits heading color, underlines on hover
+ */
+.ed-r-c-timeline-node__link {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    color: var(--ed-theme-link-color-content-hover);
+  }
+}
+
+/**
+ * Timeline node content
+ * 1) Slotted content area below the heading
+ */
+.ed-r-c-timeline-node__content {
+  &:empty {
+    display: none;
+  }
+}

package/recipes/bradfrost-com/timeline-node/timeline-node.ts

@@ -0,0 +1,84 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+import '@brad-frost-web/eddie-web-components/components/heading/heading';
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './timeline-node.scss?inline';
+
+/**
+ * A single node on a vertical timeline. Displays a dot marker on the timeline
+ * line with a heading, optional date, and slotted content to the right.
+ *
+ * @slot - Additional content for this timeline entry
+ */
+export class EdRTimelineNode extends EdElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  /**
+   * The heading text for this timeline node
+   */
+  @property()
+  text = '';
+
+  /**
+   * Optional date or time label displayed above/beside the heading
+   */
+  @property()
+  date?: string;
+
+  /**
+   * URL the heading links to
+   */
+  @property()
+  href?: string;
+
+  /**
+   * Heading tag name for semantic heading level
+   */
+  @property()
+  headingTagName: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';
+
+  /**
+   * Visual variant of the node marker
+   */
+  @property()
+  variant?: 'default' | 'highlight';
+
+  render() {
+    const componentClassName = this.componentClassNames('ed-r-c-timeline-node', {
+      'ed-r-c-timeline-node--highlight': this.variant === 'highlight'
+    });
+
+    return html`
+      <div class="${componentClassName}">
+        <div class="ed-r-c-timeline-node__marker"></div>
+        <div class="ed-r-c-timeline-node__body">
+          ${this.date
+            ? html`<span class="ed-r-c-timeline-node__date">${this.date}</span>`
+            : nothing}
+          ${this.text
+            ? html`<ed-heading class="ed-r-c-timeline-node__heading" tagName="${this.headingTagName}" variant="headline-sm">
+                ${this.href
+                  ? html`<a class="ed-r-c-timeline-node__link" href="${this.href}">${this.text}</a>`
+                  : this.text}
+              </ed-heading>`
+            : nothing}
+          <div class="ed-r-c-timeline-node__content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+if (customElements.get('ed-r-timeline-node') === undefined) {
+  customElements.define('ed-r-timeline-node', EdRTimelineNode);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ed-r-timeline-node': EdRTimelineNode;
+  }
+}

package/recipes/we-are-here/chunky-checkbox/chunky-checkbox.scss

@@ -0,0 +1,68 @@
+@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *;
+/*------------------------------------*\
+    #CHUNKY-CHECKBOX
+\*------------------------------------*/
+
+:host {
+  display: block;
+}
+
+/**
+ * Chunky checkbox card
+ * 1) Cursor pointer to indicate interactivity
+ * 2) Transition border color for checked state feedback
+ */
+.ed-r-c-chunky-checkbox {
+  display: flex;
+  align-items: flex-start;
+  gap: size(2);
+  padding: size(2.5);
+  border: var(--ed-border-width-md) solid var(--ed-theme-color-border-subtle);
+  border-radius: var(--ed-border-radius-md);
+  cursor: pointer; /* 1 */
+  transition: border-color 0.15s ease, background-color 0.15s ease; /* 2 */
+  background-color: var(--ed-theme-color-background-default);
+
+  &:hover {
+    border-color: var(--ed-theme-color-border-default);
+    background-color: var(--ed-theme-color-background-subtle);
+  }
+}
+
+/**
+ * Checked state
+ */
+.ed-r-c-chunky-checkbox--checked {
+  border-color: var(--ed-theme-color-border-brand);
+  background-color: var(--ed-theme-color-background-subtle);
+}
+
+/**
+ * Native checkbox input
+ * 1) Visually present but styled minimally; browser default checkbox appearance
+ * 2) Flex-shrink to prevent squishing
+ */
+.ed-r-c-chunky-checkbox__input {
+  flex-shrink: 0; /* 2 */
+  margin-block-start: size(0.5);
+  width: size(2.5);
+  height: size(2.5);
+  accent-color: var(--ed-theme-color-content-brand);
+}
+
+.ed-r-c-chunky-checkbox__body {
+  flex: 1;
+}
+
+.ed-r-c-chunky-checkbox__heading {
+  margin: 0;
+  font-size: var(--ed-font-size-lg);
+  font-weight: var(--ed-font-weight-bold);
+  color: var(--ed-theme-color-content-default);
+}
+
+.ed-r-c-chunky-checkbox__description {
+  margin-block-start: size(0.5);
+  font-size: var(--ed-font-size-sm);
+  color: var(--ed-theme-color-content-subtle);
+}

package/recipes/we-are-here/chunky-checkbox/chunky-checkbox.stories.ts

@@ -0,0 +1,55 @@
+import { html } from 'lit';
+import './chunky-checkbox';
+
+export default {
+  title: 'Recipes/we are here./Chunky Checkbox',
+  component: 'ed-r-chunky-checkbox',
+  parameters: { status: { type: 'beta' } },
+};
+
+export const Default = () =>
+  html`<ed-r-chunky-checkbox
+    text="Connect"
+    description="Connect and hang out with cool people with shared interests."
+    name="purpose"
+    value="connect"
+  ></ed-r-chunky-checkbox>`;
+
+export const Checked = () =>
+  html`<ed-r-chunky-checkbox
+    text="Be"
+    description="Find calm, slow down, and cultivate presence."
+    name="purpose"
+    value="be"
+    ?checked=${true}
+  ></ed-r-chunky-checkbox>`;
+
+export const Group = () =>
+  html`
+    <ed-grid>
+      <ed-grid-item>
+        <ed-r-chunky-checkbox text="Be" description="Find calm, slow down, and cultivate presence." name="purpose" value="be"></ed-r-chunky-checkbox>
+      </ed-grid-item>
+      <ed-grid-item>
+        <ed-r-chunky-checkbox text="Connect" description="Connect and hang out with cool people with shared interests." name="purpose" value="connect"></ed-r-chunky-checkbox>
+      </ed-grid-item>
+      <ed-grid-item>
+        <ed-r-chunky-checkbox text="Explore" description="Explore your location, hobbies, expand your horizons." name="purpose" value="explore"></ed-r-chunky-checkbox>
+      </ed-grid-item>
+      <ed-grid-item>
+        <ed-r-chunky-checkbox text="Grow" description="Improve areas of your life with support and guidance." name="purpose" value="grow"></ed-r-chunky-checkbox>
+      </ed-grid-item>
+      <ed-grid-item>
+        <ed-r-chunky-checkbox text="Help" description="Help the people in your life, your community, and the world." name="purpose" value="help"></ed-r-chunky-checkbox>
+      </ed-grid-item>
+      <ed-grid-item>
+        <ed-r-chunky-checkbox text="Create" description="Unlock your creative potential and express yourself." name="purpose" value="create"></ed-r-chunky-checkbox>
+      </ed-grid-item>
+      <ed-grid-item>
+        <ed-r-chunky-checkbox text="Learn" description="Expand your horizons and learn new things." name="purpose" value="learn"></ed-r-chunky-checkbox>
+      </ed-grid-item>
+      <ed-grid-item>
+        <ed-r-chunky-checkbox text="I'm not sure!" description="Just checking things out for now, and will decide later." name="purpose" value="unsure"></ed-r-chunky-checkbox>
+      </ed-grid-item>
+    </ed-grid>
+  `;

package/recipes/we-are-here/chunky-checkbox/chunky-checkbox.ts

@@ -0,0 +1,88 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+import { html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './chunky-checkbox.scss?inline';
+
+/**
+ * A large, card-style checkbox for multi-select interfaces (e.g. onboarding flows).
+ * Renders a native checkbox input inside a styled card with a heading and description.
+ */
+export class EdRChunkyCheckbox extends EdElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  /**
+   * The checkbox label / heading text.
+   */
+  @property()
+  text!: string;
+
+  /**
+   * Description text shown below the heading.
+   */
+  @property()
+  description?: string;
+
+  /**
+   * The checkbox input value attribute.
+   */
+  @property()
+  value?: string;
+
+  /**
+   * The name attribute for the checkbox input.
+   */
+  @property()
+  name?: string;
+
+  /**
+   * Whether the checkbox is checked.
+   */
+  @property({ type: Boolean })
+  checked = false;
+
+  private handleChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.checked = input.checked;
+    this.dispatch({
+      eventName: 'change',
+      detailObj: { checked: this.checked, value: this.value },
+    });
+  }
+
+  render() {
+    const componentClassName = this.componentClassNames('ed-r-c-chunky-checkbox', {
+      'ed-r-c-chunky-checkbox--checked': this.checked,
+    });
+
+    return html`
+      <label class="${componentClassName}">
+        <input
+          type="checkbox"
+          class="ed-r-c-chunky-checkbox__input"
+          .checked="${this.checked}"
+          name="${this.name || ''}"
+          value="${this.value || ''}"
+          @change="${this.handleChange}"
+        />
+        <div class="ed-r-c-chunky-checkbox__body">
+          <h3 class="ed-r-c-chunky-checkbox__heading">${this.text}</h3>
+          ${this.description
+            ? html`<div class="ed-r-c-chunky-checkbox__description">${this.description}</div>`
+            : ''}
+        </div>
+      </label>
+    `;
+  }
+}
+
+if (customElements.get('ed-r-chunky-checkbox') === undefined) {
+  customElements.define('ed-r-chunky-checkbox', EdRChunkyCheckbox);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ed-r-chunky-checkbox': EdRChunkyCheckbox;
+  }
+}

package/recipes/we-are-here/chunky-checkbox/test/chunky-checkbox.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest';
+
+test('ed-r-chunky-checkbox renders', async () => {
+  expect(true).toBe(true);
+});

package/recipes/we-are-here/wah-link-list/test/wah-link-list.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest';
+
+test('ed-r-wah-link-list renders', async () => {
+  expect(true).toBe(true);
+});

package/recipes/we-are-here/wah-link-list/wah-link-list.scss

@@ -0,0 +1,56 @@
+@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *;
+/*------------------------------------*\
+    #WAH-LINK-LIST
+\*------------------------------------*/
+
+:host {
+  display: block;
+}
+
+.ed-r-c-wah-link-list__header {
+  display: flex;
+  align-items: baseline;
+  gap: size(2);
+  margin-block-end: size(1);
+}
+
+.ed-r-c-wah-link-list__heading {
+  margin: 0;
+  font-size: var(--ed-font-size-lg);
+  font-weight: var(--ed-font-weight-bold);
+  color: var(--ed-theme-color-content-default);
+}
+
+.ed-r-c-wah-link-list__heading-link {
+  font-size: var(--ed-font-size-sm);
+  color: var(--ed-theme-color-content-subtle);
+}
+
+.ed-r-c-wah-link-list__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: size(0.5) size(1.5);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ed-r-c-wah-link-list__link {
+  color: var(--ed-theme-color-content-subtle);
+  text-decoration: none;
+  font-size: var(--ed-font-size-sm);
+
+  &:hover {
+    color: var(--ed-theme-color-content-default);
+    text-decoration: underline;
+  }
+}
+
+/**
+ * Featured items
+ * 1) Bolder color and weight to stand out from normal items
+ */
+.ed-r-c-wah-link-list__item--featured .ed-r-c-wah-link-list__link {
+  color: var(--ed-theme-color-content-default); /* 1 */
+  font-weight: var(--ed-font-weight-bold); /* 1 */
+}

package/recipes/we-are-here/wah-link-list/wah-link-list.stories.ts

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import './wah-link-list';
+
+export default {
+  title: 'Recipes/we are here./Wah Link List',
+  component: 'ed-r-wah-link-list',
+  parameters: { status: { type: 'beta' } },
+};
+
+export const Default = () =>
+  html`<ed-r-wah-link-list
+    heading="Music"
+    headingLinkText="Links to Last.fm, BandCamp, Music Services"
+    headingLinkHref="#"
+    .items=${[
+      { text: 'Rubblebucket', href: '#', featured: true },
+      { text: 'Led Zeppelin', href: '#', featured: true },
+      { text: 'CAKE', href: '#', featured: true },
+      { text: 'Outkast', href: '#', featured: true },
+      { text: 'Fela Kuti', href: '#' },
+      { text: 'Tune Yards', href: '#' },
+      { text: 'Dr. Dog', href: '#' },
+      { text: 'Beasie Boys', href: '#' },
+      { text: 'View All', href: '#' },
+    ]}
+  ></ed-r-wah-link-list>`;
+
+export const Communities = () =>
+  html`<ed-r-wah-link-list
+    heading="My Communities"
+    .items=${[
+      { text: 'Brad Frost Web', href: '/communities', featured: true },
+      { text: 'Smashing Membership', href: '/communities' },
+      { text: 'Friends of beyond tellerrand', href: '/communities' },
+      { text: 'Design Better', href: '/communities' },
+      { text: 'OpenUI', href: '/communities' },
+    ]}
+  ></ed-r-wah-link-list>`;
+
+export const NoFeatured = () =>
+  html`<ed-r-wah-link-list
+    heading="Hobbies"
+    .items=${[
+      { text: 'Playing Drums', href: '#' },
+      { text: 'Playing Bass', href: '#' },
+      { text: 'Making Art', href: '#' },
+      { text: 'Painting', href: '#' },
+      { text: 'Woodworking', href: '#' },
+    ]}
+  ></ed-r-wah-link-list>`;

package/recipes/we-are-here/wah-link-list/wah-link-list.ts

@@ -0,0 +1,89 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+import { html, unsafeCSS, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './wah-link-list.scss?inline';
+
+interface WahLinkItem {
+  text: string;
+  href: string;
+  featured?: boolean;
+}
+
+/**
+ * A link list with optional "featured" items rendered with visual emphasis.
+ * Used extensively in topic profiles for lists of interests, media, communities, etc.
+ *
+ * @slot - Optional slotted content rendered after the generated list
+ */
+export class EdRWahLinkList extends EdElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  /**
+   * Array of link items. Each item can optionally be marked as `featured`.
+   */
+  @property({ type: Array })
+  items: WahLinkItem[] = [];
+
+  /**
+   * Optional heading text rendered above the list.
+   */
+  @property()
+  heading?: string;
+
+  /**
+   * Optional heading-level link (e.g. "Link to Last.fm").
+   */
+  @property()
+  headingLinkText?: string;
+
+  /**
+   * URL for the heading-level link.
+   */
+  @property()
+  headingLinkHref?: string;
+
+  render() {
+    const componentClassName = this.componentClassNames('ed-r-c-wah-link-list', {});
+
+    return html`
+      <div class="${componentClassName}">
+        ${this.heading
+          ? html`
+              <div class="ed-r-c-wah-link-list__header">
+                <h3 class="ed-r-c-wah-link-list__heading">${this.heading}</h3>
+                ${this.headingLinkText && this.headingLinkHref
+                  ? html`<a href="${this.headingLinkHref}" class="ed-r-c-wah-link-list__heading-link">${this.headingLinkText}</a>`
+                  : nothing}
+              </div>
+            `
+          : nothing}
+        ${this.items.length > 0
+          ? html`
+              <ul class="ed-r-c-wah-link-list__list">
+                ${this.items.map(
+                  (item) => html`
+                    <li class="ed-r-c-wah-link-list__item ${item.featured ? 'ed-r-c-wah-link-list__item--featured' : ''}">
+                      <a href="${item.href}" class="ed-r-c-wah-link-list__link">${item.text}</a>
+                    </li>
+                  `
+                )}
+              </ul>
+            `
+          : nothing}
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+if (customElements.get('ed-r-wah-link-list') === undefined) {
+  customElements.define('ed-r-wah-link-list', EdRWahLinkList);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ed-r-wah-link-list': EdRWahLinkList;
+  }
+}

package/recipes/we-are-here/wah-logo/test/wah-logo.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest';
+
+test('ed-r-wah-logo renders', async () => {
+  expect(true).toBe(true);
+});

package/recipes/we-are-here/wah-logo/wah-logo.scss

@@ -0,0 +1,36 @@
+@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *;
+/*------------------------------------*\
+    #WAH-LOGO
+\*------------------------------------*/
+
+/**
+ * we are here. concentric-circle logo
+ */
+
+:host {
+  display: inline-block;
+}
+
+.ed-r-c-wah-logo {
+  display: inline-flex;
+  align-items: center;
+}
+
+/**
+ * Logo link
+ * 1) Remove default link underline
+ * 2) Inherit dimensions from parent
+ */
+.ed-r-c-wah-logo__link {
+  display: inline-flex;
+  text-decoration: none; /* 1 */
+}
+
+/**
+ * Logo SVG image
+ * 1) Size the logo mark; consumers can override via CSS custom property
+ */
+.ed-r-c-wah-logo__image {
+  width: var(--ed-r-c-wah-logo-size, size(8)); /* 1 */
+  height: auto;
+}

package/recipes/we-are-here/wah-logo/wah-logo.stories.ts

@@ -0,0 +1,14 @@
+import { html } from 'lit';
+import './wah-logo';
+
+export default {
+  title: 'Recipes/we are here./Wah Logo',
+  component: 'ed-r-wah-logo',
+  parameters: { status: { type: 'beta' } },
+};
+
+export const Default = () => html`<ed-r-wah-logo></ed-r-wah-logo>`;
+
+export const WithLink = () => html`<ed-r-wah-logo href="/dashboard"></ed-r-wah-logo>`;
+
+export const CustomSize = () => html`<ed-r-wah-logo style="--ed-r-c-wah-logo-size: 12rem;"></ed-r-wah-logo>`;

package/recipes/we-are-here/wah-logo/wah-logo.ts

@@ -0,0 +1,62 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+import { html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './wah-logo.scss?inline';
+
+/**
+ * we are here. logo — concentric circle SVG mark.
+ *
+ * @slot - Optional slotted content (e.g. wordmark text)
+ */
+export class EdRWahLogo extends EdElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  /**
+   * Optional link URL. When provided, the logo renders as an anchor.
+   */
+  @property()
+  href?: string;
+
+  /**
+   * Accessible title for the SVG.
+   */
+  @property()
+  logoTitle?: string = 'we are here.';
+
+  render() {
+    const componentClassName = this.componentClassNames('ed-r-c-wah-logo', {});
+
+    const svg = html`
+      <svg class="ed-r-c-wah-logo__image" fill="none" height="502" viewBox="0 0 502 502" width="502" xmlns="http://www.w3.org/2000/svg">
+        <title>${this.logoTitle}</title>
+        <circle cx="251.176" cy="250.62" fill="#be6700" r="250.62"></circle>
+        <circle cx="251.176" cy="250.62" fill="#fa8700" r="210.521"></circle>
+        <circle cx="251.176" cy="250.62" fill="#ffa438" r="170.422"></circle>
+        <circle cx="251.176" cy="250.62" fill="#ffc075" r="130.322"></circle>
+        <circle cx="251.176" cy="250.62" fill="#ffdcb3" r="90.2232"></circle>
+        <circle cx="251.176" cy="250.62" fill="#fff8f0" r="50.2232"></circle>
+      </svg>
+    `;
+
+    return html`
+      <div class="${componentClassName}">
+        ${this.href
+          ? html`<a href="${this.href}" class="ed-r-c-wah-logo__link">${svg}</a>`
+          : svg}
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+if (customElements.get('ed-r-wah-logo') === undefined) {
+  customElements.define('ed-r-wah-logo', EdRWahLogo);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ed-r-wah-logo': EdRWahLogo;
+  }
+}

package/recipes/we-are-here/wah-site-footer/test/wah-site-footer.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest';
+
+test('ed-r-wah-site-footer renders', async () => {
+  expect(true).toBe(true);
+});

package/recipes/we-are-here/wah-site-footer/wah-site-footer.scss

@@ -0,0 +1,33 @@
+@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *;
+/*------------------------------------*\
+    #WAH-SITE-FOOTER
+\*------------------------------------*/
+
+:host {
+  display: block;
+}
+
+.ed-r-c-wah-site-footer {
+  padding-block: size(4);
+  border-block-start: var(--ed-border-width-sm) solid var(--ed-theme-color-border-subtle);
+}
+
+.ed-r-c-wah-site-footer__nav-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: size(1) size(3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ed-r-c-wah-site-footer__nav-link {
+  color: var(--ed-theme-color-content-subtle);
+  text-decoration: none;
+  font-size: var(--ed-font-size-sm);
+
+  &:hover {
+    color: var(--ed-theme-color-content-default);
+    text-decoration: underline;
+  }
+}

package/recipes/we-are-here/wah-site-footer/wah-site-footer.stories.ts

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+import './wah-site-footer';
+
+export default {
+  title: 'Recipes/we are here./Wah Site Footer',
+  component: 'ed-r-wah-site-footer',
+  parameters: { status: { type: 'beta' } },
+};
+
+export const Default = () => html`<ed-r-wah-site-footer></ed-r-wah-site-footer>`;

package/recipes/we-are-here/wah-site-footer/wah-site-footer.ts

@@ -0,0 +1,68 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+import '@brad-frost-web/eddie-web-components/components/layout-container/layout-container';
+import { html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './wah-site-footer.scss?inline';
+
+interface WahFooterNavItem {
+  text: string;
+  href: string;
+}
+
+/**
+ * we are here. site footer with navigation links.
+ */
+export class EdRWahSiteFooter extends EdElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  /**
+   * Footer navigation items.
+   */
+  @property({ type: Array })
+  navItems: WahFooterNavItem[] = [
+    { text: 'Report an issue', href: '/contact' },
+    { text: 'Code of Conduct', href: '/code-of-conduct' },
+    { text: 'Privacy Policy', href: '/privacy-policy' },
+    { text: 'Terms of Service', href: '/terms-of-service' },
+    { text: 'About we are here.', href: '/team' },
+    { text: 'Mission & Values', href: '/mission-values' },
+    { text: 'Idea Jar', href: '/idea-jar' },
+    { text: 'Contact', href: '/contact' },
+  ];
+
+  render() {
+    const componentClassName = this.componentClassNames('ed-r-c-wah-site-footer', {});
+
+    return html`
+      <footer class="${componentClassName}" role="contentinfo">
+        <ed-layout-container>
+          <div class="ed-r-c-wah-site-footer__inner">
+            <nav class="ed-r-c-wah-site-footer__nav" aria-label="Footer">
+              <ul class="ed-r-c-wah-site-footer__nav-list">
+                ${this.navItems.map(
+                  (item) => html`
+                    <li class="ed-r-c-wah-site-footer__nav-item">
+                      <a href="${item.href}" class="ed-r-c-wah-site-footer__nav-link">${item.text}</a>
+                    </li>
+                  `
+                )}
+              </ul>
+            </nav>
+          </div>
+        </ed-layout-container>
+      </footer>
+    `;
+  }
+}
+
+if (customElements.get('ed-r-wah-site-footer') === undefined) {
+  customElements.define('ed-r-wah-site-footer', EdRWahSiteFooter);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ed-r-wah-site-footer': EdRWahSiteFooter;
+  }
+}

package/recipes/we-are-here/wah-site-header/test/wah-site-header.test.ts

@@ -0,0 +1,5 @@
+import { expect, test } from 'vitest';
+
+test('ed-r-wah-site-header renders', async () => {
+  expect(true).toBe(true);
+});

package/recipes/we-are-here/wah-site-header/wah-site-header.scss

@@ -0,0 +1,137 @@
+@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *;
+/*------------------------------------*\
+    #WAH-SITE-HEADER
+\*------------------------------------*/
+
+:host {
+  display: block;
+}
+
+/**
+ * Header root
+ * 1) Sticky to top of viewport
+ */
+.ed-r-c-wah-site-header {
+  position: sticky; /* 1 */
+  top: 0;
+  z-index: 10;
+  background-color: var(--ed-theme-color-background-default);
+  border-block-end: var(--ed-border-width-sm) solid var(--ed-theme-color-border-subtle);
+}
+
+.ed-r-c-wah-site-header__inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-block: size(1.5);
+  gap: size(2);
+}
+
+.ed-r-c-wah-site-header__logo {
+  flex-shrink: 0;
+}
+
+/**
+ * Menu button
+ * 1) Only visible on small screens
+ */
+.ed-r-c-wah-site-header__menu-button {
+  margin-inline-start: auto;
+
+  @media all and (min-width: $ed-bp-md) {
+    display: none; /* 1 */
+  }
+}
+
+/**
+ * Primary nav
+ * 1) Hidden on mobile until menu is toggled open
+ * 2) Full width on small screens
+ */
+.ed-r-c-wah-site-header__primary-nav {
+  display: none; /* 1 */
+  width: 100%; /* 2 */
+
+  .ed-r-c-wah-site-header.ed-is-active & {
+    display: block;
+  }
+
+  @media all and (min-width: $ed-bp-md) {
+    display: block;
+    width: auto;
+    margin-inline-start: auto;
+  }
+}
+
+.ed-r-c-wah-site-header__primary-nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: size(0.5);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @media all and (min-width: $ed-bp-md) {
+    flex-direction: row;
+    gap: size(2);
+  }
+}
+
+.ed-r-c-wah-site-header__primary-nav-link {
+  display: block;
+  padding: size(1) 0;
+  color: var(--ed-theme-color-content-default);
+  text-decoration: none;
+  font-weight: var(--ed-font-weight-normal);
+
+  &:hover {
+    color: var(--ed-theme-color-content-brand);
+  }
+}
+
+/**
+ * Active nav item modifier
+ */
+.ed-r-c-wah-site-header__primary-nav-item--active .ed-r-c-wah-site-header__primary-nav-link {
+  font-weight: var(--ed-font-weight-bold);
+  color: var(--ed-theme-color-content-brand);
+}
+
+/**
+ * Utility nav
+ * 1) Hidden on mobile until menu is toggled open
+ */
+.ed-r-c-wah-site-header__utility-nav {
+  display: none; /* 1 */
+  width: 100%;
+
+  .ed-r-c-wah-site-header.ed-is-active & {
+    display: block;
+  }
+
+  @media all and (min-width: $ed-bp-md) {
+    display: none;
+  }
+}
+
+.ed-r-c-wah-site-header__utility-nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: size(0.5);
+  list-style: none;
+  margin: 0;
+  padding: size(2) 0 0;
+  border-block-start: var(--ed-border-width-sm) solid var(--ed-theme-color-border-subtle);
+}
+
+.ed-r-c-wah-site-header__utility-nav-link {
+  display: block;
+  padding: size(0.5) 0;
+  color: var(--ed-theme-color-content-subtle);
+  text-decoration: none;
+  font-size: var(--ed-font-size-sm);
+
+  &:hover {
+    color: var(--ed-theme-color-content-default);
+  }
+}

package/recipes/we-are-here/wah-site-header/wah-site-header.stories.ts

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+import './wah-site-header';
+
+export default {
+  title: 'Recipes/we are here./Wah Site Header',
+  component: 'ed-r-wah-site-header',
+  parameters: { status: { type: 'beta' } },
+};
+
+export const Default = () => html`<ed-r-wah-site-header></ed-r-wah-site-header>`;
+
+export const WithActiveItem = () =>
+  html`<ed-r-wah-site-header activeNavItem="Your Profile"></ed-r-wah-site-header>`;

package/recipes/we-are-here/wah-site-header/wah-site-header.ts

@@ -0,0 +1,132 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+import '@brad-frost-web/eddie-web-components/components/button/button';
+import '@brad-frost-web/eddie-web-components/components/layout-container/layout-container';
+import '../wah-logo/wah-logo';
+import { html, unsafeCSS } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import styles from './wah-site-header.scss?inline';
+
+interface WahNavItem {
+  text: string;
+  href: string;
+}
+
+/**
+ * we are here. site header recipe composing the logo, primary navigation,
+ * utility navigation, and a mobile menu toggle.
+ */
+export class EdRWahSiteHeader extends EdElement {
+  static get styles() {
+    return unsafeCSS(styles);
+  }
+
+  /**
+   * Primary nav items displayed in the main navigation.
+   */
+  @property({ type: Array })
+  primaryNavItems: WahNavItem[] = [
+    { text: 'Your Profile', href: '/profile' },
+    { text: 'Be', href: '/be' },
+    { text: 'Connect', href: '/connect' },
+    { text: 'Grow', href: '/grow' },
+    { text: 'Help', href: '/help' },
+    { text: 'Create', href: '/create' },
+    { text: 'Learn', href: '/learn' },
+    { text: 'Explore', href: '/explore' },
+    { text: 'Random', href: '#' },
+  ];
+
+  /**
+   * Utility nav items displayed below primary nav.
+   */
+  @property({ type: Array })
+  utilityNavItems: WahNavItem[] = [
+    { text: 'Report an issue', href: '/contact' },
+    { text: 'Code of Conduct', href: '/code-of-conduct' },
+    { text: 'Privacy Policy', href: '/privacy-policy' },
+    { text: 'Terms of Service', href: '/terms-of-service' },
+    { text: 'Our Mission & Values', href: '/mission-values' },
+  ];
+
+  /**
+   * URL for the logo link.
+   */
+  @property()
+  logoHref?: string = '/dashboard';
+
+  /**
+   * Highlighted primary nav item text (e.g. "Your Profile" gets a special style).
+   */
+  @property()
+  activeNavItem?: string;
+
+  /**
+   * Internal mobile menu state.
+   */
+  @state()
+  private isMenuOpen = false;
+
+  private toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  render() {
+    const componentClassName = this.componentClassNames('ed-r-c-wah-site-header', {
+      'ed-is-active': this.isMenuOpen,
+    });
+
+    return html`
+      <header class="${componentClassName}" role="banner">
+        <ed-layout-container class="ed-r-c-wah-site-header__container">
+          <div class="ed-r-c-wah-site-header__inner">
+            <ed-r-wah-logo class="ed-r-c-wah-site-header__logo" href="${this.logoHref}"></ed-r-wah-logo>
+
+            <ed-button
+              class="ed-r-c-wah-site-header__menu-button"
+              variant="bare"
+              text="Menu"
+              iconName="menu"
+              iconPosition="before"
+              aria-expanded="${this.isMenuOpen}"
+              @click="${this.toggleMenu}"
+            ></ed-button>
+
+            <nav class="ed-r-c-wah-site-header__primary-nav" aria-label="Primary">
+              <ul class="ed-r-c-wah-site-header__primary-nav-list">
+                ${this.primaryNavItems.map(
+                  (item) => html`
+                    <li class="ed-r-c-wah-site-header__primary-nav-item ${item.text === this.activeNavItem ? 'ed-r-c-wah-site-header__primary-nav-item--active' : ''}">
+                      <a href="${item.href}" class="ed-r-c-wah-site-header__primary-nav-link">${item.text}</a>
+                    </li>
+                  `
+                )}
+              </ul>
+            </nav>
+
+            <nav class="ed-r-c-wah-site-header__utility-nav" aria-label="Utility">
+              <ul class="ed-r-c-wah-site-header__utility-nav-list">
+                ${this.utilityNavItems.map(
+                  (item) => html`
+                    <li class="ed-r-c-wah-site-header__utility-nav-item">
+                      <a href="${item.href}" class="ed-r-c-wah-site-header__utility-nav-link">${item.text}</a>
+                    </li>
+                  `
+                )}
+              </ul>
+            </nav>
+          </div>
+        </ed-layout-container>
+      </header>
+    `;
+  }
+}
+
+if (customElements.get('ed-r-wah-site-header') === undefined) {
+  customElements.define('ed-r-wah-site-header', EdRWahSiteHeader);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ed-r-wah-site-header': EdRWahSiteHeader;
+  }
+}