chore: refactor FixedHero overlay auto tint implementation (#156)

trsergey25 · web-flow · commit dfa78a5101a6 · 2025-06-23T15:06:39.000+03:00
diff --git a/apps/csk-marketing-site/package.json b/apps/csk-marketing-site/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-marketing-site",
-  "version": "6.0.94",
+  "version": "6.0.95",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",
diff --git a/apps/csk-storybook/package.json b/apps/csk-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-storybook",
-  "version": "6.0.94",
+  "version": "6.0.95",
   "description": "CSK vNext Storybook is an interactive Storybook build showcasing components from the CSK vNext component starter kit. It provides detailed documentation, live previews, and testing capabilities for easy integration into your projects.",
   "main": "index.js",
   "scripts": {
diff --git a/apps/csk-storybook/src/canvasMock/components/fixedHero.ts b/apps/csk-storybook/src/canvasMock/components/fixedHero.ts
@@ -28,5 +28,5 @@ export const getFixedHeroContent = (variant?: string): FixedHeroParameters => ({
   contentAlignment: DemoHeroContentAlignment.Center,
   fullHeight: false,
   textColor: !variant ? 'text-secondary' : 'text-primary',
-  enableOverlayAutoTint: true,
+  overlayAutoTint: '0.4',
 });
diff --git a/apps/csk-storybook/src/stories/canvas/components/FixedHero.stories.tsx b/apps/csk-storybook/src/stories/canvas/components/FixedHero.stories.tsx
@@ -49,7 +49,7 @@ const argTypes: Partial<ArgTypes<FixedHeroParameters>> = {
   ...addPrefix({ text: buttonText }, 'primaryButton'),
   contentAlignment: { control: 'select', options: ['left', 'center', 'right'] },
   textColor: color,
-  enableOverlayAutoTint: { control: 'boolean' },
+  overlayAutoTint: { control: { type: 'number', min: 0, max: 1, step: 0.1 } },
   height,
 };
 
diff --git a/apps/csk/content/component/fixedHero.yaml b/apps/csk/content/component/fixedHero.yaml
@@ -70,6 +70,7 @@ parameters:
         - contentAlignment
         - height
         - textColor
+        - overlayAutoTint
         - enableOverlayAutoTint
   - id: contentAlignment
     name: Content Alignment
@@ -106,13 +107,31 @@ parameters:
     typeConfig:
       allowColors: []
       selectedGroup: text
-  - id: enableOverlayAutoTint
-    name: Enable Overlay Auto Tint
-    type: checkbox
+  - id: overlayAutoTint
+    name: Overlay Auto Tint
+    type: dex-slider-control-parameter
     helpText: >-
-      Automatically generates a 30% transparent overlay from the title color.
-      This applies only when the component is in its default variant.
-    typeConfig: null
+      Generates a high-contrast overlay based on the text color with adjustable
+      opacity. Applies only when the component is in its default variant.
+    typeConfig:
+      step: 1
+      type: custom
+      units: px
+      options:
+        - key: 0%
+          value: '0'
+        - key: 20%
+          value: '0.2'
+        - key: 40%
+          value: '0.4'
+        - key: 60%
+          value: '0.6'
+        - key: 80%
+          value: '0.8'
+        - key: 100%
+          value: '1'
+      maxValue: 10
+      minValue: 0
   - id: 855b7e83-5dfc-448c-b9a6-f59060c1637b
     name: Deprecated
     type: group
@@ -124,6 +143,7 @@ parameters:
         - descriptionColor
         - fitHeight
         - fullHeight
+        - enableOverlayAutoTint
   - id: eyebrowTitleColor
     name: Eyebrow Text Color (Deprecated)
     type: dex-color-palette-parameter
@@ -161,6 +181,13 @@ parameters:
     name: Full Height (Deprecated)
     type: checkbox
     typeConfig: null
+  - id: enableOverlayAutoTint
+    name: Enable Overlay Auto Tint (Deprecated)
+    type: checkbox
+    helpText: >-
+      Automatically generates a 30% transparent overlay from the title color.
+      This applies only when the component is in its default variant.
+    typeConfig: null
 categoryId: f22b05f0-c4bf-4158-8ebc-4856e4d453af
 previewImageUrl: >-
   https://res.cloudinary.com/uniform-demos/image/upload/csk-v-next/baseline/preview-images/hero-fixed.jpg
@@ -169,7 +196,7 @@ slots: []
 titleParameter: displayName
 canBeComposition: false
 created: '2025-01-29T10:47:01.402162+00:00'
-updated: '2025-06-23T10:30:12.456625+00:00'
+updated: '2025-06-23T11:28:59.000319+00:00'
 variants:
   - id: columns
     name: Columns
diff --git a/apps/csk/package.json b/apps/csk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/component-starter-kit",
-  "version": "6.0.94",
+  "version": "6.0.95",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "csk-packages",
-  "version": "6.0.94",
+  "version": "6.0.95",
   "private": true,
   "scripts": {
     "build": "turbo build",
diff --git a/packages/csk-cli/package.json b/packages/csk-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-cli",
-  "version": "6.0.94",
+  "version": "6.0.95",
   "description": "Command-line interface (CLI) tool designed to streamline the development workflow within Uniform projects. It provides commands for pulling additional data and generating components based on Canvas data",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
diff --git a/packages/csk-components/package.json b/packages/csk-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-components",
-  "version": "6.0.94",
+  "version": "6.0.95",
   "description": "Components Starter Kit that provides a set of basic components for building websites within a Uniform project",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
diff --git a/packages/csk-components/src/components/canvas/DemoHero/fixed-hero.tsx b/packages/csk-components/src/components/canvas/DemoHero/fixed-hero.tsx
@@ -2,58 +2,68 @@ import { FC } from 'react';
 import { FixedHeroProps } from '.';
 import { DemoHero } from './demo-hero';
 
-export const FixedHero: FC<FixedHeroProps> = ({ textColor, enableOverlayAutoTint = false, ...props }) => (
-  <DemoHero
-    {...props}
-    // Eyebrow Text Parameters
-    eyebrowTitleTag="span"
-    eyebrowTitleSize={{
-      mobile: 'xs',
-      tablet: 'lg',
-      desktop: 'xl',
-    }}
-    eyebrowTitleWeight="bold"
-    eyebrowTitleTransform="uppercase"
-    eyebrowTitleColor={textColor || props.eyebrowTitleColor}
-    // Title Text Parameters
-    titleSize={{
-      mobile: '3xl',
-      tablet: '5xl',
-      desktop: '5xl',
-    }}
-    titleWeight="bold"
-    titleColor={textColor || props.titleColor}
-    // Description Text Parameters
-    descriptionTag="p"
-    descriptionSize={{
-      mobile: 'sm',
-      tablet: 'lg',
-      desktop: 'xl',
-    }}
-    descriptionWeight="normal"
-    descriptionColor={textColor || props.descriptionColor}
-    // Primary Button Parameters
-    primaryButtonSize="button-medium"
-    primaryButtonTextSize="sm"
-    primaryButtonTextColor="text-light"
-    primaryButtonTextWeight="normal"
-    primaryButtonButtonColor="button-primary"
-    primaryButtonTextTransform="uppercase"
-    primaryButtonHoverButtonColor="button-primary-hover"
-    // Image Parameters
-    imagePriority
-    imageObjectFit="cover"
-    imageUnoptimized
-    imageContrastBaseColor={!props.component.variant && enableOverlayAutoTint ? textColor : undefined}
-    imageOverlayOpacity="0.3"
-    // Presentation Parameters
-    spacing={{
-      paddingTop: 'container-xlarge',
-      paddingLeft: 'container-small',
-      paddingRight: 'container-small',
-      paddingBottom: 'container-xlarge',
-    }}
-    fluidContent={!props.component.variant}
-    isFlexibleHero={false}
-  />
-);
+const getImageOverlayOpacity = (overlayAutoTint?: string, enableOverlayAutoTint?: boolean) => {
+  if (overlayAutoTint) return overlayAutoTint;
+  // Cover deprecated case
+  if (enableOverlayAutoTint) return '0.3';
+  return undefined;
+};
+
+export const FixedHero: FC<FixedHeroProps> = ({ textColor, overlayAutoTint, enableOverlayAutoTint, ...props }) => {
+  const imageOverlayOpacity = getImageOverlayOpacity(overlayAutoTint, enableOverlayAutoTint);
+  return (
+    <DemoHero
+      {...props}
+      // Eyebrow Text Parameters
+      eyebrowTitleTag="span"
+      eyebrowTitleSize={{
+        mobile: 'xs',
+        tablet: 'lg',
+        desktop: 'xl',
+      }}
+      eyebrowTitleWeight="bold"
+      eyebrowTitleTransform="uppercase"
+      eyebrowTitleColor={textColor || props.eyebrowTitleColor}
+      // Title Text Parameters
+      titleSize={{
+        mobile: '3xl',
+        tablet: '5xl',
+        desktop: '5xl',
+      }}
+      titleWeight="bold"
+      titleColor={textColor || props.titleColor}
+      // Description Text Parameters
+      descriptionTag="p"
+      descriptionSize={{
+        mobile: 'sm',
+        tablet: 'lg',
+        desktop: 'xl',
+      }}
+      descriptionWeight="normal"
+      descriptionColor={textColor || props.descriptionColor}
+      // Primary Button Parameters
+      primaryButtonSize="button-medium"
+      primaryButtonTextSize="sm"
+      primaryButtonTextColor="text-light"
+      primaryButtonTextWeight="normal"
+      primaryButtonButtonColor="button-primary"
+      primaryButtonTextTransform="uppercase"
+      primaryButtonHoverButtonColor="button-primary-hover"
+      // Image Parameters
+      imagePriority
+      imageObjectFit="cover"
+      imageUnoptimized
+      imageContrastBaseColor={!props.component.variant && imageOverlayOpacity ? textColor : undefined}
+      imageOverlayOpacity={imageOverlayOpacity}
+      // Presentation Parameters
+      spacing={{
+        paddingTop: 'container-xlarge',
+        paddingLeft: 'container-small',
+        paddingRight: 'container-small',
+        paddingBottom: 'container-xlarge',
+      }}
+      fluidContent={!props.component.variant}
+      isFlexibleHero={false}
+    />
+  );
+};
diff --git a/packages/csk-components/src/components/canvas/DemoHero/index.tsx b/packages/csk-components/src/components/canvas/DemoHero/index.tsx
@@ -74,7 +74,11 @@ export type DemoHeroParameters = ContainerParameters & {
 
 export type FixedHeroParameters = {
   textColor?: string;
+  /**
+   * @deprecated Use overlayAutoTint instead.
+   */
   enableOverlayAutoTint?: boolean;
+  overlayAutoTint?: string;
 } & DemoHeroParameters;
 
 export type FlexibleHeroParameters = DemoHeroParameters;
diff --git a/packages/csk-recipes/package.json b/packages/csk-recipes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-recipes",
-  "version": "6.0.94",
+  "version": "6.0.95",
   "description": "command-line interface (CLI) and utility functions to help you work with recipes in a CSK project. It simplifies project initialization by allowing you to choose templates and include specific recipes",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
diff --git a/packages/design-extensions-tools/package.json b/packages/design-extensions-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-extensions-tools",
-  "version": "6.0.94",
+  "version": "6.0.95",
   "description": "Command-line interface (CLI) tool and a set of utilities for working with design extension integrations",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@repo/eslint-config",
-  "version": "6.0.94",
+  "version": "6.0.95",
   "type": "module",
   "private": true,
   "exports": {
diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@uniformdev/csk-marketing-site",`
`3`		`- "version": "6.0.94",`
	`3`	`+ "version": "6.0.95",`
`4`	`4`	`"private": true,`
`5`	`5`	`"engines": {`
`6`	`6`	`"yarn": "please-use-npm",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@uniformdev/csk-storybook",`
`3`		`- "version": "6.0.94",`
	`3`	`+ "version": "6.0.95",`
`4`	`4`	`"description": "CSK vNext Storybook is an interactive Storybook build showcasing components from the CSK vNext component starter kit. It provides detailed documentation, live previews, and testing capabilities for easy integration into your projects.",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@uniformdev/component-starter-kit",`
`3`		`- "version": "6.0.94",`
	`3`	`+ "version": "6.0.95",`
`4`	`4`	`"private": true,`
`5`	`5`	`"engines": {`
`6`	`6`	`"yarn": "please-use-npm",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "csk-packages",`
`3`		`- "version": "6.0.94",`
	`3`	`+ "version": "6.0.95",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"build": "turbo build",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@uniformdev/csk-cli",`
`3`		`- "version": "6.0.94",`
	`3`	`+ "version": "6.0.95",`
`4`	`4`	`"description": "Command-line interface (CLI) tool designed to streamline the development workflow within Uniform projects. It provides commands for pulling additional data and generating components based on Canvas data",`
`5`	`5`	`"license": "SEE LICENSE IN LICENSE.txt",`
`6`	`6`	`"engines": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@uniformdev/csk-components",`
`3`		`- "version": "6.0.94",`
	`3`	`+ "version": "6.0.95",`
`4`	`4`	`"description": "Components Starter Kit that provides a set of basic components for building websites within a Uniform project",`
`5`	`5`	`"license": "SEE LICENSE IN LICENSE.txt",`
`6`	`6`	`"engines": {`