@fluentui/react-card 9.0.0-beta.13 → 9.0.0-beta.16
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 +178 -1
- package/CHANGELOG.md +51 -2
- package/Spec.md +20 -16
- package/dist/index.d.ts +25 -26
- package/lib/components/Card/Card.types.js.map +1 -1
- package/lib/components/Card/useCard.js +16 -5
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardStyles.js +80 -79
- package/lib/components/Card/useCardStyles.js.map +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.js +0 -5
- package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.js +0 -5
- package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.js +0 -5
- package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib/index.js +4 -5
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +16 -5
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.js +81 -80
- package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +1 -6
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +1 -6
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +1 -6
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -26
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -8
|
@@ -3,19 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardStyles_unstable = exports.cardClassNames =
|
|
6
|
+
exports.useCardStyles_unstable = exports.cardClassNames = 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
|
-
|
|
18
|
-
exports.cardClassName = 'fui-Card';
|
|
19
14
|
exports.cardClassNames = {
|
|
20
15
|
root: 'fui-Card'
|
|
21
16
|
};
|
|
@@ -26,132 +21,138 @@ exports.cardClassNames = {
|
|
|
26
21
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
27
22
|
"root": {
|
|
28
23
|
"mc9l5x": "ftgm304",
|
|
24
|
+
"qhf8xq": "f10pi13n",
|
|
29
25
|
"B68tc82": "f1p9o1ba",
|
|
30
26
|
"Bmxbyg5": "f1sil6mw",
|
|
31
27
|
"sj55zd": "f19n0e5",
|
|
32
|
-
"icvyot": "fzkkow9",
|
|
33
|
-
"vrafjx": ["fcdblym", "fjik90z"],
|
|
34
|
-
"oivjwe": "fg706s2",
|
|
35
|
-
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
36
|
-
"B4j52fo": "f192inf7",
|
|
37
|
-
"Bekrc4i": ["f5tn483", "f1ojsxk5"],
|
|
38
|
-
"Bn0qgzm": "f1vxd6vx",
|
|
39
|
-
"ibv6hh": ["f1ojsxk5", "f5tn483"],
|
|
40
28
|
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
41
29
|
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
42
30
|
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
43
31
|
"Btl43ni": ["fyu767a", "f1jar5jt"],
|
|
32
|
+
"E3zdtr": "f1mdlcz9",
|
|
33
|
+
"bn5sak": "frwkxtg",
|
|
34
|
+
"Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
|
|
35
|
+
"B1piin3": ["f15yvnhg", "f1n6gb5g"],
|
|
36
|
+
"By385i5": "fo72kxq",
|
|
37
|
+
"Bsft5z2": "f13zj6fq",
|
|
38
|
+
"B80jsxd": "f1nwj1ja",
|
|
39
|
+
"Bm2nyyq": "f8rth92",
|
|
40
|
+
"Barhvk9": ["flthirb", "ftkbnf5"],
|
|
41
|
+
"Bw17bha": "f1lh990p",
|
|
42
|
+
"vfts7": ["ftkbnf5", "flthirb"],
|
|
43
|
+
"xrcqlc": "f6czdpx",
|
|
44
|
+
"Ihftqj": ["f13hvwk3", "f1en4csx"],
|
|
45
|
+
"Bcgy8vk": "f1i1u9k0",
|
|
46
|
+
"Bhxzhr1": ["f1en4csx", "f13hvwk3"],
|
|
47
|
+
"B3778ie": ["f1ibwz09", "f1kp91vd"],
|
|
48
|
+
"d9w3h3": ["f1kp91vd", "f1ibwz09"],
|
|
49
|
+
"Bl18szs": ["f1pix4dl", "f13nd1z4"],
|
|
50
|
+
"B4j8arr": ["f13nd1z4", "f1pix4dl"],
|
|
44
51
|
"Ecqjvq": "f70or3y",
|
|
45
52
|
"B39syqp": ["f1s27jks", "f1x7x6se"],
|
|
46
53
|
"m3o775": "f1q2lvbs",
|
|
47
54
|
"I0kkcn": ["f1x7x6se", "f1s27jks"]
|
|
48
55
|
},
|
|
56
|
+
"interactiveNoOutline": {
|
|
57
|
+
"Be0v6ae": "ftr40te",
|
|
58
|
+
"B5kxglz": ["fcsoo7g", "f1rl4q8i"],
|
|
59
|
+
"B3pwyw6": "fbb4roj",
|
|
60
|
+
"Bymgtzf": ["f1rl4q8i", "fcsoo7g"],
|
|
61
|
+
"dmfk": "fd4vwcp",
|
|
62
|
+
"B4ofi8": ["f1crelnc", "fup9tr0"],
|
|
63
|
+
"jgq6uv": "f12d33p4",
|
|
64
|
+
"Baxewws": ["fup9tr0", "f1crelnc"]
|
|
65
|
+
},
|
|
49
66
|
"filledInteractive": {
|
|
50
67
|
"Bceei9c": "f1k6fduh",
|
|
51
68
|
"De3pzq": "fxugw4r",
|
|
52
|
-
"g2u3we": "fghlq4f",
|
|
53
|
-
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
54
|
-
"B9xav0g": "fb073pr",
|
|
55
|
-
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
56
69
|
"E5pizo": "f1whvlc6",
|
|
70
|
+
"B0n5ga8": "f16gxe2i",
|
|
71
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
72
|
+
"B1q35kw": "f1osi826",
|
|
73
|
+
"Gp14am": ["fzybk4o", "fpgykix"],
|
|
57
74
|
"Jwef8y": "f1knas48",
|
|
58
|
-
"Bgoe8wy": "fpa59ij",
|
|
59
|
-
"Bwzppfd": ["f1rhln42", "f1l1ogpg"],
|
|
60
|
-
"oetu4i": "fz67qlh",
|
|
61
|
-
"gg5e9n": ["f1l1ogpg", "f1rhln42"],
|
|
62
75
|
"Bvxd0ez": "f1m145df",
|
|
63
|
-
"ecr2s2": "fb40n2d"
|
|
64
|
-
"B6oc9vd": "f7cshhm",
|
|
65
|
-
"ak43y8": ["f1bzyac8", "f131p3c2"],
|
|
66
|
-
"wmxk5l": "f1bazisv",
|
|
67
|
-
"B50zh58": ["f131p3c2", "f1bzyac8"]
|
|
76
|
+
"ecr2s2": "fb40n2d"
|
|
68
77
|
},
|
|
69
78
|
"filled": {
|
|
70
79
|
"De3pzq": "fxugw4r",
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
80
|
+
"E5pizo": "f1whvlc6",
|
|
81
|
+
"B0n5ga8": "f16gxe2i",
|
|
82
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
83
|
+
"B1q35kw": "f1osi826",
|
|
84
|
+
"Gp14am": ["fzybk4o", "fpgykix"]
|
|
76
85
|
},
|
|
77
86
|
"filledAlternativeInteractive": {
|
|
78
87
|
"Bceei9c": "f1k6fduh",
|
|
79
88
|
"De3pzq": "f1dmdbja",
|
|
80
|
-
"g2u3we": "fghlq4f",
|
|
81
|
-
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
82
|
-
"B9xav0g": "fb073pr",
|
|
83
|
-
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
84
89
|
"E5pizo": "f1whvlc6",
|
|
90
|
+
"B0n5ga8": "f16gxe2i",
|
|
91
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
92
|
+
"B1q35kw": "f1osi826",
|
|
93
|
+
"Gp14am": ["fzybk4o", "fpgykix"],
|
|
85
94
|
"Jwef8y": "f1uvynv3",
|
|
86
|
-
"Bgoe8wy": "fpa59ij",
|
|
87
|
-
"Bwzppfd": ["f1rhln42", "f1l1ogpg"],
|
|
88
|
-
"oetu4i": "fz67qlh",
|
|
89
|
-
"gg5e9n": ["f1l1ogpg", "f1rhln42"],
|
|
90
95
|
"Bvxd0ez": "f1m145df",
|
|
91
|
-
"ecr2s2": "f1yhgkbh"
|
|
92
|
-
"B6oc9vd": "f7cshhm",
|
|
93
|
-
"ak43y8": ["f1bzyac8", "f131p3c2"],
|
|
94
|
-
"wmxk5l": "f1bazisv",
|
|
95
|
-
"B50zh58": ["f131p3c2", "f1bzyac8"]
|
|
96
|
+
"ecr2s2": "f1yhgkbh"
|
|
96
97
|
},
|
|
97
98
|
"filledAlternative": {
|
|
98
99
|
"De3pzq": "f1dmdbja",
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
"
|
|
102
|
-
"
|
|
103
|
-
"
|
|
100
|
+
"E5pizo": "f1whvlc6",
|
|
101
|
+
"B0n5ga8": "f16gxe2i",
|
|
102
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
103
|
+
"B1q35kw": "f1osi826",
|
|
104
|
+
"Gp14am": ["fzybk4o", "fpgykix"]
|
|
104
105
|
},
|
|
105
106
|
"outlineInteractive": {
|
|
106
107
|
"Bceei9c": "f1k6fduh",
|
|
107
108
|
"De3pzq": "f1c21dwh",
|
|
108
|
-
"g2u3we": "fj3muxo",
|
|
109
|
-
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
110
|
-
"B9xav0g": "f1aperda",
|
|
111
|
-
"zhjwy3": ["f1lxtadh", "f1akhkt"],
|
|
112
109
|
"E5pizo": "f1couhl3",
|
|
110
|
+
"B0n5ga8": "ft83z1f",
|
|
111
|
+
"s924m2": ["f1g4150c", "f192dr6e"],
|
|
112
|
+
"B1q35kw": "f1qnawh6",
|
|
113
|
+
"Gp14am": ["f192dr6e", "f1g4150c"],
|
|
113
114
|
"Jwef8y": "fjxutwb",
|
|
114
|
-
"
|
|
115
|
-
"
|
|
116
|
-
"
|
|
117
|
-
"
|
|
115
|
+
"Be0v6ae": "f1llr77y",
|
|
116
|
+
"B5kxglz": ["fzk0khw", "fjj8tog"],
|
|
117
|
+
"B3pwyw6": "fb1u8ub",
|
|
118
|
+
"Bymgtzf": ["fjj8tog", "fzk0khw"],
|
|
118
119
|
"ecr2s2": "fophhak",
|
|
119
|
-
"
|
|
120
|
-
"
|
|
121
|
-
"
|
|
122
|
-
"
|
|
120
|
+
"dmfk": "f1uohb70",
|
|
121
|
+
"B4ofi8": ["f1jm7v1n", "f1bus3rq"],
|
|
122
|
+
"jgq6uv": "f1fbu7rr",
|
|
123
|
+
"Baxewws": ["f1bus3rq", "f1jm7v1n"]
|
|
123
124
|
},
|
|
124
125
|
"outline": {
|
|
125
126
|
"De3pzq": "f1c21dwh",
|
|
126
|
-
"
|
|
127
|
-
"
|
|
128
|
-
"
|
|
129
|
-
"
|
|
130
|
-
"
|
|
127
|
+
"E5pizo": "f1couhl3",
|
|
128
|
+
"B0n5ga8": "ft83z1f",
|
|
129
|
+
"s924m2": ["f1g4150c", "f192dr6e"],
|
|
130
|
+
"B1q35kw": "f1qnawh6",
|
|
131
|
+
"Gp14am": ["f192dr6e", "f1g4150c"]
|
|
131
132
|
},
|
|
132
133
|
"subtleInteractive": {
|
|
133
134
|
"Bceei9c": "f1k6fduh",
|
|
134
135
|
"De3pzq": "fhovq9v",
|
|
135
|
-
"g2u3we": "fghlq4f",
|
|
136
|
-
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
137
|
-
"B9xav0g": "fb073pr",
|
|
138
|
-
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
139
136
|
"E5pizo": "f1couhl3",
|
|
137
|
+
"B0n5ga8": "f16gxe2i",
|
|
138
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
139
|
+
"B1q35kw": "f1osi826",
|
|
140
|
+
"Gp14am": ["fzybk4o", "fpgykix"],
|
|
140
141
|
"Jwef8y": "f1t94bn6",
|
|
141
142
|
"ecr2s2": "f1wfn5kd"
|
|
142
143
|
},
|
|
143
144
|
"subtle": {
|
|
144
145
|
"De3pzq": "fhovq9v",
|
|
145
|
-
"
|
|
146
|
-
"
|
|
147
|
-
"
|
|
148
|
-
"
|
|
149
|
-
"
|
|
146
|
+
"E5pizo": "f1couhl3",
|
|
147
|
+
"B0n5ga8": "f16gxe2i",
|
|
148
|
+
"s924m2": ["fpgykix", "fzybk4o"],
|
|
149
|
+
"B1q35kw": "f1osi826",
|
|
150
|
+
"Gp14am": ["fzybk4o", "fpgykix"]
|
|
150
151
|
}
|
|
151
152
|
}, {
|
|
152
|
-
"d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".
|
|
153
|
-
"h": [".
|
|
154
|
-
"a": [".
|
|
153
|
+
"d": [".ftgm304{display:block;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
|
|
154
|
+
"h": [".ftr40te:hover::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fcsoo7g:hover::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1rl4q8i:hover::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fbb4roj:hover::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
|
|
155
|
+
"a": [".fd4vwcp:active::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crelnc:active::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fup9tr0:active::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f12d33p4:active::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
|
|
155
156
|
});
|
|
156
157
|
/**
|
|
157
158
|
* Apply styling to the Card slots based on the state
|
|
@@ -161,7 +162,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
161
162
|
const useCardStyles_unstable = state => {
|
|
162
163
|
const styles = useStyles();
|
|
163
164
|
const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
|
|
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);
|
|
165
|
+
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, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
|
|
165
166
|
return state;
|
|
166
167
|
};
|
|
167
168
|
|
|
@@ -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,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoJA;;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,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,oBAXnC,EAYrB,KAAK,CAAC,IAAN,CAAW,SAZU,CAAvB;AAeA,SAAO,KAAP;AACD,CA5BM;;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\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 position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\n\n // TODO: Extract this to separate stiles when tackling the `size` prop\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n // TODO: Extract this to separate styles when tackling the `size` prop\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n\n [`> *:not(.${cardPreviewClassNames.root})`]: {\n // TODO: Extract this to separate styles when tackling the `size` prop\n ...shorthands.margin('12px'),\n },\n },\n\n interactiveNoOutline: {\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\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 interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -3,15 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardFooterStyles_unstable = exports.cardFooterClassNames =
|
|
6
|
+
exports.useCardFooterStyles_unstable = exports.cardFooterClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
-
/**
|
|
10
|
-
* @deprecated Use `cardFooterClassNames.root` instead.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
9
|
|
|
14
|
-
exports.cardFooterClassName = 'fui-CardFooter';
|
|
15
10
|
exports.cardFooterClassNames = {
|
|
16
11
|
root: 'fui-CardFooter',
|
|
17
12
|
action: 'fui-CardFooter__action'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,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\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/"}
|
|
@@ -3,15 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardHeaderStyles_unstable = exports.cardHeaderClassNames =
|
|
6
|
+
exports.useCardHeaderStyles_unstable = exports.cardHeaderClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
-
/**
|
|
10
|
-
* @deprecated Use `cardHeaderClassNames.root` instead.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
9
|
|
|
14
|
-
exports.cardHeaderClassName = 'fui-CardHeader';
|
|
15
10
|
exports.cardHeaderClassNames = {
|
|
16
11
|
root: 'fui-CardHeader',
|
|
17
12
|
image: 'fui-CardHeader__image',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,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\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/"}
|
|
@@ -3,15 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardPreviewStyles_unstable = exports.cardPreviewClassNames =
|
|
6
|
+
exports.useCardPreviewStyles_unstable = exports.cardPreviewClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
|
-
/**
|
|
10
|
-
* @deprecated Use `cardPreviewClassNames.root` instead.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
9
|
|
|
14
|
-
exports.cardPreviewClassName = 'fui-CardPreview';
|
|
15
10
|
exports.cardPreviewClassNames = {
|
|
16
11
|
root: 'fui-CardPreview',
|
|
17
12
|
logo: 'fui-CardPreview__logo'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,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\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.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
/* eslint-disable deprecation/deprecation -- https://github.com/microsoft/fluentui/pull/21960#issuecomment-1068991851*/
|
|
3
2
|
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports.useCardPreview_unstable = exports.useCardPreviewStyles_unstable = exports.renderCardPreview_unstable = exports.cardPreviewClassNames = exports.
|
|
6
|
+
exports.useCardPreview_unstable = exports.useCardPreviewStyles_unstable = exports.renderCardPreview_unstable = exports.cardPreviewClassNames = exports.CardPreview = exports.useCardHeader_unstable = exports.useCardHeaderStyles_unstable = exports.renderCardHeader_unstable = exports.cardHeaderClassNames = exports.CardHeader = exports.useCardFooter_unstable = exports.useCardFooterStyles_unstable = exports.renderCardFooter_unstable = exports.cardFooterClassNames = exports.CardFooter = exports.useCard_unstable = exports.useCardStyles_unstable = exports.renderCard_unstable = exports.cardClassNames = exports.Card = void 0;
|
|
8
7
|
|
|
9
8
|
var Card_1 = /*#__PURE__*/require("./Card");
|
|
10
9
|
|
|
@@ -14,12 +13,6 @@ Object.defineProperty(exports, "Card", {
|
|
|
14
13
|
return Card_1.Card;
|
|
15
14
|
}
|
|
16
15
|
});
|
|
17
|
-
Object.defineProperty(exports, "cardClassName", {
|
|
18
|
-
enumerable: true,
|
|
19
|
-
get: function () {
|
|
20
|
-
return Card_1.cardClassName;
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
16
|
Object.defineProperty(exports, "cardClassNames", {
|
|
24
17
|
enumerable: true,
|
|
25
18
|
get: function () {
|
|
@@ -53,12 +46,6 @@ Object.defineProperty(exports, "CardFooter", {
|
|
|
53
46
|
return CardFooter_1.CardFooter;
|
|
54
47
|
}
|
|
55
48
|
});
|
|
56
|
-
Object.defineProperty(exports, "cardFooterClassName", {
|
|
57
|
-
enumerable: true,
|
|
58
|
-
get: function () {
|
|
59
|
-
return CardFooter_1.cardFooterClassName;
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
49
|
Object.defineProperty(exports, "cardFooterClassNames", {
|
|
63
50
|
enumerable: true,
|
|
64
51
|
get: function () {
|
|
@@ -92,12 +79,6 @@ Object.defineProperty(exports, "CardHeader", {
|
|
|
92
79
|
return CardHeader_1.CardHeader;
|
|
93
80
|
}
|
|
94
81
|
});
|
|
95
|
-
Object.defineProperty(exports, "cardHeaderClassName", {
|
|
96
|
-
enumerable: true,
|
|
97
|
-
get: function () {
|
|
98
|
-
return CardHeader_1.cardHeaderClassName;
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
82
|
Object.defineProperty(exports, "cardHeaderClassNames", {
|
|
102
83
|
enumerable: true,
|
|
103
84
|
get: function () {
|
|
@@ -131,12 +112,6 @@ Object.defineProperty(exports, "CardPreview", {
|
|
|
131
112
|
return CardPreview_1.CardPreview;
|
|
132
113
|
}
|
|
133
114
|
});
|
|
134
|
-
Object.defineProperty(exports, "cardPreviewClassName", {
|
|
135
|
-
enumerable: true,
|
|
136
|
-
get: function () {
|
|
137
|
-
return CardPreview_1.cardPreviewClassName;
|
|
138
|
-
}
|
|
139
|
-
});
|
|
140
115
|
Object.defineProperty(exports, "cardPreviewClassNames", {
|
|
141
116
|
enumerable: true,
|
|
142
117
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["export { Card, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';\nexport type { CardProps, CardSlots, CardState } from './Card';\nexport {\n CardFooter,\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 cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n CardPreview,\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.16",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"bundle-size": "bundle-size measure",
|
|
18
18
|
"clean": "just-scripts clean",
|
|
19
19
|
"code-style": "just-scripts code-style",
|
|
20
|
+
"e2e": "e2e",
|
|
20
21
|
"just": "just-scripts",
|
|
21
22
|
"lint": "just-scripts lint",
|
|
22
23
|
"start": "yarn storybook",
|
|
@@ -29,16 +30,16 @@
|
|
|
29
30
|
"devDependencies": {
|
|
30
31
|
"@fluentui/eslint-plugin": "*",
|
|
31
32
|
"@fluentui/react-conformance": "*",
|
|
32
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
33
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.7",
|
|
33
34
|
"@fluentui/scripts": "^1.0.0",
|
|
34
|
-
"@fluentui/react-text": "9.0.0-rc.
|
|
35
|
-
"@fluentui/react-button": "9.0.0-rc.
|
|
35
|
+
"@fluentui/react-text": "9.0.0-rc.10",
|
|
36
|
+
"@fluentui/react-button": "9.0.0-rc.11"
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
|
-
"@griffel/react": "1.0.
|
|
39
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
40
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
41
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
39
|
+
"@griffel/react": "1.0.5",
|
|
40
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
|
41
|
+
"@fluentui/react-tabster": "9.0.0-rc.11",
|
|
42
|
+
"@fluentui/react-theme": "9.0.0-rc.9",
|
|
42
43
|
"tslib": "^2.1.0"
|
|
43
44
|
},
|
|
44
45
|
"peerDependencies": {
|