Merge pull request danskernesdigitalebibliotek#86 from reload/feature/disclosure

feature/disclosure

Author: Adamik10

base.scss

@@ -61,6 +61,7 @@
 @import "./src/stories/Library/reservation-header/reservation-header";
 @import "./src/stories/Library/material-header/material-periodikum-select";
 @import "./src/stories/Library/material-description/material-description";
+@import "./src/stories/Library/disclosure/disclosure";
 @import "./src/stories/Library/horizontal-term-line/horizontal-term-line";
 @import "./src/stories/Library/search-result-page/search-result-info";
 @import "./src/stories/Library/search-result-page/search-result-page";

src/stories/Library/disclosure/Disclosure.stories.tsx

@@ -0,0 +1,39 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import { Disclosure, DisclosureProps } from "./Disclosure";
+
+export default {
+  title: "Library / Disclosure",
+  component: Disclosure,
+  decorators: [withDesign],
+  argTypes: {
+    headline: {
+      name: "Headline",
+      defaultValue: "Headline",
+      control: { type: "text" },
+    },
+    children: {
+      name: "Headline",
+      defaultValue: "I am the content. Look at me!",
+      control: { type: "text" },
+    },
+    icon: {
+      name: "Icon name",
+      defaultValue: "Various",
+      options: ["Various", "Receipt", "Create", "Profile"],
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=416%3A15008",
+    },
+  },
+} as ComponentMeta<typeof Disclosure>;
+
+const Template: ComponentStory<typeof Disclosure> = (args: DisclosureProps) => (
+  <Disclosure {...args} />
+);
+
+export const Default = Template.bind({});

src/stories/Library/disclosure/Disclosure.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+
+export type DisclosureProps = {
+  headline: string;
+  children: React.ReactNode | string;
+  icon: "Various" | "Receipt" | "Create" | "Profile";
+};
+
+export const Disclosure: React.FC<DisclosureProps> = ({
+  headline,
+  children,
+  icon,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <details className="disclosure text-body-large">
+      <summary
+        className="disclosure__headline text-body-large"
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <div className="disclosure__icon bg-identity-tint-120 m-24">
+          <img
+            className="disclosure__icon"
+            src={`icons/collection/${icon}.svg`}
+            alt="various-icon"
+          />
+        </div>
+        {headline}
+        <img
+          className={`disclosure__expand mr-24 noselect ${
+            isOpen ? "disclosure__expand-open" : ""
+          }`}
+          src="icons/collection/ExpandMore.svg"
+          alt="various-icon"
+        />
+      </summary>
+      {children}
+    </details>
+  );
+};
+
+export default Disclosure;

src/stories/Library/disclosure/disclosure.scss

@@ -0,0 +1,35 @@
+.disclosure {
+  width: auto;
+  border: solid 1px $c-global-tertiary-1;
+
+  @include breakpoint-m {
+    margin: 0 133px;
+  }
+
+  &__headline {
+    display: flex;
+    align-items: center;
+    justify-content: baseline;
+    cursor: pointer;
+  }
+
+  &__icon {
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    display: flex;
+    justify-content: center;
+
+    & > img {
+      width: 24px;
+      filter: invert(1);
+    }
+  }
+
+  &__expand {
+    margin-left: auto;
+    &-open {
+      transform: scaleY(-1);
+    }
+  }
+}

src/styles/scss/shared.scss

@@ -100,3 +100,9 @@
   justify-content: flex-end;
   padding: 20px;
 }
+
+.noselect {
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}