call to action tests

Sitefinity · Dec 20, 2023 · 03982d5 · 03982d5
1 parent 70b07fc
commit 03982d5
Show file tree

Hide file tree

Showing 7 changed files with 355 additions and 41 deletions.
diff --git a/src/nextjs-framework/editor/utils/classNames.ts b/src/nextjs-framework/editor/utils/classNames.ts
@@ -25,3 +25,7 @@ export const classNames = (...args: any[]): string => {
         .filter(el => el !== null)
         .join(' ');
 };
+
+export function combineClassNames(...classNames: (string | undefined)[]) {
+    return classNames.filter(x => !!x).join(' ');
+}
diff --git a/src/nextjs-framework/editor/widget-framework/attributes.ts b/src/nextjs-framework/editor/widget-framework/attributes.ts
@@ -54,9 +54,18 @@ export const generateAnchorAttrsFromLink = (linkModel?: LinkModel | null, classL
         return null;
     }
 
+    let href = linkModel.href;
+    if (linkModel.queryParams) {
+        href += `?${linkModel.queryParams}`;
+    }
+
+    if (linkModel.anchor) {
+        href += `#${linkModel.anchor}`;
+    }
+
     const attributes = {} as React.AnchorHTMLAttributes<HTMLAnchorElement>;
     attributes.target = linkModel.target;
-    attributes.href = linkModel.href;
+    attributes.href = href;
     attributes.title = linkModel.tooltip || undefined;
     attributes.className = linkModel.classList?.join(' ') + classList ? ' ' + classList : '';
 

diff --git a/src/nextjs-framework/widgets/call-to-action/call-to-action.entity.ts b/src/nextjs-framework/widgets/call-to-action/call-to-action.entity.ts
@@ -0,0 +1,28 @@
+
+import { OffsetStyle } from '../styling/offset-style';
+import { Alignment } from '../styling/alignment';
+import { ButtonType } from '../styling/button-types';
+import { LinkModel } from '../../editor/widget-framework/link-model';
+
+export class CallToActionEntity {
+    PrimaryActionLabel?: string;
+    PrimaryActionLink?: LinkModel;
+    SecondaryActionLabel?: string;
+    SecondaryActionLink?: LinkModel;
+    Style?: {
+        Primary?: {
+            DisplayStyle: ButtonType
+        },
+        Secondary?: {
+            DisplayStyle: ButtonType
+        }
+    };
+    Attributes?: { [key: string]: Array<{ Key: string, Value: string}> };
+    Position?: {
+        CTA: {
+            Alignment: Alignment
+        }
+    };
+    CssClass?: string;
+    Margins?: OffsetStyle;
+}
diff --git a/src/nextjs-framework/widgets/call-to-action/call-to-action.tsx b/src/nextjs-framework/widgets/call-to-action/call-to-action.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { StyleGenerator } from '../styling/style-generator.service';
-import { OffsetStyle } from '../styling/offset-style';
-import { Alignment } from '../styling/alignment';
-import { ButtonType } from '../styling/button-types';
-import { WidgetContext, htmlAttributes, generateAnchorAttrsFromLink, getCustomAttributes, classNames, LinkModel } from '../../editor';
+import { WidgetContext, htmlAttributes, generateAnchorAttrsFromLink, getCustomAttributes, combineClassNames } from '../../editor';
+import { CallToActionEntity } from './call-to-action.entity';
 
 export type CTAPart = 'Wrapper' | 'Primary' | 'Secondary';
 
@@ -13,9 +11,6 @@ export async function CallToAction(props: WidgetContext<CallToActionEntity>) {
     };
     const dataAttributes = htmlAttributes(props);
 
-    const defaultClass = `d-flex align-items-center ${properties.CssClass}`.trim();
-    const positionClass = StyleGenerator.getAlignmentClasses(properties.Position ? properties.Position.CTA.Alignment : 'Left');
-    const marginClass = properties.Margins && StyleGenerator.getMarginClasses(properties.Margins);
     const primaryAnchorAttributes = generateAnchorAttrsFromLink(properties.PrimaryActionLink);
     const secondaryAnchorAttributes = generateAnchorAttrsFromLink(properties.SecondaryActionLink);
     const wrapperCustomAttributes = getCustomAttributes(properties.Attributes, 'Wrapper');
@@ -26,57 +21,33 @@ export async function CallToAction(props: WidgetContext<CallToActionEntity>) {
     const primaryButtonClass = StyleGenerator.getButtonClasses(primaryClass);
     const secondaryButtonClass = StyleGenerator.getButtonClasses(secondaryClass);
 
-    dataAttributes['className'] = classNames(
-        defaultClass,
-        positionClass,
-        marginClass
-    );
-    dataAttributes['data-sfemptyicontext'] = 'Create call to action';
-    dataAttributes['data-sfhasquickeditoperation'] = true;
+    const defaultClass = combineClassNames('d-flex align-items-center', properties.CssClass);
+    const positionClass = StyleGenerator.getAlignmentClasses(properties.Position ? properties.Position.CTA.Alignment : 'Left');
+    const marginClass = properties.Margins && StyleGenerator.getMarginClasses(properties.Margins);
+    dataAttributes['className'] = combineClassNames(defaultClass, positionClass, marginClass);
+
     return (
       <div
         {...dataAttributes}
         {...wrapperCustomAttributes}
         >
         {
                 props.model.Properties.PrimaryActionLabel && <a {...primaryAnchorAttributes}
-                  className={classNames('me-3', primaryButtonClass)}
+                  className={combineClassNames('me-3', primaryButtonClass)}
                   data-call-to-action=""
                   {...primaryCustomAttributes}>
                     {props.model.Properties.PrimaryActionLabel}
                 </a>
-            }
+        }
         {
                 props.model.Properties.SecondaryActionLabel && <a {...secondaryAnchorAttributes}
                   className={secondaryButtonClass}
                   data-call-to-action=""
                   {...secondaryCustomAttributes}>
                     {props.model.Properties.SecondaryActionLabel}
                 </a>
-            }
+        }
       </div>
     );
 }
 
-export class CallToActionEntity {
-    PrimaryActionLabel?: string;
-    PrimaryActionLink?: LinkModel;
-    SecondaryActionLabel?: string;
-    SecondaryActionLink?: LinkModel;
-    Style?: {
-        Primary: {
-            DisplayStyle: ButtonType
-        },
-        Secondary: {
-            DisplayStyle: ButtonType
-        }
-    };
-    Attributes?: { [key: string]: Array<{ Key: string, Value: string}> };
-    Position?: {
-        CTA: {
-            Alignment: Alignment
-        };
-    };
-    CssClass?: string;
-    Margins?: OffsetStyle;
-}
diff --git a/src/nextjs-framework/widgets/widget-registry.ts b/src/nextjs-framework/widgets/widget-registry.ts
@@ -155,7 +155,9 @@ export const widgetRegistry: WidgetRegistry = initRegistry({
             componentType: CallToAction,
             editorMetadata: {
                 Title: 'Call to action',
-                Section: 'Basic'
+                Section: 'Basic',
+                EmptyIconText: 'Create call to action',
+                HasQuickEditOperation: true
             },
             ssr: true
         },

diff --git a/tests/__snapshots__/call-to-action.test.tsx.snap b/tests/__snapshots__/call-to-action.test.tsx.snap
@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`both buttons rendered (Button_Both_Rendered) 1`] = `
+<div>
+  <div
+    class="d-flex align-items-center justify-content-start"
+  >
+    <a
+      class="me-3 btn btn-primary"
+      data-call-to-action=""
+      href="kisela-krastavichka.jpg"
+    >
+      Primary Label
+    </a>
+    <a
+      class="btn btn-secondary"
+      data-call-to-action=""
+      href="kisela-krastavichka-2.jpg"
+    >
+      Secondary Label
+    </a>
+  </div>
+</div>
+`;
+
+exports[`button attributes rendered (Button_Attributes_Rendered) 1`] = `
+<div>
+  <div
+    class="d-flex align-items-center justify-content-start"
+    wrapper-attribute-key="rapper-attribute-value"
+  >
+    <a
+      class="me-3 btn btn-primary"
+      data-call-to-action=""
+      href="kisela-krastavichka.jpg"
+      primary-attribute-key="primary-attribute-value"
+    >
+      Primary Label
+    </a>
+    <a
+      class="btn btn-secondary"
+      data-call-to-action=""
+      href="kisela-krastavichka-2.jpg"
+      secondary-attribute-key="secondary-attribute-value"
+    >
+      Secondary Label
+    </a>
+  </div>
+</div>
+`;
+
+exports[`button margins rendered (Button_Margins_Rendered) 1`] = `
+<div>
+  <div
+    class="d-flex align-items-center justify-content-start mb-4 ms-5"
+  >
+    <a
+      class="me-3 btn btn-primary"
+      data-call-to-action=""
+      href="kisela-krastavichka.jpg"
+    >
+      Primary Label
+    </a>
+  </div>
+</div>
+`;
+
+exports[`button styling (Button_Styling_Rendered) 1`] = `
+<div>
+  <div
+    class="d-flex align-items-center justify-content-center"
+  >
+    <a
+      class="me-3 btn btn-secondary"
+      data-call-to-action=""
+      href="kisela-krastavichka.jpg"
+    >
+      Primary Label
+    </a>
+  </div>
+</div>
+`;
+
+exports[`primary button rendered (Button_PrimaryOnly_Rendered) 1`] = `
+<div>
+  <div
+    class="d-flex align-items-center justify-content-start"
+  >
+    <a
+      class="me-3 btn btn-primary"
+      data-call-to-action=""
+      href="kisela-krastavichka.jpg?a=b#c"
+    >
+      Primary Label
+    </a>
+  </div>
+</div>
+`;
+
+exports[`primary class overriden (Button_PrimaryClass_Overriden) 1`] = `
+<div>
+  <div
+    class="d-flex align-items-center justify-content-start"
+  >
+    <a
+      class="me-3 btn asd"
+      data-call-to-action=""
+      href="kisela-krastavichka.jpg"
+    >
+      Primary Label
+    </a>
+  </div>
+</div>
+`;
+
+exports[`secondary button rendered (Button_SecondaryOnly_Rendered) 1`] = `
+<div>
+  <div
+    class="d-flex align-items-center justify-content-start"
+  >
+    <a
+      class="btn btn-secondary"
+      data-call-to-action=""
+      href="kisela-krastavichka.jpg"
+    >
+      Secondary Label
+    </a>
+  </div>
+</div>
+`;