@affinda/wc 0.0.15 → 0.0.16

package/dist/collection/components/af-text-image/af-text-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-text-image.js","sourceRoot":"","sources":["../../../src/components/af-text-image/af-text-image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * TextImage composite component that combines typography content with an image.\n * Supports various layout configurations with image position and proportion options.\n */\n@Component({\n  tag: 'af-text-image',\n  styleUrl: 'af-text-image.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTextImage {\n  /**\n   * Position of the image relative to the text content\n   */\n  @Prop() imagePosition: 'left' | 'right' = 'right';\n\n  /**\n   * Proportion of the image in the layout\n   * - '1/3': Image takes 1/3 of the width (text takes 2/3)\n   * - '1/4': Image takes 1/4 of the width (text takes 3/4)\n   * - '100%': Image takes full width below text\n   */\n  @Prop() imageProportion: '1/3' | '1/4' | '100%' = '1/3';\n\n  /**\n   * Image source URL\n   */\n  @Prop() src?: string;\n\n  /**\n   * Image alt text for accessibility\n   */\n  @Prop() alt: string = '';\n\n  /**\n   * Whether to show a second typography lockup section\n   */\n  @Prop() showSecondLockup: boolean = false;\n\n  render() {\n    const isFullWidth = this.imageProportion === '100%';\n    const isImageLeft = this.imagePosition === 'left';\n\n    const containerClasses = {\n      'text-image': true,\n      'text-image--full-width': isFullWidth,\n      'text-image--side-by-side': !isFullWidth,\n      'text-image--image-left': isImageLeft && !isFullWidth,\n      'text-image--image-right': !isImageLeft && !isFullWidth,\n      [`text-image--proportion-${this.imageProportion.replace('/', '-').replace('%', '')}`]: true,\n    };\n\n    const renderTypographyLockup = (isSecond: boolean = false) => {\n      const prefix = isSecond ? 'second-' : '';\n      return (\n        <div class={`text-image__lockup ${isSecond ? 'text-image__lockup--second' : ''}`}>\n          <div class=\"text-image__copy\">\n            <div class=\"text-image__heading\">\n              <slot name={isSecond ? 'second-heading' : undefined}></slot>\n            </div>\n            <div class=\"text-image__description\">\n              <slot name={`${prefix}description`}></slot>\n            </div>\n          </div>\n          <div class=\"text-image__buttons\">\n            <slot name={`${prefix}buttons`}></slot>\n          </div>\n        </div>\n      );\n    };\n\n    const renderImage = () => {\n      if (!this.src) return null;\n      return (\n        <div class=\"text-image__image-wrapper\">\n          <af-image src={this.src} alt={this.alt}></af-image>\n        </div>\n      );\n    };\n\n    // For full-width layout, text is always above image\n    if (isFullWidth) {\n      return (\n        <Host>\n          <div class={containerClasses}>\n            <div class=\"text-image__content\">\n              {renderTypographyLockup()}\n              {this.showSecondLockup && renderTypographyLockup(true)}\n            </div>\n            {renderImage()}\n          </div>\n        </Host>\n      );\n    }\n\n    // For side-by-side layouts\n    const textContent = (\n      <div class=\"text-image__content\">\n        {renderTypographyLockup()}\n        {this.showSecondLockup && renderTypographyLockup(true)}\n      </div>\n    );\n\n    const imageContent = renderImage();\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {isImageLeft ? (\n            [imageContent, textContent]\n          ) : (\n            [textContent, imageContent]\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n\n"]}

package/dist/collection/components/af-text-image-nest/af-text-image-nest.css

@@ -0,0 +1,110 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Base Container
+   ========================================================================== */
+
+.text-image-nest {
+  width: 100%;
+  position: relative;
+}
+
+/* ==========================================================================
+   Content Layout
+   ========================================================================== */
+
+.nest__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+}
+
+/* ==========================================================================
+   Content Grid
+   ========================================================================== */
+
+.nest__grid {
+  display: grid;
+  gap: 40px;
+  width: 100%;
+}
+
+/* Single layout - full width */
+.grid-single {
+  grid-template-columns: 1fr;
+}
+
+/* 2-column grid */
+.grid-grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* 3-column grid */
+.grid-grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* 4-column grid */
+.grid-grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* Stacked layout - full width with larger gap for alternating rows */
+.grid-stacked {
+  grid-template-columns: 1fr;
+  gap: 48px;
+}
+
+/* ==========================================================================
+   Footer Buttons
+   ========================================================================== */
+
+.nest__footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.nest__footer:empty {
+  display: none;
+}
+
+/* ==========================================================================
+   Mobile Responsive Styles
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  /* Content gap */
+  .nest__content {
+    gap: 32px;
+  }
+
+  /* All grids collapse to single column on mobile */
+  .nest__grid {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  /* Stacked layout gap on mobile */
+  .grid-stacked {
+    gap: 40px;
+  }
+
+  /* Footer buttons stack vertically on mobile */
+  .nest__footer {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+/* ==========================================================================
+   Slot Content Styling
+   ========================================================================== */
+
+::slotted(*) {
+  margin: 0;
+}

package/dist/collection/components/af-text-image-nest/af-text-image-nest.js

@@ -0,0 +1,71 @@
+import { h, Host } from "@stencil/core";
+/**
+ * TextImageNest is a layout component that arranges multiple text-image content pieces
+ * in various grid layouts with optional footer buttons.
+ *
+ * This component inherits theming from a parent Section or theme-providing container.
+ * Wrap it in an af-section to apply themes.
+ *
+ * Supports multiple layout variants:
+ * - `single`: Full-width single item (side-by-side image + text)
+ * - `grid-2`: 2-column grid with stacked items
+ * - `grid-3`: 3-column grid with stacked items
+ * - `grid-4`: 4-column grid with stacked items
+ * - `stacked`: Alternating rows of side-by-side content
+ */
+export class AfTextImageNest {
+    constructor() {
+        /**
+         * Layout variant for the content grid
+         */
+        this.layout = 'grid-3';
+    }
+    render() {
+        const containerClasses = {
+            'text-image-nest': true,
+            [`layout-${this.layout}`]: true,
+        };
+        const gridClasses = {
+            'nest__grid': true,
+            [`grid-${this.layout}`]: true,
+        };
+        return (h(Host, { key: 'bad121a0f47a7711ea1586c316f3363dd5e252ba' }, h("div", { key: '43be16c007ea9b8c7baa75cb038a4bf154730980', class: containerClasses }, h("div", { key: 'da6148be4838273374c0c040b1bb3793f4d3472c', class: "nest__content" }, h("div", { key: 'bccad6fe0a18ccb503f740afc8862a99408f17d5', class: gridClasses }, h("slot", { key: 'b8707c094e88a7c6a09b8e8321ba8edc4d32eb2a' })), h("div", { key: 'bd902e59ee14c2e3d9e4a3bdceb3e9b1603929bb', class: "nest__footer" }, h("slot", { key: '96f63716916447a563125dae4073a0e472becfba', name: "buttons" }))))));
+    }
+    static get is() { return "af-text-image-nest"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-text-image-nest.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-text-image-nest.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked'",
+                    "resolved": "\"grid-2\" | \"grid-3\" | \"grid-4\" | \"single\" | \"stacked\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout variant for the content grid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'grid-3'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-text-image-nest.js.map

package/dist/collection/components/af-text-image-nest/af-text-image-nest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-text-image-nest.js","sourceRoot":"","sources":["../../../src/components/af-text-image-nest/af-text-image-nest.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AAOH,MAAM,OAAO,eAAe;IAN5B;QAOE;;WAEG;QACK,WAAM,GAA0D,QAAQ,CAAC;KA+BlF;IA7BC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,iBAAiB,EAAE,IAAI;YACvB,CAAC,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAChC,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,YAAY,EAAE,IAAI;YAClB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAC9B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAC,eAAe;oBAExB,4DAAK,KAAK,EAAE,WAAW;wBACrB,8DAAa,CACT;oBAGN,4DAAK,KAAK,EAAC,cAAc;wBACvB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * TextImageNest is a layout component that arranges multiple text-image content pieces\n * in various grid layouts with optional footer buttons.\n * \n * This component inherits theming from a parent Section or theme-providing container.\n * Wrap it in an af-section to apply themes.\n * \n * Supports multiple layout variants:\n * - `single`: Full-width single item (side-by-side image + text)\n * - `grid-2`: 2-column grid with stacked items\n * - `grid-3`: 3-column grid with stacked items\n * - `grid-4`: 4-column grid with stacked items\n * - `stacked`: Alternating rows of side-by-side content\n */\n@Component({\n  tag: 'af-text-image-nest',\n  styleUrl: 'af-text-image-nest.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTextImageNest {\n  /**\n   * Layout variant for the content grid\n   */\n  @Prop() layout: 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked' = 'grid-3';\n\n  render() {\n    const containerClasses = {\n      'text-image-nest': true,\n      [`layout-${this.layout}`]: true,\n    };\n\n    const gridClasses = {\n      'nest__grid': true,\n      [`grid-${this.layout}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"nest__content\">\n            {/* Content Grid */}\n            <div class={gridClasses}>\n              <slot></slot>\n            </div>\n\n            {/* Footer Buttons */}\n            <div class=\"nest__footer\">\n              <slot name=\"buttons\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-textarea/af-textarea.css

@@ -0,0 +1,175 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* Wrapper */
+.textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sds-size-space-200, 8px);
+  width: 100%;
+}
+
+/* Label row */
+.label-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.label {
+  flex: 1;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));
+  cursor: default;
+}
+
+.required {
+  color: var(--forms-fields-error, #be292a);
+  margin-left: 2px;
+}
+
+/* Info icon button */
+.info-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));
+  flex-shrink: 0;
+}
+
+.info-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.info-icon:hover {
+  opacity: 0.7;
+}
+
+.info-icon:focus-visible {
+  outline: 2px solid var(--buttons-secondary-stroke, #14343b);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Description */
+.description {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));
+  margin: 0;
+}
+
+/* Textarea container */
+.textarea-container {
+  display: flex;
+  background: var(--forms-fields-bg-default, #ffffff);
+  border: 1px solid var(--forms-fields-stroke-default, #d0d6d8);
+  border-radius: var(--radii-input, 8px);
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* Hover state */
+.textarea-container.hovered {
+  background: var(--forms-fields-bg-hover, #f3f5f5);
+}
+
+/* Focus state */
+.textarea-container.focused {
+  background: var(--forms-fields-bg-default, #ffffff);
+  border-color: var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));
+  box-shadow: 
+    0 0 0 4px var(--background-base, #ffffff), 
+    0 0 0 5px var(--buttons-secondary-stroke, #14343b);
+}
+
+/* Error state */
+.textarea-container.error {
+  border-color: var(--forms-fields-stroke-error, #be292a);
+}
+
+/* Disabled state */
+.textarea-container.disabled {
+  background: var(--forms-fields-bg-disabled, #e8ebeb);
+  border-color: var(--forms-fields-stroke-default, #d0d6d8);
+  cursor: not-allowed;
+}
+
+/* Native textarea */
+.textarea {
+  flex: 1;
+  min-width: 0;
+  min-height: 108px;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));
+  outline: none;
+  resize: vertical;
+}
+
+.textarea::placeholder {
+  color: var(--forms-fields-placeholder, #60767b);
+  opacity: 1;
+}
+
+.textarea:disabled {
+  cursor: not-allowed;
+  color: var(--forms-fields-placeholder, #60767b);
+  resize: none;
+}
+
+.textarea:disabled::placeholder {
+  color: var(--forms-fields-placeholder, #60767b);
+}
+
+/* Error row */
+.error-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.error-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: var(--forms-fields-error, #be292a);
+}
+
+.error-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.error-text {
+  flex: 1;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--forms-fields-error, #be292a);
+}
+