docs(AnalyticalCard): mark component as deprecated (#4860)

Author: Lukas742

packages/main/src/components/AnalyticalCard/AnalyticalCard.mdx

@@ -4,12 +4,26 @@ import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
 import '@ui5/webcomponents-icons/dist/person-placeholder.js';
 import { AnalyticalCardHeader } from '../AnalyticalCardHeader';
 import { NumericSideIndicator } from '../NumericSideIndicator';
+import { MessageStrip } from '../../webComponents/MessageStrip/index';
+import { MessageStripDesign } from '../../enums/MessageStripDesign';
 import * as ComponentStories from './AnalyticalCard.stories';
 
 <Meta of={ComponentStories} subcomponents={{ AnalyticalCardHeader, NumericSideIndicator }} />
 
 <DocsHeader />
 
+<MessageStrip
+  design={MessageStripDesign.Warning}
+  children={
+    <>
+      This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the
+      <ui5-link href={'https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-card'}>
+        Card
+      </ui5-link> instead.
+    </>
+  }
+/>
+
 **Note:** The `AnalyticalCard` was mainly made to display KPIs and complex data. If you want to implement a simple card, the `Card` component probably is more suitable.
 
 <br />

packages/main/src/components/AnalyticalCard/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useStylesheet } from '@ui5/webcomponents-react-base';
+import { deprecationNotice, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { ReactNode } from 'react';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import type { CommonProps } from '../../interfaces/index.js';
 import type { CardDomRef } from '../../webComponents/index.js';
 import { Card } from '../../webComponents/index.js';
@@ -21,12 +21,21 @@ export interface AnalyticalCardPropTypes extends CommonProps {
 
 /**
  * The `AnalyticalCard` is mainly used for data visualization. It consists of two areas – a header area and a chart area with a visual representation of the data.<br />
+ *
+ * @deprecated This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the [Card](https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-card) instead.
  */
 const AnalyticalCard = forwardRef<CardDomRef, AnalyticalCardPropTypes>((props, ref) => {
   const { children, header, ...rest } = props;
 
   useStylesheet(styleData, AnalyticalCard.displayName);
 
+  useEffect(() => {
+    deprecationNotice(
+      'AnalyticalCard',
+      'This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the Card component instead.'
+    );
+  }, []);
+
   return (
     <Card ref={ref} {...rest}>
       {header}

packages/main/src/components/AnalyticalCardHeader/index.tsx

@@ -91,9 +91,9 @@ const deviationMap = new Map<AnalyticalCardHeaderPropTypes['trend'], any>([
 ]);
 
 /**
- * The `AnalyticalCardHeader` component serves as layout for the header prop of the `AnalyticalCard`.
+ * The `AnalyticalCardHeader` is a KPI header, enabling the AnalyticalCard representation. If this header is used, the `Card` should only receive a chart as content and no footer area.
  *
- * It should only be used as header for the `AnalyticalCard` component.
+ * __Note:__ This component should only be used as header for the `Card` component.
  */
 export const AnalyticalCardHeader = forwardRef<HTMLDivElement, AnalyticalCardHeaderPropTypes>((props, ref) => {
   const {

packages/main/src/webComponents/Card/Card.mdx

@@ -5,6 +5,7 @@ import { CardHeader } from '../CardHeader';
 import CardHeaderDescription from '../CardHeader/CardHeaderDescription.md?raw';
 import * as ComponentStories from './Card.stories';
 import CardDescription from './CardDescription.md?raw';
+import { AnalyticalCardHeader } from '../../components/AnalyticalCardHeader/index';
 
 <Meta of={ComponentStories} />
 
@@ -22,6 +23,14 @@ import CardDescription from './CardDescription.md?raw';
 
 <Markdown>{CardDescription}</Markdown>
 
+## More Examples
+
+### Card with AnalyticalCardHeader
+
+**Note:** The `AnalyticalCardHeader` is a pure React component developed exclusively in the ui5-webcomponents-react repo.
+
+<ControlsWithNote of={ComponentStories.WithAnalyticalCardHeader} />
+
 <Markdown>{SubcomponentsSection}</Markdown>
 
 ## CardHeader
@@ -30,4 +39,12 @@ import CardDescription from './CardDescription.md?raw';
 <ArgTypesWithNote of={CardHeader} />
 <Markdown>{CardHeaderDescription}</Markdown>
 
+## AnalyticalCardHeader
+
+<Description of={AnalyticalCardHeader} />
+
+**Note:** The `AnalyticalCardHeader` is a pure React component developed exclusively in the ui5-webcomponents-react repo.
+
+<ArgTypesWithNote of={AnalyticalCardHeader} />
+
 <Footer />

packages/main/src/webComponents/Card/Card.stories.tsx

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import personIcon from '@ui5/webcomponents-icons/dist/person-placeholder.js';
+import { LineChart } from '@ui5/webcomponents-react-charts';
+import { AnalyticalCardHeader } from '../../components/AnalyticalCardHeader';
+import { NumericSideIndicator } from '../../components/NumericSideIndicator';
+import { DeviationIndicator, ValueColor } from '../../enums';
 import { CardHeader } from '../CardHeader';
 import { Icon } from '../Icon';
 import { List } from '../List';
@@ -42,3 +46,58 @@ export const Default: Story = {
     );
   }
 };
+
+const simpleDataSet = [
+  {
+    name: 'January',
+    users: 76
+  },
+  {
+    name: 'February',
+    users: 230
+  },
+  {
+    name: 'March',
+    users: 240
+  },
+  {
+    name: 'April',
+    users: 280
+  },
+  {
+    name: 'May',
+    users: 100
+  }
+];
+
+export const WithAnalyticalCardHeader = {
+  render: (args) => {
+    return (
+      <Card
+        header={
+          <AnalyticalCardHeader
+            titleText="Project Cloud Transformation"
+            subtitleText="Revenue"
+            unitOfMeasurement="EUR"
+            trend={DeviationIndicator.Down}
+            value="65.34"
+            state={ValueColor.Error}
+            scale="K"
+            description="Q1, 2018"
+          >
+            <NumericSideIndicator titleText="Target" number="100" unit="k" />
+            <NumericSideIndicator titleText="Deviation" number="34.7" unit="%" state={ValueColor.Critical} />
+          </AnalyticalCardHeader>
+        }
+      >
+        <LineChart
+          className="chromatic-ignore"
+          noLegend
+          dimensions={[{ accessor: 'name' }]}
+          measures={[{ accessor: 'users', formatter: (val) => `${val}k` }]}
+          dataset={simpleDataSet}
+        />
+      </Card>
+    );
+  }
+};