@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/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +12 -0
- package/dist/{CountryCodeSelect-JADNUR4X.mjs → CountryCodeSelect-2DASZ3PQ.mjs} +1 -1
- package/dist/{chunk-HKTFZRTD.mjs → chunk-MDMLROK2.mjs} +474 -561
- package/dist/index.d.mts +4 -26
- package/dist/index.d.ts +4 -26
- package/dist/index.js +541 -663
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/index.tsx +0 -1
- package/src/input/Combobox.tsx +11 -4
- package/src/input/Input.tsx +1 -0
- package/src/input/ListBox.tsx +4 -0
- package/src/loader/ColorInlineLoader.tsx +1 -10
- package/src/loader/ColorSpinner.tsx +2 -11
- package/src/loader/ContentLoader.tsx +2 -13
- package/src/loader/DarkInlineLoader.tsx +2 -13
- package/src/loader/LightFullScreenLoader.tsx +1 -10
- package/src/loader/LightInlineLoader.tsx +2 -13
- package/src/logo/VyLogo.tsx +90 -11
- package/src/logo/index.tsx +0 -1
- package/src/provider/SporProvider.tsx +4 -7
- package/src/provider/index.tsx +0 -1
- package/src/theme/components/listbox.ts +4 -3
- package/src/logo/VyLogoDefault.tsx +0 -104
- package/src/pride/PrideProvider.tsx +0 -58
- package/src/pride/TogglePride.tsx +0 -23
- package/src/pride/index.tsx +0 -2
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,
|
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
package/src/index.tsx
CHANGED
package/src/input/Combobox.tsx
CHANGED
@@ -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}
|
package/src/input/Input.tsx
CHANGED
package/src/input/ListBox.tsx
CHANGED
@@ -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>
|
package/src/logo/VyLogo.tsx
CHANGED
@@ -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
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
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
|
};
|
package/src/logo/index.tsx
CHANGED
@@ -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
|
-
<
|
64
|
-
<
|
65
|
-
|
66
|
-
|
67
|
-
</ChakraProvider>
|
68
|
-
</PrideProvider>
|
62
|
+
<ChakraProvider theme={extendedTheme} {...props}>
|
63
|
+
<Global styles={fontFaces} />
|
64
|
+
{children}
|
65
|
+
</ChakraProvider>
|
69
66
|
</LanguageProvider>
|
70
67
|
);
|
71
68
|
};
|
package/src/provider/index.tsx
CHANGED
@@ -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
|
-
};
|