@vygruppen/spor-react 3.4.3 → 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-LHZ4TUAK.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.3",
+  "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/input/Input.tsx

@@ -40,7 +40,9 @@ export const Input = forwardRef<InputProps, "input">(
     const inputId = id ?? formControlProps?.id ?? fallbackId;
     return (
       <InputGroup position="relative">
-        {leftIcon && <InputLeftElement>{leftIcon}</InputLeftElement>}
+        {leftIcon && (
+          <InputLeftElement pointerEvents="none">{leftIcon}</InputLeftElement>
+        )}
         <ChakraInput
           data-attachable
           paddingLeft={leftIcon ? 7 : undefined}
@@ -51,7 +53,11 @@ export const Input = forwardRef<InputProps, "input">(
           placeholder=" " // This is needed to make the label work as expected
         />
         <FormLabel htmlFor={inputId}>{label}</FormLabel>
-        {rightIcon && <InputRightElement>{rightIcon}</InputRightElement>}
+        {rightIcon && (
+          <InputRightElement pointerEvents="none">
+            {rightIcon}
+          </InputRightElement>
+        )}
       </InputGroup>
     );
   }

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