From 86c64f9089a7d957bb7d8bcf9bb020f181d27775 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Mon, 8 Apr 2024 22:16:14 +0100
Subject: [PATCH] web: Define types for icon name and size

---
 web/src/components/core/Section.jsx |  8 ++++++--
 web/src/components/layout/Icon.jsx  | 11 ++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx
index 831d5f792d..c1e80cd63b 100644
--- a/web/src/components/core/Section.jsx
+++ b/web/src/components/core/Section.jsx
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022-2023] SUSE LLC
+ * Copyright (c) [2022-2024] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -26,6 +26,10 @@ import { Link } from "react-router-dom";
 import { Icon } from '~/components/layout';
 import { If, ValidationErrors } from "~/components/core";
 
+/**
+ * @typedef {import("~/components/layout/Icon").IconName} IconName
+ */
+
 /**
  * Renders children into an HTML section
  * @component
@@ -46,7 +50,7 @@ import { If, ValidationErrors } from "~/components/core";
  *   </Section>
  *
  * @typedef { Object } SectionProps
- * @property {string} [icon] - Name of the section icon. Not rendered if title is not provided.
+ * @property {IconName} [icon] - Name of the section icon. Not rendered if title is not provided.
  * @property {string} [title] - The section title. If not given, aria-label must be provided.
  * @property {string|React.ReactElement} [description] - A section description. Use only if really needed.
  * @property {string} [name] - The section name. Used to build the header id.
diff --git a/web/src/components/layout/Icon.jsx b/web/src/components/layout/Icon.jsx
index a14e646a66..f32e8cef90 100644
--- a/web/src/components/layout/Icon.jsx
+++ b/web/src/components/layout/Icon.jsx
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022-2023] SUSE LLC
+ * Copyright (c) [2022-2024] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -79,6 +79,11 @@ import { SiLinux, SiWindows } from "@icons-pack/react-simple-icons";
 // Icons from SVG
 import Loading from "./three-dots-loader-icon.svg?component";
 
+/**
+ * @typedef {string|number} IconSize
+ * @typedef {keyof icons} IconName
+ */
+
 const icons = {
   add_a_photo: AddAPhoto,
   apps: Apps,
@@ -149,9 +154,9 @@ const PREDEFINED_SIZES = [
  *   <Icon name="warning" size="16" />
  *
  * @param {object} props - Component props
- * @param {string} props.name - Name of the desired icon.
+ * @param {IconName} props.name - Name of the desired icon.
  * @param {string} [props.className=""] - CSS classes.
- * @param {string|number} [props.size] - Size used for both, width and height.
+ * @param {IconSize} [props.size] - Size used for both, width and height.
  *   It can be a CSS unit or one of PREDEFINED_SIZES.
  * @param {object} [props.otherProps] Other props sent to SVG icon. Please, note
  *   that width and height will be overwritten by the size value if it was given.