create logo container

app/scripts/components/common/page-header/logo-container.tsx

@@ -0,0 +1,30 @@
+import React, { ComponentType } from 'react';
+import { Tip } from '../tip';
+import { LinkProperties } from '../card';
+import { Brand, PageTitleSecLink } from './logo';
+/**
+ * LogoContainer that is meant to integrate in the default page header without the dependencies of the veda virtual modules
+ * and expects the Logo SVG to be passed in as a prop - this will support the instance for refactor
+ */
+
+export default function LogoContainer ({ linkProperties, Logo, title, subTitle, version }: {
+  linkProperties: LinkProperties,
+  Logo: JSX.Element,
+  title: string,
+  subTitle: string,
+  version: string
+}) {
+  const LinkElement: ComponentType<any> = linkProperties.LinkElement as ComponentType<any>;
+
+  return (
+    <Brand>
+      <LinkElement {...{[linkProperties.pathAttributeKeyName]: '/'}}>
+        {Logo}
+        <span>{title}</span> <span>{subTitle}</span>
+      </LinkElement>
+      <Tip content={`v${version}`}>
+      <PageTitleSecLink {...{as: linkProperties.LinkElement as ComponentType<any>, [linkProperties.pathAttributeKeyName]: '/development'}}>Beta</PageTitleSecLink>
+      </Tip>
+    </Brand>
+  );
+}

app/scripts/components/common/page-header/logo.tsx

@@ -9,7 +9,7 @@ import { ComponentOverride } from '$components/common/page-overrides';
 const appTitle = process.env.APP_TITLE;
 const appVersion = process.env.APP_VERSION;
 
-const Brand = styled.div`
+export const Brand = styled.div`
   display: flex;
   flex-shrink: 0;
 
@@ -74,7 +74,7 @@ const Brand = styled.div`
   }
 `;
 
-const PageTitleSecLink = styled.a`
+export const PageTitleSecLink = styled.a`
   align-self: end;
   font-size: 0.75rem;
   font-weight: ${themeVal('type.base.bold')};

app/scripts/index.ts

@@ -17,7 +17,7 @@ import PageHero from '$components/common/page-hero';
 import StoriesHubContent from '$components/stories/hub/hub-content';
 import { useFiltersWithQS } from '$components/common/catalog/controls/hooks/use-filters-with-query';
 import PageHeader from '$components/common/page-header';
-import Logo from '$components/common/page-header/logo';
+import LogoContainer from '$components/common/page-header/logo-container';
 
 
 export {
@@ -41,7 +41,7 @@ export {
   PageHeader,
   ReactQueryProvider,
   StoriesHubContent,
-  Logo,
+  LogoContainer,
   // HOOKS and utility functions
   useFiltersWithQS
 };