Added support for showing a Lozenge in the InstallScreen App name (#77)

Author: ryanknittel-fdx

.changeset/four-ravens-admire.md

@@ -0,0 +1,6 @@
+---
+"examples-site": patch
+"bigcommerce-design-patterns": patch
+---
+
+Added support for showing a Lozenge in the InstallScreen App name via 2 new props: status & statusText

packages/examples-site/src/pages/InstallScreenPage/ChannelExample.tsx

@@ -178,6 +178,8 @@ const InstallScreenChannel: FunctionComponent = () => {
   // Configuration object for the app details
   const app = {
     name: "Catalyst",
+    status: "beta",
+    statusText: "Beta",
     termsOfServiceURL: "https://www.bigcommerce.com/legal/terms/",
     privacyPolicyURL: "https://www.bigcommerce.com/legal/privacy/",
     logoURL: "./assets/images/icons/bigc-inverted-black.svg",
@@ -217,7 +219,7 @@ const InstallScreenChannel: FunctionComponent = () => {
       <p><a href="https://github.com/bigcommerce/big-design-patterns-sandbox/blob/main/packages/examples-site/src/pages/InstallScreenPage/ChannelExample.tsx" target="_blank">View source code of this pattern</a></p>
       `,
     scopesDenied: [],
-  };
+  } satisfies React.ComponentProps<typeof InstallScreen>["app"];
 
   // Copy texts used in the InstallScreen component
   const copy = {
@@ -251,7 +253,7 @@ const InstallScreenChannel: FunctionComponent = () => {
     partnerTier: "Elite",
     scopesAllowed: ["read_products", "write_orders"],
     scopesDenied: ["write_customers"],
-  };
+  } satisfies React.ComponentProps<typeof InstallScreen>["copy"];
 
   // State to track form data changes
   const [formData, setFormData] = useState<FormDataType>();

packages/patterns/src/components/InstallScreen/InstallScreen.tsx

@@ -23,6 +23,7 @@ import {
   H2,
   Checkbox,
   Small,
+  Lozenge
 } from "@bigcommerce/big-design";
 import { Page } from "@bigcommerce/big-design-patterns";
 import { FeatureTag, FeatureTagProps } from "../featureTag/FeatureTag";
@@ -86,6 +87,8 @@ export interface InstallationCopy {
 export interface AppType {
   logoURL: string;
   name: string;
+  status?:  React.ComponentProps<typeof Lozenge>["variant"];
+  statusText?: string;
   developer: DeveloperType;
   description?: string;
   summary: string;
@@ -329,7 +332,20 @@ export const InstallScreen: FunctionComponent<InstallScreenProps> = ({
               </Box>
             </GridItem>
             <GridItem>
-              <H1 marginBottom={"xSmall"}>{app.name}</H1>
+              <H1 marginBottom={"xSmall"}>
+                <Flex
+                  flexDirection={{ mobile: "row" }}
+                  flexGap={theme.spacing.xSmall}
+                  flexWrap="wrap"
+                  justifyContent="flex-start"
+                  alignItems="center"
+                >
+                  <span>{app.name}</span>
+                  {app.status && app.statusText && (
+                    <Lozenge label={app.statusText} variant={app.status} />
+                  )}
+                </Flex>
+              </H1>
               <Link href={app.developer.url} target="_blank">
                 {app.developer.name}
               </Link>{" "}