@vygruppen/spor-react 9.5.0 → 9.6.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-XXA3IGVH.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-7VZBL2PP.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.5.0",
+  "version": "9.6.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/card/PressableCard.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box, BoxProps, Card, useStyleConfig } from "@chakra-ui/react";
+
+type PressableCardProps = Omit<BoxProps, "as"> & {
+  variant: "floating" | "accent" | "base";
+  size?: "sm" | "lg";
+  as: "button" | "a" | "label" | React.ComponentType;
+};
+
+/**
+ * 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/index.tsx

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

package/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";

package/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),
+        },
+      };
+  }
+};

package/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),
       };
   }
 };