@fluentui/react-card 0.0.0-nightly6a6e258c4020220125.1 → 0.0.0-nightly6faffd280a20220221.1
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 +150 -30
- package/CHANGELOG.md +43 -13
- package/dist/react-card.d.ts +19 -15
- package/lib/Card.js.map +1 -1
- package/lib/CardFooter.js.map +1 -1
- package/lib/CardHeader.js.map +1 -1
- package/lib/CardPreview.js.map +1 -1
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/Card/Card.types.d.ts +7 -4
- package/lib/components/Card/Card.types.js.map +1 -1
- package/lib/components/Card/index.js.map +1 -1
- package/lib/components/Card/renderCard.js.map +1 -1
- package/lib/components/Card/useCard.js +4 -0
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardStyles.js +118 -20
- package/lib/components/Card/useCardStyles.js.map +1 -1
- package/lib/components/CardFooter/CardFooter.js.map +1 -1
- package/lib/components/CardFooter/CardFooter.types.d.ts +3 -3
- package/lib/components/CardFooter/CardFooter.types.js.map +1 -1
- package/lib/components/CardFooter/index.js.map +1 -1
- package/lib/components/CardFooter/renderCardFooter.js +1 -1
- package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.js +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib/components/CardHeader/CardHeader.js.map +1 -1
- package/lib/components/CardHeader/CardHeader.types.d.ts +8 -8
- package/lib/components/CardHeader/CardHeader.types.js.map +1 -1
- package/lib/components/CardHeader/index.js.map +1 -1
- package/lib/components/CardHeader/renderCardHeader.js +2 -2
- package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.js +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib/components/CardPreview/CardPreview.js.map +1 -1
- package/lib/components/CardPreview/CardPreview.types.d.ts +3 -3
- package/lib/components/CardPreview/CardPreview.types.js.map +1 -1
- package/lib/components/CardPreview/index.js.map +1 -1
- package/lib/components/CardPreview/renderCardPreview.js +1 -1
- package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
- package/lib/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.js +2 -6
- package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Card.js.map +1 -1
- package/lib-commonjs/CardFooter.js.map +1 -1
- package/lib-commonjs/CardHeader.js.map +1 -1
- package/lib-commonjs/CardPreview.js.map +1 -1
- package/lib-commonjs/components/Card/Card.js.map +1 -1
- package/lib-commonjs/components/Card/Card.types.d.ts +7 -4
- package/lib-commonjs/components/Card/Card.types.js.map +1 -1
- package/lib-commonjs/components/Card/index.js.map +1 -1
- package/lib-commonjs/components/Card/renderCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +4 -0
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.js +119 -21
- package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
- package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/CardFooter.types.d.ts +3 -3
- package/lib-commonjs/components/CardFooter/CardFooter.types.js.map +1 -1
- package/lib-commonjs/components/CardFooter/index.js.map +1 -1
- package/lib-commonjs/components/CardFooter/renderCardFooter.js +1 -1
- package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +4 -4
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/CardHeader.types.d.ts +8 -8
- package/lib-commonjs/components/CardHeader/CardHeader.types.js.map +1 -1
- package/lib-commonjs/components/CardHeader/index.js.map +1 -1
- package/lib-commonjs/components/CardHeader/renderCardHeader.js +2 -2
- package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +5 -5
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/CardPreview.types.d.ts +3 -3
- package/lib-commonjs/components/CardPreview/CardPreview.types.js.map +1 -1
- package/lib-commonjs/components/CardPreview/index.js.map +1 -1
- package/lib-commonjs/components/CardPreview/renderCardPreview.js +1 -1
- package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +5 -9
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -9
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useCardStyles_unstable = exports.cardClassName = void 0;
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
11
|
|
|
@@ -16,38 +16,135 @@ exports.cardClassName = 'fui-Card';
|
|
|
16
16
|
* Styles for the root slot
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
const useStyles = /*#__PURE__*/
|
|
19
|
+
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
20
20
|
"root": {
|
|
21
|
-
"mc9l5x": "
|
|
22
|
-
"Beiy3e4": "f1vx9l62",
|
|
21
|
+
"mc9l5x": "ftgm304",
|
|
23
22
|
"B68tc82": "f1p9o1ba",
|
|
24
23
|
"Bmxbyg5": "f1sil6mw",
|
|
25
|
-
"E5pizo": "f1whvlc6",
|
|
26
24
|
"sj55zd": "f19n0e5",
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
25
|
+
"icvyot": "fzkkow9",
|
|
26
|
+
"vrafjx": ["fcdblym", "fjik90z"],
|
|
27
|
+
"oivjwe": "fg706s2",
|
|
28
|
+
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
29
|
+
"B4j52fo": "f192inf7",
|
|
30
|
+
"Bekrc4i": ["f5tn483", "f1ojsxk5"],
|
|
31
|
+
"Bn0qgzm": "f1vxd6vx",
|
|
32
|
+
"ibv6hh": ["f1ojsxk5", "f5tn483"],
|
|
34
33
|
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
35
34
|
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
36
35
|
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
37
36
|
"Btl43ni": ["fyu767a", "f1jar5jt"],
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
37
|
+
"Ecqjvq": "f70or3y",
|
|
38
|
+
"B39syqp": ["f1s27jks", "f1x7x6se"],
|
|
39
|
+
"m3o775": "f1q2lvbs",
|
|
40
|
+
"I0kkcn": ["f1x7x6se", "f1s27jks"]
|
|
41
41
|
},
|
|
42
|
-
"
|
|
42
|
+
"filledInteractive": {
|
|
43
43
|
"Bceei9c": "f1k6fduh",
|
|
44
|
+
"De3pzq": "fxugw4r",
|
|
45
|
+
"g2u3we": "fghlq4f",
|
|
46
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
47
|
+
"B9xav0g": "fb073pr",
|
|
48
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
49
|
+
"E5pizo": "f1whvlc6",
|
|
44
50
|
"Jwef8y": "f1knas48",
|
|
45
|
-
"
|
|
51
|
+
"Bgoe8wy": "fpa59ij",
|
|
52
|
+
"Bwzppfd": ["f1rhln42", "f1l1ogpg"],
|
|
53
|
+
"oetu4i": "fz67qlh",
|
|
54
|
+
"gg5e9n": ["f1l1ogpg", "f1rhln42"],
|
|
55
|
+
"Bvxd0ez": "f1m145df",
|
|
56
|
+
"ecr2s2": "fb40n2d",
|
|
57
|
+
"B6oc9vd": "f7cshhm",
|
|
58
|
+
"ak43y8": ["f1bzyac8", "f131p3c2"],
|
|
59
|
+
"wmxk5l": "f1bazisv",
|
|
60
|
+
"B50zh58": ["f131p3c2", "f1bzyac8"]
|
|
61
|
+
},
|
|
62
|
+
"filled": {
|
|
63
|
+
"De3pzq": "fxugw4r",
|
|
64
|
+
"g2u3we": "fghlq4f",
|
|
65
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
66
|
+
"B9xav0g": "fb073pr",
|
|
67
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
68
|
+
"E5pizo": "f1whvlc6"
|
|
69
|
+
},
|
|
70
|
+
"filledAlternativeInteractive": {
|
|
71
|
+
"Bceei9c": "f1k6fduh",
|
|
72
|
+
"De3pzq": "f1dmdbja",
|
|
73
|
+
"g2u3we": "fghlq4f",
|
|
74
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
75
|
+
"B9xav0g": "fb073pr",
|
|
76
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
77
|
+
"E5pizo": "f1whvlc6",
|
|
78
|
+
"Jwef8y": "f1uvynv3",
|
|
79
|
+
"Bgoe8wy": "fpa59ij",
|
|
80
|
+
"Bwzppfd": ["f1rhln42", "f1l1ogpg"],
|
|
81
|
+
"oetu4i": "fz67qlh",
|
|
82
|
+
"gg5e9n": ["f1l1ogpg", "f1rhln42"],
|
|
83
|
+
"Bvxd0ez": "f1m145df",
|
|
84
|
+
"ecr2s2": "f1yhgkbh",
|
|
85
|
+
"B6oc9vd": "f7cshhm",
|
|
86
|
+
"ak43y8": ["f1bzyac8", "f131p3c2"],
|
|
87
|
+
"wmxk5l": "f1bazisv",
|
|
88
|
+
"B50zh58": ["f131p3c2", "f1bzyac8"]
|
|
89
|
+
},
|
|
90
|
+
"filledAlternative": {
|
|
91
|
+
"De3pzq": "f1dmdbja",
|
|
92
|
+
"g2u3we": "fghlq4f",
|
|
93
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
94
|
+
"B9xav0g": "fb073pr",
|
|
95
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
96
|
+
"E5pizo": "f1whvlc6"
|
|
97
|
+
},
|
|
98
|
+
"outlineInteractive": {
|
|
99
|
+
"Bceei9c": "f1k6fduh",
|
|
100
|
+
"De3pzq": "f1c21dwh",
|
|
101
|
+
"g2u3we": "fj3muxo",
|
|
102
|
+
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
103
|
+
"B9xav0g": "f1aperda",
|
|
104
|
+
"zhjwy3": ["f1lxtadh", "f1akhkt"],
|
|
105
|
+
"E5pizo": "f1couhl3",
|
|
106
|
+
"Jwef8y": "fjxutwb",
|
|
107
|
+
"Bgoe8wy": "fvcxoqz",
|
|
108
|
+
"Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
|
|
109
|
+
"oetu4i": "f1xlaoq0",
|
|
110
|
+
"gg5e9n": ["f1m52nbi", "f1ub3y4t"],
|
|
111
|
+
"ecr2s2": "fophhak",
|
|
112
|
+
"B6oc9vd": "fvs00aa",
|
|
113
|
+
"ak43y8": ["f1assf6x", "f4ruux4"],
|
|
114
|
+
"wmxk5l": "fumykes",
|
|
115
|
+
"B50zh58": ["f4ruux4", "f1assf6x"]
|
|
116
|
+
},
|
|
117
|
+
"outline": {
|
|
118
|
+
"De3pzq": "f1c21dwh",
|
|
119
|
+
"g2u3we": "fj3muxo",
|
|
120
|
+
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
121
|
+
"B9xav0g": "f1aperda",
|
|
122
|
+
"zhjwy3": ["f1lxtadh", "f1akhkt"],
|
|
123
|
+
"E5pizo": "f1couhl3"
|
|
124
|
+
},
|
|
125
|
+
"subtleInteractive": {
|
|
126
|
+
"Bceei9c": "f1k6fduh",
|
|
127
|
+
"De3pzq": "fhovq9v",
|
|
128
|
+
"g2u3we": "fghlq4f",
|
|
129
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
130
|
+
"B9xav0g": "fb073pr",
|
|
131
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
132
|
+
"E5pizo": "f1couhl3",
|
|
133
|
+
"Jwef8y": "f1t94bn6",
|
|
134
|
+
"ecr2s2": "f1wfn5kd"
|
|
135
|
+
},
|
|
136
|
+
"subtle": {
|
|
137
|
+
"De3pzq": "fhovq9v",
|
|
138
|
+
"g2u3we": "fghlq4f",
|
|
139
|
+
"h3c5rm": ["f1gn591s", "fjscplz"],
|
|
140
|
+
"B9xav0g": "fb073pr",
|
|
141
|
+
"zhjwy3": ["fjscplz", "f1gn591s"],
|
|
142
|
+
"E5pizo": "f1couhl3"
|
|
46
143
|
}
|
|
47
144
|
}, {
|
|
48
|
-
"d": [".
|
|
49
|
-
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"],
|
|
50
|
-
"a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}"]
|
|
145
|
+
"d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".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);}", ".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);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1couhl3{box-shadow:none;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
|
|
146
|
+
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
|
|
147
|
+
"a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f7cshhm:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1bzyac8:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f131p3c2:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1bazisv:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
|
|
51
148
|
});
|
|
52
149
|
/**
|
|
53
150
|
* Apply styling to the Card slots based on the state
|
|
@@ -56,7 +153,8 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
56
153
|
|
|
57
154
|
const useCardStyles_unstable = state => {
|
|
58
155
|
const styles = useStyles();
|
|
59
|
-
|
|
156
|
+
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.cardClassName, 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);
|
|
60
158
|
return state;
|
|
61
159
|
};
|
|
62
160
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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;;AAGa,OAAA,CAAA,aAAA,GAAgB,UAAhB;AAEb;;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,aADqB,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 { cardPreviewClassName } from '../CardPreview/index';\nimport type { CardState } from './Card.types';\n\nexport const cardClassName = 'fui-Card';\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(.${cardPreviewClassName})`]: {\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 cardClassName,\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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardFooter/CardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AACA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n const state = useCardFooter_unstable(props, ref);\n\n useCardFooterStyles_unstable(state);\n return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState,
|
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
2
|
export declare type CardFooterSlots = {
|
|
3
|
-
root:
|
|
4
|
-
action?:
|
|
3
|
+
root: Slot<'div'>;
|
|
4
|
+
action?: Slot<'div'>;
|
|
5
5
|
};
|
|
6
6
|
/**
|
|
7
7
|
* CardFooter props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardFooter/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CardFooter';\nexport * from './CardFooter.types';\nexport * from './renderCardFooter';\nexport * from './useCardFooter';\nexport * from './useCardFooterStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -19,7 +19,7 @@ const renderCardFooter_unstable = state => {
|
|
|
19
19
|
slotProps
|
|
20
20
|
} = react_utilities_1.getSlots(state);
|
|
21
21
|
return React.createElement(slots.root, { ...slotProps.root
|
|
22
|
-
}, slotProps.root.children, React.createElement(slots.action, { ...slotProps.action
|
|
22
|
+
}, slotProps.root.children, slots.action && React.createElement(slots.action, { ...slotProps.action
|
|
23
23
|
}));
|
|
24
24
|
};
|
|
25
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CAFnB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n const { slots, slotProps } = getSlots<CardFooterSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardFooter/useCardFooter.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;AAAF,MAAa,KAAnB;AAEA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,MAAM,EAAE;AAFE,KADP;AAML,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B,CAND;AAUL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;AAVH,GAAP;AAYD,CAfM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n const { action } = props;\n\n return {\n components: {\n root: 'div',\n action: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n action: resolveShorthand(action),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useCardFooterStyles_unstable = exports.cardFooterClassName = void 0;
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
exports.cardFooterClassName = 'fui-CardFooter';
|
|
11
11
|
/**
|
|
12
12
|
* Styles for the root slot
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
-
const useStyles = /*#__PURE__*/
|
|
15
|
+
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
16
16
|
"root": {
|
|
17
17
|
"mc9l5x": "f22iagw",
|
|
18
18
|
"Beiy3e4": "f1063pyq",
|
|
@@ -32,10 +32,10 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
32
32
|
|
|
33
33
|
const useCardFooterStyles_unstable = state => {
|
|
34
34
|
const styles = useStyles();
|
|
35
|
-
state.root.className =
|
|
35
|
+
state.root.className = react_1.mergeClasses(exports.cardFooterClassName, styles.root, state.root.className);
|
|
36
36
|
|
|
37
37
|
if (state.action) {
|
|
38
|
-
state.action.className =
|
|
38
|
+
state.action.className = react_1.mergeClasses(styles.action, state.action.className);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AAEb;;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,mBAAb,EAAkC,MAAM,CAAC,IAAzC,EAA+C,KAAK,CAAC,IAAN,CAAW,SAA1D,CAAvB;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,MAApB,EAA4B,KAAK,CAAC,MAAN,CAAa,SAAzC,CAAzB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterState } from './CardFooter.types';\n\nexport const cardFooterClassName = 'fui-CardFooter';\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(cardFooterClassName, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/CardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AACA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n const state = useCardHeader_unstable(props, ref);\n\n useCardHeaderStyles_unstable(state);\n return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState,
|
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
2
|
export declare type CardHeaderSlots = {
|
|
3
|
-
root:
|
|
4
|
-
image:
|
|
5
|
-
content?:
|
|
6
|
-
header:
|
|
7
|
-
description:
|
|
8
|
-
action?:
|
|
3
|
+
root: Slot<'div'>;
|
|
4
|
+
image: Slot<'div'>;
|
|
5
|
+
content?: Slot<'div'>;
|
|
6
|
+
header: Slot<'span'>;
|
|
7
|
+
description: Slot<'span'>;
|
|
8
|
+
action?: Slot<'div'>;
|
|
9
9
|
};
|
|
10
10
|
/**
|
|
11
11
|
* CardHeader props
|
|
12
12
|
*/
|
|
13
|
-
export declare type CardHeaderProps = ComponentProps<CardHeaderSlots
|
|
13
|
+
export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
|
|
14
14
|
/**
|
|
15
15
|
* State used in rendering CardHeader
|
|
16
16
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CardHeader';\nexport * from './CardHeader.types';\nexport * from './renderCardHeader';\nexport * from './useCardHeader';\nexport * from './useCardHeaderStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -20,10 +20,10 @@ const renderCardHeader_unstable = state => {
|
|
|
20
20
|
} = react_utilities_1.getSlots(state);
|
|
21
21
|
return React.createElement(slots.root, { ...slotProps.root
|
|
22
22
|
}, React.createElement(slots.image, { ...slotProps.image
|
|
23
|
-
}), React.createElement(slots.content, { ...slotProps.content
|
|
23
|
+
}), slots.content && React.createElement(slots.content, { ...slotProps.content
|
|
24
24
|
}, React.createElement(slots.header, { ...slotProps.header
|
|
25
25
|
}), React.createElement(slots.description, { ...slotProps.description
|
|
26
|
-
})), React.createElement(slots.action, { ...slotProps.action
|
|
26
|
+
})), slots.action && React.createElement(slots.action, { ...slotProps.action
|
|
27
27
|
}));
|
|
28
28
|
};
|
|
29
29
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEG,KAAK,CAAC,OAAN,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAlB,CAFF,CAHJ,EAQG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CARnB,CADF;AAYD,CAfM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n const { slots, slotProps } = getSlots<CardHeaderSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.image {...slotProps.image} />\n {slots.content && (\n <slots.content {...slotProps.content}>\n <slots.header {...slotProps.header} />\n <slots.description {...slotProps.description} />\n </slots.content>\n )}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;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,KAAK,CAAC,QAJJ;AAKV,MAAA,WAAW,EAAE,KAAK,CAAC,QALT;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: React.Fragment,\n description: React.Fragment,\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/"}
|
|
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useCardHeaderStyles_unstable = exports.cardHeaderClassName = void 0;
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
exports.cardHeaderClassName = 'fui-CardHeader';
|
|
11
11
|
/**
|
|
12
12
|
* Styles for the root slot
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
-
const useStyles = /*#__PURE__*/
|
|
15
|
+
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
16
16
|
"root": {
|
|
17
17
|
"mc9l5x": "f22iagw",
|
|
18
18
|
"Beiy3e4": "f1063pyq",
|
|
@@ -50,14 +50,14 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
50
50
|
|
|
51
51
|
const useCardHeaderStyles_unstable = state => {
|
|
52
52
|
const styles = useStyles();
|
|
53
|
-
state.root.className =
|
|
53
|
+
state.root.className = react_1.mergeClasses(exports.cardHeaderClassName, styles.root, state.root.className);
|
|
54
54
|
|
|
55
55
|
if (state.image) {
|
|
56
|
-
state.image.className =
|
|
56
|
+
state.image.className = react_1.mergeClasses(styles.image, state.image.className);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
if (state.content) {
|
|
60
|
-
state.content.className =
|
|
60
|
+
state.content.className = react_1.mergeClasses(styles.textContainer, state.content.className);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AAEb;;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,mBAAb,EAAkC,MAAM,CAAC,IAAzC,EAA+C,KAAK,CAAC,IAAN,CAAW,SAA1D,CAAvB;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,KAApB,EAA2B,KAAK,CAAC,KAAN,CAAY,SAAvC,CAAxB;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,aAApB,EAAmC,KAAK,CAAC,OAAN,CAAc,SAAjD,CAA1B;AACD;;AAED,SAAO,KAAP;AACD,CAbM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderState } from './CardHeader.types';\n\nexport const cardHeaderClassName = 'fui-CardHeader';\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(cardHeaderClassName, styles.root, state.root.className);\n\n if (state.image) {\n state.image.className = mergeClasses(styles.image, state.image.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(styles.textContainer, state.content.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardPreview/CardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;AAEA,EAAA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;AACA,SAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP;AACD,CALiE,CAArD;AAOb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n const state = useCardPreview_unstable(props, ref);\n\n useCardPreviewStyles_unstable(state);\n return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState,
|
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
2
|
export declare type CardPreviewSlots = {
|
|
3
|
-
root:
|
|
4
|
-
logo?:
|
|
3
|
+
root: Slot<'div'>;
|
|
4
|
+
logo?: Slot<'div'>;
|
|
5
5
|
};
|
|
6
6
|
/**
|
|
7
7
|
* CardPreview props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardPreview/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CardPreview';\nexport * from './CardPreview.types';\nexport * from './renderCardPreview';\nexport * from './useCardPreview';\nexport * from './useCardPreviewStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -19,7 +19,7 @@ const renderCardPreview_unstable = state => {
|
|
|
19
19
|
slotProps
|
|
20
20
|
} = react_utilities_1.getSlots(state);
|
|
21
21
|
return React.createElement(slots.root, { ...slotProps.root
|
|
22
|
-
}, slotProps.root.children, React.createElement(slots.logo, { ...slotProps.logo
|
|
22
|
+
}, slotProps.root.children, slots.logo && React.createElement(slots.logo, { ...slotProps.logo
|
|
23
23
|
}));
|
|
24
24
|
};
|
|
25
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\n const { slots, slotProps } = getSlots<CardPreviewSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slotProps.root.children}\n {slots.logo && <slots.logo {...slotProps.logo} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardPreview/useCardPreview.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,QAAM;AAAE,IAAA;AAAF,MAAW,KAAjB;AACA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KADP;AAML,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B,CAND;AAUL,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB;AAVD,GAAP;AAYD,CAdM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n const { logo } = props;\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n logo: resolveShorthand(logo),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -5,20 +5,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useCardPreviewStyles_unstable = exports.cardPreviewClassName = void 0;
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
exports.cardPreviewClassName = 'fui-CardPreview';
|
|
11
11
|
/**
|
|
12
12
|
* Styles for the root slot
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
-
const useStyles = /*#__PURE__*/
|
|
15
|
+
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
16
16
|
"root": {
|
|
17
17
|
"qhf8xq": "f10pi13n",
|
|
18
|
-
"B6of3ja": "f1hu3pq6",
|
|
19
|
-
"t21cq0": ["f8nhgx1", "f16yxz7i"],
|
|
20
|
-
"jrapky": "f19f4twv",
|
|
21
|
-
"Frg6f3": ["f16yxz7i", "f8nhgx1"],
|
|
22
18
|
"Bb0eobv": "floiv14",
|
|
23
19
|
"m1g0b5": "f1r7p6p5"
|
|
24
20
|
},
|
|
@@ -30,7 +26,7 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
30
26
|
"Bqenvij": "f1d2rq10"
|
|
31
27
|
}
|
|
32
28
|
}, {
|
|
33
|
-
"d": [".f10pi13n{position:relative;}", ".
|
|
29
|
+
"d": [".f10pi13n{position:relative;}", ".floiv14>*{display:block;}", ".f1r7p6p5>*{width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
|
|
34
30
|
});
|
|
35
31
|
/**
|
|
36
32
|
* Apply styling to the CardPreview slots based on the state
|
|
@@ -39,10 +35,10 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
39
35
|
|
|
40
36
|
const useCardPreviewStyles_unstable = state => {
|
|
41
37
|
const styles = useStyles();
|
|
42
|
-
state.root.className =
|
|
38
|
+
state.root.className = react_1.mergeClasses(exports.cardPreviewClassName, styles.root, state.root.className);
|
|
43
39
|
|
|
44
40
|
if (state.logo) {
|
|
45
|
-
state.logo.className =
|
|
41
|
+
state.logo.className = react_1.mergeClasses(styles.logo, state.logo.className);
|
|
46
42
|
}
|
|
47
43
|
|
|
48
44
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,oBAAA,GAAuB,iBAAvB;AAEb;;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,oBAAb,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,IAAN,CAAW,SAArC,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewState } from './CardPreview.types';\n\nexport const cardPreviewClassName = 'fui-CardPreview';\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(cardPreviewClassName, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Card';\nexport * from './CardFooter';\nexport * from './CardHeader';\nexport * from './CardPreview';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-nightly6faffd280a20220221.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
@@ -27,14 +27,12 @@
|
|
|
27
27
|
"type-check": "tsc -b tsconfig.json"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@fluentui/babel-make-styles": "0.0.0-nightly6a6e258c4020220125.1",
|
|
31
30
|
"@fluentui/eslint-plugin": "*",
|
|
32
|
-
"@fluentui/jest-serializer-make-styles": "0.0.0-nightly6a6e258c4020220125.1",
|
|
33
31
|
"@fluentui/react-conformance": "*",
|
|
34
|
-
"@fluentui/react-conformance-
|
|
32
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly6faffd280a20220221.1",
|
|
35
33
|
"@fluentui/scripts": "^1.0.0",
|
|
36
|
-
"@fluentui/react-text": "0.0.0-
|
|
37
|
-
"@fluentui/react-button": "0.0.0-
|
|
34
|
+
"@fluentui/react-text": "0.0.0-nightly6faffd280a20220221.1",
|
|
35
|
+
"@fluentui/react-button": "0.0.0-nightly6faffd280a20220221.1",
|
|
38
36
|
"@types/enzyme": "3.10.3",
|
|
39
37
|
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
40
38
|
"@types/react": "16.9.42",
|
|
@@ -47,9 +45,9 @@
|
|
|
47
45
|
"react-test-renderer": "^16.3.0"
|
|
48
46
|
},
|
|
49
47
|
"dependencies": {
|
|
50
|
-
"@
|
|
51
|
-
"@fluentui/react-utilities": "0.0.0-
|
|
52
|
-
"@fluentui/react-tabster": "0.0.0-
|
|
48
|
+
"@griffel/react": "1.0.0",
|
|
49
|
+
"@fluentui/react-utilities": "0.0.0-nightly6faffd280a20220221.1",
|
|
50
|
+
"@fluentui/react-tabster": "0.0.0-nightly6faffd280a20220221.1",
|
|
53
51
|
"tslib": "^2.1.0"
|
|
54
52
|
},
|
|
55
53
|
"peerDependencies": {
|