@vygruppen/spor-react 9.4.1 → 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, 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-JRXSGTL2.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.4.1",
+  "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/index.tsx

@@ -17,6 +17,7 @@ export * from "./logo";
 export * from "./media-controller";
 export * from "./modal";
 export * from "./nudge";
+export * from "./pagination";
 export * from "./progress-indicator";
 export * from "./provider";
 export * from "./stepper";

package/src/pagination/Pagination.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import { Center, createTexts, useTranslation, Flex, TextLink } from "..";
+import {
+  ListItem,
+  UnorderedList,
+  useMultiStyleConfig,
+  Link,
+} from "@chakra-ui/react";
+import {
+  DropdownLeftFill18Icon,
+  DropdownRightFill18Icon,
+} from "@vygruppen/spor-icon-react";
+
+type PaginationProps = {
+  /** Specify the total amount of pages */
+  totalPages: number;
+  /** Specify the currently selected page */
+  selectedPage: number;
+  /** Callback for when a page is clicked */
+  onPageChange: (selected: number) => void;
+};
+
+/**
+ * A pagination component is used to navigate between multiple pages.
+ *
+ * You specify the total amount of pages and the currently selected page.
+ *
+ * ```tsx
+ * <Pagination
+ *   totalPages={10}
+ *   selectedPage={3}
+ *   onPageChange={handlePageChange}
+ * />
+ * ```
+ **/
+
+export const Pagination = ({
+  totalPages,
+  selectedPage,
+  onPageChange,
+}: PaginationProps) => {
+  const { t } = useTranslation();
+
+  const style = useMultiStyleConfig("Pagination", { selectedPage });
+
+  const hasPreviousPage = selectedPage > 1;
+  const hasNextPage = selectedPage < totalPages;
+
+  const renderPaginationButtons = () => {
+    const displayPageNumbers = [];
+    const maxVisiblePages = 8;
+    if (totalPages <= maxVisiblePages) {
+      displayPageNumbers.push(
+        ...Array.from({ length: totalPages }, (_, i) => i + 1),
+      );
+    } else {
+      if (selectedPage <= Math.floor(maxVisiblePages / 2) + 1) {
+        // If selectedPage is near the beginning, display the first pages.
+        displayPageNumbers.push(
+          ...Array.from({ length: maxVisiblePages - 1 }, (_, i) => i + 1),
+        );
+        displayPageNumbers.push("...");
+        displayPageNumbers.push(totalPages);
+      } else if (selectedPage >= totalPages - Math.floor(maxVisiblePages / 2)) {
+        // If selectedPage is near the end, display the last pages.
+        displayPageNumbers.push(1);
+        displayPageNumbers.push("...");
+        displayPageNumbers.push(
+          ...Array.from(
+            { length: maxVisiblePages - 1 },
+            (_, i) => totalPages - maxVisiblePages + 2 + i,
+          ),
+        );
+      } else {
+        // Display pages with "..." in the middle.
+        displayPageNumbers.push(1);
+        displayPageNumbers.push("...");
+        for (
+          let i = selectedPage - Math.floor((maxVisiblePages - 3) / 2);
+          i <= selectedPage + Math.floor((maxVisiblePages - 3) / 2);
+          i++
+        ) {
+          displayPageNumbers.push(i);
+        }
+        displayPageNumbers.push("...");
+        displayPageNumbers.push(totalPages);
+      }
+    }
+    return displayPageNumbers.map((pageNumber, index) =>
+      pageNumber === "..." ? (
+        <ListItem key={index} sx={style.listItem}>
+          <Center>...</Center>
+        </ListItem>
+      ) : (
+        <Link
+          key={index}
+          as={ListItem}
+          onClick={() => {
+            if (pageNumber !== "...") {
+              onPageChange(+pageNumber);
+            }
+          }}
+          padding={pageNumber === "..." ? 0 : undefined}
+          sx={pageNumber === selectedPage ? style.activeButton : style.link}
+        >
+          {pageNumber}
+        </Link>
+      ),
+    );
+  };
+
+  return (
+    <Flex as="nav" aria-label="pagination">
+      <UnorderedList
+        display="flex"
+        listStyleType="none"
+        gap={[0, 1]}
+        padding={0}
+        margin={0}
+      >
+        <ListItem aria-label={t(texts.previousPage)}>
+          <TextLink
+            onClick={() => onPageChange(selectedPage - 1)}
+            sx={hasPreviousPage ? style.link : style.disabled}
+          >
+            <DropdownLeftFill18Icon sx={style.icon} />
+          </TextLink>
+        </ListItem>
+        {renderPaginationButtons()}
+        <ListItem aria-label={t(texts.nextPage)}>
+          <TextLink
+            onClick={() => onPageChange(selectedPage + 1)}
+            sx={hasNextPage ? style.link : style.disabled}
+          >
+            <DropdownRightFill18Icon sx={style.icon} />
+          </TextLink>
+        </ListItem>
+      </UnorderedList>
+    </Flex>
+  );
+};
+
+const texts = createTexts({
+  previousPage: {
+    nb: "Forrige side",
+    nn: "Førre side",
+    en: "Previous page",
+    sv: "Föregående sida",
+  },
+  nextPage: {
+    nb: "Neste side",
+    nn: "Neste side",
+    en: "Next page",
+    sv: "Nästa sida",
+  },
+});

package/src/pagination/index.tsx

@@ -0,0 +1 @@
+export * from "./Pagination";

package/src/theme/components/datepicker.ts

@@ -87,9 +87,9 @@ const config = helpers.defineMultiStyleConfig({
       [$arrowBackground.variable]: surface("default", props).backgroundColor,
     },
     calendarPopover: {
-      ...baseBackground("default", props),
+      ...floatingBackground("default", props),
       ...baseText("default", props),
-      ...baseBorder("default", props),
+      ...floatingBorder("default", props),
       boxShadow: "md",
     },
     weekdays: {

package/src/theme/components/index.ts

@@ -26,6 +26,7 @@ export { default as ListBox } from "./listbox";
 export { default as MediaControllerButton } from "./media-controller-button";
 export { default as Modal } from "./modal";
 export { default as NumericStepper } from "./numeric-stepper";
+export { default as Pagination } from "./pagination";
 export { default as Popover } from "./popover";
 export { default as ProgressBar } from "./progress-bar";
 export { default as ProgressIndicator } from "./progress-indicator";
@@ -39,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/pagination.ts

@@ -0,0 +1,74 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { anatomy } from "@chakra-ui/theme-tools";
+import { ghostBackground } from "../utils/ghost-utils";
+import { baseText } from "../utils/base-utils";
+
+const parts = anatomy("Pagination").parts(
+  "listItem",
+  "link",
+  "activeButton",
+  "disabled",
+  "icon",
+);
+
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: (props: any) => ({
+    activeButton: {
+      fontWeight: "bold",
+      ...commonStyles,
+      ...ghostBackground("active", props),
+      _hover: {
+        ...ghostBackground("hover", props),
+        borderRadius: 50,
+      },
+      _active: {
+        borderRadius: 50,
+        ...ghostBackground("active", props),
+      },
+    },
+    disabled: {
+      ...commonStyles,
+      cursor: "not-allowed",
+      pointerEvents: "none",
+      boxShadow: "none",
+      ...baseText("disabled", props),
+    },
+    listItem: {
+      display: "flex",
+    },
+    link: {
+      ...commonStyles,
+      ...ghostBackground("default", props),
+      ...baseText("default", props),
+      _hover: {
+        ...ghostBackground("hover", props),
+        borderRadius: 50,
+        _disabled: {
+          ...baseText("disabled", props),
+        },
+      },
+      _active: {
+        borderRadius: 50,
+        ...ghostBackground("active", props),
+      },
+    },
+    icon: {
+      bottom: "-0.03em !important",
+    },
+  }),
+});
+
+const commonStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 5,
+  height: 5,
+  backgroundImage: "none",
+  borderRadius: 50,
+  fontSize: "xs",
+};
+
+export default config;

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