55 lines
2.8 KiB
JavaScript
55 lines
2.8 KiB
JavaScript
'use client';
|
|
|
|
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
export const ratingDisplayClassNames = {
|
|
root: 'fui-RatingDisplay',
|
|
valueText: 'fui-RatingDisplay__valueText',
|
|
countText: 'fui-RatingDisplay__countText'
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*/
|
|
const useRootClassName = /*#__PURE__*/__resetStyles("rxxdqwu", null, [".rxxdqwu{display:flex;flex-wrap:wrap;align-items:center;}"]);
|
|
const useLabelClassName = /*#__PURE__*/__resetStyles("rkwnos5", "rwei36a", [".rkwnos5{color:var(--colorNeutralForeground1);margin-left:var(--spacingHorizontalXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}", ".rwei36a{color:var(--colorNeutralForeground1);margin-right:var(--spacingHorizontalXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
|
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
large: {
|
|
Be2twd7: "fkhj508",
|
|
Bg96gwp: "f1i3iumi",
|
|
Frg6f3: ["f1t5qyk5", "f1ikr372"]
|
|
},
|
|
extraLarge: {
|
|
Be2twd7: "fod5ikn",
|
|
Bg96gwp: "faaz57k",
|
|
Frg6f3: ["foyynoy", "f1vcna3q"]
|
|
},
|
|
strong: {
|
|
Bhrd7zp: "fl43uef"
|
|
},
|
|
divider: {
|
|
Ftih45: "f169p45e"
|
|
}
|
|
}, {
|
|
d: [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f169p45e::before{content:\"\xB7 \";}"]
|
|
});
|
|
/**
|
|
* Apply styling to the RatingDisplay slots based on the state
|
|
*/
|
|
export const useRatingDisplayStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const {
|
|
size
|
|
} = state;
|
|
const rootClassName = useRootClassName();
|
|
state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);
|
|
const labelClassName = useLabelClassName();
|
|
const labelStyles = useLabelStyles();
|
|
if (state.valueText) {
|
|
state.valueText.className = mergeClasses(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);
|
|
}
|
|
if (state.countText) {
|
|
state.countText.className = mergeClasses(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);
|
|
}
|
|
return state;
|
|
}; |