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

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,6 @@
-import React from 'react';
-import cx from 'classnames';
+import cx from "classnames";
 
-import BreadcrumbItem from './BreadcrumbItem';
+import { BreadcrumbItem } from "./BreadcrumbItem";
 
 interface BreadcrumbItemData {
   /** Item text */
@@ -14,7 +13,7 @@ interface BreadcrumbsProps {
   /** Additional CSS classes */
   className?: string;
   /** Use white breadcrumbs on dark background */
-  darkMode?: boolean;
+  colorScheme?: "dark" | "light";
   /** Breadcrumb items */
   items: BreadcrumbItemData[];
   /** Navigation label */
@@ -23,22 +22,24 @@ 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,
+  colorScheme,
+  ...other
 }) => {
   const classes = cx(CLASS_ROOT, className, {
-    'osk-breadcrumbs--dark': darkMode,
+    "is-dark": colorScheme === "dark",
+    "is-light": colorScheme === "light",
   });
 
   // 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/mixins.scss

@@ -1,27 +1,23 @@
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
-@use '../../Container/styles/mixins' as container;
-@use '../../../styles/typography/mixins' as typoMixins;
-@use './config';
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+@use "../../Container/styles/mixins" as container;
+@use "../../../styles/typography/mixins" as typoMixins;
+@use "./config";
 
 @mixin base {
   @include typoMixins.list-unstyled;
 
-  padding: space.get('small') 0;
-  background-color: color.$white;
+  padding: space.get("small") 0;
+  background-color: var(--color-surface-primary);
   font-weight: bold;
   font-family: base.$font-family;
   font-size: base.$font-size;
   line-height: base.$line-height;
 }
 
-@mixin base-dark {
-  background-color: color.$black;
-}
-
 @mixin container {
   @include container.base;
 
@@ -30,7 +26,7 @@
 }
 
 @mixin separator {
-  content: '';
+  content: "";
   display: inline-block;
   font-family: inherit;
   width: convert.to-rem(20px);
@@ -55,19 +51,19 @@
   }
 
   &:first-child::before {
-    @include breakpoint.get('sm') {
+    @include breakpoint.get("sm") {
       display: none;
     }
   }
 
   &:nth-last-child(2)::before {
-    @include breakpoint.get('xs', 'down') {
+    @include breakpoint.get("xs", "down") {
       transform: rotate(180deg);
     }
   }
 
   &:not(:nth-last-child(2)) {
-    @include breakpoint.get('xs', 'down') {
+    @include breakpoint.get("xs", "down") {
       display: none;
     }
   }
@@ -82,24 +78,16 @@
 }
 
 @mixin link {
-  color: color.$black;
+  color: var(--color-text-default);
   text-decoration: none;
   display: inline-block;
 
   &:hover {
-    color: color.$black;
+    color: var(--color-text-default);
     text-decoration: underline;
   }
 }
 
-@mixin link-dark {
-  color: color.$white;
-}
-
 @mixin link-current {
   color: color.$gray-700;
 }
-
-@mixin link-current-dark {
-  color: color.$gray-600;
-}

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

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

package/src/components/Breadcrumbs/tests/BreadcrumbItem.unit.test.js

@@ -1,7 +1,6 @@
-import React from "react";
 import { render } from "@testing-library/react";
 
-import BreadcrumbItem from "../BreadcrumbItem";
+import { BreadcrumbItem } from "../BreadcrumbItem";
 
 // text is required as a child to render in ConditionalWrapper component
 describe("rendering BreadcrumbItem", () => {

package/src/components/Breadcrumbs/tests/Breadcrumbs.conformance.test.js

@@ -1,8 +1,7 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
 
-import Breadcrumbs from '../';
+import { Breadcrumbs } from "../";
 
 const example = (
   <>
@@ -10,16 +9,16 @@ const example = (
       label="Breadcrumbs"
       items={[
         {
-          text: 'Home',
-          url: '/styleguide',
+          text: "Home",
+          url: "/styleguide",
         },
         {
-          text: 'Components',
-          url: '/components',
+          text: "Components",
+          url: "/components",
         },
         {
-          text: 'Breadcrumbs',
-          url: '#main',
+          text: "Breadcrumbs",
+          url: "#main",
         },
       ]}
     />
@@ -27,27 +26,27 @@ const example = (
       label="Breadcrumbs 2"
       items={[
         {
-          text: 'Home',
-          url: '/styleguide',
+          text: "Home",
+          url: "/styleguide",
         },
         {
-          text: 'Components',
-          url: '/components',
+          text: "Components",
+          url: "/components",
         },
         {
-          text: 'Breadcrumbs',
+          text: "Breadcrumbs",
         },
       ]}
     />
   </>
 );
 
-it('is valid html', () => {
+it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate();
 });
 
-it('is accessible', async () => {
+it("is accessible", async () => {
   const { container } = render(example);
   expect(await axe(container)).toHaveNoViolations();
 });