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

package/components/Alert/Alert.scss

@@ -0,0 +1,25 @@
+@import './../variable.scss';
+
+%common-font {
+    font-family: $bodyFonts;
+}
+
+:global(.alert-info) {
+    @extend %common-font;
+    border-color: $primary !important;
+}
+
+:global(.alert-success) {
+    @extend %common-font;
+    border-color: $success;
+}
+
+:global(.alert-danger) {
+    @extend %common-font;
+    border-color: $red-300;
+}
+
+:global(.alert-warning) {
+    @extend %common-font;
+    border-color: $warning;
+}

package/components/Alert/Alert.stories.d.ts

@@ -0,0 +1,54 @@
+declare namespace _default {
+    export const title: string;
+    export { Alert as component };
+    export const tags: string[];
+    export namespace argTypes {
+        namespace color {
+            namespace control {
+                const type: string;
+            }
+            const options: string[];
+        }
+        namespace message {
+            const control_1: string;
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+export namespace Info {
+    namespace args {
+        const color_1: string;
+        export { color_1 as color };
+        const message_1: string;
+        export { message_1 as message };
+    }
+}
+export namespace success {
+    export namespace args_1 {
+        const color_2: string;
+        export { color_2 as color };
+        const message_2: string;
+        export { message_2 as message };
+    }
+    export { args_1 as args };
+}
+export namespace danger {
+    export namespace args_2 {
+        const color_3: string;
+        export { color_3 as color };
+        const message_3: string;
+        export { message_3 as message };
+    }
+    export { args_2 as args };
+}
+export namespace warning {
+    export namespace args_3 {
+        const color_4: string;
+        export { color_4 as color };
+        const message_4: string;
+        export { message_4 as message };
+    }
+    export { args_3 as args };
+}
+import Alert from "./Alert.svelte";

package/components/Alert/Alert.stories.js

@@ -0,0 +1,46 @@
+import Alert from './Alert.svelte';
+
+export default {
+    title: 'FMS/Alert',
+    component: Alert,
+    tags: ['autodocs'],
+    argTypes: {
+        color: { 
+            control: {  type: 'select'}, 
+            options: ['info', 'success', 'danger', 'warning'] ,    
+        },
+        message: { control: 'text' }
+    }
+};
+
+export const Info = {
+args: {
+    color: 'info',
+    message: 'I am an alert'
+   }
+
+}
+
+export const success = {
+    args: {
+        color: 'success',
+        message: 'I am an alert'
+    }
+    
+}
+
+export const danger = {
+    args: {
+        color: 'danger',
+        message: 'I am an alert'
+    }
+    
+}
+
+export const warning = {
+    args: {
+        color: 'warning',
+        message: 'I am an alert'
+    }
+    
+}

package/components/Alert/Alert.svelte

@@ -0,0 +1,29 @@
+<script>import { Alert } from "sveltestrap";
+export let color = "info";
+export let message = "I am an alert and I can be dismissed!";
+</script>
+
+<Alert class={`alert-${color}`}  dismissible>
+  <slot />
+  {message}
+</Alert>
+
+
+<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+:global(.alert-warning), :global(.alert-danger), :global(.alert-success), :global(.alert-info) {
+  font-family: Roboto;
+}
+:global(.alert-info) {
+  border-color: #00AEE5 !important;
+}
+:global(.alert-success) {
+  border-color: #00A96B;
+}
+:global(.alert-danger) {
+  border-color: #EA868F;
+}
+:global(.alert-warning) {
+  border-color: #FFBA3A;
+}</style>

package/components/Alert/Alert.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: "info" | "success" | "danger" | "warning" | undefined;
+        message?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/components/Badge/Badge.scss

@@ -0,0 +1,8 @@
+@import '../variable.scss';
+
+:global(.custom-badge) {
+    padding: 5px 8px;
+    text-transform: capitalize;
+    font-weight: 500;
+    font-family: $bodyFonts;
+}

package/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,75 @@
+declare namespace _default {
+    export const title: string;
+    export { Badge as component };
+}
+export default _default;
+export namespace yellow {
+    namespace args {
+        const config: string;
+        const label: string;
+    }
+}
+export namespace primaryLight {
+    export namespace args_1 {
+        const config_1: string;
+        export { config_1 as config };
+        const label_1: string;
+        export { label_1 as label };
+    }
+    export { args_1 as args };
+}
+export namespace secondaryLight {
+    export namespace args_2 {
+        const config_2: string;
+        export { config_2 as config };
+        const label_2: string;
+        export { label_2 as label };
+    }
+    export { args_2 as args };
+}
+export namespace green {
+    export namespace args_3 {
+        const config_3: string;
+        export { config_3 as config };
+        const label_3: string;
+        export { label_3 as label };
+    }
+    export { args_3 as args };
+}
+export namespace grayLight {
+    export namespace args_4 {
+        const config_4: string;
+        export { config_4 as config };
+        const label_4: string;
+        export { label_4 as label };
+    }
+    export { args_4 as args };
+}
+export namespace gray {
+    export namespace args_5 {
+        const config_5: string;
+        export { config_5 as config };
+        const label_5: string;
+        export { label_5 as label };
+    }
+    export { args_5 as args };
+}
+export namespace red {
+    export namespace args_6 {
+        const config_6: string;
+        export { config_6 as config };
+        const label_6: string;
+        export { label_6 as label };
+    }
+    export { args_6 as args };
+}
+export namespace cyan {
+    export namespace args_7 {
+        const config_7: string;
+        export { config_7 as config };
+        const label_7: string;
+        export { label_7 as label };
+    }
+    export { args_7 as args };
+}
+import Badge from "./Badge.svelte";

package/components/Badge/Badge.stories.js

@@ -0,0 +1,55 @@
+import Badge from './Badge.svelte'
+
+export default{
+    title:'FMS/Badge',
+    component:Badge
+};
+
+export const yellow={
+    args:{
+        config:'yellow',
+        label:'Badges',
+    }
+};
+export const primaryLight={
+    args:{
+        config:'primaryLight',
+        label:'Badges',
+    }
+};
+export const secondaryLight={
+    args:{
+        config:'secondaryLight',
+        label:'Badges',
+    }
+};
+export const green={
+    args:{
+        config:'green',
+        label:'Badges',
+    }
+};
+export const grayLight={
+    args:{
+        config:'grayLight',
+        label:'Badges',
+    }
+};
+export const gray={
+    args:{
+        config:'gray',
+        label:'Badges',
+    }
+};
+export const red={
+    args:{
+        config:'red',
+        label:'Badges',
+    }
+};
+export const cyan={
+    args:{
+        config:'cyan',
+        label:'Badges',
+    }
+};