DM-48448: Add link to user docs from Times Square UI

apps/squareone/squareone.config.schema.json

@@ -24,6 +24,12 @@
       "title": "Base URL for the public ingress",
       "description": "Used for computing absolute URLs"
     },
+    "docsBaseUrl": {
+      "type": "string",
+      "default": "https://rsp.lsst.io",
+      "title": "Base URL for the user documentation site.",
+      "description": "Used for computing URLs for user documentation pages for this RSP instance. The default is for the public RSP. For USDF, use `https://rsp.lsst.io/v/usdfprod`. Does not end in /."
+    },
     "semaphoreUrl": {
       "type": "string",
       "title": "Semaphore URL",

apps/squareone/squareone.config.yaml

@@ -2,6 +2,7 @@ siteName: 'Squareone Development Site'
 baseUrl: 'http://localhost:3000'
 siteDescription: |
   The site description.
+docsBaseUrl: 'https://rsp.lsst.io'
 semaphoreUrl: 'https://data-dev.lsst.cloud/semaphore'
 timesSquareUrl: 'http://localhost:3000/times-square/api'
 coManageRegistryUrl: 'https://id.lsst.cloud'

apps/squareone/src/components/TimesSquareApp/Sidebar.js

@@ -4,6 +4,11 @@
 
 import Link from 'next/link';
 import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { IconPill } from '@lsst-sqre/squared';
+
+import { getDocsUrl } from '../../lib/utils/docsUrls';
 
 const StyledSidebar = styled.div`
   border-right: 1px solid var(--rsd-color-primary-600);
@@ -21,6 +26,8 @@ const AppTitle = styled.p`
 `;
 
 export default function Sidebar({ pageNav, pagePanel }) {
+  const docsUrl = getDocsUrl('/guides/times-square/index.html');
+
   return (
     <StyledSidebar>
       <Link href="/times-square">
@@ -29,6 +36,14 @@ export default function Sidebar({ pageNav, pagePanel }) {
         </a>
       </Link>
 
+      <IconPill
+        icon={['fas', 'book']}
+        text="Documentation"
+        url={docsUrl}
+        textColor="#ffffff"
+        backgroundColor="var(--rsd-color-primary-600)"
+      />
+
       {pagePanel && pagePanel}
 
       {pageNav && pageNav}

apps/squareone/src/lib/utils/docsUrls.js

@@ -0,0 +1,11 @@
+import getConfig from 'next/config';
+
+/**
+ * Get the full URL to a documentation page.
+ * @param path The path to the documentation page, starting with "/"
+ * @returns The full URL to the documentation page
+ */
+export function getDocsUrl(path) {
+  const { publicRuntimeConfig } = getConfig();
+  return `${publicRuntimeConfig.docsBaseUrl}${path}`;
+}

apps/squareone/src/styles/icons.js

@@ -14,6 +14,7 @@ import {
   faCircleMinus,
   faCodeCommit,
   faDownload,
+  faBook,
 } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 
@@ -27,4 +28,5 @@ library.add(faCircleCheck);
 library.add(faCircleMinus);
 library.add(faCodeCommit);
 library.add(faDownload);
+library.add(faBook);
 library.add(faGithub);

packages/squared/package.json

@@ -26,6 +26,9 @@
   },
   "dependencies": {
     "@fontsource/source-sans-pro": "^4.5.11",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@lsst-sqre/global-css": "workspace:*",
     "@lsst-sqre/rubin-style-dictionary": "workspace:*",
     "@radix-ui/react-dropdown-menu": "^2.0.5",

packages/squared/src/components/IconPill/IconPill.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconPill } from './IconPill';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faBook } from '@fortawesome/free-solid-svg-icons';
+
+// Add icons to the global Font Awesome library
+library.add(faBook);
+
+const meta: Meta<typeof IconPill> = {
+  title: 'Components/IconPill',
+  component: IconPill,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof IconPill>;
+
+export const Default: Story = {
+  args: {
+    icon: ['fas', 'book'],
+    text: 'Documentation',
+    url: '#',
+    textColor: '#ffffff',
+    backgroundColor: '#000000',
+  },
+
+  render: ({ icon, text, url, textColor, backgroundColor }) => {
+    return (
+      <IconPill
+        icon={icon}
+        text={text}
+        url={url}
+        textColor={textColor}
+        backgroundColor={backgroundColor}
+      />
+    );
+  },
+};

packages/squared/src/components/IconPill/IconPill.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconPrefix, IconName } from '@fortawesome/fontawesome-svg-core';
+
+export interface IconPillProps {
+  text: string;
+  url: string;
+  icon: [IconPrefix, IconName];
+  backgroundColor?: string;
+  textColor?: string;
+}
+
+const PillContainer = styled.span<{
+  backgroundColor: string;
+  textColor: string;
+}>`
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 0.5em;
+  color: ${(props) => props.textColor};
+  background-color: ${(props) => props.backgroundColor};
+  font-size: 0.9rem;
+  font-weight: 700;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &:hover {
+    box-shadow: 0 10px 15px -10px rgba(22, 23, 24, 0.35);
+  }
+`;
+
+const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
+  display: inline-block;
+  margin-right: 0.4em;
+  font-size: 0.9em;
+`;
+
+export const IconPill: React.FC<IconPillProps> = ({
+  icon,
+  text,
+  url,
+  backgroundColor = '#e0e0e0',
+  textColor = '#000000',
+}) => {
+  return (
+    <PillContainer backgroundColor={backgroundColor} textColor={textColor}>
+      <a href={url}>
+        <StyledFontAwesomeIcon icon={icon} />
+        {text}
+      </a>
+    </PillContainer>
+  );
+};
+
+export default IconPill;

packages/squared/src/components/IconPill/index.ts

@@ -0,0 +1,2 @@
+export * from './IconPill';
+export { default } from './IconPill';

packages/squared/src/index.ts

@@ -8,6 +8,7 @@ export {
   default as GafaelfawrUserMenu,
   type GafaelfawrUserMenuProps,
 } from './components/GafaelfawrUserMenu';
+export { default as IconPill, type IconPillProps } from './components/IconPill';
 
 /* Hooks */
 export { default as useCurrentUrl } from './hooks/useCurrentUrl';