@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -1,11 +1,11 @@
 @use "sass:map";
-@use 'sass:math';
+@use "sass:math";
 
-@use './../../../styles/tools/generate';
-@use './../../../styles/tools/layout';
-@use './../../../styles/tokens/breakpoint';
-@use './../../../styles/tokens/space';
-@use './config';
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
+@use "./config";
 
 @mixin grid-base() {
   display: flex;
@@ -16,18 +16,23 @@
 
   /* Fixes VoiceOver no announcing unordered lists */
   > li::before {
-    content: ' ';
+    content: " ";
     position: absolute;
     width: 0;
     height: 0;
   }
 }
 
-@mixin grid-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-column-gap($size: "default", $column-gap: config.$column-gap) {
   $gap: map.get($column-gap, $size);
 
-  margin-left: -$gap;
-  margin-right: -$gap;
+  @if ($size == "default") {
+    margin-left: -$gap;
+    margin-right: -$gap;
+  } @else {
+    margin-left: -$gap !important;
+    margin-right: -$gap !important;
+  }
 }
 
 @mixin grid-with-equal-height-content(
@@ -53,7 +58,7 @@
 }
 
 @mixin grid-row-gap(
-  $size: 'medium',
+  $size: "medium",
   $grid-col-selector: '[class*="grid__col"]'
 ) {
   margin-top: #{space.get($size) * -1};
@@ -70,11 +75,16 @@
   max-width: 100%;
 }
 
-@mixin grid-col-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-col-column-gap($size: "default", $column-gap: config.$column-gap) {
   $gap: map.get($column-gap, $size);
 
-  padding-left: $gap;
-  padding-right: $gap;
+  @if ($size == "default") {
+    padding-left: $gap;
+    padding-right: $gap;
+  } @else {
+    padding-left: $gap !important;
+    padding-right: $gap !important;
+  }
 }
 
 @mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {
@@ -100,25 +110,25 @@
 }
 
 @mixin column-classes() {
-  *[class*='grid__col'] {
+  *[class*="grid__col"] {
     @include grid-col-base();
   }
 
   @include breakpoint.each using ($breakpoint) {
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-shrink {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-shrink {
       @include column-shrink;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-fill {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-fill {
       @include column-fill;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-auto {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-auto {
       @include column-auto;
     }
 
     @for $i from 1 through config.$grid-base {
-      .grid__col-#{generate.variant-name($breakpoint, '-')}-#{$i} {
+      .grid__col-#{generate.variant-name($breakpoint, "-")}-#{$i} {
         @include column-size($i);
       }
     }

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

@@ -62,6 +62,17 @@ describe("Grid", () => {
     });
   });
 
+  ["small", "large", "none"].forEach((columnGapSize) => {
+    it(`applies grid--column-gap-${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
+      const { getByTestId } = render(
+        <Grid data-testid="test-id" columnGapSize={columnGapSize} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(
+        `grid--column-gap-${columnGapSize}`,
+      );
+    });
+  });
+
   it("merges additional className", () => {
     const { getByTestId } = render(
       <Grid data-testid="test-id" className="test-class" />,

package/src/components/Hero/Hero.tsx

@@ -8,7 +8,6 @@ import { Grid, GridCol } from "../Grid";
 import { Image } from "../Image";
 import { Sticker } from "../Sticker";
 
-export type HeroBackground = "white" | "black" | "gray";
 export type HeroTextSize = "medium" | "large";
 export type StickerColor = "black" | "orange";
 
@@ -48,8 +47,6 @@ export interface HeroStickerProps {
 }
 
 export interface HeroProps {
-  /** Background spanning whole viewport width */
-  colorScheme?: HeroBackground;
   /** Action button props */
   button?: HeroButtonProps;
   /** Main text */
@@ -80,7 +77,6 @@ const textSizes = {
 
 export const Hero: React.FC<HeroProps> = ({
   button,
-  colorScheme,
   description,
   hasGradientOverlay,
   image,
@@ -95,11 +91,7 @@ export const Hero: React.FC<HeroProps> = ({
       ("default" in image && image.default && Object.keys(image).length === 1)
     : false;
 
-  const className = cx("hero", {
-    "is-dark": colorScheme === "black",
-    "is-light": colorScheme === "white",
-    "is-gray": colorScheme === "gray",
-  });
+  const className = cx("hero");
   return (
     <div className={className}>
       <Container>
@@ -135,13 +127,7 @@ export const Hero: React.FC<HeroProps> = ({
                 )}
               </p>
             )}
-            {button && (
-              <Button
-                type="primary"
-                colorScheme={colorScheme === "black" ? "light" : "light"}
-                {...button}
-              />
-            )}
+            {button && <Button type="primary" {...button} />}
           </GridCol>
           {sticker && (
             <GridCol

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

@@ -5,12 +5,6 @@
 @layer components {
   .hero {
     @include mixins.base;
-    &.is-gray {
-      --color-background-primary: var(--color-surface-subtle);
-      .sticker--orange {
-        --color-text-default: #ffffff !important;
-      }
-    }
 
     &__content {
       @include mixins.content;
@@ -42,14 +36,6 @@
       &--gradient {
         @include mixins.gradient-overlay;
 
-        //stylelint-disable max-nesting-depth
-        // @include mixins.gradient-overlay-color();
-        .bg-black & {
-          // @include mixins.gradient-overlay-color("black");
-        }
-        .bg-gray & {
-          // @include mixins.gradient-overlay-color("gray");
-        }
         &-halfwidth {
           @include mixins.gradient-overlay-halfwidth;
         }

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

@@ -1,257 +1,247 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import React from "react";
+import { render } from "@testing-library/react";
 
-import { Hero } from '../';
+import { Hero } from "../";
 
 const image = {
-  default: 'test-img',
-  sm: 'test-img-sm',
-  lg: 'test-img-lg',
-  xl: 'test-img-xl',
-  xxl: 'test-img-xxl',
+  default: "test-img",
+  sm: "test-img-sm",
+  lg: "test-img-lg",
+  xl: "test-img-xl",
+  xxl: "test-img-xxl",
 };
 
 // title is required
-describe('rendering Hero', () => {
-  describe('initial state', () => {
-    it('has default class hero', () => {
+describe("rendering Hero", () => {
+  describe("initial state", () => {
+    it("has default class hero", () => {
       const { container } = render(<Hero title="test-title" />);
-      expect(container.getElementsByClassName('hero').length).toBe(1);
+      expect(container.getElementsByClassName("hero").length).toBe(1);
     });
-    it('has default class justify-content-space-between', () => {
+    it("has default class justify-content-space-between", () => {
       const { container } = render(<Hero title="test-title" />);
       expect(
-        container.getElementsByClassName('justify-content-space-between').length
+        container.getElementsByClassName("justify-content-space-between")
+          .length,
       ).toBe(1);
     });
-    it('has default class hero__content', () => {
+    it("has default class hero__content", () => {
       const { container } = render(<Hero title="test-title" />);
-      expect(container.getElementsByClassName('hero__content').length).toBe(1);
+      expect(container.getElementsByClassName("hero__content").length).toBe(1);
     });
-    it('has default class h2', () => {
+    it("has default class h2", () => {
       const { container } = render(<Hero title="test-title" />);
-      expect(container.getElementsByClassName('h2').length).toBe(1);
+      expect(container.getElementsByClassName("h2").length).toBe(1);
     });
   });
 
-  describe('passed title and description props', () => {
-    it('has class hero__description when description is set', () => {
+  describe("passed title and description props", () => {
+    it("has class hero__description when description is set", () => {
       const { container } = render(
-        <Hero description="test-description" title="test-title" />
+        <Hero description="test-description" title="test-title" />,
       );
-      expect(container.getElementsByClassName('hero__description').length).toBe(
-        1
+      expect(container.getElementsByClassName("hero__description").length).toBe(
+        1,
       );
     });
-    it('has class bold when description is set', () => {
+    it("has class bold when description is set", () => {
       const { container } = render(
-        <Hero description="test-description" title="test-title" />
+        <Hero description="test-description" title="test-title" />,
       );
-      expect(container.getElementsByClassName('bold').length).toBe(1);
+      expect(container.getElementsByClassName("bold").length).toBe(1);
     });
-    it('has class h1 when textSize is set to large', () => {
+    it("has class h1 when textSize is set to large", () => {
       const { container } = render(
-        <Hero textSize="large" title="test-title" />
+        <Hero textSize="large" title="test-title" />,
       );
-      expect(container.getElementsByClassName('h1').length).toBe(1);
+      expect(container.getElementsByClassName("h1").length).toBe(1);
     });
-    it('has class large bold when description is set and textSize is set to large', () => {
+    it("has class large bold when description is set and textSize is set to large", () => {
       const { container } = render(
         <Hero
           description="test-description"
           textSize="large"
           title="test-title"
-        />
+        />,
       );
-      expect(container.getElementsByClassName('large').length).toBe(1);
-      expect(container.getElementsByClassName('bold').length).toBe(1);
+      expect(container.getElementsByClassName("large").length).toBe(1);
+      expect(container.getElementsByClassName("bold").length).toBe(1);
     });
-    it('renders title', () => {
+    it("renders title", () => {
       const { getByText } = render(<Hero title="test-title" />);
-      expect(getByText('test-title')).toBeInTheDocument();
+      expect(getByText("test-title")).toBeInTheDocument();
     });
-    it('renders description', () => {
+    it("renders description", () => {
       const { getByText } = render(
-        <Hero description="test-description" title="test-title" />
+        <Hero description="test-description" title="test-title" />,
       );
-      expect(getByText('test-description')).toBeInTheDocument();
+      expect(getByText("test-description")).toBeInTheDocument();
     });
   });
-  describe('passed price prop', () => {
-    it('has classes h2 & hero__price when price is set', () => {
+  describe("passed price prop", () => {
+    it("has classes h2 & hero__price when price is set", () => {
       const { container } = render(
-        <Hero price="test-price" title="test-title" />
+        <Hero price="test-price" title="test-title" />,
       );
-      expect(container.getElementsByClassName('h2').length).toBe(2); // title + price
-      expect(container.getElementsByClassName('hero__price').length).toBe(1);
+      expect(container.getElementsByClassName("h2").length).toBe(2); // title + price
+      expect(container.getElementsByClassName("hero__price").length).toBe(1);
     });
-    it('renders price when price is string', () => {
+    it("renders price when price is string", () => {
       const { getByText } = render(
-        <Hero price="test-price" title="test-title" />
+        <Hero price="test-price" title="test-title" />,
       );
-      expect(getByText('test-price')).toBeInTheDocument();
+      expect(getByText("test-price")).toBeInTheDocument();
     });
-    it('renders price when price is object', () => {
+    it("renders price when price is object", () => {
       const { getByText } = render(
         <Hero
           price={{
             amount: 10.99,
-            prefix: 'test-prefix',
-            suffix: 'test-suffix',
+            prefix: "test-prefix",
+            suffix: "test-suffix",
           }}
           title="test-title"
-        />
+        />,
       );
-      expect(getByText('test-prefix10,99 €test-suffix')).toBeInTheDocument();
+      expect(getByText("test-prefix10,99 €test-suffix")).toBeInTheDocument();
     });
   });
-  describe('passed button prop', () => {
-    it('renders button element when button prop is set', () => {
+  describe("passed button prop", () => {
+    it("renders button element when button prop is set", () => {
       const { container } = render(
-        <Hero button={{ children: 'btn-test' }} title="test-title" />
+        <Hero button={{ children: "btn-test" }} title="test-title" />,
       );
-      expect(container.getElementsByClassName('btn').length).toBe(1);
+      expect(container.getElementsByClassName("btn").length).toBe(1);
     });
     it("button's children are rendered", () => {
       const { getByText } = render(
-        <Hero button={{ children: 'btn-test' }} title="test-title" />
+        <Hero button={{ children: "btn-test" }} title="test-title" />,
       );
-      expect(getByText('btn-test')).toBeInTheDocument();
-    });
-    it('button has is-light class when background prop is set to black', () => {
-      const { container } = render(
-        <Hero
-          button={{ children: 'btn-test' }}
-          title="test-title"
-          colorScheme="black"
-        />
-      );
-      expect(container.getElementsByClassName('is-light').length).toBe(1);
+      expect(getByText("btn-test")).toBeInTheDocument();
     });
   });
-  describe('passed sticker prop', () => {
-    it('renders sticker element when sticker prop is set', () => {
+  describe("passed sticker prop", () => {
+    it("renders sticker element when sticker prop is set", () => {
       const { container } = render(
-        <Hero sticker={{ children: 'sticker-test' }} title="test-title" />
+        <Hero sticker={{ children: "sticker-test" }} title="test-title" />,
       );
-      expect(container.getElementsByClassName('sticker').length).toBe(1);
+      expect(container.getElementsByClassName("sticker").length).toBe(1);
     });
     it("sticker's children are rendered", () => {
       const { getByText } = render(
-        <Hero sticker={{ children: 'sticker-test' }} title="test-title" />
+        <Hero sticker={{ children: "sticker-test" }} title="test-title" />,
       );
-      expect(getByText('sticker-test')).toBeInTheDocument();
+      expect(getByText("sticker-test")).toBeInTheDocument();
     });
-    it('sticker has class hero__sticker', () => {
+    it("sticker has class hero__sticker", () => {
       const { container } = render(
-        <Hero sticker={{ children: 'sticker-test' }} title="test-title" />
+        <Hero sticker={{ children: "sticker-test" }} title="test-title" />,
       );
-      expect(container.getElementsByClassName('hero__sticker').length).toBe(1);
+      expect(container.getElementsByClassName("hero__sticker").length).toBe(1);
     });
-    it('sticker has additional class when set in sticker prop', () => {
+    it("sticker has additional class when set in sticker prop", () => {
       const { container } = render(
         <Hero
           sticker={{
-            children: 'sticker-test',
-            className: 'sticker-test-class',
+            children: "sticker-test",
+            className: "sticker-test-class",
           }}
           title="test-title"
-        />
+        />,
       );
-      expect(container.getElementsByClassName('hero__sticker').length).toBe(1);
+      expect(container.getElementsByClassName("hero__sticker").length).toBe(1);
       expect(
-        container.getElementsByClassName('sticker-test-class').length
+        container.getElementsByClassName("sticker-test-class").length,
       ).toBe(1);
     });
-    ['black', 'orange'].map(color => {
+    ["black", "orange"].map((color) => {
       it(`sticker has sticker--${color} class when sticker.color is set to ${color}`, () => {
         const { container } = render(
           <Hero
-            sticker={{ children: 'btn-test', color: color }}
+            sticker={{ children: "btn-test", color: color }}
             title="test-title"
-            colorScheme="black"
-          />
+          />,
         );
         expect(
-          container.getElementsByClassName(`sticker--${color}`).length
+          container.getElementsByClassName(`sticker--${color}`).length,
         ).toBe(1);
       });
     });
   });
-  describe('passed image prop', () => {
-    it('renders image element when image prop is set', () => {
+  describe("passed image prop", () => {
+    it("renders image element when image prop is set", () => {
       const { container } = render(<Hero image={image} title="test-title" />);
-      expect(container.getElementsByClassName('img').length).toBe(1);
+      expect(container.getElementsByClassName("img").length).toBe(1);
     });
-    it('image has additional class hero__image', () => {
+    it("image has additional class hero__image", () => {
       const { container } = render(<Hero image={image} title="test-title" />);
-      expect(container.getElementsByClassName('hero__image').length).toBe(1);
+      expect(container.getElementsByClassName("hero__image").length).toBe(1);
     });
-    it('image has additional class hero__image--single if single size image is used', () => {
+    it("image has additional class hero__image--single if single size image is used", () => {
       const { container } = render(
-        <Hero image={{ src: 'text-img-single' }} title="test-title" />
+        <Hero image={{ src: "text-img-single" }} title="test-title" />,
       );
       expect(
-        container.getElementsByClassName('hero__image--single').length
+        container.getElementsByClassName("hero__image--single").length,
       ).toBe(1);
     });
-    it('image has additional class hero__image--fullwidth if prop hasFullwidthImage is passed', () => {
+    it("image has additional class hero__image--fullwidth if prop hasFullwidthImage is passed", () => {
       const { container } = render(
-        <Hero image={image} hasFullwidthImage title="test-title" />
+        <Hero image={image} hasFullwidthImage title="test-title" />,
       );
       expect(
-        container.getElementsByClassName('hero__image--fullwidth').length
+        container.getElementsByClassName("hero__image--fullwidth").length,
       ).toBe(1);
     });
     it("image's attribute src is set to image.default", () => {
       const { container } = render(<Hero image={image} title="test-title" />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        'test-img'
+      expect(container.querySelector("img").getAttribute("src")).toBe(
+        "test-img",
       );
     });
     it("image's attribute src is set to image.src if passed as single image", () => {
       const { container } = render(
-        <Hero image={{ src: 'test-img-single' }} title="test-title" />
+        <Hero image={{ src: "test-img-single" }} title="test-title" />,
       );
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        'test-img-single'
+      expect(container.querySelector("img").getAttribute("src")).toBe(
+        "test-img-single",
       );
     });
-    ['test-img-xxl', 'test-img-xl', 'test-img-lg', 'test-img-sm'].map(
+    ["test-img-xxl", "test-img-xl", "test-img-lg", "test-img-sm"].map(
       (size, index) => {
         it(`${
           index + 1
         }. source element has attribute srcSet is set to ${size}`, () => {
           const { container } = render(
-            <Hero image={image} title="test-title" />
+            <Hero image={image} title="test-title" />,
           );
           expect(
-            container.querySelectorAll('source')[index].getAttribute('srcSet')
+            container.querySelectorAll("source")[index].getAttribute("srcSet"),
           ).toBe(size);
         });
-      }
+      },
     );
-    it('image wrapper with class hero__image-wrapper is rendered', () => {
+    it("image wrapper with class hero__image-wrapper is rendered", () => {
       const { container } = render(<Hero image={image} title="test-title" />);
       expect(
-        container.getElementsByClassName('hero__image-wrapper').length
+        container.getElementsByClassName("hero__image-wrapper").length,
       ).toBe(1);
     });
-    it('image has additional class hero__image--gradient when prop hasGradientOverlay is passed', () => {
+    it("image has additional class hero__image--gradient when prop hasGradientOverlay is passed", () => {
       const { container } = render(
-        <Hero hasGradientOverlay image={image} title="test-title" />
+        <Hero hasGradientOverlay image={image} title="test-title" />,
       );
       expect(
-        container.getElementsByClassName('hero__image--gradient').length
+        container.getElementsByClassName("hero__image--gradient").length,
       ).toBe(1);
     });
-    it('image has additional class hero__image--gradient-halfwidth when prop hasGradientOverlay is passed', () => {
+    it("image has additional class hero__image--gradient-halfwidth when prop hasGradientOverlay is passed", () => {
       const { container } = render(
-        <Hero hasGradientOverlay image={image} title="test-title" />
+        <Hero hasGradientOverlay image={image} title="test-title" />,
       );
       expect(
-        container.getElementsByClassName('hero__image--gradient-halfwidth')
-          .length
+        container.getElementsByClassName("hero__image--gradient-halfwidth")
+          .length,
       ).toBe(1);
     });
     it("image doesn't have class hero__image--gradient-halfwidth when prop hasFullwidthImage is also passed", () => {
@@ -261,11 +251,11 @@ describe('rendering Hero', () => {
           hasFullwidthImage
           image={image}
           title="test-title"
-        />
+        />,
       );
       expect(
-        container.getElementsByClassName('hero__image--gradient-halfwidth')
-          .length
+        container.getElementsByClassName("hero__image--gradient-halfwidth")
+          .length,
       ).toBe(0);
     });
   });