Add new and update status / success icons (#4364)

.changeset/tame-kangaroos-heal.md

@@ -0,0 +1,32 @@
+---
+"@salt-ds/icons": minor
+---
+
+Added new icons
+
+- Checkmark
+- CheckmarkSolid
+- SuccessCircle
+- SuccessCircleSolid
+
+Updated below icons to align with other icons
+
+- Error
+- ErrorSolid
+- Info
+- InfoSolid
+- Warning
+- WarningSolid
+
+Deprecated below icons
+
+| Deprecated            | Replacement        |
+| --------------------- | ------------------ |
+| SuccessSmallIcon      | CheckmarkIcon      |
+| SuccessSmallSolidIcon | CheckmarkSolidIcon |
+| SuccessIcon           | CheckmarkIcon      |
+| SuccessSolidIcon      | CheckmarkSolidIcon |
+| StepSuccessIcon       | SuccessCircleIcon  |
+| SuccessTickIcon       | CheckmarkIcon      |
+
+Closes #4347

packages/icons/scripts/generateIcons.mjs

@@ -26,7 +26,11 @@ const GENERATED_WARNING_COMMENT =
 const CSS_GENERATED_WARNING_COMMENT =
   "/** WARNING: This file includes all icons in a css mask format and was generated by a script. Do not modify it manually */\n\n";
 
-/** Change kebab casing to Pascal casing */
+/**
+ * Change kebab casing to Pascal casing
+ *
+ * @param {string} str
+ * */
 function pascalCase(str) {
   const arr = str.split("-");
   const capital = arr.map(
@@ -37,6 +41,38 @@ function pascalCase(str) {
 
   return capital.join("");
 }
+
+/**
+ * Turn `AppleBanana` into `Apple Banana`
+ * @param {string} str
+ **/
+function breakPascalCasingWithSpace(str) {
+  if (str) {
+    return str.charAt(0) + str.slice(1).replaceAll(/([A-Z])/g, " $1");
+  }
+  return str;
+}
+
+/**
+ * Trying to sort like Biome organize imports rules.
+ * e.g. `BuildReportIcon` should come before `BuildingIcon`.
+ *
+ * Intl.Collator numeric option works for `Forward5Icon` before `Forward10Icon`, like Biome do...
+ *
+ * https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/src/assists/source/organize_imports/util.rs
+ *
+ * @param {string} a
+ * @param {string} b
+ * */
+
+const collator = new Intl.Collator([], { numeric: true });
+function importSortPredicate(a, b) {
+  return collator.compare(
+    breakPascalCasingWithSpace(a),
+    breakPascalCasingWithSpace(b),
+  );
+}
+
 /** Generate all icon SVG as background image, in a single CSS */
 const generateCssAsBg = ({ basePath, cssOutputPath, fileArg }) => {
   // options is optional
@@ -80,6 +116,16 @@ const generateCssAsBg = ({ basePath, cssOutputPath, fileArg }) => {
   });
 };
 
+const DEPRECATED_ICONS = [
+  ["Success", "Checkmark"],
+  ["SuccessSolid", "CheckmarkSolid"],
+  ["SuccessTick", "Checkmark"],
+  ["StepSuccess", "SuccessCircle"],
+  ["SuccessSmall", "Checkmark"],
+  ["SuccessSmallSolid", "CheckmarkSolid"],
+];
+const deprecatedIconMap = new Map(DEPRECATED_ICONS);
+
 /**
  * Generate all the icon React components from SVGs
  */
@@ -197,6 +243,11 @@ const generateIconComponents = async ({
         componentName,
         ariaLabel: iconTitle,
         viewBox: viewBox ?? "0 0 12 12",
+        // note: triple mustache is used here for unescapted version
+        JSDoc: deprecatedIconMap.has(componentName)
+          ? `
+/** @deprecated - Use \`${deprecatedIconMap.get(componentName)}Icon\` instead. */`
+          : "",
       });
 
       const formattedResult = biome.formatContent(
@@ -219,11 +270,9 @@ const generateIconComponents = async ({
 const generateIndex = async ({ icons, componentsPath }) => {
   console.log("Generating index file");
 
-  const content = icons
-    .sort((a, b) => a.localeCompare(b))
-    .map((componentName) => {
-      return `export * from './${componentName}';`;
-    });
+  const content = icons.sort(importSortPredicate).map((componentName) => {
+    return `export * from './${componentName}';`;
+  });
 
   const joinedText = [GENERATED_WARNING_COMMENT, ...content].join("\n");
 
@@ -247,8 +296,8 @@ const generateIconAll = async ({ icons, allPath }) => {
   console.log(`Generating ${allPath}`);
 
   const sortedIcons = icons
-    .sort((a, b) => a.localeCompare(b))
     .map((componentName) => `${componentName}Icon,`)
+    .sort(importSortPredicate)
     .join("\n");
 
   const importsStatements = `import {\n${sortedIcons}\n} from "@salt-ds/icons";\n`;
@@ -278,8 +327,8 @@ const generateIconAllSite = async ({ icons, siteAllPath }) => {
   console.log(`Generating ${siteAllPath}`);
 
   const sortedIcons = icons
-    .sort((a, b) => a.localeCompare(b))
     .map((componentName) => `${componentName}Icon,`)
+    .sort(importSortPredicate)
     .join("\n");
 
   const importsStatements = `import {\n${sortedIcons}\n} from "@salt-ds/icons";\n`;

packages/icons/scripts/templateIcon.mustache

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { Icon, type IconProps } from "../icon";
 
 export type {{componentName}}IconProps = IconProps;
-
+{{{JSDoc}}}
 export const {{componentName}}Icon = forwardRef<SVGSVGElement, {{componentName}}IconProps>(
   function {{componentName}}Icon(props: {{componentName}}IconProps, ref) {
     return (

packages/icons/src/components/Checkmark.tsx

@@ -0,0 +1,27 @@
+// WARNING: This file was generated by a script. Do not modify it manually
+
+import { forwardRef } from "react";
+
+import { Icon, type IconProps } from "../icon";
+
+export type CheckmarkIconProps = IconProps;
+
+export const CheckmarkIcon = forwardRef<SVGSVGElement, CheckmarkIconProps>(
+  function CheckmarkIcon(props: CheckmarkIconProps, ref) {
+    return (
+      <Icon
+        data-testid="CheckmarkIcon"
+        aria-label="checkmark"
+        viewBox="0 0 12 12"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          d="M4.952 9.294 10 3.73 8.9 2.706 4.875 7.163 3.027 5.446 2 6.546l2.952 2.748Z"
+          clipRule="evenodd"
+        />
+      </Icon>
+    );
+  },
+);

packages/icons/src/components/CheckmarkSolid.tsx

@@ -0,0 +1,28 @@
+// WARNING: This file was generated by a script. Do not modify it manually
+
+import { forwardRef } from "react";
+
+import { Icon, type IconProps } from "../icon";
+
+export type CheckmarkSolidIconProps = IconProps;
+
+export const CheckmarkSolidIcon = forwardRef<
+  SVGSVGElement,
+  CheckmarkSolidIconProps
+>(function CheckmarkSolidIcon(props: CheckmarkSolidIconProps, ref) {
+  return (
+    <Icon
+      data-testid="CheckmarkSolidIcon"
+      aria-label="checkmark solid"
+      viewBox="0 0 12 12"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M0 0h12v12H0V0Zm10 3.729L4.952 9.294 2 6.545l1.027-1.1 1.848 1.718L8.9 2.706 10 3.729Z"
+        clipRule="evenodd"
+      />
+    </Icon>
+  );
+});

packages/icons/src/components/Error.tsx

@@ -16,12 +16,12 @@ export const ErrorIcon = forwardRef<SVGSVGElement, ErrorIconProps>(
         ref={ref}
         {...props}
       >
-        <path d="M5 2h2v5H5V2Zm2 6.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
         <path
           fillRule="evenodd"
           d="M3 0h6l3 3v6l-3 3H3L0 9V3l3-3ZM1 3.414 3.414 1h5.172L11 3.414v5.172L8.586 11H3.414L1 8.586V3.414Z"
           clipRule="evenodd"
         />
+        <path d="M5 2h2v5H5V2Zm2 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
       </Icon>
     );
   },

packages/icons/src/components/ErrorSolid.tsx

@@ -18,7 +18,7 @@ export const ErrorSolidIcon = forwardRef<SVGSVGElement, ErrorSolidIconProps>(
       >
         <path
           fillRule="evenodd"
-          d="M3 0h6l3 3v6l-3 3H3L0 9V3l3-3Zm2 2h2v5H5V2Zm2 6.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+          d="M9 0H3L0 3v6l3 3h6l3-3V3L9 0ZM7 2H5v5h2V2Zm-1 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
           clipRule="evenodd"
         />
       </Icon>

packages/icons/src/components/Info.tsx

@@ -16,10 +16,10 @@ export const InfoIcon = forwardRef<SVGSVGElement, InfoIconProps>(
         ref={ref}
         {...props}
       >
-        <path d="M5 2h2v2H5V2Zm0 3h2v5H5V5Z" />
+        <path d="M6 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm1 3v5H5V5h2Z" />
         <path
           fillRule="evenodd"
-          d="M0 12V0h12v12H0ZM1 1h10v10H1V1Z"
+          d="M0 0v12h12V0H0Zm11 1H1v10h10V1Z"
           clipRule="evenodd"
         />
       </Icon>

packages/icons/src/components/InfoSolid.tsx

@@ -18,7 +18,7 @@ export const InfoSolidIcon = forwardRef<SVGSVGElement, InfoSolidIconProps>(
       >
         <path
           fillRule="evenodd"
-          d="M12 0H0v12h12V0ZM5 2h2v2H5V2Zm0 3h2v5H5V5Z"
+          d="M0 0h12v12H0V0Zm6 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm1 3v5H5V5h2Z"
           clipRule="evenodd"
         />
       </Icon>

packages/icons/src/components/StepSuccess.tsx

@@ -6,6 +6,7 @@ import { Icon, type IconProps } from "../icon";
 
 export type StepSuccessIconProps = IconProps;
 
+/** @deprecated - Use `SuccessCircleIcon` instead. */
 export const StepSuccessIcon = forwardRef<SVGSVGElement, StepSuccessIconProps>(
   function StepSuccessIcon(props: StepSuccessIconProps, ref) {
     return (

packages/icons/src/components/Success.tsx

@@ -6,6 +6,7 @@ import { Icon, type IconProps } from "../icon";
 
 export type SuccessIconProps = IconProps;
 
+/** @deprecated - Use `CheckmarkIcon` instead. */
 export const SuccessIcon = forwardRef<SVGSVGElement, SuccessIconProps>(
   function SuccessIcon(props: SuccessIconProps, ref) {
     return (

packages/icons/src/components/SuccessCircle.tsx

@@ -0,0 +1,29 @@
+// WARNING: This file was generated by a script. Do not modify it manually
+
+import { forwardRef } from "react";
+
+import { Icon, type IconProps } from "../icon";
+
+export type SuccessCircleIconProps = IconProps;
+
+export const SuccessCircleIcon = forwardRef<
+  SVGSVGElement,
+  SuccessCircleIconProps
+>(function SuccessCircleIcon(props: SuccessCircleIconProps, ref) {
+  return (
+    <Icon
+      data-testid="SuccessCircleIcon"
+      aria-label="success circle"
+      viewBox="0 0 12 12"
+      ref={ref}
+      {...props}
+    >
+      <path d="M9.75 4.016 4.952 9.332 2 6.582l1.027-1.098L4.875 7.2l3.772-4.208L9.75 4.016Z" />
+      <path
+        fillRule="evenodd"
+        d="M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Zm5-6A5 5 0 1 1 1 6a5 5 0 0 1 10 0Z"
+        clipRule="evenodd"
+      />
+    </Icon>
+  );
+});

packages/icons/src/components/SuccessCircleSolid.tsx

@@ -0,0 +1,28 @@
+// WARNING: This file was generated by a script. Do not modify it manually
+
+import { forwardRef } from "react";
+
+import { Icon, type IconProps } from "../icon";
+
+export type SuccessCircleSolidIconProps = IconProps;
+
+export const SuccessCircleSolidIcon = forwardRef<
+  SVGSVGElement,
+  SuccessCircleSolidIconProps
+>(function SuccessCircleSolidIcon(props: SuccessCircleSolidIconProps, ref) {
+  return (
+    <Icon
+      data-testid="SuccessCircleSolidIcon"
+      aria-label="success circle solid"
+      viewBox="0 0 12 12"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Zm3.75-7.984L4.952 9.332 2 6.582l1.027-1.098L4.875 7.2l3.772-4.208L9.75 4.016Z"
+        clipRule="evenodd"
+      />
+    </Icon>
+  );
+});