DDFFORM 6 linkskomponent liste

.gitignore

@@ -31,3 +31,6 @@ storybook-static
 # Dev Tools
 .vscode
 .history
+
+#zipped files generated when using dapple. 
+dist.zip

base.scss

@@ -104,6 +104,7 @@
 @import "./src/stories/Library/event-header/event-header";
 @import "./src/stories/Library/image-credited/image-credited";
 @import "./src/stories/Library/event-description/event-description";
+@import "./src/stories/Library/link-with-icon/link-with-icon";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

docs/Icon-guidelines.md

@@ -0,0 +1,16 @@
+# Icon Usage Guidelines
+
+This folder contains SVG icons that are used in the design system. When using
+icons from this folder, please follow the guidelines below:
+
+- Icons located in public/ folder is the current source of truth. All icons
+will be placed in this folder. Ensure that icons placed gere are using the
+`class` attribute, and not `className` for SVG element.
+
+- For icons used in React components that require class modifications or
+similar, first create the icon in public/icons, and then manually copy the SVG
+from the `public/icons` folder and make any necessary changes, i.e replacing
+the `class` with `className` or other modifications.
+
+Currently, there is no automated solution for this process that ensures
+consistency for this. This may be changed in the future.

public/icons/README.md

@@ -0,0 +1,3 @@
+# Icon Usage Guidelines
+
+For information on how to use icons for this project, see [icon-guidelines.md](../../docs/Icon-guidelines.md).

src/stories/Library/Icons/icon-collection/IconCollection.stories.tsx

@@ -11,7 +11,7 @@ const StoryBase: Meta = {
   parameters: {
     design: {
       type: "figma",
-      url: "hhttps://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=1385%3A10755",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=1385%3A10755",
     },
   },
 };

src/stories/Library/Icons/icon-collection/icon-collection.json

@@ -298,5 +298,13 @@
   {
     "title": "Plus circle",
     "fileName": "PlusButton.svg"
+  },
+  {
+    "title": "Search Books",
+    "fileName": "SearchBooks.svg"
+  },
+  {
+    "title": "Internal Link",
+    "fileName": "InternalLink.svg"
   }
 ]

src/stories/Library/link-with-icon/LinkTypes.ts

@@ -0,0 +1,7 @@
+export type LinkType = "internal" | "external" | "download" | "search";
+
+export type IconType =
+  | "ArrowBack"
+  | "icon-external-link"
+  | "Ebook"
+  | "SearchBooks";

src/stories/Library/link-with-icon/LinkWithIcon.stories.tsx

@@ -0,0 +1,68 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import { LinkWithIcon } from "./LinkWithIcon";
+
+export default {
+  title: "Library / Link with icon",
+  component: LinkWithIcon,
+  decorators: [withDesign],
+  argTypes: {
+    href: {
+      defaultValue: "/",
+    },
+    linkText: {
+      defaultValue: "Følg prisoverrækkelsen live fra kl. 15:30",
+    },
+    linkType: {
+      control: {
+        type: "select",
+        options: ["internal", "external", "download", "search"],
+      },
+      defaultValue: "internal",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39110&mode=design&t=d1dz4FVEPRORqxUN-4",
+    },
+    layout: "full",
+  },
+} as ComponentMeta<typeof LinkWithIcon>;
+
+const Template: ComponentStory<typeof LinkWithIcon> = (args) => (
+  <LinkWithIcon {...args} />
+);
+
+export const Default = Template.bind({});
+
+const LinkWithIconListComponentTemplate: ComponentStory<
+  typeof LinkWithIcon
+> = () => (
+  <div>
+    <LinkWithIcon href="#" linkText="Internal Link" linkType="internal" />
+    <LinkWithIcon
+      href="https://example.com"
+      linkText="External Link"
+      linkType="external"
+    />
+    <LinkWithIcon
+      href="/download/some-file.pdf"
+      linkText="Download Link"
+      linkType="download"
+    />
+    <LinkWithIcon
+      href="/search?q=storybook"
+      linkText="Search Link at /search"
+      linkType="search"
+    />
+    <LinkWithIcon
+      href="/advanced-search?q=storybook"
+      linkText="Search Link at /advanced-search"
+      linkType="search"
+    />
+  </div>
+);
+
+export const LinkList = LinkWithIconListComponentTemplate.bind({});
+LinkList.decorators = [(Story) => Story()];

src/stories/Library/link-with-icon/LinkWithIcon.tsx

@@ -0,0 +1,48 @@
+import clsx from "clsx";
+import { ReactComponent as ArrowLargeRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-large-right.svg";
+import { IconType, LinkType } from "./LinkTypes";
+
+export type LinksProps = {
+  href: string;
+  linkText: string;
+  linkType: LinkType;
+};
+
+const linkTypeAttributes: {
+  [key in LinkType]: {
+    target: "_self" | "_blank";
+    icon: IconType;
+    folder: "basic" | "collection";
+  };
+} = {
+  internal: { target: "_self", icon: "ArrowBack", folder: "collection" },
+  external: {
+    target: "_blank",
+    icon: "icon-external-link",
+    folder: "basic",
+  },
+  download: { target: "_blank", icon: "Ebook", folder: "collection" },
+  search: { target: "_self", icon: "SearchBooks", folder: "collection" },
+};
+
+export const LinkWithIcon = ({ href, linkText, linkType }: LinksProps) => {
+  const { target, icon, folder } = linkTypeAttributes[linkType];
+
+  const linkIconClass = clsx({
+    "link-with-icon__icon--rotate-180": linkType === "internal",
+  });
+
+  return (
+    <a
+      href={href}
+      target={target}
+      className={clsx("link-with-icon arrow__hover--right-large")}
+    >
+      <div className={clsx("link-with-icon__icon", linkIconClass)}>
+        <img className="invert" src={`icons/${folder}/${icon}.svg`} alt="" />
+      </div>
+      {linkText}
+      <ArrowLargeRight />
+    </a>
+  );
+};

src/stories/Library/link-with-icon/link-with-icon.scss

@@ -0,0 +1,46 @@
+.link-with-icon {
+  @extend %text-body-medium-regular-placeholder;
+  line-height: 160%;
+  background-color: $c-global-primary;
+  padding: $s-md $s-lg;
+  display: grid;
+  grid-template-columns: 40px auto max-content;
+  align-items: center;
+  gap: $s-md;
+  text-decoration: none;
+  border: 1px solid $c-global-tertiary-1;
+  width: 100%;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  & + .link-with-icon {
+    margin-top: 0;
+  }
+
+  @include container(medium);
+  @include breakpoint-s {
+    padding: $s-lg $s-xl;
+  }
+}
+
+@include arrow("link-with-icon");
+
+.link-with-icon__icon {
+  background-color: $c-identity-primary;
+  min-width: 40px;
+  min-height: 40px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.link-with-icon__icon--rotate-180 {
+  transform: rotate(180deg);
+}