5380: moved toggle button, added controlled inputs

Author: Sine Jespersen

base.scss

@@ -46,7 +46,7 @@
 @import "./src/stories/Library/Modals/modal-text/modal-text";
 @import "./src/stories/Library/Modals/modal-pause/modal-pause";
 @import "./src/stories/Library/material-page/material-page";
-@import "./src/stories/Library/toggle-button/toggle-button";
+@import "./src/stories/Library/Buttons/toggle-button/toggle-button";
 @import "./src/stories/Library/pause-reservation/pause-reservation";
 @import "./src/stories/Library/material-header/material-header";
 @import "./src/stories/Library/material-header/material-periodikum-select";

src/stories/Library/toggle-button/ToggleButton.stories.tsx renamed to src/stories/Library/Buttons/toggle-button/ToggleButton.stories.tsx

@@ -6,12 +6,17 @@ export default {
   title: "Library / Toggle button",
   component: ToggleButton,
   decorators: [withDesign],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=607%3A35282",
+    },
+  },
   argTypes: {
     isChecked: {
       defaultValue: false,
     },
   },
-  parameters: {},
 } as ComponentMeta<typeof ToggleButton>;
 
 const Template: ComponentStory<typeof ToggleButton> = (args) => (

src/stories/Library/toggle-button/ToggleButton.tsx renamed to src/stories/Library/Buttons/toggle-button/ToggleButton.tsx

@@ -10,8 +10,21 @@ export default {
     isChecked: {
       defaultValue: true,
     },
+    text: {
+      control: "text",
+      defaultValue: "Sæt fysiske reserveringer på pause",
+    },
+    dates: {
+      control: "text",
+      defaultValue: "20.09.2021 - 12.10.2021",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=607%3A35282",
+    },
   },
-  parameters: {},
 } as ComponentMeta<typeof PauseReservation>;
 
 const Template: ComponentStory<typeof PauseReservation> = (args) => (

src/stories/Library/toggle-button/toggle-button.scss renamed to src/stories/Library/Buttons/toggle-button/toggle-button.scss

@@ -1,26 +1,32 @@
-import ToggleButton from "../toggle-button/ToggleButton";
+import ToggleButton from "../Buttons/toggle-button/ToggleButton";
 
 export type PauseReservationProps = {
   isChecked: boolean;
+  text: string;
+  dates: string;
 };
 
-export const PauseReservation = ({ isChecked }: PauseReservationProps) => {
+export const PauseReservation = ({
+  isChecked,
+  text,
+  dates,
+}: PauseReservationProps) => {
   return (
     <div className="dpl-pause-reservation-component">
       <div className="dpl-pause-reservation-component__pagefold" />
       <div className="dpl-pause-reservation-component__flex">
         <div className="dpl-pause-reservation-component__flex__reservation-icon">
-          <img src="icons/collection/Reservations.svg" alt="Reservations" />
+          <img src="icons/collection/Reservations.svg" alt="" />
         </div>
         <div className="dpl-pause-reservation-component__flex__text">
-          Sæt fysiske reserveringer på pause
+          {text}
         </div>
         {isChecked && (
           <span
             aria-label="Reservationer er sat på pause i følgende periode"
             className="dpl-pause-reservation-component__flex__badge"
           >
-            20.09.2021 - 12.10.2021
+            {dates}
           </span>
         )}
         <div className="dpl-pause-reservation-component__flex__button">