From 838643b458ef2deb6974fd2751033b82bb0f4779 Mon Sep 17 00:00:00 2001
From: Jacob Pihl <jacob@reload.dk>
Date: Tue, 10 Dec 2024 15:59:40 +0100
Subject: [PATCH] Added share button to the design system

---
 base.scss                                     |  1 +
 .../button-share/ButtonShare.stories.tsx      | 37 +++++++++++++
 .../Buttons/button-share/button-share.scss    | 41 ++++++++++++++
 .../Buttons/button-share/button-share.tsx     | 53 +++++++++++++++++++
 4 files changed, 132 insertions(+)
 create mode 100644 src/stories/Library/Buttons/button-share/ButtonShare.stories.tsx
 create mode 100644 src/stories/Library/Buttons/button-share/button-share.scss
 create mode 100644 src/stories/Library/Buttons/button-share/button-share.tsx

diff --git a/base.scss b/base.scss
index 5e798099d..ffd455219 100644
--- a/base.scss
+++ b/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";
diff --git a/src/stories/Library/Buttons/button-share/ButtonShare.stories.tsx b/src/stories/Library/Buttons/button-share/ButtonShare.stories.tsx
new file mode 100644
index 000000000..02db948af
--- /dev/null
+++ b/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({});
diff --git a/src/stories/Library/Buttons/button-share/button-share.scss b/src/stories/Library/Buttons/button-share/button-share.scss
new file mode 100644
index 000000000..ce828e4bf
--- /dev/null
+++ b/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__small {
+      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;
+      }
+    }
+  }
+}
diff --git a/src/stories/Library/Buttons/button-share/button-share.tsx b/src/stories/Library/Buttons/button-share/button-share.tsx
new file mode 100644
index 000000000..46114129a
--- /dev/null
+++ b/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>
+  );
+};