FEAT: different style options added to footer

nl-design-system · Oct 15, 2024 · e670162 · e670162
1 parent ea86509
commit e670162
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 2 deletions.
diff --git a/packages/components-css/footer/index.scss b/packages/components-css/footer/index.scss
@@ -14,12 +14,27 @@
   --utrecht-heading-4-color: currentColor;
   --utrecht-heading-5-color: currentColor;
   --utrecht-heading-6-color: currentColor;
+  --utrecht-page-footer-background-color: var(--rhc-color-robijnrood-500);
+  --utrecht-page-footer-color: var(--rhc-color-wit);
 
   column-gap: var(--rhc-page-footer-column-gap);
   display: flex;
   flex-direction: row;
 }
 
+.rhc-footer--filled-secondary {
+  --utrecht-page-footer-background-color: var(--rhc-color-lintblauw-500);
+}
+
+.rhc-footer--outlined {
+  --utrecht-page-footer-background-color: var(--rhc-color-wit);
+  --utrecht-page-footer-color: var(--rhc-color-lintblauw-500);
+
+  border-block-start-color: var(--rhc-page-footer-border-block-start-color);
+  border-block-start-style: var(--rhc-page-footer-border-block-start-style);
+  border-block-start-width: var(--rhc-page-footer-border-block-start-width);
+}
+
 .rhc-page-footer__section {
   break-inside: avoid;
 }

diff --git a/packages/components-react/src/Footer.tsx b/packages/components-react/src/Footer.tsx
@@ -7,6 +7,7 @@ interface FooterProps extends PageFooterProps {
   heading: ReactNode;
   headingLevel: number;
   columns?: IColumn[];
+  background?: 'filled-primary' | 'filled-secondary' | 'outlined';
 }
 
 interface IColumn {
@@ -18,10 +19,18 @@ const MAX_HEADING_LEVEL = 6;
 
 export const Footer = forwardRef(
   (
-    { className, heading, columns, headingLevel, children, ...restProps }: PropsWithChildren<FooterProps>,
+    { className, heading, columns, headingLevel, children, background, ...restProps }: PropsWithChildren<FooterProps>,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <UtrechtPageFooter {...restProps} className={clsx('rhc-footer', className)} ref={ref}>
+    <UtrechtPageFooter
+      {...restProps}
+      ref={ref}
+      className={clsx(
+        'rhc-footer',
+        background === 'filled-secondary' || background === 'outlined' ? `rhc-footer--${background}` : '',
+        className,
+      )}
+    >
       {heading && (
         <Heading className="rhc-footer__title" level={headingLevel}>
           {heading}
@@ -47,4 +56,5 @@ export const Footer = forwardRef(
     </UtrechtPageFooter>
   ),
 );
+
 Footer.displayName = 'Footer';
diff --git a/packages/storybook/src/community/footer.stories.tsx b/packages/storybook/src/community/footer.stories.tsx
@@ -23,6 +23,7 @@ export const DefaultFooter: Story = {
   args: {
     heading: 'De Rijksoverheid. Voor Nederland',
     headingLevel: 4,
+    background: 'filled-primary',
     columns: [
       {
         heading: 'Service',

diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
@@ -3118,6 +3118,22 @@
               "type": "spacing"
             }
           }
+        },
+        "border": {
+            "block-start": {
+                "width": {
+                    "value": "{rhc.border-width.m}",
+                    "type": "borderWidth"
+                },
+                "color": {
+                    "value": "{rhc.color.robijnrood.500}",
+                    "type": "color"
+                },
+                "style": {
+                    "value": "solid",
+                    "type": "borderStyle"
+                }
+            }
         }
       }
     }