Add pagination component

A component that uses the button atom and a <p> that accepts these props
- currentResults
- totalResults

base.scss

@@ -26,6 +26,7 @@
 @import "./src/stories/counter/counter";
 @import "./src/stories/checkbox/checkbox";
 @import "./src/stories/availability-label/availability-label";
+@import "./src/stories/search-result-pagination/search-result-pagination";
 
 @import "./src/stories/list-reservation/list-reservation";
 @import "./src/stories/list-dashboard/list-dashboard";

src/stories/search-result-pagination/SearchResultPagination.stories.tsx

@@ -0,0 +1,33 @@
+import { withDesign } from "storybook-addon-designs";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { SearchResultPagination } from "./SearchResultPagination";
+
+export default {
+  title: "Components / Search Result - Pagination",
+  component: SearchResultPagination,
+  decorators: [withDesign],
+  parameters: {
+    design: {
+      type: "figma",
+      url:
+        "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=1011%3A15112",
+    },
+  },
+  argTypes: {
+    currentResults: {
+      control: { type: "text" },
+      defaultValue: "10",
+    },
+    totalResults: {
+      control: { type: "text" },
+      defaultValue: "423",
+    },
+  },
+} as ComponentMeta<typeof SearchResultPagination>;
+
+const Template: ComponentStory<typeof SearchResultPagination> = (args) => {
+  return <SearchResultPagination {...args} />;
+};
+
+export const Item = Template.bind({});
+Item.args = {};

src/stories/search-result-pagination/SearchResultPagination.tsx

@@ -0,0 +1,30 @@
+import { Button } from "../button/Button";
+
+interface SearchResultPaginationProps {
+  currentResults: string;
+  totalResults: string;
+}
+
+export const SearchResultPagination = ({
+  currentResults,
+  totalResults,
+}: SearchResultPaginationProps) => {
+  return (
+    <div className="search-result-pagination">
+      <p className="text-small-caption search-result-pagination__title">
+        {`Viser ${currentResults} ud af ${totalResults} resultater`}
+      </p>
+      <Button
+        label={"VIS FLERE"}
+        disabled={false}
+        buttonType={"none"}
+        collapsible={false}
+        size={"medium"}
+        variant={"outline"}
+        onClick={() => {
+          console.log("onClick");
+        }}
+      />
+    </div>
+  );
+};

src/stories/search-result-pagination/search-result-pagination.scss

@@ -0,0 +1,17 @@
+.search-result-pagination {
+  &__title {
+    text-align: center;
+    margin-top: 24px;
+    margin-bottom: 16px;
+  }
+}
+
+// Override button css (Center + Width)
+.search-result-pagination > .btn-primary {
+  margin: 0 auto;
+  width: 100%;
+
+  @include breakpoint-s {
+    max-width: 253px;
+  }
+}