Merge branch 'main' into tokens/new-warning-colors

digdir · Dec 21, 2023 · 3ccaa0d · 3ccaa0d
2 parents 89070c9 + 855f387
commit 3ccaa0d
Show file tree

Hide file tree

Showing 128 changed files with 3,044 additions and 1,901 deletions.
diff --git a/.stylelintrc.js → .stylelintrc.mjs b/.stylelintrc.js → .stylelintrc.mjs
@@ -1,12 +1,12 @@
-module.exports = {
+export default {
   extends: [
     'stylelint-config-standard',
     'stylelint-config-css-modules',
-    'stylelint-config-prettier',
+    // 'stylelint-config-prettier',
   ],
-  plugins: ['stylelint-prettier'],
+  // plugins: ['stylelint-prettier'],
   rules: {
-    'prettier/prettier': true,
+    // 'prettier/prettier': true,
     'declaration-block-no-redundant-longhand-properties': null,
     'media-feature-range-notation': 'prefix',
     'custom-property-pattern': null,

diff --git a/apps/dev/package.json b/apps/dev/package.json
@@ -12,7 +12,7 @@
     "next": "^14.0.4"
   },
   "devDependencies": {
-    "@navikt/aksel-icons": "^5.12.1",
+    "@navikt/aksel-icons": "^5.12.2",
     "@types/luxon": "^3.3.7",
     "luxon": "^3.4.4",
     "normalize.css": "^8.0.1",

diff --git a/apps/dev/src/components/SkeletonCard/SkeletonCard.tsx b/apps/dev/src/components/SkeletonCard/SkeletonCard.tsx
@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import cl from 'clsx';
 import React from 'react';
 
 import classes from './SkeletonCard.module.css';
@@ -7,7 +7,7 @@ export const SkeletonCard = () => {
   return (
     <div className={classes.card}>
       <div className={classes.element}></div>
-      <div className={cn(classes.element, classes.shortElement)}></div>
+      <div className={cl(classes.element, classes.shortElement)}></div>
     </div>
   );
 };
diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css
@@ -94,6 +94,7 @@
     opacity: 1;
   }
 }
+
 @keyframes two {
   0% {
     right: -100px;
@@ -105,6 +106,7 @@
     opacity: 1;
   }
 }
+
 @keyframes three {
   0% {
     bottom: -100px;
@@ -116,6 +118,7 @@
     opacity: 1;
   }
 }
+
 @keyframes four {
   0% {
     left: -100px;

diff --git a/apps/storefront/components/Banner/Banner.tsx b/apps/storefront/components/Banner/Banner.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from 'classnames';
+import cl from 'clsx';
 
 import { Tag } from '../Tag/Tag';
 import { Container } from '../Container/Container';
@@ -28,10 +28,10 @@ const Banner = ({ title, desc }: BannerProps) => {
 
       <div className={classes.right}>
         <div className={classes.shapes}>
-          <div className={cn(classes.shape, classes.one)}></div>
-          <div className={cn(classes.shape, classes.two)}></div>
-          <div className={cn(classes.shape, classes.three)}></div>
-          <div className={cn(classes.shape, classes.four)}></div>
+          <div className={cl(classes.shape, classes.one)}></div>
+          <div className={cl(classes.shape, classes.two)}></div>
+          <div className={cl(classes.shape, classes.three)}></div>
+          <div className={cl(classes.shape, classes.four)}></div>
         </div>
       </div>
     </Container>

diff --git a/apps/storefront/components/Container/Container.tsx b/apps/storefront/components/Container/Container.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from 'classnames';
+import cl from 'clsx';
 
 import classes from './Container.module.css';
 
@@ -12,7 +12,7 @@ const Container = ({ children, className, ...props }: ContainerProps) => {
   return (
     <div
       {...props}
-      className={cn(className, classes.container)}
+      className={cl(className, classes.container)}
     >
       {children}
     </div>

diff --git a/apps/storefront/components/Header/Header.tsx b/apps/storefront/components/Header/Header.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { MenuHamburgerIcon, XMarkIcon } from '@navikt/aksel-icons';
-import cn from 'classnames';
+import cl from 'clsx';
 
 import classes from './Header.module.css';
 
@@ -82,7 +82,7 @@ const Header = () => {
               />
             )}
           </button>
-          <ul className={cn(classes.menu, { [classes.active]: open })}>
+          <ul className={cl(classes.menu, { [classes.active]: open })}>
             {menu.map((item, index) => (
               <li
                 className={classes.item}
@@ -92,7 +92,7 @@ const Header = () => {
                   href={item.url}
                   onClick={() => setOpen(false)}
                   prefetch={false}
-                  className={cn(
+                  className={cl(
                     isMenuItemActive(router.pathname, item.url)
                       ? classes.active
                       : '',

diff --git a/apps/storefront/components/Image/Image.tsx b/apps/storefront/components/Image/Image.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from 'classnames';
+import cl from 'clsx';
 
 import classes from './Image.module.css';
 
@@ -11,7 +11,7 @@ interface ImageProps {
 
 const Image = ({ alt, src, boxShadow, ...rest }: ImageProps) => {
   return (
-    <div className={cn(classes.container, { [classes.boxShadow]: boxShadow })}>
+    <div className={cl(classes.container, { [classes.boxShadow]: boxShadow })}>
       <img
         className={classes.img}
         src={src}

diff --git a/apps/storefront/components/ImageSection/ImageSection.tsx b/apps/storefront/components/ImageSection/ImageSection.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, createElement } from 'react';
 import Image from 'next/image';
-import cn from 'classnames';
+import cl from 'clsx';
 
 import { Container } from '../Container/Container';
 
@@ -53,7 +53,7 @@ const ImageSection = ({
 
   return (
     <div className={classes[backgroundColor]}>
-      <Container className={cn(classes.section)}>
+      <Container className={cl(classes.section)}>
         {imgPosition === 'left' && (
           <div className={classes.imgContainer}>
             <Image

diff --git a/apps/storefront/components/MdxContent/MdxContent.tsx b/apps/storefront/components/MdxContent/MdxContent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from 'classnames';
+import cl from 'clsx';
 
 import classes from './MdxContent.module.css';
 
@@ -9,7 +9,7 @@ interface MdxContentProps {
 }
 
 const MdxContent = ({ children, classname }: MdxContentProps) => {
-  return <div className={cn(classname, classes.content)}>{children}</div>;
+  return <div className={cl(classname, classes.content)}>{children}</div>;
 };
 
 export { MdxContent };
diff --git a/apps/storefront/components/NavigationCard/NavigationCard.tsx b/apps/storefront/components/NavigationCard/NavigationCard.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import cn from 'classnames';
+import cl from 'clsx';
 import React from 'react';
 
 import classes from './NavigationCard.module.css';
@@ -25,9 +25,9 @@ const NavigationCard = ({
     <Link
       href={url}
       prefetch={false}
-      className={cn(classes.card, classes[backgroundColor])}
+      className={cl(classes.card, classes[backgroundColor])}
     >
-      <div className={cn(classes.iconContainer, classes[color])}>{icon}</div>
+      <div className={cl(classes.iconContainer, classes[color])}>{icon}</div>
       <h3 className={classes.title}>{title}</h3>
       <div className={classes.desc}>{description}</div>
     </Link>

diff --git a/apps/storefront/components/ResponsiveIframe/ResponsiveIframe.tsx b/apps/storefront/components/ResponsiveIframe/ResponsiveIframe.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from 'classnames';
+import cl from 'clsx';
 
 import classes from './ResponsiveIframe.module.css';
 
@@ -17,7 +17,7 @@ const ResponsiveIframe = ({
 }: ResponsiveIframeProps) => {
   return (
     <div
-      className={cn(classes.container, {
+      className={cl(classes.container, {
         [classes.aspectFourThree]: aspectRatio === '4-3',
       })}
     >

diff --git a/apps/storefront/components/Section/Section.tsx b/apps/storefront/components/Section/Section.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from 'classnames';
+import cl from 'clsx';
 import Image from 'next/image';
 
 import { Container } from '../Container/Container';
@@ -20,7 +20,7 @@ const Section = ({
   detail,
 }: SectionProps) => {
   return (
-    <div className={cn(classes.section, classes[backgroundColor])}>
+    <div className={cl(classes.section, classes[backgroundColor])}>
       <Container>
         <div className={classes.header}>
           {title && <h2 className={classes.title}>{title}</h2>}

diff --git a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
-import cn from 'classnames';
+import cl from 'clsx';
 import { Button } from '@digdir/design-system-react';
 
 import { SiteConfig } from '../../siteConfig';
@@ -49,7 +49,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
             {showMenu ? 'Skjul' : 'Vis'} side meny
           </Button>
 
-          <div className={cn(classes.menu, { [classes.activeMenu]: showMenu })}>
+          <div className={cl(classes.menu, { [classes.activeMenu]: showMenu })}>
             <h3 className={classes.title}>
               {SiteConfig.menu[activeIndex].name}
             </h3>
@@ -58,7 +58,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
                 (item: PageMenuItemType, index) => (
                   <li
                     key={index}
-                    className={cn(classes.listGroup, {
+                    className={cl(classes.listGroup, {
                       [classes.listGroupCompact]: !item.children,
                     })}
                   >
@@ -75,7 +75,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
                                 <Link
                                   href={'/' + item2.url}
                                   prefetch={false}
-                                  className={cn(classes.link, {
+                                  className={cl(classes.link, {
                                     [classes.linkActive]: isItemActive(
                                       item2.url,
                                       routerPath,
@@ -94,7 +94,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
                       <Link
                         href={'/' + item.url}
                         prefetch={false}
-                        className={cn(classes.link, classes.linkCompact, {
+                        className={cl(classes.link, classes.linkCompact, {
                           [classes.linkActive]: isItemActive(
                             item.url,
                             routerPath,

diff --git a/apps/storefront/components/Tag/Tag.tsx b/apps/storefront/components/Tag/Tag.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from 'classnames';
+import cl from 'clsx';
 
 import { capitalizeString } from '../../utils/StringHelpers';
 
@@ -13,7 +13,7 @@ interface TagProps {
 
 const Tag = ({ color, type, size = 'medium' }: TagProps) => {
   return (
-    <span className={cn(classes.tag, classes[color], classes[size])}>
+    <span className={cl(classes.tag, classes[color], classes[size])}>
       {capitalizeString(type)}
     </span>
   );

diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'react';
 import React, { useEffect, useState } from 'react';
 import { Dropdown, Button } from '@navikt/ds-react';
-import cn from 'classnames';
+import cl from 'clsx';
 import type { TransformedToken as Token } from 'style-dictionary';
 
 import { capitalizeString } from '../../../utils/StringHelpers';
@@ -153,9 +153,9 @@ const TokenList = ({
               return (
                 <div key={group}>
                   {!isSlim && <h4>{capitalizeString(group)}</h4>}
-                  <div className={cn(!isSlim && classes.group)}>
+                  <div className={cl(!isSlim && classes.group)}>
                     <div
-                      className={cn(classes.cards, {
+                      className={cl(classes.cards, {
                         [classes.cards2]: cardColumns === 2,
                       })}
                     >

diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -13,22 +13,21 @@
     "@altinn/figma-design-tokens": "^6.0.1",
     "@mdx-js/loader": "^2.0.0-rc.2",
     "@mdx-js/react": "^1.6.22",
-    "@navikt/aksel-icons": "^5.12.1",
-    "@navikt/ds-css": "^5.12.1",
+    "@navikt/aksel-icons": "^5.12.2",
+    "@navikt/ds-css": "^5.12.2",
     "@navikt/ds-react": "^5.12.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@vercel/analytics": "^1.1.1",
-    "hastscript": "^7.2.0",
+    "hastscript": "^8.0.0",
     "mdx-embed": "^1.1.2",
     "next": "^14.0.4",
     "normalize.css": "^8.0.1",
     "react-element-to-jsx-string": "^15.0.0",
     "react-syntax-highlighter": "^15.5.0",
-    "rehype-autolink-headings": "^6.1.1",
-    "rehype-highlight": "^6.0.0",
-    "rehype-slug": "^5.1.0",
-    "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1"
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-highlight": "^7.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark-frontmatter": "^4.0.1"
   }
 }