@popsure/dirty-swan 0.66.13 → 0.66.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +5 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.js +1 -1
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.js.map +1 -1
- package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js +1 -1
- package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js.map +1 -1
- package/dist/esm/components/table/components/TableCell/TableCell.js +3 -2
- package/dist/esm/components/table/components/TableCell/TableCell.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx +1 -1
- package/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx +2 -2
- package/src/lib/components/table/components/TableCell/TableCell.module.scss +4 -10
- package/src/lib/components/table/components/TableCell/TableCell.tsx +1 -0
|
@@ -13,7 +13,7 @@ styleInject(css_248z);
|
|
|
13
13
|
var ButtonCell = function (_a) {
|
|
14
14
|
var _b;
|
|
15
15
|
var isSelected = _a.isSelected, onClick = _a.onClick, buttonCaption = _a.buttonCaption, price = _a.price, disabled = _a.disabled, className = _a.className, dataCy = _a.dataCy, dataTestId = _a.dataTestId;
|
|
16
|
-
return (jsx("div", { className: classNames("w100 d-flex fd-column ai-
|
|
16
|
+
return (jsx("div", { className: classNames("w100 d-flex fd-column ai-start jc-center gap8", className), "data-cy": dataCy, "data-testid": dataTestId, children: jsxs(Button, { className: classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, (_b = {},
|
|
17
17
|
_b[styles.selected] = isSelected,
|
|
18
18
|
_b[styles.withoutPrice] = !price,
|
|
19
19
|
_b[styles.withPrice] = !!price,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './ButtonCell.module.scss';\nimport { Button } from '../../../../button';\nimport { ReactNode } from 'react';\n\nexport type ButtonCellProps = {\n buttonCaption: ReactNode;\n disabled?: boolean;\n isSelected?: boolean;\n onClick: () => void;\n price?: ReactNode;\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n};\n\nexport const ButtonCell = ({\n isSelected,\n onClick,\n buttonCaption,\n price,\n disabled,\n className,\n dataCy,\n dataTestId,\n}: ButtonCellProps) => {\n return (\n <div\n className={\n classNames(\n \"w100 d-flex fd-column ai-
|
|
1
|
+
{"version":3,"file":"ButtonCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './ButtonCell.module.scss';\nimport { Button } from '../../../../button';\nimport { ReactNode } from 'react';\n\nexport type ButtonCellProps = {\n buttonCaption: ReactNode;\n disabled?: boolean;\n isSelected?: boolean;\n onClick: () => void;\n price?: ReactNode;\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n};\n\nexport const ButtonCell = ({\n isSelected,\n onClick,\n buttonCaption,\n price,\n disabled,\n className,\n dataCy,\n dataTestId,\n}: ButtonCellProps) => {\n return (\n <div\n className={\n classNames(\n \"w100 d-flex fd-column ai-start jc-center gap8\",\n className,\n )\n }\n data-cy={dataCy}\n data-testid={dataTestId}\n >\n <Button\n className={classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, {\n [styles.selected]: isSelected,\n [styles.withoutPrice]: !price,\n [styles.withPrice]: !!price,\n })}\n variant=\"filledWhite\"\n type=\"submit\"\n onClick={onClick}\n disabled={disabled}\n >\n {buttonCaption}\n {price && <span className=\"p-p\">{price}</span>}\n </Button>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;AAiBO,IAAM,UAAU,GAAG,UAAC,EAST,EAAA;;QARhB,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,UAAU,GAAA,EAAA,CAAA,UAAA;IAEV,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EACP,UAAU,CACR,+CAA+C,EAC/C,SAAS,CACV,EAAA,SAAA,EAEM,MAAM,EAAA,aAAA,EACF,UAAU,EAAA,QAAA,EAEvBC,IAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,MAAM,CAAC,UAAU,GAAA,EAAA,GAAA,EAAA;AACnE,gBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,UAAU;AAC7B,gBAAA,EAAA,CAAC,MAAM,CAAC,YAAY,CAAA,GAAG,CAAC,KAAK;AAC7B,gBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,CAAC,CAAC,KAAK;AAC3B,gBAAA,EAAA,EAAA,EACF,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAAA,CAEjB,aAAa,EACb,KAAK,IAAID,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,KAAK,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,CAAA,EAAA,CACvC,EAAA,CACL;AAEV;;;;"}
|
|
@@ -15,7 +15,7 @@ var CTACell = function (_a) {
|
|
|
15
15
|
var _b;
|
|
16
16
|
var title = _a.title, price = _a.price, icon = _a.icon, grey = _a.grey, narrow = _a.narrow, href = _a.href, buttonCaption = _a.buttonCaption, imageComponent = _a.imageComponent, className = _a.className, dataCy = _a.dataCy, dataTestId = _a.dataTestId, onClick = _a.onClick;
|
|
17
17
|
var renderedIcon = (jsx(IconRenderer, { icon: icon, imageComponent: imageComponent }));
|
|
18
|
-
return (jsxs("div", { className: classNames(className, "ta-
|
|
18
|
+
return (jsxs("div", { className: classNames(className, "ta-left"), "data-cy": dataCy, "data-testid": dataTestId, children: [jsxs("div", { className: "d-flex ai-center gap8", children: [renderedIcon, jsxs("p", { className: "p-h3", children: [title, price && jsxs("span", { className: "tc-purple-600", children: [" ", price] })] })] }), jsx(Button, __assign({}, onClick ? { onClick: onClick } : {
|
|
19
19
|
as: 'a',
|
|
20
20
|
href: href,
|
|
21
21
|
target: '_blank',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\nimport { Button } from '../../../../button';\n\nexport type CTACellProps = {\n title: ReactNode;\n price?: ReactNode;\n icon?: ReactNode;\n imageComponent?: (args: any) => JSX.Element;\n buttonCaption?: ReactNode;\n grey?: boolean;\n narrow?: boolean;\n href: string;\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n onClick?: () => void;\n};\n\nexport const CTACell = ({\n title,\n price,\n icon,\n grey,\n narrow,\n href,\n buttonCaption,\n imageComponent,\n className,\n dataCy,\n dataTestId,\n onClick,\n}: CTACellProps) => {\n const renderedIcon = (\n <IconRenderer icon={icon} imageComponent={imageComponent} />\n );\n\n return (\n <div\n className={classNames(className, \"ta-
|
|
1
|
+
{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\nimport { Button } from '../../../../button';\n\nexport type CTACellProps = {\n title: ReactNode;\n price?: ReactNode;\n icon?: ReactNode;\n imageComponent?: (args: any) => JSX.Element;\n buttonCaption?: ReactNode;\n grey?: boolean;\n narrow?: boolean;\n href: string;\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n onClick?: () => void;\n};\n\nexport const CTACell = ({\n title,\n price,\n icon,\n grey,\n narrow,\n href,\n buttonCaption,\n imageComponent,\n className,\n dataCy,\n dataTestId,\n onClick,\n}: CTACellProps) => {\n const renderedIcon = (\n <IconRenderer icon={icon} imageComponent={imageComponent} />\n );\n\n return (\n <div\n className={classNames(className, \"ta-left\")}\n data-cy={dataCy}\n data-testid={dataTestId}\n >\n <div className=\"d-flex ai-center gap8\">\n {renderedIcon}\n <p className=\"p-h3\">\n {title}\n {price && <span className=\"tc-purple-600\"> {price}</span>}\n </p>\n </div>\n\n <Button\n {...onClick ? { onClick } : {\n as: 'a',\n href: href,\n target: '_blank',\n rel: 'noopener noreferrer',\n }}\n className={classNames('mt16 w100 wmx3', {\n 'p-btn--primary': !grey,\n 'p-btn--secondary-grey': grey,\n [styles.narrow]: narrow,\n })}\n >\n {buttonCaption}\n </Button>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAsBO,IAAM,OAAO,GAAG,UAAC,EAaT,EAAA;;AAZb,IAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,YAAA,EACN,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA;AAEP,IAAA,IAAM,YAAY,IAChBA,GAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,EAAA,CAAI,CAC7D;IAED,QACEC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,EAAA,SAAA,EAClC,MAAM,iBACF,UAAU,EAAA,QAAA,EAAA,CAEvBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CACnC,YAAY,EACbA,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CAChB,KAAK,EACL,KAAK,IAAIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,KAAK,CAAA,EAAA,CAAQ,CAAA,EAAA,CACvD,CAAA,EAAA,CACA,EAEND,IAAC,MAAM,EAAA,QAAA,CAAA,EAAA,EACD,OAAO,GAAG,EAAE,OAAO,EAAA,OAAA,EAAE,GAAG;AAC1B,gBAAA,EAAE,EAAE,GAAG;AACP,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,GAAG,EAAE,qBAAqB;AAC3B,aAAA,EAAA,EACD,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAA,EAAA,GAAA;wBACpC,gBAAgB,EAAE,CAAC,IAAI;AACvB,wBAAA,uBAAuB,EAAE;;AACzB,oBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACvB,oBAAA,EAAA,EAAA,EAAA,QAAA,EAED,aAAa,EAAA,CAAA,CACP,CAAA,EAAA,CACL;AAEV;;;;"}
|
|
@@ -25,8 +25,8 @@ import '../../../button/index.js';
|
|
|
25
25
|
import '../../../cards/card/index.js';
|
|
26
26
|
import '../../../icon/icons/ChevronRight.js';
|
|
27
27
|
|
|
28
|
-
var css_248z = ".TableCell-module_th__2rjCU {\n vertical-align: middle;\n scroll-snap-align: end;\n width: 50%;\n padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n .TableCell-module_th__2rjCU {\n width: auto;\n scroll-snap-align: unset;\n }\n}\n.TableCell-module_thNavigation__qZ2sY {\n width: 100%;\n}\n@media (min-width: 34rem) {\n .TableCell-module_thNavigation__qZ2sY {\n width: auto;\n }\n}\n\n.TableCell-
|
|
29
|
-
var styles = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
|
|
28
|
+
var css_248z = ".TableCell-module_th__2rjCU {\n vertical-align: middle;\n scroll-snap-align: end;\n width: 50%;\n padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n .TableCell-module_th__2rjCU {\n width: auto;\n scroll-snap-align: unset;\n }\n}\n.TableCell-module_thNavigation__qZ2sY {\n width: 100%;\n}\n@media (min-width: 34rem) {\n .TableCell-module_thNavigation__qZ2sY {\n width: auto;\n }\n}\n\n.TableCell-module_headerCell__aVTIn {\n vertical-align: top;\n}\n\n.TableCell-module_fixedCell__cL3-m {\n position: sticky;\n left: 0;\n z-index: 2;\n padding-left: 0;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n position: sticky;\n left: 0;\n right: 0;\n z-index: 2;\n width: 100%;\n}";
|
|
29
|
+
var styles = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","headerCell":"TableCell-module_headerCell__aVTIn","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
|
|
30
30
|
styleInject(css_248z);
|
|
31
31
|
|
|
32
32
|
var TableCell = React__default.memo(function (_a) {
|
|
@@ -47,6 +47,7 @@ var TableCell = React__default.memo(function (_a) {
|
|
|
47
47
|
return (jsxs(Tag, __assign({}, scope, { className: classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, (_b = {
|
|
48
48
|
'ta-left': isFirstCellInRow
|
|
49
49
|
},
|
|
50
|
+
_b[styles.headerCell] = isHeader,
|
|
50
51
|
_b[styles.thNavigation] = isNavigation,
|
|
51
52
|
_b[styles.fixedCell] = isFirstCellInRow && colSpan < 1,
|
|
52
53
|
_b[styles.fixedCard] = cellProps.type === 'CARD',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\nimport { BaseCell } from './BaseCell/BaseCell';\nimport { TableCellData } from '../../types';\nimport { CTACell } from './CTACell/CTACell';\nimport { CardCell } from './CardCell/CardCell';\nimport { ButtonCell } from './ButtonCell/ButtonCell';\nimport React from 'react';\n\ntype ExtraTableCellProps = {\n isHeader?: boolean;\n isFirstCellInRow?: boolean;\n isTopLeftCell?: boolean;\n isNavigation?: boolean;\n isSelectedColumn?: boolean;\n selectedColumnPosition?: 'top' | 'bottom' | 'middle';\n imageComponent?: (args: any) => JSX.Element;\n isBelowDesktop?: boolean;\n};\n\nexport type TableCellProps = TableCellData & ExtraTableCellProps;\n\nconst TableCell = React.memo(\n ({\n isFirstCellInRow = false,\n isHeader = false,\n isNavigation = false,\n isSelectedColumn = false,\n selectedColumnPosition,\n isTopLeftCell = false,\n colSpan = 0,\n isBelowDesktop,\n ...cellProps\n }: TableCellProps) => {\n // prettier-ignore\n const Tag = isNavigation\n ? 'div'\n : isHeader || isFirstCellInRow ? 'th' : 'td';\n\n // prettier-ignore\n const thScope = isHeader\n ? 'col'\n : isFirstCellInRow ? 'row' : undefined;\n\n const scope = {\n scope: thScope,\n };\n\n return (\n <Tag\n {...scope}\n className={classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, {\n 'ta-left': isFirstCellInRow,\n [styles.thNavigation]: isNavigation,\n [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,\n [styles.fixedCard]: cellProps.type === 'CARD',\n [styles.selectedColumnTop]: selectedColumnPosition === 'top',\n [styles.selectedColumnBottom]: selectedColumnPosition === 'bottom',\n })}\n colSpan={isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan}\n >\n {!cellProps.type && (\n <BaseCell\n {...cellProps}\n fontVariant={\n isTopLeftCell\n ? 'TITLE'\n : cellProps.fontVariant ?? 'NORMAL'\n }\n />\n )}\n {cellProps.type === 'CTA' && <CTACell {...cellProps} />}\n {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}\n {cellProps.type === 'CARD' && <CardCell {...cellProps} />}\n </Tag>\n );\n }\n);\n\nexport { TableCell };\n"],"names":["React","_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\nimport { BaseCell } from './BaseCell/BaseCell';\nimport { TableCellData } from '../../types';\nimport { CTACell } from './CTACell/CTACell';\nimport { CardCell } from './CardCell/CardCell';\nimport { ButtonCell } from './ButtonCell/ButtonCell';\nimport React from 'react';\n\ntype ExtraTableCellProps = {\n isHeader?: boolean;\n isFirstCellInRow?: boolean;\n isTopLeftCell?: boolean;\n isNavigation?: boolean;\n isSelectedColumn?: boolean;\n selectedColumnPosition?: 'top' | 'bottom' | 'middle';\n imageComponent?: (args: any) => JSX.Element;\n isBelowDesktop?: boolean;\n};\n\nexport type TableCellProps = TableCellData & ExtraTableCellProps;\n\nconst TableCell = React.memo(\n ({\n isFirstCellInRow = false,\n isHeader = false,\n isNavigation = false,\n isSelectedColumn = false,\n selectedColumnPosition,\n isTopLeftCell = false,\n colSpan = 0,\n isBelowDesktop,\n ...cellProps\n }: TableCellProps) => {\n // prettier-ignore\n const Tag = isNavigation\n ? 'div'\n : isHeader || isFirstCellInRow ? 'th' : 'td';\n\n // prettier-ignore\n const thScope = isHeader\n ? 'col'\n : isFirstCellInRow ? 'row' : undefined;\n\n const scope = {\n scope: thScope,\n };\n\n return (\n <Tag\n {...scope}\n className={classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, {\n 'ta-left': isFirstCellInRow,\n [styles.headerCell]: isHeader,\n [styles.thNavigation]: isNavigation,\n [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,\n [styles.fixedCard]: cellProps.type === 'CARD',\n [styles.selectedColumnTop]: selectedColumnPosition === 'top',\n [styles.selectedColumnBottom]: selectedColumnPosition === 'bottom',\n })}\n colSpan={isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan}\n >\n {!cellProps.type && (\n <BaseCell\n {...cellProps}\n fontVariant={\n isTopLeftCell\n ? 'TITLE'\n : cellProps.fontVariant ?? 'NORMAL'\n }\n />\n )}\n {cellProps.type === 'CTA' && <CTACell {...cellProps} />}\n {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}\n {cellProps.type === 'CARD' && <CardCell {...cellProps} />}\n </Tag>\n );\n }\n);\n\nexport { TableCell };\n"],"names":["React","_jsxs","_jsx"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -40,11 +40,11 @@ export const CTACell = ({
|
|
|
40
40
|
|
|
41
41
|
return (
|
|
42
42
|
<div
|
|
43
|
-
className={classNames(className, "ta-
|
|
43
|
+
className={classNames(className, "ta-left")}
|
|
44
44
|
data-cy={dataCy}
|
|
45
45
|
data-testid={dataTestId}
|
|
46
46
|
>
|
|
47
|
-
<div className="d-flex
|
|
47
|
+
<div className="d-flex ai-center gap8">
|
|
48
48
|
{renderedIcon}
|
|
49
49
|
<p className="p-h3">
|
|
50
50
|
{title}
|
|
@@ -23,21 +23,15 @@
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
.headerCell {
|
|
27
|
+
vertical-align: top;
|
|
28
|
+
}
|
|
29
|
+
|
|
26
30
|
.fixedCell {
|
|
27
31
|
position: sticky;
|
|
28
32
|
left: 0;
|
|
29
33
|
z-index: 2;
|
|
30
34
|
padding-left: 0;
|
|
31
|
-
|
|
32
|
-
&:after {
|
|
33
|
-
content: '';
|
|
34
|
-
position: absolute;
|
|
35
|
-
top: 0;
|
|
36
|
-
bottom: 0;
|
|
37
|
-
right: 0;
|
|
38
|
-
width: 1px;
|
|
39
|
-
background-color: $ds-neutral-100;
|
|
40
|
-
}
|
|
41
35
|
}
|
|
42
36
|
|
|
43
37
|
.selectedColumnTop {
|
|
@@ -52,6 +52,7 @@ const TableCell = React.memo(
|
|
|
52
52
|
{...scope}
|
|
53
53
|
className={classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, {
|
|
54
54
|
'ta-left': isFirstCellInRow,
|
|
55
|
+
[styles.headerCell]: isHeader,
|
|
55
56
|
[styles.thNavigation]: isNavigation,
|
|
56
57
|
[styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,
|
|
57
58
|
[styles.fixedCard]: cellProps.type === 'CARD',
|