Merge pull request #1486 from tailwarden/develop

v3.1.19 release 🚀

dashboard/components/banner/Banner.mocks.tsx

@@ -0,0 +1,89 @@
+import { StarIcon } from '@components/icons';
+import formatNumber from '@utils/formatNumber';
+import Image from 'next/image';
+import { BannerProps } from './Banner';
+
+const base: BannerProps = {
+  children: 'Banner Content',
+  displayBanner: true,
+  dismissBanner: () => {}
+};
+
+const primary: BannerProps = {
+  children: (
+    <>
+      <span className="text-sm font-medium">
+        Support Komiser by giving us a star on GitHub.
+      </span>
+
+      <a
+        href="https://github.com/tailwarden/komiser"
+        target="_blank"
+        rel="noreferrer"
+        className="group flex items-center gap-3 rounded border-[1.5px] border-white pl-4 text-sm text-white transition-colors hover:bg-white/10"
+      >
+        <Image
+          src="/assets/img/others/github-white.svg"
+          width="18"
+          height="16"
+          alt="Github logo"
+        />
+        <span>Star Komiser</span>
+        <div className="flex h-full items-center justify-center gap-2 border-l border-white/10 bg-white/10 px-3 py-2.5">
+          <StarIcon
+            width={16}
+            height={16}
+            className="group-hover:fill-orange-400 group-hover:text-orange-400"
+          />
+          {formatNumber(100000)}
+        </div>
+      </a>
+    </>
+  ),
+  displayBanner: true,
+  dismissBanner: () => {}
+};
+
+const secondary: BannerProps = {
+  children: (
+    <>
+      <span className="text-sm font-medium">
+        Support Komiser by giving us a star on GitHub.
+      </span>
+
+      <a
+        href="https://github.com/tailwarden/komiser"
+        target="_blank"
+        rel="noreferrer"
+        className="group flex items-center gap-3 rounded border-[1.5px] border-darkcyan-500 text-darkcyan-500 pl-4 text-sm transition-colors hover:bg-black/10"
+      >
+        <Image
+          src="/assets/img/others/github-black.svg"
+          width="18"
+          height="16"
+          alt="Github logo"
+        />
+        <span>Star Komiser</span>
+        <div className="flex h-full items-center justify-center gap-2 border-l border-black/10 bg-black/10 px-3 py-2.5">
+          <StarIcon
+            width={16}
+            height={16}
+            className="group-hover:fill-orange-400 group-hover:text-orange-400"
+          />
+          {formatNumber(100000)}
+        </div>
+      </a>
+    </>
+  ),
+  displayBanner: true,
+  dismissBanner: () => {},
+  style: 'secondary'
+};
+
+const mockBannerProps = {
+  base,
+  primary,
+  secondary
+};
+
+export default mockBannerProps;

dashboard/components/banner/Banner.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Banner from './Banner';
+import mockBannerProps from './Banner.mocks';
+
+const meta: Meta<typeof Banner> = {
+  title: 'Komiser/Banner',
+  component: Banner,
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof Banner>;
+
+export const Default: Story = {
+  args: {
+    ...mockBannerProps.base
+  }
+};
+
+export const Primary: Story = {
+  args: {
+    ...mockBannerProps.primary
+  }
+};
+
+export const Secondary: Story = {
+  args: {
+    ...mockBannerProps.secondary
+  }
+};

dashboard/components/banner/Banner.tsx

@@ -1,60 +1,40 @@
-import Image from 'next/image';
-import { useContext } from 'react';
 import classNames from 'classnames';
-import formatNumber from '../../utils/formatNumber';
-import GlobalAppContext from '../layout/context/GlobalAppContext';
-import StarIcon from '../icons/StarIcon';
+import { ReactNode } from 'react';
 
-type BannerProps = {
-  githubStars: number | undefined;
+export type BannerProps = {
+  children: ReactNode;
+  displayBanner: boolean;
+  dismissBanner: () => void;
+  style?: 'primary' | 'secondary';
 };
 
-function Banner({ githubStars }: BannerProps) {
-  const { displayBanner, dismissBanner } = useContext(GlobalAppContext);
+function Banner({
+  children,
+  displayBanner,
+  dismissBanner,
+  style = 'primary'
+}: BannerProps) {
+  const bannerStyle = classNames(
+    'top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br py-3 opacity-0',
+    {
+      fixed: displayBanner,
+      hidden: !displayBanner,
+      'text-white from-darkcyan-500 to-darkcyan-700': style === 'primary',
+      'text-black bg-white shadow-right': style === 'secondary'
+    }
+  );
+  const buttonStyle = classNames(
+    'absolute right-8 cursor-pointer rounded-lg p-3 transition-colors',
+    {
+      'text-white hover:bg-white/10 active:bg-gray-950': style === 'primary',
+      'text-black hover:bg-black/10': style === 'secondary'
+    }
+  );
 
   return (
-    <div
-      className={classNames(
-        'top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br from-darkcyan-500 to-darkcyan-700 py-3 opacity-0',
-        {
-          fixed: displayBanner,
-          hidden: !displayBanner
-        }
-      )}
-    >
-      <span className="text-sm font-medium text-white">
-        Support Komiser by giving us a star on GitHub.
-      </span>
-
-      {githubStars && (
-        <a
-          href="https://github.com/tailwarden/komiser"
-          target="_blank"
-          rel="noreferrer"
-          className="group flex items-center gap-3 rounded border-[1.5px] border-white pl-4 text-sm text-white transition-colors hover:bg-white/10"
-        >
-          <Image
-            src="/assets/img/others/github-white.svg"
-            width="18"
-            height="16"
-            alt="Github logo"
-          />
-          <span>Star Komiser</span>
-          <div className="flex h-full items-center justify-center gap-2 border-l border-white/10 bg-white/10 px-3 py-2.5">
-            <StarIcon
-              width={16}
-              height={16}
-              className="group-hover:fill-orange-400 group-hover:text-orange-400"
-            />
-            {formatNumber(githubStars)}
-          </div>
-        </a>
-      )}
-
-      <button
-        onClick={dismissBanner}
-        className="absolute right-8 cursor-pointer rounded-lg p-3 text-white transition-colors hover:bg-white/10 active:bg-gray-950"
-      >
+    <div className={bannerStyle}>
+      {children}
+      <button onClick={dismissBanner} className={buttonStyle}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"

dashboard/components/layout/Layout.tsx

@@ -4,9 +4,9 @@ import { useRouter } from 'next/router';
 import { ReactNode, useEffect } from 'react';
 import settingsService from '@services/settingsService';
 import { ToastProvider } from '@components/toast/ToastProvider';
+import GithubBanner from './components/github-banner/GithubBanner';
 import environment from '../../environments/environment';
-import Banner from '../banner/Banner';
-import useGithubStarBanner from '../banner/hooks/useGithubStarBanner';
+import useGithubStarBanner from './hooks/useGithubStarBanner';
 import Button from '../button/Button';
 import EmptyState from '../empty-state/EmptyState';
 import ErrorState from '../error-state/ErrorState';
@@ -55,7 +55,7 @@ function Layout({ children }: LayoutProps) {
     }
   }, [telemetry]);
 
-  const betaFlagOnboardingWizard = true; // set this to true once wizard gets good support of the backend 
+  const betaFlagOnboardingWizard = true; // set this to true once wizard gets good support of the backend
   const isOnboarding =
     betaFlagOnboardingWizard && router.pathname.startsWith('/onboarding');
 
@@ -77,7 +77,7 @@ function Layout({ children }: LayoutProps) {
 
         {!isOnboarding && (
           <>
-            <Banner githubStars={githubStars} />
+            <GithubBanner githubStars={githubStars} />
             <Navbar />
             <main
               className={classNames(

dashboard/components/layout/components/github-banner/GithubBanner.tsx

@@ -0,0 +1,49 @@
+import Banner from '@components/banner/Banner';
+import { StarIcon } from '@components/icons';
+import GlobalAppContext from '@components/layout/context/GlobalAppContext';
+import Image from 'next/image';
+import { useContext } from 'react';
+import formatNumber from '../../../../utils/formatNumber';
+
+type GithubBannerProps = {
+  githubStars: number | undefined;
+};
+
+function GithubBanner({ githubStars }: GithubBannerProps) {
+  const { displayBanner, dismissBanner } = useContext(GlobalAppContext);
+
+  return (
+    <Banner displayBanner={displayBanner} dismissBanner={dismissBanner}>
+      <span className="text-sm font-medium">
+        Support Komiser by giving us a star on GitHub.
+      </span>
+
+      {githubStars && (
+        <a
+          href="https://github.com/tailwarden/komiser"
+          target="_blank"
+          rel="noreferrer"
+          className="group flex items-center gap-3 rounded border-[1.5px] border-white pl-4 text-sm text-white transition-colors hover:bg-white/10"
+        >
+          <Image
+            src="/assets/img/others/github-white.svg"
+            width="18"
+            height="16"
+            alt="Github logo"
+          />
+          <span>Star Komiser</span>
+          <div className="flex h-full items-center justify-center gap-2 border-l border-white/10 bg-white/10 px-3 py-2.5">
+            <StarIcon
+              width={16}
+              height={16}
+              className="group-hover:fill-orange-400 group-hover:text-orange-400"
+            />
+            {formatNumber(githubStars)}
+          </div>
+        </a>
+      )}
+    </Banner>
+  );
+}
+
+export default GithubBanner;