web: Define types for icon name and size

agama-project · Apr 8, 2024 · 86c64f9 · 86c64f9
1 parent 05ea8cd
commit 86c64f9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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.