Merge pull request #70 from Oli8/release/1.1.0

release/1.1.0

README.md

@@ -82,7 +82,7 @@ Any donation is greatly appreciated :heart:
 | Github Sponsor  | https://github.com/sponsors/Oli8           |
 | PayPal          | https://paypal.me/OliCrt                   |
 | Bitcoin         | 1Ez3Ts2WShUcbeGCjhZapdxVDK77DbYjdU         |
-| Ethereum        | 0x6cd3d316a6ee6d210894981e1fcc83a00a27ede2 |
+| Ethereum        | 0xc4364cafac87fd8085dc26af4a4a8c3bbad1bd3e |
 
 #### Components
 
@@ -103,6 +103,7 @@ Any donation is greatly appreciated :heart:
 - Select
 - Slider
 - Switch
+- Hero
 - Modal
 - Navbar
 - Pagination
@@ -111,4 +112,4 @@ Any donation is greatly appreciated :heart:
 - Skeleton
 - Table
 - Tabs
-- Toast
+- Toast

src/lib/components/Hero.svelte

@@ -0,0 +1,65 @@
+<section {...$$restProps}
+         class={classes}
+         class:border>
+  <div class="hero-body">
+    {#if $$slots.title}
+      <slot name="title" />
+    {:else}
+      <h2 class="hero-title">{title}</h2>
+    {/if}
+
+    {#if $$slots.textLead || textLead}
+      <p class="hero-text-lead">
+        {#if $$slots.textLead}
+          <slot name="textLead" />
+        {:else}
+          {textLead}
+        {/if}
+      </p>
+    {/if}
+
+    <div><slot /></div>
+  </div>
+</section>
+
+<script lang="ts">
+import type { PaperSize, PaperType } from '../types';
+import { computeClasses } from '../utils';
+
+type HeroSize = PaperSize | 'fullheight';
+
+export let type: PaperType = 'primary';
+export let size: HeroSize = 'default';
+export let border: boolean = true;
+export let title: string = '';
+export let textLead: string = '';
+
+$: classes = `hero background-${type}
+  ${$$restProps.class ?? ''}
+  ${computeClasses('hero', { size })}`;
+</script>
+
+<style lang="scss">
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1.5rem 3rem;
+  margin-bottom: 20px;
+  &-title {
+    margin-block: 1rem .5rem;
+  }
+  &-text-lead {
+    font-size: 1.25rem;
+  }
+  &-small {
+    padding: 0 1.5rem;
+  }
+  &-large {
+    padding: 5rem 5rem;
+  }
+  &-fullheight {
+    min-height: 100vh;
+  }
+}
+</style>

src/lib/components/Tabs/Tab.svelte

@@ -1,9 +1,9 @@
 <div {...$$restProps}
      class="{$$restProps.class ?? ''} content margin"
      class:content--active={active}
-     id={controlLabel}
+     id={getId(label, 'content')}
      aria-hidden={!active}
-     aria-labelledby={controlLabel}
+     aria-labelledby={getId(label, 'label')}
      role="tabpanel"
      tabindex={active ? 0 : -1}>
   {#if $$slots.header}
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { onMount, onDestroy, getContext } from 'svelte';
 import type { TabDataType } from './utils';
-import { genControlLabel } from './utils';
+import { getId } from './utils';
 
 export let label: string;
 
@@ -57,8 +57,6 @@ onDestroy(() => {
     tabs.filter(t => t.key !== key)
   ));
 });
-
-$: controlLabel = genControlLabel(label);
 </script>
 
 <style>

src/lib/components/Tabs/Tabs.svelte

@@ -5,8 +5,9 @@
     {@const selected = index == activeTab}
     <div class="tabs-label-header"
          class:tabs-label-header--active={selected}
+         id={getId(label, 'label')}
          aria-selected={selected}
-         aria-controls={genControlLabel(label)}
+         aria-controls={getId(label, 'content')}
          role="tab"
          tabindex={selected ? 0 : -1}
          on:click={showContent.bind(null, index)}>
@@ -27,7 +28,7 @@ import { onMount, setContext,
 import { writable } from 'svelte/store';
 import type { TabDataType } from './utils';
 import type { PaperFlexPlacement } from '../../types';
-import { genControlLabel } from './utils';
+import { getId } from './utils';
 
 export let activeTab: number | string = 0;
 export let placement: PaperFlexPlacement = 'spaces';

src/lib/components/Tabs/utils.ts

@@ -13,6 +13,6 @@ export interface TabDataType {
   tabs: Writable<iTab[]>;
 }
 
-export function genControlLabel(label: string): string {
-  return `paper-tab-${label}`;
+export function getId(label: string, part: 'label' | 'content'): string {
+  return `paper-tab-${label}-${part}`;
 }

src/lib/index.ts

@@ -19,6 +19,7 @@ import CloseButton from './components/CloseButton.svelte';
 import CopyButton from './components/CopyButton.svelte';
 import Skeleton from './components/Skeleton.svelte';
 import { Carousel, CarouselItem } from './components/Carousel';
+import Hero from './components/Hero.svelte';
 
 export {
   Button,
@@ -49,4 +50,5 @@ export {
   Skeleton,
   Carousel,
   CarouselItem,
+  Hero,
 };