diff --git a/src/Project/Sugcon2024/Sugcon/public/favicon.ico b/src/Project/Sugcon2024/Sugcon/public/favicon.ico index 065a432e4..14d7ee233 100644 Binary files a/src/Project/Sugcon2024/Sugcon/public/favicon.ico and b/src/Project/Sugcon2024/Sugcon/public/favicon.ico differ diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-action-banner.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-action-banner.scss deleted file mode 100644 index 353903fc9..000000000 --- a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-action-banner.scss +++ /dev/null @@ -1,30 +0,0 @@ -.component.action-banner { - background-color: #AB0000; - color: #ffffff; - display: flex; - justify-content: space-around; - - - .component-content { - max-width: 70%; - display: flex; - align-items: flex-start; - flex-direction: row; - - div { - display: flex; - padding: 10px; - align-content: center; - justify-content: center; - - } - - .col-1 { - width: 30%; - } - - .col-2 { - width: 60%; - } - } -} \ No newline at end of file diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-navigation.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-navigation.scss deleted file mode 100644 index 20defac47..000000000 --- a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-navigation.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import "@sass/abstracts/mixins"; -@import "@sass/abstracts/vars"; - -.navigation { - background: $nav-bg; - ul { - padding-left: 0; - } - .level0, .level1 { - >.navigation-title>a { - font-size: $navigation-font-basic; - border-color: $nav-border-root; - border-style: solid; - border-width: 0 0 2px 0; - padding-right: 10px; - margin-right: 5px; - &:hover { - text-decoration: none; - } - } - } - a { - color: $nav-color-root; - .lt-ie9 &, .lt-ie9 & span { - color: $nav-color-root; - } - &:focus, &:hover { - color: $nav-color-root-active; - } - } - li { - &.submenu { - margin-bottom: 0; - } - >.navigation-title { - >a { - padding: 3px 5px 3px 0; - display: block; - color: $nav-color-root; - text-decoration: none; - } - } - >ul a { - font-size: $navigation-font-basic-submenu; - } - } - .submenu>ul { - padding-left: 10px; - } -} -@import "@sass/components/navigation/"; diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/icon-link-list/_list-horizontal.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/icon-link-list/_list-horizontal.scss index c4f5d0414..e4492ad7c 100644 --- a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/icon-link-list/_list-horizontal.scss +++ b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/icon-link-list/_list-horizontal.scss @@ -2,7 +2,6 @@ @import '@sass/abstracts/mixins'; .icon-link-list.list-horizontal { - a { border: none; @@ -10,8 +9,9 @@ display: inline-block; } } + li { display: inline-block; - margin-left: $middle-margin; + // margin-left: $middle-margin; } -} \ No newline at end of file +} diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss index 2a5275052..4d84b36b9 100644 --- a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss +++ b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss @@ -1,10 +1,8 @@ @import 'component-column-splitter'; @import 'component-container'; @import 'component-image'; -@import 'component-navigation'; @import 'component-promo'; @import '_component-richtext-content'; -@import '_component-action-banner'; @import 'common'; @import 'container'; @@ -17,4 +15,5 @@ @import 'link-list'; @import 'rich-text'; @import 'people-grid'; -@import 'icon-link-list'; \ No newline at end of file +@import 'icon-link-list'; + diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/ActionBanner.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/ActionBanner.tsx index 86ca45a3e..16d1278fd 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/ActionBanner.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/ActionBanner.tsx @@ -5,6 +5,9 @@ import { LinkField, Text as JssText, } from '@sitecore-jss/sitecore-jss-nextjs'; +import clsx from 'clsx'; +import { Button, Flex, Heading, Text } from '@chakra-ui/react'; +import { LayoutFlex } from 'components/Templates/LayoutFlex'; interface Fields { Title: Field; @@ -18,7 +21,7 @@ type ActionBannerProps = { }; const ActionBannerDefaultComponent = (props: ActionBannerProps): JSX.Element => ( -
+
Agenda
@@ -26,25 +29,30 @@ const ActionBannerDefaultComponent = (props: ActionBannerProps): JSX.Element => ); export const Default = (props: ActionBannerProps): JSX.Element => { - const id = props.params.RenderingIdentifier; + const id = props?.params?.RenderingIdentifier || undefined; if (props?.fields) { return ( -
-
-
-

- -

-
-
- -
-
- -
-
-
+ + + + + + + + + + + + + ); } diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Event.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Event.tsx index a8351928b..3c3877b70 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Event.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Event.tsx @@ -3,10 +3,10 @@ import { Box, Heading, Text, Image, Link } from '@chakra-ui/react'; import { Field, ImageField, - Image as JssImage, LinkField, - Link as JssLink, TextField, + Image as JssImage, + Link as JssLink, Text as JssText, } from '@sitecore-jss/sitecore-jss-nextjs'; import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils'; @@ -41,68 +41,62 @@ export const Default = (props: Fields): JSX.Element => { ? new Date(props.EventDate?.value).toDateString() : ''; - const location: string[] = []; - props.EventCity?.value != '' ? location.push(props.EventCity?.value) : ''; - props.EventState?.value != '' ? location.push(props.EventState?.value) : ''; - props.EventCountry?.value != '' ? location.push(props.EventCountry?.value) : ''; + return ( + + - const locationString = location.join(', '); + + + - return ( - - - - - - - - {dateString} - - {isEditorActive() && ( - - - - )} - - {locationString} - - {isEditorActive() && ( - - - - - - - - - - - - )} - {(isEditorActive() || props.LinkToSite?.value?.href !== '') && ( - - )} - - + + {isEditorActive() ? : <>{dateString}} + + + + , {' '} + + + + + + {/* Triangle Corner */} + ); }; diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/EventTeaser.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/EventTeaser.tsx index f8cff59dc..b0f744cdb 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/EventTeaser.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/EventTeaser.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Box, Heading, Flex } from '@chakra-ui/react'; +import { Heading, Grid } from '@chakra-ui/react'; import { TextField, Text as JssText } from '@sitecore-jss/sitecore-jss-nextjs'; import { Fields as EventFields, Default as Event } from './Event'; -import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils'; +import { LayoutFlex } from 'components/Templates/LayoutFlex'; // Define the type of props that Event Teaser will accept interface Fields { @@ -38,17 +38,20 @@ export type EventTeaserProps = { export const Default = (props: EventTeaserProps): JSX.Element => { return ( - - {(isEditorActive() || props.fields?.Headline?.value !== '') && ( - - - - )} - - {props.fields?.Events.map((event, idx) => { - return ; + + + + + + + {props?.fields?.Events.map((event, idx) => { + return ; })} - - + + ); }; diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx index dbbf902e3..f3e294d8c 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import { Box, Heading, Text, Image, Flex, useBreakpointValue } from '@chakra-ui/react'; +import { Box, Heading, Text, Image, Flex, Button } from '@chakra-ui/react'; import { TextField, ImageField, LinkField, Text as JssText, + Link as JssLink, } from '@sitecore-jss/sitecore-jss-nextjs'; import { ButtonLink } from '../../basics/ButtonLink'; @@ -14,6 +15,8 @@ import { isSitecoreLinkFieldPopulated, isSitecoreTextFieldPopulated, } from 'lib/utils/sitecoreUtils'; +import { PaddingX, Template } from 'components/Templates/LayoutConstants'; +import { LayoutFlex } from 'components/Templates/LayoutFlex'; // Define the type of props that Hero will accept interface Fields { @@ -40,53 +43,47 @@ export type HeroProps = { export const HeroHomepage = (props: HeroProps): JSX.Element => { return ( - - + - - - - - {isSitecoreTextFieldPopulated(props.fields.EventDate) && ( - - - - )} - {isSitecoreTextFieldPopulated(props.fields.Text) && ( - - - - )} - {isSitecoreLinkFieldPopulated(props.fields.CallToAction) && ( - - - - )} - - - - {' '} + + + + + {isSitecoreTextFieldPopulated(props.fields.EventDate) && ( + + + + )} + + {isSitecoreTextFieldPopulated(props.fields.Text) && ( + + + + )} + + {isSitecoreLinkFieldPopulated(props.fields.CallToAction) && ( + + + + )} + + {props.fields.Image?.value?.alt} - + ); }; @@ -105,16 +102,18 @@ export const HeroEvent = (props: HeroProps): JSX.Element => { > - - - Testing + + + + {isSitecoreTextFieldPopulated(props.fields.Text) && ( - + )} @@ -141,68 +140,56 @@ export const HeroEvent = (props: HeroProps): JSX.Element => { }; export const HeroJustificationLetter = (props: HeroProps): JSX.Element => { - // Responsive background gradient direction - const bgGradientDirection = useBreakpointValue({ base: '180deg' }); - return ( - - {/* Content box that should take the left half of the screen */} - + {/* Content */} + - + + {isSitecoreTextFieldPopulated(props.fields.Text) && ( )} - {isSitecoreLinkFieldPopulated(props.fields.CallToAction) && ( - - - - )} - - -   - + + + {/* Background Image */} + + + {/* Gradient Overlay */} ); diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx index d27814a0a..72d3dfac1 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx @@ -63,7 +63,7 @@ export const Default = (props: PersonProps): JSX.Element => { { return ( - - - - - - - - - - - {' '} + + + + + + + + + {props.fields.Image?.value?.alt} - - + + ); }; diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Venue.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Venue.tsx index ecd6487fa..eec9b657e 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Venue.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Venue.tsx @@ -8,10 +8,12 @@ import { Item, } from '@sitecore-jss/sitecore-jss-nextjs'; import { Box, Flex, Heading, Icon, Image, Stack } from '@chakra-ui/react'; -import { isSitecoreLinkFieldPopulated } from 'lib/utils/sitecoreUtils'; import { ButtonLink } from 'src/basics/ButtonLink'; import Slider from 'react-slick'; import styled from '@emotion/styled'; +import { LayoutFlex } from 'components/Templates/LayoutFlex'; +import { PaddingX } from 'components/Templates/LayoutConstants'; +import clsx from 'clsx'; // Define the fields that the Venue component will accept interface Fields { @@ -58,61 +60,52 @@ const settings = { export const Default = (props: VenueProps): JSX.Element => { const [slider, setSlider] = React.useState(null); - const id = props.params.RenderingIdentifier; + const id = props?.params?.RenderingIdentifier || undefined; return ( - + - - - - - + + + - - - - - - + - - - - - - + - {isSitecoreLinkFieldPopulated(props.fields.ButtonLink) && ( - - - - )} - - + + - {/* Render carousel if there are images */} - {props.fields.VenueImages != null && ( + + {props?.fields?.VenueImages != null && ( setSlider(slider)}> - {props.fields.VenueImages?.map((image, index) => ( + {props?.fields?.VenueImages?.map((image, index) => ( { )} - + + ); +}; + +interface VenueInformationBlockProps { + FieldTitle: TextField; + FieldText: RichTextField; +} + +const VenueInformationBlock = ({ + FieldTitle, + FieldText, +}: VenueInformationBlockProps): JSX.Element => { + return ( + + + + + + ); }; @@ -149,6 +161,7 @@ const SliderWrapper = styled('div')` -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; + overflow: hidden; } .slick-list { diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/VideoText.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/VideoText.tsx index 1a452fdd2..3665bc310 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/VideoText.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/VideoText.tsx @@ -7,6 +7,7 @@ import { RichText as JssRichText, } from '@sitecore-jss/sitecore-jss-nextjs'; import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils'; +import { LayoutFlex } from 'components/Templates/LayoutFlex'; // Define the type of props that VideoText will accept interface Fields { @@ -28,43 +29,45 @@ export type VideoTextProps = { fields: Fields; }; export const Default = (props: VideoTextProps): JSX.Element => { - return ( - - {(isEditorActive() || props.fields.Headline?.value !== '') && ( - - - - )} - - - - - {' '} - - - - {(isEditorActive() || props.fields.TextHeadline?.value !== '') && ( - - - - )} - - {isEditorActive() && ( - - {'Youtube Video Id: '} - + return ( + + + {(isEditorActive() || props.fields.Headline?.value !== '') && ( + + + + )} + + + + + {' '} - )} - - + + + {(isEditorActive() || props.fields.TextHeadline?.value !== '') && ( + + + + )} + + {isEditorActive() && ( + + {'Youtube Video Id: '} + + + )} + + + ); }; diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/Accordion.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/Accordion.tsx index c5e869794..17eb184fc 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/List Components/Accordion.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/List Components/Accordion.tsx @@ -15,6 +15,7 @@ import { Heading, } from '@chakra-ui/react'; import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils'; +import { LayoutFlex } from 'components/Templates/LayoutFlex'; interface AccordionElement { fields: { @@ -41,7 +42,7 @@ interface AccordionProps { export const Default = (props: AccordionProps): JSX.Element => { return ( - + {(isEditorActive() || props.fields?.Headline?.value !== '') && ( @@ -66,13 +67,13 @@ export const Default = (props: AccordionProps): JSX.Element => { - + )) : null} - + ); }; diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/IconLinkList.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/IconLinkList.tsx index c305814b9..4b65e1d04 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/List Components/IconLinkList.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/List Components/IconLinkList.tsx @@ -4,6 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { fas } from '@fortawesome/free-solid-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons'; import { fab } from '@fortawesome/free-brands-svg-icons'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { Flex, UnorderedList } from '@chakra-ui/react'; // eslint-disable-next-line @typescript-eslint/no-var-requires const { library } = require('@fortawesome/fontawesome-svg-core'); @@ -48,16 +50,14 @@ const IconLinkListItem = (props: IconLinkListItemProps) => { className += ' last'; } - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const iconprop: IconProp = props?.icon?.value?.toString() ?? ''; + const iconprop = props?.icon?.value?.toString() ?? ''; if (props?.icon?.value) { return (
  • - +
    • @@ -94,7 +94,11 @@ export const Default = (props: IconLinkListProps): JSX.Element => {
    -
      {list}
    + + + {list} + +
    ); diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx index f0cd6ea80..afb3504e2 100644 --- a/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx @@ -3,6 +3,8 @@ import { Box, Heading, SimpleGrid } from '@chakra-ui/react'; import { TextField, Text as JssText } from '@sitecore-jss/sitecore-jss-nextjs'; import { PersonFields, PersonProps, Default as Person } from '../Basic Components/Person'; import { isEditorActive } from '@sitecore-jss/sitecore-jss-nextjs/utils'; +import clsx from 'clsx'; +import { LayoutFlex } from 'components/Templates/LayoutFlex'; // Define the type of props that People Grid will accept interface Fields { @@ -37,7 +39,6 @@ export type PeopleGridProps = { }; export const Default = (props: PeopleGridProps): JSX.Element => { - const styles = props.params && props.params.Styles ? props.params.Styles : ''; const cols = props.params && props.params.Columns ? parseInt(props.params.Columns) : 4; if (props.params && props.params.Alphabetize == '1') { @@ -47,14 +48,20 @@ export const Default = (props: PeopleGridProps): JSX.Element => { } return ( - - + + {(isEditorActive() || props.fields?.Headline?.value !== '') && ( )} - + {props.fields?.People.map((person, idx) => { const pp: PersonProps = { params: props.params, @@ -63,7 +70,7 @@ export const Default = (props: PeopleGridProps): JSX.Element => { return ; })} - + ); }; diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/ActionBanner.stories.tsx b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/ActionBanner.stories.tsx index 7b0557354..6ce0c4a0a 100644 --- a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/ActionBanner.stories.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/ActionBanner.stories.tsx @@ -2,10 +2,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { Default as ActionBanner } from '../../../components/Basic Components/ActionBanner'; const meta = { - title: 'Basic Components/ActionBanner', - component: ActionBanner, - tags: ['autodocs'], - argTypes: {}, + title: 'Basic Components/ActionBanner', + component: ActionBanner, + tags: ['autodocs'], + argTypes: {}, } satisfies Meta; export default meta; @@ -13,24 +13,28 @@ export default meta; type Story = StoryObj; export const ActionBannerStory: Story = { - name: 'ActionBanner', - args: { - params: { - styles: '', + name: 'ActionBanner', + args: { + params: { + styles: '', + }, + fields: { + Title: { + value: 'FAQs', + }, + Text: { + value: 'Lorem Ipsum', + }, + CallToAction: { + value: { + href: 'mailto:community@sitecore.com?subject=Sugcon sponsorship', + text: 'Contact us', + linktype: 'mailto', + style: '', + url: 'mailto:community@sitecore.com?subject=Sugcon sponsorship', + title: '', }, - fields: { - Title: { - value: 'FAQs', - }, - Text: { - value: "Lorem Ipsum" - }, - CallToAction: { - value: { - href: 'https://www.sitecore.com', - anchor: 'Register now', - } - } - } - } + }, + }, + }, }; diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/EventHero.stories.tsx b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/EventHero.stories.tsx index 748650e59..23b2d1038 100644 --- a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/EventHero.stories.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/EventHero.stories.tsx @@ -1,16 +1,19 @@ import { Meta, StoryObj } from '@storybook/react'; -import { HeroEvent } from '../../../components/Basic Components/Hero'; +import { HeroEvent } from 'components/Basic Components/Hero'; + const meta = { title: 'Basic Components/Hero', component: HeroEvent, parameters: { - layout: 'centered', + layout: 'fullscreen', }, tags: ['autodocs'], - argTypes: {}, } satisfies Meta; + export default meta; + type Story = StoryObj; + export const Event: Story = { name: 'Hero Event', args: { @@ -31,7 +34,7 @@ export const Event: Story = { CallToAction: { value: { href: 'https://www.sitecore.com', - anchor: 'Register now', + text: 'Register now', }, }, Image: { diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/EventTeaser.stories.tsx b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/EventTeaser.stories.tsx index a2a1c2a02..206792aa3 100644 --- a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/EventTeaser.stories.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/EventTeaser.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; -import { Default as EventTeaser } from '../../../components/Basic Components/EventTeaser'; +import { Default as EventTeaser } from 'components/Basic Components/EventTeaser'; + const meta = { title: 'Basic Components/EventTeaser', component: EventTeaser, @@ -7,10 +8,12 @@ const meta = { layout: 'centered', }, tags: ['autodocs'], - argTypes: {}, } satisfies Meta; + export default meta; + type Story = StoryObj; + export const Teaser: Story = { name: 'Event Teaser', args: { diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/HomepageHero.stories.tsx b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/HomepageHero.stories.tsx index eefa2a10f..5a6cd42df 100644 --- a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/HomepageHero.stories.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/HomepageHero.stories.tsx @@ -1,26 +1,19 @@ import { Meta, StoryObj } from '@storybook/react'; -import { HeroHomepage } from '../../../components/Basic Components/Hero'; -import { SitecoreContext } from '@sitecore-jss/sitecore-jss-react'; +import { HeroHomepage } from 'components/Basic Components/Hero'; const meta = { title: 'Basic Components/Hero', component: HeroHomepage, parameters: { - layout: 'centered', + layout: 'fullscreen', }, tags: ['autodocs'], - decorators: [ - (Story) => ( - // Assuming you might need to provide a mock context value - null}> - - - ), - ], - argTypes: {}, } satisfies Meta; + export default meta; + type Story = StoryObj; + export const Homepage: Story = { name: 'Hero Homepage', args: { @@ -41,7 +34,7 @@ export const Homepage: Story = { CallToAction: { value: { href: 'https://www.sitecore.com', - anchor: 'Register now', + text: 'Register now', }, }, Image: { diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/JustificationLetterHero.stories.tsx b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/JustificationLetterHero.stories.tsx index 05bf5dc01..bba11a5f2 100644 --- a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/JustificationLetterHero.stories.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/JustificationLetterHero.stories.tsx @@ -1,25 +1,19 @@ import { Meta, StoryObj } from '@storybook/react'; -import { HeroJustificationLetter } from '../../../components/Basic Components/Hero'; -import { SitecoreContext } from '@sitecore-jss/sitecore-jss-react'; +import { HeroJustificationLetter } from 'components/Basic Components/Hero'; const meta = { title: 'Basic Components/Hero', component: HeroJustificationLetter, parameters: { - layout: 'centered', + layout: 'fullscreen', }, tags: ['autodocs'], - decorators: [ - (Story) => ( - null}> - - - ), - ], - argTypes: {}, } satisfies Meta; + export default meta; + type Story = StoryObj; + export const JustificationLetter: Story = { name: 'Hero Justification Letter', args: { @@ -40,7 +34,7 @@ export const JustificationLetter: Story = { CallToAction: { value: { href: 'https://www.sitecore.com', - anchor: 'Download letter', + text: 'Download letter', }, }, Image: { diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/PeopleGrid.stories.tsx b/src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/PeopleGrid.stories.tsx index 07ac4757f..e33597d9a 100644 --- a/src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/PeopleGrid.stories.tsx +++ b/src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/PeopleGrid.stories.tsx @@ -5,7 +5,7 @@ const meta = { title: 'List Components/PeopleGrid', component: PeopleGrid, parameters: { - layout: 'centered', + layout: 'fullscreen', }, tags: ['autodocs'], argTypes: {}, @@ -193,3 +193,17 @@ export const Teaser: Story = { }, }, }; + +export const ThreePeople: Story = { + args: { + ...Teaser.args, + params: { + ...Teaser.args.params, + Columns: '3', + }, + fields: { + ...Teaser.args.fields, + People: Teaser.args.fields.People.slice(0, -1), + }, + }, +};