Skip to content

Update card.tsx #5415

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

Closed
MaddipatlaChetan24 wants to merge 2 commits into from
Closed

Update card.tsx #5415

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2c070f
Update card.tsx
MaddipatlaChetan24 Sep 7, 2026
1c619c9
Update card.tsx
MaddipatlaChetan24 Sep 23, 2026
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
15 changes: 5 additions & 10 deletions src/card/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

import * as React from 'react';
import { getOverride, getOverrideProps } from '../helpers/overrides';
import { LevelContext } from '../heading';
Expand All @@ -17,22 +15,23 @@ import {
Thumbnail as StyledThumbnail,
Title as StyledTitle,
} from './styled-components';

import type { CardProps } from './types';

export function hasThumbnail(props: { readonly thumbnail?: string }) {
return !!props.thumbnail;
}

// Hoisted out of SemanticTitle so this array literal is allocated once at
// module load instead of on every render of every Card's title.
const HEADING_LEVELS = ['', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

// @ts-ignore
const SemanticTitle = ({ children, ...restProps }) => {
const levels = ['', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

return (
<LevelContext.Consumer>
{(level) => (
// @ts-expect-error
<StyledTitle $as={levels[level]} {...restProps}>
<StyledTitle $as={HEADING_LEVELS[level]} {...restProps}>
{children}
</StyledTitle>
)}
Expand All @@ -51,7 +50,6 @@ function Card(props: CardProps) {
overrides,
...restProps
} = props;

const {
Action: ActionOverride,
Body: BodyOverride,
Expand All @@ -61,17 +59,14 @@ function Card(props: CardProps) {
Thumbnail: ThumbnailOverride,
Title: TitleOverride,
} = overrides;

const Action = getOverride(ActionOverride) || StyledAction;
const Body = getOverride(BodyOverride) || StyledBody;
const Contents = getOverride(ContentsOverride) || StyledContents;
const HeaderImage = getOverride(HeaderImageOverride) || StyledHeaderImage;
const Root = getOverride(RootOverride) || StyledRoot;
const Thumbnail = getOverride(ThumbnailOverride) || StyledThumbnail;
const Title = getOverride(TitleOverride) || SemanticTitle;

const headerImageProps = typeof headerImage === 'string' ? { src: headerImage } : headerImage;

// @ts-ignore
const $hasThumbnail = hasThumbnail(props);
return (
Expand Down