5398: user info component added

Author: Sine Jespersen

base.scss

@@ -21,6 +21,7 @@
 @import "./src/stories/Library/status-label/status-label";
 @import "./src/stories/Library/number/number";
 @import "./src/stories/Library/counter/counter";
+@import "./src/stories/Library/user-info/user-info";
 @import "./src/stories/Library/Forms/checkbox/checkbox";
 @import "./src/stories/Library/material/material";
 @import "./src/stories/Library/progress-bar/progress-bar";

src/stories/Library/user-info/UserInfo.stories.tsx

@@ -0,0 +1,35 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import UserInfo from "./UserInfo";
+
+export default {
+  title: "Library / User info",
+  component: UserInfo,
+  decorators: [withDesign],
+  argTypes: {
+    address: {
+      control: "text",
+      defaultValue:
+        "The Utonium Residence, 107 Pokey Oaks South, Townsville, USA",
+    },
+    nameLabel: {
+      control: "text",
+      defaultValue: "Navn",
+    },
+    addressLabel: {
+      control: "text",
+      defaultValue: "Adresse",
+    },
+    name: {
+      control: "text",
+      defaultValue: "Professor Utonium",
+    },
+  },
+  parameters: {},
+} as ComponentMeta<typeof UserInfo>;
+
+const Template: ComponentStory<typeof UserInfo> = (props) => (
+  <UserInfo {...props} />
+);
+
+export const UserInfoExample = Template.bind({});

src/stories/Library/user-info/UserInfo.tsx

@@ -0,0 +1,21 @@
+export type UserInfoProps = {
+  name: string;
+  nameLabel: string;
+  address: string;
+  addressLabel: string;
+};
+
+const UserInfo = (props: UserInfoProps) => {
+  const { name, nameLabel, address, addressLabel } = props;
+
+  return (
+    <div className="dpl-user-info">
+      <div className="dpl-user-info__label">{nameLabel}</div>
+      <div className="dpl-user-info__text">{name}</div>
+      <div className="dpl-user-info__label">{addressLabel}</div>
+      <div className="dpl-user-info__text">{address}</div>
+    </div>
+  );
+};
+
+export default UserInfo;

src/stories/Library/user-info/user-info.scss

@@ -0,0 +1,15 @@
+.dpl-user-info {
+  @extend .color-secondary-gray;
+  @extend .bg-global-secondary;
+  @extend .pb-32;
+
+  &__label {
+    @extend .text-body-medium-medium;
+    @extend .ml-32;
+    @extend .pt-32;
+  }
+  &__text {
+    @extend .text-body-medium-regular;
+    @extend .ml-32;
+  }
+}