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

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

@@ -29,6 +29,7 @@
 }
 
 @mixin link() {
+  border-radius: 100% !important;
   margin-bottom: 0;
   background-color: var(--color-background-primary);
   &:hover {

package/src/components/Section/Section.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import cx from "classnames";
 import { Container } from "../Container";
 
-export type SectionColor = "white" | "gray" | "black" | "orange";
+export type SectionColor =
+  | "white"
+  | "gray"
+  | "black"
+  | "orange"
+  | "accent1-blog"
+  | "accent2-blog";
 export type SectionSpacing = "default" | "small" | "xsmall";
 
 export interface SectionProps {

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

@@ -198,7 +198,13 @@ describe("Section Conformance Tests", () => {
     });
 
     it("applies color classes correctly", () => {
-      const colors = ["gray", "black", "orange"];
+      const colors = [
+        "gray",
+        "black",
+        "orange",
+        "accent1-blog",
+        "accent2-blog",
+      ];
       colors.forEach((color) => {
         const { container } = render(
           <Section color={color} data-testid="test-section" />,

package/src/components/Section/tests/Section.unit.test.js

@@ -196,8 +196,35 @@ describe("Section Component Unit Tests", () => {
       expect(section).toHaveClass("bg-orange");
     });
 
+    it("applies correct background class for accent1-blog color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="accent1-blog" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-accent1-blog");
+    });
+
+    it("applies correct background class for accent2-blog color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="accent2-blog" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-accent2-blog");
+    });
+
     it("handles all color variants correctly", () => {
-      const colors = ["white", "gray", "black", "orange"];
+      const colors = [
+        "white",
+        "gray",
+        "black",
+        "orange",
+        "accent1-blog",
+        "accent2-blog",
+      ];
 
       colors.forEach((color, index) => {
         const { getByTestId } = render(

package/src/components/index.ts

@@ -41,7 +41,14 @@ import { Grid, GridCol } from "./Grid";
 import { Image } from "./Image";
 import { Link } from "./Link";
 import { Loader } from "./Loader";
-import { Modal, ModalBody, ModalCloseButton, ModalTitle } from "./Modal";
+import { MegamenuDropdown } from "./Megamenu";
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalTitle,
+  ModalProductHeader,
+} from "./Modal";
 import { Section } from "./Section";
 import { Sticker } from "./Sticker";
 import { SkipLink } from "./SkipLink";
@@ -85,6 +92,7 @@ import { Cover } from "./Cover";
 import { Testimonial } from "./Testimonial";
 import { Hero } from "./Hero";
 import { IconList, Item } from "./IconList";
+
 export {
   Accordion,
   AccordionItem,
@@ -144,10 +152,12 @@ export {
   List,
   ListItem,
   Loader,
+  MegamenuDropdown,
   Message,
   Modal,
   ModalBody,
   ModalCloseButton,
+  ModalProductHeader,
   ModalTitle,
   Pagination,
   Pictogram,

package/src/styles/tokens/color.scss

@@ -5,6 +5,8 @@ $colors-light: (
   background-secondary: #f4f4f4,
   background-contrast: #141414,
   background-accent: #fff6ed,
+  background-accent1-blog: #fff6cc,
+  background-accent2-blog: #eee7f7,
   surface-primary: #ffffff,
   surface-secondary: #ff7900,
   surface-tertiary: #f16e00,
@@ -57,6 +59,8 @@ $colors-dark: (
   background-secondary: #333333,
   background-contrast: #ffffff,
   background-accent: #2b1a10,
+  background-accent1-blog: #62342d,
+  background-accent2-blog: #2b1a10,
   surface-primary: #141414,
   surface-secondary: #ff7900,
   surface-tertiary: #f16e00,

package/src/styles/typography/mixins.scss

@@ -55,6 +55,11 @@
     }
   }
 
+  // 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 {
@@ -64,6 +69,15 @@
     }
   }
 
+  // Generovanie variantov pre a elementy s triedami
+  @each $variant, $breakpoints in $config {
+    @if $variant != default {
+      a#{generate.variant-name($variant, ".")} {
+        @include generate.responsive-css-map($breakpoints);
+      }
+    }
+  }
+
   cite {
     font-style: normal;
   }
@@ -164,3 +178,12 @@
     }
   }
 }
+
+@mixin list-marker-orange() {
+  > li {
+
+    &::marker {
+      color: var(--color-icon-accent);
+    }
+  }
+}

package/src/styles/typography/style.scss

@@ -53,3 +53,7 @@ ul {
 .list-inline {
   @include list-inline();
 }
+
+.list--marker-orange {
+  @include list-marker-orange();
+}

package/src/styles/utilities/color.scss

@@ -7,18 +7,22 @@
     // TODO: replace with new token when available
     color: color.$black !important;
   }
+
   .color-orange {
     // TODO: replace with new token when available
     color: var(--color-text-accent) !important;
   }
+
   .color-gray {
     // TODO: replace with new token when available
     color: color.$gray-800 !important;
   }
+
   .color-white {
     // TODO: replace with new token when available
     color: color.$white !important;
   }
+
   .color-blue {
     color: var(--color-icon-information) !important;
   }
@@ -113,6 +117,16 @@
     color: color.$black !important;
   }
 
+  .bg-accent1-blog {
+    background-color: var(--color-background-accent1-blog) !important;
+    color: var(--color-text-default) !important;
+  }
+
+  .bg-accent2-blog {
+    background-color: var(--color-background-accent2-blog) !important;
+    color: var(--color-text-default) !important;
+  }
+
   .bg-orange,
   .bg-orange-dark {
     &::selection {