Rename prop since Svelte have issue with kebab

# sveltejs/svelte#3852
electinth · May 13, 2021 · 77d31b3 · 77d31b3
1 parent 01ea5b8
commit 77d31b3
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -108,5 +108,5 @@ storybook-static
 pnpm-lock.yaml
 
 # Built files
-components
+components/*.js
 assets
diff --git a/example/index.html b/example/index.html
@@ -14,7 +14,7 @@
 
   <body>
     <elect-staging-banner></elect-staging-banner>
-    <elect-navbar></elect-navbar>
+    <elect-navbar title="Some Project"></elect-navbar>
     <elect-sharer></elect-sharer>
     <elect-footer></elect-footer>
   </body>

diff --git a/src/components/navbar/navbar.stories.svelte b/src/components/navbar/navbar.stories.svelte
@@ -1,16 +1,17 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
   import NavigationBar from './navbar.wc.svelte';
+
 </script>
 
 <Meta
   title="Components/navbar"
   component={NavigationBar}
   argTypes={{
-    titleText: { control: 'text' },
+    title: { control: 'text' },
     dark: { control: 'boolean' },
-    logoUrl: { control: 'text' },
-    showSlotInNewRowOnMobile: { control: 'boolean' },
+    logo: { control: 'text' },
+    mobilenewlineslot: { control: 'boolean' },
   }}
 />
 
@@ -25,13 +26,13 @@
 <Story
   name="With Title"
   args={{
-    titleText: 'CIVIL MOVEMENT 2020',
+    title: 'CIVIL MOVEMENT 2020',
   }}
 />
 
 <Story
   name="Custom Logo"
   args={{
-    logoUrl: 'https://via.placeholder.com/100x20',
+    logo: 'https://via.placeholder.com/100x20',
   }}
 />
diff --git a/src/components/navbar/navbar.wc.svelte b/src/components/navbar/navbar.wc.svelte
@@ -1,21 +1,22 @@
 <svelte:options tag="elect-navbar" />
 
 <script lang="ts">
-  export let titleText: string = '';
+  export let title: string = '';
   export let dark: boolean = false;
-  export let logoUrl: string = '';
-  export let showSlotInNewRowOnMobile: boolean = false;
+  export let logo: string = '';
+  export let mobilenewlineslot: boolean = false;
+
 </script>
 
 <div
-  class="flex bg-white {showSlotInNewRowOnMobile
-    ? 'flex-col md:flex-row'
+  class="flex bg-white md:flex-row {mobilenewlineslot
+    ? 'flex-col'
     : 'flex-row'} {dark ? 'bg-black' : 'bg-white'}"
 >
   <div class="flex my-auto p-3 h-10 md:(flex-1 h-12)">
     <a href="./" class="h-4 md:h-5 my-auto">
-      {#if logoUrl}
-        <img src={logoUrl} alt="ELECT" class="h-4 md:h-5" />
+      {#if logo}
+        <img src={logo} alt="ELECT" class="h-4 md:h-5" />
       {:else}
         <svg
           class="h-4 md:h-5 {dark ? 'text-white' : 'text-black'}"
@@ -55,16 +56,16 @@
       {/if}
     </a>
   </div>
-  {#if titleText}
+  {#if title}
     <div class="hidden md:flex">
       <a href="./" class="my-auto flex font-heading text-lg md:text-xl">
-        <span class={dark ? 'text-white' : 'text-black'}>{titleText}</span>
+        <span class={dark ? 'text-white' : 'text-black'}>{title}</span>
       </a>
     </div>
   {/if}
 
   <div
-    class="flex-1 flex {showSlotInNewRowOnMobile
+    class="flex-1 flex {mobilenewlineslot
       ? 'md:(justify-end pr-3)'
       : 'justify-end pr-3'}"
   >

diff --git a/src/components/sharer/sharer.stories.svelte b/src/components/sharer/sharer.stories.svelte
@@ -1,6 +1,7 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
   import SocialSharer from './sharer.wc.svelte';
+
 </script>
 
 <Meta
@@ -9,7 +10,7 @@
   argTypes={{
     url: { control: 'text' },
     light: { control: 'boolean' },
-    hideLabel: { control: 'boolean' },
+    hidelabel: { control: 'boolean' },
     vertical: { control: 'boolean' },
   }}
 />

diff --git a/src/components/sharer/sharer.wc.svelte b/src/components/sharer/sharer.wc.svelte
@@ -3,7 +3,7 @@
 <script lang="ts">
   export let url: string = '';
   export let light: boolean = false;
-  export let hideLabel: boolean = false;
+  export let hidelabel: boolean = false;
   export let vertical: boolean = false;
 
   $: encodedUrl = encodeURI(url || window.location.href);
@@ -58,6 +58,7 @@
       `,
     },
   ];
+
 </script>
 
 <div
@@ -66,7 +67,7 @@
     : 'flex-row space-x-4'}"
   class:text-white={light}
 >
-  {#if !hideLabel}
+  {#if !hidelabel}
     <div class="flex text-sm">
       <span class:m-auto={!vertical}>Share</span>
     </div>

diff --git a/src/components/staging-banner/staging-banner.stories.svelte b/src/components/staging-banner/staging-banner.stories.svelte
@@ -1,13 +1,14 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
   import StagingBanner from './staging-banner.wc.svelte';
+
 </script>
 
 <Meta
   title="Components/staging-banner"
   component={StagingBanner}
   argTypes={{
-    productionUrl: { control: 'text' },
+    productionurl: { control: 'text' },
   }}
 />
 
@@ -18,6 +19,6 @@
 <Story
   name="Primary"
   args={{
-    productionUrl: '',
+    productionurl: '',
   }}
 />
diff --git a/src/components/staging-banner/staging-banner.wc.svelte b/src/components/staging-banner/staging-banner.wc.svelte
@@ -1,7 +1,8 @@
 <svelte:options tag="elect-staging-banner" />
 
 <script lang="ts">
-  let productionUrl: string = '';
+  let productionurl: string = '';
+
 </script>
 
 <div class="bg-gray-600 text-white text-xs font-body px-4 py-2">
@@ -26,10 +27,10 @@
   <strong>คำเตือน</strong>
   เว็บไซต์นี้มีจุดประสงค์ในการทดสอบภายในทีม ELECT เท่านั้น อาจมีข้อมูลและการทำงานที่ไม่ถูกต้อง
   ทางทีมงานจะไม่รับผิดชอบข้อผิดพลาดใด ๆ ที่เกิดขึ้น
-  {#if productionUrl}
+  {#if productionurl}
     ท่านสามารถชมชิ้นงานจริงได้
     <a
-      href="${productionUrl}"
+      href="${productionurl}"
       target="_blank"
       rel="noopener noreferrer"
       class="underline"