@madgex/design-system 13.3.2 → 13.5.0

package/src/components/inputs/checkbox-list/_template.njk

@@ -31,6 +31,12 @@
         #}{{ checkboxParams.name }}-{{ option.value }}{#
       #}{% endif -%}
       {%- endset -%}
+      {% set optionLabelPlain = option.labelText | striptags | trim %}
+      {% if checkboxParams.pathPrefix %}
+        {% set currentPath = checkboxParams.pathPrefix ~ ' / ' ~ optionLabelPlain %}
+      {% else %}
+        {% set currentPath = optionLabelPlain %}
+      {% endif %}
       {%- set isSelected = false -%}
       {%- set accordionIsExpanded = false -%}
       {% if checkboxParams.selectedOptions %}
@@ -60,6 +66,7 @@
           name: checkboxParams.name,
           id: optionId,
           value: option.value,
+          dataPath: currentPath,
           optional: true
         }) }}
         {% if option.options and option.options.length %}
@@ -80,7 +87,8 @@
                 options: option.options,
                 selectedOptions: checkboxParams.selectedOptions,
                 name: checkboxParams.name,
-                disabled: checkboxParams.disabled
+                disabled: checkboxParams.disabled,
+                pathPrefix: currentPath
               }) }}
             </div>
           </fieldset>
@@ -128,7 +136,8 @@
         selectedOptions: params.selectedOptions,
         name: name,
         disabled: params.disabled,
-        i18n: params.i18n
+        i18n: params.i18n,
+        pathPrefix: ''
       }) }}
     </div>
   </fieldset>

package/src/components/inputs/checkbox-list/checkbox-list.config.js

@@ -92,6 +92,14 @@ module.exports = {
             options: [
               { value: 600102, labelText: 'Artist agency & management', options: [] },
               { value: 600104, labelText: 'Arts education & training', options: [] },
+              {
+                value: 123,
+                labelText: 'Art sales',
+                options: [
+                  { value: 12301, labelText: 'Art auction', options: [] },
+                  { value: 12302, labelText: 'Art dealer', options: [] },
+                ],
+              },
               { value: 104, labelText: 'Dance', options: [] },
               { value: 600105, labelText: 'Events', options: [] },
               { value: 600106, labelText: 'Festival', options: [] },

package/src/js/index-fractal.js

@@ -5,4 +5,5 @@ document.addEventListener('DOMContentLoaded', async () => {
   switchStateScript.init();
   notificationScript.init();
   await import('../components/timeout-dialog/mds-timeout-dialog-standalone.js');
+  await import('../components/image-cropper/mds-image-cropper-standalone.js');
 });

package/src/js/index.js

@@ -13,6 +13,7 @@ import { MdsDropdownNav } from '../components/dropdown-nav/dropdown-nav';
 import { MdsTimeoutDialog } from '../components/timeout-dialog/timeout-dialog';
 import { MdsCardLink } from '../components/card/card-link';
 import { MdsConditionalSection } from '../components/conditional-section/conditional-section';
+import { MdsImageCropper } from '../components/image-cropper/image-cropper';
 
 if (!window.customElements.get('mds-dropdown-nav')) {
   window.customElements.define('mds-dropdown-nav', MdsDropdownNav);
@@ -26,7 +27,9 @@ if (!window.customElements.get('mds-card-link')) {
 if (!window.customElements.get('mds-conditional-section')) {
   window.customElements.define('mds-conditional-section', MdsConditionalSection);
 }
-
+if (!window.customElements.get('mds-image-cropper')) {
+  window.customElements.define('mds-image-cropper', MdsImageCropper);
+}
 const initAll = () => {
   tabs.init();
   accordion.init();

package/src/scss/components/__index.scss

@@ -17,3 +17,4 @@
 @import '../../components/skip-link/skip-link';
 @import '../../components/media-block/media-block';
 @import '../../components/timeout-dialog/timeout-dialog';
+@import '../../components/image-cropper/image-cropper';