@vygruppen/spor-react 9.14.1 → 9.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, CargonetLogo, 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, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, 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, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-HKTFZRTD.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, CargonetLogo, 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, RadioCard, RadioCardGroup, RadioCardGroupContext, 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, VyLogoPride, 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-MDMLROK2.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "9.14.1",
3
+ "version": "9.16.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/index.tsx CHANGED
@@ -18,7 +18,6 @@ export * from "./media-controller";
18
18
  export * from "./modal";
19
19
  export * from "./nudge";
20
20
  export * from "./pagination";
21
- export * from "./pride";
22
21
  export * from "./progress-indicator";
23
22
  export * from "./provider";
24
23
  export * from "./stepper";
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useRef, useState } from "react";
1
+ import React, { useEffect, useId, useRef, useState } from "react";
2
2
  import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
3
3
  import { useComboBoxState } from "react-stately";
4
4
  import { ColorSpinner, Input, InputProps, ListBox } from "..";
@@ -93,16 +93,17 @@ export function Combobox<T extends object>({
93
93
 
94
94
  const fallbackInputRef = useRef<HTMLInputElement>(null);
95
95
  const inputRef = externalInputRef ?? fallbackInputRef;
96
- const listBoxRef = useRef(null);
96
+ const listBoxRef = useRef<HTMLUListElement>(null);
97
97
  const popoverRef = useRef(null);
98
98
 
99
+ const listboxId = `${useId()}-listbox`;
100
+
99
101
  const inputWidth = useInputWidth(inputRef);
100
102
 
101
103
  const state = useComboBoxState({
102
104
  allowsEmptyCollection: Boolean(emptyContent),
103
105
  defaultFilter: contains,
104
106
  shouldCloseOnBlur: true,
105
- label,
106
107
  ...rest,
107
108
  });
108
109
 
@@ -133,6 +134,7 @@ export function Combobox<T extends object>({
133
134
  inputRef,
134
135
  listBoxRef,
135
136
  popoverRef,
137
+ label,
136
138
  },
137
139
  state,
138
140
  );
@@ -143,7 +145,11 @@ export function Combobox<T extends object>({
143
145
  {...styleProps(comboBoxProps)}
144
146
  aria-haspopup="listbox"
145
147
  ref={inputRef}
148
+ role="combobox"
146
149
  label={label}
150
+ aria-expanded={state.isOpen}
151
+ aria-autocomplete="list"
152
+ aria-controls={listboxId}
147
153
  borderBottomLeftRadius={
148
154
  state.isOpen && !isLoading ? 0 : borderBottomLeftRadius
149
155
  }
@@ -169,7 +175,7 @@ export function Combobox<T extends object>({
169
175
  )
170
176
  }
171
177
  />
172
-
178
+ <span aria-hidden="true" data-trigger="multiselect"></span>
173
179
  {state.isOpen && !isLoading && (
174
180
  <Popover
175
181
  state={state}
@@ -186,6 +192,7 @@ export function Combobox<T extends object>({
186
192
  <ListBox
187
193
  {...listBoxProps}
188
194
  state={state}
195
+ id={listboxId}
189
196
  listBoxRef={listBoxRef}
190
197
  emptyContent={emptyContent}
191
198
  maxWidth={inputWidth}
@@ -49,6 +49,7 @@ export const Input = forwardRef<InputProps, "input">(
49
49
  paddingRight={rightIcon ? 7 : undefined}
50
50
  {...props}
51
51
  id={inputId}
52
+ aria-labelledby={inputId}
52
53
  ref={ref}
53
54
  placeholder=" " // This is needed to make the label work as expected
54
55
  />
@@ -135,6 +135,7 @@ function Option({ item, state }: OptionProps) {
135
135
  optionProps,
136
136
  isSelected,
137
137
  isDisabled,
138
+ isFocusVisible,
138
139
  isFocused,
139
140
  labelProps,
140
141
  descriptionProps,
@@ -151,6 +152,9 @@ function Option({ item, state }: OptionProps) {
151
152
  if (isFocused) {
152
153
  dataFields["data-focus"] = true;
153
154
  }
155
+ if (isFocusVisible) {
156
+ dataFields["data-focus-visible"] = true;
157
+ }
154
158
 
155
159
  /*
156
160
  Workaround to fix click througs on mobile devices
@@ -3,8 +3,6 @@ import { inlineLoaderColorData } from "@vygruppen/spor-loader";
3
3
  import React from "react";
4
4
  import { ClientOnly } from "./ClientOnly";
5
5
  import Lottie from "./Lottie";
6
- import { inlineLoaderColorPrideData } from "@vygruppen/spor-loader";
7
- import { usePride } from "../pride";
8
6
 
9
7
  export type ColorInlineLoaderProps = Exclude<BoxProps, "children">;
10
8
  /**
@@ -17,18 +15,11 @@ export const ColorInlineLoader = ({
17
15
  maxWidth,
18
16
  ...props
19
17
  }: ColorInlineLoaderProps) => {
20
- const { isPride } = usePride();
21
18
  return (
22
19
  <Center {...props}>
23
20
  <Box width={width} maxWidth={maxWidth}>
24
21
  <ClientOnly>
25
- {() => (
26
- <Lottie
27
- animationData={
28
- isPride ? inlineLoaderColorPrideData : inlineLoaderColorData
29
- }
30
- />
31
- )}
22
+ {() => <Lottie animationData={inlineLoaderColorData} />}
32
23
  </ClientOnly>
33
24
  </Box>
34
25
  </Center>
@@ -1,12 +1,8 @@
1
1
  import { Box, BoxProps, Center } from "@chakra-ui/react";
2
- import {
3
- spinnerColorData,
4
- spinnerColorPrideData,
5
- } from "@vygruppen/spor-loader";
2
+ import { spinnerColorData } from "@vygruppen/spor-loader";
6
3
  import React from "react";
7
4
  import { ClientOnly } from "./ClientOnly";
8
5
  import Lottie from "./Lottie";
9
- import { usePride } from "../pride/PrideProvider";
10
6
 
11
7
  export type SpinnerProps = BoxProps;
12
8
  export type ColorSpinnerProps = SpinnerProps;
@@ -32,16 +28,11 @@ export const ColorSpinner = ({
32
28
 
33
29
  ...props
34
30
  }: SpinnerProps) => {
35
- const { isPride } = usePride();
36
31
  return (
37
32
  <Center flexDirection="column" {...props}>
38
33
  <Box width={width} maxWidth={maxWidth}>
39
34
  <ClientOnly>
40
- {() => (
41
- <Lottie
42
- animationData={isPride ? spinnerColorPrideData : spinnerColorData}
43
- />
44
- )}
35
+ {() => <Lottie animationData={spinnerColorData} />}
45
36
  </ClientOnly>
46
37
  </Box>
47
38
  {children && (
@@ -1,12 +1,8 @@
1
1
  import { Box, BoxProps } from "@chakra-ui/react";
2
- import {
3
- contentLoaderData,
4
- contentLoaderPrideData,
5
- } from "@vygruppen/spor-loader";
2
+ import { contentLoaderData } from "@vygruppen/spor-loader";
6
3
  import React from "react";
7
4
  import { ClientOnly } from "./ClientOnly";
8
5
  import Lottie from "./Lottie";
9
- import { usePride } from "../pride/PrideProvider";
10
6
 
11
7
  export type ContentLoaderProps = BoxProps;
12
8
  /**
@@ -14,18 +10,11 @@ export type ContentLoaderProps = BoxProps;
14
10
  * It should mostly be used for
15
11
  */
16
12
  export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => {
17
- const { isPride } = usePride();
18
13
  return (
19
14
  <Box {...props}>
20
15
  <Box maxWidth="140px" marginX="auto">
21
16
  <ClientOnly>
22
- {() => (
23
- <Lottie
24
- animationData={
25
- isPride ? contentLoaderPrideData : contentLoaderData
26
- }
27
- />
28
- )}
17
+ {() => <Lottie animationData={contentLoaderData} />}
29
18
  </ClientOnly>
30
19
  </Box>
31
20
  {children && (
@@ -1,12 +1,8 @@
1
1
  import { Box, BoxProps, Center } from "@chakra-ui/react";
2
- import {
3
- inlineLoaderColorPrideData,
4
- inlineLoaderDarkData,
5
- } from "@vygruppen/spor-loader";
2
+ import { inlineLoaderDarkData } from "@vygruppen/spor-loader";
6
3
  import React from "react";
7
4
  import { ClientOnly } from "./ClientOnly";
8
5
  import Lottie from "./Lottie";
9
- import { usePride } from "../pride/PrideProvider";
10
6
 
11
7
  export type DarkInlineLoaderProps = Exclude<BoxProps, "children">;
12
8
  /**
@@ -17,18 +13,11 @@ export const DarkInlineLoader = ({
17
13
  maxWidth,
18
14
  ...props
19
15
  }: DarkInlineLoaderProps) => {
20
- const { isPride } = usePride();
21
16
  return (
22
17
  <Center {...props}>
23
18
  <Box width={width} maxWidth={maxWidth}>
24
19
  <ClientOnly>
25
- {() => (
26
- <Lottie
27
- animationData={
28
- isPride ? inlineLoaderColorPrideData : inlineLoaderDarkData
29
- }
30
- />
31
- )}
20
+ {() => <Lottie animationData={inlineLoaderDarkData} />}
32
21
  </ClientOnly>
33
22
  </Box>
34
23
  </Center>
@@ -3,8 +3,6 @@ import { fullScreenLoaderBlackData } from "@vygruppen/spor-loader";
3
3
  import React from "react";
4
4
  import { ClientOnly } from "./ClientOnly";
5
5
  import Lottie from "./Lottie";
6
- import { usePride } from "../pride";
7
- import { vyLogoPrideData } from "@vygruppen/spor-loader";
8
6
 
9
7
  type LightFullScreenLoaderProps = BoxProps;
10
8
 
@@ -13,18 +11,11 @@ export const LightFullScreenLoader = ({
13
11
  maxWidth,
14
12
  ...props
15
13
  }: LightFullScreenLoaderProps) => {
16
- const { isPride } = usePride();
17
14
  return (
18
15
  <Center height="100%" background="white" {...props}>
19
16
  <Box width={width} maxWidth={maxWidth}>
20
17
  <ClientOnly>
21
- {() => (
22
- <Lottie
23
- animationData={
24
- isPride ? vyLogoPrideData : fullScreenLoaderBlackData
25
- }
26
- />
27
- )}
18
+ {() => <Lottie animationData={fullScreenLoaderBlackData} />}
28
19
  </ClientOnly>
29
20
  </Box>
30
21
  </Center>
@@ -1,12 +1,8 @@
1
1
  import { Box, BoxProps, Center } from "@chakra-ui/react";
2
- import {
3
- inlineLoaderColorPrideData,
4
- inlineLoaderLightData,
5
- } from "@vygruppen/spor-loader";
2
+ import { inlineLoaderLightData } from "@vygruppen/spor-loader";
6
3
  import React from "react";
7
4
  import { ClientOnly } from "./ClientOnly";
8
5
  import Lottie from "./Lottie";
9
- import { usePride } from "../pride/PrideProvider";
10
6
 
11
7
  export type LightInlineLoaderProps = Exclude<BoxProps, "children">;
12
8
  /**
@@ -17,18 +13,11 @@ export const LightInlineLoader = ({
17
13
  maxWidth,
18
14
  ...props
19
15
  }: LightInlineLoaderProps) => {
20
- const { isPride } = usePride();
21
16
  return (
22
17
  <Center {...props}>
23
18
  <Box width={width} maxWidth={maxWidth}>
24
19
  <ClientOnly>
25
- {() => (
26
- <Lottie
27
- animationData={
28
- isPride ? inlineLoaderColorPrideData : inlineLoaderLightData
29
- }
30
- />
31
- )}
20
+ {() => <Lottie animationData={inlineLoaderLightData} />}
32
21
  </ClientOnly>
33
22
  </Box>
34
23
  </Center>
@@ -1,8 +1,5 @@
1
- import { BoxProps } from "@chakra-ui/react";
2
- import React from "react";
3
- import { usePride } from "../pride";
4
- import { VyLogoPride } from "./VyLogoPride";
5
- import { VyLogoDefault } from "./VyLogoDefault";
1
+ import { Box, BoxProps } from "@chakra-ui/react";
2
+ import React, { useId } from "react";
6
3
 
7
4
  export type VyLogoProps = {
8
5
  /** The color of the logo
@@ -13,10 +10,92 @@ export type VyLogoProps = {
13
10
  colorScheme: "light" | "dark";
14
11
  } & BoxProps;
15
12
  export const VyLogo = ({ colorScheme, ...boxProps }: VyLogoProps) => {
16
- const { isPride } = usePride();
17
-
18
- if (isPride) {
19
- return <VyLogoPride colorScheme={colorScheme} {...boxProps} />;
20
- }
21
- return <VyLogoDefault colorScheme={colorScheme} {...boxProps} />;
13
+ // These colors should not be tokenized, as they are logo specific.
14
+ const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
15
+ const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
16
+ const id = useId();
17
+ return (
18
+ <Box as="svg" viewBox="0 0 107 54" {...boxProps}>
19
+ <title>Vy logo</title>
20
+ <path
21
+ fillRule="evenodd"
22
+ clipRule="evenodd"
23
+ d="M79.97 33.44a.04.04 0 0 0 0-.08 5.76 5.76 0 0 1-2.32-.85c-1.56-1-2.79-2.9-3.83-6.07L68.14 7.16c-1.18-4.04-3.42-5.85-5.48-6.6a8.36 8.36 0 0 0-2.88-.52h-1.44a.04.04 0 0 0 0 .08c.57.09 1.18.24 1.8.5 1.92.8 3.92 2.63 5.06 6.54l5.61 19.07c1.06 3.3 2.31 5.27 3.92 6.3 1.01.64 2.17.9 3.5.9h1.74Z"
24
+ fill={mainColor}
25
+ />
26
+ <mask
27
+ id={`${id}-a`}
28
+ style={{ maskType: "alpha" }}
29
+ maskUnits="userSpaceOnUse"
30
+ x="0"
31
+ y="0"
32
+ width="94"
33
+ height="54"
34
+ >
35
+ <path
36
+ fillRule="evenodd"
37
+ clipRule="evenodd"
38
+ d="M0 .03h93.26v53.65H0V.03Z"
39
+ fill={mainColor}
40
+ />
41
+ </mask>
42
+ <g
43
+ mask={`url(#${id}-a)`}
44
+ fillRule="evenodd"
45
+ clipRule="evenodd"
46
+ fill={mainColor}
47
+ >
48
+ <path d="M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" />
49
+ <path d="M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" />
50
+ </g>
51
+ <path
52
+ fillRule="evenodd"
53
+ clipRule="evenodd"
54
+ d="M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z"
55
+ fill={accentColor}
56
+ />
57
+ <path
58
+ fillRule="evenodd"
59
+ clipRule="evenodd"
60
+ d="M85.25 34.53h-2.93L78.58 46.9c-1.82 6.1 1.05 6.73 2.15 6.73h2.31a.04.04 0 0 0 .01-.09c-1.25-.3-2.96-1.6-1.45-6.64l3.65-12.37ZM102.35.11c.02 0 .03-.02.03-.04a.04.04 0 0 0-.04-.04h-.4c-2.54 0-3.92 1.27-4.8 4.3 0 0-5 16.82-6.57 22.03-1.57 5.2-2.65 6.6-4.78 6.97l-.11.03a.04.04 0 0 0 0 .08h1.45c3.72 0 5.1-2.48 6.41-6.84l7.5-25.07c.19-.6.7-1.23 1.31-1.42Z"
61
+ fill={mainColor}
62
+ />
63
+ <mask
64
+ id={`${id}-b`}
65
+ style={{ maskType: "alpha" }}
66
+ maskUnits="userSpaceOnUse"
67
+ x="29"
68
+ y="0"
69
+ width="78"
70
+ height="54"
71
+ >
72
+ <path
73
+ fillRule="evenodd"
74
+ clipRule="evenodd"
75
+ d="M29.55.04H106v53.64H29.55V.04Z"
76
+ fill={mainColor}
77
+ />
78
+ </mask>
79
+ <g mask={`url(#${id}-b)`} fillRule="evenodd" clipRule="evenodd">
80
+ <path
81
+ d="m88.2 34.45-3.96 13.46c-1.54 5.18.9 5.72 1.83 5.72h2.26a.04.04 0 0 0 0-.09c-1.05-.27-2.44-1.4-1.18-5.63l4.43-15.02c-.7.71-1.88 1.37-3.38 1.56ZM93.71 53.63c.02 0 .04-.02.04-.05a.04.04 0 0 0-.03-.04c-.9-.25-2.02-1.24-.96-4.77 0 0 12.4-42.2 13.08-44.6a3.1 3.1 0 0 0-2.47-4.1c-.02 0-.06-.02-.07.01-.01.04.03.06.04.06.3.16.63.52.45 1.14L89.84 48.77c-1.32 4.4.76 4.86 1.55 4.86h2.32ZM74.1 33.44a.04.04 0 0 0 0-.08 5.77 5.77 0 0 1-2.3-.83c-1.64-1.04-2.9-3.06-3.98-6.5-.1-.29-5.37-18.25-5.55-18.87-1.12-3.8-2.91-5.63-4.68-6.46a7.06 7.06 0 0 0-3.04-.66H53a.04.04 0 0 0-.02.08c.3.05 4.32.17 6.35 7.04 2.03 6.86 4.46 15.07 5.28 17.97 1.77 6.26 4.07 8.3 7.75 8.3h1.73Z"
82
+ fill={mainColor}
83
+ />
84
+ <path
85
+ d="M55.43 2.4c-1.48 1.27-2.7 3.16-3.44 5.9-.07.29-11.08 37.74-11.32 38.55-.93 3.12-1.7 6.21-5.2 6.75a.04.04 0 0 0 0 .08h.7l.6-.01c3.56-.14 5.33-1.66 6.85-6.82L54.94 8.3c.44-1.44.96-3.08 1.7-4.52-.15-.25-.7-.96-1.2-1.38Z"
86
+ fill={mainColor}
87
+ />
88
+ <path
89
+ d="M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z"
90
+ fill={accentColor}
91
+ />
92
+ </g>
93
+ <path
94
+ fillRule="evenodd"
95
+ clipRule="evenodd"
96
+ d="M26.55 50.33a9.09 9.09 0 0 1-1.24-2.7c-.44-1.54-12.46-42.5-12.46-42.5C11.82 1.56 10.2.07 7.22.07H5.4a.04.04 0 0 0 0 .08C7.67.5 9 2.04 9.9 5.13l12.46 42.5c.65 2.28 1.53 3.74 2.5 4.65.7-.4 1.29-1.05 1.69-1.95Z"
97
+ fill={mainColor}
98
+ />
99
+ </Box>
100
+ );
22
101
  };
@@ -1,4 +1,3 @@
1
1
  export * from "./VyLogo";
2
2
  export * from "./VyLogoPride";
3
- export * from "./VyLogoDefault";
4
3
  export * from "./CargonetLogo";
@@ -4,7 +4,6 @@ import deepmerge from "deepmerge";
4
4
  import React from "react";
5
5
  import { Language, LanguageProvider } from "..";
6
6
  import { Brand, brandTheme, theme as defaultSporTheme, fontFaces } from "../";
7
- import { PrideProvider } from "../pride/PrideProvider";
8
7
 
9
8
  type SporProviderProps = ChakraProviderProps & {
10
9
  language?: Language;
@@ -60,12 +59,10 @@ export const SporProvider = ({
60
59
 
61
60
  return (
62
61
  <LanguageProvider language={language}>
63
- <PrideProvider>
64
- <ChakraProvider theme={extendedTheme} {...props}>
65
- <Global styles={fontFaces} />
66
- {children}
67
- </ChakraProvider>
68
- </PrideProvider>
62
+ <ChakraProvider theme={extendedTheme} {...props}>
63
+ <Global styles={fontFaces} />
64
+ {children}
65
+ </ChakraProvider>
69
66
  </LanguageProvider>
70
67
  );
71
68
  };
@@ -1,2 +1 @@
1
1
  export * from "./SporProvider";
2
- export * from "../pride/PrideProvider";
@@ -4,6 +4,7 @@ import { mode } from "@chakra-ui/theme-tools";
4
4
  import { baseBorder } from "../utils/base-utils";
5
5
  import { ghostBackground, ghostText } from "../utils/ghost-utils";
6
6
  import { surface } from "../utils/surface-utils";
7
+ import { outlineBorder } from "../utils/outline-utils";
7
8
 
8
9
  const parts = anatomy("ListBox").parts(
9
10
  "container",
@@ -38,12 +39,12 @@ const config = helpers.defineMultiStyleConfig({
38
39
  _active: {
39
40
  ...ghostBackground("active", props),
40
41
  },
42
+ _focusVisible: {
43
+ ...outlineBorder("focus", props),
44
+ },
41
45
  _hover: {
42
46
  ...ghostBackground("hover", props),
43
47
  },
44
- _focus: {
45
- ...ghostBackground("selected", props),
46
- },
47
48
  _selected: {
48
49
  ...ghostBackground("active", props),
49
50
  },
@@ -1,104 +0,0 @@
1
- import { Box, BoxProps } from "@chakra-ui/react";
2
- import React, { useId } from "react";
3
-
4
- export type VyLogoDefaultProps = {
5
- /** The color of the logo
6
- *
7
- * Use `"light"` when the logo is used on a light background.
8
- * Use `"dark"` when the logo is used on a dark background.
9
- */
10
- colorScheme: "light" | "dark";
11
- } & BoxProps;
12
- export const VyLogoDefault = ({
13
- colorScheme,
14
- ...boxProps
15
- }: VyLogoDefaultProps) => {
16
- // These colors should not be tokenized, as they are logo specific.
17
- const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
18
- const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
19
- const id = useId();
20
- return (
21
- <Box as="svg" viewBox="0 0 107 54" {...boxProps}>
22
- <title>Vy logo</title>
23
- <path
24
- fillRule="evenodd"
25
- clipRule="evenodd"
26
- d="M79.97 33.44a.04.04 0 0 0 0-.08 5.76 5.76 0 0 1-2.32-.85c-1.56-1-2.79-2.9-3.83-6.07L68.14 7.16c-1.18-4.04-3.42-5.85-5.48-6.6a8.36 8.36 0 0 0-2.88-.52h-1.44a.04.04 0 0 0 0 .08c.57.09 1.18.24 1.8.5 1.92.8 3.92 2.63 5.06 6.54l5.61 19.07c1.06 3.3 2.31 5.27 3.92 6.3 1.01.64 2.17.9 3.5.9h1.74Z"
27
- fill={mainColor}
28
- />
29
- <mask
30
- id={`${id}-a`}
31
- style={{ maskType: "alpha" }}
32
- maskUnits="userSpaceOnUse"
33
- x="0"
34
- y="0"
35
- width="94"
36
- height="54"
37
- >
38
- <path
39
- fillRule="evenodd"
40
- clipRule="evenodd"
41
- d="M0 .03h93.26v53.65H0V.03Z"
42
- fill={mainColor}
43
- />
44
- </mask>
45
- <g
46
- mask={`url(#${id}-a)`}
47
- fillRule="evenodd"
48
- clipRule="evenodd"
49
- fill={mainColor}
50
- >
51
- <path d="M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" />
52
- <path d="M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" />
53
- </g>
54
- <path
55
- fillRule="evenodd"
56
- clipRule="evenodd"
57
- d="M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z"
58
- fill={accentColor}
59
- />
60
- <path
61
- fillRule="evenodd"
62
- clipRule="evenodd"
63
- d="M85.25 34.53h-2.93L78.58 46.9c-1.82 6.1 1.05 6.73 2.15 6.73h2.31a.04.04 0 0 0 .01-.09c-1.25-.3-2.96-1.6-1.45-6.64l3.65-12.37ZM102.35.11c.02 0 .03-.02.03-.04a.04.04 0 0 0-.04-.04h-.4c-2.54 0-3.92 1.27-4.8 4.3 0 0-5 16.82-6.57 22.03-1.57 5.2-2.65 6.6-4.78 6.97l-.11.03a.04.04 0 0 0 0 .08h1.45c3.72 0 5.1-2.48 6.41-6.84l7.5-25.07c.19-.6.7-1.23 1.31-1.42Z"
64
- fill={mainColor}
65
- />
66
- <mask
67
- id={`${id}-b`}
68
- style={{ maskType: "alpha" }}
69
- maskUnits="userSpaceOnUse"
70
- x="29"
71
- y="0"
72
- width="78"
73
- height="54"
74
- >
75
- <path
76
- fillRule="evenodd"
77
- clipRule="evenodd"
78
- d="M29.55.04H106v53.64H29.55V.04Z"
79
- fill={mainColor}
80
- />
81
- </mask>
82
- <g mask={`url(#${id}-b)`} fillRule="evenodd" clipRule="evenodd">
83
- <path
84
- d="m88.2 34.45-3.96 13.46c-1.54 5.18.9 5.72 1.83 5.72h2.26a.04.04 0 0 0 0-.09c-1.05-.27-2.44-1.4-1.18-5.63l4.43-15.02c-.7.71-1.88 1.37-3.38 1.56ZM93.71 53.63c.02 0 .04-.02.04-.05a.04.04 0 0 0-.03-.04c-.9-.25-2.02-1.24-.96-4.77 0 0 12.4-42.2 13.08-44.6a3.1 3.1 0 0 0-2.47-4.1c-.02 0-.06-.02-.07.01-.01.04.03.06.04.06.3.16.63.52.45 1.14L89.84 48.77c-1.32 4.4.76 4.86 1.55 4.86h2.32ZM74.1 33.44a.04.04 0 0 0 0-.08 5.77 5.77 0 0 1-2.3-.83c-1.64-1.04-2.9-3.06-3.98-6.5-.1-.29-5.37-18.25-5.55-18.87-1.12-3.8-2.91-5.63-4.68-6.46a7.06 7.06 0 0 0-3.04-.66H53a.04.04 0 0 0-.02.08c.3.05 4.32.17 6.35 7.04 2.03 6.86 4.46 15.07 5.28 17.97 1.77 6.26 4.07 8.3 7.75 8.3h1.73Z"
85
- fill={mainColor}
86
- />
87
- <path
88
- d="M55.43 2.4c-1.48 1.27-2.7 3.16-3.44 5.9-.07.29-11.08 37.74-11.32 38.55-.93 3.12-1.7 6.21-5.2 6.75a.04.04 0 0 0 0 .08h.7l.6-.01c3.56-.14 5.33-1.66 6.85-6.82L54.94 8.3c.44-1.44.96-3.08 1.7-4.52-.15-.25-.7-.96-1.2-1.38Z"
89
- fill={mainColor}
90
- />
91
- <path
92
- d="M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z"
93
- fill={accentColor}
94
- />
95
- </g>
96
- <path
97
- fillRule="evenodd"
98
- clipRule="evenodd"
99
- d="M26.55 50.33a9.09 9.09 0 0 1-1.24-2.7c-.44-1.54-12.46-42.5-12.46-42.5C11.82 1.56 10.2.07 7.22.07H5.4a.04.04 0 0 0 0 .08C7.67.5 9 2.04 9.9 5.13l12.46 42.5c.65 2.28 1.53 3.74 2.5 4.65.7-.4 1.29-1.05 1.69-1.95Z"
100
- fill={mainColor}
101
- />
102
- </Box>
103
- );
104
- };
@@ -1,58 +0,0 @@
1
- // PrideContext.tsx
2
- import React, { createContext, useContext, useEffect, useState } from "react";
3
-
4
- interface PrideContextProps {
5
- isPride: boolean;
6
- togglePride: () => void;
7
- }
8
-
9
- const PrideContext = createContext<PrideContextProps | undefined>(undefined);
10
-
11
- export const PrideProvider: React.FC<React.PropsWithChildren<{}>> = ({
12
- children,
13
- }) => {
14
- const isBrowser = typeof window !== "undefined";
15
-
16
- const key = "spor__isPride";
17
-
18
- const [isPride, setIsPride] = useState<boolean>(() => {
19
- if (isBrowser) {
20
- const savedState = localStorage.getItem(key);
21
- return savedState ? JSON.parse(savedState) : true;
22
- }
23
- return true;
24
- });
25
-
26
- const togglePride = () => {
27
- setIsPride((prev) => {
28
- const newState = !prev;
29
- if (isBrowser) {
30
- localStorage.setItem(key, JSON.stringify(newState));
31
- }
32
- return newState;
33
- });
34
- };
35
-
36
- useEffect(() => {
37
- if (isBrowser) {
38
- const savedState = localStorage.getItem(key);
39
- if (savedState) {
40
- setIsPride(JSON.parse(savedState));
41
- }
42
- }
43
- }, [isBrowser]);
44
-
45
- return (
46
- <PrideContext.Provider value={{ isPride, togglePride }}>
47
- {children}
48
- </PrideContext.Provider>
49
- );
50
- };
51
-
52
- export const usePride = (): PrideContextProps => {
53
- const context = useContext(PrideContext);
54
- if (context === undefined) {
55
- throw new Error("usePride must be used within a PrideProvider");
56
- }
57
- return context;
58
- };