@jorilindell/hds-core 4.10.1

package/lib/utils/multi-sass/__tests__/_rules.test.scss

@@ -0,0 +1,353 @@
+/* stylelint-disable scss/function-no-unknown */
+@use 'sass-true' as *;
+@use "sass:map";
+@use "sass:meta";
+@use '../globals' as *;
+@use '../rules' as rules;
+@use '../helpers' as helpers;
+@use './test-helpers' as testHelpers;
+
+@include describe('_rules.scss') {
+  $defaultMap: (
+    'truthy': true,
+    'falsy': false,
+    'nully': null,
+    'stringy': 'stringValue',
+    'stringValueMatch': 'stringValueMatch',
+    'map-with-mixed-allows': (
+      'mapped-truthy': true,
+      'mapped-stringy': 'mapped-stringy',
+    ),
+    'map-with-only-disallowed': (
+      'mapped-falsy': false,
+      'mapped-disallowed': false,
+    ),
+  );
+  $defaultMapAsRules: rules.rules-to-map(
+    (
+      'modifiers': $defaultMap,
+    )
+  );
+
+  @include describe('value-to-map') {
+    @include it('when value is "true"') {
+      $value: true;
+      $result: rules.value-to-map($value);
+      $expectedResult: (
+        $ALL_ALLOWED: true,
+        $ALL_DISALLOWED: false,
+        $HAS_EXPLICIT_TRUE: false,
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('when value is "false"') {
+      $value: false;
+      $result: rules.value-to-map($value);
+      $expectedResult: (
+        $ALL_ALLOWED: false,
+        $ALL_DISALLOWED: true,
+        $HAS_EXPLICIT_TRUE: false,
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('when value is "string"') {
+      $value: 'stringy';
+      $result: rules.value-to-map($value);
+      $expectedResult: (
+        $HAS_EXPLICIT_TRUE: true,
+        $ALL_ALLOWED: false,
+        $ALL_DISALLOWED: false,
+        'stringy': true,
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('when one value is "true"') {
+      $map: (
+        'name': true,
+      );
+      $result: rules.value-to-map($map);
+      $expectedResult: (
+        'name': true,
+        $HAS_EXPLICIT_TRUE: true,
+        $ALL_DISALLOWED: false,
+        $ALL_ALLOWED: false,
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('when one value is "false"') {
+      $map: (
+        'name': false,
+      );
+      $result: rules.value-to-map($map);
+      $expectedResult: (
+        'name': false,
+        $ALL_ALLOWED: false,
+        $ALL_DISALLOWED: false,
+        $HAS_EXPLICIT_TRUE: false,
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('when one value is "false" and another "true"') {
+      $map: (
+        'name': false,
+        'another': true,
+      );
+      $result: rules.value-to-map($map);
+      $expectedResult: (
+        'name': false,
+        'another': true,
+        $HAS_EXPLICIT_TRUE: true,
+        $ALL_ALLOWED: false,
+        $ALL_DISALLOWED: false,
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('when one value is a map, map is stored. value-to-map does not convert deep maps, like rules-to-map') {
+      $map: (
+        'name': (
+          'child': true,
+        ),
+      );
+      $result: rules.value-to-map($map);
+      $expectedResult: (
+        'name': (
+          'child': true,
+        ),
+        $HAS_EXPLICIT_TRUE: true,
+        $ALL_ALLOWED: false,
+        $ALL_DISALLOWED: false,
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('when one value is a string') {
+      $map: (
+        'name': 'value',
+      );
+      $result: rules.value-to-map($map);
+      $expectedResult: (
+        'name': 'value',
+        $HAS_EXPLICIT_TRUE: true,
+        $ALL_ALLOWED: false,
+        $ALL_DISALLOWED: false,
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('when argument is null (or unset)') {
+      $map: null;
+      $result: rules.value-to-map($map);
+      $expectedResult: (
+        $ALL_ALLOWED: true,
+        $HAS_EXPLICIT_TRUE: false,
+        $ALL_DISALLOWED: false,
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+  }
+
+  @include describe('rules-to-map') {
+    @include it('with empty map, all rules are allowed') {
+      $map: helpers.create-empty-map();
+      $result: rules.rules-to-map($map);
+      $expectedResult: (
+        'elements': (
+          $ALL_ALLOWED: true,
+          $HAS_EXPLICIT_TRUE: false,
+        ),
+        'modifiers': (
+          $ALL_ALLOWED: true,
+          $HAS_EXPLICIT_TRUE: false,
+        ),
+        'extras': (
+          $ALL_ALLOWED: true,
+          $HAS_EXPLICIT_TRUE: false,
+        ),
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('if a modifier is set, all elements are not allowed') {
+      $map: (
+        'modifiers': (
+          'modifier': 'modifierName',
+        ),
+      );
+      $result: rules.rules-to-map($map);
+      $expectedResult: (
+        'elements': (
+          $ALL_ALLOWED: false,
+          $HAS_EXPLICIT_TRUE: false,
+          $ALLOW_BASE_CONTENT: false,
+        ),
+        'modifiers': (
+          $HAS_EXPLICIT_TRUE: true,
+          $ALL_ALLOWED: false,
+          'modifier': (
+            $HAS_EXPLICIT_TRUE: true,
+            $ALL_ALLOWED: false,
+          ),
+        ),
+        'extras': (
+          $ALL_ALLOWED: true,
+          $HAS_EXPLICIT_TRUE: false,
+        ),
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+
+    @include it('if a modifier and element is set, all elements are not allowed') {
+      $map: (
+        'elements': (
+          'another-element': true,
+        ),
+        'modifiers': (
+          'modifier': 'modifierName',
+          'modifier2': (
+            'another-element': true,
+          ),
+        ),
+      );
+      $result: rules.rules-to-map($map);
+      $expectedResult: (
+        'elements': (
+          $HAS_EXPLICIT_TRUE: true,
+          $ALL_ALLOWED: false,
+          $ALLOW_BASE_CONTENT: false,
+          'another-element': true,
+        ),
+        'modifiers': (
+          $HAS_EXPLICIT_TRUE: true,
+          $ALL_ALLOWED: false,
+          'modifier': (
+            $HAS_EXPLICIT_TRUE: true,
+            $ALL_ALLOWED: false,
+          ),
+          'modifier2': (
+            $HAS_EXPLICIT_TRUE: true,
+            $ALL_ALLOWED: false,
+            'another-element': true,
+          ),
+        ),
+        'extras': (
+          $ALL_ALLOWED: true,
+          $HAS_EXPLICIT_TRUE: false,
+        ),
+      );
+
+      @include assert-equal(testHelpers.diff-map($result, $expectedResult), []);
+    }
+  }
+
+  @include describe('is-entity-allowed-in-category') {
+    @include it('truthy values result in true') {
+      $modifiers: rules.get-modifiers($defaultMapAsRules);
+
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'truthy'), true);
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'stringy'), true);
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'stringValueMatch'), true);
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'map-with-mixed-allows'), true);
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'map-with-only-disallowed'), true);
+    }
+
+    @include it('null is considered unset value and false when there are explicit true values') {
+      $modifiers: rules.get-modifiers($defaultMapAsRules);
+
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'nully'), false);
+    }
+
+    @include it('falsy values result in false') {
+      $modifiers: rules.get-modifiers($defaultMapAsRules);
+
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'falsy'), false);
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'non-existing-name'), false);
+    }
+
+    @include it('explicitly disallowed elements disallow only themselves if no element is explicitly allowed') {
+      $onlyDisallowed: (
+        'falsy': false,
+        'disallowed': false,
+        'nully': null,
+      );
+      $onlyDisallowedAsRules: rules.rules-to-map(
+        (
+          'modifiers': $onlyDisallowed,
+        )
+      );
+      $modifiers: rules.get-modifiers($onlyDisallowedAsRules);
+
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'falsy'), false);
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'disallowed'), false);
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'nully'), true);
+      @include assert-equal(rules.is-entity-allowed-in-category($modifiers, 'any'), true);
+    }
+  }
+
+  @include describe('is-element-allowed-in-modifier') {
+    @include it('true modifier values accept all elements') {
+      @include assert-equal(rules.is-element-allowed-in-modifier($defaultMapAsRules, 'truthy', 'any'), true);
+      @include assert-equal(rules.is-element-allowed-in-modifier($defaultMapAsRules, 'stringy', 'any'), false);
+      @include assert-equal(rules.is-element-allowed-in-modifier($defaultMapAsRules, 'stringy', 'stringValue'), true);
+    }
+
+    @include it('string modifier values accept all elements') {
+      $modifiers: rules.get-modifiers($defaultMapAsRules);
+      $value: 'stringy';
+      $modifiers: (
+        'modifiers': rules.value-to-map($value),
+      );
+
+      @include assert-equal(rules.is-element-allowed-in-modifier($modifiers, 'stringy', 'any'), true);
+    }
+
+    @include it('explicitly allowed elements are  allowed') {
+      @include assert-equal(
+        rules.is-element-allowed-in-modifier($defaultMapAsRules, 'map-with-mixed-allows', 'mapped-truthy'),
+        true
+      );
+      @include assert-equal(
+        rules.is-element-allowed-in-modifier($defaultMapAsRules, 'map-with-mixed-allows', 'mapped-stringy'),
+        true
+      );
+    }
+
+    @include it('if an element is explicitly set, other elements are disallowed by default') {
+      @include assert-equal(
+        rules.is-element-allowed-in-modifier($defaultMapAsRules, 'map-with-mixed-allows', 'any'),
+        false
+      );
+    }
+
+    @include it('explicitly disallowed elements disallow only themselves if no element is explicitly allowed') {
+      @include assert-equal(
+        rules.is-element-allowed-in-modifier($defaultMapAsRules, 'map-with-only-disallowed', 'mapped-falsy'),
+        false
+      );
+      @include assert-equal(
+        rules.is-element-allowed-in-modifier($defaultMapAsRules, 'map-with-only-disallowed', 'mapped-disallowed'),
+        false
+      );
+      @include assert-equal(
+        rules.is-element-allowed-in-modifier($defaultMapAsRules, 'map-with-only-disallowed', 'any'),
+        true
+      );
+    }
+  }
+}

package/lib/utils/multi-sass/__tests__/_selectors.test.scss

@@ -0,0 +1,129 @@
+/* stylelint-disable scss/function-no-unknown */
+@use 'sass-true' as *;
+@use "sass:map";
+@use "sass:meta";
+@use '../exports' as *;
+@use '../helpers' as helpers;
+@use '../globals' as globals;
+@use '../selectors' as selectors;
+
+@function create-block($type, $name, $config) {
+  @return '*[data-block="#{$name}"]';
+}
+
+@function create-modifier($type, $name, $config) {
+  @return '*[data-variant="#{$name}"]';
+}
+
+@function create-element($type, $name, $config) {
+  @return '*[data-element="#{$name}"]';
+}
+
+@include describe('_selectors.scss') {
+  @include describe('create-selector') {
+    @include it('creates a block selector') {
+      $config: helpers.create-empty-map();
+
+      @include assert-equal(
+        selectors.create-selector($type: 'block', $name: 'blockName', $config: $config),
+        '.blockName'
+      );
+    }
+
+    @include it('config.blockPrefix is used') {
+      $config: (
+        'blockPrefix': 'prefix--',
+      );
+
+      @include assert-equal(
+        selectors.create-selector($type: 'block', $name: 'blockName', $config: $config),
+        '.prefix--blockName'
+      );
+    }
+
+    @include it('creates a modifier selector') {
+      $config: helpers.create-empty-map();
+
+      @include assert-equal(
+        selectors.create-selector($type: 'modifier', $name: 'modifierName', $config: $config),
+        'modifierName'
+      );
+    }
+
+    @include it('config.modifierDelimeter is used') {
+      $config: (
+        'modifierDelimeter': '----',
+      );
+
+      @include assert-equal(
+        selectors.create-selector($type: 'modifier', $name: 'modifierName', $config: $config),
+        '----modifierName'
+      );
+    }
+
+    @include it('creates an element selector') {
+      $config: helpers.create-empty-map();
+
+      @include assert-equal(
+        selectors.create-selector($type: 'element', $name: 'elementName', $config: $config),
+        'elementName'
+      );
+    }
+
+    @include it('config.elementDelimeter is used') {
+      $config: (
+        'elementDelimeter': '____',
+      );
+
+      @include assert-equal(
+        selectors.create-selector($type: 'element', $name: 'elementName', $config: $config),
+        '____elementName'
+      );
+    }
+
+    @include it('creates a custom selector') {
+      $config: helpers.create-empty-map();
+
+      @include assert-equal(
+        selectors.create-selector($type: 'custom', $name: '#div a.b', $config: $config),
+        '#div a.b'
+      );
+    }
+  }
+
+  @include describe('creator<entity>Selectors can be overridden') {
+    $result: init-multi-sass(
+      $modifiers: true,
+      $elements: true,
+      $extras: true,
+      $block: 'test',
+      $config: (
+        'createBlockSelector': meta.get-function('create-block'),
+        'createModifierSelector': meta.get-function('create-modifier'),
+        'createElementSelector': meta.get-function('create-element'),
+      ),
+    );
+    $config: map.get($result, 'config');
+
+    @include it('create-selector uses createBlockSelector if set') {
+      @include assert-equal(
+        selectors.create-selector($type: 'block', $name: 'blockName', $config: $config),
+        '*[data-block="blockName"]'
+      );
+    }
+
+    @include it('create-selector uses createModifierSelector if set') {
+      @include assert-equal(
+        selectors.create-selector($type: 'modifier', $name: 'modifierName', $config: $config),
+        '*[data-variant="modifierName"]'
+      );
+    }
+
+    @include it('create-selector uses createElementSelector if set') {
+      @include assert-equal(
+        selectors.create-selector($type: 'element', $name: 'elementName', $config: $config),
+        '*[data-element="elementName"]'
+      );
+    }
+  }
+}

package/lib/utils/multi-sass/__tests__/_test-helpers.scss

@@ -0,0 +1,66 @@
+/* stylelint-disable scss/function-no-unknown */
+@use '../helpers' as helpers;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+
+// tested keys are from "expected" so partials can be tested.
+@function diff-map($target, $expected, $diffs: []) {
+  @each $key in map.keys($expected) {
+    $value: map.get($target, $key);
+    $expectedValue: map.get($expected, $key);
+
+    @if helpers.is-value-map($expectedValue) {
+      @if not helpers.is-value-map($value) {
+        $diffs: list.append($diffs, 'expected "#{$key}" to be a map, but got "#{meta.inspect($value)}"');
+      } @else {
+        $diffs: diff-map($value, $expectedValue, $diffs);
+      }
+    } @else {
+      @if $value != $expectedValue {
+        $diffs: list.append($diffs, 'expected "#{$key}" to be "#{$expectedValue}", but got "#{meta.inspect($value)}"');
+      }
+    }
+  }
+
+  @return $diffs;
+}
+
+// tested items are from "expected" so partials can be tested.
+@function diff-list($target, $expected, $diffs: []) {
+  $len: list.length($expected);
+  @if $len > 1 {
+    @for $i from 1 through $len - 1 {
+      $value: list.nth($target, $i);
+      $expectedValue: list.nth($expected, $i);
+
+      @if helpers.is-value-list($expectedValue) {
+        @if not helpers.is-value-list($value) {
+          $diffs: list.append($diffs, 'expected "#{$i}" to be a list, but got "#{meta.inspect($value)}"');
+        } @else {
+          $diffs: diff-map($value, $expectedValue, $diffs);
+        }
+      } @else {
+        @if $value != $expectedValue {
+          $diffs: list.append($diffs, 'expected "#{$i}" to be "#{$expectedValue}", but got "#{meta.inspect($value)}"');
+        }
+      }
+    }
+  }
+  @return $diffs;
+}
+
+@function inspect($note, $data) {
+  @debug '#{$note}: #{meta.inspect($data)}';
+  @return null;
+}
+
+@function inspectArgs($args...) {
+  $data: helpers.create-empty-map();
+  @each $key, $value in meta.keywords($args) {
+    $data: map.set($data, $key, $value);
+  }
+
+  @debug 'inspectArgs: #{meta.inspect($data)}';
+  @return null;
+}

package/lib/utils/multi-sass/__tests__/_testing-mixins.scss

@@ -0,0 +1,155 @@
+@use '../exports' as *;
+
+@mixin SimpleBlockModifiersElements($args...) {
+  @include multi-sass($block: 'simple-simple-block', $args...) {
+    @include block {
+      --simple-block: var(--var-simple-block);
+
+      div {
+        --simple-block-div: var(--var-simple-block-div);
+      }
+
+      @include modifier('modifier1') {
+        --simple-block-modifier1: var(--var-simple-block-modifier1);
+
+        @include element('element1') {
+          --simple-block-modifier1-element1: var(--var-simple-block-modifier1-element1);
+
+          a {
+            --simple-block-modifier1-element1-a: var(--var-simple-block-modifier1-element1-a);
+          }
+        }
+      }
+
+      @include modifier('modifier2') {
+        --simple-block-modifier2: var(--var-simple-block-modifier2);
+
+        @include element('element1') {
+          --simple-block-modifier2-element1: var(--var-simple-block-modifier2-element1);
+
+          a {
+            --simple-block-modifier2-element1-a: var(--var-simple-block-modifier2-element1-a);
+          }
+        }
+
+        @include element('element2') {
+          --simple-block-modifier2-element2: var(--var-simple-block-modifier2-element2);
+
+          span {
+            --simple-block-modifier2-element2-span: var(--var-simple-block-modifier2-element2-span);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin SimpleContainer($args...) {
+  @include multi-sass($block: 'simple-container', $args...) {
+    section {
+      @include block {
+        @include if-content-allowed {
+          --simple-container-base: var(--var-simple-container-base);
+        }
+
+        @include element('content') {
+          --simple-container-content: var(--var-simple-container-content);
+        }
+
+        @include modifier('tiny') {
+          --simple-container-dark: var(--var-simple-container-tiny);
+
+          @include element('content') {
+            --simple-container-tiny-content: var(--var-simple-container-tiny-content);
+          }
+        }
+        @content;
+
+        @include modifier('max') {
+          --simple-container-max: var(--var-simple-container-max);
+
+          @include element('content') {
+            --simple-container-max-content: var(--var-simple-container-max-content);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin SimpleButton($args...) {
+  @include multi-sass($block: 'simple-button', $args...) {
+    button {
+      @include block {
+        @include if-content-allowed {
+          --simple-button-base: var(--var-simple-button-base);
+        }
+
+        @include element('icon') {
+          --simple-button-icon: var(--var-simple-button-icon);
+
+          span {
+            --simple-button-icon-span: var(--var-simple-button-modifier1-icon-span);
+          }
+        }
+
+        @include modifier('dark') {
+          --simple-button-dark: var(--var-simple-button-dark);
+
+          @include element('icon') {
+            --simple-button-dark-icon: var(--var-simple-button-dark-icon);
+
+            span {
+              --simple-button-dark-icon-span: var(--var-simple-button-dark-icon-span);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin ComplexInnerBlocks($elements: true, $modifiers: true, $extras: true) {
+  @include multi-sass($modifiers: $modifiers, $elements: $elements, $extras: $extras, $block: 'block-name') {
+    ///
+    @include block {
+      --block: var(--var-block);
+
+      div {
+        --block-div: var(--var-block-div);
+      }
+    }
+
+    @include block {
+      --block2: var(--var-block2);
+
+      @include block {
+        --block2-inner-block: var(--var-block2-inner-block);
+
+        div {
+          --block2-div: var(--var-block2-div);
+        }
+      }
+
+      ul {
+        li {
+          @include block {
+            --ul-li-block3: var(--var-ul-li-block3);
+
+            a {
+              --ul-li-block3-a: var(--var-ul-li-block3-a);
+
+              @include block {
+                --ul-li-block3-a-block4: var(--ul-li-block3-a-block4);
+
+                span {
+                  --ul-li-block3-a-block4-span: var(--ul-li-block3-a-block4-span);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}