@aiaiai-pt/design-system 0.25.0 → 0.26.0

package/components/Steps.svelte.d.ts

@@ -0,0 +1,37 @@
+export default Steps;
+type Steps = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Steps
+ *
+ * A numbered "how it works" explainer — an ordered list of steps, each a number
+ * badge, a heading and a short description. Distinct from `ServiceFlow`/`Stepper`
+ * (which drive a live multi-step form): this is presentational marketing content
+ * that explains a process. The numbers come from the list order (decorative
+ * badges, `aria-hidden`) so screen readers get the native `<ol>` sequence.
+ *
+ * @example
+ * <Steps
+ *   heading="Como funciona"
+ *   steps={[
+ *     { title: "Proponha", text: "Submeta a sua ideia até 31 de março." },
+ *     { title: "Análise", text: "A comissão verifica a elegibilidade." },
+ *     { title: "Votação", text: "Os cidadãos votam nas finalistas." },
+ *     { title: "Execução", text: "As propostas vencedoras são executadas." },
+ *   ]}
+ * />
+ */
+declare const Steps: import("svelte").Component<{
+    heading?: string;
+    headingLevel?: number;
+    steps?: any[];
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    heading?: string;
+    headingLevel?: number;
+    steps?: any[];
+    class?: string;
+} & Record<string, any>;

package/components/Testimonial.svelte

@@ -0,0 +1,161 @@
+<!--
+  @component Testimonial
+
+  A quote / testimonial band — one prominent pull-quote, or a small grid of
+  them. Semantic `<figure>` + `<blockquote>` + `<figcaption>` so the attribution
+  is correctly associated with the quote. Presentational: the quotes (text +
+  author + role + optional avatar) are DATA.
+
+  @example Single quote
+  <Testimonial quote="Finalmente a minha rua tem iluminação nova." author="Maria S." role="Junta de Freguesia" />
+
+  @example A grid of quotes
+  <Testimonial
+    heading="O que dizem os cidadãos"
+    items={[
+      { quote: "Simples e rápido.", author: "João P." },
+      { quote: "A minha proposta foi executada!", author: "Ana R.", role: "Valongo" },
+    ]}
+  />
+-->
+<script>
+  let {
+    /** @type {string} Optional band heading (for the grid form). */
+    heading = "",
+    /** @type {2 | 3} Heading level for `heading`. */
+    headingLevel = 2,
+    /** @type {string} Single-quote text (when `items` is empty). */
+    quote = "",
+    /** @type {string} */
+    author = "",
+    /** @type {string} */
+    role = "",
+    /** @type {string | undefined} Avatar image URL. */
+    avatar = undefined,
+    /**
+     * @type {Array<{ quote?: string, author?: string, role?: string, avatar?: string }>}
+     * Multiple testimonials (renders a grid). Overrides the single-quote props.
+     */
+    items = [],
+    /** @type {string} */
+    class: className = "",
+    ...rest
+  } = $props();
+
+  const list = $derived(
+    items.length > 0
+      ? items
+      : quote
+        ? [{ quote, author, role, avatar }]
+        : [],
+  );
+</script>
+
+<section class="testimonial {className}" {...rest}>
+  {#if heading}
+    <svelte:element this={`h${headingLevel}`} class="testimonial-heading"
+      >{heading}</svelte:element
+    >
+  {/if}
+  <div class="testimonial-grid" class:testimonial-grid-multi={list.length > 1}>
+    {#each list as item (item.quote)}
+      <figure class="testimonial-item">
+        <blockquote class="testimonial-quote">{item.quote}</blockquote>
+        {#if item.author || item.role}
+          <figcaption class="testimonial-cite">
+            {#if item.avatar}
+              <img class="testimonial-avatar" src={item.avatar} alt="" loading="lazy" />
+            {/if}
+            <span class="testimonial-attrib">
+              {#if item.author}<span class="testimonial-author">{item.author}</span>{/if}
+              {#if item.role}<span class="testimonial-role">{item.role}</span>{/if}
+            </span>
+          </figcaption>
+        {/if}
+      </figure>
+    {/each}
+  </div>
+</section>
+
+<style>
+  .testimonial {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xl);
+    overflow-wrap: break-word;
+  }
+
+  .testimonial-heading {
+    margin: 0;
+    font-family: var(--type-heading-font);
+    font-size: var(--type-heading-size);
+    line-height: var(--type-heading-leading);
+    color: var(--color-text);
+  }
+
+  .testimonial-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-lg);
+  }
+
+  @media (min-width: 768px) {
+    .testimonial-grid-multi {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .testimonial-item {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    padding: var(--space-xl);
+    background: var(--color-surface-secondary);
+    border-left: 3px solid var(--color-accent);
+    border-radius: var(--card-radius);
+    /* Grid child: shrink so a long quote/name wraps instead of overflowing. */
+    min-width: 0;
+  }
+
+  .testimonial-quote {
+    margin: 0;
+    font-family: var(--type-heading-sm-font);
+    font-size: var(--type-heading-sm-size);
+    line-height: var(--type-heading-sm-leading);
+    color: var(--color-text);
+  }
+
+  .testimonial-cite {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-style: normal;
+  }
+
+  .testimonial-avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .testimonial-attrib {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .testimonial-author {
+    font-family: var(--type-label-font);
+    font-size: var(--type-body-sm-size);
+    font-weight: 600;
+    color: var(--color-text);
+  }
+
+  .testimonial-role {
+    font-family: var(--type-caption-font);
+    font-size: var(--type-caption-size);
+    color: var(--color-text-muted);
+  }
+</style>

package/components/Testimonial.svelte.d.ts

@@ -0,0 +1,45 @@
+export default Testimonial;
+type Testimonial = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Testimonial
+ *
+ * A quote / testimonial band — one prominent pull-quote, or a small grid of
+ * them. Semantic `<figure>` + `<blockquote>` + `<figcaption>` so the attribution
+ * is correctly associated with the quote. Presentational: the quotes (text +
+ * author + role + optional avatar) are DATA.
+ *
+ * @example Single quote
+ * <Testimonial quote="Finalmente a minha rua tem iluminação nova." author="Maria S." role="Junta de Freguesia" />
+ *
+ * @example A grid of quotes
+ * <Testimonial
+ *   heading="O que dizem os cidadãos"
+ *   items={[
+ *     { quote: "Simples e rápido.", author: "João P." },
+ *     { quote: "A minha proposta foi executada!", author: "Ana R.", role: "Valongo" },
+ *   ]}
+ * />
+ */
+declare const Testimonial: import("svelte").Component<{
+    heading?: string;
+    headingLevel?: number;
+    quote?: string;
+    author?: string;
+    role?: string;
+    avatar?: any;
+    items?: any[];
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    heading?: string;
+    headingLevel?: number;
+    quote?: string;
+    author?: string;
+    role?: string;
+    avatar?: any;
+    items?: any[];
+    class?: string;
+} & Record<string, any>;

package/components/index.d.ts

@@ -31,6 +31,14 @@ export { default as ContentBlock } from "./ContentBlock.svelte";
 export { default as StatusTimeline } from "./StatusTimeline.svelte";
 export { default as WidgetGrid } from "./WidgetGrid.svelte";
 export { default as VotingWidget } from "./VotingWidget.svelte";
+export { default as FeatureGrid } from "./FeatureGrid.svelte";
+export { default as CallToAction } from "./CallToAction.svelte";
+export { default as MediaText } from "./MediaText.svelte";
+export { default as Steps } from "./Steps.svelte";
+export { default as Testimonial } from "./Testimonial.svelte";
+export { default as FaqList } from "./FaqList.svelte";
+export { default as LogoStrip } from "./LogoStrip.svelte";
+export { default as MediaGallery } from "./MediaGallery.svelte";
 export { default as Card } from "./Card.svelte";
 export { default as Panel } from "./Panel.svelte";
 export { default as Modal } from "./Modal.svelte";
@@ -53,6 +61,14 @@ export { default as TabPanel } from "./TabPanel.svelte";
 export { default as FeedView } from "./FeedView.svelte";
 export { default as ActionPanel } from "./ActionPanel.svelte";
 export { default as RecordList } from "./RecordList.svelte";
+export { default as PhaseTimeline } from "./PhaseTimeline.svelte";
+export { default as RankingBoard } from "./RankingBoard.svelte";
+export { default as ResultsChart } from "./ResultsChart.svelte";
+export { default as NotificationPrefs } from "./NotificationPrefs.svelte";
+export { default as ConsentManager } from "./ConsentManager.svelte";
+export { default as ServiceFlow } from "./ServiceFlow.svelte";
+export { default as CheckAnswers } from "./CheckAnswers.svelte";
+export { default as Confirmation } from "./Confirmation.svelte";
 export { default as Alert } from "./Alert.svelte";
 export { default as Toast } from "./Toast.svelte";
 export { default as ToastManager } from "./ToastManager.svelte";

package/components/index.js

@@ -49,6 +49,18 @@ export { default as StatusTimeline } from "./StatusTimeline.svelte";
 export { default as WidgetGrid } from "./WidgetGrid.svelte";
 export { default as VotingWidget } from "./VotingWidget.svelte";
 
+// Landing & content surface (#105 Phase 7) — presentational, marketing-grade,
+// config-driven sections for landing / campaign / about / faq / contact pages.
+// Each renders purely from props (zero fetch); copy + media are tenant DATA.
+export { default as FeatureGrid } from "./FeatureGrid.svelte";
+export { default as CallToAction } from "./CallToAction.svelte";
+export { default as MediaText } from "./MediaText.svelte";
+export { default as Steps } from "./Steps.svelte";
+export { default as Testimonial } from "./Testimonial.svelte";
+export { default as FaqList } from "./FaqList.svelte";
+export { default as LogoStrip } from "./LogoStrip.svelte";
+export { default as MediaGallery } from "./MediaGallery.svelte";
+
 // Containers
 export { default as Card } from "./Card.svelte";
 export { default as Panel } from "./Panel.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",