@fluentui/react-badge 9.0.0-alpha.80 → 9.0.0-alpha.84
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +137 -1
- package/CHANGELOG.md +48 -2
- package/Spec.md +7 -22
- package/dist/react-badge.d.ts +57 -137
- package/lib/Badge.js.map +1 -1
- package/lib/CounterBadge.js.map +1 -1
- package/lib/PresenceBadge.js.map +1 -1
- package/lib/common/isConformant.js +2 -0
- package/lib/common/isConformant.js.map +1 -1
- package/lib/components/Badge/Badge.d.ts +1 -2
- package/lib/components/Badge/Badge.js +0 -1
- package/lib/components/Badge/Badge.js.map +1 -1
- package/lib/components/Badge/Badge.types.d.ts +19 -46
- package/lib/components/Badge/Badge.types.js.map +1 -1
- package/lib/components/Badge/index.js.map +1 -1
- package/lib/components/Badge/renderBadge.js +3 -4
- package/lib/components/Badge/renderBadge.js.map +1 -1
- package/lib/components/Badge/useBadge.d.ts +1 -5
- package/lib/components/Badge/useBadge.js +29 -18
- package/lib/components/Badge/useBadge.js.map +1 -1
- package/lib/components/Badge/useBadgeStyles.js +1 -1
- package/lib/components/Badge/useBadgeStyles.js.map +1 -1
- package/lib/components/CounterBadge/CounterBadge.d.ts +1 -2
- package/lib/components/CounterBadge/CounterBadge.js +0 -1
- package/lib/components/CounterBadge/CounterBadge.js.map +1 -1
- package/lib/components/CounterBadge/CounterBadge.types.d.ts +24 -44
- package/lib/components/CounterBadge/CounterBadge.types.js.map +1 -1
- package/lib/components/CounterBadge/index.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadge.d.ts +1 -5
- package/lib/components/CounterBadge/useCounterBadge.js +25 -19
- package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadgeStyles.js +1 -1
- package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- package/lib/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +1 -1
- package/lib/components/PresenceBadge/PresenceBadge.d.ts +1 -2
- package/lib/components/PresenceBadge/PresenceBadge.js +0 -1
- package/lib/components/PresenceBadge/PresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/PresenceBadge.types.d.ts +5 -25
- package/lib/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
- package/lib/components/PresenceBadge/index.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadge.d.ts +1 -5
- package/lib/components/PresenceBadge/usePresenceBadge.js +15 -21
- package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +1 -1
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Badge.js.map +1 -1
- package/lib-commonjs/CounterBadge.js.map +1 -1
- package/lib-commonjs/PresenceBadge.js.map +1 -1
- package/lib-commonjs/common/isConformant.js +2 -0
- package/lib-commonjs/common/isConformant.js.map +1 -1
- package/lib-commonjs/components/Badge/Badge.d.ts +1 -2
- package/lib-commonjs/components/Badge/Badge.js +0 -1
- package/lib-commonjs/components/Badge/Badge.js.map +1 -1
- package/lib-commonjs/components/Badge/Badge.types.d.ts +19 -46
- package/lib-commonjs/components/Badge/Badge.types.js.map +1 -1
- package/lib-commonjs/components/Badge/index.js.map +1 -1
- package/lib-commonjs/components/Badge/renderBadge.js +2 -4
- package/lib-commonjs/components/Badge/renderBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadge.d.ts +1 -5
- package/lib-commonjs/components/Badge/useBadge.js +30 -19
- package/lib-commonjs/components/Badge/useBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadgeStyles.js +1 -1
- package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/CounterBadge.d.ts +1 -2
- package/lib-commonjs/components/CounterBadge/CounterBadge.js +0 -1
- package/lib-commonjs/components/CounterBadge/CounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/CounterBadge.types.d.ts +24 -44
- package/lib-commonjs/components/CounterBadge/CounterBadge.types.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/index.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadge.d.ts +1 -5
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js +27 -21
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.d.ts +1 -2
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.js +0 -1
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.d.ts +5 -25
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/index.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.d.ts +1 -5
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +16 -22
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -9
- package/lib-amd/Badge.d.ts +0 -1
- package/lib-amd/Badge.js +0 -6
- package/lib-amd/Badge.js.map +0 -1
- package/lib-amd/CounterBadge.d.ts +0 -1
- package/lib-amd/CounterBadge.js +0 -6
- package/lib-amd/CounterBadge.js.map +0 -1
- package/lib-amd/PresenceBadge.d.ts +0 -1
- package/lib-amd/PresenceBadge.js +0 -6
- package/lib-amd/PresenceBadge.js.map +0 -1
- package/lib-amd/common/isConformant.d.ts +0 -4
- package/lib-amd/common/isConformant.js +0 -15
- package/lib-amd/common/isConformant.js.map +0 -1
- package/lib-amd/components/Badge/Badge.d.ts +0 -7
- package/lib-amd/components/Badge/Badge.js +0 -16
- package/lib-amd/components/Badge/Badge.js.map +0 -1
- package/lib-amd/components/Badge/Badge.types.d.ts +0 -65
- package/lib-amd/components/Badge/Badge.types.js +0 -5
- package/lib-amd/components/Badge/Badge.types.js.map +0 -1
- package/lib-amd/components/Badge/index.d.ts +0 -5
- package/lib-amd/components/Badge/index.js +0 -10
- package/lib-amd/components/Badge/index.js.map +0 -1
- package/lib-amd/components/Badge/renderBadge.d.ts +0 -2
- package/lib-amd/components/Badge/renderBadge.js +0 -14
- package/lib-amd/components/Badge/renderBadge.js.map +0 -1
- package/lib-amd/components/Badge/useBadge.d.ts +0 -10
- package/lib-amd/components/Badge/useBadge.js +0 -25
- package/lib-amd/components/Badge/useBadge.js.map +0 -1
- package/lib-amd/components/Badge/useBadgeStyles.d.ts +0 -5
- package/lib-amd/components/Badge/useBadgeStyles.js +0 -234
- package/lib-amd/components/Badge/useBadgeStyles.js.map +0 -1
- package/lib-amd/components/CounterBadge/CounterBadge.d.ts +0 -7
- package/lib-amd/components/CounterBadge/CounterBadge.js +0 -16
- package/lib-amd/components/CounterBadge/CounterBadge.js.map +0 -1
- package/lib-amd/components/CounterBadge/CounterBadge.types.d.ts +0 -61
- package/lib-amd/components/CounterBadge/CounterBadge.types.js +0 -5
- package/lib-amd/components/CounterBadge/CounterBadge.types.js.map +0 -1
- package/lib-amd/components/CounterBadge/index.d.ts +0 -4
- package/lib-amd/components/CounterBadge/index.js +0 -9
- package/lib-amd/components/CounterBadge/index.js.map +0 -1
- package/lib-amd/components/CounterBadge/useCounterBadge.d.ts +0 -10
- package/lib-amd/components/CounterBadge/useCounterBadge.js +0 -28
- package/lib-amd/components/CounterBadge/useCounterBadge.js.map +0 -1
- package/lib-amd/components/CounterBadge/useCounterBadgeStyles.d.ts +0 -5
- package/lib-amd/components/CounterBadge/useCounterBadgeStyles.js +0 -46
- package/lib-amd/components/CounterBadge/useCounterBadgeStyles.js.map +0 -1
- package/lib-amd/components/PresenceBadge/DefaultPresenceBadgeIcons.d.ts +0 -10
- package/lib-amd/components/PresenceBadge/DefaultPresenceBadgeIcons.js +0 -64
- package/lib-amd/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +0 -1
- package/lib-amd/components/PresenceBadge/PresenceBadge.d.ts +0 -7
- package/lib-amd/components/PresenceBadge/PresenceBadge.js +0 -16
- package/lib-amd/components/PresenceBadge/PresenceBadge.js.map +0 -1
- package/lib-amd/components/PresenceBadge/PresenceBadge.types.d.ts +0 -37
- package/lib-amd/components/PresenceBadge/PresenceBadge.types.js +0 -5
- package/lib-amd/components/PresenceBadge/PresenceBadge.types.js.map +0 -1
- package/lib-amd/components/PresenceBadge/index.d.ts +0 -4
- package/lib-amd/components/PresenceBadge/index.js +0 -9
- package/lib-amd/components/PresenceBadge/index.js.map +0 -1
- package/lib-amd/components/PresenceBadge/usePresenceBadge.d.ts +0 -10
- package/lib-amd/components/PresenceBadge/usePresenceBadge.js +0 -37
- package/lib-amd/components/PresenceBadge/usePresenceBadge.js.map +0 -1
- package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.d.ts +0 -5
- package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js +0 -58
- package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js.map +0 -1
- package/lib-amd/index.d.ts +0 -5
- package/lib-amd/index.js +0 -10
- package/lib-amd/index.js.map +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;;IAIA,SAAgB,YAAY,CAC1B,QAAyF;QAEzF,IAAM,cAAc,GAAyC;YAC3D,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5D,UAAU,EAAE,uCAAqC;SAClD,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAVD,oCAUC","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n asPropHandlesRef: true,\n componentPath: module!.parent!.filename.replace('.test', ''),\n extraTests: makeStylesTests as TestObject<TProps>,\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { BadgeProps } from './Badge.types';
|
3
|
-
/**
|
4
|
-
* Define a styled Badge, using the `useBadge` hook.
|
5
|
-
* {@docCategory Badge}
|
6
|
-
*/
|
7
|
-
export declare const Badge: React.FunctionComponent<BadgeProps & React.RefAttributes<HTMLElement>>;
|
@@ -1,16 +0,0 @@
|
|
1
|
-
define(["require", "exports", "react", "./useBadge", "./useBadgeStyles", "./renderBadge"], function (require, exports, React, useBadge_1, useBadgeStyles_1, renderBadge_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.Badge = void 0;
|
5
|
-
/**
|
6
|
-
* Define a styled Badge, using the `useBadge` hook.
|
7
|
-
* {@docCategory Badge}
|
8
|
-
*/
|
9
|
-
exports.Badge = React.forwardRef(function (props, ref) {
|
10
|
-
var state = useBadge_1.useBadge(props, ref);
|
11
|
-
useBadgeStyles_1.useBadgeStyles(state);
|
12
|
-
return renderBadge_1.renderBadge(state);
|
13
|
-
});
|
14
|
-
exports.Badge.displayName = 'Badge';
|
15
|
-
});
|
16
|
-
//# sourceMappingURL=Badge.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"../src/","sources":["components/Badge/Badge.tsx"],"names":[],"mappings":";;;;IAMA;;;OAGG;IACU,QAAA,KAAK,GAA2E,KAAK,CAAC,UAAU,CAG3G,UAAC,KAAK,EAAE,GAAG;QACX,IAAM,KAAK,GAAG,mBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACnC,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,yBAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useBadge } from './useBadge';\nimport { useBadgeStyles } from './useBadgeStyles';\nimport { renderBadge } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\n\n/**\n * Define a styled Badge, using the `useBadge` hook.\n * {@docCategory Badge}\n */\nexport const Badge: React.FunctionComponent<BadgeProps & React.RefAttributes<HTMLElement>> = React.forwardRef<\n HTMLElement,\n BadgeProps\n>((props, ref) => {\n const state = useBadge(props, ref);\n useBadgeStyles(state);\n\n return renderBadge(state);\n});\n\nBadge.displayName = 'Badge';\n"]}
|
@@ -1,65 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { ComponentPropsCompat, ShorthandPropsCompat, ObjectShorthandPropsCompat } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* {@docCategory Badge}
|
5
|
-
*/
|
6
|
-
export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
|
7
|
-
/**
|
8
|
-
* {@docCategory Badge}
|
9
|
-
*/
|
10
|
-
export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
|
11
|
-
/**
|
12
|
-
* {@docCategory Badge}
|
13
|
-
*/
|
14
|
-
export declare type BadgeShape = 'rounded' | 'square' | 'circular';
|
15
|
-
/**
|
16
|
-
* {@docCategory Badge}
|
17
|
-
*/
|
18
|
-
export declare type BadgeColors = 'brand' | 'danger' | 'severe' | 'warning' | 'success' | 'important' | 'informative' | 'subtle';
|
19
|
-
/**
|
20
|
-
* {@docCategory Badge}
|
21
|
-
*/
|
22
|
-
export interface BadgeProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
|
23
|
-
/**
|
24
|
-
* A Badge can be sized.
|
25
|
-
* @defaultvalue medium
|
26
|
-
*/
|
27
|
-
size?: BadgeSize;
|
28
|
-
/**
|
29
|
-
* A Badge can be square, circular or rounded
|
30
|
-
* @defaultvalue circular
|
31
|
-
*/
|
32
|
-
shape?: BadgeShape;
|
33
|
-
/**
|
34
|
-
* A Badge can be filled, outline, ghost, inverted
|
35
|
-
* @defaultvalue filled
|
36
|
-
*/
|
37
|
-
appearance?: BadgeAppearance;
|
38
|
-
/**
|
39
|
-
* A Badge has a preset of colors
|
40
|
-
* @defaultvalue filled
|
41
|
-
*/
|
42
|
-
color?: BadgeColors;
|
43
|
-
/**
|
44
|
-
* Icon slot
|
45
|
-
*/
|
46
|
-
icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
|
47
|
-
/**
|
48
|
-
* Position for Icon to be rendered
|
49
|
-
* @defaultvalue before
|
50
|
-
*/
|
51
|
-
iconPosition?: 'before' | 'after';
|
52
|
-
}
|
53
|
-
/**
|
54
|
-
* {@docCategory Badge}
|
55
|
-
*/
|
56
|
-
export interface BadgeState extends BadgeProps {
|
57
|
-
/**
|
58
|
-
* Ref to the root slot
|
59
|
-
*/
|
60
|
-
ref: React.RefObject<HTMLElement>;
|
61
|
-
/**
|
62
|
-
* Icon slot when processed by internal state
|
63
|
-
*/
|
64
|
-
icon?: ObjectShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;
|
65
|
-
}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Badge.types.js","sourceRoot":"../src/","sources":["components/Badge/Badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ShorthandPropsCompat, ObjectShorthandPropsCompat } from '@fluentui/react-utilities';\n\n/**\n * {@docCategory Badge}\n */\nexport type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';\n\n/**\n * {@docCategory Badge}\n */\nexport type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';\n\n/**\n * {@docCategory Badge}\n */\nexport type BadgeShape = 'rounded' | 'square' | 'circular';\n\n/**\n * {@docCategory Badge}\n */\nexport type BadgeColors =\n | 'brand'\n | 'danger'\n | 'severe'\n | 'warning'\n | 'success'\n | 'important'\n | 'informative'\n | 'subtle';\n\n/**\n * {@docCategory Badge}\n */\nexport interface BadgeProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {\n /**\n * A Badge can be sized.\n * @defaultvalue medium\n */\n size?: BadgeSize;\n\n /**\n * A Badge can be square, circular or rounded\n * @defaultvalue circular\n */\n shape?: BadgeShape;\n\n /**\n * A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n */\n appearance?: BadgeAppearance;\n\n /**\n * A Badge has a preset of colors\n * @defaultvalue filled\n */\n color?: BadgeColors;\n\n /**\n * Icon slot\n */\n icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n /**\n * Position for Icon to be rendered\n * @defaultvalue before\n */\n iconPosition?: 'before' | 'after';\n}\n\n/**\n * {@docCategory Badge}\n */\nexport interface BadgeState extends BadgeProps {\n /**\n * Ref to the root slot\n */\n ref: React.RefObject<HTMLElement>;\n /**\n * Icon slot when processed by internal state\n */\n icon?: ObjectShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;\n}\n"]}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "./Badge", "./Badge.types", "./renderBadge", "./useBadge", "./useBadgeStyles"], function (require, exports, tslib_1, Badge_1, Badge_types_1, renderBadge_1, useBadge_1, useBadgeStyles_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
tslib_1.__exportStar(Badge_1, exports);
|
5
|
-
tslib_1.__exportStar(Badge_types_1, exports);
|
6
|
-
tslib_1.__exportStar(renderBadge_1, exports);
|
7
|
-
tslib_1.__exportStar(useBadge_1, exports);
|
8
|
-
tslib_1.__exportStar(useBadgeStyles_1, exports);
|
9
|
-
});
|
10
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Badge/index.ts"],"names":[],"mappings":";;;IAAA,uCAAwB;IACxB,6CAA8B;IAC9B,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Badge';\nexport * from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"]}
|
@@ -1,14 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useBadge"], function (require, exports, tslib_1, React, react_utilities_1, useBadge_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.renderBadge = void 0;
|
5
|
-
var renderBadge = function (state) {
|
6
|
-
var _a = react_utilities_1.getSlotsCompat(state, useBadge_1.badgeShorthandPropsCompat), slots = _a.slots, slotProps = _a.slotProps;
|
7
|
-
return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
|
8
|
-
state.iconPosition === 'before' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
|
9
|
-
state.children,
|
10
|
-
state.iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon))));
|
11
|
-
};
|
12
|
-
exports.renderBadge = renderBadge;
|
13
|
-
});
|
14
|
-
//# sourceMappingURL=renderBadge.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"renderBadge.js","sourceRoot":"../src/","sources":["components/Badge/renderBadge.tsx"],"names":[],"mappings":";;;;IAKO,IAAM,WAAW,GAAG,UAAC,KAAiB;QACrC,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,oCAAyB,CAAC,EAArE,KAAK,WAAA,EAAE,SAAS,eAAqD,CAAC;QAE9E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YACrE,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAC1D,CACd,CAAC;IACJ,CAAC,CAAC;IAVW,QAAA,WAAW,eAUtB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { badgeShorthandPropsCompat } from './useBadge';\nimport type { BadgeState } from './Badge.types';\n\nexport const renderBadge = (state: BadgeState) => {\n const { slots, slotProps } = getSlotsCompat(state, badgeShorthandPropsCompat);\n\n return (\n <slots.root {...slotProps.root}>\n {state.iconPosition === 'before' && <slots.icon {...slotProps.icon} />}\n {state.children}\n {state.iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"]}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { BadgeProps, BadgeState } from './Badge.types';
|
3
|
-
/**
|
4
|
-
* Consts listing which props are shorthand props.
|
5
|
-
*/
|
6
|
-
export declare const badgeShorthandPropsCompat: readonly ["icon"];
|
7
|
-
/**
|
8
|
-
* Returns the props and state required to render the component
|
9
|
-
*/
|
10
|
-
export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;
|
@@ -1,25 +0,0 @@
|
|
1
|
-
define(["require", "exports", "react", "@fluentui/react-utilities"], function (require, exports, React, react_utilities_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useBadge = exports.badgeShorthandPropsCompat = void 0;
|
5
|
-
/**
|
6
|
-
* Consts listing which props are shorthand props.
|
7
|
-
*/
|
8
|
-
exports.badgeShorthandPropsCompat = ['icon'];
|
9
|
-
var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.badgeShorthandPropsCompat });
|
10
|
-
/**
|
11
|
-
* Returns the props and state required to render the component
|
12
|
-
*/
|
13
|
-
var useBadge = function (props, ref, defaultProps) {
|
14
|
-
var state = mergeProps({
|
15
|
-
ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
|
16
|
-
shape: 'circular',
|
17
|
-
size: 'medium',
|
18
|
-
iconPosition: 'before',
|
19
|
-
'aria-hidden': true,
|
20
|
-
}, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.badgeShorthandPropsCompat), react_utilities_1.resolveShorthandProps(props, exports.badgeShorthandPropsCompat));
|
21
|
-
return state;
|
22
|
-
};
|
23
|
-
exports.useBadge = useBadge;
|
24
|
-
});
|
25
|
-
//# sourceMappingURL=useBadge.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useBadge.js","sourceRoot":"../src/","sources":["components/Badge/useBadge.ts"],"names":[],"mappings":";;;;IAIA;;OAEG;IACU,QAAA,yBAAyB,GAAG,CAAC,MAAM,CAAU,CAAC;IAE3D,IAAM,UAAU,GAAG,gCAAc,CAAa,EAAE,SAAS,EAAE,iCAAyB,EAAE,CAAC,CAAC;IAExF;;OAEG;IACI,IAAM,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;QAChG,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC3C,KAAK,EAAE,UAAU;YACjB,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,QAAQ;YACtB,aAAa,EAAE,IAAI;SACpB,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,iCAAyB,CAAC,EAC9E,uCAAqB,CAAC,KAAK,EAAE,iCAAyB,CAAC,CACxD,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAdW,QAAA,QAAQ,YAcnB","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const badgeShorthandPropsCompat = ['icon'] as const;\n\nconst mergeProps = makeMergeProps<BadgeState>({ deepMerge: badgeShorthandPropsCompat });\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge = (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps): BadgeState => {\n const state = mergeProps(\n {\n ref: useMergedRefs(ref, React.useRef(null)),\n shape: 'circular',\n size: 'medium',\n iconPosition: 'before',\n 'aria-hidden': true,\n },\n defaultProps && resolveShorthandProps(defaultProps, badgeShorthandPropsCompat),\n resolveShorthandProps(props, badgeShorthandPropsCompat),\n );\n\n return state;\n};\n"]}
|
@@ -1,234 +0,0 @@
|
|
1
|
-
define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useBadgeStyles = void 0;
|
5
|
-
var useStyles = react_make_styles_1.makeStyles({
|
6
|
-
root: function (theme) { return ({
|
7
|
-
display: 'inline-flex',
|
8
|
-
boxSizing: 'border-box',
|
9
|
-
alignItems: 'center',
|
10
|
-
justifyContent: 'center',
|
11
|
-
backgroundColor: theme.alias.color.neutral.brandBackground,
|
12
|
-
borderColor: theme.alias.color.neutral.brandBackground,
|
13
|
-
color: theme.alias.color.neutral.neutralForegroundOnBrand,
|
14
|
-
fontWeight: theme.global.type.fontWeights.semibold,
|
15
|
-
borderWidth: theme.global.strokeWidth.thin,
|
16
|
-
borderStyle: 'solid',
|
17
|
-
fontFamily: theme.global.type.fontFamilies.base,
|
18
|
-
position: 'relative',
|
19
|
-
}); },
|
20
|
-
rootSmallest: {
|
21
|
-
width: '6px',
|
22
|
-
height: '6px',
|
23
|
-
fontSize: '4px',
|
24
|
-
},
|
25
|
-
rootSmaller: {
|
26
|
-
width: '10px',
|
27
|
-
height: '10px',
|
28
|
-
fontSize: '6px',
|
29
|
-
},
|
30
|
-
rootSmall: {
|
31
|
-
minWidth: '16px',
|
32
|
-
height: '16px',
|
33
|
-
paddingRight: '6px',
|
34
|
-
paddingLeft: '6px',
|
35
|
-
gap: '4px',
|
36
|
-
fontSize: '8px',
|
37
|
-
},
|
38
|
-
rootMedium: {
|
39
|
-
height: '20px',
|
40
|
-
minWidth: '20px',
|
41
|
-
gap: '4px',
|
42
|
-
paddingRight: '8px',
|
43
|
-
paddingLeft: '8px',
|
44
|
-
fontSize: '10px',
|
45
|
-
},
|
46
|
-
rootLarge: {
|
47
|
-
minWidth: '24px',
|
48
|
-
height: '24px',
|
49
|
-
paddingRight: '8px',
|
50
|
-
paddingLeft: '8px',
|
51
|
-
fontSize: '12px',
|
52
|
-
gap: '6px',
|
53
|
-
},
|
54
|
-
rootLargerLargest: function (theme) { return ({
|
55
|
-
minWidth: '32px',
|
56
|
-
height: '32px',
|
57
|
-
paddingRight: '12px',
|
58
|
-
paddingLeft: '12px',
|
59
|
-
gap: '6px',
|
60
|
-
fontSize: '12px',
|
61
|
-
borderWidth: theme.global.strokeWidth.thick,
|
62
|
-
}); },
|
63
|
-
rootRounded: function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); },
|
64
|
-
rootRoundedSmallSmallerSmallest: function (theme) { return ({ borderRadius: theme.global.borderRadius.small }); },
|
65
|
-
rootCircular: { borderRadius: '99px' },
|
66
|
-
rootGhost: function (theme) { return ({
|
67
|
-
background: 'transparent',
|
68
|
-
border: 'none',
|
69
|
-
color: theme.alias.color.neutral.brandBackground,
|
70
|
-
}); },
|
71
|
-
rootOutline: function (theme) { return ({
|
72
|
-
background: 'transparent',
|
73
|
-
borderColor: theme.alias.color.neutral.brandBackground,
|
74
|
-
color: theme.alias.color.neutral.brandBackground,
|
75
|
-
}); },
|
76
|
-
rootTint: function (theme) { return ({
|
77
|
-
backgroundColor: theme.global.palette.brand.tint60,
|
78
|
-
color: theme.global.palette.brand.shade40,
|
79
|
-
borderColor: 'none',
|
80
|
-
}); },
|
81
|
-
rootFilledDanger: function (theme) { return ({
|
82
|
-
backgroundColor: theme.alias.color.red.background3,
|
83
|
-
color: theme.alias.color.neutral.neutralForegroundOnBrand,
|
84
|
-
borderColor: theme.alias.color.red.background3,
|
85
|
-
}); },
|
86
|
-
rootOutlineDanger: function (theme) { return ({
|
87
|
-
color: theme.alias.color.red.foreground3,
|
88
|
-
borderColor: theme.alias.color.red.foreground3,
|
89
|
-
}); },
|
90
|
-
rootTintDanger: function (theme) { return ({
|
91
|
-
backgroundColor: theme.alias.color.red.background1,
|
92
|
-
color: theme.alias.color.red.foreground1,
|
93
|
-
borderColor: theme.alias.color.red.foreground2,
|
94
|
-
}); },
|
95
|
-
rootGhostDanger: function (theme) { return ({
|
96
|
-
color: theme.alias.color.red.foreground3,
|
97
|
-
}); },
|
98
|
-
rootFilledSevere: function (theme) { return ({
|
99
|
-
backgroundColor: theme.alias.color.darkOrange.background3,
|
100
|
-
color: theme.alias.color.neutral.neutralForegroundOnBrand,
|
101
|
-
borderColor: 'none',
|
102
|
-
}); },
|
103
|
-
rootOutlineSevere: function (theme) { return ({
|
104
|
-
color: theme.alias.color.darkOrange.foreground3,
|
105
|
-
borderColor: theme.alias.color.darkOrange.foreground3,
|
106
|
-
}); },
|
107
|
-
rootTintSevere: function (theme) { return ({
|
108
|
-
backgroundColor: theme.alias.color.darkOrange.background1,
|
109
|
-
color: theme.alias.color.darkOrange.foreground1,
|
110
|
-
borderColor: theme.alias.color.darkOrange.foreground2,
|
111
|
-
}); },
|
112
|
-
rootGhostSevere: function (theme) { return ({
|
113
|
-
color: theme.alias.color.darkOrange.foreground3,
|
114
|
-
}); },
|
115
|
-
rootFilledWarning: function (theme) { return ({
|
116
|
-
backgroundColor: theme.alias.color.yellow.background3,
|
117
|
-
color: theme.alias.color.neutral.neutralForeground1,
|
118
|
-
borderColor: theme.alias.color.yellow.background3,
|
119
|
-
}); },
|
120
|
-
rootOutlineWarning: function (theme) { return ({
|
121
|
-
color: theme.alias.color.yellow.foreground2,
|
122
|
-
borderColor: theme.alias.color.yellow.foreground2,
|
123
|
-
}); },
|
124
|
-
rootTintWarning: function (theme) { return ({
|
125
|
-
backgroundColor: theme.alias.color.yellow.background1,
|
126
|
-
color: theme.alias.color.yellow.foreground2,
|
127
|
-
borderColor: theme.alias.color.yellow.background2,
|
128
|
-
}); },
|
129
|
-
rootGhostWarning: function (theme) { return ({
|
130
|
-
color: theme.alias.color.yellow.foreground2,
|
131
|
-
}); },
|
132
|
-
rootFilledSuccess: function (theme) { return ({
|
133
|
-
backgroundColor: theme.alias.color.green.background3,
|
134
|
-
color: theme.alias.color.neutral.neutralForegroundOnBrand,
|
135
|
-
borderColor: 'none',
|
136
|
-
}); },
|
137
|
-
rootOutlineSuccess: function (theme) { return ({
|
138
|
-
color: theme.alias.color.green.foreground2,
|
139
|
-
borderColor: theme.alias.color.green.foreground2,
|
140
|
-
}); },
|
141
|
-
rootTintSuccess: function (theme) { return ({
|
142
|
-
backgroundColor: theme.alias.color.green.background1,
|
143
|
-
color: theme.alias.color.green.foreground1,
|
144
|
-
borderColor: theme.alias.color.green.background2,
|
145
|
-
}); },
|
146
|
-
rootGhostSuccess: function (theme) { return ({
|
147
|
-
color: theme.alias.color.green.foreground3,
|
148
|
-
}); },
|
149
|
-
rootFilledImportant: function (theme) { return ({
|
150
|
-
backgroundColor: theme.alias.color.neutral.neutralForeground1,
|
151
|
-
color: theme.alias.color.neutral.neutralBackground1,
|
152
|
-
borderColor: theme.alias.color.neutral.transparentStroke,
|
153
|
-
}); },
|
154
|
-
rootOutlineImportant: function (theme) { return ({
|
155
|
-
color: theme.alias.color.neutral.neutralForeground1,
|
156
|
-
borderColor: theme.alias.color.neutral.neutralForeground1,
|
157
|
-
}); },
|
158
|
-
rootTintImportant: function (theme) { return ({
|
159
|
-
backgroundColor: theme.alias.color.neutral.neutralForeground3,
|
160
|
-
color: theme.alias.color.neutral.neutralBackground1,
|
161
|
-
borderColor: theme.alias.color.neutral.transparentStroke,
|
162
|
-
}); },
|
163
|
-
rootGhostImportant: function (theme) { return ({
|
164
|
-
color: theme.alias.color.neutral.neutralForeground1,
|
165
|
-
}); },
|
166
|
-
rootFilledInformative: function (theme) { return ({
|
167
|
-
backgroundColor: theme.alias.color.neutral.neutralBackground5,
|
168
|
-
color: theme.alias.color.neutral.neutralForeground3,
|
169
|
-
borderColor: theme.alias.color.neutral.transparentStroke,
|
170
|
-
}); },
|
171
|
-
rootOutlineInformative: function (theme) { return ({
|
172
|
-
backgroundColor: theme.alias.color.darkOrange.background3,
|
173
|
-
color: theme.alias.color.neutral.neutralBackground5,
|
174
|
-
borderColor: theme.alias.color.neutral.neutralBackground5,
|
175
|
-
}); },
|
176
|
-
rootTintInformative: function (theme) { return ({
|
177
|
-
backgroundColor: theme.alias.color.neutral.neutralBackground4,
|
178
|
-
color: theme.alias.color.neutral.neutralForeground3,
|
179
|
-
borderColor: theme.alias.color.neutral.neutralStroke2,
|
180
|
-
}); },
|
181
|
-
rootGhostInformative: function (theme) { return ({
|
182
|
-
color: theme.alias.color.neutral.neutralBackground5,
|
183
|
-
}); },
|
184
|
-
rootFilledSubtle: function (theme) { return ({
|
185
|
-
backgroundColor: theme.alias.color.neutral.neutralBackground1,
|
186
|
-
color: theme.alias.color.neutral.neutralForeground1,
|
187
|
-
borderColor: theme.alias.color.neutral.transparentStroke,
|
188
|
-
}); },
|
189
|
-
rootOutlineSubtle: function (theme) { return ({
|
190
|
-
color: theme.alias.color.neutral.neutralForegroundOnBrand,
|
191
|
-
borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,
|
192
|
-
}); },
|
193
|
-
rootTintSubtle: function (theme) { return ({
|
194
|
-
backgroundColor: theme.alias.color.neutral.neutralBackground1,
|
195
|
-
color: theme.alias.color.neutral.neutralForeground3,
|
196
|
-
borderColor: theme.alias.color.neutral.neutralStroke2,
|
197
|
-
}); },
|
198
|
-
rootGhostSubtle: function (theme) { return ({
|
199
|
-
color: theme.alias.color.neutral.neutralForegroundOnBrand,
|
200
|
-
}); },
|
201
|
-
icon: {
|
202
|
-
display: 'flex',
|
203
|
-
alignContent: 'center',
|
204
|
-
alignItems: 'center',
|
205
|
-
height: '100%',
|
206
|
-
},
|
207
|
-
});
|
208
|
-
/**
|
209
|
-
* Applies style classnames to slots
|
210
|
-
*/
|
211
|
-
var useBadgeStyles = function (state) {
|
212
|
-
var styles = useStyles();
|
213
|
-
var isGhost = state.appearance === 'ghost';
|
214
|
-
var isOutline = state.appearance === 'outline';
|
215
|
-
var isTint = state.appearance === 'tint';
|
216
|
-
var isFilled = state.appearance === 'filled';
|
217
|
-
var isDanger = state.color === 'danger';
|
218
|
-
var isSevere = state.color === 'severe';
|
219
|
-
var isWarning = state.color === 'warning';
|
220
|
-
var isSuccess = state.color === 'success';
|
221
|
-
var isImportant = state.color === 'important';
|
222
|
-
var isInformative = state.color === 'informative';
|
223
|
-
var isSubtle = state.color === 'subtle';
|
224
|
-
state.className = react_make_styles_1.mergeClasses(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' &&
|
225
|
-
(state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') &&
|
226
|
-
styles.rootRoundedSmallSmallerSmallest, isGhost && styles.rootGhost, isOutline && styles.rootOutline, isTint && styles.rootTint, isFilled && isDanger && styles.rootFilledDanger, isOutline && isDanger && styles.rootOutlineDanger, isTint && isDanger && styles.rootTintDanger, isGhost && isDanger && styles.rootGhostDanger, isFilled && isSevere && styles.rootFilledSevere, isOutline && isSevere && styles.rootOutlineSevere, isTint && isSevere && styles.rootTintSevere, isGhost && isSevere && styles.rootGhostSevere, isFilled && isWarning && styles.rootFilledWarning, isOutline && isWarning && styles.rootOutlineWarning, isTint && isWarning && styles.rootTintWarning, isGhost && isWarning && styles.rootGhostWarning, isFilled && isSuccess && styles.rootFilledSuccess, isOutline && isSuccess && styles.rootOutlineSuccess, isTint && isSuccess && styles.rootTintSuccess, isGhost && isSuccess && styles.rootGhostSuccess, isFilled && isImportant && styles.rootFilledImportant, isOutline && isImportant && styles.rootOutlineImportant, isTint && isImportant && styles.rootTintImportant, isGhost && isImportant && styles.rootGhostImportant, isFilled && isInformative && styles.rootFilledInformative, isOutline && isInformative && styles.rootOutlineInformative, isTint && isInformative && styles.rootTintInformative, isGhost && isInformative && styles.rootGhostInformative, isFilled && isSubtle && styles.rootFilledSubtle, isOutline && isSubtle && styles.rootOutlineSubtle, isTint && isSubtle && styles.rootTintSubtle, isGhost && isSubtle && styles.rootGhostSubtle, state.className);
|
227
|
-
if (state.icon) {
|
228
|
-
state.icon.className = react_make_styles_1.mergeClasses(styles.icon, state.icon.className);
|
229
|
-
}
|
230
|
-
return state;
|
231
|
-
};
|
232
|
-
exports.useBadgeStyles = useBadgeStyles;
|
233
|
-
});
|
234
|
-
//# sourceMappingURL=useBadgeStyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useBadgeStyles.js","sourceRoot":"../src/","sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { BadgeState } from './Badge.types';\n\nconst useStyles = makeStyles({\n root: theme => ({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.alias.color.neutral.brandBackground,\n borderColor: theme.alias.color.neutral.brandBackground,\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n fontWeight: theme.global.type.fontWeights.semibold,\n borderWidth: theme.global.strokeWidth.thin,\n borderStyle: 'solid',\n fontFamily: theme.global.type.fontFamilies.base,\n position: 'relative',\n }),\n rootSmallest: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n },\n rootSmaller: {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n },\n rootSmall: {\n minWidth: '16px',\n height: '16px',\n paddingRight: '6px',\n paddingLeft: '6px',\n gap: '4px',\n fontSize: '8px',\n },\n rootMedium: {\n height: '20px',\n minWidth: '20px',\n gap: '4px',\n paddingRight: '8px',\n paddingLeft: '8px',\n fontSize: '10px',\n },\n rootLarge: {\n minWidth: '24px',\n height: '24px',\n paddingRight: '8px',\n paddingLeft: '8px',\n fontSize: '12px',\n gap: '6px',\n },\n rootLargerLargest: theme => ({\n minWidth: '32px',\n height: '32px',\n paddingRight: '12px',\n paddingLeft: '12px',\n gap: '6px',\n fontSize: '12px',\n borderWidth: theme.global.strokeWidth.thick,\n }),\n rootRounded: theme => ({ borderRadius: theme.global.borderRadius.medium }),\n rootRoundedSmallSmallerSmallest: theme => ({ borderRadius: theme.global.borderRadius.small }),\n rootCircular: { borderRadius: '99px' },\n rootGhost: theme => ({\n background: 'transparent',\n border: 'none',\n color: theme.alias.color.neutral.brandBackground,\n }),\n rootOutline: theme => ({\n background: 'transparent',\n borderColor: theme.alias.color.neutral.brandBackground,\n color: theme.alias.color.neutral.brandBackground,\n }),\n rootTint: theme => ({\n backgroundColor: theme.global.palette.brand.tint60,\n color: theme.global.palette.brand.shade40,\n borderColor: 'none',\n }),\n rootFilledDanger: theme => ({\n backgroundColor: theme.alias.color.red.background3,\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n borderColor: theme.alias.color.red.background3,\n }),\n rootOutlineDanger: theme => ({\n color: theme.alias.color.red.foreground3,\n borderColor: theme.alias.color.red.foreground3,\n }),\n rootTintDanger: theme => ({\n backgroundColor: theme.alias.color.red.background1,\n color: theme.alias.color.red.foreground1,\n borderColor: theme.alias.color.red.foreground2,\n }),\n rootGhostDanger: theme => ({\n color: theme.alias.color.red.foreground3,\n }),\n rootFilledSevere: theme => ({\n backgroundColor: theme.alias.color.darkOrange.background3,\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n borderColor: 'none',\n }),\n rootOutlineSevere: theme => ({\n color: theme.alias.color.darkOrange.foreground3,\n borderColor: theme.alias.color.darkOrange.foreground3,\n }),\n rootTintSevere: theme => ({\n backgroundColor: theme.alias.color.darkOrange.background1,\n color: theme.alias.color.darkOrange.foreground1,\n borderColor: theme.alias.color.darkOrange.foreground2,\n }),\n rootGhostSevere: theme => ({\n color: theme.alias.color.darkOrange.foreground3,\n }),\n rootFilledWarning: theme => ({\n backgroundColor: theme.alias.color.yellow.background3,\n color: theme.alias.color.neutral.neutralForeground1,\n borderColor: theme.alias.color.yellow.background3,\n }),\n rootOutlineWarning: theme => ({\n color: theme.alias.color.yellow.foreground2,\n borderColor: theme.alias.color.yellow.foreground2,\n }),\n rootTintWarning: theme => ({\n backgroundColor: theme.alias.color.yellow.background1,\n color: theme.alias.color.yellow.foreground2,\n borderColor: theme.alias.color.yellow.background2,\n }),\n rootGhostWarning: theme => ({\n color: theme.alias.color.yellow.foreground2,\n }),\n rootFilledSuccess: theme => ({\n backgroundColor: theme.alias.color.green.background3,\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n borderColor: 'none',\n }),\n rootOutlineSuccess: theme => ({\n color: theme.alias.color.green.foreground2,\n borderColor: theme.alias.color.green.foreground2,\n }),\n rootTintSuccess: theme => ({\n backgroundColor: theme.alias.color.green.background1,\n color: theme.alias.color.green.foreground1,\n borderColor: theme.alias.color.green.background2,\n }),\n rootGhostSuccess: theme => ({\n color: theme.alias.color.green.foreground3,\n }),\n rootFilledImportant: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralForeground1,\n color: theme.alias.color.neutral.neutralBackground1,\n borderColor: theme.alias.color.neutral.transparentStroke,\n }),\n rootOutlineImportant: theme => ({\n color: theme.alias.color.neutral.neutralForeground1,\n borderColor: theme.alias.color.neutral.neutralForeground1,\n }),\n rootTintImportant: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralForeground3,\n color: theme.alias.color.neutral.neutralBackground1,\n borderColor: theme.alias.color.neutral.transparentStroke,\n }),\n rootGhostImportant: theme => ({\n color: theme.alias.color.neutral.neutralForeground1,\n }),\n rootFilledInformative: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralBackground5,\n color: theme.alias.color.neutral.neutralForeground3,\n borderColor: theme.alias.color.neutral.transparentStroke,\n }),\n rootOutlineInformative: theme => ({\n backgroundColor: theme.alias.color.darkOrange.background3,\n color: theme.alias.color.neutral.neutralBackground5,\n borderColor: theme.alias.color.neutral.neutralBackground5,\n }),\n rootTintInformative: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralBackground4,\n color: theme.alias.color.neutral.neutralForeground3,\n borderColor: theme.alias.color.neutral.neutralStroke2,\n }),\n rootGhostInformative: theme => ({\n color: theme.alias.color.neutral.neutralBackground5,\n }),\n rootFilledSubtle: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralBackground1,\n color: theme.alias.color.neutral.neutralForeground1,\n borderColor: theme.alias.color.neutral.transparentStroke,\n }),\n rootOutlineSubtle: theme => ({\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n }),\n rootTintSubtle: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralBackground1,\n color: theme.alias.color.neutral.neutralForeground3,\n borderColor: theme.alias.color.neutral.neutralStroke2,\n }),\n rootGhostSubtle: theme => ({\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n }),\n icon: {\n display: 'flex',\n alignContent: 'center',\n alignItems: 'center',\n height: '100%',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles = (state: BadgeState): BadgeState => {\n const styles = useStyles();\n const isGhost = state.appearance === 'ghost';\n const isOutline = state.appearance === 'outline';\n const isTint = state.appearance === 'tint';\n const isFilled = state.appearance === 'filled';\n const isDanger = state.color === 'danger';\n const isSevere = state.color === 'severe';\n const isWarning = state.color === 'warning';\n const isSuccess = state.color === 'success';\n const isImportant = state.color === 'important';\n const isInformative = state.color === 'informative';\n const isSubtle = state.color === 'subtle';\n\n state.className = mergeClasses(\n styles.root,\n state.size === 'smallest' && styles.rootSmallest,\n state.size === 'smaller' && styles.rootSmaller,\n state.size === 'small' && styles.rootSmall,\n state.size === 'medium' && styles.rootMedium,\n state.size === 'large' && styles.rootLarge,\n (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest,\n state.shape === 'circular' && styles.rootCircular,\n state.shape === 'rounded' && styles.rootRounded,\n state.shape === 'rounded' &&\n (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') &&\n styles.rootRoundedSmallSmallerSmallest,\n isGhost && styles.rootGhost,\n isOutline && styles.rootOutline,\n isTint && styles.rootTint,\n isFilled && isDanger && styles.rootFilledDanger,\n isOutline && isDanger && styles.rootOutlineDanger,\n isTint && isDanger && styles.rootTintDanger,\n isGhost && isDanger && styles.rootGhostDanger,\n isFilled && isSevere && styles.rootFilledSevere,\n isOutline && isSevere && styles.rootOutlineSevere,\n isTint && isSevere && styles.rootTintSevere,\n isGhost && isSevere && styles.rootGhostSevere,\n isFilled && isWarning && styles.rootFilledWarning,\n isOutline && isWarning && styles.rootOutlineWarning,\n isTint && isWarning && styles.rootTintWarning,\n isGhost && isWarning && styles.rootGhostWarning,\n isFilled && isSuccess && styles.rootFilledSuccess,\n isOutline && isSuccess && styles.rootOutlineSuccess,\n isTint && isSuccess && styles.rootTintSuccess,\n isGhost && isSuccess && styles.rootGhostSuccess,\n isFilled && isImportant && styles.rootFilledImportant,\n isOutline && isImportant && styles.rootOutlineImportant,\n isTint && isImportant && styles.rootTintImportant,\n isGhost && isImportant && styles.rootGhostImportant,\n isFilled && isInformative && styles.rootFilledInformative,\n isOutline && isInformative && styles.rootOutlineInformative,\n isTint && isInformative && styles.rootTintInformative,\n isGhost && isInformative && styles.rootGhostInformative,\n isFilled && isSubtle && styles.rootFilledSubtle,\n isOutline && isSubtle && styles.rootOutlineSubtle,\n isTint && isSubtle && styles.rootTintSubtle,\n isGhost && isSubtle && styles.rootGhostSubtle,\n state.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(styles.icon, state.icon.className);\n }\n\n return state;\n};\n"]}
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { CounterBadgeProps } from './CounterBadge.types';
|
3
|
-
/**
|
4
|
-
* Define a styled CounterBadge, using the `useCounterBadge` hook.
|
5
|
-
* {@docCategory CounterBadge}
|
6
|
-
*/
|
7
|
-
export declare const CounterBadge: React.ForwardRefExoticComponent<CounterBadgeProps & React.RefAttributes<HTMLElement>>;
|
@@ -1,16 +0,0 @@
|
|
1
|
-
define(["require", "exports", "react", "./useCounterBadge", "./useCounterBadgeStyles", "../Badge/index"], function (require, exports, React, useCounterBadge_1, useCounterBadgeStyles_1, index_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.CounterBadge = void 0;
|
5
|
-
/**
|
6
|
-
* Define a styled CounterBadge, using the `useCounterBadge` hook.
|
7
|
-
* {@docCategory CounterBadge}
|
8
|
-
*/
|
9
|
-
exports.CounterBadge = React.forwardRef(function (props, ref) {
|
10
|
-
var state = useCounterBadge_1.useCounterBadge(props, ref);
|
11
|
-
useCounterBadgeStyles_1.useCounterBadgeStyles(state);
|
12
|
-
return index_1.renderBadge(state);
|
13
|
-
});
|
14
|
-
exports.CounterBadge.displayName = 'CounterBadge';
|
15
|
-
});
|
16
|
-
//# sourceMappingURL=CounterBadge.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"CounterBadge.js","sourceRoot":"../src/","sources":["components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":";;;;IAMA;;;OAGG;IACU,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAiC,UAAC,KAAK,EAAE,GAAG;QACtF,IAAM,KAAK,GAAG,iCAAe,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC1C,6CAAqB,CAAC,KAAK,CAAC,CAAC;QAE7B,OAAO,mBAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCounterBadge } from './useCounterBadge';\nimport { useCounterBadgeStyles } from './useCounterBadgeStyles';\nimport { renderBadge } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge` hook.\n * {@docCategory CounterBadge}\n */\nexport const CounterBadge = React.forwardRef<HTMLElement, CounterBadgeProps>((props, ref) => {\n const state = useCounterBadge(props, ref);\n useCounterBadgeStyles(state);\n\n return renderBadge(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"]}
|
@@ -1,61 +0,0 @@
|
|
1
|
-
import type { BadgeProps, BadgeState } from '../Badge/index';
|
2
|
-
/**
|
3
|
-
* {@docCategory CounterBadge}
|
4
|
-
*/
|
5
|
-
export interface CounterBadgeProps extends Omit<BadgeProps, 'appearance' | 'shape'> {
|
6
|
-
/**
|
7
|
-
* A Badge can be circular or rounded
|
8
|
-
* @defaultvalue circular
|
9
|
-
*/
|
10
|
-
shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;
|
11
|
-
/**
|
12
|
-
* A Badge can be filled, ghost
|
13
|
-
* @defaultvalue filled
|
14
|
-
*/
|
15
|
-
appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;
|
16
|
-
/**
|
17
|
-
* Max number to be displayed
|
18
|
-
* @defaultvalue 99
|
19
|
-
*/
|
20
|
-
overflowCount?: number;
|
21
|
-
/**
|
22
|
-
* Value displayed by the Badge
|
23
|
-
* @defaultvalue 0
|
24
|
-
*/
|
25
|
-
count?: number;
|
26
|
-
/**
|
27
|
-
* If the badge should be shown when count is 0
|
28
|
-
* @defaultvalue false
|
29
|
-
*/
|
30
|
-
showZero?: boolean;
|
31
|
-
/**
|
32
|
-
* If a dot badge should be displayed
|
33
|
-
* @defaultvalue false
|
34
|
-
*/
|
35
|
-
dot?: boolean;
|
36
|
-
}
|
37
|
-
/**
|
38
|
-
* {@docCategory CounterBadge}
|
39
|
-
*/
|
40
|
-
export interface CounterBadgeState extends BadgeState {
|
41
|
-
/**
|
42
|
-
* Max number to be displayed
|
43
|
-
* @defaultvalue 99
|
44
|
-
*/
|
45
|
-
overflowCount: number;
|
46
|
-
/**
|
47
|
-
* Value displayed by the Badge
|
48
|
-
* @defaultvalue 0
|
49
|
-
*/
|
50
|
-
count: number;
|
51
|
-
/**
|
52
|
-
* If the badge should be shown when count is 0
|
53
|
-
* @defaultvalue false
|
54
|
-
*/
|
55
|
-
showZero: boolean;
|
56
|
-
/**
|
57
|
-
* If a dot badge should be displayed
|
58
|
-
* @defaultvalue false
|
59
|
-
*/
|
60
|
-
dot: boolean;
|
61
|
-
}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"CounterBadge.types.js","sourceRoot":"../src/","sources":["components/CounterBadge/CounterBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\n/**\n * {@docCategory CounterBadge}\n */\nexport interface CounterBadgeProps extends Omit<BadgeProps, 'appearance' | 'shape'> {\n /**\n * A Badge can be circular or rounded\n * @defaultvalue circular\n */\n shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;\n\n /**\n * A Badge can be filled, ghost\n * @defaultvalue filled\n */\n appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;\n\n /**\n * Max number to be displayed\n * @defaultvalue 99\n */\n overflowCount?: number;\n\n /**\n * Value displayed by the Badge\n * @defaultvalue 0\n */\n count?: number;\n\n /**\n * If the badge should be shown when count is 0\n * @defaultvalue false\n */\n showZero?: boolean;\n\n /**\n * If a dot badge should be displayed\n * @defaultvalue false\n */\n dot?: boolean;\n}\n\n/**\n * {@docCategory CounterBadge}\n */\nexport interface CounterBadgeState extends BadgeState {\n /**\n * Max number to be displayed\n * @defaultvalue 99\n */\n overflowCount: number;\n\n /**\n * Value displayed by the Badge\n * @defaultvalue 0\n */\n count: number;\n\n /**\n * If the badge should be shown when count is 0\n * @defaultvalue false\n */\n showZero: boolean;\n\n /**\n * If a dot badge should be displayed\n * @defaultvalue false\n */\n dot: boolean;\n}\n"]}
|
@@ -1,9 +0,0 @@
|
|
1
|
-
define(["require", "exports", "tslib", "./CounterBadge", "./CounterBadge.types", "./useCounterBadge", "./useCounterBadgeStyles"], function (require, exports, tslib_1, CounterBadge_1, CounterBadge_types_1, useCounterBadge_1, useCounterBadgeStyles_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
tslib_1.__exportStar(CounterBadge_1, exports);
|
5
|
-
tslib_1.__exportStar(CounterBadge_types_1, exports);
|
6
|
-
tslib_1.__exportStar(useCounterBadge_1, exports);
|
7
|
-
tslib_1.__exportStar(useCounterBadgeStyles_1, exports);
|
8
|
-
});
|
9
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CounterBadge/index.ts"],"names":[],"mappings":";;;IAAA,8CAA+B;IAC/B,oDAAqC;IACrC,iDAAkC;IAClC,uDAAwC","sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"]}
|