Merged in chore/BOOK-701-replace-subtitle-component (pull request #3398)

chore(BOOK-701): replace subtitle with typography

* chore(BOOK-701): replace subtitle with typography

* chore(BOOK-701): align center

* chore(BOOK-701): change token

* chore(BOOK-701): change text color

* fix(BOOK-704): revert pricechange dialog changes

* chore(BOOK-701): remove subtitle from package.json


Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/index.tsx

@@ -3,7 +3,7 @@
 import { useReducer } from "react"
 import { useIntl } from "react-intl"
 
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import JobylonCard from "../JobylonCard"
 import Filter from "./Filter"
@@ -80,15 +80,18 @@ export default function JobList({ allJobs }: JobListProps) {
         departmentFilters={departmentFilters}
         categoryFilters={categoryFilters}
       />
-      <Subtitle type="two">
-        {intl.formatMessage(
-          {
-            id: "jobylonFeed.resultCount",
-            defaultMessage: "{count, plural, one {# Result} other {# Results}}",
-          },
-          { count: state.jobs.length }
-        )}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md">
+        <p>
+          {intl.formatMessage(
+            {
+              id: "jobylonFeed.resultCount",
+              defaultMessage:
+                "{count, plural, one {# Result} other {# Results}}",
+            },
+            { count: state.jobs.length }
+          )}
+        </p>
+      </Typography>
       <ul className={styles.list}>
         {state.jobs.map((job) => (
           <li key={job.id}>

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

@@ -6,7 +6,7 @@ import { dt } from "@scandic-hotels/common/dt"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
 
@@ -36,9 +36,9 @@ export default function JobylonCard({ job }: JobylonCardProps) {
 
   return (
     <div className={styles.jobylonCard}>
-      <Subtitle asChild>
+      <Typography variant="Title/Subtitle/md">
         <h3>{job.title}</h3>
-      </Subtitle>
+      </Typography>
 
       <div className={styles.contentWrapper}>
         <div>
@@ -62,7 +62,7 @@ export default function JobylonCard({ job }: JobylonCardProps) {
               id: "jobylonFeed.card.viewAndApplyButton",
               defaultMessage: "View & apply",
             })}
-            <MaterialIcon icon="open_in_new" size={20} />
+            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
           </a>
         </Button>
       </div>