@arbor-education/design-system.components 0.2.3 → 0.2.4
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/CHANGELOG.md +6 -0
- package/dist/components/card/Card.d.ts +4 -4
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +3 -3
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/card/Card.test.js +2 -2
- package/dist/components/card/Card.test.js.map +1 -1
- package/dist/components/pill/Pill.d.ts +3 -3
- package/dist/components/pill/Pill.d.ts.map +1 -1
- package/dist/components/pill/Pill.js +18 -3
- package/dist/components/pill/Pill.js.map +1 -1
- package/dist/components/pill/Pill.stories.d.ts +11 -1
- package/dist/components/pill/Pill.stories.d.ts.map +1 -1
- package/dist/components/pill/Pill.stories.js +11 -1
- package/dist/components/pill/Pill.stories.js.map +1 -1
- package/dist/components/pill/Pill.test.d.ts.map +1 -1
- package/dist/components/pill/Pill.test.js +47 -11
- package/dist/components/pill/Pill.test.js.map +1 -1
- package/dist/components/tag/Tag.d.ts +8 -0
- package/dist/components/tag/Tag.d.ts.map +1 -0
- package/dist/components/tag/Tag.js +6 -0
- package/dist/components/tag/Tag.js.map +1 -0
- package/dist/components/tag/Tag.stories.d.ts +8 -0
- package/dist/components/tag/Tag.stories.d.ts.map +1 -0
- package/dist/components/tag/Tag.stories.js +10 -0
- package/dist/components/tag/Tag.stories.js.map +1 -0
- package/dist/components/tag/Tag.test.d.ts +2 -0
- package/dist/components/tag/Tag.test.d.ts.map +1 -0
- package/dist/components/tag/Tag.test.js +20 -0
- package/dist/components/tag/Tag.test.js.map +1 -0
- package/dist/index.css +60 -8
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/card/Card.test.tsx +3 -3
- package/src/components/card/Card.tsx +6 -6
- package/src/components/pill/Pill.stories.tsx +10 -0
- package/src/components/pill/Pill.test.tsx +50 -11
- package/src/components/pill/Pill.tsx +35 -11
- package/src/components/pill/pill.scss +32 -24
- package/src/components/tag/Tag.stories.tsx +14 -0
- package/src/components/tag/Tag.test.tsx +21 -0
- package/src/components/tag/Tag.tsx +24 -0
- package/src/components/tag/tag.scss +51 -0
- package/src/index.scss +1 -0
- package/src/index.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.2.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#101](https://github.com/arbor-education/design-system.components/pull/101) [`d907bd7`](https://github.com/arbor-education/design-system.components/commit/d907bd7dae0721eb63a67ccce1e2a0297bff6b75) Thanks [@MarkFrancisArbor](https://github.com/MarkFrancisArbor)! - MIS-66704 Added Pill component
|
|
8
|
+
|
|
3
9
|
## 0.2.3
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { allowedIcons } from '../icon/allowedIcons';
|
|
2
|
-
import { type
|
|
2
|
+
import { type TagColor } from '../tag/Tag';
|
|
3
3
|
type CardProps = {
|
|
4
4
|
title?: string;
|
|
5
5
|
paragraph?: string;
|
|
6
6
|
icon?: keyof typeof allowedIcons;
|
|
7
7
|
iconColor?: string;
|
|
8
8
|
disabled?: boolean;
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
tagText?: string;
|
|
10
|
+
tagColor?: TagColor;
|
|
11
11
|
onClick?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
12
12
|
onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
|
|
13
13
|
iconScreenReaderText?: string;
|
|
14
14
|
};
|
|
15
|
-
export declare const Card: ({ title, paragraph, icon, iconColor, iconScreenReaderText, onClick, onKeyDown, disabled,
|
|
15
|
+
export declare const Card: ({ title, paragraph, icon, iconColor, iconScreenReaderText, onClick, onKeyDown, disabled, tagText, tagColor, }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
export {};
|
|
17
17
|
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAExD,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,+GAWlB,SAAS,4CAsEX,CAAC"}
|
|
@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { Icon } from '../icon/Icon';
|
|
4
4
|
import { allowedIcons } from '../icon/allowedIcons';
|
|
5
|
-
import {
|
|
6
|
-
export const Card = ({ title, paragraph, icon, iconColor, iconScreenReaderText, onClick, onKeyDown, disabled,
|
|
5
|
+
import { Tag } from '../tag/Tag';
|
|
6
|
+
export const Card = ({ title, paragraph, icon, iconColor, iconScreenReaderText, onClick, onKeyDown, disabled, tagText, tagColor, }) => {
|
|
7
7
|
const handleClick = (e) => {
|
|
8
8
|
if (onClick) {
|
|
9
9
|
onClick(e);
|
|
@@ -26,6 +26,6 @@ export const Card = ({ title, paragraph, icon, iconColor, iconScreenReaderText,
|
|
|
26
26
|
if (isCardClickable) {
|
|
27
27
|
handleKeyDown(e);
|
|
28
28
|
}
|
|
29
|
-
}, "aria-label": "Card", tabIndex: isCardClickable ? 0 : -1, children: _jsxs("div", { className: "ds-card__content", children: [icon && (_jsx(Icon, { name: icon, className: "ds-card__icon-left", screenReaderText: iconScreenReaderText, color: iconColor, size: 24 })), _jsxs("div", { className: "ds-card__text", children: [title && (_jsx("span", { className: "ds-card__title-container", children: title && _jsx("h4", { className: "ds-card__title", children: title }) })), paragraph && _jsx("p", { className: "ds-card__paragraph", children: paragraph }),
|
|
29
|
+
}, "aria-label": "Card", tabIndex: isCardClickable ? 0 : -1, children: _jsxs("div", { className: "ds-card__content", children: [icon && (_jsx(Icon, { name: icon, className: "ds-card__icon-left", screenReaderText: iconScreenReaderText, color: iconColor, size: 24 })), _jsxs("div", { className: "ds-card__text", children: [title && (_jsx("span", { className: "ds-card__title-container", children: title && _jsx("h4", { className: "ds-card__title", children: title }) })), paragraph && _jsx("p", { className: "ds-card__paragraph", children: paragraph }), tagText && _jsx(Tag, { text: tagText, color: tagColor })] }), isCardClickable && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "chevron-right", className: "ds-card__icon-click", size: 24 }), _jsx(Icon, { name: "arrow-right", className: "ds-card__icon-click", size: 24 })] }))] }) }));
|
|
30
30
|
};
|
|
31
31
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,GAAG,EAAiB,MAAM,oBAAoB,CAAC;AAexD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,SAAS,EACT,oBAAoB,EACpB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,GACE,EAAE,EAAE;IACd,MAAM,WAAW,GAAG,CAAC,CAAgC,EAAE,EAAE;QACvD,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAmC,EAAE,EAAE;QAC5D,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,QAAQ,CAAC;IAE7C,OAAO,CACL,kBACE,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE;YAC1C,+BAA+B,EAAE,eAAe;YAChD,8BAA8B,EAAE,QAAQ;SACzC,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,eAAe,EAAE,CAAC;gBACpB,WAAW,CAAC,CAAC,CAAC,CAAC;YACjB,CAAC;QACH,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,eAAe,EAAE,CAAC;gBACpB,aAAa,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,gBACU,MAAM,EACjB,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAElC,eAAK,SAAS,EAAC,kBAAkB,aAC9B,IAAI,IAAI,CACP,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,oBAAoB,EAC9B,gBAAgB,EAAE,oBAAoB,EACtC,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,GACR,CACH,EACD,eAAK,SAAS,EAAC,eAAe,aAC3B,KAAK,IAAI,CACR,eAAM,SAAS,EAAC,0BAA0B,YACvC,KAAK,IAAI,aAAI,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAM,GAChD,CACR,EACA,SAAS,IAAI,YAAG,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAK,EAC9D,OAAO,IAAI,KAAC,GAAG,IAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,GAAI,IAC/C,EACL,eAAe,IAAI,CAClB,8BACE,KAAC,IAAI,IACH,IAAI,EAAC,eAAe,EACpB,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,EAAE,GACR,EACF,KAAC,IAAI,IACH,IAAI,EAAC,aAAa,EAClB,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,EAAE,GACR,IACD,CACJ,IACG,GACE,CACX,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -31,13 +31,13 @@ describe('Card Component', () => {
|
|
|
31
31
|
expect(container.querySelector('.ds-icon-eye')).toBeInTheDocument();
|
|
32
32
|
});
|
|
33
33
|
test('renders card with pill', () => {
|
|
34
|
-
render(_jsx(Card, {
|
|
34
|
+
render(_jsx(Card, { tagText: "Test Pill", tagColor: "orange" }));
|
|
35
35
|
expect(screen.getByText('Test Pill')).toBeInTheDocument();
|
|
36
36
|
});
|
|
37
37
|
test('renders complete card with all props', () => {
|
|
38
38
|
const mockClick = vi.fn();
|
|
39
39
|
const mockKeyDown = vi.fn();
|
|
40
|
-
const { container } = render(_jsx(Card, { title: "Complete Card", paragraph: "This is a complete card", icon: "eye", iconColor: "#blue",
|
|
40
|
+
const { container } = render(_jsx(Card, { title: "Complete Card", paragraph: "This is a complete card", icon: "eye", iconColor: "#blue", tagText: "Complete", tagColor: "green", onClick: mockClick, onKeyDown: mockKeyDown }));
|
|
41
41
|
expect(screen.getByText('Complete Card')).toBeInTheDocument();
|
|
42
42
|
expect(screen.getByText('This is a complete card')).toBeInTheDocument();
|
|
43
43
|
expect(container.querySelector('.ds-icon-eye')).toBeInTheDocument();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.test.js","sourceRoot":"","sources":["../../../src/components/card/Card.test.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAE1C,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,IAAI,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAChD,MAAM,CAAC,KAAC,IAAI,KAAG,CAAC,CAAC;QACjB,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,MAAM,CAAC,IAAI,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACnC,MAAM,CAAC,KAAC,IAAI,IAAC,KAAK,EAAC,YAAY,GAAG,CAAC,CAAC;QACpC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;QAClF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,MAAM,CAAC,KAAC,IAAI,IAAC,SAAS,EAAC,wBAAwB,GAAG,CAAC,CAAC;QACpD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACvE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;IACvF,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACtD,MAAM,CAAC,KAAC,IAAI,IAAC,KAAK,EAAC,YAAY,EAAC,SAAS,EAAC,gBAAgB,GAAG,CAAC,CAAC;QAC/D,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;QAClF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wBAAwB,EAAE,GAAG,EAAE;QAClC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,CAAC,CAAC;QAClD,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wBAAwB,EAAE,GAAG,EAAE;QAClC,MAAM,CAAC,KAAC,IAAI,IAAC,
|
|
1
|
+
{"version":3,"file":"Card.test.js","sourceRoot":"","sources":["../../../src/components/card/Card.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export type PillColor = 'orange' | 'blue' | 'green' | 'purple' | 'teal' | 'salmon' | 'yellow';
|
|
2
1
|
type PillProps = {
|
|
3
2
|
text: string;
|
|
4
|
-
|
|
3
|
+
checkbox?: boolean;
|
|
4
|
+
onclick?: (checked: boolean) => void;
|
|
5
5
|
};
|
|
6
|
-
export declare const Pill: ({ text,
|
|
6
|
+
export declare const Pill: ({ text, checkbox, onclick }: PillProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
8
8
|
//# sourceMappingURL=Pill.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.tsx"],"names":[],"mappings":"AAIA,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,6BAA6B,SAAS,4CAqC1D,CAAC"}
|
|
@@ -1,6 +1,21 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
import { CheckboxInput } from '../formField/inputs/checkbox/CheckboxInput';
|
|
4
|
+
import { useEffect, useState } from 'react';
|
|
5
|
+
export const Pill = ({ text, checkbox, onclick }) => {
|
|
6
|
+
const [checked, setChecked] = useState(false);
|
|
7
|
+
const handlePillClick = () => {
|
|
8
|
+
setChecked(prev => !prev);
|
|
9
|
+
};
|
|
10
|
+
const handleCheckboxClick = (event) => {
|
|
11
|
+
event.stopPropagation();
|
|
12
|
+
setChecked(prev => !prev);
|
|
13
|
+
};
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (onclick) {
|
|
16
|
+
onclick(checked);
|
|
17
|
+
}
|
|
18
|
+
}, [checked, onclick]);
|
|
19
|
+
return (_jsxs("span", { onClick: handlePillClick, className: classNames('ds-pill', checkbox ? { 'ds-pill__checked': checked, 'ds-pill__unchecked': !checked } : { 'ds-pill__active': checked, 'ds-pill__inactive': !checked }), children: [checkbox && (_jsx("span", { className: classNames('ds-pill__checkbox'), onClick: e => e.stopPropagation(), children: _jsx(CheckboxInput, { checked: checked, onClick: handleCheckboxClick }) })), text] }));
|
|
5
20
|
};
|
|
6
21
|
//# sourceMappingURL=Pill.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../../src/components/pill/Pill.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../../src/components/pill/Pill.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,oDAAoD,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAa,EAAE,EAAE;IAC7D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACtD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,OAAO,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,gBACE,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,QAAQ,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,OAAO,EAAE,oBAAoB,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC,OAAO,EAAE,CAC3I,aAEA,QAAQ,IAAI,CACX,eAAM,SAAS,EAAE,UAAU,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YACjF,KAAC,aAAa,IACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,mBAAmB,GAC5B,GACG,CACR,EACA,IAAI,IACA,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -2,7 +2,17 @@ import type { Meta } from '@storybook/react-vite';
|
|
|
2
2
|
import { Pill } from './Pill';
|
|
3
3
|
declare const meta: Meta<typeof Pill>;
|
|
4
4
|
export declare const Default: {
|
|
5
|
-
args: {
|
|
5
|
+
args: {
|
|
6
|
+
text: string;
|
|
7
|
+
onclick: () => void;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
export declare const withCheckbox: {
|
|
11
|
+
args: {
|
|
12
|
+
text: string;
|
|
13
|
+
checkbox: boolean;
|
|
14
|
+
onclick: () => void;
|
|
15
|
+
};
|
|
6
16
|
};
|
|
7
17
|
export default meta;
|
|
8
18
|
//# sourceMappingURL=Pill.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAC;AAEF,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"Pill.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;CAMxB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -4,7 +4,17 @@ const meta = {
|
|
|
4
4
|
component: Pill,
|
|
5
5
|
};
|
|
6
6
|
export const Default = {
|
|
7
|
-
args: {
|
|
7
|
+
args: {
|
|
8
|
+
text: 'Default',
|
|
9
|
+
onclick: () => { console.log('Pill clicked'); },
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
export const withCheckbox = {
|
|
13
|
+
args: {
|
|
14
|
+
text: 'Checkbox',
|
|
15
|
+
checkbox: true,
|
|
16
|
+
onclick: () => { console.log('Pill with checkbox clicked'); },
|
|
17
|
+
},
|
|
8
18
|
};
|
|
9
19
|
export default meta;
|
|
10
20
|
//# sourceMappingURL=Pill.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.stories.js","sourceRoot":"","sources":["../../../src/components/pill/Pill.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"Pill.stories.js","sourceRoot":"","sources":["../../../src/components/pill/Pill.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;KAChD;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC;KAC9D;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.test.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.test.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pill.test.d.ts","sourceRoot":"","sources":["../../../src/components/pill/Pill.test.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC"}
|
|
@@ -1,20 +1,56 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { render, screen } from '@testing-library/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { render, screen, fireEvent } from '@testing-library/react';
|
|
4
4
|
import { Pill } from './Pill';
|
|
5
|
+
import { describe, expect, it, vi } from 'vitest';
|
|
5
6
|
import '@testing-library/jest-dom/vitest';
|
|
6
7
|
describe('Pill', () => {
|
|
7
|
-
|
|
8
|
-
render(_jsx(Pill, { text: "
|
|
9
|
-
expect(screen.getByText(
|
|
8
|
+
it('renders text', () => {
|
|
9
|
+
render(_jsx(Pill, { text: "Test Pill" }));
|
|
10
|
+
expect(screen.getByText('Test Pill')).toBeInTheDocument();
|
|
10
11
|
});
|
|
11
|
-
|
|
12
|
-
render(_jsx(Pill, { text: "
|
|
13
|
-
|
|
12
|
+
it('toggles active state on click (no checkbox)', () => {
|
|
13
|
+
render(_jsx(Pill, { text: "Test Pill" }));
|
|
14
|
+
const pill = screen.getByText('Test Pill');
|
|
15
|
+
expect(pill).toHaveClass('ds-pill__inactive');
|
|
16
|
+
fireEvent.click(screen.getByText('Test Pill'));
|
|
17
|
+
expect(pill).toHaveClass('ds-pill__active');
|
|
18
|
+
fireEvent.click(screen.getByText('Test Pill'));
|
|
19
|
+
expect(pill).toHaveClass('ds-pill__inactive');
|
|
14
20
|
});
|
|
15
|
-
|
|
16
|
-
render(_jsx(Pill, { text: "
|
|
17
|
-
expect(screen.getByText(
|
|
21
|
+
it('renders with checkbox', () => {
|
|
22
|
+
render(_jsx(Pill, { text: "Check Me", checkbox: true }));
|
|
23
|
+
expect(screen.getByText('Check Me')).toBeInTheDocument();
|
|
24
|
+
expect(screen.getByRole('checkbox')).toBeInTheDocument();
|
|
25
|
+
});
|
|
26
|
+
it('toggles checked state on pill click (with checkbox)', () => {
|
|
27
|
+
render(_jsx(Pill, { text: "Check Me", checkbox: true }));
|
|
28
|
+
const pill = screen.getByText('Check Me').closest('.ds-pill');
|
|
29
|
+
const checkbox = screen.getByRole('checkbox');
|
|
30
|
+
expect(pill).toHaveClass('ds-pill__unchecked');
|
|
31
|
+
expect(checkbox).not.toBeChecked();
|
|
32
|
+
fireEvent.click(screen.getByText('Check Me'));
|
|
33
|
+
expect(pill).toHaveClass('ds-pill__checked');
|
|
34
|
+
expect(checkbox).toBeChecked();
|
|
35
|
+
});
|
|
36
|
+
it('toggles checked state on checkbox click only (with checkbox)', () => {
|
|
37
|
+
render(_jsx(Pill, { text: "Check Me", checkbox: true }));
|
|
38
|
+
const pill = screen.getByText('Check Me').closest('.ds-pill');
|
|
39
|
+
const checkbox = screen.getByRole('checkbox');
|
|
40
|
+
fireEvent.click(checkbox);
|
|
41
|
+
expect(pill).toHaveClass('ds-pill__checked');
|
|
42
|
+
expect(checkbox).toBeChecked();
|
|
43
|
+
fireEvent.click(checkbox);
|
|
44
|
+
expect(pill).toHaveClass('ds-pill__unchecked');
|
|
45
|
+
expect(checkbox).not.toBeChecked();
|
|
46
|
+
});
|
|
47
|
+
it('calls onclick callback with correct checked value', () => {
|
|
48
|
+
const onClick = vi.fn();
|
|
49
|
+
render(_jsx(Pill, { text: "Test Pill", onclick: onClick }));
|
|
50
|
+
fireEvent.click(screen.getByText('Test Pill'));
|
|
51
|
+
expect(onClick).toHaveBeenCalledWith(true);
|
|
52
|
+
fireEvent.click(screen.getByText('Test Pill'));
|
|
53
|
+
expect(onClick).toHaveBeenCalledWith(false);
|
|
18
54
|
});
|
|
19
55
|
});
|
|
20
56
|
//# sourceMappingURL=Pill.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.test.js","sourceRoot":"","sources":["../../../src/components/pill/Pill.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Pill.test.js","sourceRoot":"","sources":["../../../src/components/pill/Pill.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type TagColor = 'orange' | 'blue' | 'green' | 'purple' | 'teal' | 'salmon' | 'yellow';
|
|
2
|
+
type TagProps = {
|
|
3
|
+
text: string;
|
|
4
|
+
color?: TagColor;
|
|
5
|
+
};
|
|
6
|
+
export declare const Tag: ({ text, color }: TagProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=Tag.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAC3B,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,iBAA2B,QAAQ,4CAQtD,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
export const Tag = ({ text, color = 'green' }) => {
|
|
4
|
+
return (_jsx("span", { className: classNames('ds-tag', `ds-tag--${color}`), children: text }));
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=Tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAepC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE;IACzD,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,WAAW,KAAK,EAAE,CAAC,YAElD,IAAI,GACA,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAG1B,CAAC;AAEF,eAAO,MAAM,OAAO;;CAGnB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,IAAI,GAAqB;IAC7B,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,GAAG;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE,EACL;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.test.d.ts","sourceRoot":"","sources":["../../../src/components/tag/Tag.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, test } from 'vitest';
|
|
3
|
+
import { render, screen } from '@testing-library/react';
|
|
4
|
+
import { Tag } from './Tag';
|
|
5
|
+
import '@testing-library/jest-dom/vitest';
|
|
6
|
+
describe('Tag', () => {
|
|
7
|
+
test('Tag says hello', () => {
|
|
8
|
+
render(_jsx(Tag, { text: "Hello I'm a Pill!" }));
|
|
9
|
+
expect(screen.getByText("Hello I'm a Pill!")).toBeInTheDocument();
|
|
10
|
+
});
|
|
11
|
+
test('Tag has default color green', () => {
|
|
12
|
+
render(_jsx(Tag, { text: "Hello I'm a Pill!" }));
|
|
13
|
+
expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--green');
|
|
14
|
+
});
|
|
15
|
+
test('Tag has custom color', () => {
|
|
16
|
+
render(_jsx(Tag, { text: "Hello I'm a Pill!", color: "blue" }));
|
|
17
|
+
expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--blue');
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
//# sourceMappingURL=Tag.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.test.js","sourceRoot":"","sources":["../../../src/components/tag/Tag.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,kCAAkC,CAAC;AAE1C,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE;IACnB,IAAI,CAAC,gBAAgB,EAAE,GAAG,EAAE;QAC1B,MAAM,CAAC,KAAC,GAAG,IAAC,IAAI,EAAC,mBAAmB,GAAG,CAAC,CAAC;QACzC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,MAAM,CAAC,KAAC,GAAG,IAAC,IAAI,EAAC,mBAAmB,GAAG,CAAC,CAAC;QACzC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAChC,MAAM,CAAC,KAAC,GAAG,IAAC,IAAI,EAAC,mBAAmB,EAAC,KAAK,EAAC,MAAM,GAAG,CAAC,CAAC;QACtD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/dist/index.css
CHANGED
|
@@ -2135,7 +2135,7 @@ h4.ds-heading {
|
|
|
2135
2135
|
border-radius: 100%;
|
|
2136
2136
|
}
|
|
2137
2137
|
|
|
2138
|
-
.ds-
|
|
2138
|
+
.ds-tag {
|
|
2139
2139
|
display: flex;
|
|
2140
2140
|
padding: var(--tag-spacing-vertical) var(--tag-spacing-horizontal);
|
|
2141
2141
|
align-items: center;
|
|
@@ -2150,35 +2150,87 @@ h4.ds-heading {
|
|
|
2150
2150
|
font-weight: var(--type-body-p-weight);
|
|
2151
2151
|
line-height: 150%; /* 19.5px */
|
|
2152
2152
|
}
|
|
2153
|
-
.ds-
|
|
2153
|
+
.ds-tag--orange {
|
|
2154
2154
|
color: var(--tag-category-orange-color-text);
|
|
2155
2155
|
background: var(--tag-category-orange-color-background);
|
|
2156
2156
|
}
|
|
2157
|
-
.ds-
|
|
2157
|
+
.ds-tag--blue {
|
|
2158
2158
|
color: var(--tag-category-blue-color-text);
|
|
2159
2159
|
background: var(--tag-category-blue-color-background);
|
|
2160
2160
|
}
|
|
2161
|
-
.ds-
|
|
2161
|
+
.ds-tag--green {
|
|
2162
2162
|
color: var(--tag-category-green-color-text);
|
|
2163
2163
|
background: var(--tag-category-green-color-background);
|
|
2164
2164
|
}
|
|
2165
|
-
.ds-
|
|
2165
|
+
.ds-tag--purple {
|
|
2166
2166
|
color: var(--tag-category-purple-color-text);
|
|
2167
2167
|
background: var(--tag-category-purple-color-background);
|
|
2168
2168
|
}
|
|
2169
|
-
.ds-
|
|
2169
|
+
.ds-tag--teal {
|
|
2170
2170
|
color: var(--tag-category-teal-color-text);
|
|
2171
2171
|
background: var(--tag-category-teal-color-background);
|
|
2172
2172
|
}
|
|
2173
|
-
.ds-
|
|
2173
|
+
.ds-tag--salmon {
|
|
2174
2174
|
color: var(--tag-category-salmon-color-text);
|
|
2175
2175
|
background: var(--tag-category-salmon-color-background);
|
|
2176
2176
|
}
|
|
2177
|
-
.ds-
|
|
2177
|
+
.ds-tag--yellow {
|
|
2178
2178
|
color: var(--tag-category-yellow-color-text);
|
|
2179
2179
|
background: var(--tag-category-yellow-color-background);
|
|
2180
2180
|
}
|
|
2181
2181
|
|
|
2182
|
+
.ds-pill {
|
|
2183
|
+
display: flex;
|
|
2184
|
+
padding: var(--tag-spacing-vertical) var(--tag-spacing-horizontal);
|
|
2185
|
+
align-items: center;
|
|
2186
|
+
gap: var(--tag-spacing-gap-horizontal);
|
|
2187
|
+
border-radius: var(--tag-radius);
|
|
2188
|
+
border: 1px solid var(--pill-single-filter-default-color-border);
|
|
2189
|
+
flex-grow: 0;
|
|
2190
|
+
width: fit-content;
|
|
2191
|
+
cursor: pointer;
|
|
2192
|
+
/* typography/body/p1-reg */
|
|
2193
|
+
font-family: var(--type-body-p-family, Inter);
|
|
2194
|
+
font-size: var(--type-body-p-size);
|
|
2195
|
+
font-style: normal;
|
|
2196
|
+
font-weight: var(--type-body-p-weight);
|
|
2197
|
+
line-height: 150%; /* 19.5px */
|
|
2198
|
+
}
|
|
2199
|
+
.ds-pill__inactive {
|
|
2200
|
+
background-color: var(--pill-single-filter-default-color-background);
|
|
2201
|
+
border-color: var(--pill-single-filter-default-color-border);
|
|
2202
|
+
color: var(--pill-single-filter-default-color-text);
|
|
2203
|
+
}
|
|
2204
|
+
.ds-pill__inactive:hover {
|
|
2205
|
+
color: var(--pill-single-filter-hover-color-text);
|
|
2206
|
+
border-color: var(--pill-single-filter-hover-color-border);
|
|
2207
|
+
background-color: var(--pill-single-filter-hover-color-background);
|
|
2208
|
+
}
|
|
2209
|
+
.ds-pill__active {
|
|
2210
|
+
background-color: var(--pill-single-filter-active-color-background);
|
|
2211
|
+
border-color: var(--pill-single-filter-active-color-border);
|
|
2212
|
+
color: var(--pill-single-filter-active-color-text);
|
|
2213
|
+
}
|
|
2214
|
+
.ds-pill__unchecked {
|
|
2215
|
+
background-color: var(--pill-checkbox-default-color-background);
|
|
2216
|
+
border-color: var(--pill-checkbox-default-color-border);
|
|
2217
|
+
color: var(--pill-checkbox-default-color-text);
|
|
2218
|
+
}
|
|
2219
|
+
.ds-pill__unchecked:hover {
|
|
2220
|
+
background-color: var(--pill-checkbox-hover-color-background);
|
|
2221
|
+
color: var(--pill-checkbox-hover-color-icon);
|
|
2222
|
+
border-color: var(--pill-checkbox-hover-color-border);
|
|
2223
|
+
}
|
|
2224
|
+
.ds-pill__checked {
|
|
2225
|
+
background-color: var(--pill-checkbox-selected-color-background);
|
|
2226
|
+
border-color: var(--pill-checkbox-selected-color-border);
|
|
2227
|
+
color: var(--pill-checkbox-selected-color-text);
|
|
2228
|
+
}
|
|
2229
|
+
.ds-pill__checkbox {
|
|
2230
|
+
display: flex;
|
|
2231
|
+
align-items: center;
|
|
2232
|
+
}
|
|
2233
|
+
|
|
2182
2234
|
.ds-section {
|
|
2183
2235
|
border-radius: var(--section-container-radius);
|
|
2184
2236
|
padding: var(--section-container-spacing-vertical) var(--section-container-spacing-horizontal);
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/tokens.scss","../src/global.scss","../src/components/button/button.scss","../src/components/icon/icon.scss","../src/components/heading/heading.scss","../src/components/card/card.scss","../src/components/dropdown/dropdown.scss","../src/components/formField/formField.scss","../src/components/formField/fieldset/fieldset.scss","../src/components/formField/inputs/input.scss","../src/components/formField/label/label.scss","../src/components/formField/inputs/number/numberInput.scss","../src/components/formField/inputs/radio/radioButtonInput.scss","../src/components/formField/inputs/checkbox/checkboxInput.scss","../src/components/formField/inputs/selectDropdown/selectDropdown.scss","../src/components/formField/inputs/colourPickerDropdown/colourPickerDropdown.scss","../src/components/pill/pill.scss","../src/components/section/section.scss","../src/components/tabs/tabs.scss","../src/components/slideoverManager/slideoverManager.scss","../src/components/slideover/slideover.scss","../src/components/table/table.scss","../src/components/searchBar/searchBar.scss","../src/components/table/pagination/pagination.scss","../src/components/tooltip/tooltip.scss","../src/components/separator/separator.scss","../src/components/modal/modal.scss","../src/components/modal/modalManager/modalManager.scss"],"names":[],"mappings":"AA4BQ;AC5BR;AACA;AAAA;AAAA;AAIC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACv0CF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACzBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAMJ;EACE;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAMJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;EACA;;;ACxPJ;EACI;;;ACDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AClDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAGE;EACE;;AAGF;EACE;;AAKN;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AC9EN;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;;AC7CR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AC9CZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACfJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;;;ACxEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACVJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC/DN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAIA;EACE;;AAKF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;;AC9FR;EACE;EACA;EACA;EACA;AAsFA;;AApFA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjGJ;EACE;EACA;;AAEE;EACE;EACA;EACA;;AAGJ;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;ACnBE;EACI;;;AAKR;EACI;EACA;EACA;;;ACVJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AChDJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAKF;EACE;;;ACrCR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAGE;EACE;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;;ACtFN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACVJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AC7CA;EAGE;;AAIJ;EAEE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AC9CR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;;AAKZ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACI;;AAEA;EACI;;;ACjEZ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAIR;EACI;;;ACvBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;ACXZ;EACE;EACA;EACA;EACA;;;ACHA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;ACvEJ;EACI;EACA","file":"index.css"}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/tokens.scss","../src/global.scss","../src/components/button/button.scss","../src/components/icon/icon.scss","../src/components/heading/heading.scss","../src/components/card/card.scss","../src/components/dropdown/dropdown.scss","../src/components/formField/formField.scss","../src/components/formField/fieldset/fieldset.scss","../src/components/formField/inputs/input.scss","../src/components/formField/label/label.scss","../src/components/formField/inputs/number/numberInput.scss","../src/components/formField/inputs/radio/radioButtonInput.scss","../src/components/formField/inputs/checkbox/checkboxInput.scss","../src/components/formField/inputs/selectDropdown/selectDropdown.scss","../src/components/formField/inputs/colourPickerDropdown/colourPickerDropdown.scss","../src/components/tag/tag.scss","../src/components/pill/pill.scss","../src/components/section/section.scss","../src/components/tabs/tabs.scss","../src/components/slideoverManager/slideoverManager.scss","../src/components/slideover/slideover.scss","../src/components/table/table.scss","../src/components/searchBar/searchBar.scss","../src/components/table/pagination/pagination.scss","../src/components/tooltip/tooltip.scss","../src/components/separator/separator.scss","../src/components/modal/modal.scss","../src/components/modal/modalManager/modalManager.scss"],"names":[],"mappings":"AA6BQ;AC7BR;AACA;AAAA;AAAA;AAIC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACv0CF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACzBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAMJ;EACE;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAMJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;EACA;;;ACxPJ;EACI;;;ACDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AClDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAGE;EACE;;AAGF;EACE;;AAKN;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AC9EN;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;;AC7CR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AC9CZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACfJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;;;ACxEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACVJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC/DN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAIA;EACE;;AAKF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;;AC9FR;EACE;EACA;EACA;EACA;AAsFA;;AApFA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjGJ;EACE;EACA;;AAEE;EACE;EACA;EACA;;AAGJ;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;ACnBE;EACI;;;AAKR;EACI;EACA;EACA;;;ACVJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AChDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;;;ACxDJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAKF;EACE;;;ACrCR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAGE;EACE;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;;ACtFN;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACVJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AC7CA;EAGE;;AAIJ;EAEE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AC9CR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;;AAKZ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACI;;AAEA;EACI;;;ACjEZ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAIR;EACI;;;ACvBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;ACXZ;EACE;EACA;EACA;EACA;;;ACHA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;ACvEJ;EACI;EACA","file":"index.css"}
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { Heading } from './components/heading/Heading';
|
|
|
3
3
|
export { Icon } from './components/icon/Icon';
|
|
4
4
|
export { Card } from './components/card/Card';
|
|
5
5
|
export { Dropdown } from './components/dropdown/Dropdown';
|
|
6
|
+
export { Tag } from './components/tag/Tag';
|
|
6
7
|
export { Pill } from './components/pill/Pill';
|
|
7
8
|
export { Section } from './components/section/Section';
|
|
8
9
|
export { Tabs } from './components/tabs/Tabs';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { Heading } from './components/heading/Heading';
|
|
|
3
3
|
export { Icon } from './components/icon/Icon';
|
|
4
4
|
export { Card } from './components/card/Card';
|
|
5
5
|
export { Dropdown } from './components/dropdown/Dropdown';
|
|
6
|
+
export { Tag } from './components/tag/Tag';
|
|
6
7
|
export { Pill } from './components/pill/Pill';
|
|
7
8
|
export { Section } from './components/section/Section';
|
|
8
9
|
export { Tabs } from './components/tabs/Tabs';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAuB,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAuB,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC"}
|
package/package.json
CHANGED
|
@@ -36,7 +36,7 @@ describe('Card Component', () => {
|
|
|
36
36
|
});
|
|
37
37
|
|
|
38
38
|
test('renders card with pill', () => {
|
|
39
|
-
render(<Card
|
|
39
|
+
render(<Card tagText="Test Pill" tagColor="orange" />);
|
|
40
40
|
expect(screen.getByText('Test Pill')).toBeInTheDocument();
|
|
41
41
|
});
|
|
42
42
|
|
|
@@ -50,8 +50,8 @@ describe('Card Component', () => {
|
|
|
50
50
|
paragraph="This is a complete card"
|
|
51
51
|
icon="eye"
|
|
52
52
|
iconColor="#blue"
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
tagText="Complete"
|
|
54
|
+
tagColor="green"
|
|
55
55
|
onClick={mockClick}
|
|
56
56
|
onKeyDown={mockKeyDown}
|
|
57
57
|
/>,
|
|
@@ -2,7 +2,7 @@ import classNames from 'classnames';
|
|
|
2
2
|
|
|
3
3
|
import { Icon } from '../icon/Icon';
|
|
4
4
|
import { allowedIcons } from '../icon/allowedIcons';
|
|
5
|
-
import {
|
|
5
|
+
import { Tag, type TagColor } from 'Components/tag/Tag';
|
|
6
6
|
|
|
7
7
|
type CardProps = {
|
|
8
8
|
title?: string;
|
|
@@ -10,8 +10,8 @@ type CardProps = {
|
|
|
10
10
|
icon?: keyof typeof allowedIcons;
|
|
11
11
|
iconColor?: string;
|
|
12
12
|
disabled?: boolean;
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
tagText?: string;
|
|
14
|
+
tagColor?: TagColor;
|
|
15
15
|
onClick?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
16
16
|
onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
|
|
17
17
|
iconScreenReaderText?: string;
|
|
@@ -26,8 +26,8 @@ export const Card = ({
|
|
|
26
26
|
onClick,
|
|
27
27
|
onKeyDown,
|
|
28
28
|
disabled,
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
tagText,
|
|
30
|
+
tagColor,
|
|
31
31
|
}: CardProps) => {
|
|
32
32
|
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
|
|
33
33
|
if (onClick) {
|
|
@@ -79,7 +79,7 @@ export const Card = ({
|
|
|
79
79
|
</span>
|
|
80
80
|
)}
|
|
81
81
|
{paragraph && <p className="ds-card__paragraph">{paragraph}</p>}
|
|
82
|
-
{
|
|
82
|
+
{tagText && <Tag text={tagText} color={tagColor} />}
|
|
83
83
|
</div>
|
|
84
84
|
{isCardClickable && (
|
|
85
85
|
<>
|
|
@@ -8,6 +8,16 @@ const meta: Meta<typeof Pill> = {
|
|
|
8
8
|
|
|
9
9
|
export const Default = {
|
|
10
10
|
args: {
|
|
11
|
+
text: 'Default',
|
|
12
|
+
onclick: () => { console.log('Pill clicked'); },
|
|
13
|
+
},
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export const withCheckbox = {
|
|
17
|
+
args: {
|
|
18
|
+
text: 'Checkbox',
|
|
19
|
+
checkbox: true,
|
|
20
|
+
onclick: () => { console.log('Pill with checkbox clicked'); },
|
|
11
21
|
},
|
|
12
22
|
};
|
|
13
23
|
|
|
@@ -1,21 +1,60 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { render, screen } from '@testing-library/react';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
3
|
import { Pill } from './Pill';
|
|
4
|
+
import { describe, expect, it, vi } from 'vitest';
|
|
4
5
|
import '@testing-library/jest-dom/vitest';
|
|
5
6
|
|
|
6
7
|
describe('Pill', () => {
|
|
7
|
-
|
|
8
|
-
render(<Pill text="
|
|
9
|
-
expect(screen.getByText(
|
|
8
|
+
it('renders text', () => {
|
|
9
|
+
render(<Pill text="Test Pill" />);
|
|
10
|
+
expect(screen.getByText('Test Pill')).toBeInTheDocument();
|
|
10
11
|
});
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
render(<Pill text="
|
|
14
|
-
|
|
13
|
+
it('toggles active state on click (no checkbox)', () => {
|
|
14
|
+
render(<Pill text="Test Pill" />);
|
|
15
|
+
const pill = screen.getByText('Test Pill');
|
|
16
|
+
expect(pill).toHaveClass('ds-pill__inactive');
|
|
17
|
+
fireEvent.click(screen.getByText('Test Pill'));
|
|
18
|
+
expect(pill).toHaveClass('ds-pill__active');
|
|
19
|
+
fireEvent.click(screen.getByText('Test Pill'));
|
|
20
|
+
expect(pill).toHaveClass('ds-pill__inactive');
|
|
15
21
|
});
|
|
16
22
|
|
|
17
|
-
|
|
18
|
-
render(<Pill text="
|
|
19
|
-
expect(screen.getByText(
|
|
23
|
+
it('renders with checkbox', () => {
|
|
24
|
+
render(<Pill text="Check Me" checkbox />);
|
|
25
|
+
expect(screen.getByText('Check Me')).toBeInTheDocument();
|
|
26
|
+
expect(screen.getByRole('checkbox')).toBeInTheDocument();
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
it('toggles checked state on pill click (with checkbox)', () => {
|
|
30
|
+
render(<Pill text="Check Me" checkbox />);
|
|
31
|
+
const pill = screen.getByText('Check Me').closest('.ds-pill');
|
|
32
|
+
const checkbox = screen.getByRole('checkbox');
|
|
33
|
+
expect(pill).toHaveClass('ds-pill__unchecked');
|
|
34
|
+
expect(checkbox).not.toBeChecked();
|
|
35
|
+
fireEvent.click(screen.getByText('Check Me'));
|
|
36
|
+
expect(pill).toHaveClass('ds-pill__checked');
|
|
37
|
+
expect(checkbox).toBeChecked();
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
it('toggles checked state on checkbox click only (with checkbox)', () => {
|
|
41
|
+
render(<Pill text="Check Me" checkbox />);
|
|
42
|
+
const pill = screen.getByText('Check Me').closest('.ds-pill');
|
|
43
|
+
const checkbox = screen.getByRole('checkbox');
|
|
44
|
+
fireEvent.click(checkbox);
|
|
45
|
+
expect(pill).toHaveClass('ds-pill__checked');
|
|
46
|
+
expect(checkbox).toBeChecked();
|
|
47
|
+
fireEvent.click(checkbox);
|
|
48
|
+
expect(pill).toHaveClass('ds-pill__unchecked');
|
|
49
|
+
expect(checkbox).not.toBeChecked();
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
it('calls onclick callback with correct checked value', () => {
|
|
53
|
+
const onClick = vi.fn();
|
|
54
|
+
render(<Pill text="Test Pill" onclick={onClick} />);
|
|
55
|
+
fireEvent.click(screen.getByText('Test Pill'));
|
|
56
|
+
expect(onClick).toHaveBeenCalledWith(true);
|
|
57
|
+
fireEvent.click(screen.getByText('Test Pill'));
|
|
58
|
+
expect(onClick).toHaveBeenCalledWith(false);
|
|
20
59
|
});
|
|
21
60
|
});
|
|
@@ -1,23 +1,47 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
| 'blue'
|
|
5
|
-
| 'green'
|
|
6
|
-
| 'purple'
|
|
7
|
-
| 'teal'
|
|
8
|
-
| 'salmon'
|
|
9
|
-
| 'yellow';
|
|
2
|
+
import { CheckboxInput } from 'Components/formField/inputs/checkbox/CheckboxInput';
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
10
4
|
|
|
11
5
|
type PillProps = {
|
|
12
6
|
text: string;
|
|
13
|
-
|
|
7
|
+
checkbox?: boolean;
|
|
8
|
+
onclick?: (checked: boolean) => void;
|
|
14
9
|
};
|
|
15
10
|
|
|
16
|
-
export const Pill = ({ text,
|
|
11
|
+
export const Pill = ({ text, checkbox, onclick }: PillProps) => {
|
|
12
|
+
const [checked, setChecked] = useState(false);
|
|
13
|
+
|
|
14
|
+
const handlePillClick = () => {
|
|
15
|
+
setChecked(prev => !prev);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const handleCheckboxClick = (event: React.MouseEvent) => {
|
|
19
|
+
event.stopPropagation();
|
|
20
|
+
setChecked(prev => !prev);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (onclick) {
|
|
25
|
+
onclick(checked);
|
|
26
|
+
}
|
|
27
|
+
}, [checked, onclick]);
|
|
28
|
+
|
|
17
29
|
return (
|
|
18
30
|
<span
|
|
19
|
-
|
|
31
|
+
onClick={handlePillClick}
|
|
32
|
+
className={classNames(
|
|
33
|
+
'ds-pill',
|
|
34
|
+
checkbox ? { 'ds-pill__checked': checked, 'ds-pill__unchecked': !checked } : { 'ds-pill__active': checked, 'ds-pill__inactive': !checked },
|
|
35
|
+
)}
|
|
20
36
|
>
|
|
37
|
+
{checkbox && (
|
|
38
|
+
<span className={classNames('ds-pill__checkbox')} onClick={e => e.stopPropagation()}>
|
|
39
|
+
<CheckboxInput
|
|
40
|
+
checked={checked}
|
|
41
|
+
onClick={handleCheckboxClick}
|
|
42
|
+
/>
|
|
43
|
+
</span>
|
|
44
|
+
)}
|
|
21
45
|
{text}
|
|
22
46
|
</span>
|
|
23
47
|
);
|
|
@@ -4,8 +4,10 @@
|
|
|
4
4
|
align-items: center;
|
|
5
5
|
gap: var(--tag-spacing-gap-horizontal);
|
|
6
6
|
border-radius: var(--tag-radius);
|
|
7
|
+
border: 1px solid var(--pill-single-filter-default-color-border);
|
|
7
8
|
flex-grow: 0;
|
|
8
9
|
width: fit-content;
|
|
10
|
+
cursor: pointer;
|
|
9
11
|
|
|
10
12
|
/* typography/body/p1-reg */
|
|
11
13
|
font-family: var(--type-body-p-family, Inter);
|
|
@@ -13,39 +15,45 @@
|
|
|
13
15
|
font-style: normal;
|
|
14
16
|
font-weight: var(--type-body-p-weight);
|
|
15
17
|
line-height: 150%; /* 19.5px */
|
|
16
|
-
|
|
17
|
-
&--orange {
|
|
18
|
-
color: var(--tag-category-orange-color-text);
|
|
19
|
-
background: var(--tag-category-orange-color-background);
|
|
20
|
-
}
|
|
21
18
|
|
|
22
|
-
|
|
23
|
-
color: var(--
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
&__inactive{
|
|
20
|
+
background-color: var(--pill-single-filter-default-color-background);
|
|
21
|
+
border-color: var(--pill-single-filter-default-color-border);
|
|
22
|
+
color: var(--pill-single-filter-default-color-text);
|
|
26
23
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
&:hover{
|
|
25
|
+
color: var(--pill-single-filter-hover-color-text);
|
|
26
|
+
border-color: var(--pill-single-filter-hover-color-border);
|
|
27
|
+
background-color: var(--pill-single-filter-hover-color-background);
|
|
28
|
+
}
|
|
30
29
|
}
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
color: var(--
|
|
34
|
-
|
|
31
|
+
&__active{
|
|
32
|
+
background-color: var(--pill-single-filter-active-color-background);
|
|
33
|
+
border-color: var(--pill-single-filter-active-color-border);
|
|
34
|
+
color: var(--pill-single-filter-active-color-text);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
color: var(--
|
|
39
|
-
|
|
37
|
+
&__unchecked{
|
|
38
|
+
background-color: var(--pill-checkbox-default-color-background);
|
|
39
|
+
border-color: var(--pill-checkbox-default-color-border);
|
|
40
|
+
color: var(--pill-checkbox-default-color-text);
|
|
41
|
+
|
|
42
|
+
&:hover{
|
|
43
|
+
background-color: var(--pill-checkbox-hover-color-background);
|
|
44
|
+
color: var(--pill-checkbox-hover-color-icon);
|
|
45
|
+
border-color: var(--pill-checkbox-hover-color-border);
|
|
46
|
+
}
|
|
40
47
|
}
|
|
41
48
|
|
|
42
|
-
|
|
43
|
-
color: var(--
|
|
44
|
-
|
|
49
|
+
&__checked{
|
|
50
|
+
background-color: var(--pill-checkbox-selected-color-background);
|
|
51
|
+
border-color: var(--pill-checkbox-selected-color-border);
|
|
52
|
+
color: var(--pill-checkbox-selected-color-text);
|
|
45
53
|
}
|
|
46
54
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
55
|
+
&__checkbox{
|
|
56
|
+
display: flex;
|
|
57
|
+
align-items: center;
|
|
50
58
|
}
|
|
51
59
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { describe, expect, test } from 'vitest';
|
|
2
|
+
import { render, screen } from '@testing-library/react';
|
|
3
|
+
import { Tag } from './Tag';
|
|
4
|
+
import '@testing-library/jest-dom/vitest';
|
|
5
|
+
|
|
6
|
+
describe('Tag', () => {
|
|
7
|
+
test('Tag says hello', () => {
|
|
8
|
+
render(<Tag text="Hello I'm a Pill!" />);
|
|
9
|
+
expect(screen.getByText("Hello I'm a Pill!")).toBeInTheDocument();
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
test('Tag has default color green', () => {
|
|
13
|
+
render(<Tag text="Hello I'm a Pill!" />);
|
|
14
|
+
expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--green');
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
test('Tag has custom color', () => {
|
|
18
|
+
render(<Tag text="Hello I'm a Pill!" color="blue" />);
|
|
19
|
+
expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--blue');
|
|
20
|
+
});
|
|
21
|
+
});
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
2
|
+
|
|
3
|
+
export type TagColor = 'orange'
|
|
4
|
+
| 'blue'
|
|
5
|
+
| 'green'
|
|
6
|
+
| 'purple'
|
|
7
|
+
| 'teal'
|
|
8
|
+
| 'salmon'
|
|
9
|
+
| 'yellow';
|
|
10
|
+
|
|
11
|
+
type TagProps = {
|
|
12
|
+
text: string;
|
|
13
|
+
color?: TagColor;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export const Tag = ({ text, color = 'green' }: TagProps) => {
|
|
17
|
+
return (
|
|
18
|
+
<span
|
|
19
|
+
className={classNames('ds-tag', `ds-tag--${color}`)}
|
|
20
|
+
>
|
|
21
|
+
{text}
|
|
22
|
+
</span>
|
|
23
|
+
);
|
|
24
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
.ds-tag {
|
|
2
|
+
display: flex;
|
|
3
|
+
padding: var(--tag-spacing-vertical) var(--tag-spacing-horizontal);
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: var(--tag-spacing-gap-horizontal);
|
|
6
|
+
border-radius: var(--tag-radius);
|
|
7
|
+
flex-grow: 0;
|
|
8
|
+
width: fit-content;
|
|
9
|
+
|
|
10
|
+
/* typography/body/p1-reg */
|
|
11
|
+
font-family: var(--type-body-p-family, Inter);
|
|
12
|
+
font-size: var(--type-body-p-size);
|
|
13
|
+
font-style: normal;
|
|
14
|
+
font-weight: var(--type-body-p-weight);
|
|
15
|
+
line-height: 150%; /* 19.5px */
|
|
16
|
+
|
|
17
|
+
&--orange {
|
|
18
|
+
color: var(--tag-category-orange-color-text);
|
|
19
|
+
background: var(--tag-category-orange-color-background);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&--blue {
|
|
23
|
+
color: var(--tag-category-blue-color-text);
|
|
24
|
+
background: var(--tag-category-blue-color-background);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&--green {
|
|
28
|
+
color: var(--tag-category-green-color-text);
|
|
29
|
+
background: var(--tag-category-green-color-background);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&--purple {
|
|
33
|
+
color: var(--tag-category-purple-color-text);
|
|
34
|
+
background: var(--tag-category-purple-color-background);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&--teal {
|
|
38
|
+
color: var(--tag-category-teal-color-text);
|
|
39
|
+
background: var(--tag-category-teal-color-background);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&--salmon {
|
|
43
|
+
color: var(--tag-category-salmon-color-text);
|
|
44
|
+
background: var(--tag-category-salmon-color-background);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&--yellow {
|
|
48
|
+
color: var(--tag-category-yellow-color-text);
|
|
49
|
+
background: var(--tag-category-yellow-color-background);
|
|
50
|
+
}
|
|
51
|
+
}
|
package/src/index.scss
CHANGED
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
@use "components/formField/inputs/checkbox/checkboxInput.scss";
|
|
15
15
|
@use "components/formField/inputs/selectDropdown/selectDropdown";
|
|
16
16
|
@use "components/formField/inputs/colourPickerDropdown/colourPickerDropdown.scss";
|
|
17
|
+
@use "components/tag/tag.scss";
|
|
17
18
|
@use "components/pill/pill.scss";
|
|
18
19
|
@use "components/section/section.scss";
|
|
19
20
|
@use "components/tabs/tabs.scss";
|
package/src/index.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { Heading } from 'Components/heading/Heading';
|
|
|
3
3
|
export { Icon } from 'Components/icon/Icon';
|
|
4
4
|
export { Card } from 'Components/card/Card';
|
|
5
5
|
export { Dropdown } from 'Components/dropdown/Dropdown';
|
|
6
|
+
export { Tag } from 'Components/tag/Tag';
|
|
6
7
|
export { Pill } from 'Components/pill/Pill';
|
|
7
8
|
export { Section } from 'Components/section/Section';
|
|
8
9
|
export { Tabs } from 'Components/tabs/Tabs';
|