feat: convert breadcrumb css to scss

City-of-Helsinki · Sep 26, 2024 · 70dc532 · 70dc532
1 parent f73f4cd
commit 70dc532
Show file tree

Hide file tree

Showing 10 changed files with 306 additions and 115 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Hero] content spacing changes
 - [Icon] ariaLabel, ariaLabelledby and ariaHidden replaced by native aria-* counterparts.
 - [StatusLabel] iconLeft prop renamed to iconStart
+- [Breadcrumbs] Added SCSS support and scss files are exported too. See documentation about usage.
 
 #### Added
 

diff --git a/packages/core/src/components/all.css b/packages/core/src/components/all.css
@@ -1,4 +1,4 @@
-@import url('./breadcrumb/breadcrumb.css');
+@import url('./breadcrumb/breadcrumb.scss');
 @import url('./button/button.css');
 @import url('./card/card.css');
 @import url('./checkbox/checkbox.css');

diff --git a/packages/core/src/components/breadcrumb/_breadcrumb-mixin.scss b/packages/core/src/components/breadcrumb/_breadcrumb-mixin.scss
@@ -0,0 +1,160 @@
+@use '../../utils/bem' as BemUtil;
+
+@mixin base {
+  --horizontal-margin-small: var(--spacing-layout-2-xs);
+  --horizontal-margin-medium: var(--spacing-layout-xs);
+  --horizontal-margin-large: var(--spacing-layout-xs);
+  --horizontal-margin-x-large: var(--spacing-layout-s);
+  --horizontal-margin: var(--horizontal-margin-small);
+
+  display: flex;
+  margin: 0 var(--horizontal-margin);
+  padding: var(--spacing-s) 0;
+
+  &__list {
+    align-items: center;
+    flex-direction: row;
+    word-wrap: break-word;
+
+    &-item {
+      align-items: center;
+      display: flex;
+      line-height: var(--lineheight-l);
+    }
+  }
+
+  &__link#{&}__link {
+    --link-visited-color: none;
+    --link-color: var(--color-black-90);
+  }
+
+  &__link {
+    &:hover,
+    &:focus {
+      -webkit-text-decoration-color: var(--color-black-90);
+      text-decoration-color: var(--color-black-90);
+    }
+  }
+
+  &__back-arrow#{&}__back-arrow {
+    display: inline-flex;
+
+    /* compensate the white space in the icon */
+    margin-left: -5px;
+    margin-right: -3px;
+
+    --icon-size: var(--spacing-m);
+  }
+
+  &__separator#{&}__separator {
+    display: inline-flex;
+    padding-left: var(--spacing-3-xs);
+
+    --icon-size: var(--spacing-s);
+  }
+
+  @media (min-width: 768px) {
+    --horizontal-margin: var(--horizontal-margin-medium);
+  }
+
+  @media (min-width: 992px) {
+    --horizontal-margin: var(--horizontal-margin-large);
+  }
+
+  @media (min-width: 1248px) {
+    --horizontal-margin: var(--horizontal-margin-x-large);
+  }
+}
+
+@mixin active {
+  &__list {
+    &-item {
+      &--active {
+        font-weight: 700;
+
+        /* to match 3px border around links */
+        padding: 3px;
+      }
+    }
+  }
+}
+
+@mixin mobile {
+  &__list {
+    &--mobile {
+      display: flex;
+
+      #{BemUtil.get-block(&)}__link {
+        font-size: var(--fontsize-body-l);
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    &__list {
+      &--mobile {
+        display: none;
+      }
+    }
+  }
+}
+
+@mixin desktop {
+  &__list {
+    &--desktop {
+      display: none;
+    }
+  }
+
+  @media (min-width: 768px) {
+    &__list {
+      &--desktop {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+}
+
+@mixin breadcrumb(
+  $all: true,
+  $base: false,
+  $active: false,
+  $mobile: false,
+  $desktop: false,
+  $override: null,
+  $react: false
+) {
+  $className: 'breadcrumb';
+
+  @if $override {
+    $className: $override;
+  }
+
+  @if $all or $base {
+    @include BemUtil.block($className, if($override, true, false), $react) {
+      @include base;
+    }
+  }
+
+  @if $all or $active {
+    @include BemUtil.block($className, if($override, true, false), $react) {
+      @include active;
+    }
+  }
+
+  @if $all or $mobile {
+    @include BemUtil.block($className, if($override, true, false), $react) {
+      @include mobile;
+    }
+  }
+
+  @if $all or $desktop {
+    @include BemUtil.block($className, if($override, true, false), $react) {
+      @include desktop;
+    }
+  }
+}
diff --git a/packages/core/src/components/breadcrumb/breadcrumb.css b/packages/core/src/components/breadcrumb/breadcrumb.css
diff --git a/packages/core/src/components/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumb/breadcrumb.scss
@@ -0,0 +1,2 @@
+@use './breadcrumb-mixin' as *;
+@include breadcrumb;
diff --git a/packages/core/src/components/breadcrumb/breadcrumb.stories.js b/packages/core/src/components/breadcrumb/breadcrumb.stories.js
@@ -1,4 +1,4 @@
-import './breadcrumb.css';
+import './breadcrumb.scss';
 import '../link/link.css';
 import '../../icons/angle-right.css';
 import '../../icons/angle-left.css';

diff --git a/packages/core/src/utils/_bem.scss b/packages/core/src/utils/_bem.scss
@@ -71,16 +71,20 @@ $elementDelimeter: '__';
 // prefix added by HDS
 // use for creating classes like .hds-<$block>
 // set $noPrefix to false to create classes like .-<$block>
-@mixin block($block, $noPrefix: false) {
+@mixin block($block, $noPrefix: false, $react: false) {
   $className: $block;
 
   @if not($noPrefix) {
     $className: #{$blockPrefix + $block};
   }
 
-  @at-root {
-    .#{$className} {
-      @content;
+  @if $react {
+    @content;
+  } @else {
+    @at-root {
+      .#{$className} {
+        @content;
+      }
     }
   }
 }
@@ -148,19 +152,40 @@ $elementDelimeter: '__';
 // end of sass-easy-bem
 
 // HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier
-@mixin unscopedModifier($block, $modifier) {
-  @at-root {
-    .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {
-      @content;
+@mixin unscopedModifier($block, $modifier, $react: false) {
+  @if $react {
+    @content;
+  } @else {
+    @at-root {
+      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {
+        @content;
+      }
     }
   }
 }
 
 // HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element
-@mixin unscopedElement($block, $element) {
-  @at-root {
-    .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {
-      @content;
+@mixin unscopedElement($block, $element, $react: false) {
+  @if $react {
+    @content;
+  } @else {
+    @at-root {
+      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {
+        @content;
+      }
     }
   }
 }
+
+// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {
+@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {
+  @if $react {
+    @content;
+  } @else {
+    @at-root {
+      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {
+        @content;
+      }
+    }
+  }
+}
diff --git a/packages/react/src/components/breadcrumb/Breadcrumb.module.scss b/packages/react/src/components/breadcrumb/Breadcrumb.module.scss
@@ -1,7 +1,7 @@
-@value medium-up from "../../styles/breakpoints.scss";
+@use 'hds-core/lib/components/breadcrumb/_breadcrumb-mixin' as CoreSass;
 
 .breadcrumb {
-  composes: hds-breadcrumb from 'hds-core/lib/components/breadcrumb/breadcrumb.css';
+  @include CoreSass.breadcrumb($all: false, $base: true, $react: true);
 }
 
 .list {