Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add target and {...$$restProps} to all footer components #405

Merged
merged 2 commits into from
Oct 30, 2022
Merged

feat: add target and {...$$restProps} to all footer components #405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b272599
feat: add target and {...$$restProps} to all footer components
shinokada Oct 30, 2022
14fb425
docs: props update
shinokada Oct 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 43 additions & 43 deletions src/lib/avatar/Avatar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
<script lang="ts">
import classNames from 'classnames';
import classNames from 'classnames';

import AvatarPlaceholder from './Placeholder.svelte';
import Dot from './Dot.svelte';
import type { DotType } from '../types';
import AvatarPlaceholder from './Placeholder.svelte';
import Dot from './Dot.svelte';
import type { DotType } from '../types';

export let src: string = '';
export let href: string = '#';
export let src: string = '';
export let href: string = '#';

export let rounded: boolean = false;
export let border: boolean = false;
export let stacked: boolean = false;
export let rounded: boolean = false;
export let border: boolean = false;
export let stacked: boolean = false;

export let dot: DotType = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
export let alt: string = '';
export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
export let dot: DotType = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
export let alt: string = '';
export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';

const sizes = {
xs: 'w-6 h-6',
sm: 'w-8 h-8',
md: 'w-10 h-10',
lg: 'w-20 h-20',
xl: 'w-36 h-36'
};
const sizes = {
xs: 'w-6 h-6',
sm: 'w-8 h-8',
md: 'w-10 h-10',
lg: 'w-20 h-20',
xl: 'w-36 h-36'
};

let avatarClass;
$: avatarClass = classNames(
rounded ? 'rounded' : 'rounded-full',
border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500',
sizes[size],
stacked && 'border-2 -ml-4 border-white dark:border-gray-800',
'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300',
$$props.class
);
let avatarClass: string;
$: avatarClass = classNames(
rounded ? 'rounded' : 'rounded-full',
border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500',
sizes[size],
stacked && 'border-2 -ml-4 border-white dark:border-gray-800',
'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300',
$$props.class
);
</script>

<Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
{#if src}
<img {alt} {src} {...$$restProps} class={avatarClass} />
{:else if $$slots.default}
<svelte:element
this={href ? 'a' : 'div'}
{href}
{...$$restProps}
class="flex justify-center items-center text-xs font-medium {avatarClass}">
<slot />
</svelte:element>
{:else}
<svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
<AvatarPlaceholder {rounded} />
</svelte:element>
{/if}
{#if src}
<img {alt} {src} {...$$restProps} class={avatarClass} />
{:else if $$slots.default}
<svelte:element
this={href ? 'a' : 'div'}
{href}
{...$$restProps}
class="flex justify-center items-center text-xs font-medium {avatarClass}">
<slot />
</svelte:element>
{:else}
<svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
<AvatarPlaceholder {rounded} />
</svelte:element>
{/if}
</Dot>
34 changes: 17 additions & 17 deletions src/lib/footer/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<script lang="ts">
import classNames from 'classnames';
export let customClass: string = '';
export let footerType: 'custom' | 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
// using classNames dynamic class names, https://github.com/JedWatson/classnames#dynamic-class-names-with-es2015
import classNames from 'classnames';
export let customClass: string = '';
export let footerType: 'custom' | 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
// using classNames dynamic class names, https://github.com/JedWatson/classnames#dynamic-class-names-with-es2015
</script>

<footer
class={classNames(
{
'bg-gray-800': footerType === 'sitemap',
'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
footerType === 'default',
[`${customClass}`]: footerType === 'custom'
},
$$props.class
)}
>
<slot />
{...$$restProps}
class={classNames(
{
'bg-gray-800': footerType === 'sitemap',
'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
footerType === 'default',
[`${customClass}`]: footerType === 'custom'
},
$$props.class
)}>
<slot />
</footer>
30 changes: 15 additions & 15 deletions src/lib/footer/FooterBrand.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<script lang="ts">
import classNames from 'classnames';
export let aClass: string = 'flex items-center';
export let spanClass: string =
'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
export let imgClass: string = 'mr-3 h-8';
export let href: string = '';
export let src: string = '';
export let alt: string = '';
export let name: string = '';
import classNames from 'classnames';
export let aClass: string = 'flex items-center';
export let spanClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
export let imgClass: string = 'mr-3 h-8';
export let href: string = '';
export let src: string = '';
export let alt: string = '';
export let name: string = '';
export let target: string | undefined = undefined;
</script>

{#if href}
<a {href} class={classNames(aClass, $$props.class)}>
<img {src} class={imgClass} {alt} />
<span class={spanClass}>{name}</span>
<slot />
</a>
<a {...$$restProps} {href} {target} class={classNames(aClass, $$props.class)}>
<img {src} class={imgClass} {alt} />
<span class={spanClass}>{name}</span>
<slot />
</a>
{:else}
<img {src} class={imgClass} {alt} />
<img {...$$restProps} {src} class={imgClass} {alt} />
{/if}
31 changes: 16 additions & 15 deletions src/lib/footer/FooterCopyright.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
<script lang="ts">
import classNames from 'classnames';
export let spanClass: string = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
export let aClass: string = 'hover:underline';
export let year: number = new Date().getFullYear();
export let href: string = '';
export let by: string = '';
import classNames from 'classnames';
export let spanClass: string = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
export let aClass: string = 'hover:underline';
export let year: number = new Date().getFullYear();
export let href: string = '';
export let by: string = '';
export let target: string | undefined = undefined;
</script>

<span class={classNames(spanClass, $$props.class)}>
&copy; {year}
{#if href}
<a {href} class={aClass}>
{by}
</a>
{:else}
<span class="ml-1">{by}</span>
{/if}
. All Rights Reserved.
&copy; {year}
{#if href}
<a {...$$restProps} {href} {target} class={aClass}>
{by}
</a>
{:else}
<span class="ml-1">{by}</span>
{/if}
. All Rights Reserved.
</span>
17 changes: 9 additions & 8 deletions src/lib/footer/FooterIcon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<script lang="ts">
import classNames from 'classnames';
export let href: string = '';
export let ariaLabel: string = '';
export let aClass: string = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
import classNames from 'classnames';
export let href: string = '';
export let ariaLabel: string = '';
export let aClass: string = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
export let target: string | undefined = undefined;
</script>

{#if href}
<a {href} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
<slot />
</a>
<a {...$$restProps} {href} {target} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
<slot />
</a>
{:else}
<slot />
<slot />
{/if}
16 changes: 9 additions & 7 deletions src/lib/footer/FooterLink.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<script lang="ts">
import classNames from 'classnames';
export let liClass: string = 'mr-4 last:mr-0 md:mr-6';
export let aClass: string = 'hover:underline';
export let href: string = '';
import A from '$lib/typography/A.svelte';
import classNames from 'classnames';
export let liClass: string = 'mr-4 last:mr-0 md:mr-6';
export let aClass: string = 'hover:underline';
export let href: string = '';
export let target: string | undefined = undefined;
</script>

<li class={classNames(liClass, $$props.class)}>
<a {href} class={aClass}>
<slot />
</a>
<a {...$$restProps} {href} class={aClass} {target}>
<slot />
</a>
</li>
2 changes: 1 addition & 1 deletion src/routes/props/FooterBrand.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"props":[["aClass","string ","'flex items-center'"],["spanClass","string ","'self-center text-2xl font-semibold whitespace-nowrap dark:text-white'"],["imgClass","string ","'mr-3 h-8'"],["href","string ","''"],["src","string ","''"],["alt","string ","''"],["name","string ","''"]]}
{"props":[["aClass","string ","'flex items-center'"],["spanClass","string ","'self-center text-2xl font-semibold whitespace-nowrap dark:text-white'"],["imgClass","string ","'mr-3 h-8'"],["href","string ","''"],["src","string ","''"],["alt","string ","''"],["name","string ","''"],["target","string | undefined ","undefined"]]}
2 changes: 1 addition & 1 deletion src/routes/props/FooterCopyright.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"props":[["spanClass","string ","'block text-sm text-gray-500 sm:text-center dark:text-gray-400'"],["aClass","string ","'hover:underline'"],["year","number ","new Date().getFullYear()"],["href","string ","''"],["by","string ","''"]]}
{"props":[["spanClass","string ","'block text-sm text-gray-500 sm:text-center dark:text-gray-400'"],["aClass","string ","'hover:underline'"],["year","number ","new Date().getFullYear()"],["href","string ","''"],["by","string ","''"],["target","string | undefined ","undefined"]]}
2 changes: 1 addition & 1 deletion src/routes/props/FooterIcon.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"props":[["href","string ","''"],["ariaLabel","string ","''"],["aClass","string ","'text-gray-500 hover:text-gray-900 dark:hover:text-white'"]]}
{"props":[["href","string ","''"],["ariaLabel","string ","''"],["aClass","string ","'text-gray-500 hover:text-gray-900 dark:hover:text-white'"],["target","string | undefined ","undefined"]]}
2 changes: 1 addition & 1 deletion src/routes/props/FooterLink.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"props":[["liClass","string ","'mr-4 last:mr-0 md:mr-6'"],["aClass","string ","'hover:underline'"],["href","string ","''"]]}
{"props":[["liClass","string ","'mr-4 last:mr-0 md:mr-6'"],["aClass","string ","'hover:underline'"],["href","string ","''"],["target","string | undefined ","undefined"]]}
2 changes: 1 addition & 1 deletion src/routes/props/Navbar.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"props":[["navClass","string ","'px-2 sm:px-4 py-2.5 w-full'"],["navDivClass","string ","'mx-auto flex flex-wrap justify-between items-center '"],["fluid","boolean ","true"],["color","string ","'navbar'"]]}
{"props":[["navClass","string ","'px-2 sm:px-4 py-2.5 w-full'"],["navDivClass","string ","'mx-auto flex flex-wrap justify-between items-center '"],["fluid","boolean ","true"],["color","| 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'default' | 'purple' | 'pink' | 'blue' | 'light' | 'dark' | 'dropdown' | 'navbar' | 'navbarUl' | 'form' | 'none' ","'navbar'"]]}
2 changes: 1 addition & 1 deletion src/routes/props/Toast.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"props":[["color","Colors ","'blue'"],["simple","boolean ","false"],[" open ","boolean"," true"],["divClass","string ","'w-full max-w-xs p-4'"]]}
{"props":[["color","| 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'default' | 'purple' | 'pink' | 'blue' | 'light' | 'dark' | 'dropdown' | 'navbar' | 'navbarUl' | 'form' | 'none' ","'blue'"],["simple","boolean ","false"],[" open ","boolean"," true"],["divClass","string ","'w-full max-w-xs p-4'"]]}