CardView - implement image thumbnail

e2e/testcafe-devextreme/tests/cardView/cover.ts

@@ -0,0 +1,60 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import CardView from 'devextreme-testcafe-models/cardView';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { testScreenshot } from '../../helpers/themeUtils';
+
+fixture.disablePageReloads`CardView - HeaderPanel`
+  .page(url(__dirname, '../container.html'));
+
+test('default render', async (t) => {
+  const cardView = new CardView('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'cover-default-render.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  width: 1000,
+  height: 600,
+  columns: ['Customer', 'Order Date'],
+  cardCover: {
+    imageExpr: (data) => data.Picture && `https://js.devexpress.com/jQuery/Demos/WidgetsGallery/JSDemos/${data.Picture}`,
+    altExpr: 'FirstName',
+  },
+  dataSource: [{
+    ID: 1,
+    FirstName: 'John',
+    LastName: 'Heart',
+    Prefix: 'Mr.',
+    Position: 'CEO',
+    Picture: 'images/employees/01.png',
+    BirthDate: '1964/03/16',
+    HireDate: '1995/01/15',
+    Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003. When not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
+    Address: '351 S Hill St.',
+  }, {
+    ID: 2,
+    FirstName: 'Olivia',
+    LastName: 'Peyton',
+    Prefix: 'Mrs.',
+    Position: 'Sales Assistant',
+    BirthDate: '1981/06/03',
+    HireDate: '2012/05/14',
+    Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012.  Olivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
+    Address: '807 W Paseo Del Mar',
+  }, {
+    ID: 3,
+    FirstName: 'Robert',
+    LastName: 'Reagan',
+    Prefix: 'Mr.',
+    Position: 'CMO',
+    Picture: 'images/employees/03.png',
+    BirthDate: '1974/09/07',
+    HireDate: '2002/11/08',
+    Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
+    Address: '4 Westmoreland Pl.',
+  }],
+}));

packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss

@@ -1,3 +1,4 @@
+@use './variables' as *;
 @use '../variables' as *;
 
 .dx-card-cover {
@@ -8,9 +9,20 @@
   border-bottom: $cardview-card-border-size solid $cardview-card-border-color;
   max-height: var(--dx-cardview-card-cover-max-height);
   aspect-ratio: var(--dx-cardview-card-cover-ratio);
+
+  &-noimage {
+    background-color: $cardview-card-cover-noimage-background-color;
+    align-items: center;
+
+    .dx-icon-imagethumbnail {
+      font-size: $cardview-card-cover-noimage-icon-size;
+      color: $cardview-card-cover-noimage-icon-color;
+    }
+  }
 }
 
 .dx-card-cover-image {
   object-fit: contain;
   width: 100%;
 }
+

packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss

@@ -0,0 +1,3 @@
+$cardview-card-cover-noimage-background-color: null !default;
+$cardview-card-cover-noimage-icon-color: null !default;
+$cardview-card-cover-noimage-icon-size: null !default;

packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss

@@ -4,6 +4,7 @@
 @use '../../base/cardView/header_panel/item/variables' as *;
 @use '../../base/cardView/content_view/content/card/variables' as *;
 @use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/cover/variables' as *;
 @use '../../base/cardView/content_view/content/card/content/variables' as *;
 @use '../../base/cardView/content_view/content/variables' as *;
 
@@ -24,4 +25,7 @@ $cardview-header-filter-icon-selected-color: $base-accent !default;
 $cardview-card-content-field-value-highlight-color: $base-inverted-text-color !default;
 $cardview-card-content-field-value-highlight-background: $base-accent !default;
 
+$cardview-card-cover-noimage-background-color: #E0E0E0 !default;
+$cardview-card-cover-noimage-icon-color: #B3B3B3 !default;
+
 $cardview-card-selection-background-color: #EBF3FC;

packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss

@@ -4,11 +4,13 @@
 @use '../../base/cardView/header_panel/item/variables' as *;
 @use '../../base/cardView/content_view/content/card/variables' as *;
 @use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/cover/variables' as *;
 @use '../../base/cardView/content_view/content/card/content/variables' as *;
 @use '../../base/cardView/content_view/content/variables' as *;
 
 // adduse
 
+$cardview-fluent-sizes-48: null;
 $cardview-fluent-paddings-24: null;
 $cardview-fluent-paddings-12: null;
 $cardview-fluent-paddings-6: null;
@@ -18,6 +20,7 @@ $cardview-fluent-gaps-16: null;
 $cardview-fluent-gaps-24: null;
 
 @if $size == "default" {
+  $cardview-fluent-sizes-48: 48px;
   $cardview-fluent-paddings-24: 24px;
   $cardview-fluent-paddings-12: 12px;
   $cardview-fluent-paddings-6: 6px;
@@ -27,6 +30,7 @@ $cardview-fluent-gaps-24: null;
   $cardview-fluent-gaps-24: 24px;
 }
 @else if $size == "compact" {
+  $cardview-fluent-sizes-48: 32px;
   $cardview-fluent-paddings-24: 16px;
   $cardview-fluent-paddings-12: 8px;
   $cardview-fluent-paddings-6: 4px;
@@ -52,6 +56,8 @@ $cardview-card-border-size: 1px !default;
 $cardview-card-min-width: 250px !default;
 $cardview-card-border-radius: $cardview-fluent-border-radius-8 !default;
 
+$cardview-card-cover-noimage-icon-size: $cardview-fluent-sizes-48 !default;
+
 $cardview-card-content-padding-vertical: $cardview-fluent-paddings-12 !default;
 $cardview-card-content-padding-horizontal: $cardview-fluent-paddings-12 !default;
 $cardview-card-content-field-gap: 5px !default;

packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/cover.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cover when there is no image should render image thumbnail 1`] = `
+<div>
+  <div
+    class="dx-card-cover dx-card-cover-noimage"
+  >
+    <div
+      aria-label="No image"
+      class="dx-icon dx-icon-imagethumbnail"
+    />
+  </div>
+</div>
+`;

packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.tsx

@@ -100,6 +100,8 @@ export class Card extends Component<CardProps> {
       [CLASSES.selectCard]: !!row.isSelected,
     });
 
+    const hasCover = cover?.imageExpr;
+
     const imageSrc = cover?.imageExpr?.(this.props.row.data);
     const alt = cover?.altExpr?.(this.props.row.data);
 
@@ -118,12 +120,12 @@ export class Card extends Component<CardProps> {
           isCheckBoxesRendered={this.props.isCheckBoxesRendered}
           selectCard={this.props.selectCard}
         />
-        {imageSrc && (
+        {hasCover && (
           <Cover
             imageSrc={imageSrc}
             alt={alt}
           />
-        )}
+        ) }
         <div className={CLASSES.content}>
           {this.props.row.cells.map((cell, index) => (
             <FieldTemplate

packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { describe, expect, it } from '@jest/globals';
 import { render } from 'inferno';
 
@@ -21,4 +20,14 @@ describe('Cover', () => {
     expect(image?.alt).toBe(props.alt);
     expect(image?.className).toContain(props.className);
   });
+
+  describe('when there is no image', () => {
+    it('should render image thumbnail', () => {
+      const container = document.createElement('div');
+      const props = {};
+
+      render(<Cover {...props} />, container);
+      expect(container).toMatchSnapshot();
+    });
+  });
 });

packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.tsx

@@ -1,14 +1,18 @@
+import messageLocalization from '@js/localization/message';
+import { combineClasses } from '@ts/core/utils/combine_classes';
 import { Component } from 'inferno';
 
-const CLASSES = {
+export const CLASSES = {
   cover: 'dx-card-cover',
   image: 'dx-card-cover-image',
+  noImage: 'dx-card-cover-noimage',
+  noImageIcon: 'dx-icon dx-icon-imagethumbnail',
 };
 
 export interface CoverProps {
   imageSrc?: string;
   alt?: string;
-  template?: (src: string, alt: string | undefined, className: string) => JSX.Element;
+  template?: (src: string | undefined, alt: string | undefined, className: string) => JSX.Element;
 }
 
 export class Cover extends Component<CoverProps> {
@@ -18,21 +22,30 @@ export class Cover extends Component<CoverProps> {
     } = this.props;
     const src = imageSrc;
 
-    if (!src) {
-      // @ts-expect-error
-      return null;
-    }
-
     if (template) {
       return template(src, alt, CLASSES.image);
     }
+
+    const containerClasses = combineClasses({
+      [CLASSES.cover]: true,
+      [CLASSES.noImage]: !src,
+    });
+
     return (
-      <div className={CLASSES.cover}>
-        <img
-          src={src}
-          alt={alt}
-          className={CLASSES.image}
-        />
+      <div className={containerClasses}>
+        {src && (
+          <img
+            src={src}
+            alt={alt}
+            className={CLASSES.image}
+          />
+        )}
+        {!src && (
+          <div
+            className={CLASSES.noImageIcon}
+            aria-label={messageLocalization.format('dxCardView-cardNoImageAriaLabel')}
+          />
+        )}
       </div>
     );
   }

packages/devextreme/js/localization/messages/ar.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/bg.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/ca.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/cs.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/da.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/de.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/el.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/en.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/es.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/fa.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/fi.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/fr.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/hu.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/it.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/ja.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",
 

packages/devextreme/js/localization/messages/lt.json

@@ -353,6 +353,7 @@
 
         "dxCardView-selectAll": "Select All",
         "dxCardView-clearSelection": "Clear selection",
+        "dxCardView-cardNoImageAriaLabel": "No image",
 
         "dxAvatar-defaultImageAlt": "Avatar",