Display documentation link in item details view (#669)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

Author: cynthia-sg

ui/common/src/components/ItemModalContent.tsx

@@ -429,6 +429,12 @@ export const ItemModalContent = (props: Props) => {
                     </ExternalLink>
                   </Show>
 
+                  <Show when={!isUndefined(itemInfo()!.documentation_url)}>
+                    <ExternalLink title="Documenation" class={`ms-3 ${Link}`} href={itemInfo()!.documentation_url!}>
+                      <SVGIcon kind={SVGIconKind.Book} />
+                    </ExternalLink>
+                  </Show>
+
                   <Show when={!isUndefined(itemInfo()!.package_manager_url)}>
                     <ExternalLink
                       title="Package manager"

ui/common/src/components/SVGIcon.tsx

@@ -77,6 +77,21 @@ const Blog = (props: IconProps) => (
   </svg>
 );
 
+const Book = (props: IconProps) => (
+  <svg
+    class={props.class}
+    stroke="currentColor"
+    fill="currentColor"
+    stroke-width="0"
+    viewBox="0 0 448 512"
+    height="1em"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z" />
+  </svg>
+);
+
 const Calendar = (props: IconProps) => (
   <svg
     class={props.class}
@@ -1153,6 +1168,7 @@ const icons: ValidComponent[] = [
   ArrowTop,
   Artwork,
   Blog,
+  Book,
   Calendar,
   CaretDown,
   CaretLeft,

ui/common/src/types/types.ts

@@ -32,6 +32,7 @@ export interface Item extends BaseItem {
   devstats_url?: string;
   discord_url?: string;
   docker_url?: string;
+  documentation_url?: string;
   enduser?: boolean;
   github_discussions_url?: string;
   graduated_at?: string;
@@ -162,6 +163,7 @@ export enum SVGIconKind {
   ArrowTop,
   Artwork,
   Blog,
+  Book,
   Calendar,
   CaretDown,
   CaretLeft,

ui/webapp/src/types.ts

@@ -100,6 +100,7 @@ export interface Item extends BaseItem {
   devstats_url?: string;
   discord_url?: string;
   docker_url?: string;
+  documentation_url?: string;
   enduser?: boolean;
   github_discussions_url?: string;
   graduated_at?: string;