@vygruppen/spor-react 3.4.4 → 3.5.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-QBIZVUPL.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-ELSHBTSG.mjs';

package/package.json

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

package/src/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,37 @@
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem as ChakraBreadcrumbItem,
+  BreadcrumbLink as ChakraBreadcrumbLink,
+  BreadcrumbProps as ChakraBreadcrumbProps,
+} from "@chakra-ui/react";
+import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
+import React from "react";
+
+type BreadcrumbProps = ChakraBreadcrumbProps;
+/**
+ * A breadcrumb component.
+ *
+ * Used to create customizable breadcrumbs.
+ *
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbItem>
+ *     <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *   </BreadcrumbItem>
+ *   <BreadcrumbItem isCurrentPage={true}>
+ *    <BreadcrumbLink href="/about">About</BreadcrumbLink>
+ *  </BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ */
+export const Breadcrumb = (props: BreadcrumbProps) => {
+  return (
+    <ChakraBreadcrumb
+      separator={<DropdownRightFill18Icon color="blackAlpha.400" />}
+      {...props}
+    />
+  );
+};
+
+export const BreadcrumbItem = ChakraBreadcrumbItem;
+export const BreadcrumbLink = ChakraBreadcrumbLink;

package/src/breadcrumb/index.tsx

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

package/src/index.tsx

@@ -2,6 +2,7 @@ export { extendTheme } from "@chakra-ui/react";
 export * as tokens from "@vygruppen/spor-design-tokens";
 export * from "./accordion";
 export * from "./alert";
+export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
 export * from "./datepicker";

package/src/theme/components/breadcrumb.ts

@@ -0,0 +1,47 @@
+import { breadcrumbAnatomy as parts } from "@chakra-ui/anatomy";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from "@chakra-ui/styled-system";
+import { getBoxShadowString } from "../utils/box-shadow-utils";
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyleLink = defineStyle({
+  transitionProperty: "common",
+  transitionDuration: "fast",
+  transitionTimingFunction: "ease-out",
+  outline: "none",
+  color: "inherit",
+  textDecoration: "none",
+  "&:not([aria-current=page])": {
+    cursor: "pointer",
+    paddingX: 0.5,
+    borderRadius: "xs",
+    _hover: {
+      backgroundColor: "coralGreen",
+    },
+    _focusVisible: {
+      boxShadow: getBoxShadowString({
+        borderColor: "greenHaze",
+        borderWidth: 2,
+      }),
+    },
+    _active: {
+      backgroundColor: "mint",
+    },
+  },
+});
+
+const baseStyle = definePartsStyle({
+  link: baseStyleLink,
+  list: {
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+  },
+});
+
+export default defineMultiStyleConfig({
+  baseStyle,
+});

package/src/theme/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Accordion } from "./accordion";
 export { default as Alert } from "./alert";
 export { default as Badge } from "./badge";
+export { default as Breadcrumb } from "./breadcrumb";
 export { default as Button } from "./button";
 export { default as Card } from "./card";
 export { default as CardSelect } from "./card-select";