first commit

node_modules/@fluentui/react/lib-commonjs/components/Button/CompoundButton/CompoundButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { IButtonProps } from '../Button.types';
+import type { JSXElement } from '@fluentui/utilities';
+/**
+ * {@docCategory Button}
+ */
+export declare class CompoundButton extends React.Component<IButtonProps, {}> {
+    render(): JSXElement;
+}

node_modules/@fluentui/react/lib-commonjs/components/Button/CompoundButton/CompoundButton.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompoundButton = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var BaseButton_1 = require("../BaseButton");
+var Utilities_1 = require("../../../Utilities");
+var CompoundButton_styles_1 = require("./CompoundButton.styles");
+/**
+ * {@docCategory Button}
+ */
+var CompoundButton = /** @class */ (function (_super) {
+    tslib_1.__extends(CompoundButton, _super);
+    function CompoundButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CompoundButton.prototype.render = function () {
+        var _a = this.props, _b = _a.primary, primary = _b === void 0 ? false : _b, styles = _a.styles, theme = _a.theme;
+        return (React.createElement(BaseButton_1.BaseButton, tslib_1.__assign({}, this.props, { variantClassName: primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound', styles: (0, CompoundButton_styles_1.getStyles)(theme, styles, primary) })));
+    };
+    CompoundButton = tslib_1.__decorate([
+        (0, Utilities_1.customizable)('CompoundButton', ['theme', 'styles'], true)
+    ], CompoundButton);
+    return CompoundButton;
+}(React.Component));
+exports.CompoundButton = CompoundButton;
+//# sourceMappingURL=CompoundButton.js.map

node_modules/@fluentui/react/lib-commonjs/components/Button/CompoundButton/CompoundButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompoundButton.js","sourceRoot":"../src/","sources":["components/Button/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,4CAA2C;AAC3C,gDAAkD;AAClD,iEAAoD;AAKpD;;GAEG;AAEH;IAAoC,0CAAiC;IAArE;;IAWA,CAAC;IAVQ,+BAAM,GAAb;QACQ,IAAA,KAAqC,IAAI,CAAC,KAAK,EAA7C,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAe,CAAC;QACtD,OAAO,CACL,oBAAC,uBAAU,uBACL,IAAI,CAAC,KAAK,IACd,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB,EAChF,MAAM,EAAE,IAAA,iCAAS,EAAC,KAAM,EAAE,MAAM,EAAE,OAAO,CAAC,IAC1C,CACH,CAAC;IACJ,CAAC;IAVU,cAAc;QAD1B,IAAA,wBAAY,EAAC,gBAAgB,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,IAAI,CAAC;OAC7C,cAAc,CAW1B;IAAD,qBAAC;CAAA,AAXD,CAAoC,KAAK,CAAC,SAAS,GAWlD;AAXY,wCAAc","sourcesContent":["import * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable } from '../../../Utilities';\nimport { getStyles } from './CompoundButton.styles';\nimport type { IButtonProps } from '../Button.types';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\n/**\n * {@docCategory Button}\n */\n@customizable('CompoundButton', ['theme', 'styles'], true)\nexport class CompoundButton extends React.Component<IButtonProps, {}> {\n  public render(): JSXElement {\n    const { primary = false, styles, theme } = this.props;\n    return (\n      <BaseButton\n        {...this.props}\n        variantClassName={primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound'}\n        styles={getStyles(theme!, styles, primary)}\n      />\n    );\n  }\n}\n"]}

node_modules/@fluentui/react/lib-commonjs/components/Button/CompoundButton/CompoundButton.styles.d.ts

@@ -0,0 +1,3 @@
+import type { IButtonStyles } from '../Button.types';
+import type { ITheme } from '../../../Styling';
+export declare const getStyles: (theme: ITheme, customStyles?: IButtonStyles, primary?: boolean) => IButtonStyles;

node_modules/@fluentui/react/lib-commonjs/components/Button/CompoundButton/CompoundButton.styles.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var tslib_1 = require("tslib");
+var Styling_1 = require("../../../Styling");
+var Utilities_1 = require("../../../Utilities");
+var BaseButton_styles_1 = require("../BaseButton.styles");
+var SplitButton_styles_1 = require("../SplitButton/SplitButton.styles");
+var ButtonThemes_1 = require("../ButtonThemes");
+exports.getStyles = (0, Utilities_1.memoizeFunction)(function (theme, customStyles, primary) {
+    var _a, _b, _c, _d, _e;
+    var fonts = theme.fonts, palette = theme.palette;
+    var baseButtonStyles = (0, BaseButton_styles_1.getStyles)(theme);
+    var splitButtonStyles = (0, SplitButton_styles_1.getStyles)(theme);
+    var compoundButtonStyles = {
+        root: {
+            maxWidth: '280px',
+            minHeight: '72px',
+            height: 'auto',
+            padding: '16px 12px',
+        },
+        flexContainer: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            minWidth: '100%',
+            margin: '',
+        },
+        textContainer: {
+            textAlign: 'left',
+        },
+        icon: {
+            fontSize: '2em',
+            lineHeight: '1em',
+            height: '1em',
+            margin: '0px 8px 0px 0px',
+            flexBasis: '1em',
+            flexShrink: '0',
+        },
+        label: {
+            margin: '0 0 5px',
+            lineHeight: '100%',
+            fontWeight: Styling_1.FontWeights.semibold,
+        },
+        description: [
+            fonts.small,
+            {
+                lineHeight: '100%',
+            },
+        ],
+    };
+    var standardCompoundTheme = {
+        description: {
+            color: palette.neutralSecondary,
+        },
+        descriptionHovered: {
+            color: palette.neutralDark,
+        },
+        descriptionPressed: {
+            color: 'inherit',
+        },
+        descriptionChecked: {
+            color: 'inherit',
+        },
+        descriptionDisabled: {
+            color: 'inherit',
+        },
+    };
+    var primaryCompoundTheme = {
+        description: (_a = {
+                color: palette.white
+            },
+            _a[Styling_1.HighContrastSelector] = tslib_1.__assign({ backgroundColor: 'WindowText', color: 'Window' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
+            _a),
+        descriptionHovered: (_b = {
+                color: palette.white
+            },
+            _b[Styling_1.HighContrastSelector] = {
+                backgroundColor: 'Highlight',
+                color: 'Window',
+            },
+            _b),
+        descriptionPressed: (_c = {
+                color: 'inherit'
+            },
+            _c[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'Window', backgroundColor: 'WindowText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
+            _c),
+        descriptionChecked: (_d = {
+                color: 'inherit'
+            },
+            _d[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'Window', backgroundColor: 'WindowText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
+            _d),
+        descriptionDisabled: (_e = {
+                color: 'inherit'
+            },
+            _e[Styling_1.HighContrastSelector] = {
+                color: 'inherit',
+            },
+            _e),
+    };
+    return (0, Styling_1.concatStyleSets)(baseButtonStyles, compoundButtonStyles, primary ? (0, ButtonThemes_1.primaryStyles)(theme) : (0, ButtonThemes_1.standardStyles)(theme), primary ? primaryCompoundTheme : standardCompoundTheme, splitButtonStyles, customStyles);
+});
+//# sourceMappingURL=CompoundButton.styles.js.map