@mrshmllw/smores-react 12.7.0-crumbs-feature-table-footer.1 → 12.8.0
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/IconStrict/IconStrict.js +1 -1
- package/dist/IconStrict/IconStrict.js.map +1 -1
- package/dist/Table/components/TableFooter.js +2 -6
- package/dist/Table/components/TableFooter.js.map +1 -1
- package/dist/Table/types.d.ts +0 -2
- package/dist/Table/types.js.map +1 -1
- package/dist/theme.d.ts +2 -0
- package/dist/theme.js +1 -0
- package/dist/theme.js.map +1 -1
- package/package.json +12 -12
|
@@ -24,7 +24,7 @@ const iconSizes = {
|
|
|
24
24
|
};
|
|
25
25
|
export const IconStrict = ({ id, className = '', size = 16, render, iconColor, backgroundColor, rotate, handleClick, title, ...otherProps }) => {
|
|
26
26
|
const isButton = !!handleClick;
|
|
27
|
-
const defaultLabel =
|
|
27
|
+
const defaultLabel = title ?? (isButton ? (title ?? 'icon-button') : undefined);
|
|
28
28
|
return (React.createElement(IconContainer, { id: id, as: isButton ? 'button' : 'div', className: className, "$size": size, "$backgroundColor": backgroundColor, onClick: handleClick, title: defaultLabel, ...otherProps },
|
|
29
29
|
React.createElement(Icon, { render: render, size: backgroundColor ? iconSizes[size].smallSize : size, color: iconColor, rotate: rotate })));
|
|
30
30
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAsBzD,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,EAAE,EACF,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,CAAA;IAC9B,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAsBzD,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,EAAE,EACF,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,CAAA;IAC9B,MAAM,YAAY,GAChB,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC5D,OAAO,CACL,oBAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC/B,SAAS,EAAE,SAAS,WACb,IAAI,sBACO,eAAe,EACjC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,YAAY,KACf,UAAU;QAEd,oBAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;eAEhC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;;iBAEpD,KAAK;cACR,KAAK;;wBAEK,gBAAgB;IAClC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC;IAChC,CAAC,CAAC,MAAM;cACA,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;MAEvC,OAAO;IACT;;0BAGI,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,MACnE;;;KAGD;;MAEC,iBAAiB;GACpB,CACF,CAAA","sourcesContent":["import React, { ButtonHTMLAttributes, FC, FormEvent } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { darken } from 'polished'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Color, theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nexport type IconStrictProps = {\n id?: string\n /** className attribute to apply classes from props */\n className?: string\n /** set size of the Icon (including background) */\n size?: 16 | 24 | 36 | 48\n /** specify what Icon to render */\n render: Icons\n /** set icon colour */\n iconColor?: Color\n /** set background colour */\n backgroundColor?: Color\n /** function to handle click */\n handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n /** rotation degrees */\n rotate?: number\n} & MarginProps &\n Partial<ButtonHTMLAttributes<HTMLButtonElement>>\n\nconst iconSizes = {\n 48: {\n smallSize: 28,\n padding: 10,\n },\n 36: {\n smallSize: 20,\n padding: 8,\n },\n 24: {\n smallSize: 12,\n padding: 6,\n },\n 16: {\n smallSize: 10,\n padding: 3,\n },\n}\n\nexport const IconStrict: FC<IconStrictProps> = ({\n id,\n className = '',\n size = 16,\n render,\n iconColor,\n backgroundColor,\n rotate,\n handleClick,\n title,\n ...otherProps\n}) => {\n const isButton = !!handleClick\n const defaultLabel =\n title ?? (isButton ? (title ?? 'icon-button') : undefined)\n return (\n <IconContainer\n id={id}\n as={isButton ? 'button' : 'div'}\n className={className}\n $size={size}\n $backgroundColor={backgroundColor}\n onClick={handleClick}\n title={defaultLabel}\n {...otherProps}\n >\n <Icon\n render={render}\n size={backgroundColor ? iconSizes[size].smallSize : size}\n color={iconColor}\n rotate={rotate}\n />\n </IconContainer>\n )\n}\n\ninterface IIconStrict {\n $size: 16 | 24 | 36 | 48\n $backgroundColor?: Color\n onClick?: (e: FormEvent<HTMLButtonElement>) => void\n}\n\nconst IconContainer = styled.div<IIconStrict>(\n ({ $size, $backgroundColor, onClick }) => css`\n position: relative;\n padding: ${$backgroundColor ? `${iconSizes[$size].padding}px` : 0};\n width: 100%;\n max-width: ${$size}px;\n height: ${$size}px;\n border-radius: 100%;\n background-color: ${$backgroundColor\n ? theme.colors[$backgroundColor]\n : 'none'};\n cursor: ${onClick ? 'pointer' : 'default'};\n\n ${onClick &&\n `\n &:hover {\n background-color: ${\n $backgroundColor ? darken(0.1, theme.colors[$backgroundColor]) : 'none'\n };\n }\n \n `}\n\n ${focusOutlineStyle}\n `,\n)\n"]}
|
|
@@ -4,11 +4,7 @@ export function TableFooter({ footer, columnCount, }) {
|
|
|
4
4
|
if ('element' in footer) {
|
|
5
5
|
return React.createElement("td", { colSpan: columnCount }, footer.element);
|
|
6
6
|
}
|
|
7
|
-
const columns = footer
|
|
8
|
-
|
|
9
|
-
const rowColor = footer.rowColor ?? 'custard';
|
|
10
|
-
const rowPadding = footer.rowPadding;
|
|
11
|
-
const columnPadding = footer.columnPadding;
|
|
12
|
-
return (React.createElement(TableRow, { key: "footer", rowData: data, rowIndex: columns.length - 1, columns: columns, rowColor: rowColor, rowPadding: rowPadding, columnPadding: columnPadding }));
|
|
7
|
+
const { rowColor = 'custard', data, columns, ...restFooter } = footer;
|
|
8
|
+
return (React.createElement(TableRow, { key: "footer", rowIndex: columns.length - 1, rowColor: rowColor, rowData: data, columns: columns, ...restFooter }));
|
|
13
9
|
}
|
|
14
10
|
//# sourceMappingURL=TableFooter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/Table/components/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAOrC,MAAM,UAAU,WAAW,CAAmB,EAC5C,MAAM,EACN,WAAW,GACF;IACT,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACxB,OAAO,4BAAI,OAAO,EAAE,WAAW,IAAG,MAAM,CAAC,OAAO,CAAM,CAAA;IACxD,CAAC;IAED,MAAM,
|
|
1
|
+
{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/Table/components/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAOrC,MAAM,UAAU,WAAW,CAAmB,EAC5C,MAAM,EACN,WAAW,GACF;IACT,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;QACxB,OAAO,4BAAI,OAAO,EAAE,WAAW,IAAG,MAAM,CAAC,OAAO,CAAM,CAAA;IACxD,CAAC;IAED,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,CAAA;IAErE,OAAO,CACL,oBAAC,QAAQ,IACP,GAAG,EAAC,QAAQ,EACZ,QAAQ,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAC5B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,OAAO,KACZ,UAAU,GACd,CACH,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport type { TableFooter } from '../types'\nimport { TableRow } from './TableRow'\n\ntype Props<K> = {\n footer: TableFooter<K>\n columnCount: number\n}\n\nexport function TableFooter<K extends object>({\n footer,\n columnCount,\n}: Props<K>) {\n if ('element' in footer) {\n return <td colSpan={columnCount}>{footer.element}</td>\n }\n\n const { rowColor = 'custard', data, columns, ...restFooter } = footer\n\n return (\n <TableRow\n key=\"footer\"\n rowIndex={columns.length - 1}\n rowColor={rowColor}\n rowData={data}\n columns={columns}\n {...restFooter}\n />\n )\n}\n"]}
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -104,8 +104,6 @@ export interface TableProps<T, K = undefined> extends CommonTableProps<T> {
|
|
|
104
104
|
/** Array of data to be displayed in the table. */
|
|
105
105
|
data: T[];
|
|
106
106
|
footer?: TableFooter<K>;
|
|
107
|
-
/** The cell color of the footer. */
|
|
108
|
-
footerColor?: Color;
|
|
109
107
|
/** The text to show when there is no available data to map through. */
|
|
110
108
|
noDataContent?: ReactNode;
|
|
111
109
|
}
|
package/dist/Table/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: Color\n stickyCell?: boolean\n headerColor?: Color\n rowColor?: Color\n rowBorderColor?: Color\n rowActionsBgColor?: Color\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n rowPadding?: string\n columnPadding?: string\n hideOverflow?: boolean\n clickableRow?: boolean\n noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n onClick: (rowData: T) => void\n showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n | RowActionButtonDefault<T>\n | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n iconButton?: Pick<\n IconStrictProps,\n 'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n > & { tooltipText?: string }\n genericButton?: Pick<\n ButtonProps,\n | 'children'\n | 'loading'\n | 'disabled'\n | 'primary'\n | 'secondary'\n | 'fallbackStyle'\n | 'textBtn'\n | 'smallButton'\n | 'id'\n >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n actions: RowAction<T>[]\n minWidth?: string\n bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | React.ReactNode\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n hideOverflow?: boolean\n cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n bgColor?: Color\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n /** Array of columns to display in the table. */\n columns: TableColumn<T>[]\n /** Sets the height of the header. */\n headerHeight?: string\n /** If true, the table header will be fixed/sticky. */\n fixedHeader?: boolean\n /** If true, the table header will have a key line. */\n hasKeyline?: boolean\n /** If present, the table rows will have alternating colors. */\n stripedColor?: Color\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: Color\n /** The default color for each table row. */\n rowColor?: Color\n /** The default color for each table row border. */\n rowBorderColor?: Color\n /** If true, the table will have rounded corners */\n roundedTable?: true\n /** A React element to show when a row is expanded. */\n subTable?: SubElementProps & {\n table: (rowData: T) => ReactElement<any>\n }\n /** Settings for sub rows. */\n subRows?: SubElementProps & {\n /** Function that returns a React element for the sub row. */\n rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n }\n /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n clickableRow?: (rowData: T) => void\n /** Array of actions that can be performed on each row. */\n rowActions?: RowActions<T>\n /** The Y padding for each row. */\n rowPadding?: SingleSpacing\n /** The X padding for each row. */\n columnPadding?: SingleSpacing\n /** Hides the table header. Table defaults to always showing the header. */\n hideTableHeader?: boolean\n}\n\nexport interface TableProps<T, K = undefined> extends CommonTableProps<T> {\n /** Array of data to be displayed in the table. */\n data: T[]\n\n footer?: TableFooter<K>\n\n /** The
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: Color\n stickyCell?: boolean\n headerColor?: Color\n rowColor?: Color\n rowBorderColor?: Color\n rowActionsBgColor?: Color\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n rowPadding?: string\n columnPadding?: string\n hideOverflow?: boolean\n clickableRow?: boolean\n noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n onClick: (rowData: T) => void\n showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n | RowActionButtonDefault<T>\n | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n iconButton?: Pick<\n IconStrictProps,\n 'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n > & { tooltipText?: string }\n genericButton?: Pick<\n ButtonProps,\n | 'children'\n | 'loading'\n | 'disabled'\n | 'primary'\n | 'secondary'\n | 'fallbackStyle'\n | 'textBtn'\n | 'smallButton'\n | 'id'\n >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n actions: RowAction<T>[]\n minWidth?: string\n bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | React.ReactNode\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n hideOverflow?: boolean\n cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n bgColor?: Color\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n /** Array of columns to display in the table. */\n columns: TableColumn<T>[]\n /** Sets the height of the header. */\n headerHeight?: string\n /** If true, the table header will be fixed/sticky. */\n fixedHeader?: boolean\n /** If true, the table header will have a key line. */\n hasKeyline?: boolean\n /** If present, the table rows will have alternating colors. */\n stripedColor?: Color\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: Color\n /** The default color for each table row. */\n rowColor?: Color\n /** The default color for each table row border. */\n rowBorderColor?: Color\n /** If true, the table will have rounded corners */\n roundedTable?: true\n /** A React element to show when a row is expanded. */\n subTable?: SubElementProps & {\n table: (rowData: T) => ReactElement<any>\n }\n /** Settings for sub rows. */\n subRows?: SubElementProps & {\n /** Function that returns a React element for the sub row. */\n rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n }\n /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n clickableRow?: (rowData: T) => void\n /** Array of actions that can be performed on each row. */\n rowActions?: RowActions<T>\n /** The Y padding for each row. */\n rowPadding?: SingleSpacing\n /** The X padding for each row. */\n columnPadding?: SingleSpacing\n /** Hides the table header. Table defaults to always showing the header. */\n hideTableHeader?: boolean\n}\n\nexport interface TableProps<T, K = undefined> extends CommonTableProps<T> {\n /** Array of data to be displayed in the table. */\n data: T[]\n\n footer?: TableFooter<K>\n\n /** The text to show when there is no available data to map through. */\n noDataContent?: ReactNode\n}\n\n/**\n * The type of the footer prop in the Table component.\n * It can either be an array of columns and data, or a React element.\n *\n * For columns, the columns and data will be passed to each column.cell component to generate the footer.\n * For a React element, it will render that as the table footer.\n */\nexport type TableFooter<K> =\n | TableFooterColumnsProps<K>\n | TableFooterElementProps<K>\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n rowData: T\n rowIndex: number\n showActions?: boolean\n hideBorder?: boolean\n}\n\nexport interface RowActionsProps<T>\n extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n rowData: T\n canExpandRow: boolean\n toggleExpansion: () => void\n isExpanded?: boolean\n}\n\ntype TableFooterElementProps<K> = {\n element: ReactElement<K>\n}\n\ntype TableFooterColumnsProps<K> = {\n /**\n * Row color of the footer.\n *\n * @default 'custard'\n */\n rowColor?: Color\n rowPadding?: SingleSpacing\n columnPadding?: SingleSpacing\n columns: TableColumn<K>[]\n data: K\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}
|
package/dist/theme.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ declare const colors: {
|
|
|
21
21
|
peanut: string;
|
|
22
22
|
marzipan: string;
|
|
23
23
|
oatmeal: string;
|
|
24
|
+
satsuma: string;
|
|
24
25
|
strawberry: string;
|
|
25
26
|
watermelon: string;
|
|
26
27
|
apple: string;
|
|
@@ -66,6 +67,7 @@ export declare const theme: {
|
|
|
66
67
|
peanut: string;
|
|
67
68
|
marzipan: string;
|
|
68
69
|
oatmeal: string;
|
|
70
|
+
satsuma: string;
|
|
69
71
|
strawberry: string;
|
|
70
72
|
watermelon: string;
|
|
71
73
|
apple: string;
|
package/dist/theme.js
CHANGED
package/dist/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;IACb,eAAe;IACf,QAAQ,EAAE,SAAS,EAAE,MAAM;IAC3B,eAAe,EAAE,SAAS,EAAE,MAAM;IAClC,SAAS,EAAE,SAAS,EAAE,KAAK;IAC3B,UAAU,EAAE,SAAS,EAAE,KAAK;IAE5B,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,MAAM;IACvB,SAAS,EAAE,SAAS,EAAE,MAAM;IAC5B,MAAM,EAAE,SAAS,EAAE,KAAK;IACxB,IAAI,EAAE,SAAS,EAAE,KAAK;IAEtB,gBAAgB;IAChB,OAAO,EAAE,SAAS,EAAE,MAAM;IAC1B,UAAU,EAAE,SAAS,EAAE,MAAM;IAC7B,OAAO,EAAE,SAAS,EAAE,KAAK;IACzB,KAAK,EAAE,SAAS,EAAE,IAAI;IAEtB,kBAAkB;IAClB,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,QAAQ,EAAE,SAAS,EAAE,OAAO;IAC5B,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ;IAC5B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAC7B,OAAO,EAAE,SAAS,EAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;IACb,eAAe;IACf,QAAQ,EAAE,SAAS,EAAE,MAAM;IAC3B,eAAe,EAAE,SAAS,EAAE,MAAM;IAClC,SAAS,EAAE,SAAS,EAAE,KAAK;IAC3B,UAAU,EAAE,SAAS,EAAE,KAAK;IAE5B,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,MAAM;IACvB,SAAS,EAAE,SAAS,EAAE,MAAM;IAC5B,MAAM,EAAE,SAAS,EAAE,KAAK;IACxB,IAAI,EAAE,SAAS,EAAE,KAAK;IAEtB,gBAAgB;IAChB,OAAO,EAAE,SAAS,EAAE,MAAM;IAC1B,UAAU,EAAE,SAAS,EAAE,MAAM;IAC7B,OAAO,EAAE,SAAS,EAAE,KAAK;IACzB,KAAK,EAAE,SAAS,EAAE,IAAI;IAEtB,kBAAkB;IAClB,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,QAAQ,EAAE,SAAS,EAAE,OAAO;IAC5B,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ;IAC5B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAC7B,OAAO,EAAE,SAAS,EAAE,OAAO;IAC3B,OAAO,EAAE,SAAS;IAElB,gBAAgB;IAChB,UAAU,EAAE,SAAS,EAAE,YAAY;IACnC,UAAU,EAAE,SAAS,EAAE,WAAW;IAClC,KAAK,EAAE,SAAS,EAAE,cAAc;IAChC,IAAI,EAAE,SAAS,EAAE,aAAa;IAC9B,KAAK,EAAE,SAAS,EAAE,cAAc;IAChC,QAAQ,EAAE,SAAS,EAAE,aAAa;IAClC,SAAS,EAAE,SAAS,EAAE,oBAAoB;IAE1C,4BAA4B;IAC5B,gBAAgB,EAAE,SAAS;IAC3B,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,CAAC,EAAE,SAAS;IACZ,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS;IAClB,GAAG,EAAE,SAAS;IACd,QAAQ,EAAE,SAAS;CACpB,CAAA;AAID,MAAM,IAAI,GAAG;IACX,MAAM,EAAE;QACN,MAAM,EAAE,GAAG;QACX,MAAM,EAAE,GAAG;QACX,IAAI,EAAE,GAAG;KACV;IACD,MAAM,EACJ,+IAA+I;CAClJ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM;IACN,IAAI;CACL,CAAA","sourcesContent":["const colors = {\n // Core Primary\n lollipop: '#FF69B5', // 120\n marshmallowPink: '#FF88C8', // 100\n bubblegum: '#FFB3DA', // 60\n fairyFloss: '#FFCCE7', // 40\n\n // Core Secondary\n boba: '#0E0E0C', // 120\n liquorice: '#292924', // 100\n sesame: '#636768', // 60\n chia: '#D2D2D2', // 40\n\n // Core Tertiary\n custard: '#F1E9DC', // 120\n mascarpone: '#F8F2EA', // 100\n coconut: '#FBF8F5', // 60\n cream: '#FFFFFF', // 0\n\n // Brand Secondary\n spearmint: '#294636', // 1 100\n feijoa: '#3B5848', // 1 60\n blueberry: '#89A2B6', // 2 100\n macaroon: '#BBCFDF', // 2 60\n pistachio: '#838E49', // 3 100\n matcha: '#DBE1B0', // 3 60\n caramel: '#C26B2A', // 4 100\n peanut: '#F8C699', // 4 60\n marzipan: '#A1957C', // 5 100\n oatmeal: '#DAD2C4', // 5 60\n satsuma: '#FFECD5',\n\n // Traffic light\n strawberry: '#DF2929', // Error 100\n watermelon: '#F5CFCC', // Error 20\n apple: '#008933', // Success 100\n mint: '#C9E2CE', // Success 20\n lemon: '#FFD23A', // Warning 100\n sherbert: '#FCF0D0', // Warning 20\n tangerine: '#FF9F2C', // Agent Warning 100\n\n // Third-party brand colours\n compareTheMarket: '#004A8E',\n confused: '#000A8C',\n onfido: '#3640F5',\n x: '#55ACEE',\n premfina: '#F08422',\n checkout: '#56AC88',\n meta: '#3B5998',\n stripe: '#6772E5',\n intercom: '#286EFA',\n ravelin: '#2A4AFC',\n rac: '#EA7D24',\n hometree: '#17171C',\n}\n\nexport type Color = keyof typeof colors\n\nconst font = {\n weight: {\n normal: 400,\n medium: 500,\n bold: 700,\n },\n system:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"',\n}\n\nexport const theme = {\n colors,\n font,\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.8.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -41,28 +41,28 @@
|
|
|
41
41
|
"@semantic-release/git": "^10.0.1",
|
|
42
42
|
"@semantic-release/github": "^11.0.2",
|
|
43
43
|
"@semantic-release/npm": "^12.0.0",
|
|
44
|
-
"@snyk/protect": "^1.
|
|
45
|
-
"@storybook/addon-a11y": "^8.6.
|
|
44
|
+
"@snyk/protect": "^1.1297.1",
|
|
45
|
+
"@storybook/addon-a11y": "^8.6.14",
|
|
46
46
|
"@storybook/addon-coverage": "^1.0.5",
|
|
47
|
-
"@storybook/addon-essentials": "^8.6.
|
|
48
|
-
"@storybook/addon-interactions": "^8.6.
|
|
49
|
-
"@storybook/addon-links": "^8.6.
|
|
50
|
-
"@storybook/preview-api": "^8.6.
|
|
51
|
-
"@storybook/react": "^8.6.
|
|
52
|
-
"@storybook/react-vite": "^8.6.
|
|
47
|
+
"@storybook/addon-essentials": "^8.6.14",
|
|
48
|
+
"@storybook/addon-interactions": "^8.6.14",
|
|
49
|
+
"@storybook/addon-links": "^8.6.14",
|
|
50
|
+
"@storybook/preview-api": "^8.6.14",
|
|
51
|
+
"@storybook/react": "^8.6.14",
|
|
52
|
+
"@storybook/react-vite": "^8.6.14",
|
|
53
53
|
"@storybook/test": "^8.2.1",
|
|
54
54
|
"@storybook/test-runner": "^0.22.0",
|
|
55
55
|
"@testing-library/react": "^16.3.0",
|
|
56
56
|
"@types/body-scroll-lock": "^3.1.0",
|
|
57
57
|
"@types/dompurify": "^3.2.0",
|
|
58
|
-
"@types/node": "^22.15.
|
|
58
|
+
"@types/node": "^22.15.19",
|
|
59
59
|
"@types/react": "^19.1.4",
|
|
60
60
|
"@types/react-dom": "^19.1.5",
|
|
61
61
|
"@typescript-eslint/eslint-plugin": "^8.32.1",
|
|
62
62
|
"@typescript-eslint/parser": "^8.32.1",
|
|
63
63
|
"axe-playwright": "^2.1.0",
|
|
64
64
|
"conventional-changelog-conventionalcommits": "^8.0.0",
|
|
65
|
-
"eslint": "^9.
|
|
65
|
+
"eslint": "^9.27.0",
|
|
66
66
|
"eslint-config-prettier": "^10.1.5",
|
|
67
67
|
"eslint-plugin-prettier": "^5.4.0",
|
|
68
68
|
"eslint-plugin-react": "^7.37.5",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"react": "^19.0.0",
|
|
76
76
|
"react-dom": "^19.1.0",
|
|
77
77
|
"rimraf": "^6.0.1",
|
|
78
|
-
"semantic-release": "^24.2.
|
|
78
|
+
"semantic-release": "^24.2.4",
|
|
79
79
|
"storybook": "^8.0.4",
|
|
80
80
|
"styled-components": "^6.1.18",
|
|
81
81
|
"typescript": "^5.8.3",
|