Merge pull request #917 from City-of-Helsinki/UHF-9588

UHF-9588: Unit search variant fixes

hdbt.libraries.yml

@@ -141,7 +141,7 @@ nav-global:
     - hdbt/nav-toggle
 
 event-list:
-  version: 1.2
+  version: 1.3
   js:
     dist/js/linkedevents.min.js: {
       preprocess: false
@@ -152,7 +152,7 @@ event-list:
     - core/drupal
 
 school-search:
-  version: 1.4
+  version: 1.5
   js:
     dist/js/school-search.min.js: {
       preprocess: false
@@ -173,7 +173,7 @@ hyphenopoly:
     }
 
 job-search:
-  version: 1.2
+  version: 1.3
   js:
     dist/js/job-search.min.js: {
       preprocess: false
@@ -183,7 +183,7 @@ job-search:
     - core/drupal
 
 district-and-project-search:
-  version: 1.2
+  version: 1.3
   js:
     dist/js/district-and-project-search.min.js: {
       preprocess: false
@@ -193,7 +193,7 @@ district-and-project-search:
     - core/drupal
 
 news-archive:
-  version: 1.0
+  version: 1.1
   js:
     dist/js/news-archive.min.js: {
       preprocess: false
@@ -216,7 +216,7 @@ table-figcaption:
     - core/once
 
 health-station-search:
-  version: 1.2
+  version: 1.3
   js:
     dist/js/health-station-search.min.js: {
       preprocess: false
@@ -226,7 +226,7 @@ health-station-search:
     - core/drupal
 
 maternity-and-child-health-clinic-search:
-  version: 1.1
+  version: 1.2
   js:
     dist/js/maternity-and-child-health-clinic-search.min.js: {
       preprocess: false

src/js/react/apps/district-and-project-search/components/results/ResultCard.tsx

@@ -77,14 +77,14 @@ const ResultCard = ({
       <>
         { project_plan_schedule &&
           <span className="metadata__item--schedule metadata__item--schedule--plan-schedule">
-            {Drupal.t('planning')}
+            {Drupal.t('planning', {}, { context: 'District and project search' })}
             {getTimeItem(project_plan_schedule)}
           </span>
         }
         {project_plan_schedule && project_execution_schedule && ' ' }
         {project_execution_schedule &&
           <span className="metadata__item--schedule">
-            {Drupal.t('execution')}
+            {Drupal.t('execution', {}, { context: 'District and project search' })}
             {getTimeItem(project_execution_schedule)}
           </span>
         }

src/js/react/apps/district-and-project-search/containers/FormContainer.tsx

@@ -171,7 +171,7 @@ const FormContainer = () => {
             variant='primary'
             theme='black'
           >
-            {Drupal.t('Search', {}, { context: 'District and project search' })}
+            {Drupal.t('Search', {}, { context: 'React search: submit button label' })}
           </Button>
         </div>
         <SelectionsContainer />

src/js/react/apps/health-station-search/containers/FormContainer.tsx

@@ -50,7 +50,7 @@ const ProximityFormContainer = () => {
           />
         </fieldset>
       </div>
-      <Button className='hdbt-search--react__submit-button' type='submit'>{Drupal.t('Search')}</Button>
+      <Button className='hdbt-search--react__submit-button' type='submit'>{Drupal.t('Search', {}, { context: 'React search: submit button label'})}</Button>
     </form>
   );
 };

src/js/react/apps/job-search/components/results/ResultCard.tsx

@@ -24,7 +24,7 @@ const getResultCard = ({
   const cardTitle = (
     <>
       <span {...langAttribute}>{heading}</span>
-      {field_jobs?.[0] > 1 && <span>{` (${field_jobs} ${Drupal.t('jobs')})`}</span>}
+      {field_jobs?.[0] > 1 && <span>{` (${field_jobs} ${Drupal.t('jobs', {}, {context: 'Job search'})})`}</span>}
     </>
   );
 
@@ -67,9 +67,9 @@ const getResultCard = ({
       cardTitle={cardTitle}
       cardUrl={url?.[0]}
       date={getDate()}
-      dateLabel={Drupal.t('Application period ends')}
+      dateLabel={Drupal.t('Application period ends', {}, {context: 'Job search'})}
       daterange={field_job_duration?.[0].toString()}
-      dateRangeLabel={Drupal.t('Employment contract')}
+      dateRangeLabel={Drupal.t('Employment contract', {}, {context: 'Job search'})}
       langAttribute={langAttribute}
     />
   );

src/js/react/apps/job-search/containers/FormContainer.tsx

@@ -292,8 +292,8 @@ const FormContainer = () => {
           )}
         </fieldset>
       )}
-      <Button className='hds-button hds-button--primary job-search-form__submit-button' type='submit'>
-        {Drupal.t('Search')}
+      <Button className='hdbt-search--react__submit-button job-search-form__submit-button' type='submit'>
+        {Drupal.t('Search', {}, { context: 'React search: submit button label' })}
       </Button>
       <SelectionsContainer />
     </form>

src/js/react/apps/job-search/helpers/Language.ts

@@ -3,13 +3,13 @@ import OptionType from '../types/OptionType';
 export const getLanguageLabel = (key: string) => {
   switch (key.toString()) {
     case 'fi':
-      return Drupal.t('Finnish');
+      return Drupal.t('Finnish', {}, {context: 'Job search languages'});
     case 'sv':
-      return Drupal.t('Swedish');
+      return Drupal.t('Swedish', {}, {context: 'Job search languages'});
     case 'en':
-      return Drupal.t('English');
+      return Drupal.t('English', {}, {context: 'Job search languages'});
     default:
-      return Drupal.t('Finnish');
+      return Drupal.t('Finnish', {}, {context: 'Job search languages'});
   }
 };
 

src/js/react/apps/linkedevents/components/DateSelect.tsx

@@ -19,7 +19,7 @@ import {
   updateParamsAtom,
 } from '../store';
 
-const dateHelperText = Drupal.t('Use the format D.M.YYYY');
+const dateHelperText = Drupal.t('Use the format D.M.YYYY', {}, {context: 'Events search'});
 
 const getDateTimeFromHDSFormat = (d: string): DateTime => DateTime.fromFormat(d, HDS_DATE_FORMAT, { locale: 'fi' });
 
@@ -55,8 +55,8 @@ function DateSelect() {
   };
 
   const title = getDateString({ startDate, endDate });
-  const startDateErrorText = errors.invalidStartDate ? Drupal.t('Invalid start date') : '';
-  const endDateErrorText = errors.invalidEndDate ? Drupal.t('Invalid end date') : '';
+  const startDateErrorText = errors.invalidStartDate ? Drupal.t('Invalid start date', {}, {context: 'Events search'}) : '';
+  const endDateErrorText = errors.invalidEndDate ? Drupal.t('Invalid end date', {}, {context: 'Events search'}) : '';
 
   const setStart = (d: string) => {
     const start = getDateTimeFromHDSFormat(d);
@@ -135,15 +135,15 @@ function DateSelect() {
       <Collapsible
         id='event-search__date-select'
         label={Drupal.t('Date', {}, { context: 'React search: date selection label' })}
-        helper={Drupal.t('Select a time period in which in which the event takes place')}
+        helper={Drupal.t('Select a time period in which the event takes place', {}, {context: 'Events search'})}
         title={title}
       >
         <div className='event-form__date-container'>
           <DateInput
             className='hdbt-search__filter hdbt-search__date-input'
             helperText={dateHelperText}
             id='start-date'
-            label={Drupal.t('First day of the time period')}
+            label={Drupal.t('First day of the time period', {}, {context: 'Events search'})}
             language={currentLanguage}
             invalid={errors.invalidStartDate}
             errorText={startDateErrorText}
@@ -152,7 +152,7 @@ function DateSelect() {
           />
           <CheckboxFilter
             id='end-disabled'
-            label={Drupal.t('The last day of the time period is the same as the first day')}
+            label={Drupal.t('The last day of the time period is the same as the first day', {}, {context: 'Events search'})}
             atom={endDisabledAtom}
             valueKey={SearchComponents.END_DISABLED}
           />
@@ -162,7 +162,7 @@ function DateSelect() {
             disabled={endDisabled}
             helperText={dateHelperText}
             id='end-date'
-            label={Drupal.t('Last day of the time period')}
+            label={Drupal.t('Last day of the time period', {}, {context: 'Events search'})}
             language={currentLanguage}
             invalid={errors.invalidEndDate}
             errorText={endDateErrorText}

src/js/react/apps/linkedevents/components/LocationFilter.tsx

@@ -16,8 +16,8 @@ function LocationFilter() {
     updateParams({ [ApiKeys.LOCATION]: value.map((location: any) => location.value).join(',') });
   };
 
-  const locationHelper = Drupal.t('If you want to search for remote events, select only the option \'Internet (remote events)\'');
-  const selectVenueLabel: string = Drupal.t('Select a venue');
+  const locationHelper = Drupal.t('If you want to search for remote events, select only the option \'Internet (remote events)\'', {}, {context: 'Events search'});
+  const selectVenueLabel: string = Drupal.t('Select a venue', {}, {context: 'Events search'});
 
   return (
     <div className='hdbt-search__filter event-form__filter--location'>

src/js/react/apps/linkedevents/components/SeeAllButton.tsx

@@ -12,7 +12,7 @@ function SeeAllButton() {
         className="hds-button hds-button--link hds-button--secondary"
         data-is-external="true"
       >
-        <span className="hds-button__label">{Drupal.t('Refine search in tapahtumat.hel.fi')}</span>
+        <span className="hds-button__label">{Drupal.t('Refine search in tapahtumat.hel.fi', {}, { context: 'Events search' })}</span>
         <span className="link__type link__type--external" aria-label={`(${Drupal.t(
             'Link leads to external service',
             {},

src/js/react/apps/linkedevents/components/SubmitButton.tsx

@@ -6,7 +6,7 @@ type SubmitButtonProps =  {
 
 function SubmitButton({ disabled }: SubmitButtonProps) {
   return (
-    <Button type="submit" disabled={disabled} className='hdbt-search--react__submit-button event-list__submit-button'>{Drupal.t('Search', {}, { context: 'React search' })}</Button>
+    <Button type="submit" disabled={disabled} className='hdbt-search--react__submit-button event-list__submit-button'>{Drupal.t('Search', {}, { context: 'React search: submit button label' })}</Button>
   );
 }
 

src/js/react/apps/linkedevents/containers/FormContainer.tsx

@@ -37,8 +37,8 @@ function FormContainer() {
 
   const bothCheckboxes = showFreeFilter && showRemoteFilter;
   const showOnlyLabel = Drupal.t('Show only', {}, { context: 'Event search: event type prefix' });
-  const freeTranslation = Drupal.t('Free-of-charge events');
-  const remoteTranslation = Drupal.t('Remote events');
+  const freeTranslation = Drupal.t('Free-of-charge events', {}, { context: 'Event search' });
+  const remoteTranslation = Drupal.t('Remote events', {}, { context: 'Event search' });
   const freeLabel = bothCheckboxes ? freeTranslation : `${showOnlyLabel} ${freeTranslation.toLowerCase()}`;
   const remoteLabel = bothCheckboxes ? remoteTranslation : `${showOnlyLabel} ${remoteTranslation.toLowerCase()}`;
 

src/js/react/apps/linkedevents/containers/SelectionsContainer.tsx

@@ -51,14 +51,14 @@ const SelectionsContainer = ({ url }: SelectionsContainerProps) => {
         url={url}
       />
       <CheckboxFilterPill
-        label={Drupal.t('Remote events')}
+        label={Drupal.t('Remote events', {}, { context: 'Events search' })}
         valueKey={ApiKeys.REMOTE}
         atom={remoteFilterAtom}
         url={url}
         value={remoteFilter}
       />
       <CheckboxFilterPill
-        label={Drupal.t('Free-of-charge events')}
+        label={Drupal.t('Free-of-charge events', {}, { context: 'Events search' })}
         valueKey={ApiKeys.FREE}
         atom={freeFilterAtom}
         url={url}

src/js/react/apps/linkedevents/helpers/GetDate.ts

@@ -3,7 +3,7 @@ import HDS_DATE_FORMAT from '../utils/HDS_DATE_FORMAT';
 
 const getDateString = ({ startDate, endDate }: DateSelectDateTimes): string => {
   if ((!startDate || !startDate.isValid) && (!endDate || !endDate.isValid)) {
-    return Drupal.t('All', {}, { context: '' });
+    return Drupal.t('All', {}, { context: 'Event search' });
   }
 
   if ((startDate && startDate.isValid) && (!endDate || !endDate.isValid)) {

src/js/react/apps/maternity-and-child-health-clinic-search/containers/FormContainer.tsx

@@ -50,7 +50,7 @@ const ProximityFormContainer = () => {
           />
         </fieldset>
       </div>
-      <Button className='hdbt-search--react__submit-button' type='submit'>{Drupal.t('Search')}</Button>
+      <Button className='hdbt-search--react__submit-button' type='submit'>{Drupal.t('Search', {}, { context: 'React search: submit button label' })}</Button>
     </form>
   );
 };

src/js/react/apps/news-archive/components/SubmitButton.tsx

@@ -12,7 +12,7 @@ const SubmitButton = ({ disabled }: SubmitButtonProps) => (
         type='submit'
         variant='primary'
       >
-        {Drupal.t('Filter')}
+        {Drupal.t('Filter', {}, { context: 'News search' })}
       </Button>
     </div>
   );

src/js/react/apps/news-archive/components/results/ResultCard.tsx

@@ -59,7 +59,7 @@ const ResultCard = ({
       cardModifierClass='news-listing__item'
       cardUrl={url.toString()}
       date={getDate()}
-      dateLabel={Drupal.t('Published')}
+      dateLabel={Drupal.t('Published', {}, { context: 'News search' })}
     />
   );
 };

src/js/react/apps/school-search/components/ResultCard.tsx

@@ -40,11 +40,11 @@ const ResultCard = ({
   let language;
 
   if (additionalFilters.finnish_education) {
-    language = Drupal.t('Finnish');
+    language = Drupal.t('Finnish', {}, {context: 'School search: language option'});
   }
 
   if (additionalFilters.swedish_education) {
-    const swedish = Drupal.t('Swedish');
+    const swedish = Drupal.t('Swedish', {}, {context: 'School search: language option'});
     language = language?.length ? `${language}, ${swedish.toLowerCase()}` : swedish;
   }
 

src/js/react/apps/school-search/containers/FeatureFormContainer.tsx

@@ -117,7 +117,7 @@ const FeatureFormContainer = () => {
             className='hdbt-search--react__checkbox'
             checked={stagedParams?.finnish_education || false}
             id='finnish_education'
-            label={Drupal.t('Finnish')}
+            label={Drupal.t('Finnish', {}, {context: 'School search: language option'})}
             name='finnish_education'
             onClick={() => setStagedParams({...stagedParams, finnish_education: !stagedParams?.finnish_education})}
             value={stagedParams?.finnish_education?.toString() || 'false'}
@@ -126,7 +126,7 @@ const FeatureFormContainer = () => {
             className='hdbt-search--react__checkbox'
             checked={stagedParams?.swedish_education || false}
             id='swedish_education'
-            label={Drupal.t('Swedish')}
+            label={Drupal.t('Swedish', {}, {context: 'School search: language option'})}
             name='swedish_education'
             onClick={() => setStagedParams({...stagedParams, swedish_education: !stagedParams?.swedish_education})}
             value={stagedParams?.swedish_education?.toString() || 'false'}
@@ -176,7 +176,7 @@ const FeatureFormContainer = () => {
             {},
             { context: 'React search remove item aria label' }
           )}
-          placeholder={Drupal.t('All languages')}
+          placeholder={Drupal.t('All languages', {}, {context: 'School search: language placeholder'})}
           multiselect
           label={a1Label}
           options={a1Options}
@@ -194,7 +194,7 @@ const FeatureFormContainer = () => {
             {},
             { context: 'React search remove item aria label' }
           )}
-          placeholder={Drupal.t('All languages')}
+          placeholder={Drupal.t('All languages', {}, {context: 'School search: language placeholder'})}
           multiselect
           label={a2Label}
           options={a2Options}
@@ -212,7 +212,7 @@ const FeatureFormContainer = () => {
             {},
             { context: 'React search remove item aria label' }
           )}
-          placeholder={Drupal.t('All languages')}
+          placeholder={Drupal.t('All languages', {}, {context: 'School search: language placeholder'})}
           multiselect
           label={b1Label}
           options={b1Options}
@@ -230,7 +230,7 @@ const FeatureFormContainer = () => {
             {},
             { context: 'React search remove item aria label' }
           )}
-          placeholder={Drupal.t('All languages')}
+          placeholder={Drupal.t('All languages', {}, {context: 'School search: language placeholder'})}
           multiselect
           label={b2Label}
           options={b2Options}
@@ -282,7 +282,7 @@ const FeatureFormContainer = () => {
           variant='primary'
           theme='black'
         >
-          {Drupal.t('Search')}
+          {Drupal.t('Search', {}, {context: 'React search: submit button label'})}
         </Button>
         </div>
       <SelectionsContainer keys={keys} />

src/js/react/apps/school-search/containers/ProximityFormContainer.tsx

@@ -42,7 +42,7 @@ const ProximityFormContainer = () => {
         label={Drupal.t('The child\'s home address', {}, { context: 'School search: input label'})}
         type='search'
       />
-      <Button className='hdbt-search--react__submit-button' type='submit'>{Drupal.t('Search')}</Button>
+      <Button className='hdbt-search--react__submit-button' type='submit'>{Drupal.t('Search', {}, { context: 'React search: submit button label'})}</Button>
     </form>
   );
 };