@vygruppen/spor-react 9.14.1 → 9.15.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 +6 -0
- package/dist/{CountryCodeSelect-JADNUR4X.mjs → CountryCodeSelect-BF22CLZQ.mjs} +1 -1
- package/dist/{chunk-HKTFZRTD.mjs → chunk-NTYAUO4O.mjs} +437 -535
- package/dist/index.d.mts +1 -23
- package/dist/index.d.ts +1 -23
- package/dist/index.js +501 -635
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/index.tsx +0 -1
- 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/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-NTYAUO4O.mjs';
|
package/package.json
CHANGED
package/src/index.tsx
CHANGED
@@ -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
@@ -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
|
-
};
|
@@ -1,23 +0,0 @@
|
|
1
|
-
// TogglePride.tsx
|
2
|
-
import React from "react";
|
3
|
-
import { usePride } from "./PrideProvider";
|
4
|
-
import { FormControl, FormLabel, Switch } from "../input";
|
5
|
-
|
6
|
-
type TogglePrideProps = {
|
7
|
-
label: string;
|
8
|
-
};
|
9
|
-
|
10
|
-
export const TogglePride = ({ label }: TogglePrideProps) => {
|
11
|
-
const { isPride, togglePride } = usePride();
|
12
|
-
|
13
|
-
return (
|
14
|
-
<FormControl display="flex" alignItems="center" gap={3}>
|
15
|
-
<FormLabel margin="0">{label}</FormLabel>
|
16
|
-
<Switch
|
17
|
-
size="sm"
|
18
|
-
onChange={() => togglePride()}
|
19
|
-
defaultChecked={isPride}
|
20
|
-
/>
|
21
|
-
</FormControl>
|
22
|
-
);
|
23
|
-
};
|
package/src/pride/index.tsx
DELETED