feat: added border toggle to benefits for images

kopexa-grc · Feb 14, 2025 · fbcc8e6 · fbcc8e6
1 parent c81f935
commit fbcc8e6
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 3 deletions.
diff --git a/customtypes/home_page/index.json b/customtypes/home_page/index.json
@@ -29,6 +29,9 @@
         "fieldset": "Slice Zone",
         "config": {
           "choices": {
+            "blog_post_slider": {
+              "type": "SharedSlice"
+            },
             "features": {
               "type": "SharedSlice"
             },

diff --git a/prismicio-types.d.ts b/prismicio-types.d.ts
@@ -632,6 +632,7 @@ export type EnterpriseHomeDocument<Lang extends string = string> =
   >;
 
 type HomePageDocumentDataSlicesSlice =
+  | BlogPostSliderSlice
   | FeaturesSlice
   | HowItWorksSlice
   | BenefitsSlice
@@ -1474,6 +1475,17 @@ export interface BenefitsSliceImageTextListLeftPrimary {
    * - **Documentation**: https://prismic.io/docs/field#image
    */
   image: prismic.ImageField<never>;
+
+  /**
+   * Hide border on Image? field in *Benefits → Image Text List Left → Primary*
+   *
+   * - **Field Type**: Boolean
+   * - **Placeholder**: *None*
+   * - **Default Value**: false
+   * - **API ID Path**: benefits.imageTextListLeft.primary.disable_image_border
+   * - **Documentation**: https://prismic.io/docs/field#boolean
+   */
+  disable_image_border: prismic.BooleanField;
 }
 
 /**
@@ -1522,6 +1534,17 @@ export interface BenefitsSliceImageTextListRightPrimary {
    * - **Documentation**: https://prismic.io/docs/field#image
    */
   image: prismic.ImageField<never>;
+
+  /**
+   * Disable Image Border field in *Benefits → Image Text List Right → Primary*
+   *
+   * - **Field Type**: Boolean
+   * - **Placeholder**: *None*
+   * - **Default Value**: false
+   * - **API ID Path**: benefits.imageTextListRight.primary.disable_image_border
+   * - **Documentation**: https://prismic.io/docs/field#boolean
+   */
+  disable_image_border: prismic.BooleanField;
 }
 
 /**

diff --git a/src/slices/Benefits/index.tsx b/src/slices/Benefits/index.tsx
@@ -64,7 +64,9 @@ const BenefitImageTextListRight = ({
       </div>
       <figure className="md:w-1/2">
         <div className="relative p-px">
-          <div className="absolute inset-0 z-10 pointer-events-none rounded-2xl border-2" />
+          {!slice.primary.disable_image_border && (
+            <div className="absolute inset-0 z-10 pointer-events-none rounded-2xl border-2" />
+          )}
           <div className="overflow-hidden rounded-2xl relative">
             <PrismicNextImage field={slice.primary.image} className="w-full" />
           </div>
@@ -91,7 +93,9 @@ const BenefitImageTextListLeft = ({
       </div>
       <figure className="md:w-1/2">
         <div className="relative p-px">
-          <div className="absolute inset-0 z-10 pointer-events-none rounded-2xl border-2" />
+          {!slice.primary.disable_image_border && (
+            <div className="absolute inset-0 z-10 pointer-events-none rounded-2xl border-2" />
+          )}
           <div className="overflow-hidden rounded-2xl relative">
             <PrismicNextImage field={slice.primary.image} className="w-full" />
           </div>

diff --git a/src/slices/Benefits/mocks.json b/src/slices/Benefits/mocks.json
@@ -104,6 +104,10 @@
 						}
 					}
 				]
+			},
+			"disable_image_border": {
+				"__TYPE__": "BooleanContent",
+				"value": true
 			}
 		},
 		"items": [
@@ -161,6 +165,10 @@
 				"alt": null,
 				"__TYPE__": "ImageContent",
 				"thumbnails": {}
+			},
+			"disable_image_border": {
+				"__TYPE__": "BooleanContent",
+				"value": true
 			}
 		},
 		"items": [

diff --git a/src/slices/Benefits/model.json b/src/slices/Benefits/model.json
@@ -74,6 +74,15 @@
             "constraint": {},
             "thumbnails": []
           }
+        },
+        "disable_image_border": {
+          "type": "Boolean",
+          "config": {
+            "label": "Hide border on Image?",
+            "placeholder_false": "false",
+            "placeholder_true": "true",
+            "default_value": false
+          }
         }
       },
       "items": {}
@@ -111,6 +120,15 @@
             "constraint": {},
             "thumbnails": []
           }
+        },
+        "disable_image_border": {
+          "type": "Boolean",
+          "config": {
+            "label": "Disable Image Border",
+            "placeholder_false": "false",
+            "placeholder_true": "true",
+            "default_value": false
+          }
         }
       },
       "items": {}

diff --git a/src/slices/BlogPostSlider/index.tsx b/src/slices/BlogPostSlider/index.tsx
@@ -44,7 +44,7 @@ const BlogPostSlider = async ({ slice, context }: BlogPostSliderProps) => {
 
   return (
     <Carousel.Root
-      className="py-12 md:py-20 xl:py-24 w-full"
+      className="py-12 md:py-20 xl:py-24 w-full overflow-hidden"
       opts={{
         align: "start",
       }}

diff --git a/src/slices/BlogPostSlider/screenshot-default.png b/src/slices/BlogPostSlider/screenshot-default.png