@vygruppen/spor-react 9.6.5 → 9.8.0

package/src/theme/utils/base-utils.ts

@@ -22,6 +22,7 @@ export function baseBackground(
       };
     case "selected":
       return brandBackground("default", props);
+
     case "disabled":
       return surface("disabled", props);
     case "hover":
@@ -32,7 +33,7 @@ export function baseBackground(
 
 type BorderState = Subset<
   State,
-  "hover" | "focus" | "disabled" | "selected" | "invalid" | "default"
+  "hover" | "focus" | "active" | "disabled" | "selected" | "invalid" | "default"
 >;
 
 export function baseBorder(state: BorderState, props: StyleFunctionProps) {
@@ -57,6 +58,12 @@ export function baseBorder(state: BorderState, props: StyleFunctionProps) {
         )(props),
       };
     }
+    case "active": {
+      return {
+        outline: "2px solid",
+        outlineColor: mode("base.outline.light", "base.outline.dark")(props),
+      };
+    }
     case "invalid": {
       return {
         outline: "2px solid",

package/src/theme/utils/floating-utils.ts

@@ -38,7 +38,10 @@ export function floatingBackground(
   }
 }
 
-type FloatingBorderState = Subset<State, "default" | "hover" | "active">;
+type FloatingBorderState = Subset<
+  State,
+  "default" | "hover" | "active" | "selected"
+>;
 export function floatingBorder(
   state: FloatingBorderState,
   props: StyleFunctionProps,
@@ -52,6 +55,19 @@ export function floatingBorder(
           "floating.outline.hover.dark",
         )(props),
       };
+    case "selected":
+      return {
+        outline: "1px solid",
+        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
+      };
+    case "active":
+      return {
+        outline: "1px solid",
+        outlineColor: mode(
+          "floating.outline.active.light",
+          "floating.outline.active.dark",
+        )(props),
+      };
     default:
       return {
         outline: "1px solid",

package/src/card/PressableCard.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { Box, BoxProps, useStyleConfig } from "@chakra-ui/react";
-
-type PressableCardProps = Omit<BoxProps, "as"> & {
-  variant: "floating" | "accent" | "base";
-  size?: "sm" | "lg";
-  as: "button" | "a" | "label";
-};
-
-/**
- * Renders a Pressable card.
- *
- * The most basic version looks like this:
- *
- * ```tsx
- * <PressableCard>
- *   Content
- * </PressableCard>
- * ```
- *
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
- *
- * ```tsx
- * <PressableCard colorScheme="orange" size="lg">
- *   A smaller card
- * </PressableCard>
- * ```
- *
- * Pressable cards can also be rendered as button, link or label – like a li (list item) or an article.
- * You do this by specifying the `as` prop. If no `as` is specified, button is chosen as default:
- *
- *
- * ```tsx
- * <PressableCard colorScheme="green" as="section">
- *   This is now a <section /> element
- * </PressableCard>
- * ```
- */
-export const PressableCard = ({
-  children,
-  as = "button",
-  size = "sm",
-  variant = "base",
-  ...props
-}: PressableCardProps) => {
-  const styles = useStyleConfig("PressableCard", { variant, size });
-  return (
-    <Box as={as} __css={styles} {...props}>
-      {children}
-    </Box>
-  );
-};

package/src/card/StaticCard.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { Box, useStyleConfig } from "@chakra-ui/react";
-/**
- * Renders a static card.
- *
- * The most basic version looks like this:
- *
- * ```tsx
- * <StaticCard colorScheme="white">
- *   Content
- * </StaticCard>
- * ```
- *
- * Static cards can also be rendered as whatever DOM element you want – like a li (list item) or an article. You do this by specifying the `as` prop:
- *
- * ```tsx
- * <StaticCard colorScheme="green" as="section">
- *   This is now a <section /> element
- * </StaticCard>
- * ```
- */
-export const StaticCard = ({ colorScheme, ...props }: any) => {
-  const styles = useStyleConfig("StaticCard", { colorScheme });
-  return <Box __css={styles} {...props} />;
-};