@vygruppen/spor-react 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -21,9 +21,9 @@
     "@chakra-ui/theme-tools": "^2.0.12",
     "@internationalized/date": "^3.0.1",
     "@leile/lobo-t": "^1.0.5",
-    "@vygruppen/spor-design-tokens": "latest",
-    "@vygruppen/spor-icon-react": "latest",
-    "@vygruppen/spor-loader": "latest",
+    "@vygruppen/spor-design-tokens": "*",
+    "@vygruppen/spor-icon-react": "*",
+    "@vygruppen/spor-loader": "*",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "framer-motion": ">6.0.0",

package/src/datepicker/DateRangePicker.tsx

@@ -32,7 +32,9 @@ import { useCurrentLocale } from "./utils";
 type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
   Pick<BoxProps, "minHeight"> & {
     startLabel?: string;
+    startName?: string;
     endLabel?: string;
+    endName?: string;
     variant: ResponsiveValue<"simple" | "with-trigger">;
   };
 /**
@@ -41,12 +43,14 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
  * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
  *
  * ```tsx
- * <DateRangePicker startLabel="From" endLabel="To" variant="simple" />
+ * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="simple" />
  * ```
  */
 export function DateRangePicker({
   variant,
   minHeight,
+  startName,
+  endName,
   ...props
 }: DateRangePickerProps) {
   const formControlProps = useFormControlContext();
@@ -128,6 +132,7 @@ export function DateRangePicker({
                 )}
                 <DateField
                   {...startFieldProps}
+                  name={startName}
                   label={props.startLabel}
                   labelProps={labelProps}
                 />
@@ -136,6 +141,7 @@ export function DateRangePicker({
                 </Box>
                 <DateField
                   {...endFieldProps}
+                  name={endName}
                   label={props.endLabel}
                   labelProps={labelProps}
                 />

package/src/datepicker/DateTimeSegment.tsx

@@ -31,6 +31,7 @@ export const DateTimeSegment = ({ segment, state }: DateTimeSegmentProps) => {
       textAlign="end"
       outline="none"
       borderRadius="xs"
+      fontSize="mobile.md"
       color={
         segment.isPlaceholder
           ? "dimGrey"

package/src/datepicker/TimePicker.tsx

@@ -124,7 +124,6 @@ export const TimePicker = ({
       variant="simple"
       width="fit-content"
       paddingX={2}
-      paddingY={1}
       alignItems="center"
       justifyContent="space-between"
       gap={2}

package/src/input/AttachedInputs.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Flex, FlexProps } from "..";
+
+type AttachedInputsProps = FlexProps;
+/**
+ * Attaches several inputs together, so that they look like one input.
+ *
+ * ```tsx
+ * <AttachedInputs>
+ *   <Input />
+ *   <NativeSelect>
+ *     <SelectItem />
+ *   </NativeSelect>
+ * </AttachedInputs>
+ * ```
+ */
+export const AttachedInputs = ({
+  flexDirection = "row",
+  ...rest
+}: AttachedInputsProps) => {
+  const attachedStyles = {
+    horizontal: {
+      "> *:first-of-type:not(:last-of-type) [data-attachable]": {
+        borderEndRadius: 0,
+      },
+      "> *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+        borderRadius: 0,
+      },
+      "> *:not(:first-of-type):last-of-type [data-attachable]": {
+        borderStartRadius: 0,
+      },
+    },
+    vertical: {
+      "> *:first-of-type:not(:last-of-type) [data-attachable]": {
+        borderBottomRadius: 0,
+      },
+      "> *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+        borderRadius: 0,
+      },
+      "> *:not(:first-of-type):last-of-type [data-attachable]": {
+        borderTopRadius: 0,
+      },
+    },
+  };
+  const direction = flexDirection === "row" ? "horizontal" : "vertical";
+  return (
+    <Flex
+      role="group"
+      __css={attachedStyles[direction]}
+      display="flex"
+      flexDirection={flexDirection}
+      {...rest}
+    />
+  );
+};

package/src/input/CardSelect.tsx

@@ -110,6 +110,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
           sx={styles.trigger}
           {...buttonProps}
           width={width}
+          data-attachable
         >
           <Flex gap={1.5} alignItems="center">
             {icon}

package/src/input/CountryCodeSelect.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import {
+  BoxProps,
+  InfoSelect,
+  SelectItem,
+  createTexts,
+  useTranslation,
+} from "..";
+
+import { getSupportedCallingCodes } from "awesome-phonenumber";
+
+const callingCodes = getSupportedCallingCodes()
+  .sort((a, b) => Number(a) - Number(b))
+  .map((code) => ({
+    key: `+${code}`,
+    value: `+${code}`,
+  }))
+  .filter((code) => code.key !== "+47"); // We're adding Norway to the top
+callingCodes.unshift({ key: "+47", value: "+47" }); // Norway
+
+type CountryCodeSelectProps = {
+  value: string;
+  onChange: (value: string | number) => void;
+  name: string;
+  width?: BoxProps["width"];
+  height?: BoxProps["height"];
+};
+export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <InfoSelect
+      label={t(texts.countryCode)}
+      isLabelSrOnly={true}
+      items={callingCodes as any}
+      {...props}
+    >
+      {(item) => <SelectItem key={item.key}>{item.key}</SelectItem>}
+    </InfoSelect>
+  );
+};
+
+export default CountryCodeSelect;
+
+const texts = createTexts({
+  countryCode: {
+    nb: "Landkode",
+    nn: "Landskode",
+    en: "Country code",
+    sv: "Landskod",
+  },
+});

package/src/input/FormErrorMessage.tsx

@@ -1,7 +1,7 @@
 import { Box, BoxProps, useFormControlContext } from "@chakra-ui/react";
 import React from "react";
 
-export type FormErrorMessageProps = {
+export type FormErrorMessageProps = BoxProps & {
   /**
    * The error message itself.
    */
@@ -32,7 +32,10 @@ export type FormErrorMessageProps = {
  *
  * @see https://spor.vy.no/komponenter/skjemaelementer
  */
-export const FormErrorMessage = ({ children }: FormErrorMessageProps) => {
+export const FormErrorMessage = ({
+  children,
+  ...boxProps
+}: FormErrorMessageProps) => {
   const formControlContext = useFormControlContext();
   if (!formControlContext) {
     throw new Error(
@@ -60,6 +63,7 @@ export const FormErrorMessage = ({ children }: FormErrorMessageProps) => {
         zIndex="popover"
         maxWidth="50ch"
         {...errorMessageProps}
+        {...boxProps}
       >
         <Arrow position="absolute" top="-0.25em" left="1em" />
         {children}

package/src/input/InfoSelect.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   chakra,
   ResponsiveValue,
+  useFormControlProps,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import {
@@ -15,7 +16,7 @@ import { createTexts, useTranslation } from "../";
 import { ListBox } from "./ListBox";
 import { Popover } from "./Popover";
 
-type InfoSelectProps = {
+type InfoSelectProps<T> = {
   /**
    * Either a render function accepting an item, and returning a <SelectItem />,
    * or a list of <SelectItem />s.
@@ -43,7 +44,7 @@ type InfoSelectProps = {
    * </Select>
    * ```
    **/
-  children: any;
+  children: React.ReactNode | ((item: T) => React.ReactNode);
   /**
    * The items to render
    *
@@ -57,7 +58,7 @@ type InfoSelectProps = {
    * </Select>
    * ```
    */
-  items: any[];
+  items?: T[];
   /** Callback for when something is selected */
   onChange?: (value: string | number) => void;
   value?: string | number;
@@ -74,6 +75,12 @@ type InfoSelectProps = {
   onOpenChange?: (isOpen: boolean) => void;
   /** The label describing the choice */
   label: string;
+  /** Hide the label visually
+   *
+   * Should be used sparingly, as it makes the component less accessible.
+   * Useful for the label is obvious, like a phone number country code select.
+   */
+  isLabelSrOnly?: boolean;
   /** The name of the select element */
   name?: string;
   /**
@@ -87,6 +94,11 @@ type InfoSelectProps = {
    * Defaults to the width of the selected content
    */
   width?: ResponsiveValue<string | number>;
+  /** The height of the select box.
+   *
+   * Defaults to "auto"
+   */
+  height?: ResponsiveValue<string | number>;
   isDisabled?: boolean;
   /** A list of disabled keys.
    *
@@ -99,6 +111,8 @@ type InfoSelectProps = {
    * ```
    **/
   disabledKeys?: string[];
+  /** Whether or not the input is invalid */
+  "aria-invalid"?: boolean;
 };
 /**
  * A styled select component.
@@ -135,21 +149,23 @@ type InfoSelectProps = {
  *
  * @see https://spor.vy.no/komponenter/info-select
  */
-export const InfoSelect = ({
+export function InfoSelect<T extends { key: string }>({
   placeholder,
   width = "100%",
+  height = "auto",
   onChange,
   value,
+  isLabelSrOnly,
   defaultValue,
   ...props
-}: InfoSelectProps) => {
+}: InfoSelectProps<T>) {
   const renamedProps = {
     onSelectionChange: onChange,
     selectedKey: value,
     defaultSelectedKey: defaultValue,
     ...props,
   };
-  const state = useSelectState(renamedProps);
+  const state = useSelectState(renamedProps as any);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
     renamedProps,
@@ -157,9 +173,13 @@ export const InfoSelect = ({
     triggerRef
   );
 
-  const styles = useMultiStyleConfig("InfoSelect", { isOpen: state.isOpen });
+  const styles = useMultiStyleConfig("InfoSelect", {
+    isOpen: state.isOpen,
+    isLabelSrOnly,
+  });
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t } = useTranslation();
+  const formControl = useFormControlProps(props);
 
   return (
     <Box sx={styles.container}>
@@ -179,6 +199,10 @@ export const InfoSelect = ({
         sx={styles.button}
         {...buttonProps}
         width={width}
+        height={height}
+        data-attachable
+        aria-invalid={formControl.isInvalid}
+        aria-describedby={formControl["aria-describedby"]}
       >
         <Box {...valueProps}>
           {state.selectedItem
@@ -192,12 +216,16 @@ export const InfoSelect = ({
 
       {state.isOpen && (
         <Popover state={state} triggerRef={triggerRef}>
-          <ListBox listBoxOptions={menuProps} state={state} borderBottomRadius="sm" />
+          <ListBox
+            listBoxOptions={menuProps}
+            state={state}
+            borderBottomRadius="sm"
+          />
         </Popover>
       )}
     </Box>
   );
-};
+}
 
 const texts = createTexts({
   selectAnOption: {

package/src/input/Input.tsx

@@ -1,11 +1,11 @@
 import {
-  FormLabel,
-  forwardRef,
   Input as ChakraInput,
+  InputProps as ChakraInputProps,
+  FormLabel,
   InputGroup,
   InputLeftElement,
-  InputProps as ChakraInputProps,
   InputRightElement,
+  forwardRef,
   useFormControlContext,
 } from "@chakra-ui/react";
 import React, { useId } from "react";
@@ -42,8 +42,9 @@ export const Input = forwardRef<InputProps, "input">(
       <InputGroup position="relative">
         {leftIcon && <InputLeftElement>{leftIcon}</InputLeftElement>}
         <ChakraInput
-          pl={leftIcon ? 7 : undefined}
-          pr={rightIcon ? 7 : undefined}
+          data-attachable
+          paddingLeft={leftIcon ? 7 : undefined}
+          paddingRight={rightIcon ? 7 : undefined}
           {...props}
           id={inputId}
           ref={ref}

package/src/input/NativeSelect.tsx

@@ -30,7 +30,12 @@ export const NativeSelect = forwardRef<NativeSelectProps, "select">(
     const styles = useMultiStyleConfig("Select", props);
     return (
       <FormControl>
-        <ChakraSelect {...props} rootProps={{ __css: styles.root }} ref={ref} />
+        <ChakraSelect
+          data-attachable
+          {...props}
+          rootProps={{ __css: styles.root }}
+          ref={ref}
+        />
         {label && <FormLabel>{label}</FormLabel>}
       </FormControl>
     );

package/src/input/PasswordInput.tsx

@@ -34,6 +34,7 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
           paddingRight={10}
           paddingLeft={leftIcon ? 7 : undefined}
           ref={ref}
+          data-attachable
         />
         <FormLabel htmlFor={inputId} pointerEvents="none">
           {label}

package/src/input/PhoneNumberInput.tsx

@@ -0,0 +1,113 @@
+import {
+  As,
+  BoxProps,
+  forwardRef,
+  useControllableState,
+} from "@chakra-ui/react";
+import React, { Suspense } from "react";
+import { InfoSelect, Input, SelectItem, createTexts, useTranslation } from "..";
+import { AttachedInputs } from "./AttachedInputs";
+
+type CountryCodeAndPhoneNumber = {
+  countryCode: string;
+  phoneNumber: string;
+};
+type PhoneNumberInputProps = BoxProps & {
+  /** The root name.
+   *
+   * Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number`, respectively
+   */
+  name?: string;
+  /** Callback for when the country code or phone number changes */
+  onChange?: (change: CountryCodeAndPhoneNumber) => void;
+  /** The optional value of the country code and phone number */
+  value?: CountryCodeAndPhoneNumber;
+};
+/**
+ * A component for entering phone numbers.
+ *
+ * ```tsx
+ * <PhoneNumberInput name="phone" />
+ * ```
+ *
+ * > Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number`, respectively
+ *
+ * The field can be controlled as well:
+ * ```tsx
+ * <PhoneNumberInput
+ *   value={{ countryCode: '+47', phoneNumber: '81549300' }}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
+  (
+    { name, value: externalValue, onChange: externalOnChange, ...boxProps },
+    ref
+  ) => {
+    const { t } = useTranslation();
+    const [value, onChange] = useControllableState({
+      value: externalValue,
+      onChange: externalOnChange,
+      defaultValue: {
+        countryCode: "+47",
+        phoneNumber: "",
+      },
+    });
+    return (
+      <AttachedInputs {...boxProps}>
+        <Suspense
+          fallback={
+            <InfoSelect
+              isLabelSrOnly
+              label=""
+              width="6.25rem"
+              height="100%"
+              value="+47"
+            >
+              <SelectItem key="+47">+47</SelectItem>
+            </InfoSelect>
+          }
+        >
+          <LazyCountryCodeSelect
+            value={value.countryCode}
+            onChange={(countryCode) =>
+              onChange({
+                countryCode: countryCode as string,
+                phoneNumber: value.phoneNumber,
+              })
+            }
+            name={name ? `${name}-country-code` : "country-code"}
+            height="100%"
+            width="6.25rem"
+          />
+        </Suspense>
+        <Input
+          ref={ref}
+          label={t(texts.phoneNumber)}
+          value={value.phoneNumber}
+          name={name ? `${name}-phone-number` : "phone-number"}
+          onChange={(e) =>
+            onChange({
+              countryCode: value.countryCode,
+              phoneNumber: e.target.value,
+            })
+          }
+          position="relative"
+          left="-1px" // Makes the borders overlap
+        />
+      </AttachedInputs>
+    );
+  }
+);
+
+const texts = createTexts({
+  phoneNumber: {
+    nb: "Telefonnummer",
+    nn: "Telefonnummer",
+    en: "Phone number",
+    sv: "Telefonnummer",
+  },
+});
+
+const LazyCountryCodeSelect = React.lazy(() => import("./CountryCodeSelect"));

package/src/input/SearchInput.tsx

@@ -51,6 +51,7 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
           }}
           ref={ref}
           placeholder=" " // This is needed to make the label work as expected
+          data-attachable
         />
         <FormLabel htmlFor={inputId} pointerEvents="none">
           {label ?? t(texts.label)}

package/src/input/index.tsx

@@ -1,5 +1,6 @@
 export { FormHelperText, InputGroup } from "@chakra-ui/react";
 export type { InputGroupProps } from "@chakra-ui/react";
+export * from "./AttachedInputs";
 export * from "./CardSelect";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
@@ -13,6 +14,7 @@ export * from "./InputElement";
 export * from "./ListBox";
 export * from "./NativeSelect";
 export * from "./PasswordInput";
+export * from "./PhoneNumberInput";
 export * from "./Radio";
 export * from "./RadioGroup";
 export * from "./SearchInput";

package/src/theme/components/datepicker.ts

@@ -25,7 +25,6 @@ const config = helpers.defineMultiStyleConfig({
       display: "flex",
       flex: 1,
       paddingY: 0.5,
-      minHeight: 64,
       alignItems: "center",
       _hover: {
         boxShadow: getBoxShadowString({

package/src/theme/components/info-select.ts

@@ -1,9 +1,9 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
-import { colors } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
+import { srOnly } from "../utils/sr-utils";
 
 const parts = anatomy("InfoSelect").parts(
   "container",
@@ -19,6 +19,7 @@ const config = helpers.defineMultiStyleConfig({
     container: {},
     label: {
       position: "relative",
+      ...(props.isLabelSrOnly ? srOnly : {}),
     },
     button: {
       appearance: "none",
@@ -29,15 +30,13 @@ const config = helpers.defineMultiStyleConfig({
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
+      fontSize: "mobile.md",
       boxShadow: getBoxShadowString({
-        borderColor: mode(
-          colors.blackAlpha[400],
-          colors.whiteAlpha[400]
-        )(props),
+        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       }),
       _hover: {
         boxShadow: getBoxShadowString({
-          borderColor: "darkGrey",
+          borderColor: mode("darkGrey", "whiteAlpha.600")(props),
           borderWidth: 2,
         }),
       },
@@ -50,7 +49,9 @@ const config = helpers.defineMultiStyleConfig({
           outline: "none",
         },
         notFocus: {
-          boxShadow: getBoxShadowString({ borderColor: "darkGrey" }),
+          boxShadow: getBoxShadowString({
+            borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+          }),
         },
       }),
       _disabled: {

package/src/theme/components/input.ts

@@ -1,6 +1,6 @@
 import { inputAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { colors } from "../foundations";
+import { mode } from "@chakra-ui/theme-tools";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
 
@@ -13,19 +13,21 @@ const config = helpers.defineMultiStyleConfig({
       width: "100%",
       outline: "none",
       border: 0,
-      backgroundColor: "white",
+      backgroundColor: mode("white", "darkGrey")(props),
       borderRadius: "sm",
       transitionProperty: "common",
       transitionDuration: "fast",
       position: "relative",
       px: 3,
       height: "54px",
-      fontSize: "18px",
+      fontSize: "mobile.md",
 
-      boxShadow: getBoxShadowString({ borderColor: colors.blackAlpha[400] }),
+      boxShadow: getBoxShadowString({
+        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      }),
       _hover: {
         boxShadow: getBoxShadowString({
-          borderColor: "darkGrey",
+          borderColor: mode("darkGrey", "whiteAlpha.600")(props),
           borderWidth: 2,
         }),
       },
@@ -84,7 +86,7 @@ const config = helpers.defineMultiStyleConfig({
       "&:not(:placeholder-shown)": {
         pt: "16px",
         "& + label": {
-          transform: "scale(0.825) translateY(-10px)",  
+          transform: "scale(0.825) translateY(-10px)",
         },
       },
     },

package/src/theme/components/select.ts

@@ -29,7 +29,7 @@ const config = helpers.defineMultiStyleConfig({
     field: {
       ...Input.baseStyle!(props).field,
       appearance: "none",
-      pt: "16px",
+      paddingTop: "16px",
       "option, optgroup": {
         background: "white",
       },

package/src/theme/utils/sr-utils.ts

@@ -0,0 +1,13 @@
+/** All the styles you need to hide something visually, while still making it available for screen readers */
+export const srOnly = {
+  border: "0 !important",
+  clip: "rect(1px, 1px, 1px, 1px) !important",
+  clipPath: "inset(50%) !important",
+  height: "1px !important",
+  margin: "-1px !important",
+  overflow: "hidden !important",
+  padding: "0 !important",
+  position: "absolute !important",
+  width: "1px !important",
+  whiteSpace: "nowrap !important",
+};