@veeqo/ui 11.0.0 → 11.1.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/components/ViewTab/ViewTab.cjs +3 -4
- package/dist/components/ViewTab/ViewTab.cjs.map +1 -1
- package/dist/components/ViewTab/ViewTab.d.ts +3 -1
- package/dist/components/ViewTab/ViewTab.js +3 -4
- package/dist/components/ViewTab/ViewTab.js.map +1 -1
- package/dist/components/ViewTab/styled.cjs +27 -2
- package/dist/components/ViewTab/styled.cjs.map +1 -1
- package/dist/components/ViewTab/styled.d.ts +1 -1
- package/dist/components/ViewTab/styled.js +27 -2
- package/dist/components/ViewTab/styled.js.map +1 -1
- package/dist/components/ViewTab/types.cjs.map +1 -1
- package/dist/components/ViewTab/types.d.ts +7 -2
- package/dist/components/ViewTab/types.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@ const generateClassNames = (prefix) => ({
|
|
|
22
22
|
active: prefix ? `${prefix}-active` : undefined,
|
|
23
23
|
counter: prefix ? `${prefix}-counter` : undefined,
|
|
24
24
|
});
|
|
25
|
-
const ViewTab = React__default.default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.colors.secondary.blue, customTextColour, count, active = false, onClick, subAction, ariaContext, ...props }, ref) => {
|
|
25
|
+
const ViewTab = React__default.default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.colors.secondary.blue, customTextColour, count, countSlot, active = false, onClick, subAction, ariaContext, ariaDescribedBy, ...props }, ref) => {
|
|
26
26
|
const classNames = generateClassNames(className);
|
|
27
27
|
const [isHovered, handleEnter, handleLeave] = useHover.useHover();
|
|
28
28
|
const action = active && subAction ? subAction : onClick;
|
|
@@ -36,12 +36,11 @@ const ViewTab = React__default.default.forwardRef(({ id, iconSlot, name, type, c
|
|
|
36
36
|
return 'Edit';
|
|
37
37
|
return '';
|
|
38
38
|
};
|
|
39
|
-
return (React__default.default.createElement(styled.ViewButton, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, ...props },
|
|
39
|
+
return (React__default.default.createElement(styled.ViewButton, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count && ariaContext ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, "aria-describedby": ariaDescribedBy, ...props },
|
|
40
40
|
React__default.default.createElement(styled.Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
|
|
41
41
|
iconSlot && React__default.default.createElement(styled.CustomIconWrapper, null, iconSlot),
|
|
42
42
|
React__default.default.createElement(Text.Text, { variant: "bodyBold" }, name),
|
|
43
|
-
count !== undefined && count !== null && (React__default.default.createElement(styled.CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour },
|
|
44
|
-
React__default.default.createElement(styled.CounterText, { variant: "subheadingSmall" }, count))),
|
|
43
|
+
(countSlot || (count !== undefined && count !== null)) && (React__default.default.createElement(styled.CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour }, countSlot || React__default.default.createElement(styled.CounterText, { variant: "subheadingSmall" }, count))),
|
|
45
44
|
isDraft && React__default.default.createElement(styled.CrossIconStyling, { ...styled.IconStyling, "aria-label": "delete icon" }),
|
|
46
45
|
isSaved && active && React__default.default.createElement(styled.ThreeDotsIconStyling, { ...styled.IconStyling, "aria-label": "edit icon" }))));
|
|
47
46
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n Contour,\n CounterContainer,\n CounterText,\n CrossIconStyling,\n CustomIconWrapper,\n IconStyling,\n Text,\n ThreeDotsIconStyling,\n ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n delete?: string;\n edit?: string;\n container?: string;\n active?: string;\n counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n delete: prefix ? `${prefix}-delete` : undefined,\n edit: prefix ? `${prefix}-edit` : undefined,\n container: prefix ? `${prefix}-view` : undefined,\n active: prefix ? `${prefix}-active` : undefined,\n counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n (\n {\n id,\n iconSlot,\n name,\n type,\n className,\n colourPalette = colors.secondary.blue,\n customTextColour,\n count,\n active = false,\n onClick,\n subAction,\n ariaContext,\n ...props\n }: ViewTabProps,\n ref: Ref<HTMLButtonElement>,\n ) => {\n const classNames = generateClassNames(className);\n const [isHovered, handleEnter, handleLeave] = useHover();\n\n const action = active && subAction ? subAction : onClick;\n const handleAction = () => action(id);\n\n const isDraft = type === ViewTabTypes.draft;\n const isSaved = type === ViewTabTypes.saved;\n\n const getLabelAction = () => {\n if (active && isDraft) return 'Delete';\n if (active && isSaved) return 'Edit';\n return '';\n };\n\n return (\n <ViewButton\n className={buildClassnames([classNames?.container])}\n onClick={handleAction}\n role=\"tab\"\n aria-selected={active}\n aria-label={`${getLabelAction()} ${name} view ${\n count ? `with ${count} ${ariaContext}` : ''\n }`}\n customTextColour={customTextColour}\n ref={ref}\n {...props}\n >\n <Contour\n active={active}\n onMouseEnter={handleEnter}\n onMouseLeave={handleLeave}\n colourPalette={colourPalette}\n customTextColour={customTextColour}\n >\n {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n <Text variant=\"bodyBold\">{name}</Text>\n {count !== undefined && count !== null && (\n <CounterContainer\n data-testid=\"countContainer\"\n active={active || isHovered}\n colourPalette={colourPalette}\n customTextColour={customTextColour}\n >\n <CounterText variant=\"subheadingSmall\">{count}</CounterText
|
|
1
|
+
{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n Contour,\n CounterContainer,\n CounterText,\n CrossIconStyling,\n CustomIconWrapper,\n IconStyling,\n Text,\n ThreeDotsIconStyling,\n ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n delete?: string;\n edit?: string;\n container?: string;\n active?: string;\n counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n delete: prefix ? `${prefix}-delete` : undefined,\n edit: prefix ? `${prefix}-edit` : undefined,\n container: prefix ? `${prefix}-view` : undefined,\n active: prefix ? `${prefix}-active` : undefined,\n counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n (\n {\n id,\n iconSlot,\n name,\n type,\n className,\n colourPalette = colors.secondary.blue,\n customTextColour,\n count,\n countSlot,\n active = false,\n onClick,\n subAction,\n ariaContext,\n ariaDescribedBy,\n ...props\n }: ViewTabProps,\n ref: Ref<HTMLButtonElement>,\n ) => {\n const classNames = generateClassNames(className);\n const [isHovered, handleEnter, handleLeave] = useHover();\n\n const action = active && subAction ? subAction : onClick;\n const handleAction = () => action(id);\n\n const isDraft = type === ViewTabTypes.draft;\n const isSaved = type === ViewTabTypes.saved;\n\n const getLabelAction = () => {\n if (active && isDraft) return 'Delete';\n if (active && isSaved) return 'Edit';\n return '';\n };\n\n return (\n <ViewButton\n className={buildClassnames([classNames?.container])}\n onClick={handleAction}\n role=\"tab\"\n aria-selected={active}\n aria-label={`${getLabelAction()} ${name} view ${\n count && ariaContext ? `with ${count} ${ariaContext}` : ''\n }`}\n customTextColour={customTextColour}\n ref={ref}\n aria-describedby={ariaDescribedBy}\n {...props}\n >\n <Contour\n active={active}\n onMouseEnter={handleEnter}\n onMouseLeave={handleLeave}\n colourPalette={colourPalette}\n customTextColour={customTextColour}\n >\n {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n <Text variant=\"bodyBold\">{name}</Text>\n {(countSlot || (count !== undefined && count !== null)) && (\n <CounterContainer\n data-testid=\"countContainer\"\n active={active || isHovered}\n colourPalette={colourPalette}\n customTextColour={customTextColour}\n >\n {countSlot || <CounterText variant=\"subheadingSmall\">{count}</CounterText>}\n </CounterContainer>\n )}\n {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n </Contour>\n </ViewButton>\n );\n },\n);\n"],"names":["React","colors","useHover","ViewTabTypes","ViewButton","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIconStyling","IconStyling","ThreeDotsIconStyling"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAS,OAAA,CAAA,GAAG,SAAS;IAC/C,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAO,KAAA,CAAA,GAAG,SAAS;IAC3C,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAO,KAAA,CAAA,GAAG,SAAS;IAChD,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAS,OAAA,CAAA,GAAG,SAAS;IAC/C,OAAO,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAU,QAAA,CAAA,GAAG,SAAS;AAClD,CAAA,CAAC;AAEW,MAAA,OAAO,GAAGA,sBAAK,CAAC,UAAU,CACrC,CACE,EACE,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,aAAa,GAAGC,aAAM,CAAC,SAAS,CAAC,IAAI,EACrC,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,MAAM,GAAG,KAAK,EACd,OAAO,EACP,SAAS,EACT,WAAW,EACX,eAAe,EACf,GAAG,KAAK,EACK,EACf,GAA2B,KACzB;AACF,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,GAAGC,iBAAQ,EAAE;AAExD,IAAA,MAAM,MAAM,GAAG,MAAM,IAAI,SAAS,GAAG,SAAS,GAAG,OAAO;IACxD,MAAM,YAAY,GAAG,MAAM,MAAM,CAAC,EAAE,CAAC;AAErC,IAAA,MAAM,OAAO,GAAG,IAAI,KAAKC,kBAAY,CAAC,KAAK;AAC3C,IAAA,MAAM,OAAO,GAAG,IAAI,KAAKA,kBAAY,CAAC,KAAK;IAE3C,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,MAAM,IAAI,OAAO;AAAE,YAAA,OAAO,QAAQ;QACtC,IAAI,MAAM,IAAI,OAAO;AAAE,YAAA,OAAO,MAAM;AACpC,QAAA,OAAO,EAAE;AACX,KAAC;AAED,IAAA,QACEH,sBAAA,CAAA,aAAA,CAACI,iBAAU,EAAA,EACT,SAAS,EAAEC,+BAAe,CAAC,CAAC,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,SAAA,GAAA,SAAA,GAAA,UAAU,CAAE,SAAS,CAAC,CAAC,EACnD,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,KAAK,EACK,eAAA,EAAA,MAAM,gBACT,CAAG,EAAA,cAAc,EAAE,CAAA,CAAA,EAAI,IAAI,CAAA,MAAA,EACrC,KAAK,IAAI,WAAW,GAAG,CAAQ,KAAA,EAAA,KAAK,CAAI,CAAA,EAAA,WAAW,CAAE,CAAA,GAAG,EAC1D,CAAA,CAAE,EACF,gBAAgB,EAAE,gBAAgB,EAClC,GAAG,EAAE,GAAG,EACU,kBAAA,EAAA,eAAe,KAC7B,KAAK,EAAA;QAETL,sBAAC,CAAA,aAAA,CAAAM,cAAO,IACN,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,WAAW,EACzB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAAA;AAEjC,YAAA,QAAQ,IAAIN,sBAAA,CAAA,aAAA,CAACO,wBAAiB,EAAA,IAAA,EAAE,QAAQ,CAAqB;AAC9D,YAAAP,sBAAA,CAAA,aAAA,CAACQ,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,IAAI,CAAQ;YACrC,CAAC,SAAS,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,MACpDR,sBAAC,CAAA,aAAA,CAAAS,uBAAgB,mBACH,gBAAgB,EAC5B,MAAM,EAAE,MAAM,IAAI,SAAS,EAC3B,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAEjC,EAAA,SAAS,IAAIT,sBAAC,CAAA,aAAA,CAAAU,kBAAW,IAAC,OAAO,EAAC,iBAAiB,EAAE,EAAA,KAAK,CAAe,CACzD,CACpB;AACA,YAAA,OAAO,IAAIV,sBAAC,CAAA,aAAA,CAAAW,uBAAgB,OAAKC,kBAAW,EAAA,YAAA,EAAa,aAAa,EAAG,CAAA;AACzE,YAAA,OAAO,IAAI,MAAM,IAAIZ,sBAAA,CAAA,aAAA,CAACa,2BAAoB,EAAA,EAAA,GAAKD,kBAAW,EAAA,YAAA,EAAa,WAAW,EAAA,CAAG,CAC9E,CACC;AAEjB,CAAC;;;;"}
|
|
@@ -15,7 +15,9 @@ export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonH
|
|
|
15
15
|
id: string;
|
|
16
16
|
type?: "fixed" | "saved" | "draft" | undefined;
|
|
17
17
|
count?: string | number | null | undefined;
|
|
18
|
+
countSlot?: React.ReactNode;
|
|
18
19
|
onClick: (id: string) => void;
|
|
19
20
|
subAction?: ((id: string) => void) | undefined;
|
|
20
|
-
ariaContext
|
|
21
|
+
ariaContext?: string | undefined;
|
|
22
|
+
ariaDescribedBy?: string | undefined;
|
|
21
23
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -16,7 +16,7 @@ const generateClassNames = (prefix) => ({
|
|
|
16
16
|
active: prefix ? `${prefix}-active` : undefined,
|
|
17
17
|
counter: prefix ? `${prefix}-counter` : undefined,
|
|
18
18
|
});
|
|
19
|
-
const ViewTab = React__default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.secondary.blue, customTextColour, count, active = false, onClick, subAction, ariaContext, ...props }, ref) => {
|
|
19
|
+
const ViewTab = React__default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.secondary.blue, customTextColour, count, countSlot, active = false, onClick, subAction, ariaContext, ariaDescribedBy, ...props }, ref) => {
|
|
20
20
|
const classNames = generateClassNames(className);
|
|
21
21
|
const [isHovered, handleEnter, handleLeave] = useHover();
|
|
22
22
|
const action = active && subAction ? subAction : onClick;
|
|
@@ -30,12 +30,11 @@ const ViewTab = React__default.forwardRef(({ id, iconSlot, name, type, className
|
|
|
30
30
|
return 'Edit';
|
|
31
31
|
return '';
|
|
32
32
|
};
|
|
33
|
-
return (React__default.createElement(ViewButton, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, ...props },
|
|
33
|
+
return (React__default.createElement(ViewButton, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count && ariaContext ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, "aria-describedby": ariaDescribedBy, ...props },
|
|
34
34
|
React__default.createElement(Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
|
|
35
35
|
iconSlot && React__default.createElement(CustomIconWrapper, null, iconSlot),
|
|
36
36
|
React__default.createElement(Text, { variant: "bodyBold" }, name),
|
|
37
|
-
count !== undefined && count !== null && (React__default.createElement(CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour },
|
|
38
|
-
React__default.createElement(CounterText, { variant: "subheadingSmall" }, count))),
|
|
37
|
+
(countSlot || (count !== undefined && count !== null)) && (React__default.createElement(CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour }, countSlot || React__default.createElement(CounterText, { variant: "subheadingSmall" }, count))),
|
|
39
38
|
isDraft && React__default.createElement(CrossIconStyling, { ...IconStyling, "aria-label": "delete icon" }),
|
|
40
39
|
isSaved && active && React__default.createElement(ThreeDotsIconStyling, { ...IconStyling, "aria-label": "edit icon" }))));
|
|
41
40
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n Contour,\n CounterContainer,\n CounterText,\n CrossIconStyling,\n CustomIconWrapper,\n IconStyling,\n Text,\n ThreeDotsIconStyling,\n ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n delete?: string;\n edit?: string;\n container?: string;\n active?: string;\n counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n delete: prefix ? `${prefix}-delete` : undefined,\n edit: prefix ? `${prefix}-edit` : undefined,\n container: prefix ? `${prefix}-view` : undefined,\n active: prefix ? `${prefix}-active` : undefined,\n counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n (\n {\n id,\n iconSlot,\n name,\n type,\n className,\n colourPalette = colors.secondary.blue,\n customTextColour,\n count,\n active = false,\n onClick,\n subAction,\n ariaContext,\n ...props\n }: ViewTabProps,\n ref: Ref<HTMLButtonElement>,\n ) => {\n const classNames = generateClassNames(className);\n const [isHovered, handleEnter, handleLeave] = useHover();\n\n const action = active && subAction ? subAction : onClick;\n const handleAction = () => action(id);\n\n const isDraft = type === ViewTabTypes.draft;\n const isSaved = type === ViewTabTypes.saved;\n\n const getLabelAction = () => {\n if (active && isDraft) return 'Delete';\n if (active && isSaved) return 'Edit';\n return '';\n };\n\n return (\n <ViewButton\n className={buildClassnames([classNames?.container])}\n onClick={handleAction}\n role=\"tab\"\n aria-selected={active}\n aria-label={`${getLabelAction()} ${name} view ${\n count ? `with ${count} ${ariaContext}` : ''\n }`}\n customTextColour={customTextColour}\n ref={ref}\n {...props}\n >\n <Contour\n active={active}\n onMouseEnter={handleEnter}\n onMouseLeave={handleLeave}\n colourPalette={colourPalette}\n customTextColour={customTextColour}\n >\n {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n <Text variant=\"bodyBold\">{name}</Text>\n {count !== undefined && count !== null && (\n <CounterContainer\n data-testid=\"countContainer\"\n active={active || isHovered}\n colourPalette={colourPalette}\n customTextColour={customTextColour}\n >\n <CounterText variant=\"subheadingSmall\">{count}</CounterText
|
|
1
|
+
{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n Contour,\n CounterContainer,\n CounterText,\n CrossIconStyling,\n CustomIconWrapper,\n IconStyling,\n Text,\n ThreeDotsIconStyling,\n ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n delete?: string;\n edit?: string;\n container?: string;\n active?: string;\n counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n delete: prefix ? `${prefix}-delete` : undefined,\n edit: prefix ? `${prefix}-edit` : undefined,\n container: prefix ? `${prefix}-view` : undefined,\n active: prefix ? `${prefix}-active` : undefined,\n counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n (\n {\n id,\n iconSlot,\n name,\n type,\n className,\n colourPalette = colors.secondary.blue,\n customTextColour,\n count,\n countSlot,\n active = false,\n onClick,\n subAction,\n ariaContext,\n ariaDescribedBy,\n ...props\n }: ViewTabProps,\n ref: Ref<HTMLButtonElement>,\n ) => {\n const classNames = generateClassNames(className);\n const [isHovered, handleEnter, handleLeave] = useHover();\n\n const action = active && subAction ? subAction : onClick;\n const handleAction = () => action(id);\n\n const isDraft = type === ViewTabTypes.draft;\n const isSaved = type === ViewTabTypes.saved;\n\n const getLabelAction = () => {\n if (active && isDraft) return 'Delete';\n if (active && isSaved) return 'Edit';\n return '';\n };\n\n return (\n <ViewButton\n className={buildClassnames([classNames?.container])}\n onClick={handleAction}\n role=\"tab\"\n aria-selected={active}\n aria-label={`${getLabelAction()} ${name} view ${\n count && ariaContext ? `with ${count} ${ariaContext}` : ''\n }`}\n customTextColour={customTextColour}\n ref={ref}\n aria-describedby={ariaDescribedBy}\n {...props}\n >\n <Contour\n active={active}\n onMouseEnter={handleEnter}\n onMouseLeave={handleLeave}\n colourPalette={colourPalette}\n customTextColour={customTextColour}\n >\n {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n <Text variant=\"bodyBold\">{name}</Text>\n {(countSlot || (count !== undefined && count !== null)) && (\n <CounterContainer\n data-testid=\"countContainer\"\n active={active || isHovered}\n colourPalette={colourPalette}\n customTextColour={customTextColour}\n >\n {countSlot || <CounterText variant=\"subheadingSmall\">{count}</CounterText>}\n </CounterContainer>\n )}\n {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n </Contour>\n </ViewButton>\n );\n },\n);\n"],"names":["React"],"mappings":"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"}
|
|
@@ -18,11 +18,22 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
|
18
18
|
const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
|
|
19
19
|
const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
|
|
20
20
|
const CrossIconStyling = styled__default.default(CrossIcon.ReactComponent).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
|
|
21
|
-
const CounterContainer = styled__default.default
|
|
21
|
+
const CounterContainer = styled__default.default.div.withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
|
|
22
22
|
`
|
|
23
23
|
background-color: ${colourPalette.dark};
|
|
24
24
|
|
|
25
|
-
&
|
|
25
|
+
& ${CounterText} {
|
|
26
|
+
color: ${colors.colors.neutral.grey.lightest};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Force all text elements to be white when active, used when using slot */
|
|
30
|
+
& ${Text.Text} {
|
|
31
|
+
color: ${colors.colors.neutral.grey.lightest} !important;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Force all SVG icons to be white when active, used when using slot */
|
|
35
|
+
& svg {
|
|
36
|
+
fill: ${colors.colors.neutral.grey.lightest};
|
|
26
37
|
color: ${colors.colors.neutral.grey.lightest};
|
|
27
38
|
}
|
|
28
39
|
`}`;
|
|
@@ -35,6 +46,13 @@ const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig(
|
|
|
35
46
|
& > ${CounterText} {
|
|
36
47
|
color: ${colors.colors.neutral.ink.base};
|
|
37
48
|
}
|
|
49
|
+
& ${Text.Text} {
|
|
50
|
+
color: ${colors.colors.neutral.ink.base} !important;
|
|
51
|
+
}
|
|
52
|
+
& svg {
|
|
53
|
+
fill: ${colors.colors.neutral.ink.base};
|
|
54
|
+
color: ${colors.colors.neutral.ink.base};
|
|
55
|
+
}
|
|
38
56
|
}
|
|
39
57
|
& > ${Text.Text} {
|
|
40
58
|
color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
|
|
@@ -74,6 +92,13 @@ const ViewButton = styled__default.default(styled$1.FlatButton).withConfig({ dis
|
|
|
74
92
|
& > ${CounterText} {
|
|
75
93
|
color: ${colors.colors.neutral.ink.base};
|
|
76
94
|
}
|
|
95
|
+
& ${Text.Text} {
|
|
96
|
+
color: ${colors.colors.neutral.ink.base} !important;
|
|
97
|
+
}
|
|
98
|
+
& svg {
|
|
99
|
+
fill: ${colors.colors.neutral.ink.base};
|
|
100
|
+
color: ${colors.colors.neutral.ink.base};
|
|
101
|
+
}
|
|
77
102
|
}
|
|
78
103
|
& > ${Text.Text} {
|
|
79
104
|
color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled
|
|
1
|
+
{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled.div<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.dark};\n\n & ${CounterText} {\n color: ${colors.neutral.grey.lightest};\n }\n\n /* Force all text elements to be white when active, used when using slot */\n & ${Text} {\n color: ${colors.neutral.grey.lightest} !important;\n }\n\n /* Force all SVG icons to be white when active, used when using slot */\n & svg {\n fill: ${colors.neutral.grey.lightest};\n color: ${colors.neutral.grey.lightest};\n }\n `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: ${theme.sizes.sm};\n border: 1px solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n ${({ customTextColour }) => `\n\n &:hover {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n & ${Text} {\n color: ${colors.neutral.ink.base} !important;\n }\n & svg {\n fill: ${colors.neutral.ink.base};\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette, customTextColour }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n\n & > ${ThreeDotsIconStyling} {\n color: ${colourPalette.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colourPalette.dark};\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colourPalette.dark};\n }\n `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n padding: ${theme.sizes.sm};\n box-sizing: border-box;\n border-radius: 4px;\n border: none;\n position: relative;\n margin: 0;\n padding: 0;\n\n ${({ customTextColour }) => `\n &:focus-visible {\n ${Contour} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n & ${Text} {\n color: ${colors.neutral.ink.base} !important;\n }\n & svg {\n fill: ${colors.neutral.ink.base};\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport {\n ViewButton,\n Contour,\n Text,\n CounterContainer,\n CounterText,\n IconStyling,\n ThreeDotsIconStyling,\n CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":"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"}
|
|
@@ -11,7 +11,7 @@ export type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;
|
|
|
11
11
|
declare const CounterText: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
|
|
12
12
|
declare const ThreeDotsIconStyling: import("styled-components").StyledComponent<(props: import("../../icons/types").IconComponentProps) => import("react").JSX.Element, any, {}, never>;
|
|
13
13
|
declare const CrossIconStyling: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {}, never>;
|
|
14
|
-
declare const CounterContainer: import("styled-components").StyledComponent<"
|
|
14
|
+
declare const CounterContainer: import("styled-components").StyledComponent<"div", any, Pick<ViewTabProps, "active" | "customTextColour"> & RequiredPalette, never>;
|
|
15
15
|
declare const Contour: import("styled-components").StyledComponent<"div", any, Pick<ViewTabProps, "active" | "customTextColour"> & RequiredPalette, never>;
|
|
16
16
|
declare const ViewButton: import("styled-components").StyledComponent<any, any, object & ViewButtonProps, string | number | symbol>;
|
|
17
17
|
declare const IconStyling: {
|
|
@@ -12,11 +12,22 @@ import { theme } from '../../theme/index.js';
|
|
|
12
12
|
const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
|
|
13
13
|
const ThreeDotsIconStyling = styled(ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
|
|
14
14
|
const CrossIconStyling = styled(CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
|
|
15
|
-
const CounterContainer = styled
|
|
15
|
+
const CounterContainer = styled.div.withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
|
|
16
16
|
`
|
|
17
17
|
background-color: ${colourPalette.dark};
|
|
18
18
|
|
|
19
|
-
&
|
|
19
|
+
& ${CounterText} {
|
|
20
|
+
color: ${colors.neutral.grey.lightest};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Force all text elements to be white when active, used when using slot */
|
|
24
|
+
& ${Text} {
|
|
25
|
+
color: ${colors.neutral.grey.lightest} !important;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Force all SVG icons to be white when active, used when using slot */
|
|
29
|
+
& svg {
|
|
30
|
+
fill: ${colors.neutral.grey.lightest};
|
|
20
31
|
color: ${colors.neutral.grey.lightest};
|
|
21
32
|
}
|
|
22
33
|
`}`;
|
|
@@ -29,6 +40,13 @@ const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour",
|
|
|
29
40
|
& > ${CounterText} {
|
|
30
41
|
color: ${colors.neutral.ink.base};
|
|
31
42
|
}
|
|
43
|
+
& ${Text} {
|
|
44
|
+
color: ${colors.neutral.ink.base} !important;
|
|
45
|
+
}
|
|
46
|
+
& svg {
|
|
47
|
+
fill: ${colors.neutral.ink.base};
|
|
48
|
+
color: ${colors.neutral.ink.base};
|
|
49
|
+
}
|
|
32
50
|
}
|
|
33
51
|
& > ${Text} {
|
|
34
52
|
color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
|
|
@@ -68,6 +86,13 @@ const ViewButton = styled(FlatButton).withConfig({ displayName: "vui--ViewButton
|
|
|
68
86
|
& > ${CounterText} {
|
|
69
87
|
color: ${colors.neutral.ink.base};
|
|
70
88
|
}
|
|
89
|
+
& ${Text} {
|
|
90
|
+
color: ${colors.neutral.ink.base} !important;
|
|
91
|
+
}
|
|
92
|
+
& svg {
|
|
93
|
+
fill: ${colors.neutral.ink.base};
|
|
94
|
+
color: ${colors.neutral.ink.base};
|
|
95
|
+
}
|
|
71
96
|
}
|
|
72
97
|
& > ${Text} {
|
|
73
98
|
color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled.div<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ active, colourPalette }) =>\n active &&\n `\n background-color: ${colourPalette.dark};\n\n & ${CounterText} {\n color: ${colors.neutral.grey.lightest};\n }\n\n /* Force all text elements to be white when active, used when using slot */\n & ${Text} {\n color: ${colors.neutral.grey.lightest} !important;\n }\n\n /* Force all SVG icons to be white when active, used when using slot */\n & svg {\n fill: ${colors.neutral.grey.lightest};\n color: ${colors.neutral.grey.lightest};\n }\n `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: ${theme.sizes.sm};\n border: 1px solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n ${({ customTextColour }) => `\n\n &:hover {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n & ${Text} {\n color: ${colors.neutral.ink.base} !important;\n }\n & svg {\n fill: ${colors.neutral.ink.base};\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n `}\n\n ${({ active, colourPalette, customTextColour }) =>\n active &&\n `\n background-color: ${colourPalette.lightest};\n\n & > ${ThreeDotsIconStyling} {\n color: ${colourPalette.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colourPalette.dark};\n }\n\n & > ${Text} {\n color: ${customTextColour ?? colourPalette.dark};\n }\n `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n padding: ${theme.sizes.sm};\n box-sizing: border-box;\n border-radius: 4px;\n border: none;\n position: relative;\n margin: 0;\n padding: 0;\n\n ${({ customTextColour }) => `\n &:focus-visible {\n ${Contour} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterContainer} {\n background-color: ${colors.neutral.grey.base};\n & > ${CounterText} {\n color: ${colors.neutral.ink.base};\n }\n & ${Text} {\n color: ${colors.neutral.ink.base} !important;\n }\n & svg {\n fill: ${colors.neutral.ink.base};\n color: ${colors.neutral.ink.base};\n }\n }\n & > ${Text} {\n color: ${customTextColour ?? colors.neutral.ink.dark};\n }\n & > ${ThreeDotsIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n & > ${CrossIconStyling} {\n color: ${colors.neutral.ink.dark};\n }\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport {\n ViewButton,\n Contour,\n Text,\n CounterContainer,\n CounterText,\n IconStyling,\n ThreeDotsIconStyling,\n CrossIconStyling,\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n saved = 'saved',\n fixed = 'fixed',\n draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'onClick' | 'name' | 'id' | 'type'\n> & {\n /** Colour palette for the ViewTab */\n colourPalette?: ColourPalette;\n\n /** customTextColour - Custom Rest State colour */\n customTextColour?: string;\n\n /** Flag to toggle active state styles on the ViewTab */\n active?: boolean;\n\n /** ViewTab name, eg.: Jade's view */\n name: string;\n\n /** IconSlot for passing */\n iconSlot?: ReactElement;\n\n /** ViewTab's unique identifier */\n id: string;\n\n /** ViewTab type */\n type?: keyof typeof ViewTabTypes;\n\n /** Number or string value to show near viewTab label */\n count?: number | string | null;\n\n /** Event handler for when ViewTab component is clicked (should get activated) */\n onClick: (id: string) => void;\n\n /** Event handler for when ViewTab component is clicked and isActive */\n subAction?: (id: string) => void;\n\n /** Context used to add to aria label, (orders or products based on page) */\n ariaContext
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n saved = 'saved',\n fixed = 'fixed',\n draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'onClick' | 'name' | 'id' | 'type'\n> & {\n /** Colour palette for the ViewTab */\n colourPalette?: ColourPalette;\n\n /** customTextColour - Custom Rest State colour */\n customTextColour?: string;\n\n /** Flag to toggle active state styles on the ViewTab */\n active?: boolean;\n\n /** ViewTab name, eg.: Jade's view */\n name: string;\n\n /** IconSlot for passing */\n iconSlot?: ReactElement;\n\n /** ViewTab's unique identifier */\n id: string;\n\n /** ViewTab type */\n type?: keyof typeof ViewTabTypes;\n\n /** Number or string value to show near viewTab label */\n count?: number | string | null;\n\n /** Slot for custom count element */\n /** If countSlot is provided, it will override the count prop */\n countSlot?: ReactNode;\n\n /** Event handler for when ViewTab component is clicked (should get activated) */\n onClick: (id: string) => void;\n\n /** Event handler for when ViewTab component is clicked and isActive */\n subAction?: (id: string) => void;\n\n /** Context used to add to aria label, (orders or products based on page) */\n ariaContext?: string;\n\n /** Used to pass additonal context when using countSlot */\n ariaDescribedBy?: string;\n};\n"],"names":["ViewTabTypes"],"mappings":";;AAGYA;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJWA,oBAAY,KAAZA,oBAAY,GAIvB,EAAA,CAAA,CAAA;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes, ReactElement } from 'react';
|
|
1
|
+
import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { ColourPalette } from '../../theme/modules/colors';
|
|
3
3
|
export declare enum ViewTabTypes {
|
|
4
4
|
saved = "saved",
|
|
@@ -22,10 +22,15 @@ export type ViewTabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClic
|
|
|
22
22
|
type?: keyof typeof ViewTabTypes;
|
|
23
23
|
/** Number or string value to show near viewTab label */
|
|
24
24
|
count?: number | string | null;
|
|
25
|
+
/** Slot for custom count element */
|
|
26
|
+
/** If countSlot is provided, it will override the count prop */
|
|
27
|
+
countSlot?: ReactNode;
|
|
25
28
|
/** Event handler for when ViewTab component is clicked (should get activated) */
|
|
26
29
|
onClick: (id: string) => void;
|
|
27
30
|
/** Event handler for when ViewTab component is clicked and isActive */
|
|
28
31
|
subAction?: (id: string) => void;
|
|
29
32
|
/** Context used to add to aria label, (orders or products based on page) */
|
|
30
|
-
ariaContext
|
|
33
|
+
ariaContext?: string;
|
|
34
|
+
/** Used to pass additonal context when using countSlot */
|
|
35
|
+
ariaDescribedBy?: string;
|
|
31
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n saved = 'saved',\n fixed = 'fixed',\n draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'onClick' | 'name' | 'id' | 'type'\n> & {\n /** Colour palette for the ViewTab */\n colourPalette?: ColourPalette;\n\n /** customTextColour - Custom Rest State colour */\n customTextColour?: string;\n\n /** Flag to toggle active state styles on the ViewTab */\n active?: boolean;\n\n /** ViewTab name, eg.: Jade's view */\n name: string;\n\n /** IconSlot for passing */\n iconSlot?: ReactElement;\n\n /** ViewTab's unique identifier */\n id: string;\n\n /** ViewTab type */\n type?: keyof typeof ViewTabTypes;\n\n /** Number or string value to show near viewTab label */\n count?: number | string | null;\n\n /** Event handler for when ViewTab component is clicked (should get activated) */\n onClick: (id: string) => void;\n\n /** Event handler for when ViewTab component is clicked and isActive */\n subAction?: (id: string) => void;\n\n /** Context used to add to aria label, (orders or products based on page) */\n ariaContext
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/ViewTab/types.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { ColourPalette } from '../../theme/modules/colors';\n\nexport enum ViewTabTypes {\n saved = 'saved',\n fixed = 'fixed',\n draft = 'draft',\n}\n\nexport type ViewTabProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'onClick' | 'name' | 'id' | 'type'\n> & {\n /** Colour palette for the ViewTab */\n colourPalette?: ColourPalette;\n\n /** customTextColour - Custom Rest State colour */\n customTextColour?: string;\n\n /** Flag to toggle active state styles on the ViewTab */\n active?: boolean;\n\n /** ViewTab name, eg.: Jade's view */\n name: string;\n\n /** IconSlot for passing */\n iconSlot?: ReactElement;\n\n /** ViewTab's unique identifier */\n id: string;\n\n /** ViewTab type */\n type?: keyof typeof ViewTabTypes;\n\n /** Number or string value to show near viewTab label */\n count?: number | string | null;\n\n /** Slot for custom count element */\n /** If countSlot is provided, it will override the count prop */\n countSlot?: ReactNode;\n\n /** Event handler for when ViewTab component is clicked (should get activated) */\n onClick: (id: string) => void;\n\n /** Event handler for when ViewTab component is clicked and isActive */\n subAction?: (id: string) => void;\n\n /** Context used to add to aria label, (orders or products based on page) */\n ariaContext?: string;\n\n /** Used to pass additonal context when using countSlot */\n ariaDescribedBy?: string;\n};\n"],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAJW,YAAY,KAAZ,YAAY,GAIvB,EAAA,CAAA,CAAA;;;;"}
|