Skip to content

Commit

Permalink
Merge branch 'master' of github.com:Telefonica/mistica-web into WEB-1929
Browse files Browse the repository at this point in the history 
-expose-text-presets-as-css-vars
  • Loading branch information
@marcoskolodny
marcoskolodny committed Jul 23, 2024
2 parents bdd4883 + 938b275 commit 0b69a61
Show file tree
Hide file tree
Showing 15 changed files with 151 additions and 63 deletions.
Binary file added ...eenshot-test-tsx-table-desktop-collapse-rows-with-row-header-index-2-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...age_snapshots__/table-screenshot-test-tsx-table-mobile-collapse-rows-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots__/table-screenshot-test-tsx-table-mobile-collapse-rows-boxed-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ..._/table-screenshot-test-tsx-table-mobile-collapse-rows-boxed-inverse-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shots__/table-screenshot-test-tsx-table-mobile-collapse-rows-inverse-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...le-screenshot-test-tsx-table-tablet-collapse-rows-boxed-with-actions-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...hot-test-tsx-table-tablet-collapse-rows-boxed-with-hide-headers-true-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ot-test-tsx-table-tablet-collapse-rows-boxed-with-row-header-index-0-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...__/table-screenshot-test-tsx-table-tablet-collapse-rows-with-actions-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...reenshot-test-tsx-table-tablet-collapse-rows-with-row-header-index-0-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...reenshot-test-tsx-table-tablet-collapse-rows-with-row-header-index-2-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions src/__screenshot_tests__/table-screenshot-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,14 @@ const cases = [
fullPageScreenshot: false,
},
],
[
'desktop collapse-rows with rowHeaderIndex = 2',
{
device: 'DESKTOP',
args: {numItems: 6, responsive: 'collapse-rows', rowHeaderIndex: 2},
fullPageScreenshot: true,
},
],
[
'desktop boxed with actions',
{
Expand Down Expand Up @@ -225,6 +233,22 @@ const cases = [
fullPageScreenshot: true,
},
],
[
'tablet collapse-rows with rowHeaderIndex = 0',
{
device: 'TABLET',
args: {numItems: 6, responsive: 'collapse-rows', withRowHeader: true, rowHeaderIndex: 0},
fullPageScreenshot: true,
},
],
[
'tablet collapse-rows with rowHeaderIndex = 2',
{
device: 'TABLET',
args: {numItems: 6, responsive: 'collapse-rows', withRowHeader: true, rowHeaderIndex: 2},
fullPageScreenshot: true,
},
],
[
'tablet boxed with actions',
{
Expand All @@ -249,6 +273,20 @@ const cases = [
fullPageScreenshot: true,
},
],
[
'tablet collapse-rows boxed with rowHeaderIndex = 0',
{
device: 'TABLET',
args: {
numItems: 6,
boxed: true,
responsive: 'collapse-rows',
withRowHeader: true,
rowHeaderIndex: 0,
},
fullPageScreenshot: true,
},
],
] as const;

test.each(cases)('Table %s', async (_name, {device, args, fullPageScreenshot}) => {
Expand Down
8 changes: 8 additions & 0 deletions src/__stories__/table-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ type Args = {
columnWidth: Array<number | string>;
withActions: boolean;
hideHeaders: 'true' | 'false' | 'mobile' | 'desktop';
withRowHeader: boolean;
rowHeaderIndex: number;
};

export const Default: StoryComponent<Args> = ({
Expand All @@ -63,6 +65,8 @@ export const Default: StoryComponent<Args> = ({
columnWidth,
withActions,
hideHeaders,
withRowHeader,
rowHeaderIndex,
}) => {
return (
<ResponsiveLayout isInverse={inverse}>
Expand All @@ -83,6 +87,7 @@ export const Default: StoryComponent<Args> = ({
columnTextAlign={columnTextAlign}
columnWidth={columnWidth}
rowVerticalAlign={rowVerticalAlign}
rowHeaderIndex={withRowHeader ? rowHeaderIndex : undefined}
content={foodList.slice(0, numItems).map((row, index) => {
const actionsCount = withActions ? (index + 1) % 3 : 0;
return actionsCount === 0
Expand Down Expand Up @@ -124,6 +129,8 @@ Default.args = {
columnWidth: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
withActions: false,
hideHeaders: 'false',
withRowHeader: false,
rowHeaderIndex: 0,
};
Default.argTypes = {
responsive: {
Expand All @@ -144,4 +151,5 @@ Default.argTypes = {
options: ['false', 'true', 'mobile', 'desktop'],
control: {type: 'select'},
},
rowHeaderIndex: {if: {arg: 'withRowHeader'}},
};
29 changes: 26 additions & 3 deletions src/table.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,15 +122,15 @@ globalStyle(`${table} th, ${table} td`, {
height: ROW_MIN_HEIGHT, // height behaves like a min-height in table layout
});

globalStyle(`${boxed} th`, {
globalStyle(`${boxed} thead th`, {
'@media': {
[mq.desktopOrBigger]: {
paddingTop: 16 + BOXED_PADDING_Y_DESKTOP,
},
},
});

globalStyle(`${table} tr:last-child td`, {
globalStyle(`${table} tbody tr:last-child td, ${table} tbody tr:last-child th`, {
borderBottom: 'none',
});

Expand All @@ -145,6 +145,24 @@ globalStyle(
}
);

globalStyle(`${collapsedRowsInMobile} tr`, {
'@media': {
[mq.tabletOrSmaller]: {
// Using flexbox so we can move the row's header to the top of the row
display: 'flex',
flexDirection: 'column',
},
},
});

export const collapsedRowHeaderItem = style({
'@media': {
[mq.tabletOrSmaller]: {
order: -1,
},
},
});

export const mobileCellHeading = style({
paddingBottom: 4,
'@media': {
Expand All @@ -163,7 +181,7 @@ export const collapsedRowTitle = style({
},
});

globalStyle(`${collapsedRowsInMobile} tbody td`, {
globalStyle(`${collapsedRowsInMobile} tbody td, ${collapsedRowsInMobile} tbody th`, {
'@media': {
[mq.tabletOrSmaller]: {
verticalAlign: 'initial',
Expand All @@ -177,6 +195,11 @@ globalStyle(`${collapsedRowsInMobile} tbody td`, {
},
});

globalStyle(`${table} tbody th`, {
// Weight in th is bold if not specified, and we don't want this in the table's body
fontWeight: 'inherit',
});

export const rowFirstItem = style({});
export const rowLastItem = style({});
export const rowLastCollapsedItem = style({});
Expand Down
139 changes: 79 additions & 60 deletions src/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ type TableProps = {
hideHeaders?: boolean | 'desktop' | 'mobile';
/** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
dataAttributes?: DataAttributes;
rowHeaderIndex?: number;
'aria-label'?: string;
'aria-labelledby'?: string;
'aria-describedby'?: string;
Expand Down Expand Up @@ -115,6 +116,7 @@ export const Table = React.forwardRef(
columnWidth,
hideHeaders,
scrollOverResponsiveLayout,
rowHeaderIndex,
...otherProps
}: TableProps,
ref: React.Ref<HTMLDivElement>
Expand Down Expand Up @@ -205,70 +207,87 @@ export const Table = React.forwardRef(
return (
// Add position relative because in collapse-rows mode, actions are positioned absolutely in the row
<tr key={rowIdx} style={{position: 'relative'}}>
{rowCells.map((cell, idx) => (
<td
key={idx}
className={classNames(styles.verticalAlign[rowVerticalAlign], {
[styles.rowFirstItem]: idx === 0,
[styles.rowLastItem]:
idx === rowCells.length - 1 && !hasActionsColumn,
[styles.rowLastCollapsedItem]:
idx === rowCells.length - 1 && collapsedRowsMode,
})}
style={{
// add space between top actions and content
marginRight:
collapsedRowsMode && rowActionsList.length
? `calc(${actionsElementWidth} + 8px)`
: undefined,
}}
>
{/**
* In collapsedRowsMode, we render the row heading text before every cell content, except for the first cell
* of every row, which is rendered with a medium weight font, as it's the row title.
* */}
{idx !== 0 &&
collapsedRowsMode &&
heading[idx] &&
!hideHeadersInMobile && (
// this is aria-hidden because screen readers already read the column heading from the th
<div className={styles.mobileCellHeading} aria-hidden>
<Text1 medium color={vars.colors.textSecondary}>
{heading[idx]}
</Text1>
</div>
)}
{rowCells.map((cell, idx) => {
const isCollapsedRowsLastItem =
rowHeaderIndex === rowCells.length - 1
? idx === rowCells.length - 2 || rowCells.length === 1
: idx === rowCells.length - 1;

<Text
desktopSize={textProps.text2.desktopSize}
desktopLineHeight={textProps.text2.desktopLineHeight}
// Use Text4 size/lineHeight for row's title when collapsed-row mode is used
{...(idx === 0 && collapsedRowsMode
? {
mobileSize: textProps.text4.mobileSize,
mobileLineHeight: textProps.text4.mobileLineHeight,
}
: {
mobileSize: textProps.text2.mobileSize,
mobileLineHeight: textProps.text2.mobileLineHeight,
})}
as="div"
wordBreak={false}
const CellComponent = idx === rowHeaderIndex ? 'th' : 'td';

return (
<CellComponent
className={classNames(
styles.verticalAlign[rowVerticalAlign],
{
[styles.rowFirstItem]: idx === 0,
[styles.rowLastItem]:
idx === rowCells.length - 1 && !hasActionsColumn,
[styles.rowLastCollapsedItem]:
isCollapsedRowsLastItem && collapsedRowsMode,
[styles.collapsedRowHeaderItem]:
idx === rowHeaderIndex && collapsedRowsMode,
}
)}
style={{
// add space between top actions and content
marginRight:
collapsedRowsMode && rowActionsList.length
? `calc(${actionsElementWidth} + 8px)`
: undefined,
}}
scope={idx === rowHeaderIndex ? 'row' : undefined}
>
<div
className={classNames(
styles.cellTextAlign[getColumnTextAlign(idx)],
{
[styles.collapsedRowTitle]:
idx === 0 && collapsedRowsMode,
}
{/**
* In collapsedRowsMode, we render the row heading text before every cell content, except for the first cell
* of every row, which is rendered with a medium weight font, as it's the row title.
* */}
{idx !== rowHeaderIndex &&
collapsedRowsMode &&
heading[idx] &&
!hideHeadersInMobile && (
// this is aria-hidden because screen readers already read the column heading from the th
<div className={styles.mobileCellHeading} aria-hidden>
<Text1 medium color={vars.colors.textSecondary}>
{heading[idx]}
</Text1>
</div>
)}

<Text
desktopSize={textProps.text2.desktopSize}
desktopLineHeight={textProps.text2.desktopLineHeight}
// Use Text4 size/lineHeight for row's title when collapsed-row mode is used
{...(idx === rowHeaderIndex && collapsedRowsMode
? {
mobileSize: textProps.text4.mobileSize,
mobileLineHeight:
textProps.text4.mobileLineHeight,
}
: {
mobileSize: textProps.text2.mobileSize,
mobileLineHeight:
textProps.text2.mobileLineHeight,
})}
as="div"
wordBreak={false}
>
{cell}
</div>
</Text>
</td>
))}
<div
className={classNames(
styles.cellTextAlign[getColumnTextAlign(idx)],
{
[styles.collapsedRowTitle]:
idx === rowHeaderIndex &&
collapsedRowsMode,
}
)}
>
{cell}
</div>
</Text>
</CellComponent>
);
})}

{rowActionsList.length > 0 ? (
<td
Expand Down

0 comments on commit 0b69a61

Please sign in to comment.