@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/components/BodyBanner/BodyBanner.mdx

@@ -0,0 +1,268 @@
+---
+title: BodyBanner
+description: A versatile banner component for displaying content with images and call-to-action buttons
+---
+
+import { BodyBanner } from './BodyBanner';
+import { BodyBannerClientWrapper } from '../../app/components/body-banner/BodyBannerClientWrapper';
+
+# BodyBanner
+
+The BodyBanner component is a flexible banner that displays content with optional images and call-to-action buttons. It supports different sizes, color schemes, and layouts.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `size` | `"small" \| "large"` | Yes | - | Size variant of the banner |
+| `colorScheme` | `"light" \| "dark"` | Yes | - | Color scheme for the entire banner |
+| `color` | `"gray" \| "orange"` | No | - | Background color variant |
+| `className` | `string` | No | - | Additional CSS classes |
+| `imageUrl` | `string` | No | - | URL of the banner image |
+| `title` | `string` | No | - | Banner title |
+| `description` | `string` | No | - | Banner description text |
+| `buttonText` | `string` | No | - | Text for the call-to-action button |
+
+## Size Variants
+
+### Small Banner
+
+The small banner displays content in a compact layout with the image positioned above the text content.
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    title="Small Banner Example"
+    description="This is a small banner with compact layout and image positioned above the content."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  title="Small Banner Example"
+  description="This is a small banner with compact layout and image positioned above the content."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+### Large Banner
+
+The large banner displays content in a two-column layout with the image positioned beside the text content.
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="large"
+    title="Large Banner Example"
+    description="This is a large banner with two-column layout and image positioned beside the content."
+    buttonText="Get Started"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="large"
+  title="Large Banner Example"
+  description="This is a large banner with two-column layout and image positioned beside the content."
+  buttonText="Get Started"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+## Color Schemes
+
+### Light Color Scheme
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    title="Light Banner"
+    description="This banner uses a light color scheme."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  title="Light Banner"
+  description="This banner uses a light color scheme."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+### Dark Color Scheme
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="dark"
+    title="Dark Banner"
+    description="This banner uses a dark color scheme."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="dark"
+  title="Dark Banner"
+  description="This banner uses a dark color scheme."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+## Color Variants
+
+### Gray Background
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    color="gray"
+    title="Gray Banner"
+    description="This banner has a gray background color."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  color="gray"
+  title="Gray Banner"
+  description="This banner has a gray background color."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+### Orange Background
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    color="orange"
+    title="Orange Banner"
+    description="This banner has an orange background color."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  color="orange"
+  title="Orange Banner"
+  description="This banner has an orange background color."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+## Combined Examples
+
+### Large Dark Banner with Orange Background
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="large"
+    colorScheme="dark"
+    color="orange"
+    title="Large Dark Orange Banner"
+    description="This is a large banner with dark color scheme and orange background."
+    buttonText="Get Started"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="large"
+  colorScheme="dark"
+  color="orange"
+  title="Large Dark Orange Banner"
+  description="This is a large banner with dark color scheme and orange background."
+  buttonText="Get Started"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+### Small Light Banner with Gray Background
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    color="gray"
+    title="Small Light Gray Banner"
+    description="This is a small banner with light color scheme and gray background."
+    buttonText="Learn More"
+    imageUrl="/images/hero/example-lg.jpg"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  color="gray"
+  title="Small Light Gray Banner"
+  description="This is a small banner with light color scheme and gray background."
+  buttonText="Learn More"
+  imageUrl="/images/hero/example-lg.jpg"
+/>
+```
+
+## Banner Without Image
+
+You can also use the BodyBanner without an image:
+
+<BodyBannerClientWrapper>
+  <BodyBanner
+    size="small"
+    colorScheme="light"
+    title="Banner Without Image"
+    description="This banner doesn't include an image, focusing purely on the text content and call-to-action."
+    buttonText="Learn More"
+  />
+</BodyBannerClientWrapper>
+
+```jsx
+<BodyBanner
+  size="small"
+  colorScheme="light"
+  title="Banner Without Image"
+  description="This banner doesn't include an image, focusing purely on the text content and call-to-action."
+  buttonText="Learn More"
+/>
+```
+
+## Usage Guidelines
+
+- Use **small** banners for compact content displays or when space is limited
+- Use **large** banners for prominent content that needs more visual impact
+- The **colorScheme** prop is required and determines the overall color scheme (light/dark)
+- Choose **light** color scheme for better readability on light backgrounds
+- Choose **dark** color scheme for better contrast on dark backgrounds
+- The **color** prop provides additional background color options (gray, orange)
+- Always provide meaningful `alt` text for images through the Image component
+- Ensure button text is clear and actionable
+- Consider the content hierarchy when choosing between title and description text

package/src/components/BodyBanner/BodyBanner.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import cx from "classnames";
+import { Grid } from "@/components/Grid/Grid";
+import { GridCol } from "../Grid/GridCol";
+import { Button } from "../Button/Button";
+import { Image } from "../Image/Image";
+import { Container } from "../Container/Container";
+
+const CLASS_ROOT = "body-banner";
+
+interface BodyBannerProps {
+  size: "small" | "large";
+  /** Color scheme for whole BodyBanner */
+  colorScheme: "light" | "dark";
+  /** Color scheme for whole BodyBanner */
+  color?: "gray" | "orange";
+  /** Additional CSS classes */
+  className?: string;
+  /** Image URL */
+  imageUrl?: string;
+  /** Title */
+  title?: string;
+  /** Subtitle */
+  description?: string;
+  /** Button text */
+  buttonText?: string;
+}
+export const BodyBanner = (props: BodyBannerProps) => {
+  const {
+    className,
+    colorScheme,
+    size,
+    color,
+    imageUrl,
+    title,
+    description,
+    buttonText,
+  } = props;
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      "is-dark": colorScheme === "dark",
+      "is-light": colorScheme === "light",
+      "is-small": size === "small",
+      "is-large": size === "large",
+      "is-gray": color === "gray",
+      "is-orange": color === "orange",
+    },
+    className,
+  );
+  return (
+    <Container>
+      <Grid className={classes}>
+        <GridCol
+          size={{ xs: 12, md: size === "small" ? 12 : 6 }}
+          className={`${CLASS_ROOT}__content`}
+        >
+          {size === "small" && imageUrl && (
+            <div className={`${CLASS_ROOT}__image`}>
+              <Image src={imageUrl || ""} alt="Body Banner" />
+            </div>
+          )}
+          <div
+            className={`${CLASS_ROOT}__content-inner ${size === "large" ? "is-large" : ""}`}
+          >
+            <div>
+              <h3 className="mb-small">{title}</h3>
+              <p className="h6 mb-none fullwidth">{description}</p>
+            </div>
+            <div
+              className={`${CLASS_ROOT}__button ${size === "large" ? "is-large" : ""}`}
+            >
+              <Button
+                size="large"
+                type="fill"
+                colorScheme={
+                  colorScheme === "light"
+                    ? "light"
+                    : color !== "gray" && color !== "orange"
+                      ? "dark"
+                      : "light"
+                }
+                className="mb-none"
+              >
+                {buttonText}
+              </Button>
+            </div>
+          </div>
+        </GridCol>
+        {size === "large" && imageUrl && (
+          <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
+            <Image
+              src={imageUrl || ""}
+              alt="Body Banner"
+              className="is-large"
+            />
+          </GridCol>
+        )}
+      </Grid>
+    </Container>
+  );
+};

package/src/components/BodyBanner/index.tsx

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { BodyBanner } from "./BodyBanner";

package/src/components/BodyBanner/styles/mixins.scss

@@ -0,0 +1,106 @@
+@use "sass:map";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/breakpoint";
+// @use "./config";
+
+@mixin body-banner {
+  display: flex;
+  color: var(--color-text-default);
+  background-color: var(--color-background-primary);
+  border: 1px solid var(--color-border-subtle);
+}
+
+@mixin content {
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+  @include breakpoint.get("sm", "down") {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@mixin content-inner {
+  width: 100%;
+  display: flex;
+  padding: space.get("large");
+
+  > div:not(.body-banner__button) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &.is-large {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: space.get("xlarge");
+
+    @include breakpoint.get("lg", "down") {
+      padding: space.get("xlarge") space.get("large");
+    }
+
+    @include breakpoint.get("sm", "down") {
+      padding: space.get("large") 10px;
+    }
+  }
+
+  @include breakpoint.get("lg", "down") {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  @include breakpoint.get("sm", "down") {
+    padding: 15px;
+  }
+}
+
+@mixin image {
+  padding: 0 !important;
+  img {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    margin: 0 space.get("large") !important;
+
+    &.is-large {
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+      object-position: left center;
+      margin: 0px !important;
+
+      @include breakpoint.get("xl", "down") {
+        height: 100%;
+      }
+
+      @include breakpoint.get("sm", "down") {
+        height: auto;
+      }
+    }
+
+    @include breakpoint.get("sm", "down") {
+      margin: 15px !important;
+    }
+  }
+}
+
+@mixin button {
+  display: flex;
+  align-items: center;
+  padding: 0 space.get("xlarge");
+  margin: 0 !important;
+
+  &.is-large {
+    padding: 0;
+    margin-top: space.get("small") !important;
+  }
+
+  @include breakpoint.get("lg", "down") {
+    padding: 0;
+    margin-top: space.get("small") !important;
+  }
+}

package/src/components/BodyBanner/styles/style.scss

@@ -0,0 +1,41 @@
+@use "./mixins";
+
+@layer components {
+  .body-banner {
+    @include mixins.body-banner();
+
+    &.is-gray {
+      --color-background-primary: var(--color-fill-subtle);
+      border: none !important;
+    }
+
+    &.is-orange {
+      // TODO: change to color token
+      --color-background-primary: #fff0e0;
+      border: none !important;
+    }
+
+    &.is-dark {
+      &.is-orange {
+      // TODO: change to color token
+        color: #000000 !important;
+      }
+    }
+
+    &__content {
+      @include mixins.content();
+
+      &-inner {
+        @include mixins.content-inner();
+      }
+    }
+
+    &__image {
+      @include mixins.image();
+    }
+
+    &__button {
+      @include mixins.button();
+    }
+  }
+}

package/src/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import cx from 'classnames';
+import React from "react";
+import cx from "classnames";
 
 interface BreadcrumbItemProps {
   /** Additional CSS classes */
@@ -14,15 +14,15 @@ interface BreadcrumbItemProps {
   [key: string]: any;
 }
 
-const ITEM_CLASS_ROOT = 'osk-breadcrumbs__item';
-const LINK_CLASS_ROOT = 'osk-breadcrumbs__link';
+const ITEM_CLASS_ROOT = "osk-breadcrumbs__item";
+const LINK_CLASS_ROOT = "osk-breadcrumbs__link";
 
-const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ 
-  className, 
-  isCurrent, 
-  text, 
-  url, 
-  ...other 
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+  className,
+  isCurrent,
+  text,
+  url,
+  ...other
 }) => {
   const itemClasses = cx(ITEM_CLASS_ROOT, className);
 
@@ -33,7 +33,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
         <a
           href={url}
           className={LINK_CLASS_ROOT}
-          {...(isCurrent ? { 'aria-current': 'page' } : {})}
+          {...(isCurrent ? { "aria-current": "page" } : {})}
           {...other}
         >
           {text}
@@ -49,6 +49,6 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
   );
 };
 
-BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
-export default BreadcrumbItem;
+export { BreadcrumbItem };

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
+import React from "react";
+import cx from "classnames";
 
-import BreadcrumbItem from './BreadcrumbItem';
+import { BreadcrumbItem } from "./BreadcrumbItem";
 
 interface BreadcrumbItemData {
   /** Item text */
@@ -23,22 +23,23 @@ interface BreadcrumbsProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'osk-breadcrumbs';
+const CLASS_ROOT = "osk-breadcrumbs";
 
-const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ 
-  className, 
-  label, 
-  items, 
-  darkMode, 
-  ...other 
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+  className,
+  label,
+  items,
+  darkMode,
+  ...other
 }) => {
   const classes = cx(CLASS_ROOT, className, {
-    'osk-breadcrumbs--dark': darkMode,
+    "osk-breadcrumbs--dark": darkMode,
   });
 
   // Nájdeme index posledného prvku s URL
-  const lastUrlIndex = [...items].reverse().findIndex(item => !!item.url);
-  const lastAnchorIndex = lastUrlIndex === -1 ? -1 : items.length - 1 - lastUrlIndex;
+  const lastUrlIndex = [...items].reverse().findIndex((item) => !!item.url);
+  const lastAnchorIndex =
+    lastUrlIndex === -1 ? -1 : items.length - 1 - lastUrlIndex;
 
   return (
     <nav aria-label={label} className={classes} {...other}>
@@ -55,6 +56,6 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
   );
 };
 
-Breadcrumbs.displayName = 'Breadcrumbs';
+Breadcrumbs.displayName = "Breadcrumbs";
 
-export default Breadcrumbs;
+export { Breadcrumbs };

package/src/components/Breadcrumbs/index.ts

@@ -1,5 +1,3 @@
-import Breadcrumbs from './Breadcrumbs';
+import "./styles/style.scss";
 
-import './styles/style.scss';
-
-export default Breadcrumbs;
+export { Breadcrumbs } from "./Breadcrumbs";

package/src/components/Breadcrumbs/styles/style.scss

@@ -1,37 +1,39 @@
-@use './mixins';
+@use "./mixins";
 
-.osk-breadcrumbs {
-  @include mixins.base;
+@layer components {
+  .osk-breadcrumbs {
+    @include mixins.base;
 
-  &--dark {
-    @include mixins.base-dark;
-  }
+    &--dark {
+      @include mixins.base-dark;
+    }
 
-  &__container {
-    @include mixins.container;
+    &__container {
+      @include mixins.container;
+    }
   }
-}
 
-.osk-breadcrumbs__item {
-  @include mixins.item;
+  .osk-breadcrumbs__item {
+    @include mixins.item;
 
-  .osk-breadcrumbs--dark & {
-    @include mixins.item-dark;
+    .osk-breadcrumbs--dark & {
+      @include mixins.item-dark;
+    }
   }
-}
 
-.osk-breadcrumbs__link {
-  @include mixins.link;
+  .osk-breadcrumbs__link {
+    @include mixins.link;
 
-  &[aria-current='page'] {
-    @include mixins.link-current;
-  }
+    &[aria-current="page"] {
+      @include mixins.link-current;
+    }
 
-  .osk-breadcrumbs--dark & {
-    @include mixins.link-dark;
+    .osk-breadcrumbs--dark & {
+      @include mixins.link-dark;
 
-    &[aria-current='page'] {
-      @include mixins.link-current-dark;
+      &[aria-current="page"] {
+        @include mixins.link-current-dark;
+      }
     }
   }
 }