@orangesk/orange-design-system 2.0.0-beta.12 → 2.0.0-beta.14

package/src/components/Pill/Pill.tsx

@@ -9,7 +9,10 @@ export const pillColors = [
   "surface-tertiary",
   "surface-subtle",
   "surface-moderate",
+  "surface-contrast",
   "surface-accent",
+  "fill-moderate",
+  "fill-disabled",
   "transparent",
 ] as const;
 export type PillColor = (typeof pillColors)[number];

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

@@ -17,7 +17,9 @@
     }
 
     &.surface-secondary,
-    &.surface-tertiary {
+    &.surface-tertiary,
+    &.fill-moderate,
+    &.fill-disabled {
       color: color.$white;
     }
 

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

@@ -20,7 +20,7 @@
   justify-content: center;
 
   > * {
-    width: fit-content !important;
+    width: fit-content;
   }
 }
 

package/src/components/Tag/Tag.tsx

@@ -21,8 +21,6 @@ export type TagSize = "small" | "large";
 interface CommonProps {
   color?: TagColor;
   size?: TagSize;
-  /** @deprecated */
-  isInverse?: boolean;
   isDisabled?: boolean;
   className?: string;
   children?: React.ReactNode;

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

@@ -20,6 +20,38 @@
       }
     }
 
+    // Special styling for default tags inside .background-secondary parent
+    .background-secondary & {
+      // Target tags that don't have any color variant class
+      // Use negative lookahead-like approach: exclude if class contains any color variant
+      &:not([class*="--orange"]):not([class*="--black"]):not(
+          [class*="--yellow"]
+        ):not([class*="--green"]):not([class*="--blue"]):not(
+          [class*="--success"]
+        ):not([class*="--danger"]):not([class*="--info"]):not(
+          [class*="--warning"]
+        ):not([class*="--transparent"]) {
+        background-color: var(--color-surface-moderate);
+
+        // Clickable tags should have same default background but keep normal interactive states
+        &:where(button),
+        &:where(a) {
+          background-color: var(--color-surface-moderate);
+
+          &:focus-visible,
+          &:hover {
+            background-color: color.$gray-600;
+          }
+
+          &:active,
+          &.is-active {
+            color: var(--color-text-inverse);
+            background-color: var(--color-background-contrast);
+          }
+        }
+      }
+    }
+
     // Transparent class is a special variant of color, it's not possible to make transparent variant for each color at the moment.
     &--transparent {
       @include mixins.color-transparent();

package/src/components/index.ts

@@ -47,6 +47,7 @@ import {
   ModalCloseButton,
   ModalTitle,
   ModalProductHeader,
+  ModalProductFooter,
 } from "./Modal";
 import { Section } from "./Section";
 import { Sticker } from "./Sticker";
@@ -156,6 +157,7 @@ export {
   Modal,
   ModalBody,
   ModalCloseButton,
+  ModalProductFooter,
   ModalProductHeader,
   ModalTitle,
   Pagination,

package/src/styles/typography/mixins.scss

@@ -55,11 +55,6 @@
     }
   }
 
-  // Default štýly pre všetky a elementy
-  a {
-    @include generate.responsive-css-map($config);
-  }
-
   // Generovanie variantov pre p elementy s triedami
   @each $variant, $breakpoints in $config {
     @if $variant != default {

package/src/styles/utilities/layout.scss

@@ -189,6 +189,12 @@
       width: 100% !important;
     }
 
+    .fullwidth-xs-only {
+      @include breakpoint.get("xs", "only") {
+          width: 100% !important;
+      }
+    }
+
     .fullheight {
       height: 100% !important;
     }
@@ -200,4 +206,17 @@
   }
 
   @include block-classes();
+
+
+  @mixin position-classes {
+    .relative {
+      position: relative !important;
+    }
+
+    .absolute {
+      position: absolute !important;
+    }
+  }
+
+  @include position-classes();
 }

package/src/styles/utilities/visibility.scss

@@ -10,10 +10,9 @@
   }
 
   @mixin show-for($breakpoint) {
-    display: none !important;
     @if sassmap.get(breakpoint.$map, $breakpoint) {
-      @include breakpoint.get($breakpoint) {
-        display: inherit !important;
+      @include breakpoint.get($breakpoint, downfrom) {
+        display: none !important;
       }
     } @else {
       @warn 'show-for() parameter breakpoint is not defined in the breakpoint.$map map';
@@ -21,7 +20,6 @@
   }
 
   @mixin hide-for($breakpoint) {
-    display: inherit !important;
     @if sassmap.get(breakpoint.$map, $breakpoint) {
       @include breakpoint.get($breakpoint) {
         display: none !important;

package/build/components/types/src/components/Modal/ModalProductBody.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-interface ModalProductBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-    subtitleSection?: React.ReactNode;
-    listSection?: React.ReactNode;
-    benefitsSection?: React.ReactNode;
-    extraPaymentsSection?: React.ReactNode;
-}
-export declare const CLASS_ROOT = "modal__product-body";
-declare const ModalProductBody: React.ForwardRefExoticComponent<ModalProductBodyProps & React.RefAttributes<HTMLDivElement>>;
-export { ModalProductBody };

package/src/components/Modal/ModalProductBody.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import cx from "classnames";
-
-interface ModalProductBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  subtitleSection?: React.ReactNode;
-  listSection?: React.ReactNode;
-  benefitsSection?: React.ReactNode;
-  extraPaymentsSection?: React.ReactNode;
-}
-
-export const CLASS_ROOT = "modal__product-body";
-
-const ModalProductBody = React.forwardRef<
-  HTMLDivElement,
-  ModalProductBodyProps
->(
-  (
-    {
-      className,
-      subtitleSection,
-      listSection,
-      benefitsSection,
-      extraPaymentsSection,
-      ...other
-    },
-    ref,
-  ) => {
-    const classes = cx(CLASS_ROOT, className);
-
-    const subtitleSectionClass = `${CLASS_ROOT}-subtitle-section`;
-    const listSectionClass = `${CLASS_ROOT}-list-section`;
-    const accordionSectionClass = `${CLASS_ROOT}-accordion-section`;
-
-    return (
-      <div className={classes} ref={ref} {...other}>
-        {subtitleSection && (
-          <div className={subtitleSectionClass}>{subtitleSection}</div>
-        )}
-        {listSection && <div className={listSectionClass}>{listSection}</div>}
-        {benefitsSection && (
-          <div className={accordionSectionClass}>{benefitsSection}</div>
-        )}
-        {extraPaymentsSection && (
-          <div className={listSectionClass}>{extraPaymentsSection}</div>
-        )}
-      </div>
-    );
-  },
-);
-ModalProductBody.displayName = "ModalProductBody";
-
-export { ModalProductBody };