Skip to content

Commit 405f49c

Browse files
jperalsjperals
committed
Refactor
1 parent e7d49da commit 405f49c

File tree

5 files changed

+94
-108
lines changed

5 files changed

+94
-108
lines changed

‎src/cards/index.tsx‎

Lines changed: 58 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -315,65 +315,68 @@ const CardsList = <T,>({
315315
},
316316
};
317317
return (
318-
<Card
319-
actions={
320-
selectionProps && (
321-
<div
322-
className={styles['selection-control']}
323-
{...(!canClickEntireCard && !disabled
324-
? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)
325-
: {})}
326-
>
327-
<SelectionControl onFocusDown={moveFocusDown} onFocusUp={moveFocusUp} {...selectionProps} />
328-
</div>
329-
)
330-
}
331-
active={selectable && selected}
332-
className={styles.card}
333-
header={
334-
cardDefinition.header ? (
335-
<div className={clsx(styles['card-header'], analyticsSelectors['card-header'])}>
336-
{cardDefinition.header(item)}
337-
</div>
338-
) : (
339-
''
340-
)
341-
}
342-
innerMetadataAttributes={
343-
canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}
344-
}
318+
<li
319+
className={clsx(styles.card, {
320+
[styles['card-selectable']]: selectable,
321+
[styles['card-selected']]: selectable && selected,
322+
})}
345323
key={index}
346-
metadataAttributes={{
347-
...getAnalyticsMetadataAttribute({
348-
component: {
349-
innerContext: {
350-
position: `${index + 1}`,
351-
item: `${key}`,
352-
},
353-
},
354-
}),
355-
...focusMarkers.item,
356-
}}
357-
onClick={
358-
canClickEntireCard
359-
? event => {
360-
selectionProps?.onChange();
361-
// Manually move focus to the native input (checkbox or radio button)
362-
event.currentTarget.querySelector('input')?.focus();
363-
}
364-
: undefined
365-
}
366324
onFocus={onFocus}
367325
role={listItemRole}
368-
tagName="li"
326+
{...focusMarkers.item}
327+
{...getAnalyticsMetadataAttribute({
328+
component: {
329+
innerContext: {
330+
position: `${index + 1}`,
331+
item: `${key}`,
332+
},
333+
},
334+
})}
369335
>
370-
{visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (
371-
<div key={id || index} className={styles.section} style={{ width: `${width}%` }}>
372-
{header ? <div className={styles['section-header']}>{header}</div> : ''}
373-
{content ? <div className={styles['section-content']}>{content(item)}</div> : ''}
374-
</div>
375-
))}
376-
</Card>
336+
<Card
337+
actions={
338+
selectionProps && (
339+
<div
340+
className={styles['selection-control']}
341+
{...(!canClickEntireCard && !disabled
342+
? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)
343+
: {})}
344+
>
345+
<SelectionControl onFocusDown={moveFocusDown} onFocusUp={moveFocusUp} {...selectionProps} />
346+
</div>
347+
)
348+
}
349+
active={selectable && selected}
350+
header={
351+
cardDefinition.header ? (
352+
<div className={clsx(styles['card-header'], analyticsSelectors['card-header'])}>
353+
{cardDefinition.header(item)}
354+
</div>
355+
) : (
356+
''
357+
)
358+
}
359+
metadataAttributes={
360+
canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}
361+
}
362+
onClick={
363+
canClickEntireCard
364+
? event => {
365+
selectionProps?.onChange();
366+
// Manually move focus to the native input (checkbox or radio button)
367+
event.currentTarget.querySelector('input')?.focus();
368+
}
369+
: undefined
370+
}
371+
>
372+
{visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (
373+
<div key={id || index} className={styles.section} style={{ width: `${width}%` }}>
374+
{header ? <div className={styles['section-header']}>{header}</div> : ''}
375+
{content ? <div className={styles['section-content']}>{content(item)}</div> : ''}
376+
</div>
377+
))}
378+
</Card>
379+
</li>
377380
);
378381
})}
379382
</ol>

‎src/cards/styles.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,18 @@
2323
}
2424
}
2525

26+
.card {
27+
display: flex;
28+
overflow-wrap: break-word;
29+
box-sizing: border-box;
30+
word-wrap: break-word;
31+
padding-block-start: 0;
32+
padding-inline-end: 0;
33+
padding-block-end: awsui.$space-grid-gutter;
34+
padding-inline-start: awsui.$space-grid-gutter;
35+
list-style: none;
36+
}
37+
2638
.list {
2739
display: flex;
2840
flex-wrap: wrap;

‎src/internal/components/card/index.tsx‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,40 +15,34 @@ export default function Card({
1515
className,
1616
header,
1717
description,
18-
innerMetadataAttributes,
1918
metadataAttributes,
2019
onClick,
21-
onFocus,
22-
role,
23-
tagName: TagName = 'div',
2420
disableContentPaddings,
2521
}: InternalCardProps) {
2622
const isRefresh = useVisualRefresh();
2723

2824
return (
29-
<TagName
30-
className={clsx(className, styles.root, {
31-
[styles['with-actions']]: !!actions,
32-
[styles.active]: active,
33-
})}
34-
onFocus={onFocus}
35-
role={role}
25+
<div
26+
className={clsx(
27+
className,
28+
styles.root,
29+
{
30+
[styles['with-actions']]: !!actions,
31+
[styles.active]: active,
32+
},
33+
isRefresh && styles.refresh
34+
)}
3635
{...metadataAttributes}
36+
onClick={onClick}
3737
>
38-
<div
39-
className={clsx(styles['card-inner'], isRefresh && styles.refresh)}
40-
{...innerMetadataAttributes}
41-
onClick={onClick}
42-
>
43-
<div className={styles.header}>
44-
<div className={styles['header-top-row']}>
45-
<div className={styles['header-inner']}>{header}</div>
46-
{actions && <div className={styles.actions}>{actions}</div>}
47-
</div>
48-
{description && <div className={styles.description}>{description}</div>}
38+
<div className={styles.header}>
39+
<div className={styles['header-top-row']}>
40+
<div className={styles['header-inner']}>{header}</div>
41+
{actions && <div className={styles.actions}>{actions}</div>}
4942
</div>
50-
<div className={clsx(styles.body, disableContentPaddings && styles['no-padding'])}>{children}</div>
43+
{description && <div className={styles.description}>{description}</div>}
5144
</div>
52-
</TagName>
45+
<div className={clsx(styles.body, disableContentPaddings && styles['no-padding'])}>{children}</div>
46+
</div>
5347
);
5448
}

‎src/internal/components/card/interfaces.ts‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3-
import React, { FocusEventHandler } from 'react';
3+
import React from 'react';
44

55
import { BaseComponentProps } from '../../base-component';
66

@@ -49,15 +49,7 @@ export interface InternalCardProps extends BaseComponentProps {
4949
*/
5050
onClick?: React.MouseEventHandler<HTMLElement>;
5151

52-
onFocus?: FocusEventHandler<HTMLElement>;
53-
54-
role?: string;
55-
56-
tagName?: 'li' | 'div';
57-
5852
disableContentPaddings?: boolean;
5953

6054
metadataAttributes?: Record<string, string | undefined>;
61-
62-
innerMetadataAttributes?: Record<string, string | undefined>;
6355
}

‎src/internal/components/card/styles.scss‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,7 @@
4646

4747
.root {
4848
@include styles.styles-reset();
49-
display: flex;
50-
overflow-wrap: break-word;
51-
word-wrap: break-word;
5249
box-sizing: border-box;
53-
margin-block: 0;
54-
margin-inline: 0;
55-
padding-block-start: 0;
56-
padding-block-end: awsui.$space-grid-gutter;
57-
padding-inline-start: awsui.$space-grid-gutter;
58-
padding-inline-end: 0;
59-
list-style: none;
60-
}
61-
62-
.card-inner {
6350
position: relative;
6451
background-color: awsui.$color-background-container-content;
6552
margin-block: 0;
@@ -92,7 +79,7 @@
9279
}
9380
}
9481

95-
.with-actions > .card-inner > .header > .header-top-row {
82+
.with-actions > .header > .header-top-row {
9683
display: flex;
9784
inline-size: 100%;
9885
justify-content: space-between;
@@ -104,12 +91,10 @@
10491
}
10592

10693
.active {
107-
> .card-inner {
108-
background-color: awsui.$color-background-item-selected;
109-
&::before {
110-
border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
111-
border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
112-
}
94+
background-color: awsui.$color-background-item-selected;
95+
&::before {
96+
border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
97+
border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
11398
}
11499
}
115100

0 commit comments

Comments
 (0)