@fluentui/react-card 9.0.0-beta.10 → 9.0.0-beta.11
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.json +87 -1
- package/CHANGELOG.md +18 -2
- package/dist/react-card.d.ts +21 -0
- package/lib/components/Card/useCardStyles.d.ts +6 -1
- package/lib/components/Card/useCardStyles.js +9 -2
- package/lib/components/Card/useCardStyles.js.map +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.d.ts +6 -1
- package/lib/components/CardFooter/useCardFooterStyles.js +10 -2
- package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib/components/CardHeader/useCardHeader.js +2 -3
- package/lib/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.d.ts +6 -1
- package/lib/components/CardHeader/useCardHeaderStyles.js +27 -3
- package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.d.ts +6 -1
- package/lib/components/CardPreview/useCardPreviewStyles.js +10 -2
- package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib/index.d.ts +8 -4
- package/lib/index.js +5 -4
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.d.ts +6 -1
- package/lib-commonjs/components/Card/useCardStyles.js +9 -2
- package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.d.ts +6 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +11 -3
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeader.js +2 -4
- package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.d.ts +6 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +28 -4
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.d.ts +6 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +11 -3
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +8 -4
- package/lib-commonjs/index.js +153 -5
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -18
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,93 @@
|
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 19 Apr 2022 19:14:24 GMT",
|
|
6
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.11",
|
|
7
|
+
"version": "9.0.0-beta.11",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "mgodbolt@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-card",
|
|
13
|
+
"commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
|
|
14
|
+
"comment": {
|
|
15
|
+
"title": "",
|
|
16
|
+
"value": ""
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"author": "elcraig@microsoft.com",
|
|
21
|
+
"package": "@fluentui/react-card",
|
|
22
|
+
"commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
|
|
23
|
+
"comment": "Update React dev deps and hoist them to the repo root"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"author": "39736248+andrefcdias@users.noreply.github.com",
|
|
27
|
+
"package": "@fluentui/react-card",
|
|
28
|
+
"commit": "d07a94aa25cf00c471a17883bd53f71fc1dc4d25",
|
|
29
|
+
"comment": "Cleanup of Card storybook"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "martinhochel@microsoft.com",
|
|
33
|
+
"package": "@fluentui/react-card",
|
|
34
|
+
"commit": "320b8bbba1e498c65d011f3fae09dee98e7a11bb",
|
|
35
|
+
"comment": "refactor: autofix no export star at index file for cxe-prg packages"
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
"prerelease": [
|
|
39
|
+
{
|
|
40
|
+
"author": "olfedias@microsoft.com",
|
|
41
|
+
"package": "@fluentui/react-card",
|
|
42
|
+
"commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
|
|
43
|
+
"comment": "chore: Update Griffel to latest version"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"author": "seanmonahan@microsoft.com",
|
|
47
|
+
"package": "@fluentui/react-card",
|
|
48
|
+
"commit": "086a675fd0c648944ff4048450190a0a13467de3",
|
|
49
|
+
"comment": "Add static classnames to Card"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"author": "beachball",
|
|
53
|
+
"package": "@fluentui/react-card",
|
|
54
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
55
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"author": "beachball",
|
|
59
|
+
"package": "@fluentui/react-card",
|
|
60
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
|
|
61
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"author": "beachball",
|
|
65
|
+
"package": "@fluentui/react-card",
|
|
66
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
67
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"author": "beachball",
|
|
71
|
+
"package": "@fluentui/react-card",
|
|
72
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
|
|
73
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"author": "beachball",
|
|
77
|
+
"package": "@fluentui/react-card",
|
|
78
|
+
"comment": "Bump @fluentui/react-text to v9.0.0-rc.6",
|
|
79
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"author": "beachball",
|
|
83
|
+
"package": "@fluentui/react-card",
|
|
84
|
+
"comment": "Bump @fluentui/react-button to v9.0.0-rc.6",
|
|
85
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
86
|
+
}
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"date": "Fri, 04 Mar 2022 05:17:35 GMT",
|
|
6
92
|
"tag": "@fluentui/react-card_v9.0.0-beta.10",
|
|
7
93
|
"version": "9.0.0-beta.10",
|
|
8
94
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 19 Apr 2022 19:14:24 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.11)
|
|
8
|
+
|
|
9
|
+
Tue, 19 Apr 2022 19:14:24 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.10..@fluentui/react-card_v9.0.0-beta.11)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
|
|
15
|
+
- Add static classnames to Card ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
20
|
+
- Bump @fluentui/react-text to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
21
|
+
- Bump @fluentui/react-button to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
22
|
+
|
|
7
23
|
## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.10)
|
|
8
24
|
|
|
9
|
-
Fri, 04 Mar 2022 05:
|
|
25
|
+
Fri, 04 Mar 2022 05:17:35 GMT
|
|
10
26
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.9..@fluentui/react-card_v9.0.0-beta.10)
|
|
11
27
|
|
|
12
28
|
### Changes
|
package/dist/react-card.d.ts
CHANGED
|
@@ -3,14 +3,20 @@ import type { ComponentState } from '@fluentui/react-utilities';
|
|
|
3
3
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
4
4
|
import * as React_2 from 'react';
|
|
5
5
|
import type { Slot } from '@fluentui/react-utilities';
|
|
6
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* A card provides scaffolding for hosting actions and content for a single topic.
|
|
9
10
|
*/
|
|
10
11
|
export declare const Card: ForwardRefComponent<CardProps>;
|
|
11
12
|
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `cardClassNames.root` instead.
|
|
15
|
+
*/
|
|
12
16
|
export declare const cardClassName = "fui-Card";
|
|
13
17
|
|
|
18
|
+
export declare const cardClassNames: SlotClassNames<CardSlots>;
|
|
19
|
+
|
|
14
20
|
export declare type CardCommons = {
|
|
15
21
|
appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
|
|
16
22
|
};
|
|
@@ -20,8 +26,13 @@ export declare type CardCommons = {
|
|
|
20
26
|
*/
|
|
21
27
|
export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
|
|
22
28
|
|
|
29
|
+
/**
|
|
30
|
+
* @deprecated Use `cardFooterClassNames.root` instead.
|
|
31
|
+
*/
|
|
23
32
|
export declare const cardFooterClassName = "fui-CardFooter";
|
|
24
33
|
|
|
34
|
+
export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
|
|
35
|
+
|
|
25
36
|
/**
|
|
26
37
|
* CardFooter props
|
|
27
38
|
*/
|
|
@@ -42,8 +53,13 @@ export declare type CardFooterState = ComponentState<CardFooterSlots>;
|
|
|
42
53
|
*/
|
|
43
54
|
export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
|
|
44
55
|
|
|
56
|
+
/**
|
|
57
|
+
* @deprecated Use `cardHeaderClassNames.root` instead.
|
|
58
|
+
*/
|
|
45
59
|
export declare const cardHeaderClassName = "fui-CardHeader";
|
|
46
60
|
|
|
61
|
+
export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
|
|
62
|
+
|
|
47
63
|
/**
|
|
48
64
|
* CardHeader props
|
|
49
65
|
*/
|
|
@@ -68,8 +84,13 @@ export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
|
|
|
68
84
|
*/
|
|
69
85
|
export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
|
|
70
86
|
|
|
87
|
+
/**
|
|
88
|
+
* @deprecated Use `cardPreviewClassNames.root` instead.
|
|
89
|
+
*/
|
|
71
90
|
export declare const cardPreviewClassName = "fui-CardPreview";
|
|
72
91
|
|
|
92
|
+
export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
|
|
93
|
+
|
|
73
94
|
/**
|
|
74
95
|
* CardPreview props
|
|
75
96
|
*/
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type { CardState } from './Card.types';
|
|
1
|
+
import type { CardSlots, CardState } from './Card.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `cardClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const cardClassName = "fui-Card";
|
|
7
|
+
export declare const cardClassNames: SlotClassNames<CardSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the Card slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import { shorthands, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
import {
|
|
3
|
+
import { cardPreviewClassNames } from '../CardPreview/index';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `cardClassNames.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
|
|
4
8
|
export const cardClassName = 'fui-Card';
|
|
9
|
+
export const cardClassNames = {
|
|
10
|
+
root: 'fui-Card'
|
|
11
|
+
};
|
|
5
12
|
/**
|
|
6
13
|
* Styles for the root slot
|
|
7
14
|
*/
|
|
@@ -144,7 +151,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
144
151
|
export const useCardStyles_unstable = state => {
|
|
145
152
|
const styles = useStyles();
|
|
146
153
|
const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
|
|
147
|
-
state.root.className = mergeClasses(
|
|
154
|
+
state.root.className = mergeClasses(cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
|
|
148
155
|
return state;
|
|
149
156
|
};
|
|
150
157
|
//# sourceMappingURL=useCardStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,qBAAT,QAAsC,sBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAG,UAAtB;AACP,OAAO,MAAM,cAAc,GAA8B;AACvD,EAAA,IAAI,EAAE;AADiD,CAAlD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoGA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cAAc,CAAC,IADkB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHP,EAIjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJnB,EAKjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALR,EAMjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANP,EAOjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPtB,EAQjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BARlC,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATvB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVtB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CA3BM","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `cardClassNames.root` instead.\n */\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n ...shorthands.overflow('hidden'),\n\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n // Size: medium\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n [`> *:not(.${cardPreviewClassNames.root})`]: {\n // Size: medium\n ...shorthands.margin('12px'),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `cardFooterClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const cardFooterClassName = "fui-CardFooter";
|
|
7
|
+
export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the CardFooter slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use `cardFooterClassNames.root` instead.
|
|
4
|
+
*/
|
|
5
|
+
|
|
2
6
|
export const cardFooterClassName = 'fui-CardFooter';
|
|
7
|
+
export const cardFooterClassNames = {
|
|
8
|
+
root: 'fui-CardFooter',
|
|
9
|
+
action: 'fui-CardFooter__action'
|
|
10
|
+
};
|
|
3
11
|
/**
|
|
4
12
|
* Styles for the root slot
|
|
5
13
|
*/
|
|
@@ -24,10 +32,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
24
32
|
|
|
25
33
|
export const useCardFooterStyles_unstable = state => {
|
|
26
34
|
const styles = useStyles();
|
|
27
|
-
state.root.className = mergeClasses(
|
|
35
|
+
state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
|
|
28
36
|
|
|
29
37
|
if (state.action) {
|
|
30
|
-
state.action.className = mergeClasses(styles.action, state.action.className);
|
|
38
|
+
state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
|
|
31
39
|
}
|
|
32
40
|
|
|
33
41
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AACP,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,MAAM,EAAE;AAF2D,CAA9D;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,MAAM,CAAC,MAArC,EAA6C,KAAK,CAAC,MAAN,CAAa,SAA1D,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * @deprecated Use `cardFooterClassNames.root` instead.\n */\nexport const cardFooterClassName = 'fui-CardFooter';\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n ...shorthands.gap('12px'),\n },\n action: {\n marginLeft: 'auto',\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
|
3
2
|
/**
|
|
4
3
|
* Create the state required to render CardHeader.
|
|
@@ -23,8 +22,8 @@ export const useCardHeader_unstable = (props, ref) => {
|
|
|
23
22
|
root: 'div',
|
|
24
23
|
image: 'div',
|
|
25
24
|
content: 'div',
|
|
26
|
-
header:
|
|
27
|
-
description:
|
|
25
|
+
header: 'span',
|
|
26
|
+
description: 'span',
|
|
28
27
|
action: 'div'
|
|
29
28
|
},
|
|
30
29
|
root: getNativeElementProps('div', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AAC7G,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,OAAT;AAAkB,IAAA,MAAlB;AAA0B,IAAA,WAA1B;AAAuC,IAAA;AAAvC,MAAkD,KAAxD;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,OAAO,EAAE,KAHC;AAIV,MAAA,MAAM,EAAE,MAJE;AAKV,MAAA,WAAW,EAAE,MALH;AAMV,MAAA,MAAM,EAAE;AANE,KADP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CAVtB;AAcL,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE;AADmB,KAAR,CAdlB;AAiBL,IAAA,OAAO,EAAE,gBAAgB,CAAC,OAAO,IAAI,EAAZ,CAjBpB;AAkBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;AAC/B,MAAA,QAAQ,EAAE;AADqB,KAAT,CAlBnB;AAqBL,IAAA,WAAW,EAAE,gBAAgB,CAAC,WAAD,EAAc;AACzC,MAAA,QAAQ,EAAE;AAD+B,KAAd,CArBxB;AAwBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAxBnB,GAAP;AA0BD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n const { image, content, header, description, action } = props;\n\n return {\n components: {\n root: 'div',\n image: 'div',\n content: 'div',\n header: 'span',\n description: 'span',\n action: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n image: resolveShorthand(image, {\n required: true,\n }),\n content: resolveShorthand(content || {}),\n header: resolveShorthand(header, {\n required: true,\n }),\n description: resolveShorthand(description, {\n required: true,\n }),\n action: resolveShorthand(action),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `cardHeaderClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const cardHeaderClassName = "fui-CardHeader";
|
|
7
|
+
export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the CardHeader slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use `cardHeaderClassNames.root` instead.
|
|
4
|
+
*/
|
|
5
|
+
|
|
2
6
|
export const cardHeaderClassName = 'fui-CardHeader';
|
|
7
|
+
export const cardHeaderClassNames = {
|
|
8
|
+
root: 'fui-CardHeader',
|
|
9
|
+
image: 'fui-CardHeader__image',
|
|
10
|
+
content: 'fui-CardHeader__content',
|
|
11
|
+
header: 'fui-CardHeader__header',
|
|
12
|
+
description: 'fui-CardHeader__description',
|
|
13
|
+
action: 'fui-CardHeader__action'
|
|
14
|
+
};
|
|
3
15
|
/**
|
|
4
16
|
* Styles for the root slot
|
|
5
17
|
*/
|
|
@@ -42,14 +54,26 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
42
54
|
|
|
43
55
|
export const useCardHeaderStyles_unstable = state => {
|
|
44
56
|
const styles = useStyles();
|
|
45
|
-
state.root.className = mergeClasses(
|
|
57
|
+
state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);
|
|
46
58
|
|
|
47
59
|
if (state.image) {
|
|
48
|
-
state.image.className = mergeClasses(styles.image, state.image.className);
|
|
60
|
+
state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);
|
|
49
61
|
}
|
|
50
62
|
|
|
51
63
|
if (state.content) {
|
|
52
|
-
state.content.className = mergeClasses(styles.textContainer, state.content.className);
|
|
64
|
+
state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
if (state.header) {
|
|
68
|
+
state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (state.description) {
|
|
72
|
+
state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (state.action) {
|
|
76
|
+
state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);
|
|
53
77
|
}
|
|
54
78
|
|
|
55
79
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AACP,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,KAAK,EAAE,uBAF4D;AAGnE,EAAA,OAAO,EAAE,yBAH0D;AAInE,EAAA,MAAM,EAAE,wBAJ2D;AAKnE,EAAA,WAAW,EAAE,6BALsD;AAMnE,EAAA,MAAM,EAAE;AAN2D,CAA9D;AASP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,oBAAoB,CAAC,KAAtB,EAA6B,MAAM,CAAC,KAApC,EAA2C,KAAK,CAAC,KAAN,CAAY,SAAvD,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,oBAAoB,CAAC,OAAtB,EAA+B,MAAM,CAAC,aAAtC,EAAqD,KAAK,CAAC,OAAN,CAAc,SAAnE,CAAtC;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;AACD;;AAED,MAAI,KAAK,CAAC,WAAV,EAAuB;AACrB,IAAA,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CAAC,oBAAoB,CAAC,WAAtB,EAAmC,KAAK,CAAC,WAAN,CAAkB,SAArD,CAA1C;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,oBAAoB,CAAC,MAAtB,EAA8B,KAAK,CAAC,MAAN,CAAa,SAA3C,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CAzBM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * @deprecated Use `cardHeaderClassNames.root` instead.\n */\nexport const cardHeaderClassName = 'fui-CardHeader';\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n content: 'fui-CardHeader__content',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n ...shorthands.gap('12px'),\n height: '32px',\n },\n image: {\n minWidth: '24px',\n minHeight: '24px',\n maxWidth: '32px',\n maxHeight: '32px',\n\n display: 'flex',\n alignItems: 'center',\n\n '> *': {\n minWidth: 'inherit',\n minHeight: 'inherit',\n maxWidth: '100%',\n maxHeight: '100%',\n },\n },\n\n textContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n height: 'inherit',\n\n '> *': {\n height: '50%',\n },\n },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);\n\n if (state.image) {\n state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);\n }\n\n if (state.header) {\n state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);\n }\n\n if (state.description) {\n state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);\n }\n\n if (state.action) {\n state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `cardPreviewClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const cardPreviewClassName = "fui-CardPreview";
|
|
7
|
+
export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the CardPreview slots based on the state
|
|
5
10
|
*/
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use `cardPreviewClassNames.root` instead.
|
|
4
|
+
*/
|
|
5
|
+
|
|
2
6
|
export const cardPreviewClassName = 'fui-CardPreview';
|
|
7
|
+
export const cardPreviewClassNames = {
|
|
8
|
+
root: 'fui-CardPreview',
|
|
9
|
+
logo: 'fui-CardPreview__logo'
|
|
10
|
+
};
|
|
3
11
|
/**
|
|
4
12
|
* Styles for the root slot
|
|
5
13
|
*/
|
|
@@ -27,10 +35,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
27
35
|
|
|
28
36
|
export const useCardPreviewStyles_unstable = state => {
|
|
29
37
|
const styles = useStyles();
|
|
30
|
-
state.root.className = mergeClasses(
|
|
38
|
+
state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
|
|
31
39
|
|
|
32
40
|
if (state.logo) {
|
|
33
|
-
state.logo.className = mergeClasses(styles.logo, state.logo.className);
|
|
41
|
+
state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
|
|
34
42
|
}
|
|
35
43
|
|
|
36
44
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AACP,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,IAAI,EAAE;AAF+D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * @deprecated Use `cardPreviewClassNames.root` instead.\n */\nexport const cardPreviewClassName = 'fui-CardPreview';\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n '> *': {\n display: 'block',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
export { Card, cardClassName, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable, } from './Card';
|
|
2
|
+
export type { CardCommons, CardProps, CardSlots, CardState } from './Card';
|
|
3
|
+
export { CardFooter, cardFooterClassName, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable, } from './CardFooter';
|
|
4
|
+
export type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';
|
|
5
|
+
export { CardHeader, cardHeaderClassName, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable, } from './CardHeader';
|
|
6
|
+
export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';
|
|
7
|
+
export { CardPreview, cardPreviewClassName, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable, } from './CardPreview';
|
|
8
|
+
export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/
|
|
2
|
+
export { Card, cardClassName, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
|
|
3
|
+
export { CardFooter, cardFooterClassName, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from './CardFooter';
|
|
4
|
+
export { CardHeader, cardHeaderClassName, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './CardHeader';
|
|
5
|
+
export { CardPreview, cardPreviewClassName, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './CardPreview';
|
|
5
6
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA;AAEA,SACE,IADF,EAEE,aAFF,EAGE,cAHF,EAIE,mBAJF,EAKE,sBALF,EAME,gBANF,QAOO,QAPP;AASA,SACE,UADF,EAEE,mBAFF,EAGE,oBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,UADF,EAEE,mBAFF,EAGE,oBAHF,EAIE,yBAJF,EAKE,4BALF,EAME,sBANF,QAOO,cAPP;AASA,SACE,WADF,EAEE,oBAFF,EAGE,qBAHF,EAIE,0BAJF,EAKE,6BALF,EAME,uBANF,QAOO,eAPP","sourcesContent":["/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/\n\nexport {\n Card,\n cardClassName,\n cardClassNames,\n renderCard_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './Card';\nexport type { CardCommons, CardProps, CardSlots, CardState } from './Card';\nexport {\n CardFooter,\n cardFooterClassName,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassName,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassName,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type { CardState } from './Card.types';
|
|
1
|
+
import type { CardSlots, CardState } from './Card.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `cardClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const cardClassName = "fui-Card";
|
|
7
|
+
export declare const cardClassNames: SlotClassNames<CardSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the Card slots based on the state
|
|
5
10
|
*/
|
|
@@ -3,15 +3,22 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardStyles_unstable = exports.cardClassName = void 0;
|
|
6
|
+
exports.useCardStyles_unstable = exports.cardClassNames = exports.cardClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
11
|
|
|
12
12
|
const index_1 = /*#__PURE__*/require("../CardPreview/index");
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `cardClassNames.root` instead.
|
|
15
|
+
*/
|
|
16
|
+
|
|
13
17
|
|
|
14
18
|
exports.cardClassName = 'fui-Card';
|
|
19
|
+
exports.cardClassNames = {
|
|
20
|
+
root: 'fui-Card'
|
|
21
|
+
};
|
|
15
22
|
/**
|
|
16
23
|
* Styles for the root slot
|
|
17
24
|
*/
|
|
@@ -154,7 +161,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
154
161
|
const useCardStyles_unstable = state => {
|
|
155
162
|
const styles = useStyles();
|
|
156
163
|
const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
|
|
157
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
164
|
+
state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
|
|
158
165
|
return state;
|
|
159
166
|
};
|
|
160
167
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,aAAA,GAAgB,UAAhB;AACA,OAAA,CAAA,cAAA,GAA4C;AACvD,EAAA,IAAI,EAAE;AADiD,CAA5C;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cAAA,CAAe,IADM,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHnB,EAIrB,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJ/B,EAKrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALpB,EAMrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANnB,EAOrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPlC,EAQrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BAR9C,EASrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATnC,EAUrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVlC,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAcA,SAAO,KAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `cardClassNames.root` instead.\n */\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n ...shorthands.overflow('hidden'),\n\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n // Size: medium\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n [`> *:not(.${cardPreviewClassNames.root})`]: {\n // Size: medium\n ...shorthands.margin('12px'),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `cardFooterClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const cardFooterClassName = "fui-CardFooter";
|
|
7
|
+
export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the CardFooter slots based on the state
|
|
5
10
|
*/
|
|
@@ -3,11 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardFooterStyles_unstable = exports.cardFooterClassName = void 0;
|
|
6
|
+
exports.useCardFooterStyles_unstable = exports.cardFooterClassNames = exports.cardFooterClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated Use `cardFooterClassNames.root` instead.
|
|
11
|
+
*/
|
|
12
|
+
|
|
9
13
|
|
|
10
14
|
exports.cardFooterClassName = 'fui-CardFooter';
|
|
15
|
+
exports.cardFooterClassNames = {
|
|
16
|
+
root: 'fui-CardFooter',
|
|
17
|
+
action: 'fui-CardFooter__action'
|
|
18
|
+
};
|
|
11
19
|
/**
|
|
12
20
|
* Styles for the root slot
|
|
13
21
|
*/
|
|
@@ -32,10 +40,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
32
40
|
|
|
33
41
|
const useCardFooterStyles_unstable = state => {
|
|
34
42
|
const styles = useStyles();
|
|
35
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
43
|
+
state.root.className = react_1.mergeClasses(exports.cardFooterClassNames.root, styles.root, state.root.className);
|
|
36
44
|
|
|
37
45
|
if (state.action) {
|
|
38
|
-
state.action.className = react_1.mergeClasses(styles.action, state.action.className);
|
|
46
|
+
state.action.className = react_1.mergeClasses(exports.cardFooterClassNames.action, styles.action, state.action.className);
|
|
39
47
|
}
|
|
40
48
|
|
|
41
49
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AACA,OAAA,CAAA,oBAAA,GAAwD;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,MAAM,EAAE;AAF2D,CAAxD;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,MAAM,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,MAAlC,EAA0C,MAAM,CAAC,MAAjD,EAAyD,KAAK,CAAC,MAAN,CAAa,SAAtE,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * @deprecated Use `cardFooterClassNames.root` instead.\n */\nexport const cardFooterClassName = 'fui-CardFooter';\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n ...shorthands.gap('12px'),\n },\n action: {\n marginLeft: 'auto',\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useCardHeader_unstable = void 0;
|
|
7
7
|
|
|
8
|
-
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
9
|
/**
|
|
12
10
|
* Create the state required to render CardHeader.
|
|
@@ -32,8 +30,8 @@ const useCardHeader_unstable = (props, ref) => {
|
|
|
32
30
|
root: 'div',
|
|
33
31
|
image: 'div',
|
|
34
32
|
content: 'div',
|
|
35
|
-
header:
|
|
36
|
-
description:
|
|
33
|
+
header: 'span',
|
|
34
|
+
description: 'span',
|
|
37
35
|
action: 'div'
|
|
38
36
|
},
|
|
39
37
|
root: react_utilities_1.getNativeElementProps('div', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AAC7G,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,OAAT;AAAkB,IAAA,MAAlB;AAA0B,IAAA,WAA1B;AAAuC,IAAA;AAAvC,MAAkD,KAAxD;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,OAAO,EAAE,KAHC;AAIV,MAAA,MAAM,EAAE,MAJE;AAKV,MAAA,WAAW,EAAE,MALH;AAMV,MAAA,MAAM,EAAE;AANE,KADP;AAUL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B,CAVD;AAcL,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAC7B,MAAA,QAAQ,EAAE;AADmB,KAAxB,CAdF;AAiBL,IAAA,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,OAAO,IAAI,EAA5B,CAjBJ;AAkBL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;AAC/B,MAAA,QAAQ,EAAE;AADqB,KAAzB,CAlBH;AAqBL,IAAA,WAAW,EAAE,iBAAA,CAAA,gBAAA,CAAiB,WAAjB,EAA8B;AACzC,MAAA,QAAQ,EAAE;AAD+B,KAA9B,CArBR;AAwBL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;AAxBH,GAAP;AA0BD,CA7BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n const { image, content, header, description, action } = props;\n\n return {\n components: {\n root: 'div',\n image: 'div',\n content: 'div',\n header: 'span',\n description: 'span',\n action: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n image: resolveShorthand(image, {\n required: true,\n }),\n content: resolveShorthand(content || {}),\n header: resolveShorthand(header, {\n required: true,\n }),\n description: resolveShorthand(description, {\n required: true,\n }),\n action: resolveShorthand(action),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `cardHeaderClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const cardHeaderClassName = "fui-CardHeader";
|
|
7
|
+
export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the CardHeader slots based on the state
|
|
5
10
|
*/
|
|
@@ -3,11 +3,23 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardHeaderStyles_unstable = exports.cardHeaderClassName = void 0;
|
|
6
|
+
exports.useCardHeaderStyles_unstable = exports.cardHeaderClassNames = exports.cardHeaderClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated Use `cardHeaderClassNames.root` instead.
|
|
11
|
+
*/
|
|
12
|
+
|
|
9
13
|
|
|
10
14
|
exports.cardHeaderClassName = 'fui-CardHeader';
|
|
15
|
+
exports.cardHeaderClassNames = {
|
|
16
|
+
root: 'fui-CardHeader',
|
|
17
|
+
image: 'fui-CardHeader__image',
|
|
18
|
+
content: 'fui-CardHeader__content',
|
|
19
|
+
header: 'fui-CardHeader__header',
|
|
20
|
+
description: 'fui-CardHeader__description',
|
|
21
|
+
action: 'fui-CardHeader__action'
|
|
22
|
+
};
|
|
11
23
|
/**
|
|
12
24
|
* Styles for the root slot
|
|
13
25
|
*/
|
|
@@ -50,14 +62,26 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
50
62
|
|
|
51
63
|
const useCardHeaderStyles_unstable = state => {
|
|
52
64
|
const styles = useStyles();
|
|
53
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
65
|
+
state.root.className = react_1.mergeClasses(exports.cardHeaderClassNames.root, styles.root, state.root.className);
|
|
54
66
|
|
|
55
67
|
if (state.image) {
|
|
56
|
-
state.image.className = react_1.mergeClasses(styles.image, state.image.className);
|
|
68
|
+
state.image.className = react_1.mergeClasses(exports.cardHeaderClassNames.image, styles.image, state.image.className);
|
|
57
69
|
}
|
|
58
70
|
|
|
59
71
|
if (state.content) {
|
|
60
|
-
state.content.className = react_1.mergeClasses(styles.textContainer, state.content.className);
|
|
72
|
+
state.content.className = react_1.mergeClasses(exports.cardHeaderClassNames.content, styles.textContainer, state.content.className);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (state.header) {
|
|
76
|
+
state.header.className = react_1.mergeClasses(exports.cardHeaderClassNames.header, state.header.className);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
if (state.description) {
|
|
80
|
+
state.description.className = react_1.mergeClasses(exports.cardHeaderClassNames.description, state.description.className);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
if (state.action) {
|
|
84
|
+
state.action.className = react_1.mergeClasses(exports.cardHeaderClassNames.action, state.action.className);
|
|
61
85
|
}
|
|
62
86
|
|
|
63
87
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AACA,OAAA,CAAA,oBAAA,GAAwD;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,KAAK,EAAE,uBAF4D;AAGnE,EAAA,OAAO,EAAE,yBAH0D;AAInE,EAAA,MAAM,EAAE,wBAJ2D;AAKnE,EAAA,WAAW,EAAE,6BALsD;AAMnE,EAAA,MAAM,EAAE;AAN2D,CAAxD;AASb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,MAAM,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,KAAlC,EAAyC,MAAM,CAAC,KAAhD,EAAuD,KAAK,CAAC,KAAN,CAAY,SAAnE,CAAxB;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,OAAlC,EAA2C,MAAM,CAAC,aAAlD,EAAiE,KAAK,CAAC,OAAN,CAAc,SAA/E,CAA1B;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,MAAlC,EAA0C,KAAK,CAAC,MAAN,CAAa,SAAvD,CAAzB;AACD;;AAED,MAAI,KAAK,CAAC,WAAV,EAAuB;AACrB,IAAA,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,WAAlC,EAA+C,KAAK,CAAC,WAAN,CAAkB,SAAjE,CAA9B;AACD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,MAAlC,EAA0C,KAAK,CAAC,MAAN,CAAa,SAAvD,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * @deprecated Use `cardHeaderClassNames.root` instead.\n */\nexport const cardHeaderClassName = 'fui-CardHeader';\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n content: 'fui-CardHeader__content',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n ...shorthands.gap('12px'),\n height: '32px',\n },\n image: {\n minWidth: '24px',\n minHeight: '24px',\n maxWidth: '32px',\n maxHeight: '32px',\n\n display: 'flex',\n alignItems: 'center',\n\n '> *': {\n minWidth: 'inherit',\n minHeight: 'inherit',\n maxWidth: '100%',\n maxHeight: '100%',\n },\n },\n\n textContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n height: 'inherit',\n\n '> *': {\n height: '50%',\n },\n },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);\n\n if (state.image) {\n state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);\n }\n\n if (state.header) {\n state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);\n }\n\n if (state.description) {\n state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);\n }\n\n if (state.action) {\n state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `cardPreviewClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const cardPreviewClassName = "fui-CardPreview";
|
|
7
|
+
export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
|
|
3
8
|
/**
|
|
4
9
|
* Apply styling to the CardPreview slots based on the state
|
|
5
10
|
*/
|
|
@@ -3,11 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardPreviewStyles_unstable = exports.cardPreviewClassName = void 0;
|
|
6
|
+
exports.useCardPreviewStyles_unstable = exports.cardPreviewClassNames = exports.cardPreviewClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated Use `cardPreviewClassNames.root` instead.
|
|
11
|
+
*/
|
|
12
|
+
|
|
9
13
|
|
|
10
14
|
exports.cardPreviewClassName = 'fui-CardPreview';
|
|
15
|
+
exports.cardPreviewClassNames = {
|
|
16
|
+
root: 'fui-CardPreview',
|
|
17
|
+
logo: 'fui-CardPreview__logo'
|
|
18
|
+
};
|
|
11
19
|
/**
|
|
12
20
|
* Styles for the root slot
|
|
13
21
|
*/
|
|
@@ -35,10 +43,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
35
43
|
|
|
36
44
|
const useCardPreviewStyles_unstable = state => {
|
|
37
45
|
const styles = useStyles();
|
|
38
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
46
|
+
state.root.className = react_1.mergeClasses(exports.cardPreviewClassNames.root, styles.root, state.root.className);
|
|
39
47
|
|
|
40
48
|
if (state.logo) {
|
|
41
|
-
state.logo.className = react_1.mergeClasses(styles.logo, state.logo.className);
|
|
49
|
+
state.logo.className = react_1.mergeClasses(exports.cardPreviewClassNames.logo, styles.logo, state.logo.className);
|
|
42
50
|
}
|
|
43
51
|
|
|
44
52
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;AACA,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,IAAI,EAAE;AAF+D,CAA1D;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * @deprecated Use `cardPreviewClassNames.root` instead.\n */\nexport const cardPreviewClassName = 'fui-CardPreview';\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n '> *': {\n display: 'block',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
export { Card, cardClassName, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable, } from './Card';
|
|
2
|
+
export type { CardCommons, CardProps, CardSlots, CardState } from './Card';
|
|
3
|
+
export { CardFooter, cardFooterClassName, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable, } from './CardFooter';
|
|
4
|
+
export type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';
|
|
5
|
+
export { CardHeader, cardHeaderClassName, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable, } from './CardHeader';
|
|
6
|
+
export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';
|
|
7
|
+
export { CardPreview, cardPreviewClassName, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable, } from './CardPreview';
|
|
8
|
+
export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1,16 +1,164 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/
|
|
2
3
|
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
7
|
+
exports.useCardPreview_unstable = exports.useCardPreviewStyles_unstable = exports.renderCardPreview_unstable = exports.cardPreviewClassNames = exports.cardPreviewClassName = exports.CardPreview = exports.useCardHeader_unstable = exports.useCardHeaderStyles_unstable = exports.renderCardHeader_unstable = exports.cardHeaderClassNames = exports.cardHeaderClassName = exports.CardHeader = exports.useCardFooter_unstable = exports.useCardFooterStyles_unstable = exports.renderCardFooter_unstable = exports.cardFooterClassNames = exports.cardFooterClassName = exports.CardFooter = exports.useCard_unstable = exports.useCardStyles_unstable = exports.renderCard_unstable = exports.cardClassNames = exports.cardClassName = exports.Card = void 0;
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
var Card_1 = /*#__PURE__*/require("./Card");
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
Object.defineProperty(exports, "Card", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () {
|
|
14
|
+
return Card_1.Card;
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "cardClassName", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () {
|
|
20
|
+
return Card_1.cardClassName;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
Object.defineProperty(exports, "cardClassNames", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () {
|
|
26
|
+
return Card_1.cardClassNames;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, "renderCard_unstable", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () {
|
|
32
|
+
return Card_1.renderCard_unstable;
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
Object.defineProperty(exports, "useCardStyles_unstable", {
|
|
36
|
+
enumerable: true,
|
|
37
|
+
get: function () {
|
|
38
|
+
return Card_1.useCardStyles_unstable;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
Object.defineProperty(exports, "useCard_unstable", {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () {
|
|
44
|
+
return Card_1.useCard_unstable;
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
var CardFooter_1 = /*#__PURE__*/require("./CardFooter");
|
|
10
49
|
|
|
11
|
-
|
|
50
|
+
Object.defineProperty(exports, "CardFooter", {
|
|
51
|
+
enumerable: true,
|
|
52
|
+
get: function () {
|
|
53
|
+
return CardFooter_1.CardFooter;
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
Object.defineProperty(exports, "cardFooterClassName", {
|
|
57
|
+
enumerable: true,
|
|
58
|
+
get: function () {
|
|
59
|
+
return CardFooter_1.cardFooterClassName;
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
Object.defineProperty(exports, "cardFooterClassNames", {
|
|
63
|
+
enumerable: true,
|
|
64
|
+
get: function () {
|
|
65
|
+
return CardFooter_1.cardFooterClassNames;
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
Object.defineProperty(exports, "renderCardFooter_unstable", {
|
|
69
|
+
enumerable: true,
|
|
70
|
+
get: function () {
|
|
71
|
+
return CardFooter_1.renderCardFooter_unstable;
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
Object.defineProperty(exports, "useCardFooterStyles_unstable", {
|
|
75
|
+
enumerable: true,
|
|
76
|
+
get: function () {
|
|
77
|
+
return CardFooter_1.useCardFooterStyles_unstable;
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
Object.defineProperty(exports, "useCardFooter_unstable", {
|
|
81
|
+
enumerable: true,
|
|
82
|
+
get: function () {
|
|
83
|
+
return CardFooter_1.useCardFooter_unstable;
|
|
84
|
+
}
|
|
85
|
+
});
|
|
12
86
|
|
|
13
|
-
|
|
87
|
+
var CardHeader_1 = /*#__PURE__*/require("./CardHeader");
|
|
14
88
|
|
|
15
|
-
|
|
89
|
+
Object.defineProperty(exports, "CardHeader", {
|
|
90
|
+
enumerable: true,
|
|
91
|
+
get: function () {
|
|
92
|
+
return CardHeader_1.CardHeader;
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
Object.defineProperty(exports, "cardHeaderClassName", {
|
|
96
|
+
enumerable: true,
|
|
97
|
+
get: function () {
|
|
98
|
+
return CardHeader_1.cardHeaderClassName;
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
Object.defineProperty(exports, "cardHeaderClassNames", {
|
|
102
|
+
enumerable: true,
|
|
103
|
+
get: function () {
|
|
104
|
+
return CardHeader_1.cardHeaderClassNames;
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
Object.defineProperty(exports, "renderCardHeader_unstable", {
|
|
108
|
+
enumerable: true,
|
|
109
|
+
get: function () {
|
|
110
|
+
return CardHeader_1.renderCardHeader_unstable;
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
Object.defineProperty(exports, "useCardHeaderStyles_unstable", {
|
|
114
|
+
enumerable: true,
|
|
115
|
+
get: function () {
|
|
116
|
+
return CardHeader_1.useCardHeaderStyles_unstable;
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
Object.defineProperty(exports, "useCardHeader_unstable", {
|
|
120
|
+
enumerable: true,
|
|
121
|
+
get: function () {
|
|
122
|
+
return CardHeader_1.useCardHeader_unstable;
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
var CardPreview_1 = /*#__PURE__*/require("./CardPreview");
|
|
127
|
+
|
|
128
|
+
Object.defineProperty(exports, "CardPreview", {
|
|
129
|
+
enumerable: true,
|
|
130
|
+
get: function () {
|
|
131
|
+
return CardPreview_1.CardPreview;
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
Object.defineProperty(exports, "cardPreviewClassName", {
|
|
135
|
+
enumerable: true,
|
|
136
|
+
get: function () {
|
|
137
|
+
return CardPreview_1.cardPreviewClassName;
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
Object.defineProperty(exports, "cardPreviewClassNames", {
|
|
141
|
+
enumerable: true,
|
|
142
|
+
get: function () {
|
|
143
|
+
return CardPreview_1.cardPreviewClassNames;
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
Object.defineProperty(exports, "renderCardPreview_unstable", {
|
|
147
|
+
enumerable: true,
|
|
148
|
+
get: function () {
|
|
149
|
+
return CardPreview_1.renderCardPreview_unstable;
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
Object.defineProperty(exports, "useCardPreviewStyles_unstable", {
|
|
153
|
+
enumerable: true,
|
|
154
|
+
get: function () {
|
|
155
|
+
return CardPreview_1.useCardPreviewStyles_unstable;
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
Object.defineProperty(exports, "useCardPreview_unstable", {
|
|
159
|
+
enumerable: true,
|
|
160
|
+
get: function () {
|
|
161
|
+
return CardPreview_1.useCardPreview_unstable;
|
|
162
|
+
}
|
|
163
|
+
});
|
|
16
164
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/\n\nexport {\n Card,\n cardClassName,\n cardClassNames,\n renderCard_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './Card';\nexport type { CardCommons, CardProps, CardSlots, CardState } from './Card';\nexport {\n CardFooter,\n cardFooterClassName,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassName,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassName,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.11",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
@@ -29,26 +29,16 @@
|
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
31
31
|
"@fluentui/react-conformance": "*",
|
|
32
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.4",
|
|
33
33
|
"@fluentui/scripts": "^1.0.0",
|
|
34
|
-
"@fluentui/react-text": "9.0.0-rc.
|
|
35
|
-
"@fluentui/react-button": "9.0.0-rc.
|
|
36
|
-
"@types/enzyme": "3.10.3",
|
|
37
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
38
|
-
"@types/react": "16.9.42",
|
|
39
|
-
"@types/react-dom": "16.9.10",
|
|
40
|
-
"@types/react-test-renderer": "^16.0.0",
|
|
41
|
-
"enzyme": "~3.10.0",
|
|
42
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
|
43
|
-
"react": "16.8.6",
|
|
44
|
-
"react-dom": "16.8.6",
|
|
45
|
-
"react-test-renderer": "^16.3.0"
|
|
34
|
+
"@fluentui/react-text": "9.0.0-rc.6",
|
|
35
|
+
"@fluentui/react-button": "9.0.0-rc.6"
|
|
46
36
|
},
|
|
47
37
|
"dependencies": {
|
|
48
|
-
"@griffel/react": "1.0.
|
|
49
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
50
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
51
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
38
|
+
"@griffel/react": "1.0.3",
|
|
39
|
+
"@fluentui/react-utilities": "9.0.0-rc.6",
|
|
40
|
+
"@fluentui/react-tabster": "9.0.0-rc.6",
|
|
41
|
+
"@fluentui/react-theme": "9.0.0-rc.5",
|
|
52
42
|
"tslib": "^2.1.0"
|
|
53
43
|
},
|
|
54
44
|
"peerDependencies": {
|