5381: add figma and controlled inputs

Author: Sine Jespersen

src/stories/Library/reservation-header/ReservationHeader.stories.tsx

@@ -6,12 +6,30 @@ export default {
   title: "Library / Reservation header",
   component: ReservationHeader,
   decorators: [withDesign],
-  argTypes: {},
-  parameters: {},
+  argTypes: {
+    author: {
+      defaultValue: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)",
+      control: "text",
+    },
+    label: {
+      defaultValue: "BOG",
+      control: "text",
+    },
+    title: {
+      defaultValue: "Steven Hawking",
+      control: "text",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=2052%3A72452",
+    },
+  },
 } as ComponentMeta<typeof ReservationHeader>;
 
-const Template: ComponentStory<typeof ReservationHeader> = () => (
-  <ReservationHeader />
+const Template: ComponentStory<typeof ReservationHeader> = (props) => (
+  <ReservationHeader {...props} />
 );
 
 export const ReservationHeaderExample = Template.bind({});

src/stories/Library/reservation-header/ReservationHeader.tsx

@@ -1,6 +1,16 @@
 import { Material } from "../material/Material";
 
-const ReservationHeader = () => {
+export type ReservationHeaderProps = {
+  author: string;
+  label: string;
+  title: string;
+};
+
+const ReservationHeader = ({
+  author,
+  label,
+  title,
+}: ReservationHeaderProps) => {
   return (
     <div className="dpl-reservation-header">
       <div className="dpl-reservation-header__material">
@@ -12,13 +22,9 @@ const ReservationHeader = () => {
         />
       </div>
       <div className="dpl-reservation-header__container">
-        <div className="dpl-reservation-header__container__tag">BOG</div>
-        <div className="dpl-reservation-header__container__header">
-          Steven Hawking
-        </div>
-        <div className="dpl-reservation-header__container__text">
-          Af Isabel Sánchez Vegara, Amaia Arrazola (2018)
-        </div>
+        <div className="dpl-reservation-header__container__tag">{label}</div>
+        <div className="dpl-reservation-header__container__header">{title}</div>
+        <div className="dpl-reservation-header__container__text">{author}</div>
       </div>
     </div>
   );