Merge pull request #524 from diggsweden/DIGG-450

Digg 450

components/blocks/accordion-block/index.tsx

@@ -1,7 +1,7 @@
 import useTranslation from "next-translate/useTranslation";
 import { FC, useContext, useState } from "react";
 
-import CloseIcon from "@/assets/icons/closeCross.svg";
+import CrossIcon from "@/assets/icons/cross.svg";
 import PlusIcon from "@/assets/icons/plus.svg";
 import { HtmlParser } from "@/components/typography/html-parser";
 import { FaqFragment as IFaq } from "@/graphql/__generated__/operations";
@@ -38,7 +38,7 @@ export const AccordionBlock: FC<AccordionBlockProps> = ({
           {question}
         </span>
         {open ? (
-          <CloseIcon
+          <CrossIcon
             width={iconSize * 1.5}
             height={iconSize * 1.5}
             viewBox="0 0 24 24"

components/button/index.tsx

@@ -21,6 +21,7 @@ const buttonVariants = cva(["button"], {
     variant: {
       primary: ["button--primary"],
       secondary: ["button--secondary"],
+      light: ["button--light"],
       plain: ["button--plain"],
       pink: ["button--pink"],
       filter: ["button--filter"],
@@ -37,26 +38,57 @@ type IconLabelProps = {
   size?: "xs" | "sm" | "lg";
   label?: string;
   iconPosition?: "left" | "right";
+  iconSizeBase?: number;
 };
 
-const IconLabel: FC<IconLabelProps> = ({ icon, label, size, iconPosition }) => {
+const IconLabel: FC<IconLabelProps> = ({
+  icon,
+  label,
+  size,
+  iconPosition,
+  iconSizeBase,
+}) => {
   const Icon = icon;
-  const { iconSize } = useContext(SettingsContext);
+  const { iconSize: contextIconSize } = useContext(SettingsContext);
 
   return (
     <>
       {iconPosition === "left" && Icon && (
         <Icon
-          height={size === "lg" ? 1.5 * iconSize : iconSize}
-          width={size === "lg" ? 1.5 * iconSize : iconSize}
+          height={
+            iconSizeBase
+              ? iconSizeBase
+              : size === "lg"
+              ? 1.5 * contextIconSize
+              : contextIconSize
+          }
+          width={
+            iconSizeBase
+              ? iconSizeBase
+              : size === "lg"
+              ? 1.5 * contextIconSize
+              : contextIconSize
+          }
           viewBox="0 0 24 24"
         />
       )}
       {label && <span>{label}</span>}
       {iconPosition === "right" && Icon && (
         <Icon
-          height={size === "lg" ? 1.5 * iconSize : iconSize}
-          width={size === "lg" ? 1.5 * iconSize : iconSize}
+          height={
+            iconSizeBase
+              ? iconSizeBase
+              : size === "lg"
+              ? 1.5 * contextIconSize
+              : contextIconSize
+          }
+          width={
+            iconSizeBase
+              ? iconSizeBase
+              : size === "lg"
+              ? 1.5 * contextIconSize
+              : contextIconSize
+          }
           viewBox="0 0 24 24"
         />
       )}
@@ -67,6 +99,7 @@ const IconLabel: FC<IconLabelProps> = ({ icon, label, size, iconPosition }) => {
 type ButtonProps = VariantProps<typeof buttonVariants> & {
   icon?: AddIcon;
   iconPosition?: "left" | "right";
+  iconSize?: number;
   label?: string;
 };
 
@@ -78,6 +111,7 @@ const Button: FC<
   className,
   icon,
   iconPosition,
+  iconSize,
   label,
   children,
   ...rest
@@ -90,6 +124,7 @@ const Button: FC<
     >
       <IconLabel
         size={size ? size : "lg"}
+        iconSizeBase={iconSize}
         iconPosition={iconPosition}
         icon={icon}
         label={label}

components/form/render-form/index.tsx

@@ -2,8 +2,8 @@ import { Translate } from "next-translate";
 import useTranslation from "next-translate/useTranslation";
 import { ChangeEvent, DragEvent, FC, useCallback, useState } from "react";
 
-import ChevronDownIcon from "@/assets/icons/chevronDown.svg";
-import ChevronUpIcon from "@/assets/icons/chevronUp.svg";
+import ChevronDownIcon from "@/assets/icons/chevron-down.svg";
+import ChevronUpIcon from "@/assets/icons/chevron-up.svg";
 import { Button } from "@/components/button";
 import { Label } from "@/components/form/label";
 import { RadioInput } from "@/components/form/radio-input";

components/form/select/index.tsx

@@ -1,6 +1,6 @@
 import { FC, InputHTMLAttributes, PropsWithChildren, useContext } from "react";
 
-import ChevronDownIcon from "@/assets/icons/chevronDown.svg";
+import ChevronDownIcon from "@/assets/icons/chevron-down.svg";
 import { SettingsContext } from "@/providers/settings-provider";
 
 interface SelectProps extends InputHTMLAttributes<HTMLSelectElement> {

components/navigation/container-nav/index.tsx

@@ -4,7 +4,7 @@ import { usePathname } from "next/navigation";
 import useTranslation from "next-translate/useTranslation";
 import { FC, KeyboardEvent, useEffect, useRef, useState } from "react";
 
-import CloseCrossIcon from "@/assets/icons/closeCross.svg";
+import CrossIcon from "@/assets/icons/cross.svg";
 import HamburgerIcon from "@/assets/icons/hamburger.svg";
 import { Button } from "@/components/button";
 import { ContainerDataFragment } from "@/graphql/__generated__/operations";
@@ -86,7 +86,7 @@ export const ContainerNav: FC<ContainerDpDwnProps> = ({ related }) => {
       {vw < 1124 && (
         <Button
           iconPosition="left"
-          icon={expanded ? CloseCrossIcon : HamburgerIcon}
+          icon={expanded ? CrossIcon : HamburgerIcon}
           label={related[0].name}
           onClick={handleToggle}
           className={`!button--large relative z-40 w-full md:w-[20rem] xl:hidden`}

components/navigation/form-nav/index.tsx

@@ -11,8 +11,8 @@ import {
   useState,
 } from "react";
 
-import ChevronDownIcon from "@/assets/icons/chevronDown.svg";
-import ChevronUpIcon from "@/assets/icons/chevronUp.svg";
+import ChevronDownIcon from "@/assets/icons/chevron-down.svg";
+import ChevronUpIcon from "@/assets/icons/chevron-up.svg";
 import { Button } from "@/components/button";
 import { useClickOutside } from "@/hooks/use-click-outside";
 import { handleScroll } from "@/utilities/form-utils";

components/navigation/main-nav/index.tsx

@@ -3,7 +3,7 @@ import { usePathname } from "next/navigation";
 import useTranslation from "next-translate/useTranslation";
 import { FC, useEffect, useRef, useState, useContext } from "react";
 
-import CloseCrossIcon from "@/assets/icons/closeCross.svg";
+import CrossIcon from "@/assets/icons/cross.svg";
 import HamburgerIcon from "@/assets/icons/hamburger.svg";
 import SearchIcon from "@/assets/icons/search.svg";
 import DataportalTestLogo from "@/assets/logos/dataportalTest.svg";
@@ -137,7 +137,7 @@ const MainNav: FC<MainNavProps> = ({ setOpenSideBar, openSideBar }) => {
           aria-expanded={openSideBar}
           aria-controls="sidebar"
           variant="plain"
-          icon={openSideBar ? CloseCrossIcon : HamburgerIcon}
+          icon={openSideBar ? CrossIcon : HamburgerIcon}
           iconPosition="left"
           onClick={() => setOpenSideBar(!openSideBar)}
           label={t("common|menu")}