@popsure/dirty-swan 0.61.1 → 0.61.3
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 +6 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/cards/card/index.d.ts +2 -1
- package/dist/cjs/lib/components/cards/card/index.stories.d.ts +2 -1
- package/dist/esm/{TableSection-442941de.js → TableSection-cf3bbf3d.js} +1 -1
- package/dist/esm/{TableSection-442941de.js.map → TableSection-cf3bbf3d.js.map} +1 -1
- package/dist/esm/components/cards/card/index.js +6 -5
- package/dist/esm/components/cards/card/index.js.map +1 -1
- package/dist/esm/components/cards/card/index.stories.js +2 -1
- package/dist/esm/components/cards/card/index.stories.js.map +1 -1
- package/dist/esm/components/table/Table.js +1 -1
- package/dist/esm/components/table/Table.stories.js +1 -1
- package/dist/esm/components/table/Table.test.js +1 -1
- package/dist/esm/components/table/components/TableContents/TableContents.js +1 -1
- package/dist/esm/components/table/components/TableContents/TableContents.test.js +1 -1
- package/dist/esm/components/table/components/TableSection/TableSection.js +1 -1
- package/dist/esm/components/table/components/TableSection/TableSection.test.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/lib/components/cards/card/index.d.ts +2 -1
- package/dist/esm/lib/components/cards/card/index.stories.d.ts +2 -1
- package/package.json +1 -1
- package/src/lib/components/cards/card/index.stories.tsx +18 -0
- package/src/lib/components/cards/card/index.tsx +6 -2
- package/src/lib/components/cards/card/style.module.scss +8 -3
|
@@ -32,7 +32,8 @@ type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
|
|
|
32
32
|
showActionIcon?: boolean;
|
|
33
33
|
verticalAlignment?: VerticalAlignmentType;
|
|
34
34
|
variant?: CardVariant;
|
|
35
|
+
disabled?: boolean;
|
|
35
36
|
};
|
|
36
37
|
export type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> & Omit<ComponentProps<E>, keyof CardOwnProps<E>>;
|
|
37
|
-
declare const Card: <E extends ElementType = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, variant, ...rest }: CardProps<E>) => JSX.Element;
|
|
38
|
+
declare const Card: <E extends ElementType = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, variant, disabled, ...rest }: CardProps<E>) => JSX.Element;
|
|
38
39
|
export { Card };
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { CardProps } from '.';
|
|
3
3
|
declare const story: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: <E extends import("react").ElementType = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, variant, ...rest }: CardProps<E>) => JSX.Element;
|
|
5
|
+
component: <E extends import("react").ElementType = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, variant, disabled, ...rest }: CardProps<E>) => JSX.Element;
|
|
6
6
|
argTypes: {
|
|
7
7
|
as: {
|
|
8
8
|
control: string;
|
|
@@ -84,6 +84,7 @@ export declare const CardStory: {
|
|
|
84
84
|
};
|
|
85
85
|
export declare const CardVariants: ({ description, onClick, title, }: CardProps) => JSX.Element;
|
|
86
86
|
export declare const CardAsOtherComponents: () => JSX.Element;
|
|
87
|
+
export declare const CardDisabledStates: () => JSX.Element;
|
|
87
88
|
export declare const CardDensities: () => JSX.Element;
|
|
88
89
|
export declare const CardsWithIcons: ({ title }: CardProps) => JSX.Element;
|
|
89
90
|
export declare const CardWithOnClickAction: ({ children, title, }: CardProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableSection-
|
|
1
|
+
{"version":3,"file":"TableSection-cf3bbf3d.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n cellId?: string;\n colSpan?: number;\n modalTitle?: ReactNode;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n | BaseCellData\n | CTACellData\n | ButtonCellData\n | CardCellData;\n\nexport const isBaseCell = (\n tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n title?: string;\n icon?: ReactNode;\n};\n\nexport type ModalData = {\n title?: ReactNode;\n body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n section?: TableSectionType;\n rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n CellReplacements,\n isBaseCell,\n ModalFunction,\n TableCellData,\n TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n className?: string;\n tableCellRows: TableCellRowData[];\n hideColumns?: number[];\n hideRows?: number[];\n hideHeader?: boolean;\n openModal?: ModalFunction;\n title: string;\n width?: number | string;\n cellReplacements?: CellReplacements;\n imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n className,\n tableCellRows,\n hideColumns = [],\n hideRows = [],\n hideHeader,\n openModal,\n title,\n width,\n cellReplacements,\n imageComponent,\n}: TableSectionProps) => {\n const headerRow = tableCellRows?.[0];\n const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\n\n const getModalTitleFromColumnHeader = (cellIndex: number) => {\n const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n let titleFromColumn;\n\n switch (firstCellInColumn.type) {\n case 'BUTTON':\n titleFromColumn = firstCellInColumn.buttonCaption;\n break;\n case 'CTA':\n titleFromColumn = firstCellInColumn.title;\n break;\n case undefined:\n titleFromColumn = firstCellInColumn.text || '';\n break;\n }\n\n return titleFromColumn;\n };\n\n const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n const firstCellInRow = currentRow?.[0];\n const titleFromRow =\n (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n return titleFromRow;\n };\n\n const isVisibleColumn = useCallback(\n (cellIndex: number) => !hideColumns.includes(cellIndex),\n [hideColumns]\n );\n\n const isVisibleRow = useCallback(\n (rowIndex: number) => !hideRows.includes(rowIndex),\n [hideRows]\n );\n\n return (\n <table\n className={classNames(className, 'w100', styles.table)}\n width={width}\n >\n <caption className=\"sr-only\">{title}</caption>\n\n {headerRow && (\n <thead className={hideHeader ? 'sr-only' : ''}>\n <tr>\n {headerRow.map((tableCellData, cellIndex) => {\n const isFirstCellInRow = cellIndex === 0;\n const cellReplacementData =\n (tableCellData.cellId &&\n cellReplacements?.[tableCellData.cellId]) ||\n {};\n\n const cellProps = {\n ...tableCellData,\n ...cellReplacementData,\n ...{\n openModal,\n modalTitle:\n (isBaseCell(tableCellData) && tableCellData.text) ||\n getModalTitleFromColumnHeader(cellIndex),\n align: isFirstCellInRow ? 'left' : 'center',\n },\n } as TableCellData;\n\n return (\n isVisibleColumn(cellIndex) && (\n <TableCell\n key={cellIndex}\n isBelowDesktop={isBelowDesktop}\n isHeader\n isFirstCellInRow={isFirstCellInRow}\n isTopLeftCell={isFirstCellInRow}\n {...cellProps}\n imageComponent={imageComponent}\n />\n )\n );\n })}\n </tr>\n </thead>\n )}\n\n <tbody>\n {tableCellRows.map(\n (row, rowIndex) =>\n rowIndex > 0 && isVisibleRow(rowIndex) && (\n <tr key={rowIndex} className={styles.tr}>\n {row.map((tableCellData, cellIndex) => {\n const key = `${rowIndex}-${cellIndex}`;\n const isFirstCellInRow = cellIndex === 0;\n const titleFromRow = getModalTitleFromRowHeader(row);\n\n const cellReplacementData =\n (tableCellData.cellId &&\n cellReplacements?.[tableCellData.cellId]) ||\n {};\n\n const cellProps = {\n ...tableCellData,\n ...cellReplacementData,\n ...{\n openModal,\n modalTitle: tableCellData?.modalTitle || titleFromRow,\n align: isFirstCellInRow ? 'left' : 'center',\n },\n } as TableCellData;\n\n return (\n !hideColumns.includes(cellIndex) && (\n <TableCell\n isBelowDesktop={isBelowDesktop}\n isFirstCellInRow={isFirstCellInRow}\n key={key}\n {...cellProps}\n imageComponent={imageComponent}\n />\n )\n );\n })}\n </tr>\n )\n )}\n </tbody>\n </table>\n );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -6,26 +6,27 @@ import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
|
|
|
6
6
|
import 'react';
|
|
7
7
|
import '../../icon/IconWrapper/IconWrapper.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ".style-module_border-strong-default__3_zF3 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-strong-hover__2gkuG {\n border: 1px solid #919199;\n}\n\n.style-module_border-strong-active__3BFbj {\n border: 1px solid #26262e;\n}\n\n.style-module_border-medium-default__21dIE {\n border: 1px solid #e7e7ed;\n}\n\n.style-module_border-medium-hover__Pq6pQ {\n border: 1px solid #b8b8c0;\n}\n\n.style-module_border-medium-active__uLwlN {\n border: 1px solid #3f3f47;\n}\n\n.style-module_border-soft-default__398BS {\n border: 1px solid #f2f2f8;\n}\n\n.style-module_border-soft-hover__30OW0 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-soft-active__eUC5s {\n border: 1px solid #919199;\n}\n\n.style-module_border-focus__28f29 {\n border: 2px solid #26262e;\n}\n\n.style-module_wrapper__35C6V {\n background-color: #fff;\n border: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n.style-module_wrapper--default__NYcwG {\n background-color: #fff;\n}\n.style-module_wrapper--defaultNoShadow__2x-zI {\n border: 1px solid #f2f2f8;\n}\n.style-module_wrapper--transparent__1M1sg {\n background-color: transparent;\n}\n.style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #d2d2d9;\n}\n.style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n}\n.style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n}\n\n.style-module_button__P-UIa {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n border-radius: 8px;\n border: 1px solid transparent;\n outline: 1px solid transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--default__NYcwG {\n border: 1px solid #d2d2d9;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--transparent__1M1sg {\n background-color: #f9f9fd;\n border-color: transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #26262e;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n border-color: #B8B4F3;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n border-color: #F2B873;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper__35C6V {\n border-color: #26262e;\n box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper--default__NYcwG {\n border-color: #26262e;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper--outline__3fBDi {\n border-color: #26262e;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper--transparent__1M1sg {\n background-color: #f2f2f8;\n}\n.style-module_button__P-UIa:active .style-module_wrapper__35C6V {\n border-color: #b8b8c0;\n box-shadow: inset 0 0 0 1px #b8b8c0;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--outline__3fBDi {\n border-color: #26262e;\n box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--transparent__1M1sg {\n background-color: #f2f2f8;\n border-color: transparent;\n box-shadow: none;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--primary__Sulin {\n border-color: #F2B873;\n box-shadow: inset 0 0 0 1px #F2B873;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--secondary__1l7bB {\n border-color: #8883D8;\n box-shadow: inset 0 0 0 1px #8883D8;\n}\n@media (pointer: coarse) {\n .style-module_button__P-UIa:hover .style-module_wrapper__35C6V, .style-module_button__P-UIa:active .style-module_wrapper__35C6V {\n background-color: #fff;\n border: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--default__NYcwG, .style-module_button__P-UIa:active .style-module_wrapper--default__NYcwG {\n background-color: #fff;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--defaultNoShadow__2x-zI, .style-module_button__P-UIa:active .style-module_wrapper--defaultNoShadow__2x-zI {\n border: 1px solid #f2f2f8;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--transparent__1M1sg, .style-module_button__P-UIa:active .style-module_wrapper--transparent__1M1sg {\n background-color: transparent;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--outline__3fBDi, .style-module_button__P-UIa:active .style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #d2d2d9;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--secondary__1l7bB, .style-module_button__P-UIa:active .style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--primary__Sulin, .style-module_button__P-UIa:active .style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n }\n}\n\n.style-module_smallPadding__19rsl {\n padding: 20px !important;\n}\n\n.style-module_icon__15X1c {\n margin-right: 12px;\n color: #26262e;\n}\n.style-module_iconDensity--small__3JnzO {\n margin-right: 14px;\n}\n.style-module_iconDensity--medium__2TmAl {\n margin-right: 16px;\n}\n.style-module_iconDensity--large__1YzHv {\n margin-right: 20px;\n}\n\n.style-module_actionIcon__3pnwR {\n color: #26262e;\n margin-left: 12px;\n}\n.style-module_actionIconDensity--small__37jvs {\n margin-right: 14px;\n}\n.style-module_actionIconDensity--medium__3SnW2 {\n margin-right: 16px;\n}\n.style-module_actionIconDensity--large__mZD03 {\n margin-right: 20px;\n}\n\n.style-module_description__ksrnP {\n color: #696971;\n}\n.style-module_description--primary__2h0cB {\n color: #3f3f47;\n}";
|
|
10
|
-
var styles = {"border-strong-default":"style-module_border-strong-default__3_zF3","border-strong-hover":"style-module_border-strong-hover__2gkuG","border-strong-active":"style-module_border-strong-active__3BFbj","border-medium-default":"style-module_border-medium-default__21dIE","border-medium-hover":"style-module_border-medium-hover__Pq6pQ","border-medium-active":"style-module_border-medium-active__uLwlN","border-soft-default":"style-module_border-soft-default__398BS","border-soft-hover":"style-module_border-soft-hover__30OW0","border-soft-active":"style-module_border-soft-active__eUC5s","border-focus":"style-module_border-focus__28f29","wrapper":"style-module_wrapper__35C6V","wrapper--default":"style-module_wrapper--default__NYcwG","wrapper--defaultNoShadow":"style-module_wrapper--defaultNoShadow__2x-zI","wrapper--transparent":"style-module_wrapper--transparent__1M1sg","wrapper--outline":"style-module_wrapper--outline__3fBDi","wrapper--secondary":"style-module_wrapper--secondary__1l7bB","wrapper--primary":"style-module_wrapper--primary__Sulin","button":"style-module_button__P-UIa","smallPadding":"style-module_smallPadding__19rsl","icon":"style-module_icon__15X1c","iconDensity--small":"style-module_iconDensity--small__3JnzO","iconDensity--medium":"style-module_iconDensity--medium__2TmAl","iconDensity--large":"style-module_iconDensity--large__1YzHv","actionIcon":"style-module_actionIcon__3pnwR","actionIconDensity--small":"style-module_actionIconDensity--small__37jvs","actionIconDensity--medium":"style-module_actionIconDensity--medium__3SnW2","actionIconDensity--large":"style-module_actionIconDensity--large__mZD03","description":"style-module_description__ksrnP","description--primary":"style-module_description--primary__2h0cB"};
|
|
9
|
+
var css_248z = ".style-module_border-strong-default__3_zF3 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-strong-hover__2gkuG {\n border: 1px solid #919199;\n}\n\n.style-module_border-strong-active__3BFbj {\n border: 1px solid #26262e;\n}\n\n.style-module_border-medium-default__21dIE {\n border: 1px solid #e7e7ed;\n}\n\n.style-module_border-medium-hover__Pq6pQ {\n border: 1px solid #b8b8c0;\n}\n\n.style-module_border-medium-active__uLwlN {\n border: 1px solid #3f3f47;\n}\n\n.style-module_border-soft-default__398BS {\n border: 1px solid #f2f2f8;\n}\n\n.style-module_border-soft-hover__30OW0 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-soft-active__eUC5s {\n border: 1px solid #919199;\n}\n\n.style-module_border-focus__28f29 {\n border: 2px solid #26262e;\n}\n\n.style-module_wrapper__35C6V {\n background-color: #fff;\n border: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n.style-module_wrapper--default__NYcwG {\n background-color: #fff;\n}\n.style-module_wrapper--defaultNoShadow__2x-zI {\n border: 1px solid #f2f2f8;\n}\n.style-module_wrapper--transparent__1M1sg {\n background-color: transparent;\n}\n.style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #d2d2d9;\n}\n.style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n}\n.style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n}\n\n.style-module_button__P-UIa {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n border-radius: 8px;\n border: 1px solid transparent;\n outline: 1px solid transparent;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--default__NYcwG {\n border: 1px solid #d2d2d9;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--transparent__1M1sg {\n background-color: #f9f9fd;\n border-color: transparent;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n border-color: #B8B4F3;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):hover .style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n border-color: #F2B873;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):focus-visible .style-module_wrapper__35C6V {\n border-color: #26262e;\n box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):focus-visible .style-module_wrapper--default__NYcwG {\n border-color: #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):focus-visible .style-module_wrapper--outline__3fBDi {\n border-color: #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):focus-visible .style-module_wrapper--transparent__1M1sg {\n background-color: #f2f2f8;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper__35C6V {\n border-color: #b8b8c0;\n box-shadow: inset 0 0 0 1px #b8b8c0;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper--outline__3fBDi {\n border-color: #26262e;\n box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper--transparent__1M1sg {\n background-color: #f2f2f8;\n border-color: transparent;\n box-shadow: none;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper--primary__Sulin {\n border-color: #F2B873;\n box-shadow: inset 0 0 0 1px #F2B873;\n}\n.style-module_button__P-UIa:not(.style-module_buttonDisabled__3wmX3):active .style-module_wrapper--secondary__1l7bB {\n border-color: #8883D8;\n box-shadow: inset 0 0 0 1px #8883D8;\n}\n.style-module_buttonDisabled__3wmX3 {\n cursor: not-allowed;\n opacity: 0.6;\n}\n@media (pointer: coarse) {\n .style-module_button__P-UIa:hover .style-module_wrapper__35C6V, .style-module_button__P-UIa:active .style-module_wrapper__35C6V {\n background-color: #fff;\n border: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--default__NYcwG, .style-module_button__P-UIa:active .style-module_wrapper--default__NYcwG {\n background-color: #fff;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--defaultNoShadow__2x-zI, .style-module_button__P-UIa:active .style-module_wrapper--defaultNoShadow__2x-zI {\n border: 1px solid #f2f2f8;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--transparent__1M1sg, .style-module_button__P-UIa:active .style-module_wrapper--transparent__1M1sg {\n background-color: transparent;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--outline__3fBDi, .style-module_button__P-UIa:active .style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #d2d2d9;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--secondary__1l7bB, .style-module_button__P-UIa:active .style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n }\n .style-module_button__P-UIa:hover .style-module_wrapper--primary__Sulin, .style-module_button__P-UIa:active .style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n }\n}\n\n.style-module_smallPadding__19rsl {\n padding: 20px !important;\n}\n\n.style-module_icon__15X1c {\n margin-right: 12px;\n color: #26262e;\n}\n.style-module_iconDensity--small__3JnzO {\n margin-right: 14px;\n}\n.style-module_iconDensity--medium__2TmAl {\n margin-right: 16px;\n}\n.style-module_iconDensity--large__1YzHv {\n margin-right: 20px;\n}\n\n.style-module_actionIcon__3pnwR {\n color: #26262e;\n margin-left: 12px;\n}\n.style-module_actionIconDensity--small__37jvs {\n margin-right: 14px;\n}\n.style-module_actionIconDensity--medium__3SnW2 {\n margin-right: 16px;\n}\n.style-module_actionIconDensity--large__mZD03 {\n margin-right: 20px;\n}\n\n.style-module_description__ksrnP {\n color: #696971;\n}\n.style-module_description--primary__2h0cB {\n color: #3f3f47;\n}";
|
|
10
|
+
var styles = {"border-strong-default":"style-module_border-strong-default__3_zF3","border-strong-hover":"style-module_border-strong-hover__2gkuG","border-strong-active":"style-module_border-strong-active__3BFbj","border-medium-default":"style-module_border-medium-default__21dIE","border-medium-hover":"style-module_border-medium-hover__Pq6pQ","border-medium-active":"style-module_border-medium-active__uLwlN","border-soft-default":"style-module_border-soft-default__398BS","border-soft-hover":"style-module_border-soft-hover__30OW0","border-soft-active":"style-module_border-soft-active__eUC5s","border-focus":"style-module_border-focus__28f29","wrapper":"style-module_wrapper__35C6V","wrapper--default":"style-module_wrapper--default__NYcwG","wrapper--defaultNoShadow":"style-module_wrapper--defaultNoShadow__2x-zI","wrapper--transparent":"style-module_wrapper--transparent__1M1sg","wrapper--outline":"style-module_wrapper--outline__3fBDi","wrapper--secondary":"style-module_wrapper--secondary__1l7bB","wrapper--primary":"style-module_wrapper--primary__Sulin","button":"style-module_button__P-UIa","buttonDisabled":"style-module_buttonDisabled__3wmX3","smallPadding":"style-module_smallPadding__19rsl","icon":"style-module_icon__15X1c","iconDensity--small":"style-module_iconDensity--small__3JnzO","iconDensity--medium":"style-module_iconDensity--medium__2TmAl","iconDensity--large":"style-module_iconDensity--large__1YzHv","actionIcon":"style-module_actionIcon__3pnwR","actionIconDensity--small":"style-module_actionIconDensity--small__37jvs","actionIconDensity--medium":"style-module_actionIconDensity--medium__3SnW2","actionIconDensity--large":"style-module_actionIconDensity--large__mZD03","description":"style-module_description__ksrnP","description--primary":"style-module_description--primary__2h0cB"};
|
|
11
11
|
styleInject(css_248z);
|
|
12
12
|
|
|
13
13
|
var cardDefaultAs = 'section';
|
|
14
14
|
var Card = function (_a) {
|
|
15
15
|
var _b, _c;
|
|
16
|
-
var as = _a.as, children = _a.children, classNames$1 = _a.classNames, _d = _a.density, density = _d === void 0 ? 'medium' : _d, description = _a.description, _e = _a.descriptionVariant, descriptionVariant = _e === void 0 ? 'large' : _e, _f = _a.dropShadow, dropShadow = _f === void 0 ? true : _f, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _g = _a.titleVariant, titleVariant = _g === void 0 ? 'large' : _g, showActionIcon = _a.showActionIcon, _h = _a.verticalAlignment, verticalAlignment = _h === void 0 ? 'center' : _h, _j = _a.variant, variant = _j === void 0 ? 'default' : _j, rest = __rest(_a, ["as", "children", "classNames", "density", "description", "descriptionVariant", "dropShadow", "icon", "label", "onClick", "actionIcon", "title", "titleVariant", "showActionIcon", "verticalAlignment", "variant"]);
|
|
16
|
+
var as = _a.as, children = _a.children, classNames$1 = _a.classNames, _d = _a.density, density = _d === void 0 ? 'medium' : _d, description = _a.description, _e = _a.descriptionVariant, descriptionVariant = _e === void 0 ? 'large' : _e, _f = _a.dropShadow, dropShadow = _f === void 0 ? true : _f, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _g = _a.titleVariant, titleVariant = _g === void 0 ? 'large' : _g, showActionIcon = _a.showActionIcon, _h = _a.verticalAlignment, verticalAlignment = _h === void 0 ? 'center' : _h, _j = _a.variant, variant = _j === void 0 ? 'default' : _j, disabled = _a.disabled, rest = __rest(_a, ["as", "children", "classNames", "density", "description", "descriptionVariant", "dropShadow", "icon", "label", "onClick", "actionIcon", "title", "titleVariant", "showActionIcon", "verticalAlignment", "variant", "disabled"]);
|
|
17
17
|
var hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
|
|
18
18
|
var propsWithActionIcon = onClick || (rest === null || rest === void 0 ? void 0 : rest.href) || rest.to;
|
|
19
19
|
var cardDefaultTag = onClick ? 'button' : cardDefaultAs;
|
|
20
20
|
var Tag = as || cardDefaultTag;
|
|
21
21
|
return (jsx(Tag, __assign({ className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.buttonWrapper, 'd-flex w100 ai-stretch', (_b = {
|
|
22
|
-
'c-pointer': propsWithActionIcon
|
|
22
|
+
'c-pointer': propsWithActionIcon && !disabled
|
|
23
23
|
},
|
|
24
24
|
_b[styles.button] = propsWithActionIcon,
|
|
25
|
+
_b[styles.buttonDisabled] = propsWithActionIcon && disabled,
|
|
25
26
|
_b)) }, onClick && {
|
|
26
27
|
onClick: onClick,
|
|
27
28
|
type: "button"
|
|
28
|
-
}, rest, { children: jsxs("div", { className: classNames('d-flex fd-column jc-center w100 ta-left br8', { 'bs-sm': dropShadow && variant === 'default' }, {
|
|
29
|
+
}, { disabled: disabled }, rest, { children: jsxs("div", { className: classNames('d-flex fd-column jc-center w100 ta-left br8', { 'bs-sm': dropShadow && variant === 'default' }, {
|
|
29
30
|
xsmall: 'p16',
|
|
30
31
|
small: styles.smallPadding,
|
|
31
32
|
medium: 'p24',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/card/index.tsx"],"sourcesContent":["import { ComponentProps, ElementType, ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../../icon';\n\nimport styles from './style.module.scss';\n\nconst cardDefaultAs = 'section' as const\ntype CardDefaultAsType = typeof cardDefaultAs;\ntype DensityType = 'xsmall' | 'small' | 'medium' | 'large';\ntype TitleVariantType = 'small' | 'medium' | 'large';\ntype VerticalAlignmentType = 'top' | 'center' | 'bottom';\ntype CardVariant = 'default' | 'transparent' | 'outline' | 'secondary' | 'primary';\n\ntype CardOwnProps<E extends ElementType = CardDefaultAsType> = {\n as?: E;\n children?: ReactNode;\n classNames?: {\n buttonWrapper?: string;\n wrapper?: string\n contentWrapper?: string;\n label?: string;\n title?: string;\n description?: string;\n children?: string;\n icon?: string;\n actionIcon?: string;\n };\n density?: DensityType;\n dropShadow?: boolean;\n icon?: ReactNode;\n title?: ReactNode;\n titleVariant?: TitleVariantType;\n description?: ReactNode;\n descriptionVariant?: 'small' | 'large';\n label?: ReactNode;\n onClick?: () => void;\n actionIcon?: ReactNode;\n showActionIcon?: boolean;\n verticalAlignment?: VerticalAlignmentType;\n variant?: CardVariant\n} \n\nexport type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &\n Omit<ComponentProps<E>, keyof CardOwnProps<E>>\n\nconst Card = <E extends ElementType = CardDefaultAsType>({\n as,\n children,\n classNames,\n density = 'medium',\n description,\n descriptionVariant = 'large',\n dropShadow = true,\n icon,\n label,\n onClick,\n actionIcon,\n title,\n titleVariant = 'large',\n showActionIcon,\n verticalAlignment = 'center',\n variant = 'default',\n ...rest\n}: CardProps<E>) => {\n const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n const propsWithActionIcon = onClick || rest?.href || rest.to; \n const cardDefaultTag = onClick ? 'button' : cardDefaultAs;\n const Tag = as || cardDefaultTag;\n \n return (\n <Tag\n className={classNamesUtil(\n classNames?.buttonWrapper,\n 'd-flex w100 ai-stretch',\n {\n 'c-pointer': propsWithActionIcon,\n [styles.button]: propsWithActionIcon
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/card/index.tsx"],"sourcesContent":["import { ComponentProps, ElementType, ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../../icon';\n\nimport styles from './style.module.scss';\n\nconst cardDefaultAs = 'section' as const\ntype CardDefaultAsType = typeof cardDefaultAs;\ntype DensityType = 'xsmall' | 'small' | 'medium' | 'large';\ntype TitleVariantType = 'small' | 'medium' | 'large';\ntype VerticalAlignmentType = 'top' | 'center' | 'bottom';\ntype CardVariant = 'default' | 'transparent' | 'outline' | 'secondary' | 'primary';\n\ntype CardOwnProps<E extends ElementType = CardDefaultAsType> = {\n as?: E;\n children?: ReactNode;\n classNames?: {\n buttonWrapper?: string;\n wrapper?: string\n contentWrapper?: string;\n label?: string;\n title?: string;\n description?: string;\n children?: string;\n icon?: string;\n actionIcon?: string;\n };\n density?: DensityType;\n dropShadow?: boolean;\n icon?: ReactNode;\n title?: ReactNode;\n titleVariant?: TitleVariantType;\n description?: ReactNode;\n descriptionVariant?: 'small' | 'large';\n label?: ReactNode;\n onClick?: () => void;\n actionIcon?: ReactNode;\n showActionIcon?: boolean;\n verticalAlignment?: VerticalAlignmentType;\n variant?: CardVariant\n disabled?: boolean;\n} \n\nexport type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &\n Omit<ComponentProps<E>, keyof CardOwnProps<E>>\n\nconst Card = <E extends ElementType = CardDefaultAsType>({\n as,\n children,\n classNames,\n density = 'medium',\n description,\n descriptionVariant = 'large',\n dropShadow = true,\n icon,\n label,\n onClick,\n actionIcon,\n title,\n titleVariant = 'large',\n showActionIcon,\n verticalAlignment = 'center',\n variant = 'default',\n disabled,\n ...rest\n}: CardProps<E>) => {\n const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n const propsWithActionIcon = onClick || rest?.href || rest.to; \n const cardDefaultTag = onClick ? 'button' : cardDefaultAs;\n const Tag = as || cardDefaultTag;\n \n return (\n <Tag\n className={classNamesUtil(\n classNames?.buttonWrapper,\n 'd-flex w100 ai-stretch',\n {\n 'c-pointer': propsWithActionIcon && !disabled,\n [styles.button]: propsWithActionIcon,\n [styles.buttonDisabled]: propsWithActionIcon && disabled,\n },\n )}\n {...onClick && { \n onClick, \n type: \"button\"\n }}\n disabled={disabled}\n {...rest}\n >\n <div\n className={classNamesUtil(\n 'd-flex fd-column jc-center w100 ta-left br8',\n { 'bs-sm': dropShadow && variant === 'default' },\n {\n xsmall: 'p16',\n small: styles.smallPadding,\n medium: 'p24',\n large: 'p32',\n }[density as DensityType],\n {\n top: 'jc-start',\n center: 'jc-center',\n bottom: 'jc-end',\n }[verticalAlignment as VerticalAlignmentType],\n styles?.wrapper,\n styles?.[`wrapper--${variant}`],\n {\n [styles?.[`wrapper--defaultNoShadow`]]: !dropShadow && variant === 'default',\n },\n classNames?.wrapper\n )}\n >\n <div className=\"d-flex w100\">\n {icon && (\n <div\n className={classNamesUtil(\n `d-flex`,\n styles.icon,\n styles[`iconDensity--${density}`],\n classNames?.icon, \n {\n top: 'ai-start',\n center: 'ai-center',\n bottom: 'ai-end',\n }[verticalAlignment as VerticalAlignmentType],\n )}\n >\n {icon}\n </div>\n )}\n\n <div className=\"d-flex jc-between w100\">\n <div\n className={classNamesUtil(\n classNames?.contentWrapper || '',\n \"d-flex jc-center gap8 fd-column tc-neutral-900 w100\"\n )}\n >\n {label && (\n <h4 className={classNamesUtil('p-p--small', classNames?.label)}>\n {label}\n </h4>\n )}\n\n {title && (\n <h3\n className={classNamesUtil(\n classNames?.title,\n {\n large: 'p-h3',\n medium: 'p-h4',\n small: 'p-p',\n }[titleVariant as TitleVariantType]\n )}\n >\n {title}\n </h3>\n )}\n\n {description && (\n <div\n className={classNamesUtil(\n styles.description,\n classNames?.description,\n descriptionVariant === 'small' ? 'p-p--small' : 'p-p',\n styles?.[`description--${variant}`]\n )}\n >\n {description}\n </div>\n )}\n </div>\n\n {(showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (\n <div\n className={classNamesUtil(\n styles.actionIcon,\n classNames?.actionIcon,\n styles[`actionIconDensity--${density}`],\n 'd-flex ai-center'\n )}\n >\n {actionIcon || <ChevronRightIcon size={24} />}\n </div>\n )}\n </div>\n </div>\n\n {children && <div className={classNames?.children}>{children}</div>}\n </div>\n </Tag>\n );\n};\n\nexport { Card };\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}
|
|
@@ -102,6 +102,7 @@ var CardVariants = function (_a) {
|
|
|
102
102
|
};
|
|
103
103
|
CardStory.storyName = "Card";
|
|
104
104
|
var CardAsOtherComponents = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-neutral-100', children: [jsx("h3", { className: 'p-h3', children: "As an anchor:" }), jsx(Card, { as: "a", href: "https://feather-insurance.com", target: "_blank", title: "Card with an a tag", density: 'xsmall' }), jsx("h3", { className: 'p-h3', children: "As a nav:" }), jsx(Card, { as: "nav", title: "Card with a nav tag", density: 'xsmall' }), jsxs("p", { className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32', children: [jsx(InfoIcon, {}), "Inspect elements to see the different HTML tags being rendered."] })] })); };
|
|
105
|
+
var CardDisabledStates = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-neutral-100', children: [jsx(Card, { as: "button", onClick: function () { }, title: "Card with an a tag", density: 'xsmall' }), jsx(Card, { as: "button", onClick: function () { }, title: "Card with an a tag", density: 'xsmall', disabled: true })] })); };
|
|
105
106
|
var CardDensities = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-neutral-100', children: [jsx(Card, { title: 'Card density: xsmall', density: 'xsmall' }), jsx(Card, { title: 'Card density: small', density: 'small' }), jsx(Card, { title: 'Card density: medium', density: 'medium' }), jsx(Card, { title: 'Card density: large', density: 'large' })] })); };
|
|
106
107
|
var CardsWithIcons = function (_a) {
|
|
107
108
|
var title = _a.title;
|
|
@@ -122,5 +123,5 @@ var CardOverridesStyles = function (_a) {
|
|
|
122
123
|
var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", { className: 'd-flex p24 bg-neutral-100', children: jsxs(Card, { label: (jsx(Badge, { size: 'small', variant: 'success', children: "Active" })), title: (jsxs("div", { className: 'd-flex jc-between ai-center w100', children: ["Coverage overview", jsx(Button, { as: "a", href: "#", onClick: console.log, children: "Full covxerage details" })] })), children: [jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(CheckIcon, { color: 'purple-600' }), density: 'xsmall' }), jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(XIcon, { color: 'purple-600' }), density: 'xsmall' })] }), jsxs("div", { className: 'd-flex gap16 mt16', children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(CheckIcon, { color: 'purple-600' }), density: 'xsmall' }), jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-neutral-300' }, icon: jsx(XIcon, { color: 'purple-600' }), density: 'xsmall' })] })] }) })); };
|
|
123
124
|
|
|
124
125
|
export default story;
|
|
125
|
-
export { CardAsOtherComponents, CardDensities, CardOverridesStyles, CardStory, CardVariants, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
|
|
126
|
+
export { CardAsOtherComponents, CardDensities, CardDisabledStates, CardOverridesStyles, CardStory, CardVariants, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
|
|
126
127
|
//# sourceMappingURL=index.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../../util/images';\nimport { Button } from '../../button';\nimport { Badge } from '../../badge';\nimport { BasketballSportsIcon, CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';\n\nconst story = {\n title: 'JSX/Cards/Card',\n component: Card,\n argTypes: {\n as: {\n control: 'text',\n description: 'Allow wrapper element type to be custom defined'\n },\n density: {\n description: 'Spacing around the card'\n },\n label: {\n description: 'Content to be rendered as label'\n },\n title: {\n description: 'Content to be rendered as title'\n },\n titleVariant: {\n description: 'Variant that allows changing title sizing styles.'\n },\n description: {\n description: 'Content to be rendered as description'\n },\n descriptionVariant: {\n description: 'Variant that allows changing description sizing styles.'\n },\n icon: {\n description: 'ReactNode to be rendered on the left side of the card',\n },\n children: {\n control: 'text',\n description: 'Content that is displayed inside the card under the pre-defined props',\n },\n onClick: {\n action: true,\n table: {\n category: \"Callbacks\",\n },\n description: 'On click action to be triggered on card click.',\n },\n dropShadow: {\n description: 'Wether to display card with drop shadow styles or not.',\n },\n actionIcon: {\n control: 'text',\n description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n },\n showActionIcon: {\n description: 'Property that always displays action icon even if no onClick is set.',\n },\n verticalAlignment: {\n description: 'Vertical alignment of the card content',\n control: { type: 'select' },\n },\n },\n args: {\n density: 'medium',\n description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n descriptionVariant: 'large',\n label: 'Label',\n title: 'Honest, simple insurance',\n titleVariant: 'large',\n icon: 'ABC',\n children: '',\n classNames: {\n wrapper: '',\n label: '',\n title: '',\n description: '',\n children: '',\n icon: ''\n },\n dropShadow: true,\n verticalAlignment: 'center',\n }\n};\n\nexport const CardStory = ({ \n as,\n actionIcon,\n showActionIcon,\n children,\n classNames,\n density,\n description,\n descriptionVariant,\n dropShadow,\n icon,\n label,\n onClick,\n title,\n titleVariant,\n verticalAlignment,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n as={as}\n classNames={classNames}\n description={description}\n descriptionVariant={descriptionVariant}\n density={density}\n dropShadow={dropShadow}\n icon={icon}\n label={label}\n title={title}\n titleVariant={titleVariant}\n onClick={onClick}\n actionIcon={actionIcon}\n showActionIcon={showActionIcon}\n verticalAlignment={verticalAlignment}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardVariants = ({ \n description,\n onClick,\n title,\n}: CardProps) => (\n <div className='d-flex fd-column gap24 p24'>\n <div>\n <h4 className='p-h4 mb16'>default</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='default'\n dropShadow={false}\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>transparent</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='transparent'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>outline</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='outline'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>secondary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='secondary'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>primary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='primary'\n />\n </div>\n </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n \n <h3 className='p-h3'>As an anchor:</h3>\n <Card\n as=\"a\"\n href=\"https://feather-insurance.com\"\n target=\"_blank\"\n title=\"Card with an a tag\"\n density='xsmall'\n />\n\n <h3 className='p-h3'>As a nav:</h3>\n <Card\n as=\"nav\"\n title=\"Card with a nav tag\"\n density='xsmall'\n />\n\n <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n <InfoIcon />\n Inspect elements to see the different HTML tags being rendered.\n </p>\n </div>\n);\n\nexport const CardDensities = () => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n <Card\n title={'Card density: xsmall'}\n density='xsmall'\n />\n <Card\n title={'Card density: small'}\n density='small'\n />\n <Card\n title={'Card density: medium'}\n density='medium'\n />\n <Card\n title={'Card density: large'}\n density='large'\n />\n </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n <div className='d-flex gap16 p24 bg-neutral-100'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n />\n <Card\n icon={<MehIcon size={24} noMargin />}\n title={title}\n />\n </div>\n);\n\nexport const CardWithOnClickAction = ({ \n children,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n titleVariant={'medium'}\n onClick={() => {}}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardOverridesStyles = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n label={label}\n title={title}\n titleVariant={'medium'}\n icon={<PlusCircleIcon color=\"neutral-50\" size={32} />}\n classNames={{ \n wrapper: 'bg-neutral-800',\n label: 'tc-white',\n title: 'tc-white'\n }}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n label={(\n <Badge size='small' variant='success'>\n Active\n </Badge>\n )}\n title={(\n <div className='d-flex jc-between ai-center w100'>\n Coverage overview\n\n <Button\n as=\"a\"\n href=\"#\"\n onClick={console.log}\n >\n Full covxerage details\n </Button>\n </div>\n )}\n >\n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Lost keys\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<CheckIcon color={'purple-600'} />}\n density='xsmall'\n />\n <Card\n description=\"Broken glass\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density='xsmall'\n />\n </div>\n \n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Damage to property\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<CheckIcon color={'purple-600'} />}\n density='xsmall'\n />\n <Card\n description=\"Drones\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density='xsmall'\n />\n </div>\n </Card>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../../util/images';\nimport { Button } from '../../button';\nimport { Badge } from '../../badge';\nimport { BasketballSportsIcon, CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';\n\nconst story = {\n title: 'JSX/Cards/Card',\n component: Card,\n argTypes: {\n as: {\n control: 'text',\n description: 'Allow wrapper element type to be custom defined'\n },\n density: {\n description: 'Spacing around the card'\n },\n label: {\n description: 'Content to be rendered as label'\n },\n title: {\n description: 'Content to be rendered as title'\n },\n titleVariant: {\n description: 'Variant that allows changing title sizing styles.'\n },\n description: {\n description: 'Content to be rendered as description'\n },\n descriptionVariant: {\n description: 'Variant that allows changing description sizing styles.'\n },\n icon: {\n description: 'ReactNode to be rendered on the left side of the card',\n },\n children: {\n control: 'text',\n description: 'Content that is displayed inside the card under the pre-defined props',\n },\n onClick: {\n action: true,\n table: {\n category: \"Callbacks\",\n },\n description: 'On click action to be triggered on card click.',\n },\n dropShadow: {\n description: 'Wether to display card with drop shadow styles or not.',\n },\n actionIcon: {\n control: 'text',\n description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n },\n showActionIcon: {\n description: 'Property that always displays action icon even if no onClick is set.',\n },\n verticalAlignment: {\n description: 'Vertical alignment of the card content',\n control: { type: 'select' },\n },\n },\n args: {\n density: 'medium',\n description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n descriptionVariant: 'large',\n label: 'Label',\n title: 'Honest, simple insurance',\n titleVariant: 'large',\n icon: 'ABC',\n children: '',\n classNames: {\n wrapper: '',\n label: '',\n title: '',\n description: '',\n children: '',\n icon: ''\n },\n dropShadow: true,\n verticalAlignment: 'center',\n }\n};\n\nexport const CardStory = ({ \n as,\n actionIcon,\n showActionIcon,\n children,\n classNames,\n density,\n description,\n descriptionVariant,\n dropShadow,\n icon,\n label,\n onClick,\n title,\n titleVariant,\n verticalAlignment,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n as={as}\n classNames={classNames}\n description={description}\n descriptionVariant={descriptionVariant}\n density={density}\n dropShadow={dropShadow}\n icon={icon}\n label={label}\n title={title}\n titleVariant={titleVariant}\n onClick={onClick}\n actionIcon={actionIcon}\n showActionIcon={showActionIcon}\n verticalAlignment={verticalAlignment}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardVariants = ({ \n description,\n onClick,\n title,\n}: CardProps) => (\n <div className='d-flex fd-column gap24 p24'>\n <div>\n <h4 className='p-h4 mb16'>default</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='default'\n dropShadow={false}\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>transparent</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='transparent'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>outline</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='outline'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>secondary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='secondary'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>primary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='primary'\n />\n </div>\n </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n \n <h3 className='p-h3'>As an anchor:</h3>\n <Card\n as=\"a\"\n href=\"https://feather-insurance.com\"\n target=\"_blank\"\n title=\"Card with an a tag\"\n density='xsmall'\n />\n\n <h3 className='p-h3'>As a nav:</h3>\n <Card\n as=\"nav\"\n title=\"Card with a nav tag\"\n density='xsmall'\n />\n\n <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n <InfoIcon />\n Inspect elements to see the different HTML tags being rendered.\n </p>\n </div>\n);\n\nexport const CardDisabledStates = () => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n <Card\n as=\"button\"\n onClick={() => {}}\n title=\"Card with an a tag\"\n density='xsmall'\n />\n <Card\n as=\"button\"\n onClick={() => {}}\n title=\"Card with an a tag\"\n density='xsmall'\n disabled\n />\n </div>\n);\n\nexport const CardDensities = () => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n <Card\n title={'Card density: xsmall'}\n density='xsmall'\n />\n <Card\n title={'Card density: small'}\n density='small'\n />\n <Card\n title={'Card density: medium'}\n density='medium'\n />\n <Card\n title={'Card density: large'}\n density='large'\n />\n </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n <div className='d-flex gap16 p24 bg-neutral-100'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n />\n <Card\n icon={<MehIcon size={24} noMargin />}\n title={title}\n />\n </div>\n);\n\nexport const CardWithOnClickAction = ({ \n children,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n titleVariant={'medium'}\n onClick={() => {}}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardOverridesStyles = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n label={label}\n title={title}\n titleVariant={'medium'}\n icon={<PlusCircleIcon color=\"neutral-50\" size={32} />}\n classNames={{ \n wrapper: 'bg-neutral-800',\n label: 'tc-white',\n title: 'tc-white'\n }}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n label={(\n <Badge size='small' variant='success'>\n Active\n </Badge>\n )}\n title={(\n <div className='d-flex jc-between ai-center w100'>\n Coverage overview\n\n <Button\n as=\"a\"\n href=\"#\"\n onClick={console.log}\n >\n Full covxerage details\n </Button>\n </div>\n )}\n >\n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Lost keys\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<CheckIcon color={'purple-600'} />}\n density='xsmall'\n />\n <Card\n description=\"Broken glass\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density='xsmall'\n />\n </div>\n \n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Damage to property\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<CheckIcon color={'purple-600'} />}\n density='xsmall'\n />\n <Card\n description=\"Drones\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density='xsmall'\n />\n </div>\n </Card>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ import { TableContents } from './components/TableContents/TableContents.js';
|
|
|
12
12
|
import { c as classNames } from '../../index-6ea95111.js';
|
|
13
13
|
import { u as useTableNavigation } from '../../useTableNavigation-17d5cd3c.js';
|
|
14
14
|
import { TableControls } from './components/TableControls/TableControls.js';
|
|
15
|
-
import { i as isBaseCell, T as TableSection } from '../../TableSection-
|
|
15
|
+
import { i as isBaseCell, T as TableSection } from '../../TableSection-cf3bbf3d.js';
|
|
16
16
|
import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
|
|
17
17
|
import './components/TableCell/BaseCell/BaseCell.js';
|
|
18
18
|
import '../icon/icons/CheckThick.js';
|
|
@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
|
|
|
37
37
|
import '../icon/icons/ChevronUp.js';
|
|
38
38
|
import '../../useMediaQuery-1a3a2432.js';
|
|
39
39
|
import './components/TableContents/TableContents.js';
|
|
40
|
-
import '../../TableSection-
|
|
40
|
+
import '../../TableSection-cf3bbf3d.js';
|
|
41
41
|
import './components/TableContents/Collapsible.js';
|
|
42
42
|
import '../../useTableNavigation-17d5cd3c.js';
|
|
43
43
|
import './components/TableControls/TableControls.js';
|
|
@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
|
|
|
37
37
|
import '../icon/icons/ChevronUp.js';
|
|
38
38
|
import '../../useMediaQuery-1a3a2432.js';
|
|
39
39
|
import './components/TableContents/TableContents.js';
|
|
40
|
-
import '../../TableSection-
|
|
40
|
+
import '../../TableSection-cf3bbf3d.js';
|
|
41
41
|
import './components/TableContents/Collapsible.js';
|
|
42
42
|
import '../../useTableNavigation-17d5cd3c.js';
|
|
43
43
|
import './components/TableControls/TableControls.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
-
import { T as TableSection } from '../../../../TableSection-
|
|
4
|
+
import { T as TableSection } from '../../../../TableSection-cf3bbf3d.js';
|
|
5
5
|
import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
|
|
6
6
|
import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
|
|
7
7
|
import { Card } from '../../../cards/card/index.js';
|
|
@@ -6,7 +6,7 @@ import 'react';
|
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../../../_commonjsHelpers-4730bd53.js';
|
|
8
8
|
import 'react-dom/test-utils';
|
|
9
|
-
import '../../../../TableSection-
|
|
9
|
+
import '../../../../TableSection-cf3bbf3d.js';
|
|
10
10
|
import '../../../../index-6ea95111.js';
|
|
11
11
|
import '../../../../style-inject.es-1f59c1d0.js';
|
|
12
12
|
import '../TableCell/TableCell.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../../../../tslib.es6-a39f91fc.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import '../../../../index-6ea95111.js';
|
|
4
|
-
export { T as TableSection } from '../../../../TableSection-
|
|
4
|
+
export { T as TableSection } from '../../../../TableSection-cf3bbf3d.js';
|
|
5
5
|
import '../TableCell/TableCell.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import '../../../../useMediaQuery-1a3a2432.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { c as customRender, s as screen } from '../../../../customRender-be47569b.js';
|
|
4
|
-
import { T as TableSection } from '../../../../TableSection-
|
|
4
|
+
import { T as TableSection } from '../../../../TableSection-cf3bbf3d.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../../../_commonjsHelpers-4730bd53.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -466,7 +466,7 @@ import './components/table/components/IconRenderer/IconRenderer.js';
|
|
|
466
466
|
import './components/table/components/TableCell/CardCell/CardCell.js';
|
|
467
467
|
import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
|
|
468
468
|
import './components/table/components/TableContents/TableContents.js';
|
|
469
|
-
import './TableSection-
|
|
469
|
+
import './TableSection-cf3bbf3d.js';
|
|
470
470
|
import './components/table/components/TableContents/Collapsible.js';
|
|
471
471
|
import './useTableNavigation-17d5cd3c.js';
|
|
472
472
|
import './components/table/components/TableControls/TableControls.js';
|
|
@@ -32,7 +32,8 @@ type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
|
|
|
32
32
|
showActionIcon?: boolean;
|
|
33
33
|
verticalAlignment?: VerticalAlignmentType;
|
|
34
34
|
variant?: CardVariant;
|
|
35
|
+
disabled?: boolean;
|
|
35
36
|
};
|
|
36
37
|
export type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> & Omit<ComponentProps<E>, keyof CardOwnProps<E>>;
|
|
37
|
-
declare const Card: <E extends ElementType = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, variant, ...rest }: CardProps<E>) => JSX.Element;
|
|
38
|
+
declare const Card: <E extends ElementType = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, variant, disabled, ...rest }: CardProps<E>) => JSX.Element;
|
|
38
39
|
export { Card };
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { CardProps } from '.';
|
|
3
3
|
declare const story: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: <E extends import("react").ElementType = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, variant, ...rest }: CardProps<E>) => JSX.Element;
|
|
5
|
+
component: <E extends import("react").ElementType = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, verticalAlignment, variant, disabled, ...rest }: CardProps<E>) => JSX.Element;
|
|
6
6
|
argTypes: {
|
|
7
7
|
as: {
|
|
8
8
|
control: string;
|
|
@@ -84,6 +84,7 @@ export declare const CardStory: {
|
|
|
84
84
|
};
|
|
85
85
|
export declare const CardVariants: ({ description, onClick, title, }: CardProps) => JSX.Element;
|
|
86
86
|
export declare const CardAsOtherComponents: () => JSX.Element;
|
|
87
|
+
export declare const CardDisabledStates: () => JSX.Element;
|
|
87
88
|
export declare const CardDensities: () => JSX.Element;
|
|
88
89
|
export declare const CardsWithIcons: ({ title }: CardProps) => JSX.Element;
|
|
89
90
|
export declare const CardWithOnClickAction: ({ children, title, }: CardProps) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -208,6 +208,24 @@ export const CardAsOtherComponents = () => (
|
|
|
208
208
|
</div>
|
|
209
209
|
);
|
|
210
210
|
|
|
211
|
+
export const CardDisabledStates = () => (
|
|
212
|
+
<div className='d-flex fd-column gap16 p24 bg-neutral-100'>
|
|
213
|
+
<Card
|
|
214
|
+
as="button"
|
|
215
|
+
onClick={() => {}}
|
|
216
|
+
title="Card with an a tag"
|
|
217
|
+
density='xsmall'
|
|
218
|
+
/>
|
|
219
|
+
<Card
|
|
220
|
+
as="button"
|
|
221
|
+
onClick={() => {}}
|
|
222
|
+
title="Card with an a tag"
|
|
223
|
+
density='xsmall'
|
|
224
|
+
disabled
|
|
225
|
+
/>
|
|
226
|
+
</div>
|
|
227
|
+
);
|
|
228
|
+
|
|
211
229
|
export const CardDensities = () => (
|
|
212
230
|
<div className='d-flex fd-column gap16 p24 bg-neutral-100'>
|
|
213
231
|
<Card
|
|
@@ -38,6 +38,7 @@ type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
|
|
|
38
38
|
showActionIcon?: boolean;
|
|
39
39
|
verticalAlignment?: VerticalAlignmentType;
|
|
40
40
|
variant?: CardVariant
|
|
41
|
+
disabled?: boolean;
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
export type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &
|
|
@@ -60,6 +61,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
|
|
|
60
61
|
showActionIcon,
|
|
61
62
|
verticalAlignment = 'center',
|
|
62
63
|
variant = 'default',
|
|
64
|
+
disabled,
|
|
63
65
|
...rest
|
|
64
66
|
}: CardProps<E>) => {
|
|
65
67
|
const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
|
|
@@ -73,14 +75,16 @@ const Card = <E extends ElementType = CardDefaultAsType>({
|
|
|
73
75
|
classNames?.buttonWrapper,
|
|
74
76
|
'd-flex w100 ai-stretch',
|
|
75
77
|
{
|
|
76
|
-
'c-pointer': propsWithActionIcon,
|
|
77
|
-
[styles.button]: propsWithActionIcon
|
|
78
|
+
'c-pointer': propsWithActionIcon && !disabled,
|
|
79
|
+
[styles.button]: propsWithActionIcon,
|
|
80
|
+
[styles.buttonDisabled]: propsWithActionIcon && disabled,
|
|
78
81
|
},
|
|
79
82
|
)}
|
|
80
83
|
{...onClick && {
|
|
81
84
|
onClick,
|
|
82
85
|
type: "button"
|
|
83
86
|
}}
|
|
87
|
+
disabled={disabled}
|
|
84
88
|
{...rest}
|
|
85
89
|
>
|
|
86
90
|
<div
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
border: 1px solid transparent;
|
|
47
47
|
outline: 1px solid transparent;
|
|
48
48
|
|
|
49
|
-
&:hover .wrapper {
|
|
49
|
+
&:not(.buttonDisabled):hover .wrapper {
|
|
50
50
|
&--default {
|
|
51
51
|
border: $border-strong-default;
|
|
52
52
|
}
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
&:focus-visible .wrapper {
|
|
75
|
+
&:not(.buttonDisabled):focus-visible .wrapper {
|
|
76
76
|
border-color: $ds-neutral-900;
|
|
77
77
|
box-shadow: inset 0 0 0 1px $ds-neutral-900;
|
|
78
78
|
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
&:active .wrapper {
|
|
92
|
+
&:not(.buttonDisabled):active .wrapper {
|
|
93
93
|
border-color: $ds-neutral-500;
|
|
94
94
|
box-shadow: inset 0 0 0 1px $ds-neutral-500;
|
|
95
95
|
|
|
@@ -115,6 +115,11 @@
|
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
+
&Disabled {
|
|
119
|
+
cursor: not-allowed;
|
|
120
|
+
opacity: 0.6;
|
|
121
|
+
}
|
|
122
|
+
|
|
118
123
|
@media (pointer: coarse) {
|
|
119
124
|
&:hover .wrapper,
|
|
120
125
|
&:active .wrapper {
|