@fluentui/react-card 0.0.0-nightly-20220603-0421.1 → 0.0.0-nightly-20220606-0424.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.
Files changed (18) hide show
  1. package/CHANGELOG.json +11 -5
  2. package/CHANGELOG.md +6 -5
  3. package/assets/logo.svg +9 -0
  4. package/dist/index.d.ts +2 -1
  5. package/lib/components/Card/Card.types.js.map +1 -1
  6. package/lib/components/Card/useCard.js +2 -0
  7. package/lib/components/Card/useCard.js.map +1 -1
  8. package/lib/components/Card/useCardStyles.js +21 -4
  9. package/lib/components/Card/useCardStyles.js.map +1 -1
  10. package/lib/components/CardPreview/useCardPreviewStyles.js +4 -3
  11. package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  12. package/lib-commonjs/components/Card/useCard.js +2 -0
  13. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  14. package/lib-commonjs/components/Card/useCardStyles.js +23 -4
  15. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  16. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +4 -3
  17. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  18. package/package.json +7 -7
package/CHANGELOG.json CHANGED
@@ -2,16 +2,22 @@
2
2
  "name": "@fluentui/react-card",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 03 Jun 2022 04:31:00 GMT",
6
- "tag": "@fluentui/react-card_v0.0.0-nightly-20220603-0421.1",
7
- "version": "0.0.0-nightly-20220603-0421.1",
5
+ "date": "Mon, 06 Jun 2022 04:37:12 GMT",
6
+ "tag": "@fluentui/react-card_v0.0.0-nightly-20220606-0424.1",
7
+ "version": "0.0.0-nightly-20220606-0424.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
+ {
11
+ "author": "39736248+andrefcdias@users.noreply.github.com",
12
+ "package": "@fluentui/react-card",
13
+ "commit": "06030b7cbf61b157df4b2a203a456aca6380ea6b",
14
+ "comment": "feat: add `orientation` prop"
15
+ },
10
16
  {
11
17
  "author": "beachball",
12
18
  "package": "@fluentui/react-card",
13
- "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220603-0421.1",
14
- "commit": "7e01ef3be7bd1ab07745569c2678301053222f6b"
19
+ "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220606-0424.1",
20
+ "commit": "a17e91c847508ed2e1d14e3a25e64c3f003f68fe"
15
21
  }
16
22
  ]
17
23
  }
package/CHANGELOG.md CHANGED
@@ -1,17 +1,18 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Fri, 03 Jun 2022 04:31:00 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 06 Jun 2022 04:37:12 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220603-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220603-0421.1)
7
+ ## [0.0.0-nightly-20220606-0424.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220606-0424.1)
8
8
 
9
- Fri, 03 Jun 2022 04:31:00 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.18..@fluentui/react-card_v0.0.0-nightly-20220603-0421.1)
9
+ Mon, 06 Jun 2022 04:37:12 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.18..@fluentui/react-card_v0.0.0-nightly-20220606-0424.1)
11
11
 
12
12
  ### Changes
13
13
 
14
- - Bump @fluentui/react-button to v0.0.0-nightly-20220603-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/7e01ef3be7bd1ab07745569c2678301053222f6b) by beachball)
14
+ - feat: add `orientation` prop ([PR #23037](https://github.com/microsoft/fluentui/pull/23037) by 39736248+andrefcdias@users.noreply.github.com)
15
+ - Bump @fluentui/react-button to v0.0.0-nightly-20220606-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/a17e91c847508ed2e1d14e3a25e64c3f003f68fe) by beachball)
15
16
 
16
17
  ## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.18)
17
18
 
package/assets/logo.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2
+ <rect width="192" height="192" fill="url(#pattern0)"/>
3
+ <defs>
4
+ <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
5
+ <use xlink:href="#image0_8855_1044" transform="scale(0.00520833)"/>
6
+ </pattern>
7
+ <image id="image0_8855_1044" width="192" height="192" xlink:href="data:image/png;base64,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"/>
8
+ </defs>
9
+ </svg>
package/dist/index.d.ts CHANGED
@@ -112,6 +112,7 @@ export declare type CardProps = ComponentProps<CardSlots> & {
112
112
  * @defaultvalue off
113
113
  */
114
114
  focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
115
+ orientation?: 'horizontal' | 'vertical';
115
116
  size?: 'small' | 'medium' | 'large';
116
117
  };
117
118
 
@@ -122,7 +123,7 @@ export declare type CardSlots = {
122
123
  /**
123
124
  * State used in rendering Card
124
125
  */
125
- export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'size'>>;
126
+ export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;
126
127
 
127
128
  /**
128
129
  * Render the final JSX of Card
package/lib/components/Card/Card.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\n *\n * `off`\n * The card will not focusable.\n *\n * `no-tab`\n * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n * pressing the Escape key.\n *\n * `tab-exit`\n * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n * the Tab key on the last inner element.\n *\n * `tab-only`\n * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n * after the last inner element.\n *\n * @defaultvalue off\n */\n focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'size'>>;\n"]}
1
+ {"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\n *\n * `off`\n * The card will not focusable.\n *\n * `no-tab`\n * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n * pressing the Escape key.\n *\n * `tab-exit`\n * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n * the Tab key on the last inner element.\n *\n * `tab-only`\n * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n * after the last inner element.\n *\n * @defaultvalue off\n */\n focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n orientation?: 'horizontal' | 'vertical';\n\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;\n"]}
package/lib/components/Card/useCard.js CHANGED
@@ -14,6 +14,7 @@ export const useCard_unstable = (props, ref) => {
14
14
  const {
15
15
  appearance = 'filled',
16
16
  focusMode = 'off',
17
+ orientation = 'vertical',
17
18
  size = 'medium'
18
19
  } = props;
19
20
  const focusMap = {
@@ -31,6 +32,7 @@ export const useCard_unstable = (props, ref) => {
31
32
  } : null;
32
33
  return {
33
34
  appearance,
35
+ orientation,
34
36
  size,
35
37
  components: {
36
38
  root: 'div'
package/lib/components/Card/useCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,IAAI,GAAG;EAAnD,IAAgE,KAAtE;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,iBAAiB,CAAC;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAD,CAAvC;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,IAFK;IAIL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CAJP;IAKL,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAApB;EALtB,CAAP;AAYD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off', size = 'medium' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n return {\n appearance,\n size,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...focusAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,WAAW,GAAG,UAA1D;IAAsE,IAAI,GAAG;EAA7E,IAA0F,KAAhG;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,iBAAiB,CAAC;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAD,CAAvC;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAKL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CALP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAApB;EANtB,CAAP;AAaD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off', orientation = 'vertical', size = 'medium' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n return {\n appearance,\n orientation,\n size,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...focusAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Card/useCardStyles.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import { shorthands, __styles, mergeClasses } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
- import { cardPreviewClassNames } from '../CardPreview/index';
3
+ import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';
4
+ import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';
5
+ import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';
4
6
  export const cardClassNames = {
5
7
  root: 'fui-Card'
6
8
  };
@@ -14,7 +16,6 @@ export const cardCSSVars = {
14
16
  const useStyles = /*#__PURE__*/__styles({
15
17
  "root": {
16
18
  "mc9l5x": "f22iagw",
17
- "Beiy3e4": "f1vx9l62",
18
19
  "qhf8xq": "f10pi13n",
19
20
  "B68tc82": "f1p9o1ba",
20
21
  "Bmxbyg5": "f1sil6mw",
@@ -40,6 +41,18 @@ const useStyles = /*#__PURE__*/__styles({
40
41
  "uwmqm3": ["f1k04kkk", "f10m5gbb"],
41
42
  "i8kkvl": "fxsr4vj",
42
43
  "Belr9w4": "fcvsdzp",
44
+ "B2jhnfs": "f16v3d5c",
45
+ "wiictr": "f1su8t2g"
46
+ },
47
+ "orientationHorizontal": {
48
+ "Beiy3e4": "f1063pyq",
49
+ "Bt984gj": "f122n59",
50
+ "Bnoktp0": "fpfyeui",
51
+ "Idhjb2": "fwi74qw",
52
+ "Bsdbyht": ["f1yfsbdm", "f1vk4t4a"]
53
+ },
54
+ "orientationVertical": {
55
+ "Beiy3e4": "f1vx9l62",
43
56
  "Bt4kzjz": ["fobhde4", "fx5r7kn"],
44
57
  "B1ou843": ["fx5r7kn", "fobhde4"],
45
58
  "ydhu1d": "frl7skw"
@@ -162,7 +175,7 @@ const useStyles = /*#__PURE__*/__styles({
162
175
  "Gp14am": ["fzybk4o", "fpgykix"]
163
176
  }
164
177
  }, {
165
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".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);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".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);}"],
178
+ "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1yfsbdm>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1vk4t4a>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".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);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".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);}"],
166
179
  "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);}"],
167
180
  "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);}"]
168
181
  });
@@ -173,13 +186,17 @@ const useStyles = /*#__PURE__*/__styles({
173
186
 
174
187
  export const useCardStyles_unstable = state => {
175
188
  const styles = useStyles();
189
+ const orientationMap = {
190
+ horizontal: styles.orientationHorizontal,
191
+ vertical: styles.orientationVertical
192
+ };
176
193
  const sizeMap = {
177
194
  small: styles.sizeSmall,
178
195
  medium: styles.sizeMedium,
179
196
  large: styles.sizeLarge
180
197
  };
181
198
  const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
182
- state.root.className = mergeClasses(cardClassNames.root, styles.root, sizeMap[state.size], 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);
199
+ state.root.className = mergeClasses(cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], 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);
183
200
  return state;
184
201
  };
185
202
  //# sourceMappingURL=useCardStyles.js.map
package/lib/components/Card/useCardStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","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};\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\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 },\n\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\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 sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\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 sizeMap[state.size],\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/"}
1
+ {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\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};\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it\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 },\n\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n // Allows non-card components to grow to fill the available space.\n [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n flexGrow: 1,\n },\n },\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\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 orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n } as const;\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\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 orientationMap[state.orientation],\n sizeMap[state.size],\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/"}
package/lib/components/CardPreview/useCardPreviewStyles.js CHANGED
@@ -10,8 +10,9 @@ export const cardPreviewClassNames = {
10
10
  const useStyles = /*#__PURE__*/__styles({
11
11
  "root": {
12
12
  "qhf8xq": "f10pi13n",
13
- "Bb0eobv": "floiv14",
14
- "m1g0b5": "f1r7p6p5"
13
+ "pnb5jt": "f1rzl30s",
14
+ "Elg2ur": "f1chxnfo",
15
+ "B184ckt": "f17xb19f"
15
16
  },
16
17
  "logo": {
17
18
  "qhf8xq": "f1euv43f",
@@ -21,7 +22,7 @@ const useStyles = /*#__PURE__*/__styles({
21
22
  "Bqenvij": "f1d2rq10"
22
23
  }
23
24
  }, {
24
- "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;}"]
25
+ "d": [".f10pi13n{position:relative;}", ".f1rzl30s>:not(.fui-CardPreview__logo){display:block;}", ".f1chxnfo>:not(.fui-CardPreview__logo){height:100%;}", ".f17xb19f>:not(.fui-CardPreview__logo){width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
25
26
  });
26
27
  /**
27
28
  * Apply styling to the CardPreview slots based on the state
package/lib/components/CardPreview/useCardPreviewStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,IAAI,EAAE;AAF+D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;;EAEA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;EACD;;EAED,OAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\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/"}
1
+ {"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,IAAI,EAAE;AAF+D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAoBA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;;EAEA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;EACD;;EAED,OAAO,KAAP;AACD,CATM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\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 [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\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/components/Card/useCard.js CHANGED
@@ -23,6 +23,7 @@ const useCard_unstable = (props, ref) => {
23
23
  const {
24
24
  appearance = 'filled',
25
25
  focusMode = 'off',
26
+ orientation = 'vertical',
26
27
  size = 'medium'
27
28
  } = props;
28
29
  const focusMap = {
@@ -40,6 +41,7 @@ const useCard_unstable = (props, ref) => {
40
41
  } : null;
41
42
  return {
42
43
  appearance,
44
+ orientation,
43
45
  size,
44
46
  components: {
45
47
  root: 'div'
package/lib-commonjs/components/Card/useCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,IAAI,GAAG;EAAnD,IAAgE,KAAtE;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAlB,CAAtB;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,IAFK;IAIL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CAJP;IAKL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAAzC;EALD,CAAP;AAYD,CA5BM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off', size = 'medium' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n return {\n appearance,\n size,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...focusAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,WAAW,GAAG,UAA1D;IAAsE,IAAI,GAAG;EAA7E,IAA0F,KAAhG;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAlB,CAAtB;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAKL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CALP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAAzC;EAND,CAAP;AAaD,CA7BM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off', orientation = 'vertical', size = 'medium' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n return {\n appearance,\n orientation,\n size,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...focusAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Card/useCardStyles.js CHANGED
@@ -9,7 +9,11 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
9
9
 
10
10
  const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
11
 
12
- const index_1 = /*#__PURE__*/require("../CardPreview/index");
12
+ const useCardPreviewStyles_1 = /*#__PURE__*/require("../CardPreview/useCardPreviewStyles");
13
+
14
+ const useCardHeaderStyles_1 = /*#__PURE__*/require("../CardHeader/useCardHeaderStyles");
15
+
16
+ const useCardFooterStyles_1 = /*#__PURE__*/require("../CardFooter/useCardFooterStyles");
13
17
 
14
18
  exports.cardClassNames = {
15
19
  root: 'fui-Card'
@@ -24,7 +28,6 @@ exports.cardCSSVars = {
24
28
  const useStyles = /*#__PURE__*/react_1.__styles({
25
29
  "root": {
26
30
  "mc9l5x": "f22iagw",
27
- "Beiy3e4": "f1vx9l62",
28
31
  "qhf8xq": "f10pi13n",
29
32
  "B68tc82": "f1p9o1ba",
30
33
  "Bmxbyg5": "f1sil6mw",
@@ -50,6 +53,18 @@ const useStyles = /*#__PURE__*/react_1.__styles({
50
53
  "uwmqm3": ["f1k04kkk", "f10m5gbb"],
51
54
  "i8kkvl": "fxsr4vj",
52
55
  "Belr9w4": "fcvsdzp",
56
+ "B2jhnfs": "f16v3d5c",
57
+ "wiictr": "f1su8t2g"
58
+ },
59
+ "orientationHorizontal": {
60
+ "Beiy3e4": "f1063pyq",
61
+ "Bt984gj": "f122n59",
62
+ "Bnoktp0": "fpfyeui",
63
+ "Idhjb2": "fwi74qw",
64
+ "Bsdbyht": ["f1yfsbdm", "f1vk4t4a"]
65
+ },
66
+ "orientationVertical": {
67
+ "Beiy3e4": "f1vx9l62",
53
68
  "Bt4kzjz": ["fobhde4", "fx5r7kn"],
54
69
  "B1ou843": ["fx5r7kn", "fobhde4"],
55
70
  "ydhu1d": "frl7skw"
@@ -172,7 +187,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
172
187
  "Gp14am": ["fzybk4o", "fpgykix"]
173
188
  }
174
189
  }, {
175
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".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);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".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);}"],
190
+ "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1yfsbdm>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1vk4t4a>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".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);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".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);}"],
176
191
  "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);}"],
177
192
  "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);}"]
178
193
  });
@@ -183,13 +198,17 @@ const useStyles = /*#__PURE__*/react_1.__styles({
183
198
 
184
199
  const useCardStyles_unstable = state => {
185
200
  const styles = useStyles();
201
+ const orientationMap = {
202
+ horizontal: styles.orientationHorizontal,
203
+ vertical: styles.orientationVertical
204
+ };
186
205
  const sizeMap = {
187
206
  small: styles.sizeSmall,
188
207
  medium: styles.sizeMedium,
189
208
  large: styles.sizeLarge
190
209
  };
191
210
  const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
192
- state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, sizeMap[state.size], 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);
211
+ state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], 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);
193
212
  return state;
194
213
  };
195
214
 
package/lib-commonjs/components/Card/useCardStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","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};\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\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 },\n\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\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 sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\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 sizeMap[state.size],\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/"}
1
+ {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\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};\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it\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 },\n\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n // Allows non-card components to grow to fill the available space.\n [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n flexGrow: 1,\n },\n },\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\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 orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n } as const;\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\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 orientationMap[state.orientation],\n sizeMap[state.size],\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/"}
package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js CHANGED
@@ -18,8 +18,9 @@ exports.cardPreviewClassNames = {
18
18
  const useStyles = /*#__PURE__*/react_1.__styles({
19
19
  "root": {
20
20
  "qhf8xq": "f10pi13n",
21
- "Bb0eobv": "floiv14",
22
- "m1g0b5": "f1r7p6p5"
21
+ "pnb5jt": "f1rzl30s",
22
+ "Elg2ur": "f1chxnfo",
23
+ "B184ckt": "f17xb19f"
23
24
  },
24
25
  "logo": {
25
26
  "qhf8xq": "f1euv43f",
@@ -29,7 +30,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
29
30
  "Bqenvij": "f1d2rq10"
30
31
  }
31
32
  }, {
32
- "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;}"]
33
+ "d": [".f10pi13n{position:relative;}", ".f1rzl30s>:not(.fui-CardPreview__logo){display:block;}", ".f1chxnfo>:not(.fui-CardPreview__logo){height:100%;}", ".f17xb19f>:not(.fui-CardPreview__logo){width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
33
34
  });
34
35
  /**
35
36
  * Apply styling to the CardPreview slots based on the state
package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE,iBAD+D;EAErE,IAAI,EAAE;AAF+D,CAA1D;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,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;;EAEA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,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;EACD;;EAED,OAAO,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/"}
1
+ {"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE,iBAD+D;EAErE,IAAI,EAAE;AAF+D,CAA1D;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAoBA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,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;;EAEA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,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;EACD;;EAED,OAAO,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 [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-card",
3
- "version": "0.0.0-nightly-20220603-0421.1",
3
+ "version": "0.0.0-nightly-20220606-0424.1",
4
4
  "private": false,
5
5
  "description": "Card container components for Fluent UI React.",
6
6
  "main": "lib-commonjs/index.js",
@@ -30,16 +30,16 @@
30
30
  "devDependencies": {
31
31
  "@fluentui/eslint-plugin": "*",
32
32
  "@fluentui/react-conformance": "*",
33
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220603-0421.0",
33
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220606-0424.0",
34
34
  "@fluentui/scripts": "^1.0.0",
35
- "@fluentui/react-text": "0.0.0-nightly-20220603-0421.0",
36
- "@fluentui/react-button": "0.0.0-nightly-20220603-0421.1"
35
+ "@fluentui/react-text": "0.0.0-nightly-20220606-0424.0",
36
+ "@fluentui/react-button": "0.0.0-nightly-20220606-0424.1"
37
37
  },
38
38
  "dependencies": {
39
39
  "@griffel/react": "1.1.0",
40
- "@fluentui/react-utilities": "0.0.0-nightly-20220603-0421.0",
41
- "@fluentui/react-tabster": "0.0.0-nightly-20220603-0421.0",
42
- "@fluentui/react-theme": "0.0.0-nightly-20220603-0421.0",
40
+ "@fluentui/react-utilities": "0.0.0-nightly-20220606-0424.0",
41
+ "@fluentui/react-tabster": "0.0.0-nightly-20220606-0424.0",
42
+ "@fluentui/react-theme": "0.0.0-nightly-20220606-0424.0",
43
43
  "tslib": "^2.1.0"
44
44
  },
45
45
  "peerDependencies": {