@julseb-lib/react 0.0.30 → 0.0.31

package/dist/lib/components/Header/Header.tsx

@@ -26,7 +26,6 @@ import type {
  * @prop logo: LibHeaderLogo
  * @prop links: Array<LibHeaderLink> => only if children is not defined
  * @prop children?: ReactChildren => only if links is not defined
- * @prop variant?: LibHeaderVariant
  * @prop burgerPosition?: LibNavBurgerPosition
  * @prop burgerColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" { closed: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"; open: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background" }
  * @prop navDesktopVariant?: LibNavBurgerPosition
@@ -35,6 +34,10 @@ import type {
  * @prop search?: { pathname: string; queries?: Array<Array<string>>; iconLeft?: string | JSX.Element; iconLeftSize?: number; iconClear?: string | JSX.Element; iconClearSize?: number; iconBaseUrl?: string; placeholder?: string; keyboardShortcut?: Array<string>; showKeys?: boolean; inputBackground?: "light" | "dark"; maxWidth?: string | number; inputVariant?: "rounded" | "pill" }
  * @prop position?: LibHeaderPosition
  * @prop hideOnScroll?: boolean | number => only if position is set to fixed
+ * @prop variant?: "primary" | "white" | "transparent"
+ * @prop backgroundColor?: Any color from the library => only if variant is set to primary
+ * @prop textColor?: Any color from the library => only if variant is set to primary
+ * @prop linkColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font"
  */
 export const Header = forwardRef<HTMLDivElement, ILibHeader>(
     (
@@ -54,6 +57,9 @@ export const Header = forwardRef<HTMLDivElement, ILibHeader>(
             links,
             nav,
             enableScrollingOpen,
+            backgroundColor = "primary",
+            textColor = "background",
+            linkColor = "white",
             ...rest
         },
         ref
@@ -159,6 +165,9 @@ export const Header = forwardRef<HTMLDivElement, ILibHeader>(
                 $headerHeight={headerHeight}
                 $position={position}
                 $variant={variant}
+                $backgroundColor={backgroundColor}
+                $linkColor={linkColor}
+                $textColor={textColor}
                 {...rest}
             >
                 {burgerPosition === "left" && <HeaderBurger {...burgerProps} />}

package/dist/lib/components/Header/styles.tsx

@@ -17,6 +17,8 @@ import {
     LINE_HEIGHTS,
 } from "../../"
 import type {
+    LibAllColors,
+    LibColorsHover,
     LibHeaderPosition,
     LibHeaderVariant,
     LibNavBurgerPosition,
@@ -27,7 +29,7 @@ const LogoImg = styled(Image).attrs({ fit: "contain" })`
     object-position: left center;
     position: relative;
     z-index: 999;
-`
+` as any
 
 const Logo = styled(Link)`
     position: relative;
@@ -49,6 +51,9 @@ const StyledHeader = styled.header<{
     $burgerPosition: LibNavBurgerPosition
     $position: LibHeaderPosition
     $headerHeight: number
+    $backgroundColor: LibAllColors
+    $textColor: LibAllColors
+    $linkColor: LibColorsHover
 }>`
     position: ${({ $position }) => $position};
     left: 0;
@@ -62,6 +67,9 @@ const StyledHeader = styled.header<{
     })};
     padding: ${SPACERS.M} 5vw;
     transition: ${TRANSITIONS.SHORT};
+    background-color: ${({ $backgroundColor }) =>
+        Mixins.AllColors($backgroundColor)};
+    color: ${({ $textColor }) => Mixins.AllColors($textColor)};
 
     @media ${BREAKPOINTS.MOBILE} {
         height: ${({ $headerHeight }) => $headerHeight}px;
@@ -103,7 +111,7 @@ const StyledHeader = styled.header<{
             }
         `}
 
-    ${({ $variant }) =>
+    ${({ $variant, $linkColor }) =>
         ($variant === "white" || $variant === "transparent") &&
         css`
             & > a,
@@ -111,28 +119,28 @@ const StyledHeader = styled.header<{
             & > nav > a,
             & > nav > button {
                 color: ${({ theme }) =>
-                    Mixins.ColorsHoverDefault("primary", theme)};
+                    Mixins.ColorsHoverDefault($linkColor, theme)};
 
                 @media ${BREAKPOINTS.HOVER} {
                     &:hover {
                         color: ${({ theme }) =>
-                            Mixins.ColorsHoverHover("primary", theme)};
+                            Mixins.ColorsHoverHover($linkColor, theme)};
                     }
 
                     &:active {
                         color: ${({ theme }) =>
-                            Mixins.ColorsHoverActive("primary", theme)};
+                            Mixins.ColorsHoverActive($linkColor, theme)};
                     }
                 }
             }
 
             & > ${Logo} {
                 color: ${({ theme }) =>
-                    Mixins.ColorsHoverDefault("primary", theme)};
+                    Mixins.ColorsHoverDefault($linkColor, theme)};
             }
         `}
     
-    ${({ $variant, theme }) => {
+    ${({ $variant, theme, $backgroundColor, $textColor, $linkColor }) => {
         switch ($variant) {
             case "white":
                 return css`
@@ -181,30 +189,29 @@ const StyledHeader = styled.header<{
                 `
             case "primary":
                 return css`
-                    background-color: ${theme.PRIMARY_500};
-                    color: ${Mixins.ColorsHoverDefault("white", theme)};
+                    background-color: ${Mixins.AllColors(
+                        $backgroundColor,
+                        theme
+                    )};
+                    color: ${Mixins.AllColors($textColor, theme)};
 
                     & > a,
                     & > button:not(${StyledHeaderBurger}),
                     & > nav > a,
                     & > nav > button,
                     & > ${Logo} {
-                        color: ${({ theme }) =>
-                            Mixins.ColorsHoverDefault("background", theme)};
+                        color: ${Mixins.ColorsHoverDefault($linkColor, theme)};
 
                         @media ${BREAKPOINTS.HOVER} {
                             &:hover {
                                 color: ${({ theme }) =>
-                                    Mixins.ColorsHoverHover(
-                                        "background",
-                                        theme
-                                    )};
+                                    Mixins.ColorsHoverHover($linkColor, theme)};
                             }
 
                             &:active {
                                 color: ${({ theme }) =>
                                     Mixins.ColorsHoverActive(
-                                        "background",
+                                        $linkColor,
                                         theme
                                     )};
                             }

package/dist/lib/components/Header/types.ts

@@ -12,12 +12,12 @@ import type {
     ReactChildren,
     LibHeaderVariant,
     LibColorsHover,
+    LibAllColors,
 } from "../../types"
 import type { LibHeaderLogo } from "./subtypes"
 
 interface ILibHeaderBase extends LibComponentBase<HTMLDivElement> {
     logo: LibHeaderLogo
-    variant?: LibHeaderVariant
     burgerPosition?: LibNavBurgerPosition
     burgerColor?:
         | LibColorsHover
@@ -72,4 +72,20 @@ type HeaderWithChildren = HeaderPosition & {
     children?: ReactChildren
 }
 
-export type ILibHeader = HeaderWithLinks | HeaderWithNav | HeaderWithChildren
+type LibHeaderChildren = HeaderWithLinks | HeaderWithNav | HeaderWithChildren
+
+type HeaderWithBackground = LibHeaderChildren & {
+    variant?: Extract<LibHeaderVariant, "primary">
+    backgroundColor?: LibAllColors
+    textColor?: LibAllColors
+    linkColor?: LibColorsHover
+}
+
+type HeaderWithoutBackground = LibHeaderChildren & {
+    variant?: Exclude<LibHeaderVariant, "primary">
+    backgroundColor?: never
+    textColor?: never
+    linkColor?: never
+}
+
+export type ILibHeader = HeaderWithBackground | HeaderWithoutBackground

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.30",
+    "version": "0.0.31",
     "type": "module",
     "license": "MIT",
     "scripts": {