fix: components

wetix · Dec 3, 2021 · afbdecb · afbdecb
1 parent f8122f1
commit afbdecb
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 55 deletions.
diff --git a/components/checkbox/types/index.d.ts b/components/checkbox/types/index.d.ts
@@ -1,9 +1,10 @@
 import type { SvelteComponentTyped } from "svelte/internal";
 
 export interface CheckboxProps {
+  id?: string;
   ref?: null | HTMLInputElement;
   label?: string;
-  id?: string;
+  class?: string;
   name?: string;
   value?: string;
   disabled?: boolean;

diff --git a/components/date-picker/src/DatePicker.svelte b/components/date-picker/src/DatePicker.svelte
@@ -21,21 +21,18 @@
   export let format = (v: Date) => v;
   export let disabledDate = (v: Date) => today > v;
 
+  const duration = 150;
+  let day = today.getDate();
+  let month = today.getMonth();
+  let year = today.getFullYear();
+  let focused = false;
   let open = false;
 
   window.addEventListener("click", () => {
     focused = false;
     open = false;
   });
 
-  let day = 1;
-  let month = 1;
-  let year = 2021;
-  let clientHeight = 0;
-  let focused = false;
-  const duration = 150;
-  // $: formatDate = format(value);
-
   const setDateOnlyIfValid = (value: string) => {
     if (!/^\d{4}\-\d{2}\-\d{2}$/.test(value)) return false;
     if (isValidDate(value)) {
@@ -96,7 +93,6 @@
   class:resp-date-picker--focused={focused}
   class:resp-date-picker--bordered={bordered}
   class:resp-date-picker--disabled={disabled}
-  bind:clientHeight
   on:click|stopPropagation={handleFocus}
 >
   <input
@@ -119,38 +115,15 @@
     role="img"
     aria-label="calendar"
     on:click={() => (open = true)}
-    ><svg
-      viewBox="64 64 896 896"
-      focusable="false"
-      data-icon="calendar"
-      width="16px"
-      height="16px"
-      fill="currentColor"
-      aria-hidden="true"
-      ><path
-        d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
-      /></svg
-    >
+    >{@html `<svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z" /></svg>`}
   </span>
   {#if open}
     <span
-      class="resp-date-picker-close-icon"
+      class="resp-date-picker__close-icon"
       role="button"
       on:click|stopPropagation={handleClear}
-    >
-      <svg
-        viewBox="64 64 896 896"
-        focusable="false"
-        data-icon="close-circle"
-        width="1em"
-        height="1em"
-        fill="currentColor"
-        aria-hidden="true"
-        ><path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        /></svg
-      ></span
-    >
+      >{@html `<svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" /></svg>`}
+    </span>
   {/if}
 
   {#if open}
@@ -166,14 +139,14 @@
   {/if}
 </div>
 
-<style lang="scss">
+<style lang="scss" global>
   .resp-date-picker {
     display: inline-flex;
     position: relative;
     padding: 0 8px;
     margin: 0;
     height: var(--input-height, 30px);
-    line-height: var(--input-height, 30px);
+    line-height: 1;
     background: #fff;
     align-items: center;
     box-sizing: border-box;
@@ -189,10 +162,8 @@
       border-color: #fc4451;
     }
 
-    &__calendar-icon {
-      svg {
-        display: block;
-      }
+    svg {
+      display: block;
     }
 
     &--focused {
@@ -232,7 +203,7 @@
       color: var(--text-color, #1a1b1c);
     }
 
-    &-close-icon {
+    &__close-icon {
       position: absolute;
       top: 50%;
       right: 8px;

diff --git a/components/header/src/Header.svelte b/components/header/src/Header.svelte
@@ -14,7 +14,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: var(--padding);
+    padding: var(--padding) 0;
 
     &__label {
       text-transform: capitalize;

diff --git a/components/loader/src/Loader.svelte b/components/loader/src/Loader.svelte
@@ -6,19 +6,15 @@
 </script>
 
 {#if fit === "viewport"}
-  <div class="responsive-ui-loader" in:fade out:fade>
-    <div
-      class="responsive-ui-loader__spinner responsive-ui-loader__spinner--{size}"
-    />
+  <div class="resp-loader" in:fade out:fade>
+    <div class="resp-loader__spinner resp-loader__spinner--{size}" />
   </div>
 {:else}
-  <div
-    class="responsive-ui-loader__spinner responsive-ui-loader__spinner--{size}"
-  />
+  <div class="resp-loader__spinner resp-loader__spinner--{size}" />
 {/if}
 
-<style lang="scss">
-  .responsive-ui-loader {
+<style lang="scss" global>
+  .resp-loader {
     position: fixed;
     top: 0;
     left: 0;

diff --git a/components/modal/src/Modal.svelte b/components/modal/src/Modal.svelte
@@ -40,7 +40,7 @@
     }px; max-height: ${maxHeight}px; ${style}`}
   >
     <slot name="header">
-      {#if title != null}
+      {#if title}
         <header class="resp-modal__header">
           <caption>{title}</caption>
           {#if closable}

diff --git a/stories/Checkbox.stories.svelte b/stories/Checkbox.stories.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import Checkbox from "../components/checkbox/src/Checkbox.svelte";
+</script>
+
+<Meta
+  title="Components/Checkbox"
+  component={Checkbox}
+  argTypes={{
+    content: { control: "text" },
+    onClick: { action: "onClick" },
+  }}
+/>
+
+<Template let:args>
+  <Checkbox {...args} on:click={args.onClick}>
+    {args.content}
+  </Checkbox>
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    content: "Apple",
+  }}
+/>
+
+<Story
+  name="Text Overflow"
+  args={{
+    content:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+  }}
+/>
diff --git a/stories/Header.stories.svelte b/stories/Header.stories.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import Header from "../components/header/src/Header.svelte";
+</script>
+
+<Meta
+  title="Components/Header"
+  component={Header}
+  argTypes={{
+    label: { control: "text" },
+  }}
+/>
+
+<Template let:args>
+  <Header {...args} on:click={args.onClick}>
+    <a href="/" on:click|preventDefault>view more</a>
+  </Header>
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    label: "Component Title",
+  }}
+/>
diff --git a/stories/Loader.stories.svelte b/stories/Loader.stories.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import Loader from "../components/loader/src/Loader.svelte";
+</script>
+
+<Meta
+  title="Components/Loader"
+  component={Loader}
+  argTypes={{
+    fit: {
+      control: { type: "select", options: ["none", "viewport"] },
+    },
+    size: {
+      control: { type: "select", options: ["small", "default", "large"] },
+    },
+  }}
+/>
+
+<Template let:args>
+  <Loader {...args} />
+</Template>
+
+<Story name="Default" />