feat(elements): live showcase component & page

nx.json

@@ -67,6 +67,11 @@
       "cache": true,
       "dependsOn": ["^build"],
       "inputs": ["production", "^production"]
+    },
+    "@nx/next:build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
     }
   },
   "generators": {
@@ -82,6 +87,12 @@
     },
     "@nx/angular:component": {
       "style": "scss"
+    },
+    "@nx/next": {
+      "application": {
+        "style": "scss",
+        "linter": "eslint"
+      }
     }
   },
   "cacheDirectory": ".nx-cache",
@@ -119,7 +130,10 @@
       "default",
       "!{projectRoot}/**/*.e2e.ts",
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
-      "!{projectRoot}/tsconfig.spec.json"
+      "!{projectRoot}/tsconfig.spec.json",
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/src/test-setup.[jt]s",
+      "!{projectRoot}/test-setup.[jt]s"
     ]
   }
 }

package.json

@@ -10,6 +10,7 @@
     "start:storybook": "nx run-many --target=start --projects=storybook,elements --output-style=stream",
     "start:landingpage": "nx run landingpage:start",
     "start:ui-patterns-playground": "nx run-many --target=start --projects=ui-patterns,ui-patterns-playground --output-style=stream",
+    "start:meetup": "nx run-many --target=start --projects=ui-patterns,meetup,landingpage --output-style=stream",
     "build": "nx run-many --target=build --output-style=stream",
     "test": "nx run-many --target=test --output-style=stream --configuration=ci",
     "test:core:watch": "nx run elements:test:watch",
@@ -40,6 +41,7 @@
     "@nx/eslint": "18.0.7",
     "@nx/eslint-plugin": "18.0.7",
     "@nx/js": "18.0.7",
+    "@nx/next": "18.0.7",
     "@nx/playwright": "18.0.7",
     "@nx/storybook": "18.0.7",
     "@nx/vite": "18.0.7",
@@ -67,6 +69,7 @@
     "conventional-recommended-bump": "^9.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.51.0",
+    "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
@@ -83,15 +86,15 @@
     "lint-staged": "^10.5.3",
     "ng-packagr": "~15.1.0",
     "nx": "18.0.7",
-    "postcss": "^8.4.5",
+    "postcss": "8.4.21",
     "postcss-import": "~14.1.0",
     "postcss-preset-env": "~7.5.0",
     "postcss-url": "~10.1.3",
     "prettier": "^2.6.2",
     "prompts": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.55.0",
+    "sass": "1.62.1",
     "semver": "^7.5.4",
     "shelljs": "^0.8.4",
     "shx": "^0.3.2",
@@ -114,6 +117,7 @@
     "@angular/platform-browser": "~15.1.0",
     "@angular/platform-browser-dynamic": "~15.1.0",
     "@angular/router": "~15.1.0",
+    "next": "14.0.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

packages/elements-angular/src/directives/proxies-list.ts

@@ -28,6 +28,7 @@ export const DIRECTIVES = [
   d.InoListDivider,
   d.InoListItem,
   d.InoMarkdownEditor,
+  d.InoMeetupAccordion,
   d.InoMenu,
   d.InoNavDrawer,
   d.InoNavItem,

packages/elements-angular/src/directives/proxies.ts

@@ -721,6 +721,34 @@ The value of type `string` can be found in `event.detail`
 }
 
 
+@ProxyCmp({
+  inputs: ['accordionTitle']
+})
+@Component({
+  selector: 'ino-meetup-accordion',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['accordionTitle'],
+})
+export class InoMeetupAccordion {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['expandedChange']);
+  }
+}
+
+
+export declare interface InoMeetupAccordion extends Components.InoMeetupAccordion {
+  /**
+   * Emits when the user clicks to toggle the accordion.
+   */
+  expandedChange: EventEmitter<CustomEvent<boolean>>;
+}
+
+
 @ProxyCmp({
   inputs: ['placement']
 })

packages/elements-react/src/components/index.ts

@@ -34,6 +34,7 @@ export const InoList = /*@__PURE__*/createReactComponent<JSX.InoList, HTMLInoLis
 export const InoListDivider = /*@__PURE__*/createReactComponent<JSX.InoListDivider, HTMLInoListDividerElement>('ino-list-divider');
 export const InoListItem = /*@__PURE__*/createReactComponent<JSX.InoListItem, HTMLInoListItemElement>('ino-list-item');
 export const InoMarkdownEditor = /*@__PURE__*/createReactComponent<JSX.InoMarkdownEditor, HTMLInoMarkdownEditorElement>('ino-markdown-editor');
+export const InoMeetupAccordion = /*@__PURE__*/createReactComponent<JSX.InoMeetupAccordion, HTMLInoMeetupAccordionElement>('ino-meetup-accordion');
 export const InoMenu = /*@__PURE__*/createReactComponent<JSX.InoMenu, HTMLInoMenuElement>('ino-menu');
 export const InoNavDrawer = /*@__PURE__*/createReactComponent<JSX.InoNavDrawer, HTMLInoNavDrawerElement>('ino-nav-drawer');
 export const InoNavItem = /*@__PURE__*/createReactComponent<JSX.InoNavItem, HTMLInoNavItemElement>('ino-nav-item');

packages/elements-vue/src/proxies.ts

@@ -331,6 +331,12 @@ export const InoMarkdownEditor = /*@__PURE__*/ defineContainer<JSX.InoMarkdownEd
 ]);
 
 
+export const InoMeetupAccordion = /*@__PURE__*/ defineContainer<JSX.InoMeetupAccordion>('ino-meetup-accordion', undefined, [
+  'accordionTitle',
+  'expandedChange'
+]);
+
+
 export const InoMenu = /*@__PURE__*/ defineContainer<JSX.InoMenu>('ino-menu', undefined, [
   'placement'
 ]);

packages/elements/src/components.d.ts

@@ -1028,6 +1028,18 @@ export namespace Components {
          */
         "viewMode": ViewModeUnion;
     }
+    /**
+     * `ino-meetup-accordion` is a component that implements a simple accordion UI element.
+     * It allows users to expand or collapse content sections by clicking on the title.
+     * The component emits an event when its expanded state changes, and it provides a slot for
+     * custom content to be displayed when expanded.
+     */
+    interface InoMeetupAccordion {
+        /**
+          * The title of the accordion.
+         */
+        "accordionTitle": string;
+    }
     /**
      * A menu component that displays a list of choices on a temporary surface which opens and closes on anchor or item click.
      * The anchor element is the parent element.
@@ -1761,6 +1773,10 @@ export interface InoMarkdownEditorCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLInoMarkdownEditorElement;
 }
+export interface InoMeetupAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLInoMeetupAccordionElement;
+}
 export interface InoNavDrawerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLInoNavDrawerElement;
@@ -2319,6 +2335,29 @@ declare global {
         prototype: HTMLInoMarkdownEditorElement;
         new (): HTMLInoMarkdownEditorElement;
     };
+    interface HTMLInoMeetupAccordionElementEventMap {
+        "expandedChange": boolean;
+    }
+    /**
+     * `ino-meetup-accordion` is a component that implements a simple accordion UI element.
+     * It allows users to expand or collapse content sections by clicking on the title.
+     * The component emits an event when its expanded state changes, and it provides a slot for
+     * custom content to be displayed when expanded.
+     */
+    interface HTMLInoMeetupAccordionElement extends Components.InoMeetupAccordion, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLInoMeetupAccordionElementEventMap>(type: K, listener: (this: HTMLInoMeetupAccordionElement, ev: InoMeetupAccordionCustomEvent<HTMLInoMeetupAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLInoMeetupAccordionElementEventMap>(type: K, listener: (this: HTMLInoMeetupAccordionElement, ev: InoMeetupAccordionCustomEvent<HTMLInoMeetupAccordionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLInoMeetupAccordionElement: {
+        prototype: HTMLInoMeetupAccordionElement;
+        new (): HTMLInoMeetupAccordionElement;
+    };
     /**
      * A menu component that displays a list of choices on a temporary surface which opens and closes on anchor or item click.
      * The anchor element is the parent element.
@@ -2749,6 +2788,7 @@ declare global {
         "ino-list-divider": HTMLInoListDividerElement;
         "ino-list-item": HTMLInoListItemElement;
         "ino-markdown-editor": HTMLInoMarkdownEditorElement;
+        "ino-meetup-accordion": HTMLInoMeetupAccordionElement;
         "ino-menu": HTMLInoMenuElement;
         "ino-nav-drawer": HTMLInoNavDrawerElement;
         "ino-nav-item": HTMLInoNavItemElement;
@@ -3845,6 +3885,22 @@ declare namespace LocalJSX {
          */
         "viewMode"?: ViewModeUnion;
     }
+    /**
+     * `ino-meetup-accordion` is a component that implements a simple accordion UI element.
+     * It allows users to expand or collapse content sections by clicking on the title.
+     * The component emits an event when its expanded state changes, and it provides a slot for
+     * custom content to be displayed when expanded.
+     */
+    interface InoMeetupAccordion {
+        /**
+          * The title of the accordion.
+         */
+        "accordionTitle": string;
+        /**
+          * Emits when the user clicks to toggle the accordion.
+         */
+        "onExpandedChange"?: (event: InoMeetupAccordionCustomEvent<boolean>) => void;
+    }
     /**
      * A menu component that displays a list of choices on a temporary surface which opens and closes on anchor or item click.
      * The anchor element is the parent element.
@@ -4594,6 +4650,7 @@ declare namespace LocalJSX {
         "ino-list-divider": InoListDivider;
         "ino-list-item": InoListItem;
         "ino-markdown-editor": InoMarkdownEditor;
+        "ino-meetup-accordion": InoMeetupAccordion;
         "ino-menu": InoMenu;
         "ino-nav-drawer": InoNavDrawer;
         "ino-nav-item": InoNavItem;
@@ -4810,6 +4867,13 @@ declare module "@stencil/core" {
              * | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
              */
             "ino-markdown-editor": LocalJSX.InoMarkdownEditor & JSXBase.HTMLAttributes<HTMLInoMarkdownEditorElement>;
+            /**
+             * `ino-meetup-accordion` is a component that implements a simple accordion UI element.
+             * It allows users to expand or collapse content sections by clicking on the title.
+             * The component emits an event when its expanded state changes, and it provides a slot for
+             * custom content to be displayed when expanded.
+             */
+            "ino-meetup-accordion": LocalJSX.InoMeetupAccordion & JSXBase.HTMLAttributes<HTMLInoMeetupAccordionElement>;
             /**
              * A menu component that displays a list of choices on a temporary surface which opens and closes on anchor or item click.
              * The anchor element is the parent element.

packages/elements/src/components/ino-meetup/ino-meetup.scss

@@ -0,0 +1,56 @@
+@use '../base/typography-new' as typography;
+@use '../base/new-theme' as theme;
+
+.accordion {
+  border: 1px solid theme.$n-3;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  &--expanded {
+    background-color: #e8e8e8;
+
+    .question::after {
+        transform: rotate(180deg);
+    }
+
+    .answer {
+      max-height: 300px;
+    }
+  }
+}
+
+.question {
+  @include typography.typo(title-s);
+  padding: 16px;
+  background-color: theme.$p-1;
+  transition: background-color 0.3s ease;
+  width: 100%;
+  border: none;
+  display: flex;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: theme.$p-3;
+  }
+
+  &::after {
+    content: '\25BC';
+    font-size: 0.8em;
+    transition: transform 0.3s ease;
+  }
+}
+
+.answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+
+  &__content {
+    padding: 16px;
+    background-color: #ffffff;
+    @include typography.typo(body-m);
+    color: theme.$n-10;
+  }
+}

packages/elements/src/components/ino-meetup/ino-meetup.tsx

@@ -0,0 +1,59 @@
+import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';
+
+/**
+ * `ino-meetup-accordion` is a component that implements a simple accordion UI element.
+ * It allows users to expand or collapse content sections by clicking on the title.
+ * The component emits an event when its expanded state changes, and it provides a slot for
+ * custom content to be displayed when expanded.
+ */
+@Component({
+  tag: 'ino-meetup-accordion',
+  styleUrl: 'ino-meetup.scss',
+  shadow: true,
+})
+export class MeetupAccordion implements ComponentInterface {
+  /**
+   * The title of the accordion.
+   */
+  @Prop() accordionTitle!: string;
+
+  /**
+   * Whether the accordion is expanded or collapsed.
+   */
+  @State() expanded = false;
+
+  @Watch('expanded')
+  expandedChanged() {
+    this.expandedChange.emit(this.expanded);
+  }
+
+  componentDidLoad() {
+    if (!this.accordionTitle) {
+      console.warn('Ino-Accordion: missing accordionTitle property.');
+    }
+  }
+
+  private toggleAccordion() {
+    this.expanded = !this.expanded;
+  }
+
+  /**
+   * Emits when the user clicks to toggle the accordion.
+   */
+  @Event() expandedChange: EventEmitter<boolean>;
+
+  render(): any {
+    return (
+      <div class={{ accordion: true, 'accordion--expanded': this.expanded }}>
+        <button class="question" onClick={() => this.toggleAccordion()}>
+          {this.accordionTitle}
+        </button>
+        <div class="answer">
+          <div class="answer__content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}