fix(SVGLibrary): add UI icon request links to Icon and Pictogram libraries (carbon-design-system#4809)

* fix(SVGLibrary): add UI icon request links to Icon and Pictogram libraries

* fix(NoResult): update resource cards layout and restore download option

* fix(NoResult): enhance empty state messaging and increase paragraph width

Author: emyarod

src/components/SVGLibraries/IconLibrary/IconLibrary.js

@@ -119,6 +119,9 @@ const IconLibrary = () => {
           allIconResults={filteredIcons.length}
           pageName="icon"
           pageUrl="https://github.com/carbon-design-system/carbon/blob/main/packages/icons/master/ui-icon-master.ai"
+          single="https://github.ibm.com/brand/ui-icons/issues/new?assignees=&labels=ui-icon%2Crequest%2Csingle&projects=&template=01-ui-icon-request-single.yml&title=%5BUI+icon%5D+single%3A+UI+icon+name"
+          batch="https://github.ibm.com/brand/ui-icons/issues/new?assignees=&labels=ui-icon%2Crequest&projects=&template=02-ui-icon-request-batch.yml&title=%5BUI+icon%5D+batch%3A+UI+icon+batch+name"
+          update="https://github.ibm.com/brand/ui-icons/issues/new?assignees=&labels=ui-icon%2Crequest%2Cupdate&projects=&template=03-ui-icon-request-update.yml&title=%5BUI+icon%5D+update%3A+UI+icon+name"
         />
       ) : (
         <div className={svgLibrary}>

src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js

@@ -110,6 +110,9 @@ const IconLibrary = () => {
           allIconResults={filteredPictograms.length}
           pageName="pictogram"
           pageUrl="https://github.com/carbon-design-system/carbon/raw/refs/heads/main/packages/pictograms/master/productive-pictogram-master.ai"
+          single="https://github.ibm.com/brand/ui-icons/issues/new?assignees=&labels=ui-icon%2Crequest%2Csingle&projects=&template=01-ui-icon-request-single.yml&title=%5BUI+icon%5D+single%3A+UI+icon+name"
+          batch="https://github.ibm.com/brand/ui-icons/issues/new?assignees=&labels=ui-icon%2Crequest&projects=&template=02-ui-icon-request-batch.yml&title=%5BUI+icon%5D+batch%3A+UI+icon+batch+name"
+          update="https://github.ibm.com/brand/ui-icons/issues/new?assignees=&labels=ui-icon%2Crequest%2Cupdate&projects=&template=03-ui-icon-request-update.yml&title=%5BUI+icon%5D+update%3A+UI+icon+name"
         />
       ) : (
         <div className={svgLibrary}>

src/components/SVGLibraries/shared/NoResult.js

@@ -17,6 +17,9 @@ const NoResult = ({
   type = 'icons',
   pageName,
   pageUrl,
+  single,
+  batch,
+  update,
 }) => (
   <div className={noResult}>
     {allIconResults ? (
@@ -38,21 +41,35 @@ const NoResult = ({
       <>
         <h2 className={h2}>No result found</h2>
         <p className={paragraph}>
-          It appears we don’t have an icon that matches your search. Try
-          different search terms or give us a hand—submit your own design to the
-          library!
+          It appears we don’t have{' '}
+          {`${pageName === 'icon' ? 'an icon' : 'a pictogram'}`} that matches
+          your search. Try different search terms or submit an issue for a new{' '}
+          {`${pageName === 'icon' ? 'icon' : 'pictogram'}`}. Select from the
+          ticket options here or check the{' '}
+          <a href="https://www.ibm.com/design/language/iconography/pictograms/contribute/">
+            Contribute
+          </a>{' '}
+          page for more details and best practices.
         </p>
         <Row className="resource-card-group">
           <Column colMd={4} colLg={4} noGutterSm>
             <ResourceCard
-              subTitle={`Submit ${
-                pageName === 'icon' ? 'an icon' : 'a pictogram'
-              } design`}
-              href={
-                pageName === 'icon'
-                  ? 'https://github.ibm.com/brand/ui-icons/issues/new'
-                  : 'https://github.ibm.com/brand/pictograms/issues/new'
-              }>
+              href={single}
+              subTitle={`UI ${pageName} request: Single`}>
+              <Github />
+            </ResourceCard>
+          </Column>
+          <Column colMd={4} colLg={4} noGutterSm>
+            <ResourceCard
+              href={batch}
+              subTitle={`UI ${pageName} request: Batch`}>
+              <Github />
+            </ResourceCard>
+          </Column>
+          <Column colMd={4} colLg={4} noGutterSm>
+            <ResourceCard
+              href={update}
+              subTitle={`UI ${pageName} request: Update`}>
               <Github />
             </ResourceCard>
           </Column>

src/components/SVGLibraries/shared/SvgLibrary.module.scss

@@ -299,7 +299,7 @@ $svg-card-border: 1px solid $ui-03;
 .no-result p {
   margin: 0;
   margin-top: $spacing-06;
-  max-width: 400px;
+  max-width: 650px;
 }
 
 .no-result :global(.resource-card-group) {