@skodaflow/web-library 3.4.0-alpha.0 → 4.0.0

package/build/organisms/cardPhotoAdjustable/cardPhotoAdjustable.d.ts

@@ -1,89 +1,90 @@
-import React from 'react';
-import { DarkOpacity, LightOpacity } from '../common/cardOpacitylayer/cardOpacityTyping';
-import { ButtonVariants } from '../..';
-/**
- * @interface ChipProps
- * @description Base definition of SkodaFlow Chip independent on core implementation.
- * Properties are inherited from HTML div element
- */
-export interface CardPhotoAdjustableProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Label text
-     */
-    labelText?: string;
-    /**
-     * If labelVariant is feature, it is possible to select a variant of the Feature Label
-     */
-    labelVariants?: 'primary' | 'neutral' | 'secondary';
-    /**
-     * Title text
-     */
-    title?: string;
-    /**
-     * Description text
-     */
-    subtitle?: string;
-    /**
-     * Mandatory Button link.
-     */
-    buttonLink?: string;
-    /**
-     * Mandatory Button label
-     */
-    buttonLabel?: string;
-    /**
-     * Mandatory Button variant.
-     */
-    buttonVariant?: ButtonVariants;
-    /**
-     * If true, button is showing
-     */
-    optionalButton?: boolean;
-    /**
-     * Optional Button label. Button displays only if it has a label text
-     */
-    optionalButtonLabel?: string;
-    /**
-     * Optional Button link.
-     */
-    optionalButtonLink?: string;
-    /**
-     * Optional Button variant.
-     */
-    optionalButtonVariant?: ButtonVariants;
-    /**
-     * Height of the component
-     */
-    heightSize?: 'small' | 'medium' | 'normal';
-    /**
-     * If true borderRadius was added to entire card
-     */
-    isBorderRadius?: boolean;
-    /**
-     * An image of the component
-     */
-    cardImage?: string;
-    /**
-     * alt HTML tag apply to the image
-     */
-    altImageDescription?: string;
-    /**
-     * A dark gradient layer was added
-     */
-    darkOpacity?: DarkOpacity;
-    /**
-     * A light gradient layer was added
-     */
-    lightOpacity?: LightOpacity;
-    /**
-     * Callback for analytics
-     */
-    analyticsCallback?: (payload?: any) => void;
-}
-/**
- * @description SkodaFlow CardPhotoFixed component.
- * Properties are inherited from HTML Div element.
- * @param props CardPhotoFixedProps
- * @returns React Functional Component
- */
-export declare const CardPhotoAdjustable: React.ForwardRefExoticComponent<CardPhotoAdjustableProps & React.RefAttributes<HTMLDivElement>>;
+import React from 'react';
+import { DarkOpacity, LightOpacity } from '../common/cardOpacitylayer/cardOpacityTyping';
+import { ButtonVariants } from '../..';
+/**
+ * @interface ChipProps
+ * @description Base definition of SkodaFlow Chip independent on core implementation.
+ * Properties are inherited from HTML div element
+ * @deprecated
+ */
+export interface CardPhotoAdjustableProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Label text
+     */
+    labelText?: string;
+    /**
+     * If labelVariant is feature, it is possible to select a variant of the Feature Label
+     */
+    labelVariants?: 'primary' | 'neutral' | 'secondary';
+    /**
+     * Title text
+     */
+    title?: string;
+    /**
+     * Description text
+     */
+    subtitle?: string;
+    /**
+     * Mandatory Button link.
+     */
+    buttonLink?: string;
+    /**
+     * Mandatory Button label
+     */
+    buttonLabel?: string;
+    /**
+     * Mandatory Button variant.
+     */
+    buttonVariant?: ButtonVariants;
+    /**
+     * If true, button is showing
+     */
+    optionalButton?: boolean;
+    /**
+     * Optional Button label. Button displays only if it has a label text
+     */
+    optionalButtonLabel?: string;
+    /**
+     * Optional Button link.
+     */
+    optionalButtonLink?: string;
+    /**
+     * Optional Button variant.
+     */
+    optionalButtonVariant?: ButtonVariants;
+    /**
+     * Height of the component
+     */
+    heightSize?: 'small' | 'medium' | 'normal';
+    /**
+     * If true borderRadius was added to entire card
+     */
+    isBorderRadius?: boolean;
+    /**
+     * An image of the component
+     */
+    cardImage?: string;
+    /**
+     * alt HTML tag apply to the image
+     */
+    altImageDescription?: string;
+    /**
+     * A dark gradient layer was added
+     */
+    darkOpacity?: DarkOpacity;
+    /**
+     * A light gradient layer was added
+     */
+    lightOpacity?: LightOpacity;
+    /**
+     * Callback for analytics
+     */
+    analyticsCallback?: (payload?: any) => void;
+}
+/**
+ * @description SkodaFlow CardPhotoFixed component.
+ * Properties are inherited from HTML Div element.
+ * @param props CardPhotoFixedProps
+ * @returns React Functional Component
+ */
+export declare const CardPhotoAdjustable: React.ForwardRefExoticComponent<CardPhotoAdjustableProps & React.RefAttributes<HTMLDivElement>>;

package/build/organisms/cardPhotoAdjustable/cardPhotoAdjustable.js

@@ -0,0 +1,148 @@
+import{jsx as e}from"react/jsx-runtime";import t from"react";import i from"@emotion/styled";import a from"@mui/material/Card";import r from"./cardPhotoAdjustableComponent.js";import{opacityLayerSwitchLightStatement as o,opacityLayerSwitchDarkStatement as n}from"../../utils/utilities.js";const p=t.forwardRef(((t,i)=>e(d,{ref:i,children:e(r,Object.assign({},t))}))),d=i(a)`
+  height: ${e=>{switch(e.children.props.heightSize){case"small":return"180px";case"medium":case"normal":return"400px";default:return""}}};
+
+  @media (min-width: ${e=>e.theme.breakpoints.values.sm}px) {
+    height: ${e=>{switch(e.children.props.heightSize){case"small":return"150px";case"medium":return"240px";case"normal":return"300px";default:return""}}};
+  }
+
+  @media (min-width: ${e=>e.theme.breakpoints.values.md}px) {
+    height: ${e=>{switch(e.children.props.heightSize){case"small":return"200px";case"medium":return"300px";case"normal":return"400px";default:return""}}};
+  }
+
+  padding: 0;
+  .CardImagePicture {
+    display: block;
+  }
+  background-color: ${e=>e.theme.palette.onSurface.os0};
+
+  color: ${e=>"opacity0"!==e.children.props.lightOpacity&&"opacity0"===e.children.props.darkOpacity||"configurator"===e.children.props.cardType?e.theme.palette.text.primary:("opacity0"!==e.children.props.darkOpacity&&e.children.props.cardType,e.theme.palette.onSurface.os0)};
+  ${e=>{if(e.theme.shape.borderRadius)return"border-radius: 0;"}}
+
+  ${e=>{if(e.children.props.isBorderRadius)return"border-radius: 8px;"}}
+
+	.CardImageHeader {
+    width: 100%;
+  }
+  .CardImageHeader {
+    .Label {
+      margin: 0;
+    }
+    color: ${e=>"opacity0"!==e.children.props.lightOpacity&&"opacity0"===e.children.props.darkOpacity?e.theme.palette.text.primary:"opacity0"!==e.children.props.darkOpacity?e.theme.palette.onSurface.os0:void 0};
+  }
+  .CardImageMedia {
+    position: relative;
+    height: auto;
+  }
+  .CardImageTextContainer {
+    padding: 24px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .CardImageText {
+    position: absolute;
+    .CardImageSubtitle {
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 24px;
+      @media (min-width: ${e=>e.theme.breakpoints.values.lg}px) {
+        font-size: 18px;
+        line-height: 28px;
+      }
+    }
+    .CardImageTitle {
+      font-size: 27px;
+      line-height: 32px;
+      @media (min-width: ${e=>e.theme.breakpoints.values.xl}px) {
+        font-size: 30px;
+        line-height: 36px;
+      }
+    }
+  }
+  .CardImageButtonsContainerContent {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    flex-direction: column-reverse;
+    @media (min-width: ${e=>e.theme.breakpoints.values.md}px) {
+      flex-direction: row;
+    }
+  }
+  .CardImageButtonsContainer {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .CardImageButtons {
+    gap: 12px 16px;
+    @media (min-width: ${e=>e.theme.breakpoints.values.md}px) {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+    .cta-button {
+      @media (min-width: ${e=>e.theme.breakpoints.values.md}px) {
+        width: auto;
+      }
+    }
+    .cta-button button {
+      @media (min-width: ${e=>e.theme.breakpoints.values.md}px) {
+        width: auto;
+        font-size: 14px;
+      }
+    }
+  }
+  .LabelsOptional {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 8px;
+    span:first-of-type {
+      margin-bottom: 4px;
+    }
+    @media (min-width: ${e=>e.theme.breakpoints.values.sm}px) {
+      span:first-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .InfoVehicle {
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 12px;
+    text-align: left;
+    width: 100%;
+    @media (min-width: ${e=>e.theme.breakpoints.values.md}px) {
+      margin-bottom: 0;
+      text-align: right;
+    }
+    margin-bottom: 16px;
+    .InfoVehicleTotal {
+      font-weight: bold;
+    }
+    .infoVehicleDealerInfoContainer {
+      display: inline-flex;
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      @media (min-width: ${e=>e.theme.breakpoints.values.sm}px) {
+        text-align: right;
+        margin-bottom: 0;
+        width: auto;
+      }
+    }
+    .infoVehicleDealerInfo {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .CardImageOverlayTheme {
+    ${e=>o(e.children.props.lightOpacity,"background")};
+
+    ${e=>n(e.children.props.darkOpacity,"background")}
+  }
+`;export{p as CardPhotoAdjustable};
+//# sourceMappingURL=cardPhotoAdjustable.js.map

package/build/organisms/cardPhotoAdjustable/cardPhotoAdjustable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardPhotoAdjustable.js","sources":["../../../src/organisms/cardPhotoAdjustable/cardPhotoAdjustable.tsx"],"sourcesContent":[null],"names":["CardPhotoAdjustable","React","forwardRef","props","ref","_jsx","CardPhotoAdjustableStyled","children","CardPhotoFixedComponent","Object","assign","styled","MuiCard","heightSize","theme","breakpoints","values","sm","md","palette","onSurface","os0","lightOpacity","darkOpacity","cardType","text","primary","shape","borderRadius","isBorderRadius","lg","xl","opacityLayerSwitchLightStatement","opacityLayerSwitchDarkStatement"],"mappings":"gSA+GO,MAAMA,EAAsBC,EAAMC,YAAqD,CAACC,EAAOC,IAElGC,EAACC,EAAyB,CAACF,IAAKA,EAC9BG,SAAAF,EAACG,EAA4BC,OAAAC,OAAA,CAAA,EAAAP,QAS7BG,EAA4BK,EAAOC,EAAwD;YACpFT,IACT,OAAQA,EAAMI,SAASJ,MAAMU,YAC3B,IAAK,QACH,MAAO,QAET,IAAK,SAGL,IAAK,SACH,MAAO,QAET,QACE,MAAO,GACV;;uBAGmBV,GAAUA,EAAMW,MAAMC,YAAYC,OAAOC;cAClDd,IACT,OAAQA,EAAMI,SAASJ,MAAMU,YAC3B,IAAK,QACH,MAAO,QAET,IAAK,SACH,MAAO,QAET,IAAK,SACH,MAAO,QAET,QACE,MAAO,GACV;;;uBAIiBV,GAAUA,EAAMW,MAAMC,YAAYC,OAAOE;cAClDf,IACT,OAAQA,EAAMI,SAASJ,MAAMU,YAC3B,IAAK,QACH,MAAO,QAET,IAAK,SACH,MAAO,QAET,IAAK,SACH,MAAO,QAET,QACE,MAAO,GACV;;;;;;;sBAQgBV,GACZA,EAAMW,MAAMK,QAAQC,UAAUC;;WAG7BlB,GAEiC,aAAtCA,EAAMI,SAASJ,MAAMmB,cAAoE,aAArCnB,EAAMI,SAASJ,MAAMoB,aACxC,iBAAlCpB,EAAMI,SAASJ,MAAMqB,SAEdrB,EAAMW,MAAMK,QAAQM,KAAKC,SAEO,aAArCvB,EAAMI,SAASJ,MAAMoB,aAA8BpB,EAAMI,SAASJ,MAAMqB,SACnErB,EAAMW,MAAMK,QAAQC,UAAUC;IAGtClB,IACD,GAAIA,EAAMW,MAAMa,MAAMC,aACpB,MAAO,mBACR;;IAGAzB,IACD,GAAIA,EAAMI,SAASJ,MAAM0B,eACvB,MAAO,qBACR;;;;;;;;;aAUS1B,GACkC,aAAtCA,EAAMI,SAASJ,MAAMmB,cAAoE,aAArCnB,EAAMI,SAASJ,MAAMoB,YACpEpB,EAAMW,MAAMK,QAAQM,KAAKC,QAEO,aAArCvB,EAAMI,SAASJ,MAAMoB,YAChBpB,EAAMW,MAAMK,QAAQC,UAAUC,SADvC;;;;;;;;;;;;;;;;;;;;;2BAwBsBlB,GAAUA,EAAMW,MAAMC,YAAYC,OAAOc;;;;;;;;2BAQzC3B,GAAUA,EAAMW,MAAMC,YAAYC,OAAOe;;;;;;;;;;;yBAW3C5B,GAAUA,EAAMW,MAAMC,YAAYC,OAAOE;;;;;;;;;;;yBAWzCf,GAAUA,EAAMW,MAAMC,YAAYC,OAAOE;;;;;2BAKvCf,GAAUA,EAAMW,MAAMC,YAAYC,OAAOE;;;;;2BAKzCf,GAAUA,EAAMW,MAAMC,YAAYC,OAAOE;;;;;;;;;;;;;yBAa3Cf,GAAUA,EAAMW,MAAMC,YAAYC,OAAOC;;;;;;;;;;;;yBAYzCd,GAAUA,EAAMW,MAAMC,YAAYC,OAAOE;;;;;;;;;;;;;;2BAcvCf,GAAUA,EAAMW,MAAMC,YAAYC,OAAOC;;;;;;;;;;;;;MAa9Dd,GACM6B,EAAiC7B,EAAMI,SAASJ,MAAMmB,aAAc;;MAG1EnB,GACM8B,EAAgC9B,EAAMI,SAASJ,MAAMoB,YAAa;;"}

package/build/organisms/cardPhotoAdjustable/cardPhotoAdjustableComponent.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { CardPhotoAdjustableProps } from '.';
-declare const CardPhotoFixedComponent: React.ForwardRefExoticComponent<CardPhotoAdjustableProps & React.RefAttributes<HTMLDivElement>>;
-export default CardPhotoFixedComponent;
+import React from 'react';
+import { CardPhotoAdjustableProps } from '.';
+declare const CardPhotoFixedComponent: React.ForwardRefExoticComponent<CardPhotoAdjustableProps & React.RefAttributes<HTMLDivElement>>;
+export default CardPhotoFixedComponent;

package/build/organisms/cardPhotoAdjustable/cardPhotoAdjustableComponent.js

@@ -0,0 +1,2 @@
+import{jsxs as a,Fragment as e,jsx as t}from"react/jsx-runtime";import n,{useCallback as l}from"react";import{Button as r}from"../../components/button/button.js";import{LabelFeature as i}from"../../components/labelFeature/labelFeature.js";import{handleMaxChars as o}from"../../utils/utilities.js";const c=n.forwardRef((({cardImage:n,altImageDescription:c,labelText:s,labelVariants:m,title:d,subtitle:u,buttonLink:b,buttonLabel:h,buttonVariant:C,optionalButton:p,optionalButtonLink:I,optionalButtonLabel:N,optionalButtonVariant:g,analyticsCallback:v},f)=>{const x=l((a=>{v&&v(a)}),[v]);return a(e,{children:[t("div",{className:"CardImageOverlayTheme"}),t("div",{className:"CardImageText",children:a("div",{className:"CardImageTextContainer",children:[a("div",{className:"CardImageHeader",children:[s&&t(i,{className:"Label",variant:m,label:o(s,30)}),d&&t("h2",{className:"h4",children:o(d,30)}),u&&t("span",{className:"CardImageSubtitle",children:o(u,30)})]}),t("div",{className:"CardImageButtonsContainer",children:t("div",{className:"CardImageButtonsContainerContent",children:a("div",{className:"CardImageButtons",children:[t("a",{tabIndex:-1,className:"cta-button",href:encodeURI(b),style:{textDecoration:"none"},children:t(r,{label:o(h,30),variant:C,compact:!0,onClick:()=>x(h)})}),p&&N&&I&&t("a",{tabIndex:-1,className:"cta-button",href:encodeURI(I),style:{textDecoration:"none"},children:t(r,{label:o(N,30),variant:g,compact:!0,onClick:()=>x(N)})})]})})})]})}),t("div",{className:"CardImageMedia",children:t("div",{className:"CardImagePicture",children:t("img",{src:n,alt:c})})})]})}));export{c as default};
+//# sourceMappingURL=cardPhotoAdjustableComponent.js.map

package/build/organisms/cardPhotoAdjustable/cardPhotoAdjustableComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardPhotoAdjustableComponent.js","sources":["../../../src/organisms/cardPhotoAdjustable/cardPhotoAdjustableComponent.tsx"],"sourcesContent":[null],"names":["CardPhotoFixedComponent","React","forwardRef","cardImage","altImageDescription","labelText","labelVariants","title","subtitle","buttonLink","buttonLabel","buttonVariant","optionalButton","optionalButtonLink","optionalButtonLabel","optionalButtonVariant","analyticsCallback","ref","handleOnClick","useCallback","e","_jsxs","_Fragment","children","_jsx","className","LabelFeature","variant","label","handleMaxChars","tabIndex","href","encodeURI","style","textDecoration","Button","compact","onClick","src","alt"],"mappings":"ySAMA,MAAMA,EAA0BC,EAAMC,YACpC,EAEIC,YACAC,sBACAC,YACAC,gBACAC,QACAC,WACAC,aACAC,cACAC,gBACAC,iBACAC,qBACAC,sBACAC,wBACAC,qBAEFC,KAEA,MAAMC,EAAgBC,GACnBC,IACCJ,GAAqBA,EAAkBI,EAAE,GAE3C,CAACJ,IAEH,OACEK,EACEC,EAAA,CAAAC,SAAA,CAAAC,EAAA,MAAA,CAAKC,UAAU,0BACfD,EAAA,MAAA,CAAKC,UAAU,gBAAeF,SAC5BF,EAAK,MAAA,CAAAI,UAAU,yBACbF,SAAA,CAAAF,EAAA,MAAA,CAAKI,UAAU,kBAAiBF,SAAA,CAC7BlB,GACCmB,EAACE,EAAY,CAACD,UAAU,QAAQE,QAASrB,EAAesB,MAAOC,EAAexB,EAAW,MAE1FE,GAASiB,EAAI,KAAA,CAAAC,UAAU,KAAMF,SAAAM,EAAetB,EAAO,MACnDC,GAAYgB,EAAM,OAAA,CAAAC,UAAU,oBAAqBF,SAAAM,EAAerB,EAAU,SAE7EgB,EAAK,MAAA,CAAAC,UAAU,4BACbF,SAAAC,EAAA,MAAA,CAAKC,UAAU,mCAAkCF,SAC/CF,EAAK,MAAA,CAAAI,UAAU,mBAAkBF,SAAA,CAC/BC,EACE,IAAA,CAAAM,UAAW,EACXL,UAAU,aACVM,KAAMC,UAAUvB,GAChBwB,MAAO,CAAEC,eAAgB,QAEzBX,SAAAC,EAACW,EAAM,CACLP,MAAOC,EAAenB,EAAa,IACnCiB,QAAShB,EACTyB,SAAS,EACTC,QAAS,IAAMnB,EAAcR,OAGhCE,GAAkBE,GAAuBD,GACxCW,EACE,IAAA,CAAAM,UAAW,EACXL,UAAU,aACVM,KAAMC,UAAUnB,GAChBoB,MAAO,CAAEC,eAAgB,QAEzBX,SAAAC,EAACW,EACC,CAAAP,MAAOC,EAAef,EAAqB,IAC3Ca,QAASZ,EACTqB,SAAS,EACTC,QAAS,IAAMnB,EAAcJ,mBAS7CU,EAAA,MAAA,CAAKC,UAAU,iBAAgBF,SAC7BC,EAAK,MAAA,CAAAC,UAAU,mBACbF,SAAAC,EAAA,MAAA,CAAKc,IAAKnC,EAAWoC,IAAKnC,UAIhC"}

package/build/organisms/cardPhotoAdjustable/index.d.ts

@@ -1 +1 @@
-export * from './cardPhotoAdjustable';
+export * from './cardPhotoAdjustable';

package/build/organisms/cardPhotoFixed/cardPhotoFixed.d.ts

@@ -1,124 +1,125 @@
-import React from 'react';
-import { DarkOpacity, LightOpacity } from '../common/cardOpacitylayer/cardOpacityTyping';
-import { ButtonVariants } from '../..';
-/**
- * @interface CardPhotoFixedProps
- * @description  Properties are inherited from HTML div element
- */
-export interface CardPhotoFixedProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Label text
-     */
-    label?: string;
-    /**
-     * Title name text
-     */
-    title?: string;
-    /**
-     * Subtitle text
-     */
-    subTitle?: string;
-    /**
-     * Description text
-     */
-    description?: string;
-    /**
-     * if true, first label is showing
-     */
-    labelInfoFirst?: boolean;
-    /**
-     * First label information label text
-     */
-    labelInfoFirstText?: string;
-    /**
-     * First label variant
-     */
-    labelInfoFirstVariant?: 'primary' | 'neutral';
-    /**
-     * if true, second optional label is showing
-     */
-    labelInfoSecond?: boolean;
-    /**
-     * Second label text
-     */
-    labelInfoSecondText?: string;
-    /**
-     * Second label variant
-     */
-    labelInfoSecondVariant?: 'primary' | 'neutral';
-    /**
-     * An image of the component
-     */
-    cardImage?: string;
-    /**
-     * alt HTML tag apply to the image
-     */
-    altImageDescription?: string;
-    /**
-     * Mandatory Button link.
-     */
-    buttonLink?: string;
-    /**
-     * Mandatory Button label. Button displays only if it has a label text
-     */
-    buttonLabel?: string;
-    /**
-     * Mandatory Button variant.
-     */
-    buttonVariant?: ButtonVariants;
-    /**
-     * If true, button is showing
-     */
-    optionalButton?: boolean;
-    /**
-     * Optional Button label. Button displays only if it has a label text
-     */
-    optionalButtonLabel?: string;
-    /**
-     * Optional Button link.
-     */
-    optionalButtonLink?: string;
-    /**
-     * Mandatory Button variant.
-     */
-    optionalButtonVariant?: ButtonVariants;
-    /**
-     * If true borderRadius was added to entire card
-     */
-    isBorderRadius?: boolean;
-    /**
-     * Info text
-     */
-    infoText?: string;
-    /**
-     * Info text second position text
-     */
-    infoTextSecond?: string;
-    /**
-     * info text third position text
-     */
-    infoTextThird?: string;
-    /**
-     * A dark gradient layer was added
-     */
-    darkOpacity?: DarkOpacity;
-    /**
-     * A light gradient layer was added
-     */
-    lightOpacity?: LightOpacity;
-    /**
-     * Uses for setting button size based on screensize
-     */
-    isCompact?: boolean;
-    /**
-     * Callback for analytics
-     */
-    analyticsCallback?: (payload?: any) => void;
-}
-/**
- * @description SkodaFlow CardPhotoFixed component.
- * Properties are inherited from HTML Div element.
- * @param props CardPhotoFixedProps
- * @returns React Functional Component
- */
-export declare const CardPhotoFixed: React.ForwardRefExoticComponent<CardPhotoFixedProps & React.RefAttributes<HTMLDivElement>>;
+import React from 'react';
+import { DarkOpacity, LightOpacity } from '../common/cardOpacitylayer/cardOpacityTyping';
+import { ButtonVariants } from '../..';
+/**
+ * @interface CardPhotoFixedProps
+ * @description  Properties are inherited from HTML div element
+ * @deprecated
+ */
+export interface CardPhotoFixedProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Title name text
+     */
+    title?: string;
+    /**
+     * Subtitle text
+     */
+    subTitle?: string;
+    /**
+     * Description text
+     */
+    description?: string;
+    /**
+     * if true, first label is showing
+     */
+    labelInfoFirst?: boolean;
+    /**
+     * First label information label text
+     */
+    labelInfoFirstText?: string;
+    /**
+     * First label variant
+     */
+    labelInfoFirstVariant?: 'primary' | 'neutral';
+    /**
+     * if true, second optional label is showing
+     */
+    labelInfoSecond?: boolean;
+    /**
+     * Second label text
+     */
+    labelInfoSecondText?: string;
+    /**
+     * Second label variant
+     */
+    labelInfoSecondVariant?: 'primary' | 'neutral';
+    /**
+     * An image of the component
+     */
+    cardImage?: string;
+    /**
+     * alt HTML tag apply to the image
+     */
+    altImageDescription?: string;
+    /**
+     * Mandatory Button link.
+     */
+    buttonLink?: string;
+    /**
+     * Mandatory Button label. Button displays only if it has a label text
+     */
+    buttonLabel?: string;
+    /**
+     * Mandatory Button variant.
+     */
+    buttonVariant?: ButtonVariants;
+    /**
+     * If true, button is showing
+     */
+    optionalButton?: boolean;
+    /**
+     * Optional Button label. Button displays only if it has a label text
+     */
+    optionalButtonLabel?: string;
+    /**
+     * Optional Button link.
+     */
+    optionalButtonLink?: string;
+    /**
+     * Mandatory Button variant.
+     */
+    optionalButtonVariant?: ButtonVariants;
+    /**
+     * If true borderRadius was added to entire card
+     */
+    isBorderRadius?: boolean;
+    /**
+     * Info text
+     */
+    infoText?: string;
+    /**
+     * Info text second position text
+     */
+    infoTextSecond?: string;
+    /**
+     * info text third position text
+     */
+    infoTextThird?: string;
+    /**
+     * A dark gradient layer was added
+     */
+    darkOpacity?: DarkOpacity;
+    /**
+     * A light gradient layer was added
+     */
+    lightOpacity?: LightOpacity;
+    /**
+     * Uses for setting button size based on screensize
+     */
+    isCompact?: boolean;
+    /**
+     * Callback for analytics
+     */
+    analyticsCallback?: (payload?: any) => void;
+}
+/**
+ * @description SkodaFlow CardPhotoFixed component.
+ * Properties are inherited from HTML Div element.
+ * @param props CardPhotoFixedProps
+ * @returns React Functional Component
+ */
+export declare const CardPhotoFixed: React.ForwardRefExoticComponent<CardPhotoFixedProps & React.RefAttributes<HTMLDivElement>>;