Merge pull request #626 from danskernesdigitalebibliotek/fix/material…

…-item-appearance Fix/material item appearance
danskernesdigitalebibliotek · May 14, 2024 · 1f5401b · 1f5401b
2 parents 0d78eb5 + 9cf88c4
commit 1f5401b
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss b/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss
@@ -4,7 +4,6 @@
   margin: 0 $s-lg $s-md $s-lg;
   padding-top: 30px;
   display: grid;
-  cursor: pointer;
 
   @include media-query__small {
     min-height: 184px;
@@ -13,10 +12,6 @@
     column-gap: $s-lg;
   }
 
-  &:hover {
-    filter: drop-shadow(0 $s-xs 20px rgba(72, 72, 72, 0.1));
-  }
-
   &__cover {
     display: none;
 

diff --git a/src/stories/Library/disclosure/disclosure.scss b/src/stories/Library/disclosure/disclosure.scss
@@ -32,6 +32,10 @@
       padding-left: $s-xl;
     }
 
+    &::-webkit-details-marker {
+      display: none;
+    }
+
     &.disclosure__headline--no-padding {
       padding-left: $s-xl;
       @include media-query__small {

diff --git a/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss b/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss
@@ -16,6 +16,10 @@ $_menu_animation_delay: 0.2s;
   transform: translateX(-100%);
   transition: transform $_transition_speed $_bezier_transition;
 
+  @include media-query__small {
+    display: none;
+  }
+
   ul.header__menu-navigation {
     padding: 0;
     display: flex;

diff --git a/src/stories/Library/header-sidebar-nav/header-sidebar-nav.stories.tsx b/src/stories/Library/header-sidebar-nav/header-sidebar-nav.stories.tsx
@@ -27,6 +27,11 @@ export default {
       defaultValue: "open",
       control: { type: "select", options: ["open", "closed"] },
     },
+    isStorybookContext: {
+      name: "Are we in storybook?",
+      defaultValue: true,
+      control: { type: "none" },
+    },
   },
 } as ComponentMeta<typeof HeaderSidebarNav>;
 

diff --git a/src/stories/Library/header-sidebar-nav/header-sidebar-nav.tsx b/src/stories/Library/header-sidebar-nav/header-sidebar-nav.tsx
@@ -6,19 +6,27 @@ import MenuItemList from "../header-menu-list/HeaderMenuList";
 export type HeaderSidebarNavProps = {
   menuLinks: MenuItemsProps[];
   menuOpen?: "open" | "closed";
+  isStorybookContext?: boolean;
 };
 
 const HeaderSidebarNav: React.FC<HeaderSidebarNavProps> = ({
   menuLinks,
   menuOpen = "closed",
+  isStorybookContext = false,
 }) => {
   useEffect(() => {
     /* eslint-disable-next-line global-require */
     require("./header-sidebar-nav-js");
   }, []);
 
   return (
-    <div className="header-sidebar-nav" data-open={menuOpen}>
+    <div
+      className="header-sidebar-nav"
+      data-open={menuOpen}
+      // The sidebar normally isn't displayed on larger screens (otherwise it's
+      // accessible using keyboard on desktop), but we want to show it in Storybook.
+      style={isStorybookContext ? { display: "block" } : undefined}
+    >
       <div className="header-sidebar-nav__background-wrapper">
         <div className="header-sidebar-nav__menu-wrapper">
           <div