Merge pull request #1010 from t3n/nav

feat: ✨ set /dein-abo label dynamically
t3n · Dec 10, 2024 · 56f38f8 · 56f38f8
2 parents fe5ec40 + ccbddf6
commit 56f38f8
Show file tree

Hide file tree

Showing 13 changed files with 446 additions and 414 deletions.
diff --git a/packages/components/src/IconButton/IconButton.d.ts b/packages/components/src/IconButton/IconButton.d.ts
@@ -23,5 +23,6 @@ export interface IconButtonATypeProps extends IconButtonBaseProps, Omit<AnchorHT
 }
 export type IconButtonProps = IconButtonATypeProps | IconButtonButtonTypeProps;
 export declare const iconButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ThemeProps & IconButtonProps, any>>;
+export declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, IconButtonProps, never>;
 declare const IconButton: React.FC<IconButtonProps>;
 export default IconButton;
diff --git a/packages/components/src/IconButton/IconButton.tsx b/packages/components/src/IconButton/IconButton.tsx
@@ -257,12 +257,7 @@ export const iconButtonStyles = css`
     `}
 `;
 
-const StyledIconButton = styled(
-  ({ expanded, icon, loading, ...rest }: IconButtonProps) => (
-    // eslint-disable-next-line react/button-has-type
-    <button {...rest} />
-  ),
-)<IconButtonProps>`
+export const StyledIconButton = styled.button<IconButtonProps>`
   ${iconButtonStyles}
 `;
 
@@ -314,7 +309,7 @@ const IconButton: React.FC<IconButtonProps> = (props) => {
   return (
     <StyledIconButton
       href={href}
-      as={href ? 'a' : as}
+      as={as}
       size={size}
       icon={icon}
       expanded={expanded}

diff --git a/packages/components/src/LegacyFooter/LegacyDesktopFooter.d.ts b/packages/components/src/LegacyFooter/LegacyDesktopFooter.d.ts
@@ -13,6 +13,7 @@ export type DesktopLinkGroupsType = {
 }[];
 export interface LegacyDesktopFooterProps {
     privacyManagerId: string;
+    isProMember?: boolean;
 }
 declare const LegacyDesktopFooter: React.FC<LegacyDesktopFooterProps>;
 export default LegacyDesktopFooter;
diff --git a/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx b/packages/components/src/LegacyFooter/LegacyDesktopFooter.tsx
@@ -23,6 +23,7 @@ export type DesktopLinkGroupsType = {
 
 export interface LegacyDesktopFooterProps {
   privacyManagerId: string;
+  isProMember?: boolean;
 }
 
 const LegacyDesktopFooterWrapper = styled(Box)`
@@ -105,149 +106,150 @@ const LegacyExtraSmallText = styled(Text)`
   line-height: 1.5em !important;
 `;
 
-const legacyDesktopLinkGroups: DesktopLinkGroupsType = [
-  {
-    label: 'yeebase media',
-    links: [
-      {
-        label: 'Über t3n',
-        url: '/ueber-t3n/',
-      },
-      {
-        label: 'Team',
-        url: '/team',
-      },
-      {
-        label: 'Jobs bei t3n',
-        url: '/jobs-bei-t3n/',
-      },
-      {
-        label: 't3n Backstage Blog',
-        title: 'Die externe Seite im neuen Tab/Fenster öffnen',
-        url: 'https://medium.com/@t3nbackstageblog',
-        target: '_blank',
-        rel: 'noreferrer noopener',
-      },
-      {
-        label: 'Mediadaten',
-        url: '/mediadaten/de/',
-      },
-      {
-        label: 'Datenschutz',
-        url: '/datenschutz/',
-      },
-      {
-        label: 'Cookies & Tracking',
-        url: '#',
-        onClick: (e, id) => {
-          e.preventDefault();
-          // eslint-disable-next-line no-underscore-dangle
-          (window as any)._sp_.loadPrivacyManagerModal(id);
-        },
-      },
-      {
-        label: 'FAQ',
-        title: 'Die externe Seite im neuen Tab/Fenster öffnen',
-        url: 'https://faq.t3n.de/',
-        target: '_blank',
-        rel: 'noreferrer noopener',
-      },
-      {
-        label: 'Abo kündigen',
-        url: '/abo-kuendigen/',
-      },
-      {
-        label: 'Kontakt',
-        url: '/kontakt/',
-      },
-      {
-        label: 'AGB',
-        url: '/agb/',
-      },
-      {
-        label: 'Widerrufsbelehrung',
-        url: '/agb/#widerrufsbelehrung',
-      },
-      {
-        label: 'Impressum',
-        url: '/impressum/',
-      },
-    ],
-  },
-  {
-    label: 't3n',
-    links: [
-      {
-        label: 'Plus',
-        url: '/plus-artikel',
-      },
-      {
-        label: 'Digitale Abos',
-        url: 'https://l.t3n.de/abos',
-      },
-      {
-        label: 'News',
-        url: '/news/',
-      },
-      {
-        label: 'Magazin',
-        url: '/magazin/',
-      },
-      {
-        label: 'Podcasts',
-        url: '/podcast/',
-      },
-      {
-        label: 'Themen',
-        url: '/tag/',
-      },
-      {
-        label: 'Jobs',
-        url: 'https://jobs.t3n.de',
-      },
-      {
-        label: 'Events',
-        url: '/events/',
-      },
-      {
-        label: 'Shop',
-        url: '/store/',
-      },
-      {
-        label: 'Newsletter',
-        url: '/info/t3n-newsletter/',
-      },
-      {
-        label: 'Newsarchiv',
-        url: '/archive/',
-      },
-      {
-        label: 'BrandHubs',
-        url: '/brandhub/',
-      },
-    ],
-  },
-  {
-    label: 'RSS-Feeds',
-    links: [
-      {
-        label: 'Aktuelle News',
-        url: '/rss.xml',
-      },
-      {
-        label: 'Die neuesten Artikel',
-        title: 'Die externe Seite im neuen Tab/Fenster öffnen',
-        url: 'http://feeds2.feedburner.com/t3n-magazin/',
-        target: '_blank',
-        rel: 'noreferrer noopener',
-      },
-    ],
-  },
-];
-
 const LegacyDesktopLinks: React.FC<LegacyDesktopFooterProps> = ({
   privacyManagerId,
+  isProMember,
 }) => {
+  const legacyDesktopLinkGroups: DesktopLinkGroupsType = [
+    {
+      label: 'yeebase media',
+      links: [
+        {
+          label: 'Über t3n',
+          url: '/ueber-t3n/',
+        },
+        {
+          label: 'Team',
+          url: '/team',
+        },
+        {
+          label: 'Jobs bei t3n',
+          url: '/jobs-bei-t3n/',
+        },
+        {
+          label: 't3n Backstage Blog',
+          title: 'Die externe Seite im neuen Tab/Fenster öffnen',
+          url: 'https://medium.com/@t3nbackstageblog',
+          target: '_blank',
+          rel: 'noreferrer noopener',
+        },
+        {
+          label: 'Mediadaten',
+          url: '/mediadaten/de/',
+        },
+        {
+          label: 'Datenschutz',
+          url: '/datenschutz/',
+        },
+        {
+          label: 'Cookies & Tracking',
+          url: '#',
+          onClick: (e, id) => {
+            e.preventDefault();
+            // eslint-disable-next-line no-underscore-dangle
+            (window as any)._sp_.loadPrivacyManagerModal(id);
+          },
+        },
+        {
+          label: 'FAQ',
+          title: 'Die externe Seite im neuen Tab/Fenster öffnen',
+          url: 'https://faq.t3n.de/',
+          target: '_blank',
+          rel: 'noreferrer noopener',
+        },
+        {
+          label: 'Abo kündigen',
+          url: '/abo-kuendigen/',
+        },
+        {
+          label: 'Kontakt',
+          url: '/kontakt/',
+        },
+        {
+          label: 'AGB',
+          url: '/agb/',
+        },
+        {
+          label: 'Widerrufsbelehrung',
+          url: '/agb/#widerrufsbelehrung',
+        },
+        {
+          label: 'Impressum',
+          url: '/impressum/',
+        },
+      ],
+    },
+    {
+      label: 't3n',
+      links: [
+        {
+          label: isProMember ? 'Pro' : 'Plus',
+          url: '/dein-abo',
+        },
+        {
+          label: 'Digitale Abos',
+          url: 'https://l.t3n.de/abos',
+        },
+        {
+          label: 'News',
+          url: '/news/',
+        },
+        {
+          label: 'Magazin',
+          url: '/magazin/',
+        },
+        {
+          label: 'Podcasts',
+          url: '/podcast/',
+        },
+        {
+          label: 'Themen',
+          url: '/tag/',
+        },
+        {
+          label: 'Jobs',
+          url: 'https://jobs.t3n.de',
+        },
+        {
+          label: 'Events',
+          url: '/events/',
+        },
+        {
+          label: 'Shop',
+          url: '/store/',
+        },
+        {
+          label: 'Newsletter',
+          url: '/info/t3n-newsletter/',
+        },
+        {
+          label: 'Newsarchiv',
+          url: '/archive/',
+        },
+        {
+          label: 'BrandHubs',
+          url: '/brandhub/',
+        },
+      ],
+    },
+    {
+      label: 'RSS-Feeds',
+      links: [
+        {
+          label: 'Aktuelle News',
+          url: '/rss.xml',
+        },
+        {
+          label: 'Die neuesten Artikel',
+          title: 'Die externe Seite im neuen Tab/Fenster öffnen',
+          url: 'http://feeds2.feedburner.com/t3n-magazin/',
+          target: '_blank',
+          rel: 'noreferrer noopener',
+        },
+      ],
+    },
+  ];
+
   return (
     <DesktopLinkWrapper>
       {legacyDesktopLinkGroups.map((group) => (
@@ -388,6 +390,7 @@ const LegacyDesktopBottom = () => {
 
 const LegacyDesktopFooter: React.FC<LegacyDesktopFooterProps> = ({
   privacyManagerId,
+  isProMember,
 }) => {
   return (
     <LegacyDesktopFooterWrapper>
@@ -397,7 +400,10 @@ const LegacyDesktopFooter: React.FC<LegacyDesktopFooterProps> = ({
             Spreading knowledge &amp; future optimism.
           </MissonStatement>
         </GridItem>
-        <LegacyDesktopLinks privacyManagerId={privacyManagerId} />
+        <LegacyDesktopLinks
+          privacyManagerId={privacyManagerId}
+          isProMember={isProMember}
+        />
       </Box>
       <LegacyDesktopBottom />
     </LegacyDesktopFooterWrapper>

diff --git a/packages/components/src/LegacyFooter/LegacyFooter.d.ts b/packages/components/src/LegacyFooter/LegacyFooter.d.ts
@@ -1,6 +1,7 @@
 import React from 'react';
 export interface LegacyFooterProps {
     privacyManagerId: string;
+    isProMember?: boolean;
 }
 declare const LegacyFooter: React.FC<LegacyFooterProps>;
 export default LegacyFooter;