feat: get product attribute to set demo link

Author: gndz07

public/index.html

@@ -6,6 +6,13 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Traefik Header Web Component to use in any framework" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+     point this script src to the local build
+    -->
+    <script
+      type="text/javascript"
+      src="/build/static/js/"
+    ></script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.tsx

@@ -8,7 +8,7 @@ import FontGlobalStyle from 'components/nav/FontGlobalStyle'
 
 const FaencyProvider = Provider as React.FC<ComponentProps<typeof Provider> & { children: ReactNode }>
 
-function App() {
+function App({ product }: { product?: string }) {
   return (
     <SWRConfig
       value={{
@@ -19,7 +19,7 @@ function App() {
       <FaencyProvider>
         <DrawerGlobalStyle />
         <FontGlobalStyle />
-        <Header />
+        <Header product={product} />
       </FaencyProvider>
     </SWRConfig>
   )

src/components/nav/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { Nav as FaencyNav, NavContainer as FaencyNavContainer, theme, Flex, Box } from '@containous/faency'
 import styled, { createGlobalStyle } from 'styled-components'
 import Logo from 'components/Logo'
@@ -113,10 +113,16 @@ const Hamburger = styled.div`
   }
 `
 
-const Header = () => {
+const Header = ({ product }: { product?: string }) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [isHeaderScrolled, setHeaderScrolled] = useState(false)
 
+  const demoLink = useMemo(() => {
+    if (product === 'hub') return 'https://info.traefik.io/traefik-hub-signup'
+
+    return 'https://info.traefik.io/en/request-demo-traefik-enterprise'
+  }, [product])
+
   useEffect(() => {
     const adjustHeaderHeight = function () {
       const breakpoint = 40
@@ -179,7 +185,7 @@ const Header = () => {
                   </svg>
                 </NavIconButton>
                 <NavButton href="https://info.traefik.io/speak-with-an-expert">Speak with an expert</NavButton>
-                <NavButtonPrimary href="https://info.traefik.io/en/request-demo-traefik-enterprise">
+                <NavButtonPrimary href={demoLink}>
                   Get a Demo
                 </NavButtonPrimary>
               </Flex>

src/utils/register-custom-element.tsx

@@ -15,13 +15,11 @@ type Args<P extends BaseProps> = {
  * Register a custom element that wraps a React component.
  *
  * @param name       - the name of the custom element
- * @param attributes - the names of the custom element's attributes
  * @param component  - the React component
  */
 export default function registerCustomElement<P extends BaseProps>({
   name,
   component: Component,
-  attributes = [],
 }: Args<P>) {
   const webComponentClass = class extends HTMLElement {
     private readonly styleHost: HTMLElement
@@ -37,13 +35,7 @@ export default function registerCustomElement<P extends BaseProps>({
 
     connectedCallback() {
       if (this.isConnected) {
-        const attrs = attributes?.reduce(
-          (acc, key) =>
-            Object.assign(acc, {
-              [key]: this.getAttribute(key) ?? undefined,
-            }),
-          {} as P,
-        )
+        const attrs = Object.assign({}, ...Array.from(this.attributes, ({ name, value }) => ({ [name]: value })))
 
         this.shadowRoot?.appendChild(this.styleHost)
         this.shadowRoot?.appendChild(this.mountPoint)