feat: Add Open Source Badge component

This commit adds a new component, OpenSourceBadge. This badge is already in use by Image Builder (https://console.redhat.com/insights/image-builder). It was created with two purposes in mind: 1.) To ensure that consoledot users know that the application they are using is open source. 2.) To allow developers (both internal and external) to quickly find relevant repositories, whether they wish to contribute or simply need to inspect the code. Adding this component to frontend-components will allow it to be re-used by other applications on consoledot, ensuring a consistent user experience across the platform.
Hyperkid123 · Jun 1, 2023 · 2e22392 · 2e22392
1 parent d63c43d
commit 2e22392
Show file tree

Hide file tree

Showing 7 changed files with 215 additions and 0 deletions.
diff --git a/packages/components/doc/openSourceBadge.md b/packages/components/doc/openSourceBadge.md
@@ -0,0 +1,18 @@
+# Open Source Badge
+
+The open source badge serves two purposes:
+1. Informs our users that the service they are using is open source.
+2. Guides developers to the project's repositories for the purposes of code inspection or contribution.
+
+## Usage
+
+Import OpenSourceBadge from this package and display it in a prominent location on your application's landing page.
+
+## Props
+
+OpenSourceBadge
+```javascript
+{
+  repositoriesURL: PropTypes.string
+}
+```
diff --git a/packages/components/src/OpenSourceBadge/OpenSourceBadge.test.js b/packages/components/src/OpenSourceBadge/OpenSourceBadge.test.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OpenSourceBadge from './OpenSourceBadge';
+import userEvent from '@testing-library/user-event';
+
+describe('OpenSourceBadge component', () => {
+  describe('should render', () => {
+    it('badge', () => {
+      const { container } = render(<OpenSourceBadge repositoryURL={'https://example.com'} />);
+      expect(container).toMatchSnapshot();
+    });
+
+    it('popover', async () => {
+      render(<OpenSourceBadge repositoryURL={'https://example.com'} />);
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /about open services/i,
+        })
+      );
+      await screen.findByRole('dialog', {
+        name: /about open source/i,
+      });
+      const popoverContainer = document.body.querySelector('.pf-c-popover');
+      expect(popoverContainer).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/components/src/OpenSourceBadge/OpenSourceBadge.tsx b/packages/components/src/OpenSourceBadge/OpenSourceBadge.tsx
@@ -0,0 +1,37 @@
+import { Button, Popover, Text, TextContent } from '@patternfly/react-core';
+import { CodeBranchIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
+import React from 'react';
+
+export interface OpenSourceBadgeProps {
+  /*
+  A URL to a page containing an overview of the project's relevant repositories.
+  */
+  repositoriesURL: string;
+}
+
+const OpenSourceBadge: React.FunctionComponent<OpenSourceBadgeProps> = ({ repositoriesURL }) => {
+  return (
+    <>
+      <Popover
+        bodyContent={
+          <TextContent>
+            <Text>
+              This service is open source, so all of its code is inspectable. Explore repositories to view and contribute to the source code.
+            </Text>
+            <Button component="a" target="_blank" variant="link" icon={<ExternalLinkAltIcon />} iconPosition="right" isInline href={repositoriesURL}>
+              Repositories
+            </Button>
+          </TextContent>
+        }
+        id={'open-source-badge'}
+        headerContent={'About open source'}
+      >
+        <Button variant="plain" aria-label="About Open Services" className="pf-u-pl-sm open-source-badge">
+          <CodeBranchIcon />
+        </Button>
+      </Popover>
+    </>
+  );
+};
+
+export default OpenSourceBadge;
diff --git a/packages/components/src/OpenSourceBadge/__snapshots__/OpenSourceBadge.test.js.snap b/packages/components/src/OpenSourceBadge/__snapshots__/OpenSourceBadge.test.js.snap
@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OpenSourceBadge component should render badge 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-label="About Open Services"
+    class="pf-c-button pf-m-plain pf-u-pl-sm open-source-badge"
+    data-ouia-component-id="OUIA-Generated-Button-plain-1"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 384 512"
+      width="1em"
+    >
+      <path
+        d="M384 144c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 36.4 24.3 67.1 57.5 76.8-.6 16.1-4.2 28.5-11 36.9-15.4 19.2-49.3 22.4-85.2 25.7-28.2 2.6-57.4 5.4-81.3 16.9v-144c32.5-10.2 56-40.5 56-76.3 0-44.2-35.8-80-80-80S0 35.8 0 80c0 35.8 23.5 66.1 56 76.3v199.3C23.5 365.9 0 396.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-34-21.2-63.1-51.2-74.6 3.1-5.2 7.8-9.8 14.9-13.4 16.2-8.2 40.4-10.4 66.1-12.8 42.2-3.9 90-8.4 118.2-43.4 14-17.4 21.1-39.8 21.6-67.9 31.6-10.8 54.4-40.7 54.4-75.9zM80 64c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm0 384c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zm224-320c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`OpenSourceBadge component should render popover 1`] = `
+<div
+  aria-describedby="popover-open-source-badge-body"
+  aria-labelledby="popover-open-source-badge-header"
+  aria-modal="true"
+  class="pf-c-popover pf-m-top"
+  data-popper-escaped="true"
+  data-popper-placement="top"
+  data-popper-reference-hidden="true"
+  role="dialog"
+  style="opacity: 1; transition: opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11); position: absolute; left: 0px; top: 0px; z-index: 9999; bottom: 0px; transform: translate(0px, -25px);"
+>
+  <div
+    class="pf-c-popover__arrow"
+  />
+  <div
+    class="pf-c-popover__content"
+  >
+    <button
+      aria-disabled="false"
+      aria-label="Close"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="OUIA-Generated-Button-plain-3"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      style="pointer-events: auto;"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+    <h6
+      class="pf-c-title pf-m-md"
+      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-type="PF4/Title"
+      data-ouia-safe="true"
+      id="popover-open-source-badge-header"
+    >
+      About open source
+    </h6>
+    <div
+      class="pf-c-popover__body"
+      id="popover-open-source-badge-body"
+    >
+      <div
+        class="pf-c-content"
+      >
+        <p
+          class=""
+          data-ouia-component-id="OUIA-Generated-Text-1"
+          data-ouia-component-type="PF4/Text"
+          data-ouia-safe="true"
+          data-pf-content="true"
+        >
+          This service is open source, so all of its code is inspectable. Explore repositories to view and contribute to the source code.
+        </p>
+        <a
+          aria-disabled="false"
+          class="pf-c-button pf-m-link pf-m-inline"
+          data-ouia-component-id="OUIA-Generated-Button-link-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          target="_blank"
+        >
+          Repositories
+          <span
+            class="pf-c-button__icon pf-m-end"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 512 512"
+              width="1em"
+            >
+              <path
+                d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+              />
+            </svg>
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/components/src/OpenSourceBadge/index.ts b/packages/components/src/OpenSourceBadge/index.ts
@@ -0,0 +1,3 @@
+export { default } from './OpenSourceBadge';
+export { default as OpenSourceBadge } from './OpenSourceBadge';
+export * from './OpenSourceBadge';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -40,3 +40,4 @@ export * from './AsyncComponent';
 export * from './Ouia';
 export * from './ErrorBoundary';
 export * from './RBACProvider';
+export * from './OpenSourceBadge';
diff --git a/redhat-cloud-services-frontend-components-root-0.0.1.tgz b/redhat-cloud-services-frontend-components-root-0.0.1.tgz