@orangesk/orange-design-system 2.0.0-beta.7 → 2.0.0-beta.9

package/src/components/PromoBanner/PromoBanner.tsx

@@ -2,27 +2,22 @@ import React from "react";
 import cx from "classnames";
 import { Grid, GridCol } from "../Grid";
 import { Image } from "../Image";
-import { Button } from "../Button";
 
 interface PromoBannerProps {
   colorScheme?: "light" | "dark";
   className?: string;
-  title: string;
-  secondaryTitle?: string;
-  description: string;
-  buttonText: string;
   image?: string;
+  alignImage?: "bottom";
+  children?: React.ReactNode;
 }
 
 const CLASS_ROOT = "promo-banner";
 export const PromoBanner = ({
-  title,
-  secondaryTitle,
-  description,
-  buttonText,
   image,
   colorScheme,
   className,
+  alignImage,
+  children,
 }: PromoBannerProps) => {
   const classes = cx(
     CLASS_ROOT,
@@ -33,30 +28,23 @@ export const PromoBanner = ({
     className,
   );
   return (
-    <div className={classes}>
+    <div className={cx(classes)}>
       <Grid>
         <GridCol
-          size={{ xs: 12, md: image ? 6 : 8 }}
+          size={{ xs: 12, md: image ? 6 : 7 }}
           className={`${CLASS_ROOT}__item`}
         >
-          <h2 className="display-3 thin mb-medium">
-            <span
-              className={`${secondaryTitle ? `${CLASS_ROOT}__item-title` : ""}`}
-            >
-              {title}
-            </span>
-            {secondaryTitle && (
-              <span className="color-orange ml-small">{secondaryTitle}</span>
-            )}
-          </h2>
-          <p className="mb-large">{description}</p>
-          <Button type="fill" size="large">
-            {buttonText}
-          </Button>
+          {children}
         </GridCol>
 
         {image && (
-          <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
+          <GridCol
+            size={{ xs: 12, md: 6 }}
+            className={cx(
+              `${CLASS_ROOT}__image`,
+              alignImage === "bottom" && "align-self-bottom",
+            )}
+          >
             <Image src={image} alt="" className="mb-none" />
           </GridCol>
         )}

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

@@ -1,34 +1,33 @@
+@use "sass:map" as sassmap;
 @use "./../../../styles/tools/convert";
+@use "./../../../styles/tools/generate";
 @use "./../../../styles/tokens/breakpoint";
 @use "./../../../styles/tokens/space";
-
-@mixin promo-banner-base() {
-  background-color: var(--color-background-primary);
-  color: var(--color-text-default);
-  padding: space.get("xlarge") convert.to-rem(70px);
-
-  @include breakpoint.get("lg", "down") {
-    padding: space.get("xlarge") convert.to-rem(20px);
-  }
-
-  @include breakpoint.get("sm", "down") {
-    padding: convert.to-rem(30px) space.get("small");
-  }
-}
+@use "./../../Section/styles/mixins" as section;
 
 @mixin promo-banner-image() {
-  text-align: center;
+  text-align: end;
   align-self: center;
+
+  @include breakpoint.get("md", "down") {
+    text-align: center;
+  }
 }
 
 @mixin promo-banner-item() {
-  padding-right: space.get("xlarge") !important;
+  padding-top: space.get("xlarge");
+  padding-bottom: space.get("xlarge");
 
-  @include breakpoint.get("lg", "down") {
-    padding-right: convert.to-rem(10px) !important;
+  @include breakpoint.get("md", "down") {
+    padding-top: space.get("large");
+    padding-bottom: space.get("medium");
   }
-}
 
-@mixin promo-banner-item-title() {
-  margin-right: space.get("small") !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  > * {
+    width: fit-content !important;
+  }
 }

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

@@ -2,18 +2,12 @@
 
 @layer components {
   .promo-banner {
-    @include mixins.promo-banner-base;
-
     &__image {
       @include mixins.promo-banner-image;
     }
 
     &__item {
       @include mixins.promo-banner-item;
-
-      &-title {
-        @include mixins.promo-banner-item-title;
-      }
     }
   }
 }

package/src/styles/base/globals.scss

@@ -28,8 +28,27 @@
   color: var(--color-text-default);
 }
 
+:root {
+  --extra-scroll-margin: 0;
+  --header-height: 80px;
+}
+
+@media screen and (min-width: 992px) {
+  :root {
+    --header-height: 120px;
+  }
+}
+
+:target {
+  scroll-margin-top: calc(
+    var(--header-height) + var(--extra-scroll-margin) - 1px
+  );
+}
+
 html {
   font-size: base.$font-size;
+  scroll-padding-top: unset;
+  overflow-x: hidden;
 }
 
 html,

package/src/styles/utilities/color.scss

@@ -1,39 +1,94 @@
 @use "../tokens/color";
-
-// TODO premyslieť, či je potrebné tieto farby nahradiť tokenmi, alebo hardcodovat aby neboli nepredvidatelne
+@use "sass:map";
 
 @layer utilities {
+  // Background utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "background-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Surface utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "surface-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Fill utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "fill-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Border utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "border-") == 1 {
+      .#{$name} {
+        border-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Text color utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "text-") == 1 {
+      .#{$name} {
+        color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Icon color utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "icon-") == 1 {
+      .#{$name} {
+        color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Legacy classes - DEPRECATED (add deprecation warnings)
   .color-black {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-default instead of .color-black";
     color: color.$black !important;
   }
 
   .color-orange {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-accent instead of .color-orange";
     color: var(--color-text-accent) !important;
   }
 
   .color-gray {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-secondary instead of .color-gray";
     color: color.$gray-800 !important;
   }
 
   .color-white {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-inverse instead of .color-white";
     color: color.$white !important;
   }
 
   .color-blue {
+    @warn "Deprecated: Use .icon-information instead of .color-blue";
     color: var(--color-icon-information) !important;
   }
 
   .color-danger {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .icon-negative instead of .color-danger";
     color: var(--color-icon-negative) !important;
   }
 
   .bg-white {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .background-primary instead of .bg-white";
     background-color: color.$white !important;
     color: var(--color-text-default);
 
@@ -44,10 +99,9 @@
   }
 
   .bg-black {
-    // TODO: replace with new token when available
-    // background-color: color.$black !important;
+    @warn "Deprecated: Use .background-contrast instead of .bg-black";
     background-color: #141414 !important;
-    color: var(--color-text-default);
+    color: var(--color-text-inverse);
 
     .color-gray,
     &.color-gray {
@@ -61,79 +115,92 @@
   }
 
   .bg-orange {
+    @warn "Deprecated: Use .surface-secondary instead of .bg-orange";
     background-color: var(--color-surface-secondary) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-orange-dark {
+    @warn "Deprecated: Use .surface-tertiary instead of .bg-orange-dark";
     background-color: var(--color-surface-tertiary) !important;
     color: var(--color-text-inverse) !important;
   }
 
   .bg-gray {
+    @warn "Deprecated: Use .surface-subtle instead of .bg-gray";
     background-color: var(--color-surface-subtle) !important;
   }
 
+  .bg-gray-lighter {
+    @warn "Deprecated: Use .background-secondary instead of .bg-gray-lighter";
+    background-color: var(--color-background-secondary) !important;
+  }
+
   .bg-blue {
+    @warn "Deprecated: Use .fill-accent1 instead of .bg-blue";
     background-color: var(--color-fill-accent1) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-green {
+    @warn "Deprecated: Use .fill-accent2 instead of .bg-green";
     background-color: var(--color-fill-accent2) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-pink {
+    @warn "Deprecated: Use .fill-accent3 instead of .bg-pink";
     background-color: var(--color-fill-accent3) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-violet {
+    @warn "Deprecated: Use .fill-accent4 instead of .bg-violet";
     background-color: var(--color-fill-accent4) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-yellow {
+    @warn "Deprecated: Use .fill-accent5 instead of .bg-yellow";
     background-color: var(--color-fill-accent5) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-yellow-lighter {
-    // TODO: replace with new token when available
+    @warn "Deprecated: This class will be removed in future versions";
     background-color: color.$yellow-lighter !important;
     color: color.$black !important;
   }
 
   .bg-red {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .fill-negative instead of .bg-red";
     background-color: color.$red !important;
     color: color.$black !important;
   }
 
   .bg-accent {
+    @warn "Deprecated: Use .background-accent instead of .bg-accent";
     background-color: var(--color-background-accent) !important;
     color: var(--color-text-default) !important;
   }
 
   .bg-accent1-blog {
+    @warn "Deprecated: Use .background-accent1-blog instead of .bg-accent1-blog";
     background-color: var(--color-background-accent1-blog) !important;
     color: var(--color-text-default) !important;
   }
 
   .bg-accent2-blog {
+    @warn "Deprecated: Use .background-accent2-blog instead of .bg-accent2-blog";
     background-color: var(--color-background-accent2-blog) !important;
     color: var(--color-text-default) !important;
   }
 
+  // Legacy selection styles
   .bg-orange,
-  .bg-orange-dark {
+  .bg-orange-dark,
+  .surface-secondary,
+  .surface-tertiary {
     &::selection {
       background-color: var(--color-background-contrast);
       color: var(--color-text-inverse);
@@ -144,7 +211,14 @@
     color: var(--color-text-default);
   }
 
+  // Legacy classes - continued
   .bg-none {
+    @warn "Deprecated: Use .background-none instead of .bg-none";
+    background: none !important;
+  }
+
+  // Utility for removing background
+  .background-none {
     background: none !important;
   }
 }