Merge branch 'main' into test-fix/combobox

digdir · Apr 26, 2024 · b1f4458 · b1f4458
2 parents 3bbb62d + 99d6b34
commit b1f4458
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 237 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -13,7 +13,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:react/jsx-runtime',
     'plugin:storybook/recommended',
-    'plugin:prettier/recommended',
+    'prettier',
   ],
   plugins: ['import', 'react', 'jsx-a11y'],
   overrides: [
@@ -43,21 +43,19 @@ module.exports = {
       },
     },
     {
-      files: ['storefront/**/*'],
+      files: ['apps/storefront/**/*'],
       extends: ['plugin:@next/next/recommended'],
     },
     {
       // MDX files
-      extends: ['plugin:mdx/recommended'],
       files: ['**/*.md?(x)'],
+      extends: ['plugin:mdx/recommended'],
       settings: {
         'mdx/code-blocks': false,
       },
     },
   ],
   rules: {
-    // https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
-    'prettier/prettier': ['error', { endOfLine: 'auto' }],
     'arrow-body-style': 'off',
     'prefer-arrow-callback': 'off',
     // Disabled because we use Typescript types for props

diff --git a/.github/workflows/checks-packages.yml b/.github/workflows/checks-packages.yml
@@ -7,6 +7,7 @@ on:
       - main
     paths:
       - 'packages/**'
+      - '*.*js'
   push:
     branches:
       - main

diff --git a/package.json b/package.json
@@ -76,7 +76,6 @@
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "^0.8.0",

diff --git a/...components/Accordion/Accordion.module.css → packages/css/accordion.css b/...components/Accordion/Accordion.module.css → packages/css/accordion.css
@@ -1,32 +1,32 @@
 @layer fds.accordion {
-  .accordion {
+  .fds-accordion {
     --fds-accordion-border-radius: var(--fds-border_radius-interactive);
     --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
 
     border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
     box-sizing: border-box;
   }
 
-  .border {
+  .fds-accordion--border {
     border: 1px solid var(--fds-accordion-border-color);
     border-radius: var(--fds-accordion-border-radius);
   }
 
-  .expandIcon {
+  .fds-accordion__expand-icon {
     border-radius: var(--fds-border_radius-interactive);
   }
 
-  .content {
+  .fds-accordion__content {
     padding: var(--fds-spacing-5, 1rem);
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .header {
+  .fds-accordion__header {
     margin: 0;
   }
 
-  .accordionButton {
+  .fds-accordion__button {
     width: 100%;
     display: flex;
     justify-content: flex-start;
@@ -40,93 +40,92 @@
     padding: var(--fds-spacing-4);
   }
 
-  .border .accordionButton {
+  .fds-accordion--border .fds-accordion__button {
     border-radius: var(--fds-accordion-border-radius);
   }
 
-  .item:focus-within {
-    position: relative;
-  }
 
-  .item:where(.open) .accordionButton:hover + * .content {
-    border-color: var(--fds-semantic-border-neutral-strong);
+  .fds-accordion__item:focus-within {
+    position: relative;
   }
 
-  .item:where(.open) .expandIcon {
+  .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__expand-icon {
     transform: rotateZ(180deg);
   }
 
-  .neutral,
-  .neutral .accordionButton {
+  .fds-accordion--neutral,
+  .fds-accordion--neutral .fds-accordion__button {
     background-color: var(--fds-semantic-surface-neutral-default);
   }
 
-  .subtle,
-  .subtle .accordionButton {
+  .fds-accordion--subtle,
+  .fds-accordion--subtle .fds-accordion__button {
     background-color: var(--fds-semantic-surface-neutral-subtle);
   }
 
-  .first,
-  .first .accordionButton {
+  .fds-accordion--first,
+  .fds-accordion--first .fds-accordion__button {
     --fds-accordion-border-color: var(--fds-semantic-border-first-default);
 
     background: var(--fds-semantic-surface-first-light);
   }
 
-  .second,
-  .second .accordionButton {
+
+  .fds-accordion--second,
+  .fds-accordion--second .fds-accordion__button {
     --fds-accordion-border-color: var(--fds-semantic-border-second-default);
 
     background: var(--fds-semantic-surface-second-light);
   }
 
-  .third,
-  .third .accordionButton {
+
+  .fds-accordion--third,
+  .fds-accordion--third .fds-accordion__button {
     --fds-accordion-border-color: var(--fds-semantic-border-third-default);
 
     background: var(--fds-semantic-surface-third-light);
   }
 
-  .first .item:where(.open) .accordionButton,
-  .second .item:where(.open) .accordionButton,
-  .third .item:where(.open) .accordionButton {
+  .fds-accordion--first .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
+  .fds-accordion--second .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
+  .fds-accordion--third .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
     background-color: rgba(0 0 0 / 0.03);
   }
 
-  .neutral .item:where(.open) .accordionButton,
-  .subtle .item:where(.open) .accordionButton {
+  .fds-accordion--neutral .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
+  .fds-accordion--subtle .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
     background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .border .item:first-child .accordionButton {
+  .fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button {
     border-top: 0;
   }
 
-  .first .item:not(:first-child) .accordionButton,
-  .second .item:not(:first-child) .accordionButton,
-  .third .item:not(:first-child) .accordionButton {
+  .fds-accordion--first .fds-accordion__item:not(:first-child) .fds-accordion__button,
+  .fds-accordion--second .fds-accordion__item:not(:first-child) .fds-accordion__button,
+  .fds-accordion--third .fds-accordion__item:not(:first-child) .fds-accordion__button {
     border-top: 1px solid var(--fds-semantic-surface-neutral-default);
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .accordionButton:hover .expandIcon {
+    .fds-accordion__button:hover .fds-accordion__expand-icon {
       background-color: rgba(0 0 0 / 0.1);
     }
 
-    .neutral .accordionButton:hover,
-    .subtle .accordionButton:hover {
+    .fds-accordion--neutral .fds-accordion__button:hover,
+    .fds-accordion--subtle .fds-accordion__button:hover {
       background-color: var(--fds-semantic-surface-neutral-subtle-hover);
     }
 
-    .first .accordionButton:hover {
+    .fds-accordion--first .fds-accordion__button:hover {
       background-color: var(--fds-semantic-surface-first-light-hover);
     }
 
-    .second .accordionButton:hover {
+    .fds-accordion--second .fds-accordion__button:hover {
       background-color: var(--fds-semantic-surface-second-light-hover);
     }
 
-    .third .accordionButton:hover {
+    .fds-accordion--third .fds-accordion__button:hover {
       background-color: var(--fds-semantic-surface-third-light-hover);
     }
   }

diff --git a/packages/css/index.css b/packages/css/index.css
@@ -9,3 +9,4 @@
 @import url('./alert.css');
 @import url('./ingress.css');
 @import url('./skiplink.css');
+@import url('./accordion.css');
diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -517,140 +517,6 @@
   }
 }
 
-@layer fds.accordion {
-  .fds-accordion-accordion-a8137c3d {
-    --fds-accordion-border-radius: var(--fds-border_radius-interactive);
-    --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
-
-    border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
-    box-sizing: border-box;
-  }
-
-  .fds-accordion-border-a8137c3d {
-    border: 1px solid var(--fds-accordion-border-color);
-    border-radius: var(--fds-accordion-border-radius);
-  }
-
-  .fds-accordion-expandIcon-a8137c3d {
-    border-radius: var(--fds-border_radius-interactive);
-  }
-
-  .fds-accordion-content-a8137c3d {
-    padding: var(--fds-spacing-5, 1rem);
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .fds-accordion-header-a8137c3d {
-    margin: 0;
-  }
-
-  .fds-accordion-accordionButton-a8137c3d {
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--fds-spacing-2);
-    margin: 0;
-    text-align: left;
-    cursor: pointer;
-    border: none;
-    border-top: 1px solid var(--fds-semantic-border-neutral-subtle);
-    padding: var(--fds-spacing-4);
-  }
-
-  .fds-accordion-border-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    border-radius: var(--fds-accordion-border-radius);
-  }
-
-  .fds-accordion-item-a8137c3d:focus-within {
-    position: relative;
-  }
-
-  .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d:hover + * .fds-accordion-content-a8137c3d {
-    border-color: var(--fds-semantic-border-neutral-strong);
-  }
-
-  .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-expandIcon-a8137c3d {
-    transform: rotateZ(180deg);
-  }
-
-  .fds-accordion-neutral-a8137c3d,
-  .fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    background-color: var(--fds-semantic-surface-neutral-default);
-  }
-
-  .fds-accordion-subtle-a8137c3d,
-  .fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    background-color: var(--fds-semantic-surface-neutral-subtle);
-  }
-
-  .fds-accordion-first-a8137c3d,
-  .fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    --fds-accordion-border-color: var(--fds-semantic-border-first-default);
-
-    background: var(--fds-semantic-surface-first-light);
-  }
-
-  .fds-accordion-second-a8137c3d,
-  .fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    --fds-accordion-border-color: var(--fds-semantic-border-second-default);
-
-    background: var(--fds-semantic-surface-second-light);
-  }
-
-  .fds-accordion-third-a8137c3d,
-  .fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    --fds-accordion-border-color: var(--fds-semantic-border-third-default);
-
-    background: var(--fds-semantic-surface-third-light);
-  }
-
-  .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d {
-    background-color: rgba(0 0 0 / 0.03);
-  }
-
-  .fds-accordion-neutral-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-subtle-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d {
-    background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-  }
-
-  .fds-accordion-border-a8137c3d .fds-accordion-item-a8137c3d:first-child .fds-accordion-accordionButton-a8137c3d {
-    border-top: 0;
-  }
-
-  .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d {
-    border-top: 1px solid var(--fds-semantic-surface-neutral-default);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .fds-accordion-accordionButton-a8137c3d:hover .fds-accordion-expandIcon-a8137c3d {
-      background-color: rgba(0 0 0 / 0.1);
-    }
-
-    .fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover,
-    .fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-neutral-subtle-hover);
-    }
-
-    .fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-first-light-hover);
-    }
-
-    .fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-second-light-hover);
-    }
-
-    .fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-third-light-hover);
-    }
-  }
-}
-
 .fds-animateheight-root-a203211d.fds-animateheight-openingOrClosing-a203211d,
 .fds-animateheight-root-a203211d.fds-animateheight-closed-a203211d {
   overflow: hidden;

diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
@@ -2,8 +2,6 @@ import type { ReactNode, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import cl from 'clsx';
 
-import classes from './Accordion.module.css';
-
 export type AccordionProps = {
   /** Accordion background color */
   color?: 'first' | 'second' | 'third' | 'neutral' | 'subtle';
@@ -17,11 +15,9 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   ({ border = false, color = 'neutral', className, ...rest }, ref) => (
     <div
       className={cl(
-        classes.accordion,
-        classes[color],
-        {
-          [classes.border]: border,
-        },
+        'fds-accordion',
+        border && 'fds-accordion--border',
+        color && `fds-accordion--${color}`,
         className,
       )}
       ref={ref}

diff --git a/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx b/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx
@@ -4,7 +4,6 @@ import { forwardRef, useContext } from 'react';
 
 import { AnimateHeight } from '../../../utilities/AnimateHeight';
 import { Paragraph } from '../../..';
-import classes from '../Accordion.module.css';
 import { AccordionItemContext } from '../AccordionItem';
 
 export type AccordionContentProps = {
@@ -36,7 +35,7 @@ export const AccordionContent = forwardRef<
       >
         <div
           ref={ref}
-          className={cl(classes.content, className)}
+          className={cl('fds-accordion__content', className)}
           {...rest}
         >
           {children}
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ on: @@
           - main
         paths:
           - 'packages/**'
+          - '*.*js'
       push:
         branches:
           - main
@@ Expand Down @@