@vygruppen/spor-react 1.3.3 → 2.0.0

package/src/input/SearchInput.tsx

@@ -0,0 +1,89 @@
+import {
+  Input as ChakraInput,
+  InputProps as ChakraInputProps,
+  IconButton,
+  forwardRef,
+  useFormControlContext,
+} from "@chakra-ui/react";
+import {
+  CloseOutline24Icon,
+  SearchOutline24Icon,
+} from "@vygruppen/spor-icon-react";
+import React, { useId } from "react";
+import { FormLabel, InputGroup, InputLeftElement, InputRightElement } from ".";
+import { createTexts, useTranslation } from "..";
+
+export type SearchInputProps = Exclude<
+  ChakraInputProps,
+  "variant" | "size" | "leftIcon" | "rightIcon"
+> & {
+  /** Optional label. Defaults to the localized version of "search" */
+  label?: string;
+  /** Callback for when the clear button is clicked */
+  onReset?: () => void;
+};
+/** Simple search input component.
+ *
+ * Includes a search icon, a localized label and a reset button.
+ */
+export const SearchInput = forwardRef<SearchInputProps, "input">(
+  ({ label, onReset, ...props }, ref) => {
+    const { t } = useTranslation();
+    const showClearButton = onReset && Boolean(props.value);
+    const formControlProps = useFormControlContext();
+    const autoGeneratedId = useId();
+    const inputId = props.id ?? formControlProps?.id ?? autoGeneratedId;
+    return (
+      <InputGroup position="relative">
+        <InputLeftElement>
+          <SearchOutline24Icon />
+        </InputLeftElement>
+        <ChakraInput
+          pl={7}
+          pr={7}
+          {...props}
+          id={inputId}
+          type="search"
+          css={{
+            "&::-webkit-search-cancel-button": {
+              WebkitAppearance: "none",
+            },
+          }}
+          ref={ref}
+          placeholder=" " // This is needed to make the label work as expected
+        />
+        <FormLabel htmlFor={inputId} pointerEvents="none">
+          {label ?? t(texts.label)}
+        </FormLabel>
+        {showClearButton && (
+          <InputRightElement width="fit-content">
+            <IconButton
+              variant="ghost"
+              type="button"
+              size="sm"
+              mr={1}
+              aria-label={t(texts.reset)}
+              icon={<CloseOutline24Icon />}
+              onClick={onReset}
+            />
+          </InputRightElement>
+        )}
+      </InputGroup>
+    );
+  }
+);
+
+const texts = createTexts({
+  label: {
+    nb: "Søk",
+    nn: "Søk",
+    sv: "Sök",
+    en: "Search",
+  },
+  reset: {
+    nb: "Tøm søkefeltet",
+    nn: "Tøm søkefelt",
+    sv: "Rensa sökrutan",
+    en: "Reset search field",
+  },
+});

package/src/input/Switch.tsx

@@ -0,0 +1,40 @@
+import {
+  Switch as ChakraSwitch,
+  SwitchProps as ChakraSwitchProps,
+  forwardRef,
+} from "@chakra-ui/react";
+import React from "react";
+
+export type SwitchProps = Exclude<
+  ChakraSwitchProps,
+  "colorScheme" | "variant"
+> & {
+  size?: "sm" | "md" | "lg";
+};
+
+/**
+ * A switch lets you toggle between on and off, yes and no. It's an alternative to a checkbox.
+ *
+ * You can use a Switch component inside of a `FormControl` with an associated `FormLabel`:
+ *
+ * ```tsx
+ * <FormControl>
+ *   <FormLabel>Enable alerts?</FormLabel>
+ *   <Switch />
+ * </FormControl>
+ * ```
+ *
+ * Switches are available in three different sizes - `sm`, `md` and `lg`. There are also two variants - `solid` and `outline`.
+ *
+ * ```tsx
+ * <FormControl>
+ *   <FormLabel>Enable alerts?</FormLabel>
+ *   <Switch variant="outline" size="lg" />
+ * </FormControl>
+ * ```
+ */
+export const Switch = forwardRef<SwitchProps, "input">(
+  ({ size = "md", ...props }: SwitchProps, ref) => {
+    return <ChakraSwitch variant="solid" size={size} {...props} ref={ref} />;
+  }
+);

package/src/input/Textarea.tsx

@@ -0,0 +1,98 @@
+import {
+  Box,
+  FormLabel,
+  forwardRef,
+  Textarea as ChakraTextarea,
+  TextareaProps as ChakraTextareaProps,
+  useFormControlContext,
+} from "@chakra-ui/react";
+import React, { useId } from "react";
+
+export type TextareaProps = Exclude<ChakraTextareaProps, "variant" | "size"> & {
+  label: string;
+};
+/**
+ * Text area that works with the `FormControl` component.
+ *
+ * Note that it requires you to pass a label.
+ *
+ * ```tsx
+ * <FormControl>
+ *   <Textarea label="E-mail" />
+ * </FormControl>
+ * ```
+ */
+export const Textarea = forwardRef<TextareaProps, "textarea">((props, ref) => {
+  const {
+    spacingProps,
+    remainingProps: { label, ...rest },
+  } = getSpacingProps(props);
+  const formControlProps = useFormControlContext();
+  const fallbackId = `textarea-${useId()}`;
+  const inputId = props.id ?? formControlProps?.id ?? fallbackId;
+  return (
+    <Box {...spacingProps}>
+      <FormLabel htmlFor={inputId}>{label}</FormLabel>
+      <ChakraTextarea {...rest} id={inputId} ref={ref} />
+    </Box>
+  );
+});
+
+function getSpacingProps<T extends TextareaProps>(props: T) {
+  const {
+    mt,
+    mr,
+    mb,
+    ml,
+    mx,
+    my,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    marginX,
+    marginY,
+    pt,
+    pr,
+    pb,
+    pl,
+    px,
+    py,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    paddingX,
+    paddingY,
+    ...remainingProps
+  } = props;
+  return {
+    spacingProps: {
+      mt,
+      mr,
+      mb,
+      ml,
+      mx,
+      my,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      marginX,
+      marginY,
+      pt,
+      pr,
+      pb,
+      pl,
+      px,
+      py,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+      paddingX,
+      paddingY,
+    },
+    remainingProps,
+  };
+}

package/src/input/index.tsx

@@ -0,0 +1,20 @@
+export { FormHelperText, InputGroup } from "@chakra-ui/react";
+export type { InputGroupProps } from "@chakra-ui/react";
+export * from "./CardSelect";
+export * from "./Checkbox";
+export * from "./CheckboxGroup";
+export * from "./ChoiceChip";
+export * from "./FormControl";
+export * from "./FormErrorMessage";
+export * from "./FormLabel";
+export * from "./InfoSelect";
+export * from "./Input";
+export * from "./InputElement";
+export * from "./ListBox";
+export * from "./NativeSelect";
+export * from "./PasswordInput";
+export * from "./Radio";
+export * from "./RadioGroup";
+export * from "./SearchInput";
+export * from "./Switch";
+export * from "./Textarea";

package/src/layout/Divider.tsx

@@ -0,0 +1,26 @@
+import { As, Box, BoxProps, forwardRef } from "@chakra-ui/react";
+import React from "react";
+
+export type DividerProps = BoxProps;
+/** A dividing line, used to divide content.
+ *
+ * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
+ *
+ * ```tsx
+ * <Divider mt={4} mb={6} />
+ * ```
+ */
+export const Divider = forwardRef<BoxProps, As>((props, ref) => {
+  return (
+    <Box
+      as="hr"
+      height="2px"
+      border="0"
+      borderRadius="1px"
+      backgroundColor="blackAlpha.200"
+      width="100%"
+      {...props}
+      ref={ref}
+    />
+  );
+});

package/src/layout/Stack.tsx

@@ -0,0 +1,42 @@
+import {
+  Stack as ChakraStack,
+  StackProps as ChakraStackProps,
+  forwardRef,
+} from "@chakra-ui/react";
+import React from "react";
+
+export type StackProps = Exclude<ChakraStackProps, "direction"> & {
+  flexDirection?: ChakraStackProps["direction"];
+};
+/**
+ * Adds consistent spacing between elements
+ *
+ * ```tsx
+ * <Stack>
+ *   <Text>Here's a paragraph</Text>
+ *   <Text>Here's another perfectly spaced paragraph</Text>
+ * </Stack>
+ * ```
+ *
+ * By default, the stack will be a column. You can change this by setting the `flexDirection` prop to any valid flex direction:
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <Checkbox>Here's a checkbox</Checkbox>
+ *   <Checkbox>Here's another checkbox, almost right next to the first one</Checkbox>
+ * </Stack>
+ * ```
+ *
+ * You can specify the spacing between elements with the `spacing` prop:
+ *
+ * ```tsx
+ * <Stack spacing={4}>
+ *   <Card>Here's one card</Card>
+ *   <Card>Here's another card, with a lot of space between it</Card>
+ * </Stack>
+ * ```
+ */
+export const Stack = forwardRef<StackProps, "div">(
+  ({ flexDirection, ...props }, ref) => {
+    return <ChakraStack {...props} direction={flexDirection} ref={ref} />;
+  }
+);

package/src/layout/index.tsx

@@ -0,0 +1,28 @@
+export {
+  Box,
+  Center,
+  Container,
+  Flex,
+  Grid,
+  GridItem,
+  HStack,
+  SimpleGrid,
+  Spacer,
+  VStack,
+  Wrap,
+  WrapItem,
+} from "@chakra-ui/react";
+export type {
+  BoxProps,
+  CenterProps,
+  ContainerProps,
+  FlexProps,
+  GridItemProps,
+  GridProps,
+  SimpleGridProps,
+  SpacerProps,
+  WrapItemProps,
+  WrapProps,
+} from "@chakra-ui/react";
+export * from "./Divider";
+export * from "./Stack";

package/src/linjetag/InfoTag.tsx

@@ -0,0 +1,54 @@
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import React from "react";
+import { LineIcon } from "./LineIcon";
+import type { TagProps } from "./types";
+
+export type InfoTagProps = TagProps;
+
+/**
+ * An info tag component.
+ *
+ * Shows a line icon, a title and an optional description.
+ *
+ * ```tsx
+ * <InfoTag variant="subway" title="3" description="Ringen" />
+ * ```
+ * They support three different sizes – `sm`, `md` and `lg`.
+ *
+ * ```tsx
+ * <InfoTag
+ *   variant="subway"
+ *   size="lg"
+ *   title="3"
+ *   description="Ringen"
+ * />
+ * ```
+ *
+ * @see https://spor.vy.no/komponenter/linjetags
+ */
+export const InfoTag = ({
+  variant,
+  size = "md",
+  title,
+  description,
+}: InfoTagProps) => {
+  const styles = useMultiStyleConfig("InfoTag", { variant, size });
+  return (
+    <Box sx={styles.container}>
+      <LineIcon variant={variant} size={size} sx={styles.iconContainer} />
+      <Box sx={styles.textContainer}>
+        {title && (
+          <Box as="span" sx={styles.title}>
+            {title}
+          </Box>
+        )}
+        {title && description && " "}
+        {description && (
+          <Box as="span" sx={styles.description}>
+            {description}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};

package/src/linjetag/LineIcon.tsx

@@ -0,0 +1,44 @@
+import { Box, BoxProps, useMultiStyleConfig } from "@chakra-ui/react";
+import React from "react";
+import { getCorrectIcon } from "./icons";
+import { TagProps } from "./types";
+
+export type LineIconProps = BoxProps & {
+  variant: TagProps["variant"];
+  size: TagProps["size"];
+};
+
+/**
+ * A line icon component.
+ *
+ * Shows a line icon with the correct color scheme.
+ *
+ * ```tsx
+ * <LineIcon variant="subway" />
+ * ```
+ *
+ * They support three different sizes – `sm`, `md` and `lg`.
+ *
+ * ```tsx
+ * <LineIcon variant="subway" size="lg" />
+ * ```
+ *
+ * @see https://spor.vy.no/komponenter/linjetags
+ */
+export const LineIcon = ({
+  variant,
+  size = "md",
+  sx,
+  ...rest
+}: LineIconProps) => {
+  const styles = useMultiStyleConfig("LineIcon", { variant, size });
+  const Icon: any = getCorrectIcon({ variant, size });
+  if (!Icon) {
+    return null;
+  }
+  return (
+    <Box sx={{ ...styles.iconContainer, ...sx }} {...rest}>
+      <Icon sx={styles.icon} />
+    </Box>
+  );
+};

package/src/linjetag/TravelTag.tsx

@@ -0,0 +1,121 @@
+import {
+  As,
+  Box,
+  BoxProps,
+  forwardRef,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import {
+  ErrorFill18Icon,
+  ErrorFill24Icon,
+  InformationFill18Icon,
+  InformationFill24Icon,
+  WarningFill18Icon,
+  WarningFill24Icon,
+} from "@vygruppen/spor-icon-react";
+import React from "react";
+import { LineIcon } from "./LineIcon";
+import type { TagProps } from "./types";
+
+export type TravelTagProps = TagProps &
+  BoxProps & {
+    deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
+    isDisabled?: boolean;
+  };
+
+/**
+ * A travel tag component.
+ *
+ * Shows a line icon, a title and an optional description.
+ *
+ * ```tsx
+ * <TravelTag variant="subway" title="3" description="Ringen" />
+ * ```
+ *
+ * They support three different sizes – `sm`, `md` and `lg`.
+ *
+ * You can also render them with a deviation level to indicate an extra focus:
+ *
+ * ```tsx
+ * <TravelTag
+ *   variant="subway"
+ *   title="3"
+ *   description="Ringen"
+ *   size="lg"
+ *   deviationLevel="critical"
+ * />
+ * ```
+ *
+ * Travel tags can be clickable by passing an `as="button"` prop. They can also be disabled.
+ *
+ * ```tsx
+ * <TravelTag
+ *  as="button"
+ *  onClick={handleClick}
+ *  variant="subway"
+ *  title="3"
+ *  description="Ringen"
+ * />
+ * ```
+ *
+ * @see https://spor.vy.no/komponenter/linjetags
+ */
+export const TravelTag = forwardRef<TravelTagProps, As>(
+  (
+    {
+      variant,
+      size = "md",
+      deviationLevel = "none",
+      title,
+      description,
+      isDisabled,
+      ...rest
+    },
+    ref
+  ) => {
+    const styles = useMultiStyleConfig("TravelTag", {
+      variant,
+      size,
+      deviationLevel,
+    });
+
+    const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size });
+
+    return (
+      <Box sx={styles.container} aria-disabled={isDisabled} ref={ref} {...rest}>
+        <LineIcon variant={variant} size={size} sx={styles.iconContainer} />
+        <Box sx={styles.textContainer}>
+          {title && (
+            <Box as="span" sx={styles.title}>
+              {title}
+            </Box>
+          )}
+          {title && description && " "}
+          {description && (
+            <Box as="span" sx={styles.description}>
+              {description}
+            </Box>
+          )}
+        </Box>
+        {DeviationLevelIcon && <DeviationLevelIcon sx={styles.deviationIcon} />}
+      </Box>
+    );
+  }
+);
+
+const getDeviationLevelIcon = ({
+  deviationLevel,
+  size,
+}: Pick<TravelTagProps, "deviationLevel" | "size">) => {
+  switch (deviationLevel) {
+    case "critical":
+      return size === "lg" ? ErrorFill24Icon : ErrorFill18Icon;
+    case "major":
+    case "minor":
+      return size === "lg" ? WarningFill24Icon : WarningFill18Icon;
+    case "info":
+      return size === "lg" ? InformationFill24Icon : InformationFill18Icon;
+    default:
+      return null;
+  }
+};

package/src/linjetag/icons.tsx

@@ -0,0 +1,80 @@
+import { Box } from "@chakra-ui/react";
+import {
+  AltTransportFill18Icon,
+  AltTransportFill24Icon,
+  AltTransportFill30Icon,
+  BusFill18Icon,
+  BusFill24Icon,
+  BusFill30Icon,
+  ExpressBusFill18Icon,
+  ExpressBusFill24Icon,
+  ExpressBusFill30Icon,
+  FerryFill18Icon,
+  FerryFill24Icon,
+  FerryFill30Icon,
+  SubwayFill18Icon,
+  SubwayFill24Icon,
+  SubwayFill30Icon,
+  TrainFill18Icon,
+  TrainFill24Icon,
+  TrainFill30Icon,
+  TramFill18Icon,
+  TramFill24Icon,
+  TramFill30Icon,
+  WalkFill18Icon,
+  WalkFill24Icon,
+  WalkFill30Icon,
+} from "@vygruppen/spor-icon-react";
+import React from "react";
+import type { Size, Variant } from "./types";
+
+const icons: Record<Variant, Record<Size, React.ComponentType>> = {
+  "local-train": {
+    sm: TrainFill18Icon,
+    md: TrainFill24Icon,
+    lg: TrainFill30Icon,
+  },
+  "region-train": {
+    sm: TrainFill18Icon,
+    md: TrainFill24Icon,
+    lg: TrainFill30Icon,
+  },
+  "region-express-train": {
+    sm: TrainFill18Icon,
+    md: TrainFill24Icon,
+    lg: TrainFill30Icon,
+  },
+  "long-distance-train": {
+    sm: TrainFill18Icon,
+    md: TrainFill24Icon,
+    lg: TrainFill30Icon,
+  },
+  "airport-express-train": {
+    sm: TrainFill18Icon,
+    md: TrainFill24Icon,
+    lg: TrainFill30Icon,
+  },
+  "vy-bus": {
+    sm: ExpressBusFill18Icon,
+    md: ExpressBusFill24Icon,
+    lg: ExpressBusFill30Icon,
+  },
+  "local-bus": { sm: BusFill18Icon, md: BusFill24Icon, lg: BusFill30Icon },
+  ferry: { sm: FerryFill18Icon, md: FerryFill24Icon, lg: FerryFill30Icon },
+  subway: { sm: SubwayFill18Icon, md: SubwayFill24Icon, lg: SubwayFill30Icon },
+  tram: { sm: TramFill18Icon, md: TramFill24Icon, lg: TramFill30Icon },
+  "alt-transport": {
+    sm: AltTransportFill18Icon,
+    md: AltTransportFill24Icon,
+    lg: AltTransportFill30Icon,
+  },
+  walk: { sm: WalkFill18Icon, md: WalkFill24Icon, lg: WalkFill30Icon },
+};
+
+type GetCorrectIconArgs = {
+  variant: Variant;
+  size: Size;
+};
+export const getCorrectIcon = ({ variant, size }: GetCorrectIconArgs) => {
+  return icons[variant]?.[size] ?? Box;
+};

package/src/linjetag/index.tsx

@@ -0,0 +1,3 @@
+export * from "./InfoTag";
+export * from "./LineIcon";
+export * from "./TravelTag";

package/src/linjetag/types.d.ts

@@ -0,0 +1,24 @@
+export type Variant =
+  | "local-train"
+  | "region-train"
+  | "region-express-train"
+  | "long-distance-train"
+  | "airport-express-train"
+  | "vy-bus"
+  | "local-bus"
+  | "ferry"
+  | "subway"
+  | "tram"
+  | "alt-transport"
+  | "walk";
+
+export type Size = "sm" | "md" | "lg";
+
+export type TagType = "info" | "travel";
+
+export type TagProps = {
+  variant: Variant;
+  size: Size;
+  title: string;
+  description?: string;
+};