@lumx/react 3.0.1 → 3.0.2-alpha-react-utils.2

package/src/components/checkbox/Checkbox.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Checkbox, CheckboxProps } from './Checkbox';
 

package/src/components/checkbox/Checkbox.tsx

@@ -6,7 +6,8 @@ import { uid } from 'uid';
 import { mdiCheck } from '@lumx/icons';
 
 import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/chip/Chip.test.tsx

@@ -4,7 +4,7 @@ import React, { ReactElement } from 'react';
 
 import { ColorPalette, Theme } from '@lumx/react';
 import { Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { Chip, ChipProps } from './Chip';
 
 const CLASSNAME = Chip.className as string;

package/src/components/chip/Chip.tsx

@@ -1,7 +1,9 @@
 import { Color, ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, onEnterPressed } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { onEnterPressed } from '@lumx/react/utils/event';
 
 import classNames from 'classnames';
 

package/src/components/chip/ChipGroup.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
 

package/src/components/comment-block/CommentBlock.tsx

@@ -3,7 +3,8 @@ import React, { Children, forwardRef, KeyboardEvent, KeyboardEventHandler, React
 import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import isFunction from 'lodash/isFunction';
 import { AvatarProps } from '../avatar/Avatar';

package/src/components/date-picker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import React, { forwardRef, useState } from 'react';
-import { Comp } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
 import { CLASSNAME, COMPONENT_NAME } from './constants';
 import { DatePickerControlled } from './DatePickerControlled';
 import { DatePickerProps } from './types';

package/src/components/date-picker/DatePickerControlled.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
 import { getAnnotatedMonthCalendar, getWeekDays } from '@lumx/core/js/date-picker';
-import { Comp } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
 import { CLASSNAME } from './constants';
 
 /**

package/src/components/date-picker/DatePickerField.tsx

@@ -6,7 +6,7 @@ import moment from 'moment';
 import React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';
 
 import { useFocus } from '@lumx/react/hooks/useFocus';
-import { Comp, GenericProps } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
 
 /**
  * Defines the props of the component.

package/src/components/date-picker/constants.ts

@@ -1,4 +1,4 @@
-import { getRootClassName } from '@lumx/react/utils';
+import { getRootClassName } from '@lumx/react/utils/className';
 
 /**
  * Component display name.

package/src/components/date-picker/types.ts

@@ -1,5 +1,5 @@
 import { IconButtonProps } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils';
+import { GenericProps } from '@lumx/react/utils/type';
 import { Ref } from 'react';
 
 /**

package/src/components/dialog/Dialog.tsx

@@ -9,14 +9,10 @@ import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
-import {
-    Comp,
-    GenericProps,
-    getRootClassName,
-    handleBasicClasses,
-    isComponent,
-    partitionMulti,
-} from '@lumx/react/utils';
+
+import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 

package/src/components/divider/Divider.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Theme } from '@lumx/react';
 import { Divider, DividerProps } from './Divider';

package/src/components/divider/Divider.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.
@@ -23,7 +24,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /**
  * Component default props.
  */
-export const DEFAULT_PROPS: Partial<DividerProps> = {
+const DEFAULT_PROPS: Partial<DividerProps> = {
     theme: Theme.light,
 };
 

package/src/components/drag-handle/DragHandle.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/dropdown/Dropdown.tsx

@@ -5,7 +5,8 @@ import classNames from 'classnames';
 import { List, ListProps } from '@lumx/react/components/list/List';
 import { Offset, Placement, Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';
+import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Theme } from '@lumx/react';
 import { ExpansionPanel, ExpansionPanelProps } from './ExpansionPanel';

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -9,16 +9,9 @@ import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import {
-    Callback,
-    Comp,
-    GenericProps,
-    getRootClassName,
-    handleBasicClasses,
-    HasTheme,
-    isComponent,
-    partitionMulti,
-} from '@lumx/react/utils';
+import { Callback, Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 
 /**
  * Defines the props of the component.

package/src/components/flag/Flag.test.tsx

@@ -5,7 +5,7 @@ import React, { ReactElement } from 'react';
 import { ColorPalette, Theme } from '@lumx/react';
 import { mdiAbTesting } from '@lumx/icons';
 import { itShouldRenderStories, commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Flag, FlagProps } from './Flag';
 import * as stories from './Flag.stories';

package/src/components/flag/Flag.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 export interface FlagProps extends GenericProps, HasTheme {
     /** Color of the component. */

package/src/components/flex-box/FlexBox.stories.tsx

@@ -19,8 +19,32 @@ const flexViewKnobConfigs: Array<
     ['noShrink', boolean],
     ['wrap', boolean],
     ['gap', select, [DEFAULT_PROPS.gap, Size.tiny, Size.regular, Size.medium, Size.big, Size.huge]],
-    ['hAlign', select, [DEFAULT_PROPS.hAlign, Alignment.center, Alignment.top, Alignment.bottom]],
-    ['vAlign', select, [DEFAULT_PROPS.vAlign, Alignment.center, Alignment.right, Alignment.left]],
+    [
+        'hAlign',
+        select,
+        [
+            DEFAULT_PROPS.hAlign,
+            Alignment.center,
+            Alignment.top,
+            Alignment.bottom,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
+    ],
+    [
+        'vAlign',
+        select,
+        [
+            DEFAULT_PROPS.vAlign,
+            Alignment.center,
+            Alignment.right,
+            Alignment.left,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
+    ],
     ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],
     [
         'marginAuto',
@@ -69,13 +93,27 @@ export const Flex = () => (
 const hAlign = (prefix?: string) =>
     select(
         `${prefix ? `${prefix}: ` : ''}Horizontal align`,
-        [Alignment.center, Alignment.top, Alignment.bottom],
+        [
+            Alignment.center,
+            Alignment.top,
+            Alignment.bottom,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
         Alignment.center,
     );
 const vAlign = (prefix?: string) =>
     select(
         `${prefix ? `${prefix}: ` : ''}Vertical align`,
-        [Alignment.center, Alignment.left, Alignment.right],
+        [
+            Alignment.center,
+            Alignment.left,
+            Alignment.right,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
         Alignment.center,
     );
 
@@ -179,3 +217,29 @@ export const Align = () => (
         <FlexBox style={{ height: 'fit-content' }}>Some text</FlexBox>
     </FlexBox>
 );
+
+export const Distribution = () => (
+    <FlexBox
+        style={{
+            width: `${number('width (px)', 720)}px`,
+            height: `${number('height (px)', 300)}px`,
+            border: '1px solid red',
+        }}
+        orientation={orientation()}
+        gap={gapSize()}
+        vAlign={vAlign()}
+        hAlign={hAlign()}
+    >
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+    </FlexBox>
+);
+
+export const CustomizeElement = () => (
+    <FlexBox as="header" orientation="horizontal" gap="regular">
+        <div>Element 1</div>
+        <div>Element 2</div>
+        <div>Element 2</div>
+    </FlexBox>
+);

package/src/components/flex-box/FlexBox.tsx

@@ -1,17 +1,23 @@
-import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Alignment, Orientation } from '@lumx/react';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';
 import React, { forwardRef, ReactNode } from 'react';
-import { Size } from '..';
+import { HorizontalAlignment, Size, VerticalAlignment } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
 export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
+type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
+export type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
+export type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
 
 /**
  * Defines the props of the component.
  */
 export interface FlexBoxProps extends GenericProps {
+    /** Customize the root element. */
+    as?: React.ElementType;
     /** Children elements. */
     children?: ReactNode;
     /** Whether the "content filling space" is enabled or not. */
@@ -19,7 +25,7 @@ export interface FlexBoxProps extends GenericProps {
     /** Gap space between flexbox items. */
     gap?: GapSize;
     /** Flex horizontal alignment. */
-    hAlign?: VerticalAlignment;
+    hAlign?: FlexVerticalAlignment;
     /** Whether the "auto margin" is enabled all around or not. */
     marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
     /** Whether the "content shrink" is disabled or not. */
@@ -27,7 +33,7 @@ export interface FlexBoxProps extends GenericProps {
     /** Flex direction. */
     orientation?: Orientation;
     /** Flex vertical alignment. */
-    vAlign?: HorizontalAlignment;
+    vAlign?: FlexHorizontalAlignment;
     /** Whether the "flex wrap" is enabled or not. */
     wrap?: boolean;
 }
@@ -51,6 +57,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {
     const {
+        as: Component = 'div',
         children,
         className,
         fillSpace,
@@ -65,7 +72,7 @@ export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, re
     } = props;
 
     return (
-        <div
+        <Component
             ref={ref}
             {...forwardedProps}
             className={classNames(
@@ -84,7 +91,7 @@ export const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, re
             )}
         >
             {children}
-        </div>
+        </Component>
     );
 });
 FlexBox.displayName = COMPONENT_NAME;

package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap

@@ -40,6 +40,57 @@ Array [
 ]
 `;
 
+exports[`<FlexBox> Snapshots and structure should render story 'Distribution' 1`] = `
+<div
+  className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--gap-regular"
+  style={
+    Object {
+      "border": "1px solid red",
+      "height": "300px",
+      "width": "720px",
+    }
+  }
+>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Button 1
+  </Button>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Button 2
+  </Button>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Button 3
+  </Button>
+</div>
+`;
+
+exports[`<FlexBox> Snapshots and structure should render story 'CustomizeElement' 1`] = `
+<header
+  className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-regular"
+>
+  <div>
+    Element 1
+  </div>
+  <div>
+    Element 2
+  </div>
+  <div>
+    Element 2
+  </div>
+</header>
+`;
+
 exports[`<FlexBox> Snapshots and structure should render story 'Flex' 1`] = `
 Array [
   <div

package/src/components/generic-block/GenericBlock.stories.jsx

@@ -1,6 +1,7 @@
+import { IMAGES } from '@lumx/react/stories/knobs/image';
 import React from 'react';
 import { mdiPencil } from '@lumx/icons';
-import { GenericBlock, Button, Icon, Size } from '@lumx/react';
+import { GenericBlock, Button, Icon, Size, Thumbnail } from '@lumx/react';
 
 export default { title: 'LumX components/generic-block/GenericBlock' };
 
@@ -104,3 +105,24 @@ export const GapSizes = ({ theme }) =>
             </GenericBlock.Actions>
         </GenericBlock>
     ));
+
+export const AsAFigure = () => (
+    <GenericBlock as="figure" orientation="vertical" style={{ width: '150px' }}>
+        <GenericBlock.Figure>
+            <Thumbnail alt="" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
+        </GenericBlock.Figure>
+        <GenericBlock.Content as="figcaption">Rocky mountain landscape</GenericBlock.Content>
+    </GenericBlock>
+);
+
+export const AsAnArticle = () => (
+    <GenericBlock as="article" orientation="horizontal">
+        <GenericBlock.Figure>
+            <Thumbnail alt="" size="xl" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
+        </GenericBlock.Figure>
+        <GenericBlock.Content>
+            <h2>Article title</h2>
+            <p>Article description...</p>
+        </GenericBlock.Content>
+    </GenericBlock>
+);

package/src/components/generic-block/GenericBlock.tsx

@@ -2,7 +2,9 @@ import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
-import { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';
+import { Comp, isComponentType } from '@lumx/react/utils/type';
+import { getRootClassName } from '@lumx/react/utils/className';
+import { partitionMulti } from '@lumx/react/utils/partitionMulti';
 import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
 
 export interface GenericBlockProps extends FlexBoxProps {

package/src/components/grid/Grid.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Alignment, Orientation, Size } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
 

package/src/components/grid/GridItem.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Alignment } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 

package/src/components/heading/Heading.stories.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { imageKnob } from '@lumx/react/stories/knobs/image';
+import { Orientation, Size, Typography } from '..';
+import { Heading, HeadingLevelProvider } from '.';
+import { FlexBox } from '../flex-box';
+import { GenericBlock } from '../generic-block';
+import { Thumbnail } from '../thumbnail';
+
+export default { title: 'LumX components/heading/Heading' };
+
+export const Default = () => {
+    return (
+        <div>
+            {/* This will render a h1 */}
+            <Heading>First level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h2 */}
+                <Heading>Second Level</Heading>
+                <HeadingLevelProvider>
+                    {/* This will render a h3 */}
+                    <Heading>Third Level</Heading>
+                    {/* This will also render a h3 */}
+                    <Heading>Other Third Level</Heading>
+                    <HeadingLevelProvider>
+                        {/* This will render a h4 */}
+                        <Heading>Fourth Level</Heading>
+                        <HeadingLevelProvider>
+                            {/* This will render a h5 */}
+                            <Heading>Fifth Level</Heading>
+                        </HeadingLevelProvider>
+                    </HeadingLevelProvider>
+                </HeadingLevelProvider>
+            </HeadingLevelProvider>
+        </div>
+    );
+};
+
+export const LevelOverride = () => {
+    return (
+        <div>
+            {/* This will render a h1 */}
+            <Heading>First level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h2 */}
+                <Heading>Second Level</Heading>
+                <HeadingLevelProvider level={2}>
+                    {/* This will also render a h2 */}
+                    <Heading>Lorem ipsum</Heading>
+                    <Heading>Dolor sit amet</Heading>
+                    <Heading>Reprehenderit et aute</Heading>
+                </HeadingLevelProvider>
+            </HeadingLevelProvider>
+        </div>
+    );
+};
+
+export const HeadingManualOverride = () => {
+    return (
+        <div>
+            {/* This will render a h1 */}
+            <Heading>First level</Heading>
+            <HeadingLevelProvider>
+                {/* This will render a h2 */}
+                <Heading as="h2">Forced second Level</Heading>
+                <Heading as="h3">Forced third Level</Heading>
+                <Heading as="h4">Forced fourth Level</Heading>
+            </HeadingLevelProvider>
+        </div>
+    );
+};
+
+const ListWithSubElements = () => {
+    return (
+        <HeadingLevelProvider>
+            <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
+                    <Heading typography={Typography.subtitle2}>First item</Heading>
+                </GenericBlock>
+                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
+                    <Heading typography={Typography.subtitle2}>Second item</Heading>
+                </GenericBlock>
+                <GenericBlock figure={<Thumbnail image={imageKnob()} alt="First Item" size={Size.l} />}>
+                    <Heading typography={Typography.subtitle2}>Third item</Heading>
+                </GenericBlock>
+            </FlexBox>
+        </HeadingLevelProvider>
+    );
+};
+
+export const TypographyOverride = () => {
+    return (
+        <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+            <Heading>My lists</Heading>
+
+            <FlexBox orientation={Orientation.horizontal} gap={Size.huge}>
+                <ListWithSubElements />
+
+                <FlexBox orientation={Orientation.vertical} gap={Size.big}>
+                    <HeadingLevelProvider>
+                        <Heading>Sub list</Heading>
+
+                        <ListWithSubElements />
+                    </HeadingLevelProvider>
+                </FlexBox>
+            </FlexBox>
+        </FlexBox>
+    );
+};