docs: update optional props

Author: dawid-ziobro

docs/content/guides/6.multistore/3.patterns/2.design/4.different-code-per-store.md

@@ -186,7 +186,7 @@ The `DecoratedPrice` requires a new prop `customText`, exclusively for `store-b`
 
 1. **Duplicate** the component for `store-b`.
 2. **Modify the props interface** to include the new prop.
-3. **Implement fallback behaviors** it's best to make new props as optional to ensure existing components using the old interface remain functional
+3. **Implement fallback behaviors** make new props as optional to ensure existing components using the old interface remain functional
 4. **Modify components usage** update props passed to the changed component in other parts of your store that are using it
 
 #### In Next.js
@@ -443,7 +443,7 @@ This approach is particularly useful when you've identified that certain feature
 #### Example Workflow
 
 1. **Remove** the specialized props from the parent store component
-2. **Add** the props only to the store specific component
+2. **Add** the props only to the store specific component. Use optional props to ensure compatibility with other stores
 3. **Update** implementations of the changed component in specific store
 
 #### In Next.js
@@ -523,7 +523,7 @@ export interface ClassNameVariants {
 // Added prop to store-a
 export interface DecoratedPriceProps {
   className?: string;
-  classNameVariants: ClassNameVariants; // [!code ++]
+  classNameVariants?: ClassNameVariants; // [!code ++]
   price: SfProduct['price'];
 }
 
@@ -538,7 +538,7 @@ export default function DecoratedPrice({ className, classNameVariants, price, ..
     price && (
       <div className={classNames('flex items-baseline gap-x-2', className)} {...rest}>
         <span
-          className={classNames('font-semibold', classNameVariants.regular, { // [!code ++]
+          className={classNames('font-semibold', classNameVariants?.regular, { // [!code ++]
           className={classNames('font-semibold', { // [!code --]
             'text-neutral-900': !special,
             'text-secondary-700': special,
@@ -550,7 +550,7 @@ export default function DecoratedPrice({ className, classNameVariants, price, ..
         {special && (
           <span
             className={classNames('font-normal text-neutral-500 line-through')} // [!code --]
-            className={classNames('font-normal text-neutral-500 line-through', classNameVariants.special)} // [!code ++]
+            className={classNames('font-normal text-neutral-500 line-through', classNameVariants?.special)} // [!code ++]
             data-testid="regular-price"
           >
             {special}
@@ -617,7 +617,7 @@ And add it to specific stores that need it:
       data-testid="special-price"
       :class="[
         'font-semibold',
-        classNameVariants.regular, // [!code ++]
+        classNameVariants?.regular, // [!code ++]
         {
           'text-neutral-900': !special,
           'text-secondary-700': special,
@@ -630,7 +630,7 @@ And add it to specific stores that need it:
       v-if="special"
       data-testid="regular-price"
       :class="['font-normal text-neutral-500 line-through']" // [!code --]
-      :class="['font-normal text-neutral-500 line-through', classNameVariants.special]"  // [!code ++]
+      :class="['font-normal text-neutral-500 line-through', classNameVariants?.special]"  // [!code ++]
     >
       {{ special }}
     </span>
@@ -641,7 +641,7 @@ And add it to specific stores that need it:
 // Prop is added to the store-a component
 defineProps<{
    className?: string;
-   classNameVariants: ClassNameVariants; // [!code ++]
+   classNameVariants?: ClassNameVariants; // [!code ++]
    regular: string;
    special?: string;
 }>();
@@ -679,4 +679,4 @@ While introducing breaking changes, follow these strategies to ensure stability:
 
 ## Conclusion
 
-Customizing individual components in a **multibrand setup** can effectively address brand-specific requirements while maintaining maintainable code. Follow these steps to confidently adjust component markups while avoiding breaking changes whenever possible.
+Customizing individual components in a **multibrand setup** can effectively address brand-specific requirements while keeping the code maintainable. Follow these steps to confidently adjust component markups while avoiding breaking changes whenever possible.