feat: add a no image story for features 4

my3rdstory · Dec 8, 2023 · 8cdcb5d · 8cdcb5d
1 parent 23d26b1
commit 8cdcb5d
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/src/components/widgets/Features4.tsx b/src/components/widgets/Features4.tsx
@@ -13,27 +13,28 @@ const Features4 = ({
   isAfterContent,
   id,
   hasBackground = false,
+  isImageDisplayed = true,
 }: FeaturesProps) => (
   <WidgetWrapper
     id={id}
     hasBackground={hasBackground}
     containerClass={`${isBeforeContent ? 'md:pb-8 lg:pb-12' : ''} ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''}`}
   >
     {header && <Headline header={header} titleClass="text-4xl md:text-5xl" />}
-
-    <div aria-hidden="true" className="aspect-w-16 aspect-h-7">
-      {image && (
-        <Image
-          className="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg"
-          src={image.src}
-          alt={image.alt}
-          width={728}
-          height={320}
-          sizes="(max-width: 64rem) 100vw, 1024px"
-        />
-      )}
-    </div>
-
+    {isImageDisplayed && (
+      <div aria-hidden="true" className="aspect-w-16 aspect-h-7">
+        {image && (
+          <Image
+            className="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg"
+            src={image.src}
+            alt={image.alt}
+            width={728}
+            height={320}
+            sizes="(max-width: 64rem) 100vw, 1024px"
+          />
+        )}
+      </div>
+    )}
     <ItemGrid
       items={items}
       columns={columns}

diff --git a/src/shared/data/pages/services.data.tsx b/src/shared/data/pages/services.data.tsx
@@ -153,6 +153,7 @@ export const features4Services: FeaturesProps = {
     subtitle:
       'Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates.',
   },
+  isImageDisplayed: true,
   image: {
     src: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80',
     alt: 'Hero TailNext',

diff --git a/src/shared/types.d.ts b/src/shared/types.d.ts
@@ -269,6 +269,8 @@ type FeaturesProps = Widget & {
   items?: Array<Item>;
   /** How many columns should it have? */
   columns?: 1 | 2 | 3;
+  /** Do you want the image to be displayed? */
+  isImageDisplayed?: boolean;
   image?: Image;
   isBeforeContent?: boolean;
   isAfterContent?: boolean;

diff --git a/src/stories/widgets/Features4.stories.tsx b/src/stories/widgets/Features4.stories.tsx
@@ -55,6 +55,13 @@ export const ThreeColumns: Story = {
   },
 };
 
+export const NoImage: Story = {
+  args: {
+    ...mockData,
+    isImageDisplayed: false,
+  },
+};
+
 export const Mobile: Story = {
   args: {
     ...mockData,