Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Text): support setting heading level to span and header pretitleAs #1170

Merged
merged 3 commits into from
Jul 15, 2024
Merged

feat(Text): support setting heading level to span and header pretitleAs #1170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
339a911
feat(Text): support setting heading level to span and header pretitle…
Winde Jul 8, 2024
2e54043
Fix missing type import
Winde Jul 10, 2024
20ae04a
Merge branch 'master' into carlos_support_span_in_heading_level_acros…
atabel Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/__stories__/header-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Tag,
} from '..';

import type {HeadingType} from '../utils/types';
import type {TagType} from '..';

export default {
Expand All @@ -25,8 +26,10 @@ type Args = {
headlineType: TagType;
headline: string;
pretitle: string;
pretitleAs: HeadingType;
truncatePretitle: boolean;
title: string;
titleAs: HeadingType;
description: string;
small: boolean;
inverse: boolean;
Expand All @@ -46,8 +49,10 @@ export const Default: StoryComponent<Args> = ({
headlineType,
headline,
pretitle,
pretitleAs,
truncatePretitle,
title,
titleAs,
description,
small,
withExtraContent,
Expand All @@ -72,9 +77,11 @@ export const Default: StoryComponent<Args> = ({
header={
withHeader ? (
<Header
pretitleAs={pretitleAs}
headline={<Tag type={headlineType}>{headline}</Tag>}
pretitle={truncatePretitle ? {text: pretitle, truncate: true} : pretitle}
title={title}
titleAs={titleAs}
description={description}
small={small}
/>
Expand All @@ -101,7 +108,9 @@ Default.args = {
headlineType: 'promo',
headline: 'Priority',
pretitle: 'Your last bill',
pretitleAs: 'span',
title: 'December bill is now available',
titleAs: 'h2',
description: 'This is a description',
small: false,
truncatePretitle: false,
Expand All @@ -121,7 +130,17 @@ Default.argTypes = {
},
headline: {if: {arg: 'withHeader'}},
pretitle: {if: {arg: 'withHeader'}},
pretitleAs: {
if: {arg: 'withHeader'},
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
title: {if: {arg: 'withHeader'}},
titleAs: {
if: {arg: 'withHeader'},
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
control: {type: 'select'},
},
description: {if: {arg: 'withHeader'}},
small: {if: {arg: 'withHeader'}},
sideBySideExtraOnDesktop: {if: {arg: 'withExtraContent'}},
Expand Down
3 changes: 2 additions & 1 deletion src/__stories__/title-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import {Title1, Title2, Title3, ButtonLink, IconInformationRegular, skinVars} from '..';

import type {TitleProps} from '../title';
import type {HeadingType} from '../utils/types';

export default {
title: 'Components/Titles',
Expand All @@ -24,7 +25,7 @@ type RenderTitleComponentProps = {
linkText: string;
right: 'link' | 'icon' | 'undefined';
defaultTitle: string;
as: 'h1' | 'h2' | 'h3';
as: HeadingType;
TitleComponent: React.ComponentType<TitleProps>;
};

Expand Down
4 changes: 2 additions & 2 deletions src/callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ import {getPrefixedDataAttributes} from './utils/dom';
import {applyCssVars} from './utils/css';

import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
import type {DataAttributes, RendersNullableElement} from './utils/types';
import type {DataAttributes, HeadingType, RendersNullableElement} from './utils/types';

type Props = {
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
description: string;
onClose?: () => void;
icon?: React.ReactElement;
Expand Down
15 changes: 8 additions & 7 deletions src/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
import type {ExclusifyUnion} from './utils/utility-types';
import type {
DataAttributes,
HeadingType,
IconProps,
RendersElement,
RendersNullableElement,
Expand Down Expand Up @@ -372,7 +373,7 @@ type CardContentProps = {
pretitle?: string;
pretitleLinesMax?: number;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
titleLinesMax?: number;
subtitle?: string;
subtitleLinesMax?: number;
Expand Down Expand Up @@ -507,7 +508,7 @@ interface MediaCardBaseProps {
pretitle?: string;
pretitleLinesMax?: number;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
titleLinesMax?: number;
subtitle?: string;
subtitleLinesMax?: number;
Expand Down Expand Up @@ -730,7 +731,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
type SmallNakedCardProps = MaybeTouchableCard<{
media: RendersElement<typeof Image> | RendersElement<typeof Video>;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
titleLinesMax?: number;
subtitle?: string;
subtitleLinesMax?: number;
Expand Down Expand Up @@ -841,7 +842,7 @@ interface DataCardBaseProps {
pretitle?: string;
pretitleLinesMax?: number;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
titleLinesMax?: number;
subtitle?: string;
subtitleLinesMax?: number;
Expand Down Expand Up @@ -976,7 +977,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
type SnapCardProps = MaybeTouchableCard<{
icon?: React.ReactElement;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
titleLinesMax?: number;
subtitle?: string;
subtitleLinesMax?: number;
Expand Down Expand Up @@ -1153,7 +1154,7 @@ interface CommonDisplayCardProps {
pretitle?: string;
pretitleLinesMax?: number;
title: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
titleLinesMax?: number;
description?: string;
descriptionLinesMax?: number;
Expand Down Expand Up @@ -1445,7 +1446,7 @@ interface PosterCardBaseProps {
pretitle?: string;
pretitleLinesMax?: number;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
titleLinesMax?: number;
subtitle?: string;
subtitleLinesMax?: number;
Expand Down
8 changes: 3 additions & 5 deletions src/community/advanced-data-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import type {CardAction} from '../card';
import type StackingGroup from '../stacking-group';
import type Image from '../image';
import type {ButtonPrimary, ButtonLink} from '../button';
import type {DataAttributes, TrackingEvent} from '../utils/types';
import type {DataAttributes, HeadingType, TrackingEvent} from '../utils/types';
import type {RendersNullableElement} from '../utils/renders-element';
import type Tag from '../tag';
import type {
Expand Down Expand Up @@ -220,17 +220,15 @@ type AllowedExtra =
| typeof SimpleBlock
| typeof ValueBlock;

type TextAs = 'h1' | 'h2' | 'h3' | 'h4';
Copy link
Contributor Author

@Winde Winde Jul 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This restriction of up to H4 was incoherent with the rest of mistica.

It's already producing limitations on the project of configurability from CMS:
https://github.com/Telefonica/webapp/blob/775fe832e4707337d9478ff367a3981732678618/web/src/modular-pages/modules/components/data-card-advanced/index.tsx#L142

There does not seem to be a valid reason why a mistica Header can be up to H6 but the mistica community component is limited to H4


type AdvancedDataCardProps = MaybeTouchableCard<{
stackingGroup?: RendersNullableElement<typeof StackingGroup>;
headline?: RendersNullableElement<typeof Tag>;
pretitle?: string;
pretitleLinesMax?: number;
pretitleAs?: TextAs;
pretitleAs?: HeadingType;
title?: string;
titleLinesMax?: number;
titleAs?: TextAs;
titleAs?: HeadingType;
subtitle?: string;
subtitleLinesMax?: number;
description?: string;
Expand Down
4 changes: 2 additions & 2 deletions src/cover-hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import GridLayout from './grid-layout';
import {CoverHeroMedia} from './cover-hero-media';
import {getPrefixedDataAttributes} from './utils/dom';

import type {DataAttributes} from './utils/types';
import type {DataAttributes, HeadingType} from './utils/types';
import type {ImageProps, VideoProps} from './cover-hero-media';
import type {AspectRatio} from './image';
import type {ExclusifyUnion} from './utils/utility-types';
Expand All @@ -28,7 +28,7 @@ type BaseProps = {
pretitleLinesMax?: number;
title: string;
titleLinesMax?: number;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
description?: string;
descriptionLinesMax?: number;
extra?: React.ReactNode;
Expand Down
4 changes: 2 additions & 2 deletions src/empty-state-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ import * as styles from './empty-state-card.css';
import {vars} from './skins/skin-contract.css';

import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
import type {DataAttributes, RendersNullableElement} from './utils/types';
import type {DataAttributes, HeadingType, RendersNullableElement} from './utils/types';

interface CommonProps {
title: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
button?: RendersNullableElement<typeof ButtonPrimary>;
secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
buttonLink?: RendersNullableElement<typeof ButtonLink>;
Expand Down
4 changes: 2 additions & 2 deletions src/empty-state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ import {applyCssVars} from './utils/css';

import type {ButtonSecondary, ButtonLink} from './button';
import type {ButtonGroupProps} from './button-group';
import type {DataAttributes, RendersNullableElement} from './utils/types';
import type {DataAttributes, HeadingType, RendersNullableElement} from './utils/types';

interface BaseProps {
title: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
button?: RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary>;
buttonLink?: RendersNullableElement<typeof ButtonLink>;
description?: string;
Expand Down
11 changes: 7 additions & 4 deletions src/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {Title2, Title3} from './title';

import type NavigationBreadcrumbs from './navigation-breadcrumbs';
import type {ButtonPrimary, ButtonSecondary} from './button';
import type {DataAttributes, RendersElement, RendersNullableElement} from './utils/types';
import type {DataAttributes, HeadingType, RendersElement, RendersNullableElement} from './utils/types';
import type {TextPresetProps} from './text';

type OverridableTextProps = {
Expand All @@ -29,8 +29,9 @@ type RichText = string | ({text: string} & OverridableTextProps);
type HeaderProps = {
headline?: React.ReactNode;
pretitle?: RichText;
pretitleAs?: HeadingType;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
description?: string;
small?: boolean;
dataAttributes?: DataAttributes;
Expand Down Expand Up @@ -63,6 +64,7 @@ type HeaderProps = {
export const Header: React.FC<HeaderProps> = ({
headline,
pretitle,
pretitleAs,
title,
titleAs = 'h2',
description,
Expand Down Expand Up @@ -99,7 +101,8 @@ export const Header: React.FC<HeaderProps> = ({
<Box paddingRight={16}>
<Stack space={8}>
{headline}
{pretitle && renderRichText(pretitle, {color: vars.colors.textPrimary})}
{pretitle &&
renderRichText(pretitle, {color: vars.colors.textPrimary, as: pretitleAs})}
{title &&
(small ? (
<Title2 as={titleAs}>{title}</Title2>
Expand Down Expand Up @@ -147,7 +150,7 @@ export const Header: React.FC<HeaderProps> = ({

type MainSectionHeaderProps = {
title: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
description?: string;
button?: RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary>;
};
Expand Down
6 changes: 3 additions & 3 deletions src/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import type Image from './image';
import type Video from './video';
import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
import type Tag from './tag';
import type {DataAttributes, RendersElement, RendersNullableElement} from './utils/types';
import type {DataAttributes, HeadingType, RendersElement, RendersNullableElement} from './utils/types';

const CONTENT_BACKGROUND_COLOR = {
default: skinVars.colors.background,
Expand Down Expand Up @@ -51,7 +51,7 @@ type HeroContentProps = {
headline?: RendersNullableElement<typeof Tag>;
pretitle?: string;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
description?: string;
descriptionLinesMax?: number;
extra?: React.ReactNode;
Expand Down Expand Up @@ -122,7 +122,7 @@ type HeroProps = {
headline?: RendersNullableElement<typeof Tag>;
pretitle?: string;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
description?: string;
descriptionLinesMax?: number;
extra?: React.ReactNode;
Expand Down
4 changes: 2 additions & 2 deletions src/highlighted-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {useTheme} from './hooks';
import type {ExclusifyUnion} from './utils/utility-types';
import type {TouchableComponentProps} from './touchable';
import type {ButtonLink, NullableButtonElement} from './button';
import type {DataAttributes, RendersNullableElement, TrackingEvent} from './utils/types';
import type {DataAttributes, HeadingType, RendersNullableElement, TrackingEvent} from './utils/types';

// At least one of title or description is required
type TextProps =
Expand All @@ -27,7 +27,7 @@ type TextProps =
};

type CommonProps = TextProps & {
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
titleLinesMax?: number;
descriptionLinesMax?: number;
imageUrl?: string;
Expand Down
4 changes: 2 additions & 2 deletions src/navigation-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import Box from './box';
import {isRunningAcceptanceTest} from './utils/platform';

import type {TouchableProps} from './touchable';
import type {DataAttributes} from './utils/types';
import type {DataAttributes, HeadingType} from './utils/types';

const BurgerMenuIcon = ({isOpen}: {isOpen: boolean}) => {
return (
Expand Down Expand Up @@ -303,7 +303,7 @@ interface NavigationBarCommonProps {
isInverse?: boolean;
onBack?: () => void;
title?: string;
titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
titleAs?: HeadingType;
right?: React.ReactElement;
withBorder?: boolean;
children?: undefined;
Expand Down
4 changes: 2 additions & 2 deletions src/title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {vars} from './skins/skin-contract.css';
import {useTheme} from './hooks';
import {getPrefixedDataAttributes} from './utils/dom';

import type {DataAttributes} from './utils/types';
import type {DataAttributes, HeadingType} from './utils/types';

type TitleLayoutProps = {
title: React.ReactElement;
Expand Down Expand Up @@ -35,7 +35,7 @@ export type TitleProps = {
children: React.ReactNode;
id?: string;
right?: React.ReactNode;
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
as?: HeadingType;
/** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
dataAttributes?: DataAttributes;
};
Expand Down
2 changes: 2 additions & 0 deletions src/utils/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,5 @@ export type IconProps = {
};

export type ByBreakpoint<T> = T | {mobile: T; tablet?: T; desktop: T};

export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
Loading