Feat/z book card portrait

src/beans/index.tsx

@@ -466,12 +466,17 @@ export enum BookCardDeprecatedVariant {
   SEARCH = "search",
 }
 
-export enum CardTagStatus {
+export type BookCardTag = {
+  status: BookCardTagStatus;
+  interactive: boolean;
+};
+
+export enum BookCardTagStatus {
   ACTIVE = "active",
   DISABLED = "disabled",
 }
 
-export type CardTagEvent = {
+export type BookCardTagEvent = {
   tag: string;
   state: string;
 };

src/components.d.ts

@@ -5,10 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardTagStatus, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
+import { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardTag, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
 import { AlertType, LicenseType } from "./beans/index";
 import { ListItem } from "./beans/index.js";
-export { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardTagStatus, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
+export { AccordionVariant, AvatarSize, BookCardDeprecatedVariant, BookCardTag, BookCardVariant, BreadcrumbHomepageVariant, BreadcrumbPath, BreadcrumbPathStyle, ButtonSize, ButtonType, ButtonVariant, CardVariant, CarouselArrowsPosition, CarouselProgressMode, ComboItem, ControlSize, CoverHeroContentPosition, CoverHeroVariant, DictionaryData, DividerOrientation, DividerSize, ExpandableListButtonAlign, ExpandableListStyle, InfoRevealPosition, InputStatus, InputType, LabelPosition, ListDividerType, ListSize, ListType, NavigationTabsOrientation, NavigationTabsSize, NotificationType, OffCanvasVariant, PopoverPosition, SearchbarItem, SelectItem, SkipToContentLink, SortDirection, ThemeVariant, ToastNotification, ToastNotificationPosition, ToastNotificationTransition, TransitionDirection, VisibilityCondition, ZAriaAlertMode, ZChipType, ZDatePickerMode, ZFileUploadType, ZRangePickerMode, ZSectionTitleDividerPosition } from "./beans";
 export { AlertType, LicenseType } from "./beans/index";
 export { ListItem } from "./beans/index.js";
 export namespace Components {
@@ -259,7 +259,7 @@ export namespace Components {
         /**
           * [optional] Annotated tag
          */
-        "annotated"?: CardTagStatus;
+        "annotated"?: BookCardTag | string;
         /**
           * [optional] Authors
          */
@@ -279,7 +279,7 @@ export namespace Components {
         /**
           * [optional] EDI tag
          */
-        "edi"?: CardTagStatus;
+        "edi"?: BookCardTag | string;
         /**
           * [optional] Fallback cover URL
          */
@@ -301,9 +301,9 @@ export namespace Components {
          */
         "operaTitleHtmlTag"?: string;
         /**
-          * [optional] Annotated tag
+          * [optional] Teacher version tag
          */
-        "teacherVersion"?: CardTagStatus;
+        "teacherVersion"?: BookCardTag | string;
         /**
           * Card variant: landscape, portrait
          */
@@ -329,7 +329,7 @@ export namespace Components {
         /**
           * App logo url
          */
-        "logo": string;
+        "logo"?: string;
         /**
           * App name
          */
@@ -2147,6 +2147,10 @@ export interface ZBookCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZBookCardElement;
 }
+export interface ZBookCardAppCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLZBookCardAppElement;
+}
 export interface ZBookCardDeprecatedCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLZBookCardDeprecatedElement;
@@ -2464,6 +2468,7 @@ declare global {
         "tagClick": any;
         "catalogClick": any;
         "ebookClick": any;
+        "immersiveReaderClick": any;
     }
     interface HTMLZBookCardElement extends Components.ZBookCard, HTMLStencilElement {
         addEventListener<K extends keyof HTMLZBookCardElementEventMap>(type: K, listener: (this: HTMLZBookCardElement, ev: ZBookCardCustomEvent<HTMLZBookCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2479,7 +2484,18 @@ declare global {
         prototype: HTMLZBookCardElement;
         new (): HTMLZBookCardElement;
     };
+    interface HTMLZBookCardAppElementEventMap {
+        "appClick": any;
+    }
     interface HTMLZBookCardAppElement extends Components.ZBookCardApp, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLZBookCardAppElementEventMap>(type: K, listener: (this: HTMLZBookCardAppElement, ev: ZBookCardAppCustomEvent<HTMLZBookCardAppElementEventMap[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 HTMLZBookCardAppElementEventMap>(type: K, listener: (this: HTMLZBookCardAppElement, ev: ZBookCardAppCustomEvent<HTMLZBookCardAppElementEventMap[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 HTMLZBookCardAppElement: {
         prototype: HTMLZBookCardAppElement;
@@ -3801,7 +3817,7 @@ declare namespace LocalJSX {
         /**
           * [optional] Annotated tag
          */
-        "annotated"?: CardTagStatus;
+        "annotated"?: BookCardTag | string;
         /**
           * [optional] Authors
          */
@@ -3821,7 +3837,7 @@ declare namespace LocalJSX {
         /**
           * [optional] EDI tag
          */
-        "edi"?: CardTagStatus;
+        "edi"?: BookCardTag | string;
         /**
           * [optional] Fallback cover URL
          */
@@ -3842,6 +3858,10 @@ declare namespace LocalJSX {
           * click on ebook link
          */
         "onEbookClick"?: (event: ZBookCardCustomEvent<any>) => void;
+        /**
+          * click on immersive reader
+         */
+        "onImmersiveReaderClick"?: (event: ZBookCardCustomEvent<any>) => void;
         /**
           * click on tag
          */
@@ -3855,9 +3875,9 @@ declare namespace LocalJSX {
          */
         "operaTitleHtmlTag"?: string;
         /**
-          * [optional] Annotated tag
+          * [optional] Teacher version tag
          */
-        "teacherVersion"?: CardTagStatus;
+        "teacherVersion"?: BookCardTag | string;
         /**
           * Card variant: landscape, portrait
          */
@@ -3888,6 +3908,10 @@ declare namespace LocalJSX {
           * App name
          */
         "name"?: string;
+        /**
+          * click on app link
+         */
+        "onAppClick"?: (event: ZBookCardAppCustomEvent<any>) => void;
     }
     /**
      * @cssprop --z-book-card-ribbon-background-color - ribbon backgrund color

src/components/book-card/z-book-card-app/index.stories.ts

@@ -10,7 +10,7 @@ import "./index";
 type ZBookCardAppStoriesArgs = ZBookCardApp;
 
 const StoryMeta = {
-  title: "ZBookCardApp",
+  title: "ZBookCard/ZBookCardApp",
   component: "z-book-card-app",
   argTypes: {},
   args: {

src/components/book-card/z-book-card-app/index.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, Prop, h} from "@stencil/core";
+import {Component, Element, Event, EventEmitter, Prop, h} from "@stencil/core";
 import {ControlSize, InfoRevealPosition} from "../../../beans";
 
 @Component({
@@ -13,7 +13,7 @@ export class ZBookCardApp {
    * App logo url
    */
   @Prop()
-  logo: string;
+  logo?: string;
 
   /**
    * App name
@@ -39,6 +39,14 @@ export class ZBookCardApp {
   @Prop()
   info?: string;
 
+  /** click on app link */
+  @Event()
+  appClick: EventEmitter;
+
+  private emitAppClick(): void {
+    this.appClick.emit();
+  }
+
   private renderLaz(): HTMLSpanElement | null {
     if (this.laz) {
       return <span class="laz">laZ </span>;
@@ -50,16 +58,24 @@ export class ZBookCardApp {
   render(): HTMLZBookCardAppElement {
     return (
       <div>
-        <div class="app">
-          <img
-            src={this.logo}
-            alt=""
-          />
+        <a
+          class="app z-link"
+          href={this.link}
+          aria-label={`vai a ${this.laz ? "laz" : ""} ${this.name}`}
+          onClick={() => this.emitAppClick()}
+          target="_blank"
+        >
+          {this.logo && (
+            <img
+              src={this.logo}
+              alt=""
+            />
+          )}
           <div class="name body-4-sb">
             {this.renderLaz()}
             {this.name}
           </div>
-        </div>
+        </a>
         {this.info && (
           <z-info-reveal
             icon="info"
@@ -73,6 +89,9 @@ export class ZBookCardApp {
         <a
           class="z-link z-link-icon"
           href={this.link}
+          aria-label={`vai a ${this.laz ? "laz" : ""} ${this.name}`}
+          onClick={() => this.emitAppClick()}
+          target="_blank"
         >
           <z-icon
             name="chevron-right"

src/components/book-card/z-book-card-app/readme.md

@@ -16,6 +16,13 @@
 | `name`   | `name`    | App name                                | `string`  | `undefined` |
 
 
+## Events
+
+| Event      | Description       | Type               |
+| ---------- | ----------------- | ------------------ |
+| `appClick` | click on app link | `CustomEvent<any>` |
+
+
 ## Dependencies
 
 ### Depends on

src/components/book-card/z-book-card-app/styles.css

@@ -1,47 +1,65 @@
+:host {
+  display: block;
+  width: inherit;
+  min-width: 300px;
+  height: inherit;
+  min-height: 32px;
+  background-color: var(--color-surface01);
+}
+
 :host > div {
   display: flex;
-  width: 315px;
-  height: 47px;
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-unit) calc(var(--space-unit) * 1.5);
   gap: calc(var(--space-unit) * 2);
+}
+
+:host > div .app {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--space-unit);
+}
+
+:host > div .app.z-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+:host > div .app.z-link:focus {
+  text-decoration: none;
+}
+
+:host > div .app img {
+  width: 24px;
+  height: 24px;
+}
+
+:host > div .app .name {
+  display: -webkit-box;
+  overflow: hidden;
+  height: 20px;
+  -webkit-box-orient: vertical;
+  font-family: var(--font-family-serif);
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  text-overflow: ellipsis;
+}
+
+:host > div .app .name .laz {
+  color: var(--red500);
+}
+
+:host > div z-info-reveal {
+  --z-info-reveal-panel-width: 250px;
+
+  font-family: var(--font-family-sans);
 
-  .app {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    gap: var(--space-unit);
-
-    img {
-      width: 24px;
-      height: 24px;
-    }
-
-    .name {
-      display: -webkit-box;
-      overflow: hidden;
-      height: 20px;
-      -webkit-box-orient: vertical;
-      font-family: var(--font-family-serif);
-      -webkit-line-clamp: 1;
-      line-clamp: 1;
-      text-overflow: ellipsis;
-
-      .laz {
-        color: var(--red500);
-      }
-    }
-  }
-
-  z-info-reveal {
-    --z-info-reveal-panel-width: 250px;
-
-    font-family: var(--font-family-sans);
-
-    --color-surface05: var(--color-surface01);
-    --color-text-inverse: var(--color-default-text);
-    --color-inverse-icon: var(--color-primary01);
-  }
+  --color-surface05: var(--color-surface01);
+  --color-text-inverse: var(--color-default-text);
+  --color-inverse-icon: var(--color-primary01);
 }