City-of-Helsinki · teroelonen · Aug 14, 2023 · Aug 8, 2023 · Aug 8, 2023 · Aug 8, 2023
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/hdbt.libraries.yml b/hdbt.libraries.yml
@@ -62,7 +62,7 @@ global-styling:
     - hdbt/color-palette
     - hdbt/hdbt-icons
 
-# TODO Convert branding mobile to its own library.
+# TODO: UHF-8773 Convert branding mobile to its own library (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8773).
 global-scripting:
   version: 1.x
   js:

diff --git a/hdbt.theme b/hdbt.theme
@@ -55,7 +55,6 @@ function hdbt_preprocess(&$variables): void {
   $variables['#attached']['drupalSettings']['hdbt']['global_menu'] = \Drupal::moduleHandler()
     ->moduleExists('helfi_navigation');
 
-  // @todo Fix this to be independent block as well.
   $variables['#attached']['drupalSettings']['hdbt']['search_dropdown'] = \Drupal::moduleHandler()
     ->moduleExists('helfi_navigation');
 

diff --git a/src/js/accordion/accordion-item.js b/src/js/accordion/accordion-item.js
@@ -21,7 +21,7 @@ export default class AccordionItem {
     this.setHidden();
     this.addEventListeners();
     // Open accordion element by anchor link.
-    // TODO: Figure out why javascript cannot find elements at this point.
+    // TODO: UHF-8775 Figure out why javascript cannot find elements at this point (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8775).
     // Possibly due to other timeouts
     setTimeout(()=>{
       this.handleLinkAnchor();

diff --git a/src/js/calculator/helfi_calculator.js b/src/js/calculator/helfi_calculator.js
@@ -36,7 +36,7 @@ class HelfiCalculator {
       return index(obj[is[0]], is.slice(1), value);
     }
 
-    const lang = drupalSettings.path.currentLanguage || 'fi'; // TODO: Is this lang check ok?
+    const lang = drupalSettings.path.currentLanguage || 'fi';
     const translation = this.translations[key] ? this.translations[key][lang] : null;
     if (translation) {
       return translation.replace(/\$\{.+?\}/g, (match) => {

diff --git a/src/js/nav-global/menu.js b/src/js/nav-global/menu.js
@@ -547,7 +547,7 @@ const MobilePanel = {
     if (!this.toggleButton) {
       throw new Error('No toggle button for JS menu.');
     }
-    // TODO Where is this #menu coming from Maybe name it better?
+    // TODO: UHF-8791 Where is this #menu coming from? Maybe name it better (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8791).
     this.menu = document.querySelector('#menu');
     if (!this.menu) {
       // eslint-disable-next-line no-console

diff --git a/src/js/react/apps/school-search/components/ResultsList.tsx b/src/js/react/apps/school-search/components/ResultsList.tsx
@@ -24,7 +24,6 @@ const ResultsList = ({ data, error, isLoading, isValidating, page, updatePage }:
     return <LoadingSpinner />;
   }
 
-  // @todo: Implement no results message
   if (!data?.hits?.hits.length || error) {
     return (
       <div className='react-search__no-results'>
@@ -46,7 +45,7 @@ const ResultsList = ({ data, error, isLoading, isValidating, page, updatePage }:
         <div className='react-search__results-stats'>
           <div className='react-search__count-container'>
             {!Number.isNaN(total) &&
-              <> 
+              <>
                 <span className='react-search__count'>{total}</span>
                 <span> {Drupal.t('schools', {}, {context: 'School search: results statline'})}</span>
               </>
@@ -86,7 +85,7 @@ const ResultsList = ({ data, error, isLoading, isValidating, page, updatePage }:
           updatePage={(e: SyntheticEvent, nextPage: number) => {
             e.preventDefault();
             updatePage(nextPage);
-          }}  
+          }}
         />
       }
     </div>

diff --git a/src/scss/00_functions/__index.scss b/src/scss/00_functions/__index.scss
@@ -1,6 +1,5 @@
 @import 'deep-map-merge';
 @import 'get';
-@import 'aspect-ratio';
 @import 'icon';
 @import 'unit';
 @import 'typography_functions';
diff --git a/src/scss/00_functions/_aspect-ratio.scss b/src/scss/00_functions/_aspect-ratio.scss
diff --git a/src/scss/02_mixins/_mixins.scss b/src/scss/02_mixins/_mixins.scss
@@ -69,7 +69,7 @@
   white-space: nowrap;
 }
 
-// TODO: replace with native flex gap once enough users have moved to > ios 14.4
+// TODO: UHF-8796 replace with native flex gap once enough users have moved to > ios 14.4 (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8796).
 @mixin flex-gap($gap, $parent-base-margin: 0) {
   margin-left: $parent-base-margin - $gap * 0.5;
   margin-right: $parent-base-margin - $gap * 0.5;

diff --git a/src/scss/03_generic/_hds_base.scss b/src/scss/03_generic/_hds_base.scss
@@ -1,6 +1,6 @@
 // Notice, this was stipped from hds-core/lib/base.css, as it's not available elsewhere
 
-// TODO: We're not really using these, we should get rid of these as we're most likely overriding these with our own code.
+// TODO: UHF-8794 We're not really using these, we should get rid of these as we're most likely overriding these with our own code (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8794).
 :root {
   --breakpoint-xs: 320px;
   --breakpoint-s: 576px;

diff --git a/src/scss/05_objects/_button.scss b/src/scss/05_objects/_button.scss
@@ -330,7 +330,7 @@ input[type='submit'].hds-button {
 }
 
 // Content fron HDS button.css ends
-// TODO: Refactor hds-button.
+// TODO: UHF-8793 Refactor hds-button (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8793).
 // Fix for button margins when using hel-icon.
 .hds-button {
 

diff --git a/src/scss/05_objects/icons/_hel-icon.scss b/src/scss/05_objects/icons/_hel-icon.scss
@@ -3,7 +3,7 @@
   background-color: currentColor;
   display: inline-block;
   height: var(--icon-size, var(--fallback));
-  mask-image: var(--url); // TODO: add fallback icon when webpack allows it
+  mask-image: var(--url);
   mask-position: center center;
   mask-repeat: no-repeat;
   vertical-align: text-bottom;

diff --git a/src/scss/06_components/forms/_checkbox.scss b/src/scss/06_components/forms/_checkbox.scss
@@ -2,7 +2,7 @@
   --focus-outline-color: #{$color-black}; // We should use hdbt color theme instead of hds
 
   > label {
-    @extend .hds-checkbox__label !optional; // TODO: we should refactor to get rid of this extend
+    @extend .hds-checkbox__label !optional; // TODO: UHF-8797 we should refactor to get rid of this extend (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8797).
   }
 
   .hds-checkbox__input:focus {

diff --git a/src/scss/06_components/layout/_component.scss b/src/scss/06_components/layout/_component.scss
@@ -1,7 +1,5 @@
 // Margins between components
 * ~ .components,
-.service__units + .component, // TODO: .service__units should be stripped from extra wrapping divs, so that .component element would be sibling to other components. service page margins were broken otherwise
-.unit__services + .component, // TODO: same as above for unit page where accessibility sentences accordion needs this
 .component ~ .component {
   @include component-margin-top;
 }

diff --git a/src/scss/06_components/media/_image-placeholder.scss b/src/scss/06_components/media/_image-placeholder.scss
@@ -1,11 +1,6 @@
-@use "sass:math";
-
-$-placeholder-aspect-ratio: math.div(16, 9);
-
-// TODO: Move under correct component when correct component is done.
 .image-placeholder {
+  aspect-ratio: 16/9;
   background-color: var(--hdbt-color-palette--primary);
-  padding-bottom: aspect-ratio-padding($-placeholder-aspect-ratio);
   position: relative;
   width: 100%;
 

diff --git a/src/scss/06_components/navigation/_header-bottom-navigation.scss b/src/scss/06_components/navigation/_header-bottom-navigation.scss
@@ -80,12 +80,6 @@ $-main-nav-dropdown-padding: $-main-nav-spacing;
     transform: rotate(180deg);
   }
 
-  .menu__item--nolink {
-    @include font('body'); // TODO: is this whole selector unnecessary?
-    padding: $spacing-and-half 0;
-    text-decoration: none;
-  }
-
   .menu__link-wrapper {
     align-items: center;
     display: flex;

diff --git a/src/scss/06_components/navigation/_local-tasks.scss b/src/scss/06_components/navigation/_local-tasks.scss
@@ -1,5 +1,5 @@
 .local-tasks__wrapper {
-  // TODO: Local tasks are hidden in smaller devices since the design doesn't scale.
+  // TODO: UHF-8798 Local tasks are hidden in smaller devices since the design doesn't scale (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8798).
   display: none;
 
   @include breakpoint($breakpoint-m) {

diff --git a/src/scss/06_components/navigation/_table-of-contents.scss b/src/scss/06_components/navigation/_table-of-contents.scss
@@ -59,8 +59,7 @@
   position: relative;
   text-decoration: underline;
 
-  // TODO: Unify focuses/hovers and other link styles once UHF-643 is being
-  // developed. https://helsinkisolutionoffice.atlassian.net/browse/UHF-643
+  // TODO: UHF-643 Unify focuses/hovers and other link styles (https://helsinkisolutionoffice.atlassian.net/browse/UHF-643).
   &:focus {
     outline: none;
 

diff --git a/src/scss/06_components/pages/_news-page.scss b/src/scss/06_components/pages/_news-page.scss
@@ -1,10 +1,3 @@
-@use 'sass:math';
-
-// Fix sidebar width when there are only short news titles
-// TODO: REGIONS Clean this up with other region things
-$-card-teaser-img-aspect-ratio: math.div(3, 2);
-$-card-teaser-min-width: 280px;
-
 .page-type--news-item .sidebar-first {
   display: block;
 }
@@ -278,7 +271,7 @@ $-card-teaser-min-width: 280px;
   }
 
   .image-placeholder {
-    padding-bottom: aspect-ratio-padding($-card-teaser-img-aspect-ratio);
+    aspect-ratio: 3/2;
   }
 
   .news-listing__text-container {

diff --git a/src/scss/06_components/paragraphs/_content-liftup.scss b/src/scss/06_components/paragraphs/_content-liftup.scss
@@ -74,10 +74,10 @@ $-info-row-icon-size: $spacing-and-half;
 }
 
 .content-liftup__image .image-placeholder {
-  padding-bottom: aspect-ratio-padding($-content-liftup-aspect-ratio-mobile);
+  aspect-ratio: ($-content-liftup-aspect-ratio-mobile);
 
   @include breakpoint($breakpoint-m) {
-    padding-bottom: aspect-ratio-padding($-content-liftup-aspect-ratio-desktop);
+    aspect-ratio: ($-content-liftup-aspect-ratio-desktop);
   }
 
   @include breakpoint($breakpoint-l) {

diff --git a/src/scss/06_components/paragraphs/_map.scss b/src/scss/06_components/paragraphs/_map.scss
@@ -1,8 +1,3 @@
-@use 'sass:math';
-
-$-map-aspect-ratio-desktop: math.div(16, 9);
-$-map-aspect-ratio-mobile: 1;
-
 .component--map {
   background-color: $color-silver-light;
 }
@@ -45,12 +40,11 @@ $-map-aspect-ratio-mobile: 1;
   position: relative;
 
   .responsive-map-container {
-    height: 0;
-    padding-bottom: aspect-ratio-padding($-map-aspect-ratio-mobile);
+    aspect-ratio: 1;
     position: relative;
 
     @include breakpoint($breakpoint-s) {
-      padding-bottom: aspect-ratio-padding($-map-aspect-ratio-desktop);
+      aspect-ratio: 16/9;
     }
   }
 

diff --git a/src/scss/06_components/paragraphs/_remote-video.scss b/src/scss/06_components/paragraphs/_remote-video.scss
@@ -1,7 +1,3 @@
-@use "sass:math";
-
-$-video-aspect-ratio: math.div(16, 9);
-
 .component--remote-video {
   @include hds-button-colors-on-dark-bg;
   @include component-side-padding;
@@ -34,10 +30,9 @@ $-video-aspect-ratio: math.div(16, 9);
   position: relative;
 
   .responsive-video-container {
+    aspect-ratio: 16/9;
     background-color: $color-black-10; // Add color to show a "placeholder" while the video is loading.
-    height: 0;
     overflow: hidden;
-    padding-bottom: aspect-ratio-padding($-video-aspect-ratio);
 
     iframe {
       border: 0;

diff --git a/src/scss/_hds.scss b/src/scss/_hds.scss
@@ -1,7 +1,7 @@
 // This file includes Helsinki Design System core packages.
 // These contents have been stripped to bare minimum that we use.
 
-// TODO: We should clean all these codes and move them to our own codebase
+// TODO: UHF-8792 We need improve this integration so that it is easier to keep up-to-date (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8792).
 
 // Rows below strip only used bits from @import 'xx_external/hds-core/lib/components/all.min.css';
 

diff --git a/src/scss/environment-indicator.scss b/src/scss/environment-indicator.scss
@@ -2,7 +2,7 @@
 .toolbar .toolbar-menu,
 .toolbar-horizontal .toolbar-tray .toolbar-menu-administration > ul > .menu-item--expanded,
 .toolbar-lining {
-  // TODO: Get spacing variable to work in hdbt_admin as well
+  // TODO: UHF-8774 Get spacing variable to work in hdbt_admin as well (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8774).
   box-shadow: inset 0 -8px 0 var(--bg);
 }
 
@@ -24,16 +24,16 @@
   color: var(--color);
   content: var(--name);
   display: block;
-  font-size: 14px; // TODO: Get fontsize variable to work in hdbt_admin as well
-  line-height: 1.5; // TODO: Get lineheight variable to work in hdbt_admin as well
-  padding: 4px 16px; // TODO: Get spacing variable to work in hdbt_admin as well
+  font-size: 14px; // TODO: UHF-8774 Get fontsize variable to work in hdbt_admin as well (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8774).
+  line-height: 1.5; // TODO: UHF-8774 Get lineheight variable to work in hdbt_admin as well (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8774).
+  padding: 4px 16px; // TODO: UHF-8774 Get spacing variable to work in hdbt_admin as well (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8774).
   z-index: 3;
 }
 
 .toolbar-tray-horizontal .toolbar-lining::after {
   position: absolute;
   right: 0;
-  top: 24px; // TODO: Get spacing variable to work in hdbt_admin as well
+  top: 24px; // TODO: UHF-8774 Get spacing variable to work in hdbt_admin as well (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8774).
 }
 
 .env-local {

diff --git a/src/scss/styles.scss b/src/scss/styles.scss
@@ -1,6 +1,6 @@
 // This file includes all imports
 
-// TODO: hds content should be cleaned
+// TODO: UHF-8792 The current hds integration of styles needs improving (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8792).
 @import 'hds';
 
 // Breakpoint helpers

diff --git a/templates/content/node--teaser.html.twig b/templates/content/node--teaser.html.twig
@@ -64,10 +64,6 @@
  *   is an administrator.
  *
  * @see template_preprocess_node()
- *
- * @todo Remove the id attribute (or make it a class), because if that gets
- *   rendered twice on a page this is invalid CSS for example: two lists
- *   in different view modes.
  */
 #}
 

diff --git a/templates/content/node.html.twig b/templates/content/node.html.twig
@@ -64,10 +64,6 @@
  *   is an administrator.
  *
  * @see template_preprocess_node()
- *
- * @todo Remove the id attribute (or make it a class), because if that gets
- *   rendered twice on a page this is invalid CSS for example: two lists
- *   in different view modes.
  */
 #}
 

diff --git a/templates/media/media-oembed-iframe--icareus-suite.html.twig b/templates/media/media-oembed-iframe--icareus-suite.html.twig
@@ -11,7 +11,7 @@
   <head>
     <css-placeholder token="{{ placeholder_token }}">
   </head>
-  {# TODO: Fix "right: -15px" once embedded video is returned without scrollbars. #}
+  {# The "right: -15px" is added to the video because it is returned with scrollbars. Once they are removed this can also be removed. #}
   <body style="margin: 0; height: 100%; left: 0; right: -15px; position: absolute; top: 0; width: auto; overflow: hidden;">
     {{ media|raw }}
   </body>

diff --git a/templates/navigation/link-button.html.twig b/templates/navigation/link-button.html.twig
@@ -19,7 +19,7 @@
  *   open_in_a_new_window: true,
  * } %}
  *
- * TODO: Refactor hds-button.
+ * TODO: UHF-8793 Refactor hds-button (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8793).
  */
  #}
 

diff --git a/webpack.svgToSprite.js b/webpack.svgToSprite.js
@@ -91,7 +91,7 @@ class svgToSprite {
     // SVG to CSS.
     // Create styles for the icons.
     compiler.hooks.emit.tapAsync('svgToCss', (compilation, callback) => {
-      let useOldClass = true; // TODO: Remove once hdbt-icon class has been removed.
+      let useOldClass = true; // TODO: UHF-8792 If sensible lets try to get rid of the hdbt-icon class. If that can be done, remove this (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8792).
 
       // Create --hel-icon--{icon name} CSS variables.
       let cssVariables = [];
@@ -112,7 +112,7 @@ class svgToSprite {
         let name = filename.split('.');
         cssClasses += `.${this.iconClass}-icon--${name[0]}{--url:var(--${this.iconClass}-icon--${name[0]})}`;
 
-        // TODO: Remove once hdbt-icon class has been removed.
+        // TODO: UHF-8792 If sensible lets try to get rid of the hdbt-icon class. If that can be done, remove this (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8792).
         if (useOldClass) {
           cssClasses += `.hdbt-icon--${name[0]}{--url:var(--${this.iconClass}-icon--${name[0]})}`;
         }
@@ -126,7 +126,7 @@ class svgToSprite {
         `mask-image:var(--url)` +
       `}`;
 
-      // TODO: Remove once hdbt-icon class has been removed.
+      // TODO: UHF-8792 If sensible lets try to get rid of the hdbt-icon class. If that can be done, remove this (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8792).
       if (useOldClass) {
         hdbtIconUrl += `.hdbt-icon::before{` +
           `-webkit-mask-image:var(--url);` +
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ @@
      *   open_in_a_new_window: true,
      * } %}
      *
-     * TODO: Refactor hds-button.
+     * TODO: UHF-8793 Refactor hds-button (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8793).
      */
      #}
@@ Expand Down @@