Merge branch 'develop'

Frojd · Apr 8, 2024 · a0e2682 · a0e2682
2 parents ab1fc58 + c929de1
commit a0e2682
Show file tree

Hide file tree

Showing 22 changed files with 416 additions and 123 deletions.
diff --git a/.github/workflows/cli-npm-publish.yml b/.github/workflows/cli-npm-publish.yml
@@ -15,6 +15,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - name: Install nodegit deps
+        run: sudo apt-get update && sudo apt-get install -y libpcre libpcreposix libkrb5 libk5crypto libcom_err
       - uses: actions/setup-node@v4
         with:
           node-version: '20.x'

diff --git a/component-library/.nvmrc b/component-library/.nvmrc
@@ -1 +1 @@
-18
+20
diff --git a/component-library/app/components/Card/Card.js b/component-library/app/components/Card/Card.js
@@ -19,6 +19,38 @@ const Card = ({
 
     const hasImage = !!image?.src;
 
+    const imageSizes = [
+        ...[
+            size === 'Full' && [
+                '(min-width: 1680px) 724px',
+                '(min-width: 1440px) 644px',
+            ],
+        ],
+        ...[
+            size === 'Half' && [
+                '(min-width: 1680px) 702px',
+                '(min-width: 1440px) 628px',
+            ],
+        ],
+        ...[
+            size === 'Third' && [
+                '(min-width: 1680px) 464px',
+                '(min-width: 1440px) 411px',
+                '(min-width: 1024px) 33vw',
+            ],
+        ],
+        ...[
+            size === 'Fourth' && [
+                '(min-width: 1680px) 342px',
+                '(min-width: 1440px) 302px',
+                '(min-width: 1280px) 25vw',
+                '(min-width: 1024px) 33vw',
+            ],
+        ],
+        '(min-width: 768px) 50vw',
+        '100vw',
+    ];
+
     const classes = classNames(s.Root, { [s[`Root--${size}`]]: size });
 
     return (
@@ -32,7 +64,12 @@ const Card = ({
 
             {hasImage && (
                 <div className={s.ImageContainer}>
-                    <Image {...image} className={s.Image} />
+                    <Image
+                        {...image}
+                        sizes={imageSizes}
+                        useCover={true}
+                        useCaption={false}
+                    />
                 </div>
             )}
 

diff --git a/component-library/app/components/Card/Card.module.scss b/component-library/app/components/Card/Card.module.scss
@@ -52,12 +52,6 @@
     }
 }
 
-.Image {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
 .Content {
     flex: 1 1 auto;
     display: flex;

diff --git a/component-library/app/components/Fieldset/Fieldset.js b/component-library/app/components/Fieldset/Fieldset.js
@@ -2,25 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import s from './Fieldset.module.scss';
 
-const Fieldset = ({
-    title = '',
-    text = '',
-    children = '',
-}) => {
+const Fieldset = ({ title = '', text = '', children = '' }) => {
     return (
         <fieldset className={s.Root}>
-            {title && (
-                <legend className={s.Title}>{title}</legend>
-            )}
+            {title && <legend className={s.Title}>{title}</legend>}
             {text && (
                 <div
                     className={s.Description}
                     dangerouslySetInnerHTML={{ __html: text }}
                 />
             )}
-            <div className={s.Field}>
-                {children}
-            </div>
+            <div className={s.Field}>{children}</div>
         </fieldset>
     );
 };

diff --git a/component-library/app/components/Footer/Footer.js b/component-library/app/components/Footer/Footer.js
@@ -17,6 +17,8 @@ const Footer = ({
 }) => {
     const { t } = useTranslation();
 
+    const logoSizes = ['(min-width: 768px) 129px', '112px'];
+
     const serviceItems = service?.items || [];
     const serviceMenu = {
         ...service,
@@ -32,7 +34,9 @@ const Footer = ({
                             <Image
                                 {...Logo}
                                 useCover={false}
+                                useCaption={false}
                                 useLazyLoad={false}
+                                sizes={logoSizes}
                                 alt={t('footer.toStartPage')}
                             />
                         </a>

diff --git a/component-library/app/components/Grid/Grid.data.js b/component-library/app/components/Grid/Grid.data.js
@@ -17,18 +17,18 @@ const Card = ({ size }) => {
 const data = {
     Card: Card,
     items: [
-        card,
-        card,
-        card,
-        card,
-        card,
-        card,
-        card,
-        card,
-        card,
-        card,
-        card,
-        card,
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
+        { ...card, size: '' },
     ],
 };
 

diff --git a/component-library/app/components/Header/Header.js b/component-library/app/components/Header/Header.js
@@ -15,6 +15,8 @@ const Header = ({ main = {}, service = {} }) => {
 
     const [isSearchVisible, setIsSearchVisible] = useState(false);
 
+    const logoSizes = ['(min-width: 768px) 129px', '112px'];
+
     const mainItems = main?.items || [];
     const serviceItems = service?.items || [];
 
@@ -77,7 +79,9 @@ const Header = ({ main = {}, service = {} }) => {
                         <Image
                             {...Logo}
                             useCover={false}
+                            useCaption={false}
                             useLazyLoad={false}
+                            sizes={logoSizes}
                             alt={t('header.toStartPage')}
                         />
                     </a>

diff --git a/component-library/app/components/Image/Image.data.js b/component-library/app/components/Image/Image.data.js
@@ -1,17 +1,17 @@
 const data = {
-    src: 'dummy/test-original.jpg',
+    src: '/dummy/test-original.jpg',
     alt: 'Test',
     width: 1600,
     height: 900,
-    caption: 'Caption',
+    caption: 'Photo: Fröjd Fröjdsson',
     focal: {
         x: '50%',
         y: '50%',
     },
     srcset: [
-        'dummy/test-512.jpg 512w',
-        'dummy/test-800.jpg 800w',
-        'dummy/test-1600.jpg 1600w',
+        '/dummy/test-512.jpg 512w',
+        '/dummy/test-800.jpg 800w',
+        '/dummy/test-1600.jpg 1600w',
     ],
 };
 
@@ -22,7 +22,7 @@ export const landscape = {
     alt: 'Test',
     width: 1600,
     height: 900,
-    caption: 'Caption',
+    caption: 'Photo: Fröjd Fröjdsson',
     focal: {
         x: '50%',
         y: '50%',
@@ -39,7 +39,7 @@ export const portrait = {
     alt: 'Test',
     width: 1600,
     height: 2400,
-    caption: 'Caption',
+    caption: 'Photo: Fröjd Fröjdsson',
     focal: {
         x: '50%',
         y: '50%',

diff --git a/component-library/app/components/Image/Image.js b/component-library/app/components/Image/Image.js
@@ -5,6 +5,40 @@ import NextImage from 'next/image';
 import s from './Image.module.scss';
 
 const Image = ({
+    caption = '',
+    useCaption = true,
+    className = '',
+    ...restProps
+}) => {
+    const { useCover = true } = restProps;
+
+    const classes = classNames(
+        s.Root,
+        { [s['Root--Caption']]: useCaption && caption },
+        { [s['Root--Cover']]: useCover },
+        { [s['Root--Contain']]: !useCover },
+        className
+    );
+
+    return (
+        <figure className={classes}>
+            <Img {...restProps} />
+
+            {useCaption && caption && (
+                <figcaption className={s.Caption}>{caption}</figcaption>
+            )}
+        </figure>
+    );
+};
+
+Image.propTypes = {
+    caption: PropTypes.string,
+    useCover: PropTypes.bool,
+    useCaption: PropTypes.bool,
+    className: PropTypes.string,
+};
+
+const Img = ({
     src = '',
     alt = '',
     width = 0,
@@ -16,22 +50,14 @@ const Image = ({
     useCover = true,
     useLazyLoad = true,
     useNextImage = true,
-    className = '',
 }) => {
     const hasFocal = !!focal?.x && !!focal?.y;
     const position = hasFocal ? `${focal.x} ${focal.y}` : 'center center';
 
-    const classes = classNames(
-        s.Root,
-        { [s['Root--Cover']]: useCover },
-        { [s['Root--Contain']]: !useCover },
-        className
-    );
-
     /* eslint-disable @next/next/no-img-element */
     if (!useNextImage) {
         <img
-            className={classes}
+            className={s.Img}
             src={src}
             alt={alt}
             width={width}
@@ -49,7 +75,7 @@ const Image = ({
 
     return (
         <NextImage
-            className={classes}
+            className={s.Img}
             src={src}
             width={useCover ? undefined : width}
             height={useCover ? undefined : height}
@@ -77,7 +103,6 @@ Image.propTypes = {
     useCover: PropTypes.bool,
     useLazyLoad: PropTypes.bool,
     useNextImage: PropTypes.bool,
-    className: PropTypes.string,
 };
 
 export default Image;
diff --git a/component-library/app/components/Image/Image.module.scss b/component-library/app/components/Image/Image.module.scss
@@ -1,16 +1,39 @@
 @import 'Styles/includes';
 
 .Root {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    &--Cover {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}
+
+.Img {
     position: relative;
     display: block;
     width: 100%;
     height: 100%;
 
-    &--Contain {
+    .Root--Contain & {
         object-fit: contain;
     }
 
-    &--Cover {
+    .Root--Cover & {
         object-fit: cover;
     }
 }
+
+.Caption {
+    @include textstyle(caption);
+
+    color: $grey-70;
+    margin-top: 8px;
+}
diff --git a/component-library/app/components/Nav/Nav.data.js b/component-library/app/components/Nav/Nav.data.js
@@ -40,7 +40,7 @@ export const withChildren = {
                                 { id: '2311', title: 'Link text', url: '#' },
                                 {
                                     id: '2312',
-                                    title: 'Link text &#038; more',
+                                    title: 'Active link text &#038; more',
                                     url: '#',
                                     isActive: true,
                                 },