@saleor/macaw-ui 0.7.2 → 0.7.3

package/dist/types/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import { default as MuiAccordion } from "@material-ui/core/Accordion";
-import { AccordionSummaryProps } from "@material-ui/core/AccordionSummary";
 import { default as MuiAAccordionDetails } from "@material-ui/core/AccordionDetails";
+import { AccordionSummaryProps } from "@material-ui/core/AccordionSummary";
 import React from "react";
 export declare const Accordion: typeof MuiAccordion;
 export declare const AccordionSummary: React.FC<AccordionSummaryProps<"div", {}>>;

package/dist/types/theme/Baseline.d.ts

@@ -1,2 +1,6 @@
 import React from "react";
-export declare const Baseline: React.FC;
+type BaselineProps = {
+    importFontStyle: boolean;
+};
+export declare const Baseline: React.FC<BaselineProps>;
+export {};

package/dist/types/theme/ThemeProvider.d.ts

@@ -17,5 +17,9 @@ export interface ThemeProviderProps {
      * Enables server side rendering.
      */
     ssr?: boolean;
+    /**
+     * Enables importing font style from external source.
+     */
+    importFontStyle?: boolean;
 }
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.2",
+  "version": "0.7.3",
   "license": "CC-BY-4.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/Accordion/Accordion.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, Story } from "@storybook/react";
 import React from "react";
+
 import { GuideDecorator } from "../utils/Decorator";
 import { Accordion, AccordionSummary } from "./Accordion";
 
-
 export const WithContent: Story = () => (
   <Accordion>
     <AccordionSummary>item 1</AccordionSummary>

package/src/Accordion/Accordion.tsx

@@ -1,12 +1,12 @@
 import { default as MuiAccordion } from "@material-ui/core/Accordion";
+import { default as MuiAAccordionDetails } from "@material-ui/core/AccordionDetails";
 import {
-  default as MuiAccordionSummary,
   AccordionSummaryProps,
+  default as MuiAccordionSummary,
 } from "@material-ui/core/AccordionSummary";
-import { default as MuiAAccordionDetails } from "@material-ui/core/AccordionDetails";
+import React from "react";
 
 import { ChevronIcon } from "../icons";
-import React from "react";
 import useStyles from "./styles";
 
 const _AccordionSmmary: React.FC<AccordionSummaryProps> = React.forwardRef(

package/src/Accordion/styles.ts

@@ -3,9 +3,9 @@ import { makeStyles } from "../theme";
 const useStyles = makeStyles(
   (theme) => {
     const isDarkMode = theme.palette.type === "dark";
-    const colors = theme.palette.saleor
-    const borderColor = isDarkMode ? colors.main[4] : colors.main[6]
-  
+    const colors = theme.palette.saleor;
+    const borderColor = isDarkMode ? colors.main[4] : colors.main[6];
+
     return {
       expandIcon: {
         "&:hover, &.Mui-focusVisible, &$hover, &$active": {
@@ -18,8 +18,8 @@ const useStyles = makeStyles(
         border: `1px solid ${borderColor}`,
         padding: 3,
         transition: "200ms",
-      }
-    }
+      },
+    };
   },
   {
     name: "Accordion",

package/src/PageTabs/styles.ts

@@ -1,4 +1,5 @@
 import { alpha } from "@material-ui/core/styles";
+
 import { makeStyles } from "../theme";
 
 const useStyles = makeStyles(

package/src/theme/Baseline.tsx

@@ -4,71 +4,78 @@ import React from "react";
 
 import { makeStyles } from "./styles";
 
-const useStyles = makeStyles(
-  (theme) => ({
-    "@global": {
-      "@import": "url('https://rsms.me/inter/inter.css')",
-      // Putting them here, because MUI doesn't let putting own keys in
-      // `overrides` objects
-      "@keyframes hoverControlStart": {
-        from: {
-          transform: "scale(1)",
+type BaselineProps = {
+  importFontStyle: boolean;
+};
+
+const useStyles = (props: BaselineProps) =>
+  makeStyles(
+    (theme) => ({
+      "@global": {
+        ...(props.importFontStyle && {
+          "@import": "url('https://rsms.me/inter/inter.css')",
+        }),
+        // Putting them here, because MUI doesn't let putting own keys in
+        // `overrides` objects
+        "@keyframes hoverControlStart": {
+          from: {
+            transform: "scale(1)",
+          },
+          to: {
+            transform: "scale(1.4)",
+          },
         },
-        to: {
-          transform: "scale(1.4)",
+        "@keyframes hoverControl": {
+          from: {
+            transform: "scale(1.4)",
+          },
+          to: {
+            transform: "scale(1.6)",
+          },
         },
-      },
-      "@keyframes hoverControl": {
-        from: {
-          transform: "scale(1.4)",
+
+        "@keyframes hoverSwitchStart": {
+          from: {
+            boxShadow: `0 0 0 0 ${theme.palette.saleor.active[5]}`,
+          },
+          to: {
+            boxShadow: `0 0 0 3px ${theme.palette.saleor.active[5]}`,
+          },
         },
-        to: {
-          transform: "scale(1.6)",
+        "@keyframes hoverSwitch": {
+          from: {
+            boxShadow: `0 0 0 3px ${theme.palette.saleor.active[5]}`,
+          },
+          to: {
+            boxShadow: `0 0 0 5px ${theme.palette.saleor.active[5]}`,
+          },
         },
-      },
 
-      "@keyframes hoverSwitchStart": {
-        from: {
-          boxShadow: `0 0 0 0 ${theme.palette.saleor.active[5]}`,
+        ":root": {
+          "--background-paper": theme.palette.background.paper,
+          "--background-default": theme.palette.background.default,
+          colorScheme: theme.palette.type,
         },
-        to: {
-          boxShadow: `0 0 0 3px ${theme.palette.saleor.active[5]}`,
+
+        // For some reason @import clause must be put on top
+        // eslint-disable-next-line sort-keys
+        "::selection": {
+          background: alpha(theme.palette.primary.main, 0.2),
         },
-      },
-      "@keyframes hoverSwitch": {
-        from: {
-          boxShadow: `0 0 0 3px ${theme.palette.saleor.active[5]}`,
+        html: {
+          fontSize: "58.4%",
         },
-        to: {
-          boxShadow: `0 0 0 5px ${theme.palette.saleor.active[5]}`,
+        a: {
+          color: "inherit",
+          textDecoration: "none",
         },
       },
+    }),
+    { name: "Baseline" }
+  );
 
-      ":root": {
-        "--background-paper": theme.palette.background.paper,
-        "--background-default": theme.palette.background.default,
-        colorScheme: theme.palette.type
-      },
-
-      // For some reason @import clause must be put on top
-      // eslint-disable-next-line sort-keys
-      "::selection": {
-        background: alpha(theme.palette.primary.main, 0.2),
-      },
-      html: {
-        fontSize: "58.4%",
-      },
-      a: {
-        color: "inherit",
-        textDecoration: "none",
-      },
-    },
-  }),
-  { name: "Baseline" }
-);
-
-export const Baseline: React.FC = () => {
-  useStyles();
+export const Baseline: React.FC<BaselineProps> = (props) => {
+  useStyles(props);
 
   return <CssBaseline />;
 };

package/src/theme/ThemeProvider.tsx

@@ -34,6 +34,10 @@ export interface ThemeProviderProps {
    * Enables server side rendering.
    */
   ssr?: boolean;
+  /**
+   * Enables importing font style from external source.
+   */
+  importFontStyle?: boolean;
 }
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   children,
@@ -41,6 +45,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   palettes = {},
   overrides = {},
   ssr = false,
+  importFontStyle = true,
 }) => {
   const { value: themeTypeName, setValue: setThemeType } = useLocalStorage(
     localStorageKeys.theme,
@@ -79,7 +84,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
       <MuiThemeProvider theme={theme}>
         <ActionBarProvider>
           <BacklinkProvider>
-            <Baseline />
+            <Baseline importFontStyle={importFontStyle} />
             {children}
           </BacklinkProvider>
         </ActionBarProvider>