SUGCON 2024: Navigation Link Placeholder

src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Link.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Box, Link } from '@chakra-ui/react';
+import { ButtonLink } from 'src/basics/ButtonLink';
 import { LinkField, Link as JssLink } from '@sitecore-jss/sitecore-jss-nextjs';
 
 // Define the type of props that Link will accept
@@ -24,3 +25,9 @@ export const Default = (props: LinkProps): JSX.Element => {
     </Box>
   );
 };
+
+export const Button = (props: LinkProps): JSX.Element => {
+  return (
+    <ButtonLink field={props.fields.Link} />
+  );
+};

src/Project/Sugcon2024/Sugcon/src/components/Navigation.tsx

@@ -2,6 +2,7 @@
   ComponentParams,
   ComponentRendering,
   LinkField,
+  Placeholder,
   Link as SitecoreLink,
   Text,
   TextField,
@@ -22,11 +23,10 @@
 } from '@chakra-ui/react';
 import clsx from 'clsx';
 import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
 import {
   HeaderHeights,
   PaddingX,
   PaddingY,
-  responsiveButtonSizeConfig,
 } from 'template/LayoutConstants';
 
 export interface Fields {
@@ -38,16 +38,13 @@
   Querystring: string;
   Children?: Fields[];
   Styles: string[];
 }
 
-export type CustomComponentRendering = Omit<ComponentRendering, 'fields'> & {
-  fields: Fields[];
-};
 
 export type NavigationProps = {
   params?: ComponentParams;
   fields: Fields;
-  rendering: CustomComponentRendering;
+  rendering: ComponentRendering;
   className?: string;
 };
 
@@ -107,6 +104,7 @@
       navigationMenuItems={navigationMenuItems}
       onToggle={onToggle}
       pageEditing={pageEditing}
+      rendering={props.rendering}
     />
   );
 
@@ -149,15 +147,17 @@
   navigationMenuItems: Fields[];
   onToggle?: () => void;
   pageEditing: boolean | undefined;
+  rendering: ComponentRendering;
 }
 
 const ResponsiveNavigation = ({
   navigationMenuItems,
   onToggle,
   pageEditing,
+  rendering
 }: ResponsiveNavigationProps): JSX.Element => {
   return (
-    <Box as="nav" role="navigation" aria-label="SUGCON Europe 2024" ml={{ base: 0, lg: 'auto' }}>
+    <Box as="nav" role="navigation" aria-label="SUGCON" ml={{ base: 0, lg: 'auto' }}>
       <UnorderedList
         display={{ base: 'block', lg: 'flex' }}
         flexWrap="wrap"
@@ -194,13 +194,7 @@
             );
           })}
         <ListItem>
-          <Button
-            as={Link}
-            href="https://siteco.re/SUGCONEurope2024Registration"
-            size={responsiveButtonSizeConfig}
-          >
-            Register now
-          </Button>
+          <Placeholder name="button-link" rendering={rendering} />
         </ListItem>
       </UnorderedList>
     </Box>

src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/Link.Button.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button as ButtonLink } from '../../../components/Basic Components/Link';
+const meta = {
+  title: 'Basic Components/Link',
+  component: ButtonLink,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof ButtonLink>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Button: Story = {
+  name: 'Button',
+  args: {
+    params: {
+      styles: '',
+    },
+    fields: {
+      Link: {
+        value: {
+          href: 'https://www.google.com',
+          text: 'Register Now',
+          linktype: 'external'
+        },
+      },
+    },
+  },
+};
+

src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/Link.stories.tsx

@@ -11,6 +11,7 @@ const meta = {
 } satisfies Meta<typeof LinkComponent>;
 export default meta;
 type Story = StoryObj<typeof meta>;
+
 export const Link: Story = {
   name: 'Link',
   args: {
@@ -30,4 +31,4 @@ export const Link: Story = {
       },
     },
   },
-};
+};

src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/Navigation.stories.tsx

@@ -31,96 +31,6 @@ export const PrimaryNavigation: Story = {
       uid: '101b1558-808e-4d52-9ce5-6781dd2fc046',
       componentName: 'Navigation',
       dataSource: '',
-      params: {
-        FieldNames: 'Default',
-        LevelFrom: '{1BB88840-5FB3-4353-AD8D-81136F6FF75A}',
-        LevelTo: '{A59325BB-5A27-46F9-8110-9D499715F3BE}',
-        Styles: 'navigation-horizontal',
-      },
-      fields: [
-        {
-          Id: '9dc1fb0c-996c-4130-bc07-d5773bf2e824',
-          Styles: ['level1', 'submenu', 'item0', 'odd', 'first'],
-          Href: '/Sessssions',
-          Querystring: '',
-          NavigationTitle: {
-            value: 'Sessions',
-            editable: 'Sessions',
-          },
-          Children: [
-            {
-              Id: 'ffaa7f0d-2fb9-4c57-8846-5a55c7969fbf',
-              Styles: ['level2', 'item0', 'odd', 'first'],
-              Href: '/Sessions/Session-1',
-              Querystring: '',
-              NavigationTitle: {
-                value: 'Session 1',
-                editable: 'Session 1',
-              },
-            },
-            {
-              Id: 'bed50e98-2c1a-402e-a8ac-329015cc4b43',
-              Styles: ['level2', 'item1', 'even', 'last'],
-              Href: '/Sessions/Session-2',
-              Querystring: '',
-              NavigationTitle: {
-                value: 'Session 2',
-                editable: 'Session 2',
-              },
-            },
-          ],
-        },
-        {
-          Id: '20434b37-8963-41c7-88bb-0d63af1854d1',
-          Styles: ['level1', 'item1', 'even'],
-          Href: '/Agenda',
-          Querystring: '',
-          NavigationTitle: {
-            value: 'Agenda',
-            editable: 'Agenda',
-          },
-        },
-        {
-          Id: 'f9718ba4-5378-43c1-89cd-537301b81f1b',
-          Styles: ['level1', 'item2', 'odd'],
-          Href: '/Speakers',
-          Querystring: '',
-          NavigationTitle: {
-            value: 'Speakers',
-            editable: 'Speakers',
-          },
-        },
-        {
-          Id: '0fbd1460-52d5-467a-accd-f955d448ae1d',
-          Styles: ['level1', 'item3', 'even'],
-          Href: '/Trainings',
-          Querystring: '',
-          NavigationTitle: {
-            value: 'Trainings',
-            editable: 'Trainings',
-          },
-        },
-        {
-          Id: '96b9ccc8-50fe-4493-8a2c-62807499262d',
-          Styles: ['level1', 'item4', 'odd'],
-          Href: '/Sponsors',
-          Querystring: '',
-          NavigationTitle: {
-            value: 'Sponsors',
-            editable: 'Sponsors',
-          },
-        },
-        {
-          Id: 'e5525fb5-fa3d-4eeb-a354-a30d01d79296',
-          Styles: ['level1', 'item5', 'even', 'last'],
-          Href: '/Organizers',
-          Querystring: '',
-          NavigationTitle: {
-            value: 'Organizers',
-            editable: 'Organizers',
-          },
-        },
-      ],
     },
     fields: {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment