CMS-45730 Add Button component and update Start

Author: TRomesh

templates/alloy-template/src/app/layout.tsx

@@ -18,6 +18,7 @@ import News, { NewsContentType } from '@/components/News';
 import Article, { ArticleContentType } from '@/components/base/Article';
 import BlankSection from '@/components/base/BlankSection';
 import { SEOContentType } from '@/components/base/SEO';
+import Button, { ButtonContentType } from '@/components/base/Button';
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -46,6 +47,7 @@ initContentTypeRegistry([
   TeaserContentType,
   StandardContentType,
   SEOContentType,
+  ButtonContentType,
 ]);
 
 initReactComponentRegistry({
@@ -60,6 +62,7 @@ initReactComponentRegistry({
     Start,
     Teaser,
     BlankSection,
+    Button,
   },
 });
 

templates/alloy-template/src/components/Start.tsx

@@ -2,11 +2,13 @@ import { contentType, Infer } from '@optimizely/cms-sdk';
 import {
   ComponentContainerProps,
   getPreviewUtils,
+  OptimizelyComponent,
   OptimizelyExperience,
 } from '@optimizely/cms-sdk/react/server';
 import { ProductContentType } from './Product';
 import { StandardContentType } from './Standard';
 import { SEOContentType } from './base/SEO';
+import { ButtonContentType } from './base/Button';
 
 export const StartContentType = contentType({
   key: 'Start',
@@ -33,14 +35,10 @@ export const StartContentType = contentType({
       displayName: 'Description',
       group: 'Information',
     },
-    button_link: {
-      type: 'url',
-      displayName: 'Button Link',
-      group: 'Information',
-    },
-    button_text: {
-      type: 'string',
-      displayName: 'Button Text',
+    button: {
+      type: 'component',
+      contentType: ButtonContentType,
+      displayName: 'Button',
       group: 'Information',
     },
 
@@ -152,16 +150,8 @@ function Start({ opti }: StartProps) {
                 {opti.description}
               </p>
             )}
-
-            {/* Call to Action Button */}
-            {opti.button_link && opti.button_text && (
-              <a
-                href={opti.button_link.default ?? undefined}
-                className="inline-block bg-teal-500 hover:bg-teal-600 text-white font-medium py-3 px-8 rounded-md transition-colors duration-200 text-base"
-              >
-                {opti.button_text}
-              </a>
-            )}
+            {/* Button */}
+            <OptimizelyComponent opti={opti} />
           </div>
         </div>
       </div>

templates/alloy-template/src/components/base/Button.tsx

@@ -0,0 +1,39 @@
+import { contentType, Infer } from '@optimizely/cms-sdk';
+
+export const ButtonContentType = contentType({
+  key: 'Button',
+  displayName: 'Button',
+  baseType: '_component',
+  description:
+    'The Button content type represents a button component on the website.',
+  properties: {
+    link: {
+      type: 'url',
+      displayName: 'Button Link',
+      group: 'Information',
+    },
+    text: {
+      type: 'string',
+      displayName: 'Button Text',
+      group: 'Information',
+    },
+  },
+  compositionBehaviors: ['elementEnabled'],
+});
+
+type ButtonProps = {
+  opti: Infer<typeof ButtonContentType>;
+};
+
+function Button({ opti }: ButtonProps) {
+  return (
+    <a
+      href={opti?.link?.default ?? undefined}
+      className="inline-block bg-teal-500 hover:bg-teal-600 text-white font-medium py-3 px-8 rounded-md transition-colors duration-200 text-base"
+    >
+      {opti.text}
+    </a>
+  );
+}
+
+export default Button;