KBHBIB-24 Added new share buttons

base.scss

@@ -11,6 +11,7 @@
 @import "./src/stories/Library/link-filters/link-filters";
 @import "./src/stories/Library/Arrows/arrows";
 @import "./src/stories/Library/Buttons/button/buttons";
+@import "./src/stories/Library/Buttons/button-share/button-share";
 @import "./src/stories/Library/Buttons/button-ui/buttons-ui";
 @import "./src/stories/Library/tag/tag";
 @import "./src/stories/Library/logo/logo";

src/stories/Library/Buttons/button-share/ButtonShare.stories.tsx

@@ -0,0 +1,37 @@
+import { StoryFn, Meta } from "@storybook/react";
+
+import { ButtonShare } from "./button-share";
+
+export default {
+  title: "Library / Buttons / Button Share",
+  component: ButtonShare,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ewyxJIi7OGXT5ekgDgPK46/KK-bib-deling?node-id=2-2&node-type=frame&t=08x3dd2K8R0fQTaP-0",
+    },
+    layout: "centered",
+  },
+  argTypes: {
+    href: {
+      control: "text",
+    },
+    textFacebook: {
+      control: "text",
+    },
+    textCopy: {
+      control: "text",
+    },
+  },
+  args: {
+    href: "https://www.facebook.com",
+    textFacebook: "Del på Facebook",
+    textCopy: "Kopier link",
+  },
+} as Meta<typeof ButtonShare>;
+
+const Template: StoryFn<typeof ButtonShare> = (args) => (
+  <ButtonShare {...args} />
+);
+
+export const share = Template.bind({});

src/stories/Library/Buttons/button-share/button-share.scss

@@ -0,0 +1,41 @@
+.button-share {
+  display: flex;
+
+  &:not(&--fixed) {
+    gap: $s-md;
+    flex-wrap: wrap;
+  }
+
+  &--fixed {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 50%;
+    z-index: $z-10;
+    flex-direction: column;
+    transform: translateY(-50%);
+
+    @include media-query__medium {
+      display: flex;
+    }
+  }
+
+  &__button {
+    /* stylelint-disable scss/at-extend-no-missing-placeholder*/
+    @extend .btn-primary;
+    @extend .btn-outline;
+    @extend .btn-medium;
+
+    gap: $s-sm;
+    background-color: $color__global-primary;
+
+    &--fixed {
+      padding: 0;
+      aspect-ratio: 1;
+
+      &:first-child {
+        border-bottom: unset;
+      }
+    }
+  }
+}

src/stories/Library/Buttons/button-share/button-share.tsx

@@ -0,0 +1,53 @@
+import { ReactComponent as LinkSvg } from "../../../../public/icons/collection/Link.svg";
+import { ReactComponent as FacebookSvg } from "../../../../public/icons/social/icon-social-facebook.svg";
+
+export type ButtonShareProps = {
+  href: string;
+  textFacebook: string;
+  textCopy: string;
+};
+
+export const ButtonShare = ({
+  href,
+  textFacebook,
+  textCopy,
+}: ButtonShareProps) => {
+  return (
+    <div className="button-share">
+      <div className="button-share button-share--fixed">
+        <a
+          href={href}
+          aria-label="Del denne side på Facebook"
+          className="button-share__button button-share__button--fixed"
+        >
+          <FacebookSvg role="img" aria-hidden="true" />
+        </a>
+        <button
+          type="button"
+          onClick={() => navigator.clipboard.writeText(href)}
+          aria-label="Kopier denne side til udklipsholderen"
+          className="button-share__button button-share__button--fixed"
+        >
+          <LinkSvg role="img" aria-hidden="true" />
+        </button>
+      </div>
+      <a
+        href={href}
+        aria-label="Del denne side på Facebook"
+        className="button-share__button"
+      >
+        <FacebookSvg role="img" aria-hidden="true" />
+        {textFacebook}
+      </a>
+      <button
+        type="button"
+        onClick={() => navigator.clipboard.writeText(href)}
+        aria-label="Kopier denne side til udklipsholderen"
+        className="button-share__button"
+      >
+        <LinkSvg role="img" aria-hidden="true" />
+        {textCopy}
+      </button>
+    </div>
+  );
+};