Add 'None' option for FeatureCard illustration (#3468)

kyma-project · Nov 12, 2024 · ac76e72 · ac76e72
1 parent d6c02f6
commit ac76e72
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/docs/extensibility/50-list-and-details-widgets.md b/docs/extensibility/50-list-and-details-widgets.md
@@ -411,7 +411,7 @@ These are the available `FeatureCard` widget parameters:
 | **description**  | No       | string    | Renders the description.                                                                                                                                          |
 | **id**           | **Yes**  | string    | Defines the banner's **(unique!)** identifier.                                                                                                                    |
 | **children**     | No       | []objects | Defines the banner's children that are displayed below the description. It is recommended to use button-like components here. The maximum number of objects is 2. |
-| **illustration** | No       | string    | Defines the illustration displayed on the right. Can be one of the following: `Modules` (default), `AI`                                                           |
+| **illustration** | No       | string    | Defines the illustration displayed on the right. Can be one of the following: `Modules` (default), `AI`, `None`                                                   |
 | **design**       | No       | string    | Defines the background color-gradient of the banner. Can be one of the following: `information-1` (default), `information-2`.                                     |
 
 See the following example:

diff --git a/src/components/Extensibility/components/FeaturedCard/FeaturedCard.js b/src/components/Extensibility/components/FeaturedCard/FeaturedCard.js
@@ -14,6 +14,8 @@ import './FeaturedCard.scss';
 
 const getIllustration = (illustration, theme) => {
   switch (illustration) {
+    case 'None':
+      return null;
     case 'AI':
       switch (theme) {
         case 'sap_horizon_hcw':
@@ -80,6 +82,7 @@ export function FeaturedCard({ value, structure, schema, ...props }) {
     return <></>;
   }
 
+  const illustration = getIllustration(structure?.illustration, theme);
   return (
     <div style={spacing.sapUiSmallMargin}>
       <Card>
@@ -116,11 +119,13 @@ export function FeaturedCard({ value, structure, schema, ...props }) {
                 ))}
               </div>
             </div>
-            <img
-              src={getIllustration(structure?.illustration, theme)}
-              alt="FeaturedCard Illustration"
-              className="illustration"
-            />
+            {illustration && (
+              <img
+                src={illustration}
+                alt="FeaturedCard Illustration"
+                className="illustration"
+              />
+            )}
           </div>
         </div>
       </Card>