@vygruppen/spor-react 1.3.3 → 2.0.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 +12 -10
- package/CHANGELOG.md +40 -0
- package/README.md +1 -1
- package/dist/index.d.ts +6718 -27
- package/dist/index.js +14139 -140
- package/dist/index.mjs +13818 -27
- package/package.json +19 -31
- package/src/accordion/Accordion.test.tsx +20 -0
- package/src/accordion/Accordion.tsx +62 -0
- package/src/accordion/AccordionContext.tsx +27 -0
- package/src/accordion/Expandable.tsx +157 -0
- package/src/accordion/index.tsx +2 -0
- package/src/alert/AlertIcon.tsx +75 -0
- package/src/alert/BaseAlert.test.tsx +37 -0
- package/src/alert/BaseAlert.tsx +21 -0
- package/src/alert/ClosableAlert.test.tsx +37 -0
- package/src/alert/ClosableAlert.tsx +75 -0
- package/src/alert/ExpandableAlert.test.tsx +84 -0
- package/src/alert/ExpandableAlert.tsx +84 -0
- package/src/alert/StaticAlert.tsx +25 -0
- package/src/alert/index.tsx +3 -0
- package/src/button/Button.test.tsx +23 -0
- package/src/button/Button.tsx +162 -0
- package/src/button/ButtonGroup.tsx +43 -0
- package/src/button/CloseButton.tsx +63 -0
- package/src/button/FloatingActionButton.tsx +113 -0
- package/src/button/IconButton.tsx +63 -0
- package/src/button/index.tsx +5 -0
- package/src/card/Card.tsx +59 -0
- package/src/card/index.tsx +1 -0
- package/src/datepicker/Calendar.tsx +32 -0
- package/src/datepicker/CalendarCell.tsx +74 -0
- package/src/datepicker/CalendarGrid.tsx +76 -0
- package/src/datepicker/CalendarHeader.tsx +153 -0
- package/src/datepicker/CalendarNavigationButton.tsx +26 -0
- package/src/datepicker/CalendarTriggerButton.tsx +36 -0
- package/src/datepicker/DateField.tsx +51 -0
- package/src/datepicker/DatePicker.tsx +153 -0
- package/src/datepicker/DateRangePicker.tsx +165 -0
- package/src/datepicker/DateTimeSegment.tsx +56 -0
- package/src/datepicker/RangeCalendar.tsx +35 -0
- package/src/datepicker/StyledField.tsx +31 -0
- package/src/datepicker/TimeField.tsx +46 -0
- package/src/datepicker/TimePicker.test.tsx +74 -0
- package/src/datepicker/TimePicker.tsx +196 -0
- package/src/datepicker/index.tsx +4 -0
- package/src/datepicker/utils.ts +33 -0
- package/src/i18n/index.tsx +38 -0
- package/src/image/index.tsx +2 -0
- package/src/index.tsx +25 -26
- package/src/input/CardSelect.tsx +165 -0
- package/src/input/Checkbox.tsx +24 -0
- package/src/input/CheckboxGroup.tsx +43 -0
- package/src/input/ChoiceChip.tsx +102 -0
- package/src/input/Dialog.tsx +29 -0
- package/src/input/FormControl.tsx +11 -0
- package/src/input/FormErrorMessage.tsx +91 -0
- package/src/input/FormLabel.tsx +11 -0
- package/src/input/InfoSelect.tsx +209 -0
- package/src/input/Input.tsx +59 -0
- package/src/input/InputElement.tsx +45 -0
- package/src/input/ListBox.tsx +123 -0
- package/src/input/NativeSelect.tsx +38 -0
- package/src/input/PasswordInput.tsx +70 -0
- package/src/input/Popover.tsx +70 -0
- package/src/input/Radio.tsx +34 -0
- package/src/input/RadioGroup.tsx +47 -0
- package/src/input/SearchInput.tsx +89 -0
- package/src/input/Switch.tsx +40 -0
- package/src/input/Textarea.tsx +98 -0
- package/src/input/index.tsx +20 -0
- package/src/layout/Divider.tsx +26 -0
- package/src/layout/Stack.tsx +42 -0
- package/src/layout/index.tsx +28 -0
- package/src/linjetag/InfoTag.tsx +54 -0
- package/src/linjetag/LineIcon.tsx +44 -0
- package/src/linjetag/TravelTag.tsx +121 -0
- package/src/linjetag/icons.tsx +80 -0
- package/src/linjetag/index.tsx +3 -0
- package/src/linjetag/types.d.ts +24 -0
- package/src/link/TextLink.tsx +45 -0
- package/src/link/index.tsx +1 -0
- package/src/loader/ClientOnly.tsx +29 -0
- package/src/loader/ColorInlineLoader.tsx +27 -0
- package/src/loader/ColorSpinner.tsx +44 -0
- package/src/loader/ContentLoader.tsx +27 -0
- package/src/loader/DarkFullScreenLoader.tsx +23 -0
- package/src/loader/DarkInlineLoader.tsx +25 -0
- package/src/loader/DarkSpinner.tsx +43 -0
- package/src/loader/LightFullScreenLoader.tsx +23 -0
- package/src/loader/LightInlineLoader.tsx +25 -0
- package/src/loader/LightSpinner.tsx +41 -0
- package/src/loader/Lottie.tsx +10 -0
- package/src/loader/ProgressBar.tsx +128 -0
- package/src/loader/ProgressLoader.tsx +140 -0
- package/src/loader/Skeleton.tsx +16 -0
- package/src/loader/SkeletonCircle.tsx +13 -0
- package/src/loader/SkeletonText.tsx +10 -0
- package/src/loader/index.tsx +14 -0
- package/src/loader/useHydrated.tsx +34 -0
- package/src/loader/useRotatingLabel.tsx +22 -0
- package/src/logo/VyLogo.tsx +101 -0
- package/src/logo/index.tsx +1 -0
- package/src/media-controller/JumpButton.tsx +69 -0
- package/src/media-controller/PlayPauseButton.tsx +67 -0
- package/src/media-controller/SkipButton.tsx +66 -0
- package/src/media-controller/icons.tsx +80 -0
- package/src/media-controller/index.test.tsx +59 -0
- package/src/media-controller/index.tsx +3 -0
- package/src/modal/Drawer.tsx +122 -0
- package/src/modal/Modal.tsx +15 -0
- package/src/modal/ModalHeader.tsx +31 -0
- package/src/modal/SimpleDrawer.tsx +44 -0
- package/src/modal/index.tsx +4 -0
- package/src/popover/PopoverWizardBody.tsx +91 -0
- package/src/popover/SimplePopover.tsx +75 -0
- package/src/popover/WizardPopover.tsx +61 -0
- package/src/popover/index.tsx +23 -0
- package/src/provider/SporProvider.tsx +67 -0
- package/src/provider/index.tsx +1 -0
- package/src/stepper/Stepper.tsx +115 -0
- package/src/stepper/StepperContext.tsx +55 -0
- package/src/stepper/StepperStep.tsx +48 -0
- package/src/stepper/index.tsx +2 -0
- package/src/tab/Tabs.tsx +20 -0
- package/src/tab/index.tsx +9 -0
- package/src/table/Table.tsx +58 -0
- package/src/table/index.tsx +19 -0
- package/src/theme/components/accordion.ts +143 -0
- package/src/theme/components/alert.ts +59 -0
- package/src/theme/components/badge.ts +109 -0
- package/src/theme/components/button.ts +217 -0
- package/src/theme/components/card-select.ts +158 -0
- package/src/theme/components/card.ts +174 -0
- package/src/theme/components/checkbox.ts +90 -0
- package/src/theme/components/choice-chip.ts +79 -0
- package/src/theme/components/close-button.ts +56 -0
- package/src/theme/components/code.ts +17 -0
- package/src/theme/components/datepicker.ts +194 -0
- package/src/theme/components/drawer.ts +92 -0
- package/src/theme/components/fab.ts +111 -0
- package/src/theme/components/form-label.ts +17 -0
- package/src/theme/components/form.ts +27 -0
- package/src/theme/components/index.ts +34 -0
- package/src/theme/components/info-select.ts +91 -0
- package/src/theme/components/info-tag.ts +49 -0
- package/src/theme/components/input.ts +97 -0
- package/src/theme/components/line-icon.ts +121 -0
- package/src/theme/components/link.ts +155 -0
- package/src/theme/components/listbox.ts +52 -0
- package/src/theme/components/media-controller-button.ts +134 -0
- package/src/theme/components/modal.ts +93 -0
- package/src/theme/components/popover.ts +63 -0
- package/src/theme/components/radio.ts +64 -0
- package/src/theme/components/select.ts +52 -0
- package/src/theme/components/skeleton.ts +40 -0
- package/src/theme/components/stepper.ts +230 -0
- package/src/theme/components/switch.ts +227 -0
- package/src/theme/components/table.ts +163 -0
- package/src/theme/components/tabs.ts +282 -0
- package/src/theme/components/textarea.ts +14 -0
- package/src/theme/components/toast.ts +28 -0
- package/src/theme/components/travel-tag.ts +267 -0
- package/src/theme/font-faces.ts +66 -0
- package/src/theme/foundations/borders.ts +11 -0
- package/src/theme/foundations/breakpoints.ts +9 -0
- package/src/theme/foundations/colors.ts +10 -0
- package/src/theme/foundations/config.ts +5 -0
- package/src/theme/foundations/fontSizes.ts +29 -0
- package/src/theme/foundations/fontWeights.ts +5 -0
- package/src/theme/foundations/fonts.ts +7 -0
- package/src/theme/foundations/index.ts +14 -0
- package/src/theme/foundations/lineHeights.ts +5 -0
- package/src/theme/foundations/radii.ts +12 -0
- package/src/theme/foundations/shadows.ts +8 -0
- package/src/theme/foundations/sizes.ts +34 -0
- package/src/theme/foundations/spacing.ts +30 -0
- package/src/theme/foundations/textStyles.ts +60 -0
- package/src/theme/foundations/zIndices.ts +17 -0
- package/src/theme/index.ts +14 -0
- package/src/theme/utils/box-shadow-utils.ts +44 -0
- package/src/theme/utils/focus-utils.ts +16 -0
- package/src/toast/ActionToast.test.tsx +22 -0
- package/src/toast/ActionToast.tsx +28 -0
- package/src/toast/BaseToast.test.tsx +27 -0
- package/src/toast/BaseToast.tsx +75 -0
- package/src/toast/ClosableToast.test.tsx +17 -0
- package/src/toast/ClosableToast.tsx +40 -0
- package/src/toast/index.tsx +1 -0
- package/src/toast/useToast.tsx +99 -0
- package/src/typography/Badge.tsx +68 -0
- package/src/typography/Code.tsx +32 -0
- package/src/typography/Heading.tsx +32 -0
- package/src/typography/Text.tsx +26 -0
- package/src/typography/index.tsx +4 -0
- package/src/util/externals.tsx +23 -0
- package/src/util/index.tsx +1 -0
@@ -0,0 +1,22 @@
|
|
1
|
+
import { render } from "@testing-library/react";
|
2
|
+
import React from "react";
|
3
|
+
import { vi } from "vitest";
|
4
|
+
import { ActionToast } from "./ActionToast";
|
5
|
+
|
6
|
+
describe("<ActionToast />", () => {
|
7
|
+
it("renders a button", async () => {
|
8
|
+
const handleClick = vi.fn();
|
9
|
+
const { getByRole } = render(
|
10
|
+
<ActionToast
|
11
|
+
variant="success"
|
12
|
+
onClick={handleClick}
|
13
|
+
buttonText="Click me"
|
14
|
+
>
|
15
|
+
Test text
|
16
|
+
</ActionToast>
|
17
|
+
);
|
18
|
+
getByRole("button").click();
|
19
|
+
expect(handleClick).toHaveBeenCalled();
|
20
|
+
expect(getByRole("button")).toHaveTextContent("Click me");
|
21
|
+
});
|
22
|
+
});
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import { Box } from "@chakra-ui/react";
|
2
|
+
import React from "react";
|
3
|
+
import { Button } from "..";
|
4
|
+
import { BaseToast, BaseToastProps } from "./BaseToast";
|
5
|
+
|
6
|
+
type ActionToastProps = BaseToastProps & {
|
7
|
+
onClick: () => void;
|
8
|
+
buttonText: string;
|
9
|
+
};
|
10
|
+
/** A toast with a button */
|
11
|
+
export const ActionToast = ({
|
12
|
+
children,
|
13
|
+
onClick,
|
14
|
+
variant,
|
15
|
+
buttonText,
|
16
|
+
id,
|
17
|
+
}: ActionToastProps) => {
|
18
|
+
return (
|
19
|
+
<BaseToast variant={variant} id={id}>
|
20
|
+
<Box marginRight={2} flexGrow="1">
|
21
|
+
{children}
|
22
|
+
</Box>
|
23
|
+
<Button variant="additional" size="sm" onClick={onClick}>
|
24
|
+
{buttonText}
|
25
|
+
</Button>
|
26
|
+
</BaseToast>
|
27
|
+
);
|
28
|
+
};
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import { render } from "@testing-library/react";
|
2
|
+
import React from "react";
|
3
|
+
import { axe } from "vitest-axe";
|
4
|
+
import { BaseToast } from "./BaseToast";
|
5
|
+
|
6
|
+
describe("<BaseToast />", () => {
|
7
|
+
it("is accessible in variant success", async () => {
|
8
|
+
const { container } = render(
|
9
|
+
<BaseToast variant="success">Test text</BaseToast>
|
10
|
+
);
|
11
|
+
expect(await axe(container)).toHaveNoViolations();
|
12
|
+
});
|
13
|
+
|
14
|
+
it("is accessible in variant info", async () => {
|
15
|
+
const { container } = render(
|
16
|
+
<BaseToast variant="info">Test text</BaseToast>
|
17
|
+
);
|
18
|
+
expect(await axe(container)).toHaveNoViolations();
|
19
|
+
});
|
20
|
+
|
21
|
+
it("is accessible in variant error", async () => {
|
22
|
+
const { container } = render(
|
23
|
+
<BaseToast variant="error">Test text</BaseToast>
|
24
|
+
);
|
25
|
+
expect(await axe(container)).toHaveNoViolations();
|
26
|
+
});
|
27
|
+
});
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import { Flex, useStyleConfig } from "@chakra-ui/react";
|
2
|
+
import {
|
3
|
+
ErrorOutline24Icon,
|
4
|
+
InformationOutline24Icon,
|
5
|
+
SuccessOutline24Icon,
|
6
|
+
} from "@vygruppen/spor-icon-react";
|
7
|
+
import React from "react";
|
8
|
+
import { createTexts, useTranslation } from "..";
|
9
|
+
|
10
|
+
export type BaseToastProps = {
|
11
|
+
children: React.ReactNode;
|
12
|
+
variant: "success" | "info" | "error";
|
13
|
+
id?: string;
|
14
|
+
};
|
15
|
+
/**
|
16
|
+
* A basic toast component.
|
17
|
+
**/
|
18
|
+
export const BaseToast = ({ children, variant, id }: BaseToastProps) => {
|
19
|
+
const styles = useStyleConfig("Toast", { variant });
|
20
|
+
return (
|
21
|
+
<Flex sx={styles} id={id}>
|
22
|
+
<ToastIcon variant={variant} />
|
23
|
+
{children}
|
24
|
+
</Flex>
|
25
|
+
);
|
26
|
+
};
|
27
|
+
|
28
|
+
type ToastIconProps = Pick<BaseToastProps, "variant">;
|
29
|
+
|
30
|
+
/** Internal component for selecting the correct icon to show */
|
31
|
+
const ToastIcon = ({ variant }: ToastIconProps) => {
|
32
|
+
const Icon = getIcon(variant);
|
33
|
+
const { t } = useTranslation();
|
34
|
+
return (
|
35
|
+
<Icon
|
36
|
+
flexShrink={0}
|
37
|
+
aria-label={t(texts[variant])}
|
38
|
+
marginRight={1}
|
39
|
+
marginY={1.5}
|
40
|
+
color="darkGrey"
|
41
|
+
/>
|
42
|
+
);
|
43
|
+
};
|
44
|
+
|
45
|
+
const getIcon = (variant: BaseToastProps["variant"]) => {
|
46
|
+
switch (variant) {
|
47
|
+
case "info":
|
48
|
+
return InformationOutline24Icon;
|
49
|
+
case "success":
|
50
|
+
return SuccessOutline24Icon;
|
51
|
+
case "error":
|
52
|
+
return ErrorOutline24Icon;
|
53
|
+
}
|
54
|
+
};
|
55
|
+
|
56
|
+
const texts = createTexts({
|
57
|
+
info: {
|
58
|
+
nb: "Informasjon",
|
59
|
+
nn: "Informasjon",
|
60
|
+
sv: "Information",
|
61
|
+
en: "Information",
|
62
|
+
},
|
63
|
+
success: {
|
64
|
+
nb: "Suksess",
|
65
|
+
nn: "Suksess",
|
66
|
+
sv: "Succé",
|
67
|
+
en: "Success",
|
68
|
+
},
|
69
|
+
error: {
|
70
|
+
nb: "Feil",
|
71
|
+
nn: "Feil",
|
72
|
+
sv: "Error",
|
73
|
+
en: "Error",
|
74
|
+
},
|
75
|
+
});
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { render } from "@testing-library/react";
|
2
|
+
import React from "react";
|
3
|
+
import { vi } from "vitest";
|
4
|
+
import { ClosableToast } from "./ClosableToast";
|
5
|
+
|
6
|
+
describe("<ClosableToast />", () => {
|
7
|
+
it("renders a button", async () => {
|
8
|
+
const handleClick = vi.fn();
|
9
|
+
const { getByRole } = render(
|
10
|
+
<ClosableToast variant="success" onClose={handleClick}>
|
11
|
+
Test text
|
12
|
+
</ClosableToast>
|
13
|
+
);
|
14
|
+
getByRole("button").click();
|
15
|
+
expect(handleClick).toHaveBeenCalled();
|
16
|
+
});
|
17
|
+
});
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import { Box, useMultiStyleConfig } from "@chakra-ui/react";
|
2
|
+
import { CloseFill18Icon } from "@vygruppen/spor-icon-react";
|
3
|
+
import React from "react";
|
4
|
+
import { IconButton, createTexts, useTranslation } from "..";
|
5
|
+
import { BaseToast, BaseToastProps } from "./BaseToast";
|
6
|
+
|
7
|
+
type ClosableToastProps = BaseToastProps & {
|
8
|
+
onClose: () => void;
|
9
|
+
};
|
10
|
+
/** A closable toast */
|
11
|
+
export const ClosableToast = ({
|
12
|
+
children,
|
13
|
+
onClose,
|
14
|
+
variant,
|
15
|
+
id,
|
16
|
+
}: ClosableToastProps) => {
|
17
|
+
const styles = useMultiStyleConfig("Toast", { variant });
|
18
|
+
const { t } = useTranslation();
|
19
|
+
return (
|
20
|
+
<BaseToast variant={variant} id={id}>
|
21
|
+
<Box flexGrow="1">{children}</Box>
|
22
|
+
<IconButton
|
23
|
+
sx={styles.dismissButton}
|
24
|
+
variant="ghost"
|
25
|
+
aria-label={t(texts.dismiss)}
|
26
|
+
icon={<CloseFill18Icon />}
|
27
|
+
onClick={onClose}
|
28
|
+
/>
|
29
|
+
</BaseToast>
|
30
|
+
);
|
31
|
+
};
|
32
|
+
|
33
|
+
const texts = createTexts({
|
34
|
+
dismiss: {
|
35
|
+
nb: "Lukk",
|
36
|
+
nn: "Lukk",
|
37
|
+
sv: "Dölj",
|
38
|
+
en: "Dismiss",
|
39
|
+
},
|
40
|
+
});
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from "./useToast";
|
@@ -0,0 +1,99 @@
|
|
1
|
+
import { useToast as useChakraToast } from "@chakra-ui/react";
|
2
|
+
import React, { useCallback } from "react";
|
3
|
+
import { ActionToast } from "./ActionToast";
|
4
|
+
import { BaseToast, BaseToastProps } from "./BaseToast";
|
5
|
+
import { ClosableToast } from "./ClosableToast";
|
6
|
+
|
7
|
+
type ClosableToastOptions = {
|
8
|
+
isClosable: true;
|
9
|
+
/** Callback for when the close button is clicked */
|
10
|
+
onClose?: () => void;
|
11
|
+
};
|
12
|
+
|
13
|
+
type ActionToastOptions = {
|
14
|
+
isClosable?: false;
|
15
|
+
/** Callback for when the button is clicked */
|
16
|
+
onClick: () => void;
|
17
|
+
/** The button text */
|
18
|
+
buttonText: string;
|
19
|
+
};
|
20
|
+
|
21
|
+
type BaseToastOptions = {
|
22
|
+
/** How the toast looks */
|
23
|
+
variant: BaseToastProps["variant"];
|
24
|
+
/** The content of the toast. Keep it short! */
|
25
|
+
text: string;
|
26
|
+
/**
|
27
|
+
* Number of milliseconds to show the toast.
|
28
|
+
*
|
29
|
+
* Defaults to 6000.
|
30
|
+
*/
|
31
|
+
duration?: number;
|
32
|
+
};
|
33
|
+
|
34
|
+
export type ToastOptions =
|
35
|
+
| BaseToastOptions & (ClosableToastOptions | ActionToastOptions | {});
|
36
|
+
|
37
|
+
/**
|
38
|
+
* Creates a function that can trigger toasts
|
39
|
+
*
|
40
|
+
* ```tsx
|
41
|
+
* const toast = useToast();
|
42
|
+
* return (
|
43
|
+
* <Button
|
44
|
+
* onClick={() =>
|
45
|
+
* toast({ text: "Hello world", variant: "info" })
|
46
|
+
* }
|
47
|
+
* >
|
48
|
+
* Click me
|
49
|
+
* </Button>
|
50
|
+
* ```
|
51
|
+
*/
|
52
|
+
export const useToast = () => {
|
53
|
+
const toast = useChakraToast();
|
54
|
+
const wrappedToast = useCallback((opts: ToastOptions) => {
|
55
|
+
const Toast = getToastComponent(opts);
|
56
|
+
toast({
|
57
|
+
...opts,
|
58
|
+
render: Toast,
|
59
|
+
});
|
60
|
+
}, []);
|
61
|
+
return wrappedToast;
|
62
|
+
};
|
63
|
+
|
64
|
+
type RenderArgs = { onClose: () => void; id: string };
|
65
|
+
const getToastComponent = (opts: ToastOptions) => {
|
66
|
+
if ("isClosable" in opts && opts.isClosable) {
|
67
|
+
return ({ onClose, id }: RenderArgs) => (
|
68
|
+
<ClosableToast
|
69
|
+
id={id}
|
70
|
+
variant={opts.variant}
|
71
|
+
onClose={() => {
|
72
|
+
if (opts.onClose) {
|
73
|
+
opts.onClose();
|
74
|
+
}
|
75
|
+
onClose();
|
76
|
+
}}
|
77
|
+
>
|
78
|
+
{opts.text}
|
79
|
+
</ClosableToast>
|
80
|
+
);
|
81
|
+
}
|
82
|
+
if ("buttonText" in opts) {
|
83
|
+
return ({ id }: RenderArgs) => (
|
84
|
+
<ActionToast
|
85
|
+
id={id}
|
86
|
+
variant={opts.variant}
|
87
|
+
buttonText={opts.buttonText}
|
88
|
+
onClick={opts.onClick}
|
89
|
+
>
|
90
|
+
{opts.text}
|
91
|
+
</ActionToast>
|
92
|
+
);
|
93
|
+
}
|
94
|
+
return ({ id }: RenderArgs) => (
|
95
|
+
<BaseToast id={id} variant={opts.variant}>
|
96
|
+
{opts.text}
|
97
|
+
</BaseToast>
|
98
|
+
);
|
99
|
+
};
|
@@ -0,0 +1,68 @@
|
|
1
|
+
import {
|
2
|
+
As,
|
3
|
+
Badge as ChakraBadge,
|
4
|
+
BadgeProps as ChakraBadgeProps,
|
5
|
+
forwardRef,
|
6
|
+
} from "@chakra-ui/react";
|
7
|
+
import React from "react";
|
8
|
+
|
9
|
+
export type BadgeProps = Omit<
|
10
|
+
ChakraBadgeProps,
|
11
|
+
"variant" | "colorScheme" | "size"
|
12
|
+
> & {
|
13
|
+
/**
|
14
|
+
* The color scheme of the badge.
|
15
|
+
*/
|
16
|
+
colorScheme?:
|
17
|
+
| "yellow"
|
18
|
+
| "light-yellow"
|
19
|
+
| "red"
|
20
|
+
| "light-green"
|
21
|
+
| "dark-green"
|
22
|
+
| "orange"
|
23
|
+
| "light-blue"
|
24
|
+
| "dark-blue"
|
25
|
+
| "grey"
|
26
|
+
| "white";
|
27
|
+
/** The design variant – "solid" by default.
|
28
|
+
*
|
29
|
+
* Can be specified as `outline` to render a border around the badge. */
|
30
|
+
variant?: "solid" | "outline";
|
31
|
+
/** Optional badge icon. Will be rendered to the left of the text.
|
32
|
+
*
|
33
|
+
* Make sure you pass in the 18px version of the icon.
|
34
|
+
*/
|
35
|
+
icon?: React.ReactElement;
|
36
|
+
};
|
37
|
+
/**
|
38
|
+
* Shows some additional information about the component it's used within.
|
39
|
+
*
|
40
|
+
* You have to specify some content (icons should be placed to the left, if present), and a colorScheme.
|
41
|
+
*
|
42
|
+
* ```tsx
|
43
|
+
* <Badge colorScheme="light-green">Hello</Badge>
|
44
|
+
* ```
|
45
|
+
*
|
46
|
+
* If you want an icon, pass it in through the `icon` prop:
|
47
|
+
*
|
48
|
+
* ```tsx
|
49
|
+
* <Badge colorScheme="light-blue" icon={<InformationOutline18Icon />}>
|
50
|
+
* Information
|
51
|
+
* </Badge>
|
52
|
+
* ```
|
53
|
+
*/
|
54
|
+
export const Badge = forwardRef<BadgeProps, As>(
|
55
|
+
({ icon, colorScheme = "grey", children, ...props }, ref) => {
|
56
|
+
return (
|
57
|
+
<ChakraBadge
|
58
|
+
colorScheme={colorScheme}
|
59
|
+
{...props}
|
60
|
+
paddingLeft={icon ? 1 : undefined}
|
61
|
+
ref={ref}
|
62
|
+
>
|
63
|
+
{icon && React.cloneElement(icon, { marginRight: 1 })}
|
64
|
+
{children}
|
65
|
+
</ChakraBadge>
|
66
|
+
);
|
67
|
+
}
|
68
|
+
);
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import {
|
2
|
+
As,
|
3
|
+
Code as ChakraCode,
|
4
|
+
CodeProps as ChakraCodeProps,
|
5
|
+
forwardRef,
|
6
|
+
} from "@chakra-ui/react";
|
7
|
+
import React from "react";
|
8
|
+
|
9
|
+
export type CodeProps = ChakraCodeProps & {
|
10
|
+
/**
|
11
|
+
* The color scheme of the inline code.
|
12
|
+
*/
|
13
|
+
colorScheme?:
|
14
|
+
| "yellow"
|
15
|
+
| "light-yellow"
|
16
|
+
| "red"
|
17
|
+
| "green"
|
18
|
+
| "orange"
|
19
|
+
| "blue"
|
20
|
+
| "grey"
|
21
|
+
| "white";
|
22
|
+
/** The design variant – "solid" by default.
|
23
|
+
*
|
24
|
+
* Can be specified as `outline` to render a border around the badge. */
|
25
|
+
variant?: "solid" | "outline";
|
26
|
+
};
|
27
|
+
/**
|
28
|
+
* Shows inline code.
|
29
|
+
*/
|
30
|
+
export const Code = forwardRef<CodeProps, As>((props, ref) => (
|
31
|
+
<ChakraCode {...props} ref={ref} />
|
32
|
+
));
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import { HeadingProps as ChakraHeadingProps, Text } from "@chakra-ui/react";
|
2
|
+
import type tokens from "@vygruppen/spor-design-tokens";
|
3
|
+
import React from "react";
|
4
|
+
|
5
|
+
type TextStyles = keyof typeof tokens.font.style;
|
6
|
+
|
7
|
+
export type HeadingProps = Exclude<ChakraHeadingProps, "textStyle"> & {
|
8
|
+
/** The size and style of the heading */
|
9
|
+
variant?: TextStyles;
|
10
|
+
};
|
11
|
+
/**
|
12
|
+
* Create your own fancy headings with this component.
|
13
|
+
*
|
14
|
+
* You can specify the variant, which is one of "xs", "sm", "md", "lg", "xl-sans", "xs-serif" and "2xl". The default is "xl-sans".
|
15
|
+
*
|
16
|
+
* ```tsx
|
17
|
+
* <Heading variant="2xl">Look at me!</Heading>
|
18
|
+
* ```
|
19
|
+
*
|
20
|
+
* You can also specify what level of heading you want. You do this with the `as` prop. The default is "h2".
|
21
|
+
*
|
22
|
+
* ```tsx
|
23
|
+
* <Heading as="h1">Page heading</Heading>
|
24
|
+
* ```
|
25
|
+
*/
|
26
|
+
export const Heading = ({
|
27
|
+
variant = "xl-display",
|
28
|
+
as = "h2",
|
29
|
+
...props
|
30
|
+
}: any) => {
|
31
|
+
return <Text as={as} textStyle={variant} {...props} />;
|
32
|
+
};
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import {
|
2
|
+
Text as ChakraText,
|
3
|
+
TextProps as ChakraTextProps,
|
4
|
+
forwardRef,
|
5
|
+
} from "@chakra-ui/react";
|
6
|
+
import React from "react";
|
7
|
+
|
8
|
+
export type TextProps = Omit<ChakraTextProps, "textStyle"> & {
|
9
|
+
/** The size and style of the text.
|
10
|
+
*
|
11
|
+
* Defaults to "sm" */
|
12
|
+
variant?: ChakraTextProps["textStyle"];
|
13
|
+
};
|
14
|
+
|
15
|
+
/**
|
16
|
+
* A paragraph of text.
|
17
|
+
*
|
18
|
+
* ```tsx
|
19
|
+
* <Text>Welcome to this paragraph of text.</Text>
|
20
|
+
* ```
|
21
|
+
*/
|
22
|
+
export const Text = forwardRef<TextProps, "p">(
|
23
|
+
({ variant = "sm", ...props }, ref) => {
|
24
|
+
return <ChakraText {...props} textStyle={variant} ref={ref} />;
|
25
|
+
}
|
26
|
+
);
|
@@ -0,0 +1,23 @@
|
|
1
|
+
/** This file works as a proxy for all Chakra UI exports */
|
2
|
+
export {
|
3
|
+
DarkMode,
|
4
|
+
LightMode,
|
5
|
+
useBreakpointValue,
|
6
|
+
useClipboard,
|
7
|
+
useColorMode,
|
8
|
+
useColorModePreference,
|
9
|
+
useColorModeValue,
|
10
|
+
useControllableProp,
|
11
|
+
useDisclosure,
|
12
|
+
useMediaQuery,
|
13
|
+
useMergeRefs,
|
14
|
+
useOutsideClick,
|
15
|
+
usePrefersReducedMotion,
|
16
|
+
useTheme,
|
17
|
+
useToken,
|
18
|
+
} from "@chakra-ui/react";
|
19
|
+
export type {
|
20
|
+
UseClipboardOptions,
|
21
|
+
UseDisclosureProps,
|
22
|
+
UseOutsideClickProps,
|
23
|
+
} from "@chakra-ui/react";
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from "./externals";
|