@veeqo/ui 13.12.0 → 13.12.2
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/README.md +7 -1
- package/dist/components/Alerts/Alert/Alert.cjs +3 -2
- package/dist/components/Alerts/Alert/Alert.cjs.map +1 -1
- package/dist/components/Alerts/Alert/Alert.js +3 -2
- package/dist/components/Alerts/Alert/Alert.js.map +1 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.cjs +3 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.cjs.map +1 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.js +3 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.js.map +1 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.cjs +2 -2
- package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.cjs.map +1 -1
- package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.js +2 -2
- package/dist/components/Slider/components/SliderHandle/SliderHandle.module.scss.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -43,6 +43,10 @@ _We currently deploy to NPM, which is an **automated process** once you merge._
|
|
|
43
43
|
|
|
44
44
|
Versioning will happen on the `package.json` version number, and is for the library as a whole instead of per component for simplicity.
|
|
45
45
|
|
|
46
|
+
**Production releases** happen automatically when you merge to `main`. The package is published to NPM with the `latest` tag.
|
|
47
|
+
|
|
48
|
+
**Beta releases** are triggered manually via GitHub Actions and publish with the `beta` tag (see below).
|
|
49
|
+
|
|
46
50
|
**After** you have made your changes, use `npm run patch` or `npm run minor` or `npm run major` according to the update size:
|
|
47
51
|
|
|
48
52
|
- This create update the version number by the amount specified in the command you entered above.
|
|
@@ -68,9 +72,11 @@ From this repo run `npm run build:tarball` this will create a tarball file, simi
|
|
|
68
72
|
|
|
69
73
|
1. Update version number to `<next-version>-beta-<attempt_num>`, i.e. 9.0.0-beta-2
|
|
70
74
|
2. Push your branch with the latest changes to Github, including the version number update
|
|
71
|
-
3. Navigate to <https://github.com/veeqo/veeqo-ui/actions/workflows/publish
|
|
75
|
+
3. Navigate to <https://github.com/veeqo/veeqo-ui/actions/workflows/publish.yml>
|
|
72
76
|
4. Click "Run workflow" and select the branch with your beta version
|
|
73
77
|
|
|
78
|
+
The workflow will validate the version format and publish with the `beta` tag to NPM.
|
|
79
|
+
|
|
74
80
|
Alternatively you can deploy to npm with a beta version, as long as you are part of our NPM org:
|
|
75
81
|
|
|
76
82
|
- Update version number to `<next-version>-beta-<attempt_num>`, i.e. 9.0.0-beta-2
|
|
@@ -29,8 +29,9 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
|
|
|
29
29
|
React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: Alert_module.iconTextContainer },
|
|
30
30
|
React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon, alignItems: "flex-start" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
|
|
31
31
|
children || (React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
|
|
32
|
-
titleSlot ||
|
|
33
|
-
|
|
32
|
+
titleSlot ||
|
|
33
|
+
(title && (React__default.default.createElement(Text.Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
|
|
34
|
+
messageSlot || (message && React__default.default.createElement(Text.Text, { variant: "body" }, message))))),
|
|
34
35
|
React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "flex-end", flexWrap: "nowrap", className: Alert_module.rightActionsContainer },
|
|
35
36
|
rightActionsSlot,
|
|
36
37
|
rightActions && (React__default.default.createElement(FlexCol.FlexCol, { justifyContent: "center", className: Alert_module.rightActions }, rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children || (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot
|
|
1
|
+
{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children || (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot ||\n (title && (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n ))}\n {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":"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"}
|
|
@@ -23,8 +23,9 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
|
|
|
23
23
|
React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: styles.iconTextContainer },
|
|
24
24
|
React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon, alignItems: "flex-start" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
|
|
25
25
|
children || (React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
|
|
26
|
-
titleSlot ||
|
|
27
|
-
|
|
26
|
+
titleSlot ||
|
|
27
|
+
(title && (React__default.createElement(Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title))),
|
|
28
|
+
messageSlot || (message && React__default.createElement(Text, { variant: "body" }, message))))),
|
|
28
29
|
React__default.createElement(FlexRow, { justifyContent: "flex-end", flexWrap: "nowrap", className: styles.rightActionsContainer },
|
|
29
30
|
rightActionsSlot,
|
|
30
31
|
rightActions && (React__default.createElement(FlexCol, { justifyContent: "center", className: styles.rightActions }, rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children || (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children || (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot ||\n (title && (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n ))}\n {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var buildClassnames = require('../../../../utils/buildClassnames.cjs');
|
|
5
5
|
var SliderHandle_module = require('./SliderHandle.module.scss.cjs');
|
|
6
|
+
var Text = require('../../../Text/Text.cjs');
|
|
6
7
|
|
|
7
8
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
8
9
|
|
|
@@ -15,7 +16,8 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
15
16
|
const SliderHandle = React__default.default.forwardRef(({ horizontalPosition, value, min, max, disabled, isActive, showLabel, className, ariaLabel, ariaLabelledBy, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, }, ref) => {
|
|
16
17
|
const positionStyle = { left: `${horizontalPosition}%` };
|
|
17
18
|
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
18
|
-
showLabel && (React__default.default.createElement("div", { className: SliderHandle_module.valueLabel, style: positionStyle, "data-testid": "slider-value-label" },
|
|
19
|
+
showLabel && (React__default.default.createElement("div", { className: SliderHandle_module.valueLabel, style: positionStyle, "data-testid": "slider-value-label" },
|
|
20
|
+
React__default.default.createElement(Text.Text, null, value))),
|
|
19
21
|
React__default.default.createElement("div", { ref: ref, role: "slider", "aria-orientation": "horizontal", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: buildClassnames.buildClassnames([SliderHandle_module.slider, className]), style: positionStyle, "data-disabled": disabled, "data-active": isActive, "data-testid": "slider-handle", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown })));
|
|
20
22
|
});
|
|
21
23
|
SliderHandle.displayName = 'SliderHandle';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderHandle.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n (\n {\n horizontalPosition,\n value,\n min,\n max,\n disabled,\n isActive,\n showLabel,\n className,\n ariaLabel,\n ariaLabelledBy,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n },\n ref,\n ) => {\n const positionStyle = { left: `${horizontalPosition}%` };\n\n return (\n <>\n {showLabel && (\n <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n {value}
|
|
1
|
+
{"version":3,"file":"SliderHandle.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\nimport { Text } from '../../../Text';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n (\n {\n horizontalPosition,\n value,\n min,\n max,\n disabled,\n isActive,\n showLabel,\n className,\n ariaLabel,\n ariaLabelledBy,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n },\n ref,\n ) => {\n const positionStyle = { left: `${horizontalPosition}%` };\n\n return (\n <>\n {showLabel && (\n <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n <Text>{value}</Text>\n </div>\n )}\n <div\n ref={ref}\n role=\"slider\"\n aria-orientation=\"horizontal\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={buildClassnames([styles.slider, className])}\n style={positionStyle}\n data-disabled={disabled}\n data-active={isActive}\n data-testid=\"slider-handle\"\n tabIndex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-disabled={disabled}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n />\n </>\n );\n },\n);\n\nSliderHandle.displayName = 'SliderHandle';\n"],"names":["React","styles","Text","buildClassnames"],"mappings":";;;;;;;;;;;AAMA;;;AAGG;MACU,YAAY,GAAGA,sBAAK,CAAC,UAAU,CAC1C,CACE,EACE,kBAAkB,EAClB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,GACV,EACD,GAAG,KACD;IACF,MAAM,aAAa,GAAG,EAAE,IAAI,EAAE,CAAG,EAAA,kBAAkB,CAAG,CAAA,CAAA,EAAE;AAExD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,SAAS,KACRA,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAM,CAAC,UAAU,EAAE,KAAK,EAAE,aAAa,iBAAc,oBAAoB,EAAA;AACvF,YAAAD,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,IAAA,EAAE,KAAK,CAAQ,CAChB,CACP;AACD,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACI,kBAAA,EAAA,YAAY,EACjB,YAAA,EAAA,SAAS,qBACJ,cAAc,EAC/B,SAAS,EAAEG,+BAAe,CAAC,CAACF,mBAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EAAE,aAAa,EAAA,eAAA,EACL,QAAQ,EAAA,aAAA,EACV,QAAQ,EACT,aAAA,EAAA,eAAe,EAC3B,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,eAAA,EACZ,GAAG,EACH,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,mBACL,QAAQ,EACvB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,CAAA,CACD;AAEP,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { buildClassnames } from '../../../../utils/buildClassnames.js';
|
|
3
3
|
import styles from './SliderHandle.module.scss.js';
|
|
4
|
+
import { Text } from '../../../Text/Text.js';
|
|
4
5
|
|
|
5
6
|
/**
|
|
6
7
|
* Slider handle component that renders the draggable handle and optional value label.
|
|
@@ -9,7 +10,8 @@ import styles from './SliderHandle.module.scss.js';
|
|
|
9
10
|
const SliderHandle = React__default.forwardRef(({ horizontalPosition, value, min, max, disabled, isActive, showLabel, className, ariaLabel, ariaLabelledBy, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, }, ref) => {
|
|
10
11
|
const positionStyle = { left: `${horizontalPosition}%` };
|
|
11
12
|
return (React__default.createElement(React__default.Fragment, null,
|
|
12
|
-
showLabel && (React__default.createElement("div", { className: styles.valueLabel, style: positionStyle, "data-testid": "slider-value-label" },
|
|
13
|
+
showLabel && (React__default.createElement("div", { className: styles.valueLabel, style: positionStyle, "data-testid": "slider-value-label" },
|
|
14
|
+
React__default.createElement(Text, null, value))),
|
|
13
15
|
React__default.createElement("div", { ref: ref, role: "slider", "aria-orientation": "horizontal", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: buildClassnames([styles.slider, className]), style: positionStyle, "data-disabled": disabled, "data-active": isActive, "data-testid": "slider-handle", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown })));
|
|
14
16
|
});
|
|
15
17
|
SliderHandle.displayName = 'SliderHandle';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderHandle.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n (\n {\n horizontalPosition,\n value,\n min,\n max,\n disabled,\n isActive,\n showLabel,\n className,\n ariaLabel,\n ariaLabelledBy,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n },\n ref,\n ) => {\n const positionStyle = { left: `${horizontalPosition}%` };\n\n return (\n <>\n {showLabel && (\n <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n {value}
|
|
1
|
+
{"version":3,"file":"SliderHandle.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\nimport styles from './SliderHandle.module.scss';\nimport { SliderHandleProps } from './types';\nimport { Text } from '../../../Text';\n\n/**\n * Slider handle component that renders the draggable handle and optional value label.\n * Positioned dynamically based on the slider value.\n */\nexport const SliderHandle = React.forwardRef<HTMLDivElement, SliderHandleProps>(\n (\n {\n horizontalPosition,\n value,\n min,\n max,\n disabled,\n isActive,\n showLabel,\n className,\n ariaLabel,\n ariaLabelledBy,\n onMouseDown,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n },\n ref,\n ) => {\n const positionStyle = { left: `${horizontalPosition}%` };\n\n return (\n <>\n {showLabel && (\n <div className={styles.valueLabel} style={positionStyle} data-testid=\"slider-value-label\">\n <Text>{value}</Text>\n </div>\n )}\n <div\n ref={ref}\n role=\"slider\"\n aria-orientation=\"horizontal\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={buildClassnames([styles.slider, className])}\n style={positionStyle}\n data-disabled={disabled}\n data-active={isActive}\n data-testid=\"slider-handle\"\n tabIndex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-disabled={disabled}\n onMouseDown={onMouseDown}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n />\n </>\n );\n },\n);\n\nSliderHandle.displayName = 'SliderHandle';\n"],"names":["React"],"mappings":";;;;;AAMA;;;AAGG;MACU,YAAY,GAAGA,cAAK,CAAC,UAAU,CAC1C,CACE,EACE,kBAAkB,EAClB,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,GACV,EACD,GAAG,KACD;IACF,MAAM,aAAa,GAAG,EAAE,IAAI,EAAE,CAAG,EAAA,kBAAkB,CAAG,CAAA,CAAA,EAAE;AAExD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,SAAS,KACRA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,EAAE,aAAa,iBAAc,oBAAoB,EAAA;AACvF,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAE,KAAK,CAAQ,CAChB,CACP;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACI,kBAAA,EAAA,YAAY,EACjB,YAAA,EAAA,SAAS,qBACJ,cAAc,EAC/B,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EAAE,aAAa,EAAA,eAAA,EACL,QAAQ,EAAA,aAAA,EACV,QAAQ,EACT,aAAA,EAAA,eAAe,EAC3B,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,eAAA,EACZ,GAAG,EACH,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,mBACL,QAAQ,EACvB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,CAAA,CACD;AAEP,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"slider":"
|
|
5
|
+
___$insertStyle("._slider_1wjvc_1 {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n box-sizing: border-box;\n}\n\n._slider_1wjvc_1[data-active=true] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_1wjvc_1:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_1wjvc_1[data-disabled=true] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n._valueLabel_1wjvc_30 {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n padding: var(--sizes-1) var(--sizes-2);\n border-radius: var(--sizes-1);\n white-space: nowrap;\n line-height: 1;\n}\n._valueLabel_1wjvc_30 span {\n color: var(--colors-neutral-grey-lightest);\n}");
|
|
6
|
+
var styles = {"slider":"_slider_1wjvc_1","valueLabel":"_valueLabel_1wjvc_30"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=SliderHandle.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderHandle.module.scss.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n}\n\n.slider[data-active='true'] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.valueLabel {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n
|
|
1
|
+
{"version":3,"file":"SliderHandle.module.scss.cjs","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n box-sizing: border-box;\n}\n\n.slider[data-active='true'] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.valueLabel {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n padding: var(--sizes-1) var(--sizes-2);\n border-radius: var(--sizes-1);\n white-space: nowrap;\n line-height: 1;\n\n span {\n color: var(--colors-neutral-grey-lightest);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,0oCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"slider":"
|
|
3
|
+
insertStyle("._slider_1wjvc_1 {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n box-sizing: border-box;\n}\n\n._slider_1wjvc_1[data-active=true] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_1wjvc_1:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n._slider_1wjvc_1[data-disabled=true] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n._valueLabel_1wjvc_30 {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n padding: var(--sizes-1) var(--sizes-2);\n border-radius: var(--sizes-1);\n white-space: nowrap;\n line-height: 1;\n}\n._valueLabel_1wjvc_30 span {\n color: var(--colors-neutral-grey-lightest);\n}");
|
|
4
|
+
var styles = {"slider":"_slider_1wjvc_1","valueLabel":"_valueLabel_1wjvc_30"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=SliderHandle.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderHandle.module.scss.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n}\n\n.slider[data-active='true'] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.valueLabel {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n
|
|
1
|
+
{"version":3,"file":"SliderHandle.module.scss.js","sources":["../../../../../src/components/Slider/components/SliderHandle/SliderHandle.module.scss"],"sourcesContent":[".slider {\n position: absolute;\n top: calc((var(--slider-size) - var(--track-height)) / 2);\n width: var(--slider-size);\n height: var(--slider-size);\n background: white;\n border: var(--border-size) solid var(--colors-secondary-blue-base);\n border-radius: var(--radius-full);\n cursor: pointer;\n pointer-events: auto;\n transform: translateX(-50%);\n box-sizing: border-box;\n}\n\n.slider[data-active='true'] {\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--sizes-1) var(--colors-secondary-blue-light);\n}\n\n.slider[data-disabled='true'] {\n border-color: var(--colors-neutral-grey-base);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.valueLabel {\n position: absolute;\n top: calc(var(--sizes-7) * -1);\n transform: translateX(-50%);\n background: var(--colors-secondary-blue-base);\n padding: var(--sizes-1) var(--sizes-2);\n border-radius: var(--sizes-1);\n white-space: nowrap;\n line-height: 1;\n\n span {\n color: var(--colors-neutral-grey-lightest);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,0oCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
|