@orangesk/orange-design-system 2.0.0-beta.36 → 2.0.0-beta.38

package/src/components/index.ts

@@ -1,7 +1,6 @@
 import { Accordion, AccordionItem } from "./Accordion";
 import { Alert } from "./Alert";
 import { AnchorNavigation } from "./AnchorNavigation";
-import { Tag, TagButton } from "./Tag";
 import { Bar, BarBreak, BarItem } from "./Bar";
 import {
   BlockAction,
@@ -19,12 +18,14 @@ import {
   IconButton,
 } from "./Button";
 import { Buttons } from "./Buttons";
+import { Card, CardProductHeader, CardSection } from "./Card";
 import { Carousel } from "./Carousel";
 import { CarouselHero, CarouselHeroItem } from "./CarouselHero";
 import { CarouselPromotions } from "./CarouselPromotions";
 import { CartTable } from "./CartTable";
 import { Container } from "./Container";
 import { Controls } from "./Controls";
+import { Cover } from "./Cover";
 import { Divider } from "./Divider";
 import {
   Dropdown,
@@ -34,65 +35,64 @@ import {
 } from "./Dropdown";
 import { Expander } from "./Expander/Expander";
 import { FeatureAccordion, FeatureAccordionItem } from "./FeatureAccordion";
-import { Card, CardSection, CardProductHeader } from "./Card";
-import { Icon, Pictogram, SpritePathContext, SpritePathProvider } from "./Icon";
+import {
+  Autocomplete,
+  Checkbox,
+  Field,
+  Fieldset,
+  File,
+  Group,
+  Hint,
+  InputStepper,
+  Label,
+  Message,
+  Radio,
+  RangeSlider,
+  Select,
+  TextArea,
+  TextInput,
+} from "./Forms";
 import { Gauge } from "./Gauge";
 import { Grid, GridCol } from "./Grid";
+import { Hero } from "./Hero";
+import { Icon, Pictogram, SpritePathContext, SpritePathProvider } from "./Icon";
+import { IconList, Item } from "./IconList";
 import { Image } from "./Image";
 import { Link } from "./Link";
-import { Loader } from "./Loader";
+import { List, ListItem } from "./List";
+import { Loader, LoaderFullscreen } from "./Loader";
 import { Megamenu, MegamenuBlog } from "./Megamenu";
 import {
   Modal,
   ModalBody,
   ModalCloseButton,
-  ModalTitle,
-  ModalProductHeader,
   ModalProductFooter,
+  ModalProductHeader,
+  ModalTitle,
 } from "./Modal";
-import { Section } from "./Section";
-import { Sticker } from "./Sticker";
-import { SkipLink } from "./SkipLink";
-import { List, ListItem } from "./List";
-import { Progress } from "./Progress";
 import { Pagination } from "./Pagination";
+import { Pill } from "./Pill";
+import { Progress } from "./Progress";
 import { PromoBanner } from "./PromoBanner";
 import {
   PromotionCard,
-  PromotionCardSection,
   PromotionCardContent,
-  PromotionCardTitle,
   PromotionCardImageWrapper,
+  PromotionCardSection,
+  PromotionCardTitle,
 } from "./PromotionCard";
-import {
-  Autocomplete,
-  Select,
-  TextInput,
-  TextArea,
-  RangeSlider,
-  Message,
-  Label,
-  Hint,
-  Radio,
-  Checkbox,
-  File,
-  InputStepper,
-  Group,
-  Fieldset,
-  Field,
-} from "./Forms";
+import { Section } from "./Section";
 import { Skeleton } from "./Skeleton";
-import { Pill } from "./Pill";
+import { SkipLink } from "./SkipLink";
+import { SocialButton } from "./SocialButton";
 import { Stepbar } from "./Stepbar";
-import { Tab, TabPanel, Tabs } from "./Tabs";
+import { Sticker } from "./Sticker";
 import { Table } from "./Table";
-import { Tile } from "./Tile";
-import { Tooltip, InfoTooltip } from "./Tooltip";
-import { Cover } from "./Cover";
+import { Tab, TabPanel, Tabs } from "./Tabs";
+import { Tag, TagButton } from "./Tag";
 import { Testimonial } from "./Testimonial";
-import { Hero } from "./Hero";
-import { IconList, Item } from "./IconList";
-import { SocialButton } from "./SocialButton";
+import { Tile } from "./Tile";
+import { InfoTooltip, Tooltip } from "./Tooltip";
 
 export {
   Accordion,
@@ -155,6 +155,7 @@ export {
   List,
   ListItem,
   Loader,
+  LoaderFullscreen,
   Megamenu,
   MegamenuBlog,
   Message,
@@ -166,8 +167,6 @@ export {
   ModalTitle,
   Pagination,
   Pictogram,
-  SpritePathContext,
-  SpritePathProvider,
   Pill,
   Progress,
   PromoBanner,
@@ -183,6 +182,8 @@ export {
   Skeleton,
   SkipLink,
   SocialButton,
+  SpritePathContext,
+  SpritePathProvider,
   Stepbar,
   Sticker,
   Tab,

package/src/styles/base/globals.scss

@@ -32,7 +32,21 @@ body {
   padding: 0;
   margin: 0;
   text-size-adjust: 100%;
-  -webkit-font-smoothing: initial;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
 body {
@@ -40,6 +54,8 @@ body {
   background-color: base.$background;
   font-family: #{base.$font-family};
   color: base.$text-color;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {

package/src/styles/export/breakpoint.scss

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use '../tokens/breakpoint';
+@use "../tokens/breakpoint";
 
 :export {
   @each $key, $value in breakpoint.$map {

package/src/styles/export/breakpoint.ts

@@ -1,12 +1,12 @@
 // Export breakpoints from SCSS tokens
 // TODO: Remove this file and use the SCSS module instead but now is best solution this one
 const breakpoints = {
-  xs: '0px',
-  sm: '480px',
-  md: '768px',
-  lg: '992px',
-  xl: '1240px',
-  xxl: '1380px',
+  xs: "0px",
+  sm: "480px",
+  md: "768px",
+  lg: "992px",
+  xl: "1240px",
+  xxl: "1380px",
 };
 
-export default breakpoints; 
+export default breakpoints;

package/src/styles/export/space.scss

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use '../tokens/space';
+@use "../tokens/space";
 
 :export {
   @each $key, $value in space.$map {

package/src/styles/tokens/breakpoint.scss

@@ -1,7 +1,7 @@
 @use "sass:list";
 @use "sass:meta";
-@use 'sass:map' as sassmap;
-@use '../tools/map';
+@use "sass:map" as sassmap;
+@use "../tools/map";
 
 $map: (
   xs: 0,
@@ -12,78 +12,93 @@ $map: (
   xxl: 1380px,
 );
 
-@mixin get( $breakpoint, $param: false) {
-  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {
+@mixin get($breakpoint, $param: false) {
+  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != "default") {
     @warn 'Breakpoint "#{$breakpoint}" is not defined.';
 
-    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list
+    @debug "Available breakpoints:"; // stylelint-disable-line at-rule-disallowed-list
     @debug $map; // stylelint-disable-line at-rule-disallowed-list
   }
 
   @if (
     ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or
-    ( not $breakpoint ) or
-    ( $breakpoint == 'default' )
+      (not $breakpoint) or
+      ($breakpoint == "default")
   ) {
     @content;
   } @else if not $param {
     // no param, just a standard mobile first media query
-    @if sassmap.has-key( $map, $breakpoint ) {
+    @if sassmap.has-key($map, $breakpoint) {
       // breakpoint is in breakpoint map, let's use stored value
-      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };
+      @media screen and (min-width: sassmap.get($map, $breakpoint)) {
+        @content;
+      }
     } @else {
       // breakpoint is not in breakpoint map, let's use custom value
-      @media screen and (min-width: $breakpoint) { @content; };
+      @media screen and (min-width: $breakpoint) {
+        @content;
+      }
     }
-  } @else if (
-    $param == 'down' and
-    map.next($map, $breakpoint)
-  ) {
+  } @else if ($param == "down" and map.next($map, $breakpoint)) {
     @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {
       @content;
     }
-  } @else if (
-    $param == 'down' and
-    not sassmap.has-key($map, $breakpoint)
-  ) {
-    @media screen and (max-width: $breakpoint) { @content; };
-  } @else if (
-    $param == 'only' and
-    map.next($map, $breakpoint)
-  ) {
-    @media screen and
-      (min-width: sassmap.get($map, $breakpoint)) and
-      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };
-  } @else if (
-    sassmap.has-key( $map, $param) and
-    sassmap.has-key( $map, $breakpoint)
-  ) {
-    @media screen and
-      (min-width: sassmap.get($map, $breakpoint)) and
-      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };
-  } @else if (
-    $param == 'downfrom' and
-    sassmap.get($map, $breakpoint) > 0 and
-    $breakpoint != 'xs'
-  ) {
+  } @else if ($param == "down" and not sassmap.has-key($map, $breakpoint)) {
+    @media screen and (max-width: $breakpoint) {
+      @content;
+    }
+  } @else if ($param == "only" and map.next($map, $breakpoint)) {
+    @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: map.next($map, $breakpoint) - 0.02px) {
+      @content;
+    }
+  } @else if
+    (sassmap.has-key($map, $param) and sassmap.has-key($map, $breakpoint))
+  {
+    @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: sassmap.get($map, $param) - 0.02px) {
+      @content;
+    }
+  } @else if
+    (
+      $param ==
+        "downfrom" and
+        sassmap.get($map, $breakpoint) >
+        0 and
+        $breakpoint !=
+        "xs"
+    )
+  {
     @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {
       @content;
     } // -1
-  } @else if (meta.type-of($param) == 'number') {
+  } @else if (meta.type-of($param) == "number") {
     @if sassmap.has-key($map, $breakpoint) {
       // breakpoint is in breakpoint map
-      @media screen and
-        (min-width: sassmap.get($map, $breakpoint)) and
-        (max-width: $param) { @content; };
+      @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: $param) {
+        @content;
+      }
     } @else {
       // breakpoint is not in breakpoint map, let's use custom value
-      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }
+      @media screen and (min-width: $breakpoint) and (max-width: $param) {
+        @content;
+      }
     }
-  } @else if (
-    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and
-    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and
-    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')
-  ) {
+  } @else if
+    (
+      not
+        (
+          $breakpoint == list.nth(sassmap.keys($map), -1) and $param == "down"
+        ) and not
+        (
+          $breakpoint == list.nth(sassmap.keys($map), -1) and $param == "only"
+        ) and not
+        (
+          $breakpoint ==
+            list.nth(sassmap.keys($map), 1) and
+            $param ==
+            "downfrom"
+        )
+    )
+  {
     // do nothing on known edge cases. we just dont generate any code.
     @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';
   }
@@ -92,7 +107,7 @@ $map: (
 @mixin each() {
   @each $breakpoint, $size in $map {
     @include get($breakpoint) {
-      @content($breakpoint);
+      @content ($breakpoint);
     }
   }
 }

package/src/styles/tokens/space.scss

@@ -1,14 +1,14 @@
 @use "sass:map";
 @use "sass:math";
-@use '../tools/convert';
+@use "../tools/convert";
 
 $map: (
-  'none': 0,
-  'xsmall': 5px,
-  'small': 10px,
-  'medium': 20px,
-  'large': 30px,
-  'xlarge': 60px,
+  "none": 0,
+  "xsmall": 5px,
+  "small": 10px,
+  "medium": 20px,
+  "large": 30px,
+  "xlarge": 60px,
 );
 
 /// Get space size from $space
@@ -16,11 +16,11 @@ $map: (
 /// @example
 ///   get-space();
 ///   get-space('small');
-@function get($size: 'medium') {
+@function get($size: "medium") {
   @if map.has-key($map, $size) {
     $space: map.get($map, $size);
 
-    @return if(math.unit($space) == 'rem', $space, convert.to-rem($space));
+    @return if(math.unit($space) == "rem", $space, convert.to-rem($space));
   } @else {
     @error 'Cannot find key ($size) \'#{$size}\' in $space \'#{$space}\'';
   }

package/src/styles/tools/generate.scss

@@ -1,5 +1,5 @@
-@use '../tokens/breakpoint';
-@use './map' as *;
+@use "../tokens/breakpoint";
+@use "./map" as *;
 
 /// Get css propeties from map
 ///
@@ -68,7 +68,7 @@
 /// @param {Map} $map - map
 /// @param {Map} $className - class name of element
 /// @param {Map} $classSuffix - suffix for class name of element
-@mixin variants($map, $className: '', $classSuffix: '') {
+@mixin variants($map, $className: "", $classSuffix: "") {
   @each $variant, $props in $map {
     #{if(&, "&", "")}#{$className + variant-name($variant) + $classSuffix} {
       @include css-map($props);
@@ -81,7 +81,7 @@
 /// @param {Map} $map - map
 /// @param {Map} $className - class name of element
 /// @param {Map} $classSuffix - suffix for class name of element
-@mixin responsive-variants($map, $className: '', $classSuffix: '') {
+@mixin responsive-variants($map, $className: "", $classSuffix: "") {
   @each $breakpoint, $props in $map {
     @include breakpoint.get($breakpoint) {
       @include variants($props, $className, $classSuffix);
@@ -97,9 +97,9 @@
 /// // -primary
 ///   variant-name('default')
 ///
-@function variant-name($name, $prefix: '--', $suffix: '') {
+@function variant-name($name, $prefix: "--", $suffix: "") {
   @if not $name or $name == default or $name == xs {
-    @return '';
+    @return "";
   }
 
   @return #{$prefix + $name + $suffix};

package/src/styles/tools/layout.scss

@@ -1,11 +1,11 @@
-@use '../tokens/base';
+@use "../tokens/base";
 
 // -- Nicolas Gallagher's micro clearfix
 @mixin clearfix {
   &::before,
   &::after {
     // For modern browsers
-    content: '';
+    content: "";
     display: table;
   }
 
@@ -18,7 +18,7 @@
  * Resets margin-bottom of the last child to zero
  */
 @mixin reset-last-child-margin-bottom {
-  > :not([class*='mb\-']):last-child {
+  > :not([class*="mb\-"]):last-child {
     margin-bottom: 0;
   }
 }

package/src/styles/tools/map.scss

@@ -9,7 +9,7 @@
 /// @param {Mixed} $key - Key to use as a starting point.
 ///
 /// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
-@function next($map, $key, $return: 'value') {
+@function next($map, $key, $return: "value") {
   // Store the keys of the map as a list
   $values: map.keys($map);
 
@@ -26,7 +26,7 @@
   }
   // Otherwise, return the value
   @else {
-    @if $return == 'value' {
+    @if $return == "value" {
       @return map.get($map, list.nth($values, $i));
     } @else {
       @return list.nth($values, $i);

package/src/styles/tools/text.scss

@@ -12,7 +12,7 @@
 /// @param {String} $search - Substring to replace
 /// @param {String} $replace ('') - New value
 /// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
+@function str-replace($string, $search, $replace: "") {
   $index: string.index($string, $search);
 
   @if $index {

package/src/styles/utilities/index.scss

@@ -1,7 +1,7 @@
-@forward 'color';
-@forward 'text';
-@forward 'border';
-@forward 'layout';
-@forward 'visibility';
-@forward 'ordering';
-@forward 'horizontal-scroll';
+@forward "color";
+@forward "text";
+@forward "border";
+@forward "layout";
+@forward "visibility";
+@forward "ordering";
+@forward "horizontal-scroll";