DS-853 | Add id options to 10 storyblok components; update CtaLink (#339

) * add id options to 10 storyblok components * linter * If cached_url is "home" set it to ""
SU-SWS · Sep 4, 2024 · 926a1bc · 926a1bc
1 parent bdf5da1
commit 926a1bc
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 1 deletion.
diff --git a/components/Cta/CtaLink.tsx b/components/Cta/CtaLink.tsx
@@ -47,6 +47,10 @@ export const CtaLink = React.forwardRef<HTMLAnchorElement, CtaLinkProps>(
     if (isInternal) {
       myLink = cachedUrl || href;
 
+      if (myLink === 'home') {
+        myLink = '';
+      }
+
       if (!myLink?.startsWith('/')) {
         myLink = `/${myLink}`;
       }

diff --git a/components/GAProvider.tsx b/components/GAProvider.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { GoogleTagManager } from '@next/third-parties/google'
+import { GoogleTagManager } from '@next/third-parties/google';
 import { useEffect } from 'react';
 import useUTMs from '@/hooks/useUTMs';
 const GTM_ID = 'GTM-5RGQ5DD';

diff --git a/components/Storyblok/SbBasicCard.tsx b/components/Storyblok/SbBasicCard.tsx
@@ -14,6 +14,7 @@ import { type SbImageType } from './Storyblok.types';
 export type SbBasicCardProps = {
   blok: {
     _uid: string;
+    id: string;
     superhead?: string;
     heading?: string;
     headingLevel?: HeadingType;
@@ -35,6 +36,7 @@ export type SbBasicCardProps = {
 
 export const SbBasicCard = ({
   blok: {
+    id,
     superhead,
     heading,
     headingLevel,
@@ -66,6 +68,7 @@ export const SbBasicCard = ({
   return (
     <BasicCard
       {...storyblokEditable(blok)}
+      id={id}
       superhead={superhead}
       heading={heading}
       headingLevel={headingLevel || 'h3'}

diff --git a/components/Storyblok/SbEmbedMedia.tsx b/components/Storyblok/SbEmbedMedia.tsx
@@ -10,6 +10,7 @@ import { RichText } from '../RichText';
 type SbEmbedMediaProps = {
   blok: {
     _uid: string;
+    id: string;
     mediaUrl: string;
     caption?: StoryblokRichtext;
     aspectRatio?: MediaAspectRatioType;
@@ -27,6 +28,7 @@ type SbEmbedMediaProps = {
 
 export const SbEmbedMedia = ({
   blok: {
+    id,
     mediaUrl,
     caption,
     aspectRatio,
@@ -51,6 +53,7 @@ export const SbEmbedMedia = ({
   return (
     <EmbedMedia
       {...storyblokEditable(blok)}
+      id={id}
       mediaUrl={mediaUrl}
       caption={Caption}
       aspectRatio={aspectRatio}

diff --git a/components/Storyblok/SbEventBanner.tsx b/components/Storyblok/SbEventBanner.tsx
@@ -11,6 +11,7 @@ import { type GradientFromType, type GradientToType, type GradientViaType } from
 type SbEventBannerProps = {
   blok: {
     _uid: string;
+    id: string;
     heading?: string;
     body: StoryblokRichtext;
     startDate?: string;
@@ -34,6 +35,7 @@ type SbEventBannerProps = {
 
 export const SbEventBanner = ({
   blok: {
+    id,
     heading,
     body,
     startDate,
@@ -65,6 +67,7 @@ export const SbEventBanner = ({
   return (
     <EventBanner
       {...storyblokEditable(blok)}
+      id={id}
       heading={heading}
       body={Body}
       startDate={startDate}

diff --git a/components/Storyblok/SbGrid.tsx b/components/Storyblok/SbGrid.tsx
@@ -7,6 +7,7 @@ import { type PaddingType, type MarginType } from '@/utilities/datasource';
 type SbGridProps = {
   blok: {
     _uid: string;
+    id: string;
     // Turn grid into <ul> and items into <li>
     isList?: boolean;
     gap?: GridGapType;
@@ -35,6 +36,7 @@ type SbGridProps = {
 
 export const SbGrid = ({
   blok: {
+    id,
     isList,
     gap,
     boundingWidth = 'full',
@@ -63,6 +65,7 @@ export const SbGrid = ({
   return (
     <WidthBox
       {...storyblokEditable(blok)}
+      id={id}
       boundingWidth={boundingWidth}
       width={width}
       align={align}

diff --git a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx
@@ -26,6 +26,7 @@ import { getNumBloks } from '@/utilities/getNumBloks';
 type SbHomepageThemeSectionProps = {
   blok: {
     _uid: string;
+    id: string;
     superhead?: string;
     heading?: string;
     intro?: StoryblokRichtext;
@@ -43,6 +44,7 @@ type SbHomepageThemeSectionProps = {
 
 export const SbHomepageThemeSection = ({
   blok: {
+    id,
     superhead,
     heading,
     intro,
@@ -66,6 +68,7 @@ export const SbHomepageThemeSection = ({
 
   return (
     <Container
+      id={id}
       as="section"
       bgColor={isDarkTheme ? 'black' : 'white'}
       py={10}

diff --git a/components/Storyblok/SbScrollytelling.tsx b/components/Storyblok/SbScrollytelling.tsx
@@ -16,6 +16,7 @@ import { type MarginType } from '@/utilities/datasource';
 type SbScrollytellingProps = {
   blok: {
     _uid: string;
+    id: string;
     heading?: string;
     headingLevel?: HeadingType;
     subheading?: string;
@@ -34,6 +35,7 @@ type SbScrollytellingProps = {
 
 export const SbScrollytelling = ({
   blok: {
+    id,
     heading,
     headingLevel,
     subheading,
@@ -59,6 +61,7 @@ export const SbScrollytelling = ({
   return (
     <Scrollytelling
       {...storyblokEditable(blok)}
+      id={id}
       heading={heading}
       headingLevel={headingLevel}
       subheading={subheading}

diff --git a/components/Storyblok/SbSection/SbSection.tsx b/components/Storyblok/SbSection/SbSection.tsx
@@ -38,6 +38,7 @@ import * as styles from './SbSection.styles';
 type SbSectionProps = {
   blok: {
     _uid: string;
+    id?: string;
     content?: SbBlokData[];
     superhead?: string;
     heading?: string;
@@ -71,6 +72,7 @@ type SbSectionProps = {
 
 export const SbSection = ({
   blok: {
+    id,
     content,
     superhead,
     heading,
@@ -139,6 +141,7 @@ export const SbSection = ({
 
   return (
     <Container
+      id={id}
       as={!!heading ? 'section' : 'div'}
       width="full"
       mt={marginTop}

diff --git a/components/Storyblok/SbSidebarCard.tsx b/components/Storyblok/SbSidebarCard.tsx
@@ -9,6 +9,7 @@ import { getNumBloks } from '@/utilities/getNumBloks';
 export type SbSidebarCardProps = {
   blok: {
     _uid: string;
+    id: string;
     heading?: string;
     headingLevel?: HeadingType;
     isSmallHeading?: boolean;
@@ -30,6 +31,7 @@ export type SbSidebarCardProps = {
 
 export const SbSidebarCard = ({
   blok: {
+    id,
     heading,
     headingLevel,
     isSmallHeading,
@@ -51,6 +53,7 @@ export const SbSidebarCard = ({
   return (
     <SidebarCard
       {...storyblokEditable(blok)}
+      id={id}
       heading={heading}
       headingLevel={headingLevel}
       isSmallHeading={isSmallHeading}

diff --git a/components/Storyblok/SbText.tsx b/components/Storyblok/SbText.tsx
@@ -17,6 +17,7 @@ import {
 export type SbTextProps = {
   blok: {
     _uid: string;
+    id: string;
     text: string;
     color?: TextColorType;
     headingLevel?: HeadingType;
@@ -42,6 +43,7 @@ export type SbTextProps = {
 
 export const SbText = ({
   blok: {
+    id,
     text,
     color,
     headingLevel,
@@ -67,6 +69,7 @@ export const SbText = ({
 }: SbTextProps) => (
   <AnimateInView {...storyblokEditable(blok)} animation={animation} delay={delay}>
     <WidthBox
+      id={id}
       boundingWidth={boundingWidth}
       width={width}
       mt={marginTop}

diff --git a/components/Storyblok/SbWysiwyg.tsx b/components/Storyblok/SbWysiwyg.tsx
@@ -8,6 +8,7 @@ import { type PaddingType } from '@/utilities/datasource';
 type SbWysiwygProps = {
   blok: {
     _uid: string;
+    id: string;
     content: StoryblokRichtext;
     // TODO: I might remove this option and just pass down the color from the parent
     isLightText?: boolean;
@@ -25,6 +26,7 @@ type SbWysiwygProps = {
 
 export const SbWysiwyg = ({
   blok: {
+    id,
     content,
     isLightText,
     textAlign,
@@ -46,6 +48,7 @@ export const SbWysiwyg = ({
   return (
     <WidthBox
       {...storyblokEditable(blok)}
+      id={id}
       boundingWidth={boundingWidth}
       width={width}
       pt={spacingTop}