Sidebar styles

SU-SWS · Oct 11, 2023 · 8bf137a · 8bf137a
1 parent 40f261b
commit 8bf137a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 12 deletions.
diff --git a/components/Cta/Cta.styles.ts b/components/Cta/Cta.styles.ts
@@ -26,7 +26,7 @@ export const ctaVariants = {
   ghost: ' block w-fit font-normal leading-display bg-transparent hocus:text-current border-2 border-current focus-visible:outline-none underline-offset-4 decoration-transparent hocus:decoration-current',
   'ghost-swipe': `${ghostSwipeBase} bg-transparent`,
   'ghost-swipe-overlay': `${ghostSwipeBase} bg-black-true/40`, // Use for split poster over images
-  link: 'font-normal decoration-transparent hocus:decoration-current leading-display text-current hocus:text-current hocus:decoration-2 focus-visible:ring-2 focus-visible:ring-lagunita-light focus-visible:outline-none focus-visible:rounded underline-offset-4',
+  link: 'inline-block w-fit font-normal decoration-transparent hocus:decoration-current leading-display text-current hocus:text-current hocus:decoration-2 focus-visible:ring-2 focus-visible:ring-lagunita-light focus-visible:outline-none focus-visible:rounded underline-offset-4',
   back: 'inline-block font-normal no-underline leading-none group-hocus:underline text-black hocus:text-lagunita focus-visible:ring-2 focus-visible:ring-lagunita-light focus-visible:ring-offset-4 focus:outline-none rounded-[1px]',
   mainNav: `${mainNavBase} ${mainNavWhite} hocus-visible:bg-digital-red`, // Main nav buttons at the top of the page
   mainNavUp: `${mainNavBase} ${mainNavWhite} hocus-visible:bg-digital-red`, // Main nav buttons when scrolling up

diff --git a/components/Sidebar/SidebarCard.styles.ts b/components/Sidebar/SidebarCard.styles.ts
@@ -1 +1 @@
-export const root = 'relative overflow-hidden';
+export const root = 'relative overflow-hidden rs-px-3';
diff --git a/components/Sidebar/SidebarCard.tsx b/components/Sidebar/SidebarCard.tsx
@@ -1,8 +1,13 @@
 import { cnb } from 'cnbuilder';
 import { AnimateInView, type AnimationType } from '../Animate';
-import { CtaLink } from '../Cta/CtaLink';
-import { Heading, type HeadingType, Paragraph } from '../Typography';
-import { accentBorderColors, type AccentBorderColorType } from '@/utilities/datasource';
+import { Container } from '../Container';
+import { Heading, type HeadingType, Text } from '../Typography';
+import {
+  accentBorderColors,
+  accentBgColors,
+  type AccentBorderColorType,
+  type AccentColorType,
+} from '@/utilities/datasource';
 import * as styles from './SidebarCard.styles';
 
 /**
@@ -15,18 +20,20 @@ export type SidebarCardProps = React.HTMLAttributes<HTMLDivElement> & {
   isSmallHeading?: boolean;
   superhead?: string;
   barColor?: AccentBorderColorType;
-  bgColor?: 'black' | 'white';
+  bgColor?: AccentColorType;
   cta?: React.ReactNode;
-  children?: React.ReactNode;
   animation?: AnimationType;
   delay?: number;
+  children?: React.ReactNode;
 };
 
 export const SidebarCard = ({
   heading,
   headingLevel = 'h3',
   isSmallHeading,
+  superhead,
   barColor,
+  bgColor,
   cta,
   animation,
   delay,
@@ -35,11 +42,19 @@ export const SidebarCard = ({
   ...props
 }: SidebarCardProps) => (
   <AnimateInView animation={animation} delay={delay}>
-    <article
-      className={cnb(styles.root, className)}
+    <Container
+      as="article"
+      width="full"
+      py={3}
+      className={cnb(styles.root, accentBgColors[bgColor], className)}
       {...props}
     >
+      <Text weight="semibold" aria-hidden>{superhead}</Text>
+      <Heading size={isSmallHeading ? 2 : 3} className="rs-mb-2">
+        <Text srOnly>{superhead}: </Text>{heading}
+      </Heading>
       {children}
-    </article>
+      {cta}
+    </Container>
   </AnimateInView>
 );
diff --git a/components/Storyblok/SbSidebarCard.tsx b/components/Storyblok/SbSidebarCard.tsx
@@ -11,12 +11,16 @@ export type SbSidebarCardProps = Omit<SbStoryCardProps, 'isSmallHeading'> & {
     _uid: string;
     heading?: string;
     headingLevel?: HeadingType;
+    isSmallHeading?: boolean;
     superhead?: string;
     content?: SbBlokData[];
     cta?: SbBlokData[];
     barColor?: {
       value?: PaletteAccentHexColorType;
     }
+    bgColor?: {
+      value?: PaletteAccentHexColorType;
+    }
     animation?: AnimationType;
     delay?: number;
   };
@@ -26,10 +30,12 @@ export const SbSidebarCard = ({
   blok: {
     heading,
     headingLevel,
+    isSmallHeading,
     superhead,
     content,
     cta,
     barColor: { value } = {},
+    bgColor: { value: bgColorValue } = {},
     animation,
     delay,
   },
@@ -43,8 +49,10 @@ export const SbSidebarCard = ({
       {...storyblokEditable(blok)}
       heading={heading}
       headingLevel={headingLevel}
+      isSmallHeading={isSmallHeading}
       superhead={superhead}
       barColor={paletteAccentColors[value]}
+      bgColor={paletteAccentColors[bgColorValue]}
       cta={Cta}
     >
       {Content}

diff --git a/components/Storyblok/SbStoryMvp/SbAboveContent.tsx b/components/Storyblok/SbStoryMvp/SbAboveContent.tsx
@@ -16,11 +16,11 @@ export const SbAboveContent = ({
   <Container pt={9} className="relative overflow-hidden">
     <Grid md={12} gap="default">
       {sidebar && (
-        <aside className="lg:order-last lg:col-span-5 lg:col-start-7 xl:col-span-4 xl:col-start-8">
+        <aside className="md:col-span-10 md:col-start-2 lg:order-last lg:col-span-5 lg:col-start-8 2xl:col-span-4 2xl:col-start-8">
           <CreateBloks blokSection={sidebar} />
         </aside>
       )}
-      <div className="md:col-span-10 md:col-start-2 lg:col-span-6 xl:col-span-5 xl:col-start-2">
+      <div className="md:col-span-10 md:col-start-2 lg:col-span-6 2xl:col-span-5 2xl:col-start-2">
         <CreateBloks blokSection={intro} />
       </div>
     </Grid>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const root = 'relative overflow-hidden';
		export const root = 'relative overflow-hidden rs-px-3';