fix: update Marquee role, page and test

themesberg · Sep 7, 2023 · d6bd868 · d6bd868
1 parent 4261cb0
commit d6bd868
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -418,6 +418,10 @@
       "types": "./dist/list-group/ListgroupItem.svelte.d.ts",
       "svelte": "./dist/list-group/ListgroupItem.svelte"
     },
+    "./Marquee.svelte": {
+      "types": "./dist/marquee/Marquee.svelte.d.ts",
+      "svelte": "./dist/marquee/Marquee.svelte"
+    },
     "./MegaMenu.svelte": {
       "types": "./dist/megamenu/MegaMenu.svelte.d.ts",
       "svelte": "./dist/megamenu/MegaMenu.svelte"
@@ -751,4 +755,4 @@
       "svelte": "./dist/video/Video.svelte"
     }
   }
-}
+}
diff --git a/src/lib/marquee/Marquee.svelte b/src/lib/marquee/Marquee.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-
+  import { twMerge } from 'tailwind-merge';
   export let speed: number = 1;
   export let hoverSpeed: number = 1;
   export let shadow: boolean = false;
@@ -15,6 +15,8 @@
     before:shadow-[-10px_0_50px_65px_rgba(256,256,256,1)] dark:after:shadow-[10px_0_50px_65px_rgba(16,24,39,1)]
     dark:before:shadow-[-10px_0_50px_65px_rgba(16,24,39,1)]`;
 
+  let divCls: string = twMerge("relative flex overflow-hidden w-[100%]", shadow ? shadowClass : '', $$props.class)
+
   onMount(() => {
     intervalId = setInterval(() => {
       if (Math.abs(offset) >= marquee.offsetWidth) {
@@ -31,7 +33,8 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  class="relative flex overflow-hidden w-[100%] {shadow ? shadowClass : ''}"
+  class={divCls}
+  role="banner"
   on:mouseover={() => (isHovering = true)}
   on:mouseleave={() => (isHovering = false)}>
   <div
@@ -44,3 +47,12 @@
     <slot />
   </div>
 </div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let speed: number = 1;
+@prop export let hoverSpeed: number = 1;
+@prop export let shadow: boolean = false;
+-->
diff --git a/src/routes/component-data/Marquee.json b/src/routes/component-data/Marquee.json
@@ -0,0 +1 @@
+{"name":"Marquee","slots":[],"events":[],"props":[["speed","number","1"],["hoverSpeed","number","1"],["shadow","boolean","false"]]}
diff --git a/src/routes/docs/extend/marquee.md b/src/routes/docs/extend/marquee.md
@@ -28,11 +28,11 @@ description: Use Marquee Banner to display a series of items
   import { Marquee } from 'flowbite-svelte'
 </script>
 
-<Marquee speed={1}>
-    <img class="w-8 h-6" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
-    <img class="w-8 h-6" src="https://www.flowbite-react.com/favicon.svg" />
-    <img class="w-8 h-6" src="https://flowbite-vue.com/assets/logo.svg" />
-    <img class="w-8 h-6" src="https://flowbite.com/docs/images/logo.svg" />
+<Marquee speed={1} class="py-16">
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://www.flowbite-react.com/favicon.svg" />
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-vue.com/assets/logo.svg" />
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite.com/docs/images/logo.svg" />
 </Marquee>
 ```
 
@@ -43,11 +43,11 @@ description: Use Marquee Banner to display a series of items
   import { Marquee } from 'flowbite-svelte'
 </script>
 
-<Marquee speed={1} hoverSpeed={0.5}>
-    <img class="w-8 h-6" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
-    <img class="w-8 h-6" src="https://www.flowbite-react.com/favicon.svg" />
-    <img class="w-8 h-6" src="https://flowbite-vue.com/assets/logo.svg" />
-    <img class="w-8 h-6" src="https://flowbite.com/docs/images/logo.svg" />
+<Marquee speed={1} hoverSpeed={0.5} class="py-16">
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://www.flowbite-react.com/favicon.svg" />
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-vue.com/assets/logo.svg" />
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite.com/docs/images/logo.svg" />
 </Marquee>
 ```
 
@@ -58,11 +58,11 @@ description: Use Marquee Banner to display a series of items
   import { Marquee } from 'flowbite-svelte'
 </script>
 
-<Marquee shadow>
-    <img class="w-8 h-6" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
-    <img class="w-8 h-6" src="https://www.flowbite-react.com/favicon.svg" />
-    <img class="w-8 h-6" src="https://flowbite-vue.com/assets/logo.svg" />
-    <img class="w-8 h-6" src="https://flowbite.com/docs/images/logo.svg" />
+<Marquee shadow class="py-16">
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://www.flowbite-react.com/favicon.svg" />
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-vue.com/assets/logo.svg" />
+    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite.com/docs/images/logo.svg" />
 </Marquee>
 ```
 

diff --git a/tests/extend.spec.ts b/tests/extend.spec.ts
@@ -17,3 +17,9 @@ test('Step indicator page should have h1', async ({ page }) => {
   await page.goto('/docs/extend/step-indicator');
   expect(await page.textContent('h1')).toBe('Svelte Step Indicator');
 });
+
+// marquee
+test('Marquee page should have h1', async ({ page }) => {
+  await page.goto('/docs/extend/marquee');
+  expect(await page.textContent('h1')).toBe('Svelte Marquee Banner - Flowbite');
+});