Option to right align section header

SU-SWS · Oct 3, 2023 · 45ebf1b · 45ebf1b
1 parent 6b8e543
commit 45ebf1b
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/components/Storyblok/SbSection.tsx b/components/Storyblok/SbSection.tsx
@@ -7,7 +7,6 @@ import {
 } from '../Typography';
 import { Container, type BgColorType } from '../Container';
 import { ImageOverlay } from '../ImageOverlay';
-import { WidthBox, type WidthType } from '../WidthBox';
 import { accentBgColors, type PaddingType } from '@/utilities/datasource';
 import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin';
 import { type SbImageType } from './Storyblok.types';
@@ -22,6 +21,7 @@ type SbSectionProps = {
     isSmallHeading?: boolean;
     headingLevel?: HeadingType;
     subheading?: string;
+    rightAlignHeader?: boolean;
     barColor?: {
       value?: PaletteAccentHexColorType;
     }
@@ -40,6 +40,7 @@ export const SbSection = ({
     isSmallHeading,
     headingLevel,
     subheading,
+    rightAlignHeader,
     barColor: { value: barColorValue } = {},
     bgColor,
     bgImage: { filename, focus } = {},
@@ -60,22 +61,24 @@ export const SbSection = ({
       <ImageOverlay imageSrc={getProcessedImage(filename, '2000x1600', focus)} overlay={bgColor === 'black' ? 'black-70' : 'white-90'} />
     )}
     {(heading || superhead) && (
-      <FlexBox className="relative z-10">
+      <FlexBox className={cnb('relative z-10', rightAlignHeader ? 'mr-0 ml-auto' : 'ml-0')}>
         {barColorValue && (
           <div className={cnb(
             'block w-8 md:w-20 lg:w-40',
+            rightAlignHeader ? 'order-last' : 'order-first',
             accentBgColors[paletteAccentColors[barColorValue]],
           )}
           />
         )}
         <div className={cnb(
-          'cc whitespace-pre-line w-full 3xl:max-w-3/5',
-          barColorValue ? '-ml-8 md:-ml-20 lg:-ml-40' : '',
+          'cc whitespace-pre-line w-full 3xl:max-w-[90%]',
+          barColorValue && !rightAlignHeader ? '-ml-8 md:-ml-20 lg:-ml-40' : '',
+          barColorValue && rightAlignHeader ? '-mr-8 md:-mr-20 lg:-mr-40' : '',
           superhead ? '' : '-mt-05em',
         )}
         >
           {superhead && (
-            <Text size={2} leading="tight" font="serif" weight="semibold" aria-hidden>
+            <Text size={2} leading="tight" font="serif" weight="semibold" align={rightAlignHeader ? 'right' : 'left'} aria-hidden>
               {superhead}
             </Text>
           )}
@@ -86,6 +89,7 @@ export const SbSection = ({
               leading="none"
               uppercase
               font="druk"
+              align={rightAlignHeader ? 'right' : 'left'}
               className="mb-0"
             >
               {superhead && <SrOnlyText>{`${superhead}:`}</SrOnlyText>}{heading}
@@ -99,9 +103,10 @@ export const SbSection = ({
         <Paragraph
           variant="overview"
           weight="normal"
+          align={rightAlignHeader ? 'right' : 'left'}
           color={bgColor === 'black' ? 'black-20' : 'black-80'}
           noMargin
-          className="relative z-10 max-w-prose ml-0 rs-mt-3"
+          className={cnb('relative z-10 max-w-prose ml-0 rs-mt-3', rightAlignHeader ? 'mr-0 ml-auto' : 'ml-0')}
         >
           {subheading}
         </Paragraph>