chore: Added Button variant as Neutral white & white & Updated Icons for banner

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.13.0-pre-0",
+    "version": "1.13.0-pre-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Shared/Components/Button/button.scss

@@ -79,7 +79,7 @@
 
         @if ($color) {
             color: $color;
-    
+
             @include svg-styles($color);
         }
     }
@@ -216,6 +216,14 @@
         &--neutral {
             @include button-variant-styles($background, var(--N700), $border-color);
         }
+
+        &--neutral-n0 {
+            @include button-variant-styles($background, var(--N0), $border-color);
+        }
+
+        &--neutral-white {
+            @include button-variant-styles($background, var(--white), $border-color);
+        }
     }
 
     // Pseudo states for border-less button
@@ -243,6 +251,14 @@
         &--neutral {
             @include pseudo-states(var(--N100), var(--N200));
         }
+
+        &--neutral-n0 {
+            @include pseudo-states(var(--N000), var(--N100));
+        }
+
+        &--neutral-white {
+            @include pseudo-states(var(--white), var(--N100));
+        }
     }
 
     // Overrides for text button
@@ -253,7 +269,9 @@
         &--negative-grey,
         &--positive,
         &--warning,
-        &--neutral {
+        &--neutral,
+        &--neutral-n0,
+        &--neutral-white {
             padding: 0 !important;
             min-width: 0 !important;
             border: none;
@@ -279,4 +297,4 @@
             text-decoration: none;
         }
     }
-}
+}

src/Shared/Components/Button/types.ts

@@ -35,6 +35,8 @@ export enum ButtonStyleType {
     positive = 'positive',
     warning = 'warning',
     neutral = 'neutral',
+    neutralN0 = 'neutral-n0',
+    neutralWhite = 'neutral-white',
 }
 
 export enum ButtonComponentType {

src/Shared/Components/Header/PageHeader.tsx

@@ -26,7 +26,6 @@ import { ReactComponent as ICMediumPaintBucket } from '@IconsV2/ic-medium-paintb
 import { getAlphabetIcon, TippyCustomized, TippyTheme } from '../../../Common'
 import { MAX_LOGIN_COUNT, POSTHOG_EVENT_ONBOARDING } from '../../../Common/Constants'
 import { useMainContext, useTheme, useUserEmail } from '../../Providers'
-import AnnouncementBanner from '../AnnouncementBanner/AnnouncementBanner'
 import GettingStartedCard from '../GettingStartedCard/GettingStarted'
 import { InfoIconTippy } from '../InfoIconTippy'
 import LogoutCard from '../LogoutCard'
@@ -49,7 +48,6 @@ const PageHeader = ({
     showCloseButton = false,
     onClose,
     markAsBeta,
-    showAnnouncementHeader,
     tippyProps,
 }: PageHeaderType) => {
     const {
@@ -313,7 +311,6 @@ const PageHeader = ({
                     {renderLogoutHelpSection()}
                 </div>
             )}
-            {showAnnouncementHeader && <AnnouncementBanner parentClassName="page-header-banner" />}
         </div>
     )
 }

src/Shared/Components/Header/types.ts

@@ -35,7 +35,6 @@ export interface PageHeaderType {
     showCloseButton?: boolean
     onClose?: () => void
     markAsBeta?: boolean
-    showAnnouncementHeader?: boolean
     tippyProps?: Pick<TippyCustomizedProps, 'additionalContent'> & {
         isTippyCustomized?: boolean
         tippyRedirectLink?: string

src/Shared/Components/Icon/Icon.tsx

@@ -48,6 +48,7 @@ import { ReactComponent as ICDeleteLightning } from '@IconsV2/ic-delete-lightnin
 import { ReactComponent as ICDelhivery } from '@IconsV2/ic-delhivery.svg'
 import { ReactComponent as ICDevtron } from '@IconsV2/ic-devtron.svg'
 import { ReactComponent as ICDevtronHeaderLogo } from '@IconsV2/ic-devtron-header-logo.svg'
+import { ReactComponent as ICDisconnect } from '@IconsV2/ic-disconnect.svg'
 import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg'
 import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg'
 import { ReactComponent as ICEnv } from '@IconsV2/ic-env.svg'
@@ -57,6 +58,7 @@ import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg'
 import { ReactComponent as ICFileKey } from '@IconsV2/ic-file-key.svg'
 import { ReactComponent as ICFolderUser } from '@IconsV2/ic-folder-user.svg'
 import { ReactComponent as ICGear } from '@IconsV2/ic-gear.svg'
+import { ReactComponent as ICGift } from '@IconsV2/ic-gift.svg'
 import { ReactComponent as ICGiftGradient } from '@IconsV2/ic-gift-gradient.svg'
 import { ReactComponent as ICGit } from '@IconsV2/ic-git.svg'
 import { ReactComponent as ICGithub } from '@IconsV2/ic-github.svg'
@@ -92,6 +94,7 @@ import { ReactComponent as ICLoginDevtronLogo } from '@IconsV2/ic-login-devtron-
 import { ReactComponent as ICLogout } from '@IconsV2/ic-logout.svg'
 import { ReactComponent as ICMediumDelete } from '@IconsV2/ic-medium-delete.svg'
 import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintbucket.svg'
+import { ReactComponent as ICMegaphoneLeft } from '@IconsV2/ic-megaphone-left.svg'
 import { ReactComponent as ICMemory } from '@IconsV2/ic-memory.svg'
 import { ReactComponent as ICMicrosoft } from '@IconsV2/ic-microsoft.svg'
 import { ReactComponent as ICMinikube } from '@IconsV2/ic-minikube.svg'
@@ -116,6 +119,7 @@ import { ReactComponent as ICSlidersVertical } from '@IconsV2/ic-sliders-vertica
 import { ReactComponent as ICSortAscending } from '@IconsV2/ic-sort-ascending.svg'
 import { ReactComponent as ICSortDescending } from '@IconsV2/ic-sort-descending.svg'
 import { ReactComponent as ICSortable } from '@IconsV2/ic-sortable.svg'
+import { ReactComponent as ICSparkleColor } from '@IconsV2/ic-sparkle-color.svg'
 import { ReactComponent as ICSpinny } from '@IconsV2/ic-spinny.svg'
 import { ReactComponent as ICStack } from '@IconsV2/ic-stack.svg'
 import { ReactComponent as ICStamp } from '@IconsV2/ic-stamp.svg'
@@ -189,6 +193,7 @@ export const iconMap = {
     'ic-delhivery': ICDelhivery,
     'ic-devtron-header-logo': ICDevtronHeaderLogo,
     'ic-devtron': ICDevtron,
+    'ic-disconnect': ICDisconnect,
     'ic-dockerhub': ICDockerhub,
     'ic-ecr': ICEcr,
     'ic-env': ICEnv,
@@ -199,6 +204,7 @@ export const iconMap = {
     'ic-folder-user': ICFolderUser,
     'ic-gear': ICGear,
     'ic-gift-gradient': ICGiftGradient,
+    'ic-gift': ICGift,
     'ic-git': ICGit,
     'ic-github': ICGithub,
     'ic-gitlab': ICGitlab,
@@ -233,6 +239,7 @@ export const iconMap = {
     'ic-logout': ICLogout,
     'ic-medium-delete': ICMediumDelete,
     'ic-medium-paintbucket': ICMediumPaintbucket,
+    'ic-megaphone-left': ICMegaphoneLeft,
     'ic-memory': ICMemory,
     'ic-microsoft': ICMicrosoft,
     'ic-minikube': ICMinikube,
@@ -257,6 +264,7 @@ export const iconMap = {
     'ic-sort-ascending': ICSortAscending,
     'ic-sort-descending': ICSortDescending,
     'ic-sortable': ICSortable,
+    'ic-sparkle-color': ICSparkleColor,
     'ic-spinny': ICSpinny,
     'ic-stack': ICStack,
     'ic-stamp': ICStamp,

src/Shared/Components/InfoBlock/InfoBlock.component.tsx

@@ -14,15 +14,14 @@
  * limitations under the License.
  */
 
-import { ComponentSizeType } from '@Shared/constants'
+import { ComponentSizeType, VARIANT_TO_BG_MAP, VARIANT_TO_BORDER_MAP } from '@Shared/constants'
 import { deriveBorderRadiusAndBorderClassFromConfig } from '@Shared/Helpers'
 
 import { Button } from '../Button'
 import {
     CONTAINER_SIZE_TO_BUTTON_SIZE,
     CONTAINER_SIZE_TO_CLASS_MAP,
     SIZE_TO_ICON_CLASS_MAP,
-    VARIANT_TO_BG_MAP,
     VARIANT_TO_ICON_MAP,
 } from './constants'
 import { InfoBlockProps } from './types'
@@ -38,7 +37,7 @@ const InfoBlock = ({
     borderRadiusConfig,
     borderConfig,
 }: InfoBlockProps) => {
-    const baseContainerClass = `${CONTAINER_SIZE_TO_CLASS_MAP[size]} ${VARIANT_TO_BG_MAP[variant]} ${deriveBorderRadiusAndBorderClassFromConfig({ borderConfig, borderRadiusConfig })} w-100 py-8 br-4 bw-1`
+    const baseContainerClass = `${CONTAINER_SIZE_TO_CLASS_MAP[size]} ${VARIANT_TO_BG_MAP[variant]} ${VARIANT_TO_BORDER_MAP[variant]} ${deriveBorderRadiusAndBorderClassFromConfig({ borderConfig, borderRadiusConfig })} w-100 py-8 br-4 bw-1`
     const iconClass = `dc__no-shrink flex dc__fill-available-space ${SIZE_TO_ICON_CLASS_MAP[size]}`
     const icon = customIcon ?? VARIANT_TO_ICON_MAP[variant]