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

package/components/Button/Button.svelte.d.ts

@@ -1,19 +1,53 @@
+/** @typedef {typeof __propDef.props}  ButtonProps */
+/** @typedef {typeof __propDef.events}  ButtonEvents */
+/** @typedef {typeof __propDef.slots}  ButtonSlots */
+export default class Button extends SvelteComponentTyped<{
+    type?: string | undefined;
+    label?: string | undefined;
+    config?: string | undefined;
+    icon?: {
+        state: boolean;
+        name: string;
+        position: string;
+    } | undefined;
+    shade?: string | undefined;
+    outlineShade?: string | undefined;
+}, {
+    click: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        type?: string | undefined;
         label?: string | undefined;
-        iscolor?: boolean | undefined;
-        size?: string | undefined;
-        color?: string | undefined;
+        config?: string | undefined;
+        icon?: {
+            state: boolean;
+            name: string;
+            position: string;
+        } | undefined;
+        shade?: string | undefined;
+        outlineShade?: string | undefined;
     };
     events: {
+        click: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
-}
 export {};

package/components/Button/buttonConfig.d.ts

@@ -0,0 +1,38 @@
+export namespace buttonConfig {
+    const secondaryBtnLarge: string[];
+    const secondaryBtnMedium: string[];
+    const secondaryBtnSmall: string[];
+    const primaryBtnLarge: string[];
+    const primaryBtnMedium: string[];
+    const primaryBtnSmall: string[];
+    const infoBtnLarge: string[];
+    const infoBtnMedium: string[];
+    const infoBtnSmall: string[];
+    const warningBtnSmall: string[];
+    const warningBtnLarge: string[];
+    const warningBtnMedium: string[];
+    const dangerBtnLarge: string[];
+    const dangerBtnMedium: string[];
+    const dangerBtnSmall: string[];
+    const successBtnLarge: string[];
+    const successBtnMedium: string[];
+    const successBtnSmall: string[];
+    const secondaryOutlineBtnLarge: string[];
+    const secondaryOutlineBtnMedium: string[];
+    const secondaryOutlineBtnSmall: string[];
+    const primaryOutlineBtnLarge: string[];
+    const primaryOutlineBtnMedium: string[];
+    const primaryOutlineBtnSmall: string[];
+    const infoOutlineBtnLarge: string[];
+    const infoOutlineBtnMedium: string[];
+    const infoOutlineBtnSmall: string[];
+    const warningOutlineBtnSmall: string[];
+    const warningOutlineBtnLarge: string[];
+    const warningOutlineBtnMedium: string[];
+    const dangerOutlineBtnLarge: string[];
+    const dangerOutlineBtnMedium: string[];
+    const dangerOutlineBtnSmall: string[];
+    const successOutlineBtnLarge: string[];
+    const successOutlineBtnMedium: string[];
+    const successOutlineBtnSmall: string[];
+}

package/components/Button/buttonConfig.js

@@ -0,0 +1,203 @@
+export const buttonConfig = {
+    "secondaryBtnLarge" :[
+      "ebtn-large",
+      "ebg-secondary",
+      "etext-white",
+    ],
+    "secondaryBtnMedium" :[
+      "ebtn-medium",
+      "ebg-secondary",
+      "etext-white",
+    ],
+    "secondaryBtnSmall" :[
+      "ebtn-small",
+      "ebg-secondary",
+      "etext-white",
+    ],
+    "primaryBtnLarge" :[
+      "ebtn-large",
+      "ebg-primary",
+      "etext-white",
+    ],
+    "primaryBtnMedium" :[
+      "ebtn-medium",
+      "ebg-primary",
+      "etext-white",
+    ],
+    "primaryBtnSmall" :[
+      "ebtn-small",
+      "ebg-primary",
+      "etext-white",
+    ],
+    "infoBtnLarge" :[
+      "ebtn-large",
+      "ebg-info",
+      "etext-white",
+    ],
+    "infoBtnMedium" :[
+      "ebtn-medium",
+      "ebg-info",
+      "etext-white",
+    ],
+    "infoBtnSmall" :[
+      "ebtn-small",
+      "ebg-info",
+      "etext-white",
+    ],
+    "warningBtnSmall" :[
+      "ebtn-small",
+      "ebg-warning",
+      "etext-white",
+    ],
+    "warningBtnLarge" :[
+      "ebtn-small",
+      "ebg-warnging",
+      "etext-white",
+    ],
+    "warningBtnMedium" :[
+      "ebtn-medium",
+      "ebg-warning",
+      "etext-white",
+    ],
+    "dangerBtnLarge" :[
+      "ebtn-large",
+      "ebg-danger",
+      "etext-white"
+    ],
+    "dangerBtnMedium" :[
+      "ebtn-medium",
+      "ebg-danger",
+      "etext-white"
+    ],
+    "dangerBtnSmall" :[
+      "ebtn-small",
+      "ebg-danger",
+      "etext-white"
+    ],
+    "successBtnLarge" :[
+      "ebtn-large",
+      "ebg-success",
+      "etext-white"
+    ],
+    "successBtnMedium" :[
+      "ebtn-medium",
+      "ebg-success",
+      "etext-white"
+    ],
+    "successBtnSmall" :[
+      "ebtn-small",
+      "ebg-success",
+      "etext-white"
+    ],
+
+
+
+    "secondaryOutlineBtnLarge" :[
+      "ebtn-large",
+      "ebg-none",
+      "etext-secondary",
+      "eoutline-secondary",
+    ],
+    "secondaryOutlineBtnMedium" :[
+      "ebtn-medium",
+      "ebg-none",
+      "etext-secondary",
+      "eoutline-secondary"
+    ],
+    "secondaryOutlineBtnSmall" :[
+      "ebtn-small",
+      "ebg-none",
+      "etext-secondary",
+      "eoutline-secondary"
+    ],
+    "primaryOutlineBtnLarge" :[
+      "ebtn-large",
+      "ebg-none",
+      "etext-primary",
+      "eoutline-primary"
+    ],
+    "primaryOutlineBtnMedium" :[
+      "ebtn-medium",
+      "ebg-none",
+      "etext-primary",
+      "eoutline-primary"
+    ],
+    "primaryOutlineBtnSmall" :[
+      "ebtn-small",
+      "ebg-none",
+      "etext-primary",
+      "eoutline-primary"
+    ],
+    "infoOutlineBtnLarge" :[
+      "ebtn-large",
+      "ebg-none",
+      "etext-info",
+      "eoutline-info"
+    ],
+    "infoOutlineBtnMedium" :[
+      "ebtn-medium",
+      "ebg-none",
+      "etext-info",
+      "eoutline-info"
+    ],
+    "infoOutlineBtnSmall" :[
+      "ebtn-small",
+      "ebg-none",
+      "etext-info",
+      "eoutline-info"
+    ],
+    "warningOutlineBtnSmall" :[
+      "ebtn-small",
+      "ebg-none",
+      "etext-warning",
+      "eoutline-warning"
+    ],
+    "warningOutlineBtnLarge" :[
+      "ebtn-large",
+      "ebg-none",
+      "etext-warning",
+      "eoutline-warning"
+    ],
+    "warningOutlineBtnMedium" :[
+      "ebtn-medium",
+      "ebg-none",
+      "etext-warning",
+      "eoutline-warning"
+    ],
+    "dangerOutlineBtnLarge" :[
+      "ebtn-large",
+      "ebg-none",
+      "etext-danger",
+      "eoutline-danger"
+    ],
+    "dangerOutlineBtnMedium" :[
+      "ebtn-medium",
+      "ebg-none",
+      "etext-danger",
+      "eoutline-danger"
+    ],
+    "dangerOutlineBtnSmall" :[
+      "ebtn-small",
+      "ebg-none",
+      "etext-danger",
+      "eoutline-danger"
+    ],
+    "successOutlineBtnLarge" :[
+      "ebtn-large",
+      "ebg-none",
+      "etext-success",
+      "eoutline-success"
+    ],
+    "successOutlineBtnMedium" :[
+      "ebtn-medium",
+      "ebg-none",
+      "etext-success",
+      "eoutline-success"
+    ],
+    "successOutlineBtnSmall" :[
+      "ebtn-small",
+      "ebg-none",
+      "etext-success",
+      "eoutline-success"
+    ],
+}

package/components/Card/Card.scss

@@ -0,0 +1,39 @@
+@import './../variable.scss';
+
+@mixin common-font-properties($size, $weight: 400, $line-height: 28px, $style: normal, $family: 'Roboto') {
+    font-size: $size;
+    font-style: $style;
+    font-weight: $weight;
+    line-height: $line-height;
+    font-family: $family;
+}
+
+:global(.card) {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.title {
+    color: $gray-900;
+    @include common-font-properties(24px, 600, normal);
+}
+
+.sub-title {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    @include common-font-properties(16px, 600, normal);
+    color: $secondary;
+}
+
+.text {
+    @include common-font-properties(16px);
+    color: $gray-600;
+}
+
+.card-link {
+    @include common-font-properties(16px);
+    color: $primary;
+    text-decoration: none;
+    font-family: $bodyFonts;
+}

package/components/Card/Card.stories.d.ts

@@ -0,0 +1,59 @@
+declare namespace _default {
+    export const title: string;
+    export { Card as component };
+    export namespace argTypes {
+        namespace image {
+            const control: string;
+        }
+        namespace width {
+            const control_1: string;
+            export { control_1 as control };
+        }
+        namespace text {
+            const control_2: string;
+            export { control_2 as control };
+        }
+    }
+}
+export default _default;
+export namespace Card1 {
+    namespace args {
+        const image_1: string;
+        export { image_1 as image };
+        const text_1: string;
+        export { text_1 as text };
+        const title_1: string;
+        export { title_1 as title };
+        export const buttonLabel: string;
+        const width_1: string;
+        export { width_1 as width };
+    }
+}
+export namespace Card2 {
+    export namespace args_1 {
+        const text_2: string;
+        export { text_2 as text };
+        const title_2: string;
+        export { title_2 as title };
+        export const subTitle: string;
+        export const linkName1: string;
+        const width_2: string;
+        export { width_2 as width };
+    }
+    export { args_1 as args };
+}
+export namespace Card3 {
+    export namespace args_2 {
+        const text_3: string;
+        export { text_3 as text };
+        const title_3: string;
+        export { title_3 as title };
+        const width_3: string;
+        export { width_3 as width };
+        const linkName1_1: string;
+        export { linkName1_1 as linkName1 };
+        export const linkName2: string;
+    }
+    export { args_2 as args };
+}
+import Card from "./Card.svelte";

package/components/Card/Card.stories.js

@@ -0,0 +1,42 @@
+import Card from './Card.svelte';
+
+
+export default {
+    title: 'FMS/Card',
+    component: Card,
+    argTypes: {
+        image: { control: 'text' },
+        width: { control: 'text' },
+        text: { control: 'text' }
+    }
+};
+
+export const Card1 = {
+    args: {
+     image: 'https://s3.amazonaws.com/images.seroundtable.com/google-links-1510059186.jpg',
+     text: 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.',
+     title: 'Card Title',
+     buttonLabel:"Button",
+     width:'25rem'
+    }
+ }
+
+export const Card2 = {
+   args: {
+    text: 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. ',
+    title: 'Card Title',
+    subTitle: 'Card Subtitle',
+    linkName1: "Card Link",
+    width:'30rem'
+   }
+}
+
+ export const Card3 = {
+    args: {
+     text: 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. ',
+     title: 'Card Title',
+     width:'25rem',
+     linkName1: "Link",
+     linkName2:"Another Link" 
+    }
+ }

package/components/Card/Card.svelte

@@ -0,0 +1,123 @@
+<script>
+	import Button from '../Button/Button.svelte';
+	import { Card, CardBody, CardSubtitle, CardText, CardTitle } from 'sveltestrap';
+	export let image = '';
+	export let width = '35rem';
+	export let text = 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. '
+	export let title = 'Card Title';
+	export let subTitle = '';
+	export let linkName1 = "";
+	export let linkName2 = "";
+	export let link = "";
+	export let buttonLabel = "";
+</script>
+
+<Card style={`width:${width};`}>
+	{#if image}
+		<div>
+			<img src={image} class="card-img-top" alt="..." />
+		</div>
+	{/if}
+	<CardBody class="body">
+		<div>
+			{#if $$slots.title}
+				<CardTitle>
+					<div class="title">
+						<slot name="title" />
+					</div>
+				</CardTitle>
+			{:else}
+				<div class="title">
+					{title}
+				</div>
+			{/if}
+			{#if $$slots.subTitle}
+				<CardSubtitle>
+					<div class="sub-title">
+						<slot name="subTitle" />
+					</div>
+				</CardSubtitle>
+			{:else}
+				<div class="sub-title">
+					{subTitle}
+				</div>
+			{/if}
+
+			{#if $$slots.text}
+				<CardText>
+					<div class="text">
+						<slot name="text" />
+					</div>
+				</CardText>
+			{:else}
+			<CardText>
+				<div class="text">
+					{text}
+				</div>
+			</CardText>	
+			{/if}
+
+			{#if $$slots.link}
+			   <a href={link} class="card-link">
+				  <slot name="link"></slot>
+			   </a>
+			  {:else}
+			    <a href={link} class="card-link">{linkName1}</a> 
+				<a href={link} class="card-link">{linkName2}</a>			
+			{/if}
+
+			{#if $$slots.button}
+				<Button config ='primaryBtnMedium'>
+					<slot name="button" />
+				</Button>
+			{:else if buttonLabel}
+				<Button config ='primaryBtnMedium'>{buttonLabel}</Button>
+			{/if}
+		</div>
+	</CardBody>
+</Card>
+
+<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(.card) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.title {
+  color: #212529;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+}
+.sub-title {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+  color: #3AC82E;
+}
+.text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #6C757D;
+}
+.card-link {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #00AEE5;
+  text-decoration: none;
+  font-family: Roboto;
+}</style>

package/components/Card/Card.svelte.d.ts

@@ -0,0 +1,51 @@
+/** @typedef {typeof __propDef.props}  CardProps */
+/** @typedef {typeof __propDef.events}  CardEvents */
+/** @typedef {typeof __propDef.slots}  CardSlots */
+export default class Card extends SvelteComponentTyped<{
+    text?: string | undefined;
+    title?: string | undefined;
+    subTitle?: string | undefined;
+    link?: string | undefined;
+    image?: string | undefined;
+    width?: string | undefined;
+    linkName1?: string | undefined;
+    linkName2?: string | undefined;
+    buttonLabel?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    title: {};
+    subTitle: {};
+    text: {};
+    link: {};
+    button: {};
+}> {
+}
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        text?: string | undefined;
+        title?: string | undefined;
+        subTitle?: string | undefined;
+        link?: string | undefined;
+        image?: string | undefined;
+        width?: string | undefined;
+        linkName1?: string | undefined;
+        linkName2?: string | undefined;
+        buttonLabel?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        subTitle: {};
+        text: {};
+        link: {};
+        button: {};
+    };
+};
+export {};

package/components/CheckBox/Checkbox.scss

@@ -0,0 +1,32 @@
+@import '../variable.scss';
+
+:global(.inp-checkbox .form-check-input:checked) {
+    background-color: $secondary;
+    border-color: $secondary;
+    border: 1.8px solid $secondary !important;
+}
+
+:global(.inp-checkbox .form-check-input:focus) {
+    border-color: $secondary;
+    outline: 0;
+    box-shadow: none;
+}
+
+:global(.inp-checkbox .form-check-input[type=checkbox]) {
+    border-radius: 3px;
+    border: 1.8px solid $gray-500;
+}
+
+:global(.inp-checkbox .form-check-input:disabled:not(:checked)) {
+    background-color: $gray-300;
+    border-color: $gray-600;
+}
+
+:global(.form-check-label) {
+    text-transform: capitalize;
+    font-family: $bodyFonts;
+    font-style: normal;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 28px;
+}