DIGG-516: Hero search buttons uppdate, search filters update and sear…

…ch query update
diggsweden · Jan 21, 2025 · a7d6675 · a7d6675
1 parent 0d97759
commit a7d6675
Show file tree

Hide file tree

Showing 22 changed files with 285 additions and 332 deletions.
diff --git a/assets/icons/organisation.svg b/assets/icons/organisation.svg
diff --git a/components/button/index.tsx b/components/button/index.tsx
@@ -16,6 +16,7 @@ const buttonVariants = cva(["button"], {
     size: {
       xs: ["button--xs"],
       sm: ["button--small"],
+      md: ["button--medium"],
       lg: ["button--small md:button--large"],
     },
     variant: {
@@ -35,62 +36,31 @@ const buttonVariants = cva(["button"], {
 
 type IconLabelProps = {
   icon?: AddIcon;
-  size?: "xs" | "sm" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   label?: string;
   iconPosition?: "left" | "right";
-  iconSizeBase?: number;
 };
 
-const IconLabel: FC<IconLabelProps> = ({
-  icon,
-  label,
-  size,
-  iconPosition,
-  iconSizeBase,
-}) => {
+const IconLabel: FC<IconLabelProps> = ({ icon, label, size, iconPosition }) => {
   const Icon = icon;
-  const { iconSize: contextIconSize } = useContext(SettingsContext);
+  const { iconSize } = useContext(SettingsContext);
 
   return (
     <>
       {iconPosition === "left" && Icon && (
         <Icon
           className="flex-shrink-0"
-          height={
-            iconSizeBase
-              ? iconSizeBase
-              : size === "lg"
-              ? 1.5 * contextIconSize
-              : contextIconSize
-          }
-          width={
-            iconSizeBase
-              ? iconSizeBase
-              : size === "lg"
-              ? 1.5 * contextIconSize
-              : contextIconSize
-          }
+          height={size === "sm" || size === "xs" ? iconSize : 1.5 * iconSize}
+          width={size === "sm" || size === "xs" ? iconSize : 1.5 * iconSize}
           viewBox="0 0 24 24"
         />
       )}
       {label && <span>{label}</span>}
       {iconPosition === "right" && Icon && (
         <Icon
           className="flex-shrink-0"
-          height={
-            iconSizeBase
-              ? iconSizeBase
-              : size === "lg"
-              ? 1.5 * contextIconSize
-              : contextIconSize
-          }
-          width={
-            iconSizeBase
-              ? iconSizeBase
-              : size === "lg"
-              ? 1.5 * contextIconSize
-              : contextIconSize
-          }
+          height={size === "sm" || size === "xs" ? iconSize : 1.5 * iconSize}
+          width={size === "sm" || size === "xs" ? iconSize : 1.5 * iconSize}
           viewBox="0 0 24 24"
         />
       )}
@@ -101,7 +71,6 @@ const IconLabel: FC<IconLabelProps> = ({
 type ButtonProps = VariantProps<typeof buttonVariants> & {
   icon?: AddIcon;
   iconPosition?: "left" | "right";
-  iconSize?: number;
   label?: string;
 };
 
@@ -113,7 +82,6 @@ const Button: FC<
   className,
   icon,
   iconPosition,
-  iconSize,
   label,
   children,
   ...rest
@@ -126,7 +94,6 @@ const Button: FC<
     >
       <IconLabel
         size={size ? size : "lg"}
-        iconSizeBase={iconSize}
         iconPosition={iconPosition}
         icon={icon}
         label={label}

diff --git a/components/form/text-input/index.tsx b/components/form/text-input/index.tsx
@@ -7,10 +7,10 @@ export const TextInput: FC<InputHTMLAttributes<HTMLInputElement>> = ({
   <input
     type="text"
     {...props}
-    className={`hover:outline-out focus-visible:outline-out active:outline-out h-[3.25rem] w-full 
-    rounded-sm border border-brown-600 bg-white p-md text-textPrimary placeholder:text-textSecondary
-    hover:outline-brown-800 focus-visible:outline-brown-800 active:outline-brown-800 disabled:cursor-not-allowed 
-    disabled:bg-brown-400 disabled:text-textSecondary disabled:hover:outline-none ${
+    className={`hover:outline-out focus-visible:outline-out active:outline-out h-xl w-full rounded-sm 
+    border border-brown-600 bg-white p-md text-textPrimary placeholder:text-textSecondary hover:outline-brown-800
+    focus-visible:outline-brown-800 active:outline-brown-800 disabled:cursor-not-allowed disabled:bg-brown-400 
+    disabled:text-textSecondary disabled:hover:outline-none md:h-[3.25rem] ${
       className ? className : ""
     }`}
   />

diff --git a/components/layout/hero/index.tsx b/components/layout/hero/index.tsx
@@ -3,13 +3,18 @@ import useTranslation from "next-translate/useTranslation";
 import { FC, useState } from "react";
 
 import ArrowRightIcon from "@/assets/icons/arrow-right.svg";
+import ConceptIcon from "@/assets/icons/data.svg";
+import DiamondIcon from "@/assets/icons/diamond.svg";
+import SpecificationIcon from "@/assets/icons/list-block.svg";
+import OrganisationIcon from "@/assets/icons/organisation.svg";
 import { ButtonLink } from "@/components/button";
 import { CustomImage } from "@/components/custom-image";
 import { Container } from "@/components/layout/container";
 import { Heading } from "@/components/typography/heading";
 import { Preamble } from "@/components/typography/preamble";
 import { SearchInput } from "@/features/search/search-input";
 import { ImageFragment } from "@/graphql/__generated__/operations";
+import { AddIcon } from "@/types/global";
 import { checkLang } from "@/utilities";
 
 interface HeroProps {
@@ -25,6 +30,31 @@ interface SearchProps {
   placeholder: string;
 }
 
+interface HeroButtonProps {
+  href: string;
+  label: string;
+  lang: string;
+  icon: AddIcon;
+}
+
+const HeroButton = ({ href, label, lang, icon }: HeroButtonProps) => {
+  const CenterIcon = icon;
+  return (
+    <ButtonLink
+      className="w-full max-w-sm flex-col rounded-md p-lg"
+      href={href}
+      size="md"
+      locale={lang}
+    >
+      <CenterIcon />
+      <span className="flex flex-row items-center gap-xs">
+        {label}
+        <ArrowRightIcon className="flex-shrink-0" />
+      </span>
+    </ButtonLink>
+  );
+};
+
 export const Hero: FC<HeroProps> = ({
   heading,
   preamble,
@@ -63,24 +93,71 @@ export const Hero: FC<HeroProps> = ({
       <Container>
         <div className="relative z-10">
           <div
-            className={`${isFrontpage && search && "mx-auto text-center"} ${
+            className={`${isFrontpage && search && "text-center"} ${
               search ? "text-brown-100" : "bg-white p-xl"
-            } max-w-md`}
+            }`}
           >
             {heading && (
-              <Heading level={1} size="lg" className="mb-none">
+              <Heading
+                level={1}
+                size="lg"
+                className={`${
+                  isFrontpage ? "mx-auto" : ""
+                } mb-none max-w-[700px]`}
+              >
                 {checkLang(heading)}
               </Heading>
             )}
             {preamble && (
-              <Preamble className="mt-lg" color={search ? "light" : "dark"}>
+              <Preamble
+                className="mx-auto mt-lg max-w-lg"
+                color={search ? "light" : "dark"}
+              >
                 {preamble}
               </Preamble>
             )}
             {search && (
-              <div id="SearchHero" className="mt-xl">
+              <div id="SearchHero" className="mt-xl flex flex-col gap-xl">
+                <div
+                  className={`${
+                    isFrontpage ? "justify-center" : "justify-start"
+                  } flex flex-wrap gap-md md:gap-lg`}
+                >
+                  <div className="grid grid-cols-2 gap-md md:gap-lg">
+                    <HeroButton
+                      href={`/datasets?q=&f=`}
+                      label={t("common|all-data-api")}
+                      lang={lang}
+                      icon={DiamondIcon}
+                    />
+
+                    <HeroButton
+                      href={`/specifications?q=&f=`}
+                      label={t("common|specifications")}
+                      lang={lang}
+                      icon={SpecificationIcon}
+                    />
+                  </div>
+                  <div className="grid grid-cols-2  gap-md md:gap-lg">
+                    <HeroButton
+                      href={`/concepts?q=&f=`}
+                      label={t("common|all-concepts")}
+                      lang={lang}
+                      icon={ConceptIcon}
+                    />
+
+                    <HeroButton
+                      href={`/organisations?q=&f=`}
+                      label={t("common|organisations")}
+                      lang={lang}
+                      icon={OrganisationIcon}
+                    />
+                  </div>
+                </div>
                 <form
-                  className="datapage-form"
+                  className={`datapage-form w-full max-w-md ${
+                    isFrontpage ? "mx-auto" : "justify-start"
+                  }`}
                   method="GET"
                   action={search.destination}
                   role={"search"}
@@ -93,44 +170,6 @@ export const Hero: FC<HeroProps> = ({
                     ariaLabel={search.placeholder}
                   />
                 </form>
-                <div
-                  className={`${
-                    isFrontpage ? "" : "md:justify-start"
-                  } md mt-lg flex flex-wrap justify-center gap-md md:flex-row`}
-                >
-                  <ButtonLink
-                    href={`/datasets?q=&f=`}
-                    label={t("common|all-data-api")}
-                    size="sm"
-                    locale={lang}
-                    icon={ArrowRightIcon}
-                    iconPosition="right"
-                  />
-                  <ButtonLink
-                    href={`/specifications?q=&f=`}
-                    label={t("common|all-specs")}
-                    size="sm"
-                    locale={lang}
-                    icon={ArrowRightIcon}
-                    iconPosition="right"
-                  />
-                  <ButtonLink
-                    href={`/concepts?q=&f=`}
-                    label={t("common|all-concepts")}
-                    size="sm"
-                    locale={lang}
-                    icon={ArrowRightIcon}
-                    iconPosition="right"
-                  />
-                  <ButtonLink
-                    href={`/organisations?q=&f=`}
-                    label={t("common|all-organisations")}
-                    size="sm"
-                    locale={lang}
-                    icon={ArrowRightIcon}
-                    iconPosition="right"
-                  />
-                </div>
               </div>
             )}
           </div>

diff --git a/features/entryscape/organisation-page/index.tsx b/features/entryscape/organisation-page/index.tsx
@@ -4,8 +4,8 @@ import useTranslation from "next-translate/useTranslation";
 import React, { FC, useContext, useEffect, useState } from "react";
 
 import ArrowRightIcon from "@/assets/icons/arrow-right.svg";
+import DataIcon from "@/assets/icons/data.svg";
 import DiamondIcon from "@/assets/icons/diamond.svg";
-import HoldingHandsIcon from "@/assets/icons/holding-hands.svg";
 import ListBlockIcon from "@/assets/icons/list-block.svg";
 import QuestionCircleIcon from "@/assets/icons/question-circle.svg";
 import { Button, ButtonLink } from "@/components/button";
@@ -173,7 +173,7 @@ export const OrganisationPage: FC = () => {
                 </Heading>
                 <div className="box-border flex w-full flex-col items-center gap-lg rounded-lg bg-white p-xl md:flex-row md:justify-between md:gap-xl">
                   <div className="flex w-full flex-col items-center gap-sm text-textSecondary md:flex-row md:gap-lg">
-                    <HoldingHandsIcon
+                    <DataIcon
                       className="flex-shrink-0"
                       height={iconSize * 3}
                       width={iconSize * 3}