@aarhus-university/au-lib-react-components 12.6.1 → 12.6.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": true,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "12.6.1",
+  "version": "12.6.2",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -66,7 +66,7 @@
     "wicg-inert": "^3.1.2"
   },
   "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "^1.12.0",
+    "@aarhus-university/au-designsystem-delphinus": "^1.12.2",
     "@aarhus-university/types": "^1.1.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@storybook/react-webpack5": "^8.6.15",

package/src/components/AUDynamicContentComponent.tsx

@@ -102,29 +102,29 @@ const AUDynamicContentComponent: FC<IDynamicContentProps> = ({
 
   return (
     <section className="dynamic-content" aria-labelledby="dynamic-content-heading">
-      {name && <h3 id="dynamic-content-heading">{name}</h3>}
+      {name && <h3 id="dynamic-content-heading grid__item">{name}</h3>}
       <div className="dynamic-content__featured">
         {featuredElement}
         {/* HTML content is expected to be sanitized by the backend */}
         {featuredContentDescription && (
-          <div dangerouslySetInnerHTML={{ __html: featuredContentDescription }} />
+          <div className="content-description" dangerouslySetInnerHTML={{ __html: featuredContentDescription }} />
         )}
       </div>
 
       <div className="dynamic-content__links">
         {links?.length > 0 && links.map((link, index) => {
-          const isDimmed = link.linkType === 'information';
+          const isSystemLink = link.linkType === 'system';
 
-          // Using index in key is safe here since links array is immutable after initial render
+          // Using index in key is safe here since links array is not mutated after initial render
           return (
             <a
               href={link.url}
               // eslint-disable-next-line react/no-array-index-key
               key={link.url + index}
-              className={`button button--block${isDimmed ? ' button--dimmed' : ''}`}
+              className={`grid__item shortcut${isSystemLink ? ' shortcut--highlighted' : ''}`}
             >
-              <span className="card__title">{link.title}</span>
-              <span className="card__subtitle">{link.description}</span>
+              <h3>{link.title}</h3>
+              <p>{link.description}</p>
             </a>
           );
         })}

package/stories/AUDynamicContentComponent.stories.tsx

@@ -83,7 +83,7 @@ const infoboxLinks = [
 export const InfoboxContent: Story = {
   args: {
     name: 'Kom godt igennem eksamensperioden',
-    featuredContentDescription: 'Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.',
+    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
     links: infoboxLinks,
     featuredContent: {
       type: 'infoBox',
@@ -95,7 +95,7 @@ export const InfoboxContent: Story = {
 export const ImageContent: Story = {
   args: {
     name: 'Kom godt igennem eksamensperioden',
-    featuredContentDescription: 'Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.',
+    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
     links: imageLinks,
     featuredContent: {
       type: 'image',
@@ -109,7 +109,7 @@ export const ImageContent: Story = {
 export const VideoContent: Story = {
   args: {
     name: 'Kom godt igennem eksamensperioden',
-    featuredContentDescription: 'Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.',
+    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
     links: videoLinks,
     featuredContent: {
       type: 'video',