@biblioteksentralen/react 1.0.0-beta.5 → 1.0.0-beta.7

package/src/styles/chakraTheme/ButtonStyles.ts

@@ -1,55 +0,0 @@
-import { colors } from "@biblioteksentralen/utils";
-import { ComponentStyleConfig } from "@chakra-ui/theme";
-import { SystemStyleInterpolation } from "@chakra-ui/theme-tools";
-
-export type CustomButtonVariants = "primary" | "secondary" | "tertiary";
-
-const variants: Record<CustomButtonVariants, SystemStyleInterpolation> = {
-  primary: {
-    backgroundColor: colors.black,
-    color: "white",
-    _hover: {
-      backgroundColor: "hsla(0deg, 0%, 70%, 1)",
-      color: "black",
-    },
-  },
-  secondary: {
-    borderColor: "currentColor",
-    backgroundColor: "transparent",
-    color: "currentColor",
-    _hover: {
-      backgroundColor: "hsla(0deg, 0%, 50%, 0.15)",
-    },
-  },
-  tertiary: {
-    backgroundColor: "transparent",
-    color: "currentColor",
-    _hover: {
-      backgroundColor: "hsla(0deg, 0%, 50%, 0.15)",
-      color: "currentColor",
-    },
-  },
-};
-
-export const ButtonStyles: ComponentStyleConfig = {
-  baseStyle: {
-    border: "transparent 0.1em solid",
-    borderRadius: "0.35em",
-    fontWeight: 600,
-    _disabled: {
-      backgroundColor: `${colors.grey45} !important`,
-      color: "white !important",
-      opacity: 1,
-    },
-  },
-  sizes: {
-    sm: {
-      padding: "0.2em 0.5em",
-      fontSize: "1rem",
-    },
-  },
-  variants: variants,
-  defaultProps: {
-    variant: "primary",
-  },
-};

package/src/styles/chakraTheme/CheckboxStyles.ts

@@ -1,19 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { checkboxAnatomy } from "@chakra-ui/anatomy";
-
-const { definePartsStyle, defineMultiStyleConfig: defineMultiStyleConfigWithTypeIssue } = createMultiStyleConfigHelpers(
-  checkboxAnatomy.keys
-);
-
-// https://github.com/pnpm/pnpm/issues/6089#issuecomment-1433207437
-const defineMultiStyleConfig: ReturnType<typeof createMultiStyleConfigHelpers>["defineMultiStyleConfig"] =
-  defineMultiStyleConfigWithTypeIssue;
-
-const baseStyle = definePartsStyle({
-  control: {
-    background: "white",
-  },
-});
-
-// https://github.com/pnpm/pnpm/issues/6089#issuecomment-1433207437
-export const CheckboxStyles: ReturnType<typeof defineMultiStyleConfig> = defineMultiStyleConfig({ baseStyle });

package/src/styles/chakraTheme/ContainerStyles.ts

@@ -1,7 +0,0 @@
-import { ComponentStyleConfig } from "@chakra-ui/theme";
-
-export const ContainerStyles: ComponentStyleConfig = {
-  baseStyle: {
-    px: ".75rem", // Padding left/right
-  },
-};

package/src/styles/chakraTheme/HeadingStyles.ts

@@ -1,7 +0,0 @@
-import { ComponentStyleConfig } from "@chakra-ui/theme";
-
-export const HeadingStyles: ComponentStyleConfig = {
-  baseStyle: {
-    fontWeight: "600",
-  },
-};

package/src/styles/chakraTheme/InputStyles.ts

@@ -1,41 +0,0 @@
-import { ComponentStyleConfig } from "@chakra-ui/theme";
-import { mode } from "@chakra-ui/theme-tools";
-
-export const InputStyles: ComponentStyleConfig = {
-  baseStyle: (props) => ({
-    field: {
-      _placeholder: {
-        color: mode("gray.500", "whiteAlpha.500")(props),
-      },
-    },
-  }),
-  variants: {
-    filled: (props) => ({
-      field: {
-        bg: mode("gray.200", "whiteAlpha.100")(props),
-        _hover: {
-          bg: mode("gray.300", "whiteAlpha.200")(props),
-        },
-      },
-    }),
-    outline: (props) => ({
-      field: {
-        borderColor: mode("gray.300", "whiteAlpha.300")(props),
-        _hover: {
-          borderColor: mode("gray.400", "whiteAlpha.400")(props),
-        },
-      },
-    }),
-    flushed: (props) => ({
-      field: {
-        borderColor: mode("gray.300", "whiteAlpha.300")(props),
-        _hover: {
-          borderColor: mode("gray.400", "whiteAlpha.400")(props),
-        },
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "filled",
-  },
-};

package/src/styles/chakraTheme/LinkStyles.ts

@@ -1,23 +0,0 @@
-import { ComponentStyleConfig } from "@chakra-ui/theme";
-import { SystemStyleInterpolation } from "@chakra-ui/theme-tools";
-
-export type CustomLinkVariants = "plain";
-
-const variants: Record<CustomLinkVariants, SystemStyleInterpolation> = {
-  plain: {
-    textDecoration: "none",
-    _hover: {
-      textDecoration: "underline",
-    },
-  },
-};
-
-export const LinkStyles: ComponentStyleConfig = {
-  baseStyle: {
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none",
-    },
-  },
-  variants: variants,
-};

package/src/styles/chakraTheme/ModalStyles.ts

@@ -1,12 +0,0 @@
-import { ComponentStyleConfig } from "@chakra-ui/theme";
-
-export const ModalStyles: ComponentStyleConfig = {
-  baseStyle: {
-    // Fix for modal height on Safari iOS:
-    // https://github.com/chakra-ui/chakra-ui/issues/4680#issuecomment-1301640929
-    dialogContainer: {
-      "@supports(height: -webkit-fill-available)": {},
-      height: "100%",
-    },
-  },
-};

package/src/styles/chakraTheme/SpinnerStyles.ts

@@ -1,13 +0,0 @@
-import { colors } from "@biblioteksentralen/utils";
-import { Spinner } from "@chakra-ui/react";
-import { ComponentStyleConfig } from "@chakra-ui/theme";
-
-export const SpinnerStyles: ComponentStyleConfig = {};
-
-Spinner.defaultProps = {
-  ...Spinner.defaultProps,
-  speed: ".8s",
-  color: colors.accentBlueMedium,
-  emptyColor: "rgba(0,0,0,.2)",
-  thickness: ".175em",
-};

package/src/styles/chakraTheme/biblioteksentralenChakraTheme.ts

@@ -1,34 +0,0 @@
-import { ChakraTheme } from "@chakra-ui/theme";
-import { ButtonStyles } from "./ButtonStyles";
-import { CheckboxStyles } from "./CheckboxStyles";
-import { ContainerStyles } from "./ContainerStyles";
-import { HeadingStyles } from "./HeadingStyles";
-import { InputStyles } from "./InputStyles";
-import { LinkStyles } from "./LinkStyles";
-import { ModalStyles } from "./ModalStyles";
-import { SpinnerStyles } from "./SpinnerStyles";
-import { sizes } from "./sizes";
-
-export const biblioteksentralenChakraTheme: Partial<ChakraTheme> = {
-  styles: {
-    global: {
-      html: {
-        fontSize: { base: "112.5%", md: "120%" },
-        // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,
-        // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)
-        "&:focus-within": { scrollBehavior: "smooth !important" },
-      },
-    },
-  },
-  components: {
-    Heading: HeadingStyles,
-    Spinner: SpinnerStyles,
-    Link: LinkStyles,
-    Button: ButtonStyles,
-    Input: InputStyles,
-    Container: ContainerStyles,
-    Modal: ModalStyles,
-    Checkbox: CheckboxStyles,
-  },
-  sizes,
-};

package/src/styles/chakraTheme/sizes.ts

@@ -1,10 +0,0 @@
-const container = {
-  sm: "40rem",
-  md: "48rem",
-  lg: "56rem", // Forsøker 56rem som standardbredde etter testing med Katrine
-  xl: "80rem",
-};
-
-export const sizes = {
-  container,
-};

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist"
-  },
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
-}