From 587a85df25488fe3f1623860ac7f7697c159715e Mon Sep 17 00:00:00 2001 From: cheeto-bandito Date: Sun, 3 Mar 2024 14:14:23 -0600 Subject: [PATCH 1/3] Updated partial design datasources --- .../Shared/Presentation/Partial Designs/Footer.yml | 14 +++++++------- .../Shared/Presentation/Partial Designs/Header.yml | 12 +++++++----- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/Project/Sugcon2024/items/SiteShared/Shared/Presentation/Partial Designs/Footer.yml b/src/Project/Sugcon2024/items/SiteShared/Shared/Presentation/Partial Designs/Footer.yml index b2231831..742d7123 100644 --- a/src/Project/Sugcon2024/items/SiteShared/Shared/Presentation/Partial Designs/Footer.yml +++ b/src/Project/Sugcon2024/items/SiteShared/Shared/Presentation/Partial Designs/Footer.yml @@ -10,7 +10,7 @@ SharedFields: - ID: "c7c26117-dbb1-42b2-ab5e-f7223845cca3" Hint: __Thumbnail Value: | - + - ID: "f1a1fe9e-a60c-4ddb-a3a0-bb5b29fe732e" Hint: __Renderings Value: | @@ -27,10 +27,10 @@ SharedFields: s:ph="headless-footer" s:ccb="Clear on publish" /> @@ -54,11 +54,11 @@ Languages: sitecore\UOUBIWQRx7 - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f" Hint: __Revision - Value: "1fefb968-58a7-427f-8678-35780324e804" + Value: "8e098e30-df96-4a5f-b288-4fb4ec555148" - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a" Hint: __Updated by Value: | - sitecore\x3rLvWVVyq + sitecore\cdJph8P5Hr - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522" Hint: __Updated - Value: 20240205T202038Z + Value: 20240303T200911Z diff --git a/src/Project/Sugcon2024/items/SiteShared/Shared/Presentation/Partial Designs/Header.yml b/src/Project/Sugcon2024/items/SiteShared/Shared/Presentation/Partial Designs/Header.yml index 73c88e8c..c35358e2 100644 --- a/src/Project/Sugcon2024/items/SiteShared/Shared/Presentation/Partial Designs/Header.yml +++ b/src/Project/Sugcon2024/items/SiteShared/Shared/Presentation/Partial Designs/Header.yml @@ -10,7 +10,7 @@ SharedFields: - ID: "c7c26117-dbb1-42b2-ab5e-f7223845cca3" Hint: __Thumbnail Value: | - + - ID: "f1a1fe9e-a60c-4ddb-a3a0-bb5b29fe732e" Hint: __Renderings Value: | @@ -20,9 +20,11 @@ SharedFields: id="{FE5D7FDF-89C0-4D99-9AA3-B5FBD009C9F3}"> + s:par="GridParameters&FieldNames&Styles&RenderingIdentifier&CSSStyles&DynamicPlaceholderId=1" + s:ph="headless-header" + s:ccb="Clear on publish" /> Languages: @@ -43,11 +45,11 @@ Languages: sitecore\UOUBIWQRx7 - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f" Hint: __Revision - Value: "13f6609b-81c7-475e-bd4e-37c4ec41d3d7" + Value: "f1168da9-1f08-40a9-8f8b-56882c08667f" - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a" Hint: __Updated by Value: | sitecore\cdJph8P5Hr - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522" Hint: __Updated - Value: 20240226T171426Z + Value: 20240303T200808Z From 166e53661f4dc7e46102429601bed3e2a412cf3f Mon Sep 17 00:00:00 2001 From: cheeto-bandito Date: Sun, 3 Mar 2024 14:14:35 -0600 Subject: [PATCH 2/3] Setup front-end component --- .../src/components/Basic Components/Logo.tsx | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Logo.tsx diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Logo.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Logo.tsx new file mode 100644 index 00000000..bd43676e --- /dev/null +++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Logo.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { + Image as JssImage, + Link as JssLink, + ImageField, + Field, + LinkField, + Text, + useSitecoreContext, +} from '@sitecore-jss/sitecore-jss-nextjs'; + +interface Fields { + Image: ImageField; + ImageCaption: Field; + TargetUrl: LinkField; +} + +type LogoProps = { + params: { [key: string]: string }; + fields: Fields; +}; + +const LogoDefault = (props: LogoProps): JSX.Element => ( +
+
+ Logo +
+
+); + +export const Banner = (props: LogoProps): JSX.Element => { + const { sitecoreContext } = useSitecoreContext(); + const isPageEditing = sitecoreContext.pageEditing; + const classHeroBannerEmpty = + isPageEditing && props.fields?.Image?.value?.class === 'scEmptyImage' + ? 'hero-banner-empty' + : ''; + const backgroundStyle = { backgroundImage: `url('${props?.fields?.Image?.value?.src}')` }; + const modifyImageProps = { + ...props.fields.Image, + editable: props?.fields?.Image?.editable + ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"') + .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'), + }; + const id = props.params.RenderingIdentifier; + + return ( +
+
+ {sitecoreContext.pageEditing ? : ''} +
+
+ ); +}; + +export const Default = (props: LogoProps): JSX.Element => { + const { sitecoreContext } = useSitecoreContext(); + + if (props.fields) { + const Image = () => ; + const id = props.params.RenderingIdentifier; + + return ( +
+
+ {sitecoreContext.pageState === 'edit' || !props.fields.TargetUrl?.value?.href ? ( + + ) : ( + + + + )} + +
+
+ ); + } + + return ; +}; From 5387906c8102934f5591340a2adebbae807720a5 Mon Sep 17 00:00:00 2001 From: cheeto-bandito Date: Sun, 3 Mar 2024 14:23:17 -0600 Subject: [PATCH 3/3] Added Logo to Storybook --- .../Basic Components/Logo.stories.ts | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/Logo.stories.ts diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/Logo.stories.ts b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/Logo.stories.ts new file mode 100644 index 00000000..2760fc95 --- /dev/null +++ b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/Logo.stories.ts @@ -0,0 +1,40 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { Default as LogoComponent } from '../../../components/Basic Components/Logo'; +const meta = { + title: 'Components/Logo', + component: LogoComponent, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta; +export default meta; +type Story = StoryObj; +export const Logo: Story = { + name: 'Logo ', + args: { + params: { + styles: '', + }, + fields: { + Image: { + value: { + src: 'https://picsum.photos/1200/800', + alt: 'Logo', + width: '1200', + height: '800', + }, + }, + TargetUrl: { + value: { + href: 'https://www.sitecore.com', + anchor: 'Home', + }, + }, + ImageCaption: { + value: 'SUGCON 2024 Logo', + } + }, + }, +};