Skip to content

AB#450 use HSL design system modal for personalisation info #5746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vesameskanen merged 7 commits into from
Apr 20, 2026
Merged

AB#450 use HSL design system modal for personalisation info #5746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
505a7a8
Merge branch 'v3' into AB#509
vesameskanen Apr 2, 2026
4756eb5
feat: use design system modal for personalisation
vesameskanen Apr 8, 2026
1c2ed7e
Merge branch 'AB#509' into AB#450-2
vesameskanen Apr 8, 2026
3c3fe7a
Merge branch 'v3' into AB#450-2
vesameskanen Apr 10, 2026
c7e5328
Merge branch 'v3' into AB#450-2
vesameskanen Apr 14, 2026
e5f8558
feat: mobile styles for personalisation info modal
vesameskanen Apr 14, 2026
3c15daf
Merge branch 'v3' into AB#450-2
vesameskanen Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 66 additions & 60 deletions app/component/itinerary/customizesearch/PrModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import cx from 'classnames';
import Modal from '@hsl-fi/modal';
import { Modal, ModalContent } from '@hsl-fi/dialog';
import Icon from '../../Icon';
import ExternalLink from '../../ExternalLink';
import { useConfigContext } from '../../../configurations/ConfigContext';
Expand All @@ -15,72 +15,78 @@ export default function PrModal({ closeModal }) {
const breakpoint = useBreakpoint();

return (
<Modal
appElement="#app"
contentLabel="personalisation_info_modal"
closeButtonLabel={intl.formatMessage({ id: 'close' })}
variant="medium"
isOpen
onCrossClick={closeModal}
>
<div
className={cx('pr-info-modal', {
'pr-info-mobile': breakpoint !== 'large',
})}
<Modal lang={config.language} onOpenChange={closeModal} open>
<ModalContent
title={intl.formatMessage({ id: 'personalisation-modal-header' })}
lang={config.language}
>
<h2>
<FormattedMessage id="personalisation-modal-header" />
</h2>
<div className="pr-info-content">
<Icon img="icon_star-with-circle" color="#666" height={2} width={2} />
<div className="pr-info-text-area">
<h3>
<FormattedMessage id="personalisation-modal-highlight" />
</h3>
<FormattedMessage id="personalisation-modal-highlight-details" />
{config.favouriteLink[config.language] && (
<ExternalLink
href={config.favouriteLink[config.language]}
withArrow
>
<FormattedMessage id="personalisation-modal-link" />
</ExternalLink>
)}
</div>
</div>
<div className="pr-info-content">
<Icon img="icon_thumb" color="#666" height={2} width={2} />
<div className="pr-info-text-area">
<h3>
<FormattedMessage id="personalisation-modal-feedback" />
</h3>
<FormattedMessage id="personalisation-modal-feedback-details" />
</div>
</div>
<div className="pr-beta">
<div className="icon-area">
<div
className={cx('pr-info-modal', {
'pr-info-mobile': breakpoint !== 'large',
})}
>
<div className="pr-info-content">
<Icon
img="personalization"
color={config.colors.primary}
height={5}
width={5}
img="icon_star-with-circle"
color="#666"
height={2}
width={2}
/>
<div className="pr-info-text-area">
<h3>
<FormattedMessage id="personalisation-modal-highlight" />
</h3>
<FormattedMessage id="personalisation-modal-highlight-details" />
{config.favouriteLink[config.language] && (
<ExternalLink
href={config.favouriteLink[config.language]}
withArrow
>
<FormattedMessage id="personalisation-modal-link" />
</ExternalLink>
)}
</div>
</div>
<div className="pr-info-content">
<Icon img="icon_thumb" color="#666" height={2} width={2} />
<div className="pr-info-text-area">
<h3>
<FormattedMessage id="personalisation-modal-feedback" />
</h3>
<FormattedMessage id="personalisation-modal-feedback-details" />
</div>
</div>
<div className="beta-desc">
<span className="beta-label">Beta</span>
<span>
<FormattedMessage id="personalisation-beta" />
</span>
<button
type="button"
className="beta-feedback-button"
onClick={() => {}}
<div className="pr-beta">
{breakpoint === 'large' && (
<div className="icon-area">
<Icon
img="personalization"
color={config.colors.primary}
height={5}
width={5}
/>
</div>
)}
<div
className={cx('beta-desc', {
'beta-desc-mobile': breakpoint !== 'large',
})}
>
<FormattedMessage id="personalisation-feedback" />
</button>
<span className="beta-label">Beta</span>
<span>
<FormattedMessage id="personalisation-beta" />
</span>
<button
type="button"
className="beta-feedback-button"
onClick={() => {}}
>
<FormattedMessage id="personalisation-feedback" />
</button>
</div>
</div>
</div>
</div>
</ModalContent>
</Modal>
);
}
Expand Down
16 changes: 10 additions & 6 deletions app/component/itinerary/customizesearch/customize-search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,8 +328,6 @@
}

.pr-info-modal {
padding: 24px;

h2 {
font-size: $font-size-large;
}
Expand Down Expand Up @@ -412,6 +410,7 @@
button {
height: 28px;
width: 140px;
margin-top: 4px;
border-radius: 14px;
flex-direction: row;
justify-content: center;
Expand All @@ -420,9 +419,14 @@
color: $white;
background-color: $theme-primary-color;
}
}
}

.pr-info-mobile {
padding-top: 46px;
.beta-desc-mobile {
max-width: 100%;
width: 100%;

button {
width: 100%;
}
}
}
}
1 change: 0 additions & 1 deletion app/configurations/config.hsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -813,7 +813,6 @@ export default {
allowedExternalFlexRouteTypes: [1501],
infoLanguage: 'fi',
},

showRouteDescNotification: IS_DEV,
personalisation: false,
viaPointsEnabled: true,
Expand Down
Loading