Skip to content

Commit

Permalink
fix: resolve circular dependencies in community module
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulo-asilva
paulo-asilva committed Dec 5, 2024
1 parent aaaac0a commit fa4bbc6
Show file tree
Hide file tree
Showing 2 changed files with 264 additions and 314 deletions.
141 changes: 36 additions & 105 deletions src/community/advanced-data-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,11 @@ import {vars} from '../skins/skin-contract.css';
import Box from '../box';
import Touchable from '../touchable';
import classNames from 'classnames';
import {CardActionsGroup, useInnerText} from '../card';
import {CardActionsGroup} from '../card';
import {useTheme} from '../hooks';
import {getPrefixedDataAttributes} from '../utils/dom';
import Inline from '../inline';
import {applyCssVars} from '../utils/css';
import Tag from '../tag';
import {isBiggerHeading} from '../utils/headings';

import type {PressHandler} from '../touchable';
import type {ExclusifyUnion} from '../utils/utility-types';
Expand All @@ -29,6 +27,7 @@ import type Image from '../image';
import type {ButtonPrimary, ButtonLink} from '../button';
import type {DataAttributes, HeadingType, TrackingEvent} from '../utils/types';
import type {RendersNullableElement} from '../utils/renders-element';
import type Tag from '../tag';
import type {
HighlightedValueBlock,
InformationBlock,
Expand Down Expand Up @@ -60,12 +59,11 @@ type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;

type CardContentProps = {
headline?: string | RendersNullableElement<typeof Tag>;
headlineRef?: (instance: HTMLElement | null) => void;
pretitle?: string;
pretitleAs?: HeadingType;
pretitleAs?: string;
pretitleLinesMax?: number;
title?: string;
titleAs: HeadingType;
titleAs?: string;
titleLinesMax?: number;
subtitle?: string;
subtitleLinesMax?: number;
Expand All @@ -75,12 +73,11 @@ type CardContentProps = {

const CardContent = ({
headline,
headlineRef,
pretitle,
pretitleAs,
pretitleAs = 'p',
pretitleLinesMax,
title,
titleAs,
titleAs = 'h3',
titleLinesMax,
subtitle,
subtitleLinesMax,
Expand All @@ -90,96 +87,44 @@ const CardContent = ({
const {textPresets} = useTheme();

return (
/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */
<div className={styles.flexColumn}>
{isBiggerHeading(titleAs, pretitleAs) ? (
<>
{title && (
<div style={{paddingBottom: subtitle || description ? 4 : 0}}>
<Text
{...textProps.text4}
truncate={titleLinesMax}
weight={textPresets.cardTitle.weight}
as={titleAs}
hyphens="auto"
>
{title}
</Text>
</div>
)}
{headline && (
<div
ref={headlineRef}
style={{
order: -2,
paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
}}
>
{typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
</div>
)}
{pretitle && (
<div style={{order: -1, paddingBottom: title || subtitle || description ? 4 : 0}}>
<Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
{pretitle}
</Text2>
</div>
)}
</>
) : (
<>
{pretitle && (
<div style={{paddingBottom: title || subtitle || description ? 4 : 0}}>
<Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
{pretitle}
</Text2>
</div>
)}
{headline && (
<div
ref={headlineRef}
style={{
order: -1,
paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
}}
>
{typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
</div>
)}
{title && (
<div style={{paddingBottom: subtitle || description ? 4 : 0}}>
<Text
{...textProps.text4}
truncate={titleLinesMax}
weight={textPresets.cardTitle.weight}
as={titleAs}
hyphens="auto"
>
{title}
</Text>
</div>
)}
</>
)}
{subtitle && (
<div style={{paddingBottom: description ? 4 : 0}}>
<Text2 truncate={subtitleLinesMax} as="div" regular hyphens="auto">
{subtitle}
</Text2>
</div>
<Stack space={4}>
{headline}
{pretitle && (
<Text2
color={vars.colors.textPrimary}
truncate={pretitleLinesMax}
as={pretitleAs}
regular
hyphens="auto"
>
{pretitle}
</Text2>
)}

<Text
{...textProps.text4}
truncate={titleLinesMax}
weight={textPresets.cardTitle.weight}
as={titleAs}
hyphens="auto"
>
{title}
</Text>
<Text2 color={vars.colors.textPrimary} truncate={subtitleLinesMax} as="p" regular hyphens="auto">
{subtitle}
</Text2>
{description && (
<Text2
truncate={descriptionLinesMax}
as="div"
as="p"
regular
color={vars.colors.textSecondary}
hyphens="auto"
>
{description}
</Text2>
)}
</div>
</Stack>
);
};

Expand Down Expand Up @@ -301,7 +246,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
pretitleAs,
pretitleLinesMax,
title,
titleAs = 'h3',
titleAs,
titleLinesMax,
subtitle,
subtitleLinesMax,
Expand All @@ -320,7 +265,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar

dataAttributes,
actions,
'aria-label': ariaLabelProp,
'aria-label': ariaLabel,
onClose,
...touchableProps
},
Expand All @@ -335,18 +280,6 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar

const topActionsCount = (actions?.length || 0) + (onClose ? 1 : 0);

const {text: headlineText, ref: headlineRef} = useInnerText();
const {text: extraText, ref: extraRef} = useInnerText();

const ariaLabel =
ariaLabelProp ||
(isBiggerHeading(titleAs, pretitleAs)
? [title, headlineText, pretitle, subtitle, description, extraText]
: [pretitle, headlineText, title, subtitle, description, extraText]
)
.filter(Boolean)
.join(' ');

return (
<section
className={styles.container}
Expand All @@ -368,15 +301,13 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
styles.cardContentStyle,
!hasFooter && !hasExtras ? styles.minHeight : ''
)}
aria-hidden={isTouchable}
>
<Box paddingTop={8}>
<Inline space={0}>
<Stack space={8}>
{stackingGroup}
<CardContent
headline={headline}
headlineRef={headlineRef}
pretitle={pretitle}
pretitleAs={pretitleAs}
pretitleLinesMax={pretitleLinesMax}
Expand All @@ -403,7 +334,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
</div>
<div style={{flexGrow: 1}} />
{hasExtras && (
<div className={styles.extra} ref={extraRef}>
<div className={styles.extra}>
{extra.map((item, index) => {
return (
<div key={index}>
Expand Down
Loading

0 comments on commit fa4bbc6

Please sign in to comment.