feat: add children and actions to banner component

packages/components/all/src/banner/index.tsx

@@ -1,15 +1,33 @@
 import React from "react";
 import styles from "./styles/index.module.scss";
 import classNames from "classnames";
+import { Container } from "../container";
+import { ThemeContextProvider } from "@rck/theme";
 
-export interface BannerProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-  children?: never;
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string;
+  alt?: string;
+  actions?: React.ReactNode[];
 }
 
 export const Banner = ({
-  className,
+  src,
   alt,
+  actions,
+  children,
+  className,
   ...otherProps
 }: Readonly<BannerProps>): React.ReactElement => (
-  <img className={classNames(styles.root, className)} alt={alt} {...otherProps} />
+  <ThemeContextProvider
+    value={{
+      inverted: true,
+    }}>
+    <div className={classNames(styles.root, className)} {...otherProps}>
+      <Container spacingY className={styles.container} variation="big">
+        {children}
+        {actions?.length && <div className={styles.actions}>{actions}</div>}
+      </Container>
+      <img className={styles.image} alt={alt} src={src} />
+    </div>
+  </ThemeContextProvider>
 );

packages/components/all/src/banner/styles/index.module.scss

@@ -1,9 +1,34 @@
 @import "@rck/theme";
 
 .root {
+  display: flex;
+  align-items: center;
   background-color: get-color("neutral-200");
-  display: block;
-  height: 300px;
-  object-fit: cover;
   width: 100%;
+  min-height: 300px;
+  position: relative;
+
+  .container {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+  }
+
+  .image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  .actions {
+    display: flex;
+    gap: get-spacing(1);
+
+    &:not(:only-child) {
+      margin-top: get-spacing(2);
+    }
+  }
 }

packages/components/all/src/container/index.module.scss

@@ -13,16 +13,16 @@
 .horizontal {
   @include define-css-var(container, max-width, 1300px);
   @include define-css-var(container, spacing-x, 50px);
-
-  .small {
-    color: red;
-  }
 }
 
 .vertical {
   @include define-css-var(container, spacing-y, 30px);
+}
+
+.small {
+  @include define-css-var(container, spacing-y, 16px);
+}
 
-  .small {
-    @include define-css-var(container, spacing-y, 16px);
-  }
+.big {
+  @include define-css-var(container, spacing-y, 60px);
 }

packages/components/all/src/container/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./index.module.scss";
 import classNames from "classnames";
 
-type ContainerVariation = "small";
+type ContainerVariation = "small" | "big";
 
 export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   variation?: ContainerVariation | ContainerVariation[];
@@ -11,14 +11,13 @@ export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const Container = ({
-  variation,
+  variation = [],
   spacingX = true,
   spacingY,
   className,
   ...otherProps
 }: Readonly<ContainerProps>): React.ReactElement => {
-  const computedVariations =
-    Array.isArray(variation) || variation === undefined ? variation : [variation];
+  const computedVariations = Array.isArray(variation) ? variation : [variation];
 
   return (
     <div

packages/components/all/src/text/styles/index.module.scss

@@ -55,6 +55,8 @@
 
 .huge {
   @include define-css-var(text, font-size, 60px);
+  @include define-css-var(text, line-height, 60px);
+  @include define-css-var(text, font-weight, 700);
 }
 
 .soft {