@enki-tek/fms-web-components 0.0.2 → 0.0.4

package/components/Header/Header.scss

@@ -0,0 +1,54 @@
+@import './../variable.scss';
+
+:global(.headerLogo) {
+    display: flex;
+    flex-direction: column;
+    color: $black;
+}
+
+:global(.headerLogo img) {
+    width: 144px;
+    height: 34px;
+}
+
+:global(.headerIcons) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid $secondary;
+    border-radius: 50%;
+    color: $secondary;
+    padding: 8px 9px;
+}
+
+:global(.headerIcons i) {
+    padding: 0 4px;
+    font-size: 18px;
+}
+
+:global(.userProfile) {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+:global(.userProfileBox) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    color: $gray-600;
+}
+
+:global(.userProfile img) {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+}
+
+:global(.nav-link:focus, .nav-link:hover) {
+    color: $secondary;
+}
+
+:global(a:hover) {
+    color: $black;
+}

package/components/Header/Header.stories.d.ts

@@ -0,0 +1,28 @@
+declare namespace _default {
+    export const title: string;
+    export { Header as component };
+    export const tags: string[];
+    export namespace argTypes {
+        namespace userImage {
+            const control: string;
+        }
+    }
+}
+export default _default;
+export function Default({ userImage }: {
+    userImage: any;
+}): {
+    Component: typeof Header;
+    props: {
+        userImage: any;
+    };
+};
+export namespace Default {
+    namespace args {
+        export const userName: string;
+        export const userRole: string;
+        const userImage_1: string;
+        export { userImage_1 as userImage };
+    }
+}
+import Header from "./Header.svelte";

package/components/Header/Header.stories.js

@@ -0,0 +1,28 @@
+import Header from './Header.svelte';
+
+
+export default{
+    title:'FMS/Header',
+    component:Header,
+    tags:['autodocs'],
+    argTypes:{
+        userImage:{control:'text'},
+    }
+};
+
+
+const Template = ({ userImage }) => ({
+    Component: Header,
+    props: { userImage },
+  });
+  
+  
+
+export const Default = Template.bind({});
+
+    Default.args={
+        userName:'John Doe',
+        userRole:'Administrator',
+        userImage:'https://i.postimg.cc/QCHcWMkm/userprofile.png'
+    };
+