Merge pull request #1118 from nsbno/add-pressable-card-again

Add pressable card again

.changeset/healthy-needles-help.md

@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": patch
+---
+
+Added pressable card, small changes to default color in static card and bumped package version

apps/docs/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.0.22",
+  "version": "0.0.23",
   "name": "@vygruppen/docs",
   "description": "The Spor documentation",
   "license": "MIT",

packages/spor-react/src/card/PressableCard.tsx

@@ -0,0 +1,52 @@
+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>
+  );
+};

packages/spor-react/src/card/index.tsx

@@ -1,2 +1,3 @@
 export * from "./Card";
 export * from "./StaticCard";
+export * from "./PressableCard";

packages/spor-react/src/theme/components/index.ts

@@ -40,4 +40,5 @@ export { default as Tabs } from "./tabs";
 export { default as Textarea } from "./textarea";
 export { default as Toast } from "./toast";
 export { default as StaticCard } from "./static-card";
+export { default as PressableCard } from "./pressable-card";
 export { default as TravelTag } from "./travel-tag";

packages/spor-react/src/theme/components/pressable-card.ts

@@ -0,0 +1,179 @@
+import { defineStyleConfig } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
+import { accentBackground, accentText } from "../utils/accent-utils";
+
+const config = defineStyleConfig({
+  baseStyle: (props: any) => ({
+    appearance: "none",
+    border: "none",
+    overflow: "hidden",
+    fontSize: "inherit",
+    display: "block",
+    borderRadius: "md",
+    ...getColorSchemeBaseProps(props),
+    ...getColorSchemeClickableProps(props),
+    ...focusVisibleStyles(props),
+    ...getColorSchemeActiveProps(props),
+    _hover: getColorSchemeHoverProps(props),
+    _disabled: {
+      ...baseBackground("disabled", props),
+      ...baseBorder("disabled", props),
+      ...baseText("disabled", props),
+      pointerEvents: "none",
+    },
+  }),
+  variants: {
+    base: (props) => ({
+      ...baseBackground("default", props),
+      _hover: {
+        ...baseBackground("hover", props),
+      },
+      _active: {
+        ...baseBackground("active", props),
+      },
+    }),
+    accent: (props) => ({
+      ...accentBackground("default", props),
+      _hover: {
+        ...accentBackground("hover", props),
+      },
+      _active: {
+        ...accentBackground("active", props),
+      },
+    }),
+    floating: (props) => ({
+      ...floatingBackground("default", props),
+      _hover: {
+        ...floatingBackground("hover", props),
+      },
+      _active: {
+        ...floatingBackground("active", props),
+      },
+    }),
+  },
+  sizes: {
+    sm: {
+      boxShadow: "sm",
+
+      _hover: {
+        boxShadow: "md",
+      },
+
+      _active: {
+        boxShadow: "none",
+      },
+    },
+    lg: {
+      boxShadow: "md",
+
+      _hover: {
+        boxShadow: "lg",
+      },
+
+      _active: {
+        boxShadow: "sm",
+      },
+    },
+  },
+});
+
+export default config;
+
+type CardThemeProps = {
+  colorScheme: "accent" | "default";
+  theme: any;
+  colorMode: "light" | "dark";
+};
+
+const getColorSchemeBaseProps = (props: CardThemeProps) => {
+  switch (props.colorScheme) {
+    case "default":
+      return {
+        ...baseBorder("default", props),
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
+        )(props),
+        color: "inherit",
+      };
+    case "accent":
+      return {
+        ...accentBackground("default", props),
+        ...accentText("default", props),
+        _hover: {
+          ...accentBackground("hover", props),
+        },
+        _active: {
+          ...accentBackground("active", props),
+        },
+      };
+  }
+};
+
+function getColorSchemeClickableProps(props: CardThemeProps) {
+  switch (props.colorScheme) {
+    case "default":
+      return {
+        ...floatingBorder("default", props),
+      };
+    case "accent":
+      return {
+        ...accentBackground("default", props),
+        ...accentText("default", props),
+        _hover: {
+          ...accentBackground("hover", props),
+        },
+        _active: {
+          ...accentBackground("active", props),
+        },
+      };
+  }
+}
+
+const getColorSchemeHoverProps = (props: CardThemeProps) => {
+  switch (props.colorScheme) {
+    case "default":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`,
+        )(props),
+        ...floatingBorder("hover", props),
+      };
+    case "accent":
+      return {
+        ...accentBackground("default", props),
+        ...accentText("default", props),
+        _hover: {
+          ...accentBackground("hover", props),
+        },
+        _active: {
+          ...accentBackground("active", props),
+        },
+      };
+  }
+};
+const getColorSchemeActiveProps = (props: CardThemeProps) => {
+  const { colorScheme } = props;
+  switch (colorScheme) {
+    case "default":
+      return {
+        backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
+        ...floatingBorder("active", props),
+      };
+    case "accent":
+      return {
+        ...accentBackground("default", props),
+        ...accentText("default", props),
+        _hover: {
+          ...accentBackground("hover", props),
+        },
+        _active: {
+          ...accentBackground("active", props),
+        },
+      };
+  }
+};

packages/spor-react/src/theme/components/static-card.ts

@@ -1,7 +1,7 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
-import { baseBorder } from "../utils/base-utils";
+import { baseBorder, baseText } from "../utils/base-utils";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -60,7 +60,8 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
     }
     default:
       return {
-        backgroundColor: colors[props.colorScheme]?.[100] ?? "platinum",
+        backgroundColor: colors[props.colorScheme]?.[100] ?? "default",
+        ...baseText("default", props),
       };
   }
 };