@seeqdev/qomponents 0.0.112 → 0.0.114
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/Alert/Alert.types.d.ts +5 -2
- package/dist/Collapse/Collapse.d.ts +4 -0
- package/dist/Collapse/Collapse.js +20 -0
- package/dist/Collapse/Collapse.js.map +1 -0
- package/dist/Collapse/Collapse.stories.d.ts +5 -0
- package/dist/Collapse/Collapse.stories.js +37 -0
- package/dist/Collapse/Collapse.stories.js.map +1 -0
- package/dist/Collapse/Collapse.test.d.ts +1 -0
- package/dist/Collapse/Collapse.test.js +24 -0
- package/dist/Collapse/Collapse.test.js.map +1 -0
- package/dist/Collapse/Collapse.types.d.ts +4 -0
- package/dist/Collapse/Collapse.types.js +2 -0
- package/dist/Collapse/Collapse.types.js.map +1 -0
- package/dist/Collapse/index.d.ts +1 -0
- package/dist/Collapse/index.js +2 -0
- package/dist/Collapse/index.js.map +1 -0
- package/dist/InputGroup/InputGroup.types.d.ts +1 -1
- package/dist/InputGroup/index.d.ts +1 -0
- package/dist/ProgressBar/ProgressBar.types.d.ts +2 -0
- package/dist/index.esm.js +15 -12
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +15 -12
- package/dist/index.js.map +1 -1
- package/dist/styles.css +17 -0
- package/package.json +1 -1
- package/dist/ProgressBar/ProgressBar.js +0 -16
- package/dist/ProgressBar/ProgressBar.js.map +0 -1
- package/dist/ProgressBar/ProgressBar.stories.js +0 -42
- package/dist/ProgressBar/ProgressBar.stories.js.map +0 -1
- package/dist/ProgressBar/ProgressBar.test.js +0 -32
- package/dist/ProgressBar/ProgressBar.test.js.map +0 -1
- package/dist/ProgressBar/ProgressBar.types.js +0 -2
- package/dist/ProgressBar/ProgressBar.types.js.map +0 -1
- package/dist/ProgressBar/index.js +0 -2
- package/dist/ProgressBar/index.js.map +0 -1
- package/dist/Slider/Slider.js +0 -13
- package/dist/Slider/Slider.js.map +0 -1
- package/dist/Slider/Slider.stories.js +0 -58
- package/dist/Slider/Slider.stories.js.map +0 -1
- package/dist/Slider/Slider.test.js +0 -38
- package/dist/Slider/Slider.test.js.map +0 -1
- package/dist/Slider/Slider.types.js +0 -2
- package/dist/Slider/Slider.types.js.map +0 -1
- package/dist/Slider/index.js +0 -2
- package/dist/Slider/index.js.map +0 -1
package/dist/styles.css
CHANGED
|
@@ -1838,6 +1838,10 @@ ol,
|
|
|
1838
1838
|
left: 50%;
|
|
1839
1839
|
}
|
|
1840
1840
|
|
|
1841
|
+
.tw-right-\[10px\] {
|
|
1842
|
+
right: 10px;
|
|
1843
|
+
}
|
|
1844
|
+
|
|
1841
1845
|
.tw-top-0 {
|
|
1842
1846
|
top: 0px;
|
|
1843
1847
|
}
|
|
@@ -1846,6 +1850,10 @@ ol,
|
|
|
1846
1850
|
top: 50%;
|
|
1847
1851
|
}
|
|
1848
1852
|
|
|
1853
|
+
.tw-top-\[10px\] {
|
|
1854
|
+
top: 10px;
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1849
1857
|
.\!tw-z-\[9000\] {
|
|
1850
1858
|
z-index: 9000 !important;
|
|
1851
1859
|
}
|
|
@@ -2061,6 +2069,10 @@ ol,
|
|
|
2061
2069
|
height: 1px;
|
|
2062
2070
|
}
|
|
2063
2071
|
|
|
2072
|
+
.tw-h-\[200px\] {
|
|
2073
|
+
height: 200px;
|
|
2074
|
+
}
|
|
2075
|
+
|
|
2064
2076
|
.tw-h-\[27px\] {
|
|
2065
2077
|
height: 27px;
|
|
2066
2078
|
}
|
|
@@ -2495,6 +2507,11 @@ ol,
|
|
|
2495
2507
|
border-color: rgb(var(--sq-danger-color));
|
|
2496
2508
|
}
|
|
2497
2509
|
|
|
2510
|
+
.tw-border-sq-darkish-gray {
|
|
2511
|
+
--tw-border-opacity: 1;
|
|
2512
|
+
border-color: rgb(var(--sq-darkish-gray));
|
|
2513
|
+
}
|
|
2514
|
+
|
|
2498
2515
|
.tw-border-sq-disabled-gray {
|
|
2499
2516
|
--tw-border-opacity: 1;
|
|
2500
2517
|
border-color: rgb(var(--sq-disabled-gray));
|
package/package.json
CHANGED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import * as Progress from '@radix-ui/react-progress';
|
|
3
|
-
import { getQTipData } from '../Tooltip/qTip.utilities';
|
|
4
|
-
const ProgressBar = ({ value, max = 100, label, extraClasses }) => {
|
|
5
|
-
const tooltipData = getQTipData({ tooltip: label });
|
|
6
|
-
const [progress, setProgress] = React.useState(0);
|
|
7
|
-
React.useEffect(() => {
|
|
8
|
-
const timer = setTimeout(() => setProgress(value), 500);
|
|
9
|
-
return () => clearTimeout(timer);
|
|
10
|
-
}, []);
|
|
11
|
-
return (React.createElement("span", { ...tooltipData },
|
|
12
|
-
React.createElement(Progress.Root, { className: "tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[2.5px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray", max: max, value: value },
|
|
13
|
-
React.createElement(Progress.Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-h-full tw-bg-sq-color-dark tw-transition-transform tw-duration-[660ms] ${extraClasses}`, style: { transform: `translateX(-${100 - progress}%)` } }))));
|
|
14
|
-
};
|
|
15
|
-
export default ProgressBar;
|
|
16
|
-
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,QAAQ,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,WAAW,GAA8C,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE;IAC3G,MAAM,WAAW,GAAG,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAEpD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;QACxD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,iCAAU,WAAW;QACnB,oBAAC,QAAQ,CAAC,IAAI,IACZ,SAAS,EAAC,6HAA6H,EACvI,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;YACZ,oBAAC,QAAQ,CAAC,SAAS,IACjB,SAAS,EAAE,sHAAsH,YAAY,EAAE,EAC/I,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,GAAG,GAAG,QAAQ,IAAI,EAAE,GACvD,CACY,CACX,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import ProgressBar from './ProgressBar';
|
|
3
|
-
import { QTip } from '../Tooltip';
|
|
4
|
-
export default {
|
|
5
|
-
title: 'ProgressBar',
|
|
6
|
-
};
|
|
7
|
-
export const AllProgressBars = () => {
|
|
8
|
-
const renderAllVariations = () => (React.createElement(React.Fragment, null,
|
|
9
|
-
React.createElement("div", { className: "tw-p-4 light" },
|
|
10
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
11
|
-
React.createElement(ProgressBar, { max: 100, value: 40, label: "40%" })),
|
|
12
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
13
|
-
React.createElement(ProgressBar, { max: 100, value: 10, label: "100%" })),
|
|
14
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
15
|
-
React.createElement(ProgressBar, { value: 0, max: 100, label: "10%" })),
|
|
16
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
17
|
-
React.createElement(ProgressBar, { value: 70, max: 100, label: "70%", extraClasses: "tw-bg-sq-text-color" }))),
|
|
18
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
19
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
20
|
-
React.createElement(ProgressBar, { max: 10, value: 4, label: "40%" })),
|
|
21
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
22
|
-
React.createElement(ProgressBar, { max: 10, value: 10, label: "100%" })),
|
|
23
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
24
|
-
React.createElement(ProgressBar, { value: 0, max: 10, label: "0%" })),
|
|
25
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
26
|
-
React.createElement(ProgressBar, { value: 70, max: 100, label: "70%", extraClasses: "tw-bg-sq-text-color" })))));
|
|
27
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
|
|
28
|
-
React.createElement(QTip, null),
|
|
29
|
-
React.createElement("div", { className: "color_topic" },
|
|
30
|
-
React.createElement("b", null, "Topic Colors"),
|
|
31
|
-
renderAllVariations()),
|
|
32
|
-
React.createElement("div", { className: "color_analysis" },
|
|
33
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
34
|
-
renderAllVariations()),
|
|
35
|
-
React.createElement("div", { className: "color_datalab" },
|
|
36
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
37
|
-
renderAllVariations()),
|
|
38
|
-
React.createElement("div", { className: "color_vantage" },
|
|
39
|
-
React.createElement("b", null, "Vantage Colors"),
|
|
40
|
-
renderAllVariations())));
|
|
41
|
-
};
|
|
42
|
-
//# sourceMappingURL=ProgressBar.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.stories.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,eAAe;IACb,KAAK,EAAE,aAAa;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CAC5C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,CAC7C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,GAAG,CAC3C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,YAAY,EAAC,qBAAqB,GAAG,CAC/E,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,KAAK,GAAG,CAC1C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,CAC5C;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAC,IAAI,GAAG,CACzC;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,YAAY,EAAC,qBAAqB,GAAG,CAC/E,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,oBAAC,IAAI,OAAG;QACR,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen, waitFor } from '@testing-library/react';
|
|
3
|
-
import '@testing-library/jest-dom/extend-expect';
|
|
4
|
-
import ProgressBar from './ProgressBar';
|
|
5
|
-
import userEvent from '@testing-library/user-event';
|
|
6
|
-
describe('ProgressBar', () => {
|
|
7
|
-
it('renders without crashing', () => {
|
|
8
|
-
render(React.createElement(ProgressBar, { value: 50, label: "50%" }));
|
|
9
|
-
const progressBar = screen.getByRole('progressbar');
|
|
10
|
-
expect(progressBar).toBeInTheDocument();
|
|
11
|
-
});
|
|
12
|
-
it('displays the correct progress value', () => {
|
|
13
|
-
render(React.createElement(ProgressBar, { value: 75, label: "75%" }));
|
|
14
|
-
const progressBarIndicator = screen.getByRole('progressbar').firstChild;
|
|
15
|
-
waitFor(() => {
|
|
16
|
-
expect(progressBarIndicator).toHaveStyle('transform: translateX(-25%)');
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
|
-
it('applies the correct max value', () => {
|
|
20
|
-
render(React.createElement(ProgressBar, { value: 50, max: 200, label: "25%" }));
|
|
21
|
-
const progressBar = screen.getByRole('progressbar');
|
|
22
|
-
expect(progressBar).toHaveAttribute('data-max', '200');
|
|
23
|
-
});
|
|
24
|
-
it('displays the tooltip with the correct label', () => {
|
|
25
|
-
render(React.createElement(ProgressBar, { value: 50, label: "Progress" }));
|
|
26
|
-
userEvent.hover(screen.getByRole('progressbar'));
|
|
27
|
-
waitFor(() => {
|
|
28
|
-
expect(screen.getByText('Progress')).toBeInTheDocument();
|
|
29
|
-
});
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
//# sourceMappingURL=ProgressBar.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.test.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,yCAAyC,CAAC;AACjD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,CAAC,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CAAC,CAAC;QAC/C,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,CAAC,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CAAC,CAAC;QAC/C,MAAM,oBAAoB,GAAG,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;QACxE,OAAO,CAAC,GAAG,EAAE;YACX,MAAM,CAAC,oBAAoB,CAAC,CAAC,WAAW,CAAC,6BAA6B,CAAC,CAAC;QAC1E,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,CAAC,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,GAAG,CAAC,CAAC;QACzD,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,MAAM,CAAC,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,UAAU,GAAG,CAAC,CAAC;QACpD,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,EAAE;YACb,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.types.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
|
package/dist/Slider/Slider.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import * as RadixSlider from '@radix-ui/react-slider';
|
|
3
|
-
/**
|
|
4
|
-
* Slider .
|
|
5
|
-
*/
|
|
6
|
-
export const Slider = (props) => {
|
|
7
|
-
const { onValueChange, onPointerUp, id, value, name, disabled = false, extraClassNames = '', testId, step, min, max, } = props;
|
|
8
|
-
return (React.createElement(RadixSlider.Root, { className: `tw-relative tw-flex tw-h-5 tw-w-full tw-touch-none tw-select-none tw-items-center ${extraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step },
|
|
9
|
-
React.createElement(RadixSlider.Track, { className: "tw-relative tw-h-[5px] tw-grow tw-rounded-[4px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray" },
|
|
10
|
-
React.createElement(RadixSlider.Range, { className: "tw-absolute tw-h-full tw-rounded-full" })),
|
|
11
|
-
React.createElement(RadixSlider.Thumb, { className: "tw-block tw-h-[15px] tw-w-[15px] tw-rounded-full tw-bg-sq-color-dark tw-shadow-[0_1px_3px] active:tw-shadow-[0_1px_6px] focus:outline-none focus-visible:tw-outline-none aria-disabled:tw-bg-sq-dark-gray dark:aria-disabled:tw-bg-sq-dark-disabled-gray tw-transition tw-ease-in-out", "aria-disabled": disabled })));
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,WAAW,MAAM,wBAAwB,CAAC;AAEtD;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAyC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EACJ,aAAa,EACb,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,eAAe,GAAG,EAAE,EACpB,MAAM,EACN,IAAI,EACJ,GAAG,EACH,GAAG,GACJ,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,oBAAC,WAAW,CAAC,IAAI,IACf,SAAS,EAAE,qFAAqF,eAAe,EAAE,EACjH,YAAY,EAAE,CAAC,KAAK,CAAC,EACrB,KAAK,EAAE,CAAC,KAAK,CAAC,EACd,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,EAC/D,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,IAAI,WAAW,CAAC,CAAC,CAAC,EACjD,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI;QACV,oBAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAC,qGAAqG;YAChI,oBAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAC,uCAAuC,GAAG,CACrD;QACpB,oBAAC,WAAW,CAAC,KAAK,IAChB,SAAS,EAAC,uRAAuR,mBAClR,QAAQ,GACvB,CACe,CACpB,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Slider } from './Slider';
|
|
3
|
-
import { QTip } from '../Tooltip';
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Slider',
|
|
6
|
-
};
|
|
7
|
-
export const AllSliders = () => {
|
|
8
|
-
const [value1, setValue1] = React.useState(0);
|
|
9
|
-
const [value2, setValue2] = React.useState(0);
|
|
10
|
-
const renderAllVariations = () => (React.createElement(React.Fragment, null,
|
|
11
|
-
React.createElement("div", { className: "tw-p-4 light" },
|
|
12
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
13
|
-
React.createElement(Slider, { min: 0, max: 10, value: 4 })),
|
|
14
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
15
|
-
React.createElement(Slider, { min: 0, max: 10, value: 10 })),
|
|
16
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
17
|
-
React.createElement(Slider, { value: 0, min: 0, max: 10 })),
|
|
18
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
19
|
-
React.createElement("div", null, "1 Step"),
|
|
20
|
-
React.createElement(Slider, { value: value1, min: 0, max: 20, step: 4, onValueChange: (v) => setValue1(v[0]) })),
|
|
21
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
22
|
-
React.createElement("div", null, "10 Steps"),
|
|
23
|
-
React.createElement(Slider, { value: value2, min: 0, max: 20, step: 10, onValueChange: (v) => setValue2(v[0]) })),
|
|
24
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
25
|
-
React.createElement("div", { className: "tw-sq-text-color" }, "Disabled"),
|
|
26
|
-
React.createElement(Slider, { value: 10, min: 0, max: 20, step: 10, disabled: true }))),
|
|
27
|
-
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
28
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
29
|
-
React.createElement(Slider, { min: 0, max: 10, value: 4 })),
|
|
30
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
31
|
-
React.createElement(Slider, { min: 0, max: 10, value: 10 })),
|
|
32
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
33
|
-
React.createElement(Slider, { value: 0, min: 0, max: 10 })),
|
|
34
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
35
|
-
React.createElement("div", { className: "dark:tw-text-white" }, "1 Step"),
|
|
36
|
-
React.createElement(Slider, { value: value1, min: 0, max: 20, step: 4, onValueChange: (v) => setValue1(v[0]) })),
|
|
37
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
38
|
-
React.createElement("div", { className: "dark:tw-text-white" }, "10 Steps"),
|
|
39
|
-
React.createElement(Slider, { value: value2, min: 0, max: 20, step: 10, onValueChange: (v) => setValue2(v[0]) })),
|
|
40
|
-
React.createElement("div", { className: "tw-p-4" },
|
|
41
|
-
React.createElement("div", { className: "dark:tw-text-white" }, "Disabled"),
|
|
42
|
-
React.createElement(Slider, { value: 10, min: 0, max: 20, step: 10, disabled: true })))));
|
|
43
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
|
|
44
|
-
React.createElement(QTip, null),
|
|
45
|
-
React.createElement("div", { className: "color_topic" },
|
|
46
|
-
React.createElement("b", null, "Topic Colors"),
|
|
47
|
-
renderAllVariations()),
|
|
48
|
-
React.createElement("div", { className: "color_analysis" },
|
|
49
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
50
|
-
renderAllVariations()),
|
|
51
|
-
React.createElement("div", { className: "color_datalab" },
|
|
52
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
53
|
-
renderAllVariations()),
|
|
54
|
-
React.createElement("div", { className: "color_vantage" },
|
|
55
|
-
React.createElement("b", null, "Vantage Colors"),
|
|
56
|
-
renderAllVariations())));
|
|
57
|
-
};
|
|
58
|
-
//# sourceMappingURL=Slider.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.stories.js","sourceRoot":"","sources":["../../src/Slider/Slider.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render } from '@testing-library/react';
|
|
3
|
-
import '@testing-library/jest-dom/extend-expect';
|
|
4
|
-
import { Slider } from './Slider';
|
|
5
|
-
describe('Slider Component', () => {
|
|
6
|
-
const defaultProps = {
|
|
7
|
-
onValueChange: jest.fn(),
|
|
8
|
-
onPointerUp: jest.fn(),
|
|
9
|
-
id: 'test-slider',
|
|
10
|
-
value: 50,
|
|
11
|
-
name: 'slider',
|
|
12
|
-
disabled: false,
|
|
13
|
-
extraClassNames: '',
|
|
14
|
-
testId: 'slider',
|
|
15
|
-
step: 1,
|
|
16
|
-
min: 0,
|
|
17
|
-
max: 100,
|
|
18
|
-
};
|
|
19
|
-
beforeEach(() => {
|
|
20
|
-
global.ResizeObserver = jest.fn().mockImplementation(() => {
|
|
21
|
-
return { observe: jest.fn(), disconnect: jest.fn(), unobserve: jest.fn() };
|
|
22
|
-
});
|
|
23
|
-
});
|
|
24
|
-
it('renders without crashing', () => {
|
|
25
|
-
const { getByRole } = render(React.createElement(Slider, { ...defaultProps }));
|
|
26
|
-
expect(getByRole('slider')).toBeInTheDocument();
|
|
27
|
-
});
|
|
28
|
-
it('is disabled when disabled prop is true', () => {
|
|
29
|
-
const { getByRole } = render(React.createElement(Slider, { ...defaultProps, disabled: true }));
|
|
30
|
-
const thumb = getByRole('slider');
|
|
31
|
-
expect(thumb).toHaveAttribute('data-disabled', '');
|
|
32
|
-
});
|
|
33
|
-
it('applies extra class names', () => {
|
|
34
|
-
const { container } = render(React.createElement(Slider, { ...defaultProps, extraClassNames: "extra-class" }));
|
|
35
|
-
expect(container.firstChild).toHaveClass('extra-class');
|
|
36
|
-
});
|
|
37
|
-
});
|
|
38
|
-
//# sourceMappingURL=Slider.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.test.js","sourceRoot":"","sources":["../../src/Slider/Slider.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,MAAM,YAAY,GAAgB;QAChC,aAAa,EAAE,IAAI,CAAC,EAAE,EAAE;QACxB,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE;QACtB,EAAE,EAAE,aAAa;QACjB,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,KAAK;QACf,eAAe,EAAE,EAAE;QACnB,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,GAAG;KACT,CAAC;IAEF,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE;YACxD,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC;QAC7E,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,OAAK,YAAY,GAAI,CAAC,CAAC;QAC3D,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAClD,CAAC,CAAC,CAAC;IAGH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,OAAK,YAAY,EAAE,QAAQ,EAAE,IAAI,GAAI,CAAC,CAAC;QAC3E,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;QAClC,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,OAAK,YAAY,EAAE,eAAe,EAAC,aAAa,GAAG,CAAC,CAAC;QACzF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../src/Slider/Slider.types.ts"],"names":[],"mappings":""}
|
package/dist/Slider/index.js
DELETED
package/dist/Slider/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,UAAU,CAAC"}
|