fix(Header): bleed not working in o2-new skin

src/__private_stories__/skin-components-story.tsx

@@ -45,6 +45,10 @@ import {
     Hero,
     Table,
     Timer,
+    HeaderLayout,
+    Header,
+    Placeholder,
+    NegativeBox,
 } from '..';
 import {InternalIconButton} from '../icon-button';
 import avatarImg from '../__stories__/images/avatar.jpg';
@@ -68,29 +72,41 @@ type Args = {
 };
 
 export const Default: StoryComponent<Args> = ({variant}) => {
+    // Only show inverse header when the rest of the screen is default
+    const inverseHeader = variant === 'default';
     return (
-        <ResponsiveLayout fullWidth variant={variant}>
-            <Box padding={16}>
+        <ResponsiveLayout variant={variant}>
+            <Box paddingTop={inverseHeader ? 0 : {mobile: 32, desktop: 48}} paddingBottom={16}>
                 <Stack space={32}>
-                    <Text2 regular>
-                        This story is created to verify how some of the components look like when using
-                        different skins
-                    </Text2>
-
-                    <RowList>
-                        <Row
-                            title="Title 1"
-                            subtitle="Subtitle"
-                            description="Description"
-                            href="https://www.google.com/"
-                        />
-                        <Row
-                            title="Title 2"
-                            subtitle="Subtitle"
-                            description="Description"
-                            href="https://www.google.com/"
-                        />
-                    </RowList>
+                    <HeaderLayout
+                        isInverse={inverseHeader}
+                        bleed
+                        header={
+                            <Header
+                                title="Components in different skins"
+                                description="This story is created to verify how some of the components look like when using
+                        different skins"
+                            />
+                        }
+                        extra={<Placeholder />}
+                        noPaddingY={!inverseHeader}
+                    />
+                    <NegativeBox>
+                        <RowList>
+                            <Row
+                                title="Title 1"
+                                subtitle="Subtitle"
+                                description="Description"
+                                href="https://www.google.com/"
+                            />
+                            <Row
+                                title="Title 2"
+                                subtitle="Subtitle"
+                                description="Description"
+                                href="https://www.google.com/"
+                            />
+                        </RowList>
+                    </NegativeBox>
                     {/** BoxedAccordion */}
                     <BoxedAccordion index={1}>
                         <BoxedAccordionItem

src/header.tsx

@@ -241,7 +241,7 @@ export const HeaderLayout: React.FC<HeaderLayoutProps> = ({
             {isBleedActivated && (
                 <ResponsiveLayout
                     className={sideBySideExtraOnDesktop ? styles.hideOnDesktop : ''}
-                    backgroundColor={`linear-gradient(to bottom, ${vars.colors.backgroundBrand} 40px, ${vars.colors.background} 0%)`}
+                    backgroundColor={`linear-gradient(to bottom, ${vars.colors.backgroundBrandBottom} 40px, ${vars.colors.background} 0%)`}
                 >
                     {extra}
                 </ResponsiveLayout>

src/index.tsx

@@ -212,7 +212,7 @@ export {palette as blauPalette} from './skins/blau';
 export {palette as tuPalette} from './skins/tu';
 
 export type {Locale} from './utils/locale';
-export type {TrackingEvent, IconProps} from './utils/types';
+export type {TrackingEvent, IconProps, DataAttributes} from './utils/types';
 export type {RegionCode} from './utils/region-code';
 
 /*