LIIKUNTA-604 | fix: icons inline positioning (#656)

City-of-Helsinki · Mar 12, 2024 · 4968a39 · 4968a39
1 parent 984eef1
commit 4968a39
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 17 deletions.
diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json
@@ -71,7 +71,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha260",
+    "react-helsinki-headless-cms": "1.0.0-alpha264",
     "react-i18next": "13.0.1",
     "react-scroll": "^1.8.9",
     "react-toastify": "^9.1.3",

diff --git a/apps/hobbies-helsinki/package.json b/apps/hobbies-helsinki/package.json
@@ -71,7 +71,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha260",
+    "react-helsinki-headless-cms": "1.0.0-alpha264",
     "react-i18next": "13.0.1",
     "react-scroll": "^1.8.9",
     "react-toastify": "^9.1.3",

diff --git a/apps/sports-helsinki/package.json b/apps/sports-helsinki/package.json
@@ -79,7 +79,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha260",
+    "react-helsinki-headless-cms": "1.0.0-alpha264",
     "react-i18next": "13.0.1",
     "react-leaflet": "4.2.1",
     "react-scroll": "^1.8.9",

diff --git a/apps/sports-helsinki/src/domain/venue/venueInfo/VenueInfo.tsx b/apps/sports-helsinki/src/domain/venue/venueInfo/VenueInfo.tsx
@@ -142,7 +142,7 @@ const VenueInformationLinksContainer = ({
         title={t('venue:info.labelVenueInformationLinks')}
       >
         {infoUrl && (
-          <SecondaryLink className={styles.link} href={infoUrl}>
+          <SecondaryLink inlineIcons className={styles.link} href={infoUrl}>
             {t('venue:info.link.website')}
           </SecondaryLink>
         )}
@@ -151,6 +151,7 @@ const VenueInformationLinksContainer = ({
             key={connection?.url}
             className={styles.link}
             href={connection?.url ?? ''}
+            inlineIcons
           >
             {connection?.name}
           </SecondaryLink>
@@ -175,12 +176,14 @@ const VenueRouteInfo = ({ venue }: { venue: Venue }) => {
       <SecondaryLink
         className={styles.link}
         href={getHSLDirectionsUrl(null, directionPoint)}
+        inlineIcons
       >
         {t('venue:location.directionsHSL')}
       </SecondaryLink>
       <SecondaryLink
         className={styles.link}
         href={getGoogleDirectionsUrl(null, directionPoint)}
+        inlineIcons
       >
         {t('venue:location.directionsGoogle')}
       </SecondaryLink>
@@ -226,6 +229,7 @@ const ServiceOwnerInfo = ({ venue }: { venue: Venue }) => {
             className={styles.link}
             variant="arrowRight"
             href={getHelsinkiOnlySearchUrl(venue, router, locale)}
+            inlineIcons
           >
             {t('info.link.searchByHelsinkiOnly')}
           </SecondaryLink>

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -76,7 +76,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha260",
+    "react-helsinki-headless-cms": "1.0.0-alpha264",
     "react-i18next": "13.0.1",
     "react-leaflet": "4.2.1",
     "react-toastify": "^9.1.3",

diff --git a/packages/components/src/components/domain/event/eventInfo/EventInfo.tsx b/packages/components/src/components/domain/event/eventInfo/EventInfo.tsx
@@ -202,6 +202,7 @@ const LocationInfo: React.FC<{ event: EventFields }> = ({ event }) => {
           showExternalIcon={false}
           variant="arrowRight"
           href={serviceMapUrl}
+          inlineIcons
         >
           {t('info.openMap')}
         </SecondaryLink>
@@ -264,6 +265,7 @@ const OtherInfo: React.FC<{
           className={styles.link}
           href={infoUrl}
           showExternalIcon={false}
+          inlineIcons
         >
           {t('info.linkWebPage')}
         </SecondaryLink>
@@ -281,6 +283,7 @@ const OtherInfo: React.FC<{
                 className={styles.link}
                 key={`externalLink-${index}`}
                 href={externalLink.link}
+                inlineIcons
               >
                 {translateValue('info.', externalLink.name, t)}
               </SecondaryLink>
@@ -308,10 +311,18 @@ const Directions: React.FC<{
       icon={<IconDirections aria-hidden />}
       title={t('info.labelDirections')}
     >
-      <SecondaryLink className={styles.link} href={googleDirectionsLink}>
+      <SecondaryLink
+        inlineIcons
+        className={styles.link}
+        href={googleDirectionsLink}
+      >
         {t('info.directionsGoogle')}
       </SecondaryLink>
-      <SecondaryLink className={styles.link} href={hslDirectionsLink}>
+      <SecondaryLink
+        inlineIcons
+        className={styles.link}
+        href={hslDirectionsLink}
+      >
         {t('info.directionsHSL')}
       </SecondaryLink>
     </InfoWithIcon>

diff --git a/packages/components/src/components/domain/event/eventInfo/OrganizationInfo.tsx b/packages/components/src/components/domain/event/eventInfo/OrganizationInfo.tsx
@@ -57,6 +57,7 @@ const OrganizationInfo: React.FC<Props> = ({ event }) => {
               <>
                 <div>{organizationName}</div>
                 <SecondaryLink
+                  inlineIcons
                   data-testid="publisherLink"
                   className={styles.link}
                   variant="arrowRight"
@@ -72,6 +73,7 @@ const OrganizationInfo: React.FC<Props> = ({ event }) => {
             )}
             {isHelsinkiCityOwned && (
               <SecondaryLink
+                inlineIcons
                 data-testid="helsinkiOnlyLink"
                 className={styles.link}
                 variant="arrowRight"

diff --git a/packages/components/src/components/mapBox/MapBox.tsx b/packages/components/src/components/mapBox/MapBox.tsx
@@ -76,10 +76,15 @@ function MapBox({
         <Text variant="body-l" className={styles.location}>
           {placeAddress}
         </Text>
-        <SecondaryLink className={styles.externalLink} href={hslDirectionsLink}>
+        <SecondaryLink
+          inlineIcons
+          className={styles.externalLink}
+          href={hslDirectionsLink}
+        >
           {t('common:mapBox.location.directionsHSL')}
         </SecondaryLink>
         <SecondaryLink
+          inlineIcons
           className={styles.externalLink}
           href={googleDirectionsLink}
         >

diff --git a/packages/components/src/components/section/Section.tsx b/packages/components/src/components/section/Section.tsx
@@ -55,7 +55,7 @@ const Section = React.forwardRef<HTMLElement, Props>(
         {cta && title && (
           <header className={styles.sectionHeader}>
             {titleComponent}
-            <SecondaryLink variant="arrowRight" href={cta.href}>
+            <SecondaryLink inlineIcons variant="arrowRight" href={cta.href}>
               {cta.label}
             </SecondaryLink>
           </header>

diff --git a/yarn.lock b/yarn.lock
@@ -3487,7 +3487,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha260"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha264"
     react-i18next: "npm:13.0.1"
     react-leaflet: "npm:4.2.1"
     react-toastify: "npm:^9.1.3"
@@ -14277,7 +14277,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha260"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha264"
     react-i18next: "npm:13.0.1"
     react-scroll: "npm:^1.8.9"
     react-toastify: "npm:^9.1.3"
@@ -16152,7 +16152,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha260"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha264"
     react-i18next: "npm:13.0.1"
     react-scroll: "npm:^1.8.9"
     react-toastify: "npm:^9.1.3"
@@ -23284,9 +23284,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helsinki-headless-cms@npm:1.0.0-alpha260":
-  version: 1.0.0-alpha260
-  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha260"
+"react-helsinki-headless-cms@npm:1.0.0-alpha264":
+  version: 1.0.0-alpha264
+  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha264"
   dependencies:
     hds-design-tokens: "npm:^3.5.0"
     html-entities: "npm:^2.4.0"
@@ -23303,7 +23303,7 @@ __metadata:
   peerDependenciesMeta:
     "@apollo/client":
       optional: true
-  checksum: 9e711525922b87b3375b8eb023127618b4cfe4978d90ab05b95d5176895ec6c40ac61833d09fb72ad0030c9bfa26dcb6ba0e33d170dd6662074d237c0818ebf6
+  checksum: 4059f83f4e7d1f2084ada49a901662370fb11afdd2931a4fa32bff2211a4da72a2cce81598ec78d3dad10858a8215a115203ce1fda342beed06ab1592df3ca20
   languageName: node
   linkType: hard
 
@@ -25361,7 +25361,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha260"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha264"
     react-i18next: "npm:13.0.1"
     react-leaflet: "npm:4.2.1"
     react-scroll: "npm:^1.8.9"