feat(Header): small version, allow removing vertical padding

playroom/snippets.tsx

@@ -472,7 +472,7 @@ const headerSnippets: Array<Snippet> = [
     },
     {
         group: 'Headers',
-        name: 'Basic header layout (white)',
+        name: 'Basic header layout (no inverse)',
         code: `
         <HeaderLayout
             isInverse={false}
@@ -507,7 +507,7 @@ const headerSnippets: Array<Snippet> = [
     },
     {
         group: 'Headers',
-        name: 'Header layout (with breadcrumbs)(white)',
+        name: 'Header layout (with breadcrumbs)(no inverse)',
         code: `
         <HeaderLayout
             isInverse={false}
@@ -541,7 +541,7 @@ const headerSnippets: Array<Snippet> = [
     },
     {
         group: 'Headers',
-        name: 'Main section header layout (white)',
+        name: 'Main section header layout (no inverse)',
         code: `
         <MainSectionHeaderLayout
             isInverse={false}>

src/__screenshot_tests__/header-screenshot-test.tsx

@@ -5,42 +5,73 @@ import type {Device} from '../test-utils';
 const DEVICES: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
 
 test.each`
-    device          | isInverse | isErrorAmount
-    ${'MOBILE_IOS'} | ${true}   | ${true}
-    ${'MOBILE_IOS'} | ${false}  | ${true}
-    ${'MOBILE_IOS'} | ${false}  | ${false}
-    ${'DESKTOP'}    | ${true}   | ${true}
+    device          | isInverse
+    ${'MOBILE_IOS'} | ${true}
+    ${'MOBILE_IOS'} | ${false}
+    ${'DESKTOP'}    | ${true}
+    ${'DESKTOP'}    | ${false}
 `(
-    'Header in $device isInverse=$isInverse isErrorAmount=$isErrorAmount',
+    'Header in $device isInverse=$isInverse',
     async ({device, isInverse}: {device: Device; isInverse: boolean}) => {
-        const {click} = await openStoryPage({
+        await openStoryPage({
             id: 'components-headers-header--default',
             device,
+            args: {isInverse},
         });
 
-        if (!isInverse) {
-            await click(await screen.findByText('Inverse'));
-        }
-
         const story = await screen.findByTestId('header-layout');
         const image = await story.screenshot();
         expect(image).toMatchImageSnapshot();
     }
 );
 
 test('Header vertical extra in desktop', async () => {
-    const {click} = await openStoryPage({
+    await openStoryPage({
         id: 'components-headers-header--default',
         device: 'DESKTOP',
+        args: {sideBySideExtraOnDesktop: false},
     });
 
-    await click(await screen.findByLabelText('Extra content placed on the right in desktop'));
+    const story = await screen.findByTestId('header-layout');
+    const image = await story.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
+test('Header small', async () => {
+    await openStoryPage({
+        id: 'components-headers-header--default',
+        device: 'MOBILE_IOS',
+        args: {small: true},
+    });
 
     const story = await screen.findByTestId('header-layout');
     const image = await story.screenshot();
     expect(image).toMatchImageSnapshot();
 });
 
+test.each`
+    device          | bleed    | sideBySideExtraOnDesktop
+    ${'MOBILE_IOS'} | ${true}  | ${false}
+    ${'MOBILE_IOS'} | ${false} | ${false}
+    ${'DESKTOP'}    | ${true}  | ${false}
+    ${'DESKTOP'}    | ${false} | ${false}
+    ${'DESKTOP'}    | ${true}  | ${true}
+    ${'DESKTOP'}    | ${false} | ${true}
+`(
+    'HeaderLayout without paddingY device=$device bleed=$bleed sideBySideExtraOnDesktop=$sideBySideExtraOnDesktop',
+    async ({device, bleed, sideBySideExtraOnDesktop}) => {
+        await openStoryPage({
+            id: 'components-headers-header--default',
+            device,
+            args: {noPaddingY: true, bleed, sideBySideExtraOnDesktop},
+        });
+
+        const story = await screen.findByTestId('header-layout');
+        const image = await story.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);
+
 test.each(DEVICES)('MainSectionHeader', async (device) => {
     await openStoryPage({
         id: 'components-headers-mainsectionheader--default',
@@ -81,16 +112,9 @@ test.each(DEVICES)('Header with bleed', async (device) => {
     await openStoryPage({
         id: 'components-headers-header--default',
         device,
+        args: {bleed: true, sideBySideExtraOnDesktop: false},
     });
 
-    const bleedCheckbox = await screen.findByLabelText('Bleed');
-    await bleedCheckbox.click();
-
-    const extraSideBySideCheckbox = await screen.findByLabelText(
-        'Extra content placed on the right in desktop'
-    );
-    await extraSideBySideCheckbox.click();
-
     const story = await screen.findByTestId('header-layout');
 
     const image = await story.screenshot();

src/__stories__/header-story.tsx

@@ -6,10 +6,9 @@ import {
     NavigationBreadcrumbs,
     ResponsiveLayout,
     Placeholder,
-    Text1,
-    Text2,
+    Callout,
+    IconInformationUserLight,
 } from '..';
-import {useTextField, useCheckbox} from './helpers';
 
 export default {
     title: 'Components/Headers/Header',
@@ -18,111 +17,106 @@ export default {
     },
 };
 
-export const Default: StoryComponent = () => {
-    const [pretitle, pretitleTextField] = useTextField('Pretitle', 'Your last bill');
-    const [title, titleTextField] = useTextField('Title', 'December bill is now available');
-    const [description, descriptionTextField] = useTextField('Description', 'This is a description');
-    const [isInverse, inverseCheckbox] = useCheckbox('Inverse', true);
-    const [withExtraContent, extraContentCheckbox] = useCheckbox('With extra content', true);
-    const [extraSideBySide, extraSideBySideCheckbox] = useCheckbox(
-        'Extra content placed on the right in desktop',
-        true
-    );
-    const [withBreadcrumbs, breadcrumbsCheckbox] = useCheckbox('With breadcrumbs (desktop only)', true);
-    const [bleed, bleedCheckbox] = useCheckbox('Bleed', false);
-    return (
-        <Stack space={16}>
-            <div data-testid="header-layout">
-                <HeaderLayout
-                    isInverse={isInverse}
-                    bleed={bleed}
-                    sideBySideExtraOnDesktop={extraSideBySide}
-                    breadcrumbs={
-                        withBreadcrumbs ? (
-                            <NavigationBreadcrumbs
-                                title="Bills"
-                                breadcrumbs={[{title: 'Account', url: '/consumptions'}]}
-                            />
-                        ) : undefined
-                    }
-                    header={<Header pretitle={pretitle} title={title} description={description} />}
-                    extra={withExtraContent ? <Placeholder /> : undefined}
-                />
-            </div>
-            <ResponsiveLayout>
-                <Stack space={16}>
-                    {breadcrumbsCheckbox}
-                    {pretitleTextField}
-                    {titleTextField}
-                    {descriptionTextField}
-                    {bleedCheckbox}
-                    {inverseCheckbox}
-                    {extraContentCheckbox}
-                    {extraSideBySideCheckbox}
-                </Stack>
-            </ResponsiveLayout>
-        </Stack>
-    );
+type Args = {
+    withHeader: boolean;
+    pretitle: string;
+    title: string;
+    description: string;
+    small: boolean;
+    isInverse: boolean;
+    withExtraContent: boolean;
+    sideBySideExtraOnDesktop: boolean;
+    withBreadcrumbs: boolean;
+    bleed: boolean;
+    noPaddingY: boolean;
 };
 
-Default.storyName = 'Header';
-
-/**
- * The header is optional in order to allow webviews to delegate the header visualization to the surrounding native app.
- * For example, in Novum App, the Start tab's greeting is rendered nativelly in the apps and via web in desktop.
- */
-export const NoHeader: StoryComponent = () => {
-    const [extraSideBySide, extraSideBySideCheckbox] = useCheckbox(
-        'Extra content placed on the right in desktop',
-        true
-    );
+export const Default: StoryComponent<Args> = ({
+    withHeader,
+    isInverse,
+    bleed,
+    sideBySideExtraOnDesktop,
+    withBreadcrumbs,
+    pretitle,
+    title,
+    description,
+    small,
+    withExtraContent,
+    noPaddingY,
+}) => {
     return (
         <Stack space={16}>
-            <div data-testid="header-layout">
-                <HeaderLayout
-                    isInverse
-                    sideBySideExtraOnDesktop={extraSideBySide}
-                    breadcrumbs={
+            <HeaderLayout
+                dataAttributes={{testid: 'header-layout'}}
+                isInverse={isInverse}
+                bleed={bleed}
+                sideBySideExtraOnDesktop={sideBySideExtraOnDesktop}
+                noPaddingY={noPaddingY}
+                breadcrumbs={
+                    withBreadcrumbs ? (
                         <NavigationBreadcrumbs
                             title="Bills"
                             breadcrumbs={[{title: 'Account', url: '/consumptions'}]}
                         />
-                    }
-                    extra={<Placeholder />}
-                />
-            </div>
+                    ) : undefined
+                }
+                header={
+                    withHeader ? (
+                        <Header pretitle={pretitle} title={title} description={description} small={small} />
+                    ) : undefined
+                }
+                extra={withExtraContent ? <Placeholder /> : undefined}
+            />
             <ResponsiveLayout>
-                <Stack space={16}>
-                    <Text2 medium>Documentation:</Text2>
-                    <Text1 regular>
-                        The header is optional in order to allow webviews to delegate the header visualization
-                        to the surrounding native app. For example, in Novum App, the Start tab's greeting is
-                        rendered nativelly in the apps and via web in desktop.
-                    </Text1>
-                    {extraSideBySideCheckbox}
-                </Stack>
+                <Callout
+                    icon={<IconInformationUserLight />}
+                    title="Note:"
+                    description="A HeaderLayout can be rendered without a Header (in webviews) to allow delegating the
+                        header visualization to the native app. For example, in Novum App (Mi Movistar, Meu
+                        Vivo, etc), the Start tab's greeting is rendered nativelly in the apps."
+                />
             </ResponsiveLayout>
         </Stack>
     );
 };
 
-NoHeader.storyName = 'Header layout with no header';
+Default.storyName = 'Header';
+Default.args = {
+    withHeader: true,
+    pretitle: 'Your last bill',
+    title: 'December bill is now available',
+    description: 'This is a description',
+    small: false,
+    isInverse: true,
+    withBreadcrumbs: true,
+    noPaddingY: false,
+    withExtraContent: true,
+    sideBySideExtraOnDesktop: true,
+    bleed: false,
+};
+Default.argTypes = {
+    pretitle: {if: {arg: 'withHeader'}},
+    title: {if: {arg: 'withHeader'}},
+    description: {if: {arg: 'withHeader'}},
+    small: {if: {arg: 'withHeader'}},
+    sideBySideExtraOnDesktop: {if: {arg: 'withExtraContent'}},
+    bleed: {if: {arg: 'withExtraContent'}},
+};
 
 export const RichTexts: StoryComponent = () => {
     const filler = ' - more text'.repeat(20);
     return (
-        <div data-testid="header-layout">
-            <HeaderLayout
-                header={
-                    <Header
-                        pretitle={{
-                            text: `Pretitle (truncated to one line) ${filler}}`,
-                            truncate: true,
-                        }}
-                        title="Title is always a plain string"
-                    />
-                }
-            />
-        </div>
+        <HeaderLayout
+            dataAttributes={{testid: 'header-layout'}}
+            header={
+                <Header
+                    pretitle={{
+                        text: `Pretitle (truncated to one line) ${filler}}`,
+                        truncate: true,
+                    }}
+                    title="Title is always a plain string"
+                />
+            }
+        />
     );
 };

src/__type_tests__/stack-type-test.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import Stack from '../stack';
+
+<Stack space="between">
+    <div>1</div>
+    <div>2</div>
+</Stack>;
+<Stack space="around">
+    <div>1</div>
+    <div>2</div>
+</Stack>;
+<Stack space="evenly">
+    <div>1</div>
+    <div>2</div>
+</Stack>;
+
+<Stack space={8}>
+    <div>1</div>
+    <div>2</div>
+</Stack>;
+
+<Stack space={{mobile: 8, tablet: 16, desktop: 24}}>
+    <div>1</div>
+    <div>2</div>
+</Stack>;
+
+<Stack space={{mobile: 8, desktop: 24}}>
+    <div>1</div>
+    <div>2</div>
+</Stack>;
+
+// @ts-expect-error - no children
+<Stack space="between" />;
+
+// @ts-expect-error wrong space numeric value
+<Stack space={7}>
+    <div>1</div>
+    <div>2</div>
+</Stack>;
+
+// @ts-expect-error when using object notation, desktop and mobile are required
+<Stack space={{mobile: 8}}>
+    <div>1</div>
+    <div>2</div>
+</Stack>;
+
+<Stack
+    space={{
+        // @ts-expect-error when using object notation, we only support numeric values
+        mobile: 'between',
+        desktop: 8,
+    }}
+>
+    <div>1</div>
+    <div>2</div>
+</Stack>;