DDFNEXT-220: Upgrade Storybook and Prettier

package.json

@@ -92,7 +92,7 @@
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended-scss": "^8.0.0",
-    "stylelint-prettier": "^3.0.0",
+    "stylelint-prettier": "^5.0.2",
     "stylelint-scss": "^5.3.2",
     "typescript": "^4.7.4",
     "web-vitals": "^4.2.4"

src/index.tsx

@@ -7,5 +7,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById("root"),
 );

src/stories/Blocks/header/Header.tsx

@@ -29,10 +29,7 @@ export const Header = ({
 }: HeaderProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(openDropdown);
 
-  useEffect(() => {
-    require("./header-sticky");
-    require("./header-state");
-  }, []);
+  useEffect(() => {}, []);
 
   return (
     <>

src/stories/Blocks/header/header-state.js

@@ -26,7 +26,7 @@ function desktopLinksContainerCheckSize() {
 function initHeaderState() {
   // Finds the node with class 'header__menu-navigation' which is not initialized.
   const desktopLinks = document.querySelector(
-    ".header__menu-navigation:not(.is-header-initialized)"
+    ".header__menu-navigation:not(.is-header-initialized)",
   );
 
   // If the desktop links exist, check their size

src/stories/Blocks/header/header-sticky.js

@@ -30,16 +30,14 @@ window.addEventListener("DOMContentLoaded", () => {
 
     if (scrollDirection === "down") {
       const headerHeight = document.querySelector(
-        headerContainerSelector
+        headerContainerSelector,
       ).offsetHeight;
       const headerDownTopPosition = headerHeight + headerDownTopPositionOffset;
-      document.querySelector(
-        headerContainerSelector
-      ).style.top = `-${headerDownTopPosition}px`;
+      document.querySelector(headerContainerSelector).style.top =
+        `-${headerDownTopPosition}px`;
     } else {
-      document.querySelector(
-        headerContainerSelector
-      ).style.top = `${headerYStartPosition}px`;
+      document.querySelector(headerContainerSelector).style.top =
+        `${headerYStartPosition}px`;
     }
   };
 

src/stories/Blocks/reservation-page/ReservationListItem.tsx

@@ -20,7 +20,7 @@ const ReservationListItem: React.FC<ReservationListItemProps> = ({
         <div
           className={clsx(
             "list-reservation my-32 cursor-pointer arrow__hover--right-small",
-            [{ "list-reservation--stacked": isStacked }]
+            [{ "list-reservation--stacked": isStacked }],
           )}
         >
           <div className="list-reservation__material">

src/stories/Blocks/status-loans/statusLoans.tsx

@@ -55,7 +55,7 @@ export const StatusLoans = (props: StatusLoansProps) => {
                   outOf={outOf}
                   amount={amount}
                 />
-              )
+              ),
             )}
           </div>
         ))}

src/stories/Library/Buttons/button/Button.tsx

@@ -32,7 +32,7 @@ export const Button: React.FC<ButtonProps> = ({
         getVariant(variant),
         getSize(size),
         "arrow__hover--right-small",
-        classNames
+        classNames,
       )}
       disabled={disabled}
       onClick={onClick}

src/stories/Library/Buttons/button/LinkButton.tsx

@@ -31,7 +31,7 @@ export const LinkButton = ({
         getVariant(variant),
         getSize(size),
         "arrow__hover--right-small",
-        classNames
+        classNames,
       )}
     >
       {text}

src/stories/Library/Buttons/button/helper.ts

@@ -28,12 +28,12 @@ export const getPagefoldClasses = ({
     wrapper: clsx(
       `pagefold-parent--${size}`,
       { "internal-pagefold-parent": isAContainer },
-      className
+      className,
     ),
     triangle: clsx(
       `pagefold-triangle--${size}`,
       { [`pagefold-triangle--${type}`]: type },
-      { "pagefold-inherit-parent": isInheriting }
+      { "pagefold-inherit-parent": isInheriting },
     ),
   };
 };

src/stories/Library/Forms/checkbox/CheckboxDrupal.tsx

@@ -24,7 +24,7 @@ export const CheckboxDrupal: React.FC<CheckboxDrupalProps> = ({
       <div
         className={clsx(
           "dpl-input js-form-item form-item js-form-type-checkbox form-item-title-example js-form-item-title-example checkbox-override",
-          { classNames }
+          { classNames },
         )}
       >
         <input

src/stories/Library/Forms/date-picker/DatePicker.tsx

@@ -29,7 +29,7 @@ const DatePicker = (props: DatePickerProps) => {
         picker.current = flatpickr(node, options);
       }
     },
-    [locale]
+    [locale],
   );
 
   return (

src/stories/Library/Forms/submit-button/SubmitButton.tsx

@@ -15,7 +15,7 @@ const SubmitButton: FC<SubmitButtonProps> = ({ buttonText, classNames }) => {
       "arrow__hover--right-small",
       "dpl-button",
     ],
-    classNames
+    classNames,
   );
 
   return <input type="submit" value={buttonText} className={classes} />;

src/stories/Library/Lists/list-description/ListDescription.tsx

@@ -24,7 +24,7 @@ const ListDescription: React.FC<{ data: ListData; className?: string }> = ({
             <dd
               className={clsx(
                 "list-description__value",
-                layout === "column" && "list-description__value--column"
+                layout === "column" && "list-description__value--column",
               )}
             >
               {type === "standard" &&

src/stories/Library/Lists/list-reservation/ListReservationsAndLoans.tsx

@@ -23,7 +23,7 @@ export type ListReservationsAndLoansProps = {
 };
 
 export const ListReservationsAndLoans = (
-  props: ListReservationsAndLoansProps
+  props: ListReservationsAndLoansProps,
 ) => {
   const { cover, isStacked, counter, statusLabel, statusNotes, fee } = props;
 
@@ -57,7 +57,7 @@ export const ListReservationsAndLoans = (
               aria-label="note about material"
               className={clsx(
                 "list-reservation__note list-reservation__note--desktop color-secondary-gray",
-                cover.noteAsWarning && "color-signal-alert"
+                cover.noteAsWarning && "color-signal-alert",
               )}
             >
               {cover.noteLabel}
@@ -90,7 +90,7 @@ export const ListReservationsAndLoans = (
                 href={cover.noteUrl}
                 className={clsx(
                   "list-reservation__note list-reservation__note--mobile color-secondary-gray",
-                  cover.noteAsWarning && "color-signal-alert"
+                  cover.noteAsWarning && "color-signal-alert",
                 )}
               >
                 {cover.noteLabel}

src/stories/Library/availability-label/abilityLabel.hoc.tsx

@@ -13,7 +13,7 @@ type PropsProcessedComponent<T> = Omit<
 };
 
 export const withAvailabilityProps = <T extends PageFoldType>(
-  Component: React.FC<T>
+  Component: React.FC<T>,
 ): React.FC<PropsProcessedComponent<T>> => {
   const defaultClasses = ["availability-label", "text-label"];
 

src/stories/Library/cover/Cover.tsx

@@ -25,7 +25,7 @@ const Cover: FC<CoverProps> = ({
       "cover",
       `cover--size-${coverDisplaySize}`,
       `cover--aspect-${coverDisplaySize}`,
-      imageLoaded || tintClasses[tint || "default"]
+      imageLoaded || tintClasses[tint || "default"],
     ),
   };
 

src/stories/Library/cover/CoverImage.tsx

@@ -30,7 +30,7 @@ const CoverImage: FC<CoverProps & CoverState> = ({
         {
           "cover__img--shadow-small": shadow === "small",
           "cover__img--shadow-medium": shadow === "medium",
-        }
+        },
       )}
       src={src}
       alt={alt || ""}

src/stories/Library/cover/helper.ts

@@ -14,7 +14,7 @@ export const tintClasses: TintClassesType = {
 type CoverTintsType = ("20" | "40" | "80" | "100" | "120")[];
 
 export const getCoverTint = (
-  index: number
+  index: number,
 ): "20" | "40" | "80" | "100" | "120" => {
   const coverTints: CoverTintsType = ["20", "40", "80", "100", "120"];
   const tintKey = index % coverTints.length;

src/stories/Library/dialog/Dialog.tsx

@@ -31,6 +31,6 @@ const Dialog = forwardRef<HTMLDialogElement, DialogType>(
         {children}
       </dialog>
     );
-  }
+  },
 );
 export default Dialog;

src/stories/Library/disclosure-controllable/DisclosureControllable.tsx

@@ -31,7 +31,7 @@ const DisclosureControllable: React.FunctionComponent<
         toggleOpen();
       }
     },
-    [toggleOpen]
+    [toggleOpen],
   );
 
   const disclosureId = `disclosure-${id}`;

src/stories/Library/disclosure/Disclosure.tsx

@@ -30,13 +30,13 @@ const Disclosure: React.FC<DisclosureProps> = ({
     <details
       className={clsx(
         "disclosure text-body-large",
-        fullWidth && "disclosure--full-width"
+        fullWidth && "disclosure--full-width",
       )}
     >
       <summary
         className={clsx(
           "disclosure__headline text-body-large",
-          removeHeadlinePadding && "disclosure__headline--no-padding"
+          removeHeadlinePadding && "disclosure__headline--no-padding",
         )}
         onClick={() => {
           setIsOpen(!isOpen);

src/stories/Library/header-sidebar-nav/header-sidebar-nav-js.js

@@ -1,21 +1,21 @@
 window.addEventListener("load", () => {
   const sidebarNavToggle = document.getElementById(
-    "header-sidebar-nav__toggle"
+    "header-sidebar-nav__toggle",
   );
   const backgroundWrapper = document.querySelector(
-    ".header-sidebar-nav__background-wrapper"
+    ".header-sidebar-nav__background-wrapper",
   );
   const menu = document.querySelector(".header-sidebar-nav");
 
   const closeButton = document.getElementById(
-    "js-header-sidebar-nav__close-menu-button"
+    "js-header-sidebar-nav__close-menu-button",
   );
 
   const lastMenuItem = document.querySelector(
-    ".header-sidebar-nav  .header__menu-navigation li:last-child a"
+    ".header-sidebar-nav  .header__menu-navigation li:last-child a",
   );
   const menuWrapper = document.querySelector(
-    ".header-sidebar-nav__menu-wrapper"
+    ".header-sidebar-nav__menu-wrapper",
   );
 
   function toggleSidebarNav() {

src/stories/Library/links/Links.tsx

@@ -19,7 +19,7 @@ export const Links = ({
     {
       "link-tag": !excludeLinkTagClass,
     },
-    classNames
+    classNames,
   );
   return (
     <a {...(target ? { target } : {})} href={href} className={classes}>

src/stories/Library/material-grid/MaterialGrid.tsx

@@ -30,7 +30,7 @@ export const MaterialGrid: React.FC<MaterialGridProps> = ({
 
   const [showAllMaterials, setShowAllMaterials] = useState(false);
   const [currentMaterialsDisplayed, setCurrentMaterialsDisplayed] = useState(
-    initialMaterialsToDisplay
+    initialMaterialsToDisplay,
   );
 
   const moreMaterialsThanInitialMaximum =

src/stories/Library/nav-grid/NavGrid.tsx

@@ -20,7 +20,7 @@ const NavGrid: FC<CardProps> = ({ items, title, showSubtitles }) => {
         "nav-grid",
         showSubtitles ? "nav-grid--expanded" : "nav-grid--simple",
         hasMany && "nav-grid--has-many",
-        hasMany && "nav-grid--folded"
+        hasMany && "nav-grid--folded",
       )}
     >
       <div className="nav-grid__header">

src/stories/Library/nav-grid/init-nav-grid.js

@@ -1,6 +1,6 @@
 window.addEventListener("load", () => {
   const grids = document.querySelectorAll(
-    ".nav-grid--has-many:not(.is-initialized)"
+    ".nav-grid--has-many:not(.is-initialized)",
   );
 
   grids.forEach((grid) => {

src/stories/Library/opening-hours-editor/OpeningHoursForm.tsx

@@ -51,8 +51,8 @@ const OpeningHoursForm = () => {
         onChange={(e) => {
           setCategory(
             openingHoursCategories.find(
-              (item) => item.title === e.target.value
-            ) || openingHoursCategories[0]
+              (item) => item.title === e.target.value,
+            ) || openingHoursCategories[0],
           );
         }}
       >

src/stories/Library/opening-hours/OpeningHoursWeekList.tsx

@@ -17,7 +17,7 @@ const OpeningHoursWeekList: React.FC<OpeningHoursWeekListProps> = ({
           {
             day: "numeric",
             month: "2-digit",
-          }
+          },
         );
 
         return (

src/stories/Library/recommendation/Recommendation.tsx

@@ -25,7 +25,7 @@ export const Recommendation: React.FC<RecommendationProps> = ({
     <div
       className={clsx(
         "recommendation",
-        positionImageRight && "recommendation--reversed"
+        positionImageRight && "recommendation--reversed",
       )}
     >
       <div className="recommendation__material">

src/stories/Library/recommenders/Recommenders.tsx

@@ -27,8 +27,8 @@ const Recommender: React.FC<RecommenderProps> = ({
     <div
       className={`recommender ${padding ? "recommender--padding-desktop" : ""}
         ${triple ? "recommender--triple-desktop " : ""} ${
-        bright ? "recommender--bright" : ""
-      }`}
+          bright ? "recommender--bright" : ""
+        }`}
     >
       <h2
         className={`${

src/stories/Library/tag/Tag.tsx

@@ -22,7 +22,7 @@ const Tag = ({
         "tag",
         hasBackground && "tag--fill",
         `tag--${size}`,
-        className
+        className,
       )}
     >
       {children}

src/stories/Library/tag/tag-button/TagButton.tsx

@@ -31,7 +31,7 @@ export const TagButton = ({
         (hasBackground || selected) && "tag--fill",
         usesCursor && "cursor-pointer",
         `tag--${size}`,
-        className
+        className,
       )}
     >
       {children}

src/stories/Library/tag/tag-link/TagLink.tsx

@@ -22,7 +22,7 @@ export const TagLink = ({
         "tag",
         hasBackground && "tag--fill",
         `tag--${size}`,
-        className
+        className,
       )}
     >
       {children}