Merge pull request #1369 from City-of-Helsinki/hds-2393-core-scss-v4-…

…for-breadcrumbs

Hds 2393 core scss v4 for breadcrumbs

CHANGELOG.md

@@ -58,6 +58,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [Hero] New information element below the hero for photographer credits
 - [StatusLabel] Added SCSS support and scss files are exported too. See documentation about usage.
+- [Breadcrumbs] Added SCSS support and scss files are exported too. See documentation about usage.
 - [Checkbox] Added SCSS support and scss files are exported too. See documentation about usage.
 - [Button] Added SCSS support and scss files are exported too. See documentation about usage.
 

e2e/tests/core/components/core-breadcrumb-spec.ts

@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+import { takeAllStorySnapshots } from '../../../helpers';
+
+const componentName = 'breadcrumb';
+const storybook = 'core';
+const takeStateSnapshots = true;
+
+test.describe(`Testing ${storybook} component "${componentName}"`, () => {
+ test('Take snapshots of all stories', async ({ page, isMobile }) => {
+ await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+ });
+});

e2e/tests/react/components/react-breadcrumb-spec.ts

@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+import { takeAllStorySnapshots } from '../../../helpers';
+
+const componentName = 'breadcrumb';
+const storybook = 'react';
+const takeStateSnapshots = true;
+
+test.describe(`Testing ${storybook} component "${componentName}"`, () => {
+ test('Take snapshots of all stories', async ({ page, isMobile }) => {
+ await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+ });
+});

packages/core/src/components/all.css

@@ -1,4 +1,4 @@
-@import url('./breadcrumb/breadcrumb.css');
+@import url('./breadcrumb/breadcrumb.scss');
 @import url('./button/button.scss');
 @import url('./card/card.css');
 @import url('./checkbox/checkbox.scss');

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;
+ }
+ }
+}

packages/core/src/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,2 @@
+@use './breadcrumb-mixin' as *;
+@include breadcrumb;

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';

packages/react/.lokirc.json

@@ -12,7 +12,7 @@
  "preset": "iPhone 7"
  }
  },
- "skipStories": "Icons/.*|Button/*|Tag/*|Hero/*|Koros/*|Checkbox/*|SelectionGroup/*",
+ "skipStories": "Icons/.*|Button/*|Tag/*|Hero/*|Koros/*|Checkbox/*|SelectionGroup/*|Breadcrumb/*",
  "pixelmatch": {
  "threshold": 0.2,
  "alpha": 1,

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 {