Skip to content

Commit bb48026

Browse files
kampsykampsy
authored
Merge pull request #38 from kampsy/dev
feat: add pill variant and improve badge styling
2 parents 32be1c9 + 8e851ec commit bb48026

File tree

43 files changed

+555
-771
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+555
-771
lines changed

‎src/docs/data/badge.ts‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ import { Shield } from 'kampsy-ui/icons';
131131
<Badge icon={Shield} size="small" variant="green-subtle">green</Badge>
132132
<Badge icon={Shield} size="medium" variant="green-subtle" >green</Badge>
133133
<Badge icon={Shield} size="large" variant="green-subtle">green</Badge>
134-
</div>
134+
</div>
135135
136136
<div class="flex items-center gap-1 capitalize">
137137
<Badge icon={Shield} size="large" variant="teal" aria-label="icon large teal">teal</Badge>
@@ -147,4 +147,21 @@ import { Shield } from 'kampsy-ui/icons';
147147
<Badge icon={Shield} size="medium" variant="inverted" aria-label="icon medium inverted">inverted</Badge>
148148
<Badge icon={Shield} size="small" variant="inverted" aria-label="icon small inverted">inverted</Badge>
149149
</div>
150-
</div>`;
150+
</div>`;
151+
152+
export const badgePill = `
153+
import { Badge } from 'kampsy-ui';
154+
import { LogoSlackColor } from 'kampsy-ui/icons';
155+
156+
<div class="flex flex-col gap-4">
157+
<div class="flex items-center gap-2 capitalize">
158+
<Badge href="/badge#pill" size="small" variant="pill" aria-label="large pill">label</Badge>
159+
<Badge href="/badge#pill" size="medium" variant="pill" aria-label="medium pill">label</Badge>
160+
<Badge href="/badge#pill" size="large" variant="pill" aria-label="small pill">label</Badge>
161+
</div>
162+
<div class="flex items-center gap-2 capitalize">
163+
<Badge href="/badge#pill" icon={LogoSlackColor} size="small" variant="pill" aria-label="icon large pill">label</Badge>
164+
<Badge href="/badge#pill" icon={LogoSlackColor} size="medium" variant="pill" aria-label="icon medium pill">label</Badge>
165+
<Badge href="/badge#pill" icon={LogoSlackColor} size="large" variant="pill" aria-label="icon small pill">label</Badge>
166+
</div>
167+
</div>`;

‎src/docs/ui/linkH2.svelte‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script lang="ts">
2+
import type { Snippet } from 'svelte';
3+
import type { HTMLAnchorAttributes } from 'svelte/elements';
4+
import Link from '$lib/icons/link.svelte';
5+
6+
interface Props extends HTMLAnchorAttributes {
7+
href: string;
8+
children: Snippet;
9+
}
10+
11+
let { href, children, ...rest }: Props = $props();
12+
13+
// id for page navigation
14+
const id = href.split('#').pop();
15+
</script>
16+
17+
<a {href} {id} class="no-underline outline-none relative -ml-5 pl-5 inline-block group" {...rest}>
18+
<h2
19+
class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] font-semibold leading-[32px] tracking-[-0.96px]"
20+
>
21+
<div class="absolute left-0 top-[8px] outline-none opacity-0 group-hover:opacity-100">
22+
<div class="w-4 h-4">
23+
<Link />
24+
</div>
25+
</div>
26+
{@render children()}
27+
</h2>
28+
</a>

‎src/docs/utils/data.ts‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -46,43 +46,27 @@ export const asideData: Array<AsideT> = [
4646
},
4747
{
4848
name: 'badge',
49-
url: '/badge',
50-
badge: {
51-
name: 'updated',
52-
variant: 'purple'
53-
}
49+
url: '/badge'
5450
},
5551
{
5652
name: 'button',
57-
url: '/button',
58-
badge: {
59-
name: 'updated',
60-
variant: 'purple'
61-
}
53+
url: '/button'
6254
},
6355
{
6456
name: 'calendar',
6557
url: '/calendar'
6658
},
6759
{
6860
name: 'checkbox',
69-
url: '/checkbox',
70-
badge: {
71-
name: 'updated',
72-
variant: 'amber'
73-
}
61+
url: '/checkbox'
7462
},
7563
{
7664
name: 'choicebox',
7765
url: '/choicebox'
7866
},
7967
{
8068
name: 'collapse',
81-
url: '/collapse',
82-
badge: {
83-
name: 'updated',
84-
variant: 'purple'
85-
}
69+
url: '/collapse'
8670
},
8771
{
8872
name: 'description',
@@ -98,11 +82,7 @@ export const asideData: Array<AsideT> = [
9882
},
9983
{
10084
name: 'menu',
101-
url: '/menu',
102-
badge: {
103-
name: 'updated',
104-
variant: 'amber'
105-
}
85+
url: '/menu'
10686
},
10787
{
10888
name: 'modal',
@@ -116,6 +96,14 @@ export const asideData: Array<AsideT> = [
11696
name: 'pagination',
11797
url: '/pagination'
11898
},
99+
{
100+
name: 'pill',
101+
url: '/badge#pill',
102+
badge: {
103+
name: 'new',
104+
variant: 'green'
105+
}
106+
},
119107
{
120108
name: 'progress',
121109
url: '/progress'

‎src/lib/badge/badge.svelte‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts">
22
import type { Component, Snippet } from 'svelte';
3-
import type { HTMLAttributes } from 'svelte/elements';
3+
import type { HTMLAnchorAttributes } from 'svelte/elements';
44
5-
interface Props extends HTMLAttributes<HTMLSpanElement> {
5+
interface Props extends HTMLAnchorAttributes {
66
class?: string;
77
variant?:
88
| 'gray'
@@ -21,11 +21,12 @@
2121
| 'green-subtle'
2222
| 'teal'
2323
| 'teal-subtle'
24-
| 'inverted';
24+
| 'inverted'
25+
| 'pill';
2526
size?: 'small' | 'medium' | 'large';
2627
icon?: Component | undefined;
2728
children: Snippet;
28-
};
29+
}
2930
3031
let {
3132
class: klass = '',
@@ -64,7 +65,8 @@
6465
'teal-subtle':
6566
'bg-kui-light-teal-300 text-kui-light-teal-900 dark:bg-kui-dark-teal-300 dark:text-kui-dark-teal-900',
6667
inverted:
67-
'bg-kui-light-gray-1000 text-kui-light-gray-100 dark:bg-kui-dark-gray-1000 dark:text-kui-dark-gray-100'
68+
'bg-kui-light-gray-1000 text-kui-light-gray-100 dark:bg-kui-dark-gray-1000 dark:text-kui-dark-gray-100',
69+
pill: 'cursor-pointer border border-kui-light-gray-200 dark:border-kui-dark-gray-400 hover:bg-kui-light-gray-100 hover:dark:bg-kui-dark-gray-100 '
6870
};
6971
let variantClass = $derived.by(() => {
7072
return variantObj[variant];
@@ -114,9 +116,9 @@
114116
{/if}
115117
{/snippet}
116118

117-
<span class="flex items-center justify-center rounded-full {badgeClass} {klass}" {...rest} >
119+
<a class="flex items-center justify-center rounded-full {badgeClass} {klass}" {...rest}>
118120
<span class="flex items-center {iconXGap}">
119121
{@render iconSnip()}
120122
{@render children()}
121123
</span>
122-
</span>
124+
</a>

‎src/lib/icons/index.ts‎

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export { default as ArrowLeft } from './arrow-left.svelte';
22
export { default as ArrowRight } from './arrow-right.svelte';
3-
export { default as ArrowCircleUp } from './arrow-circle-up.svelte'
3+
export { default as ArrowCircleUp } from './arrow-circle-up.svelte';
44
export { default as Moon } from './moon.svelte';
55

66
export { default as ChevronLeft } from './chevron-left.svelte';
@@ -15,42 +15,45 @@ export { default as ChevronDownSmall } from './chevron-down-small.svelte';
1515
export { default as Sun } from './sun.svelte';
1616

1717
export { default as Shield } from './shield.svelte';
18-
export { default as ShieldGlobe } from './shield-globe.svelte'
18+
export { default as ShieldGlobe } from './shield-globe.svelte';
1919
export { default as ShieldCheck } from './shield-check.svelte';
2020

2121
export { default as Error } from './error.svelte';
22-
export { default as LoaderCircle } from './loader-circle.svelte'
23-
export { default as GridSquare } from './grid-square.svelte'
24-
export { default as ListUnordered } from './list-unordered.svelte'
25-
export { default as Check } from './check.svelte'
26-
export { default as CheckSquare } from './check-square.svelte'
27-
export { default as CheckSquareFill } from './check-square-fill.svelte'
28-
export { default as Hook } from './hook.svelte'
29-
export { default as Webhook } from './webhook.svelte'
30-
export { default as InformationFillSmall } from './information-fill-small.svelte'
31-
export { default as RotateCounterClockWise } from './rotate-counter-clockwise.svelte'
32-
33-
export { default as UserPlus } from './user-plus.svelte'
34-
export { default as Information } from './information.svelte'
35-
export { default as CheckCircle } from './check-circle.svelte'
36-
export { default as Warning } from './warning.svelte'
37-
export { default as LogoFacebook } from './logo-facebook.svelte'
38-
export { default as LogoTwitterX } from './logo-twitter-x.svelte'
39-
export { default as LogoTwitterXSmall } from './logo-twitter-x-small.svelte'
40-
export { default as LogoGithub } from './logo-github.svelte'
41-
export { default as LogoGitlab } from './logo-gitlab.svelte'
42-
export { default as LogoBitbucketColor } from './logo-bitbucket-color.svelte'
43-
export { default as MagnifyingGlass } from './magnifying-glass.svelte'
44-
45-
export { default as LockClosed } from './lock-closed.svelte'
46-
export { default as LockOpen } from './lock-open.svelte'
47-
export { default as LockClosedSmall } from './lock-closed-small.svelte'
48-
export { default as LockOpenSmall } from './lock-open-small.svelte'
49-
50-
export { default as MoreHorizontal } from './more-horizontal.svelte'
51-
export { default as Accessibility } from './accessibility.svelte'
52-
export { default as MenuAlt } from './menu-alt.svelte'
53-
export { default as Cross } from './cross.svelte'
54-
export { default as Star } from './star.svelte'
55-
export { default as StarFill } from './star-fill.svelte'
56-
export { default as Minus } from './minus.svelte'
22+
export { default as LoaderCircle } from './loader-circle.svelte';
23+
export { default as GridSquare } from './grid-square.svelte';
24+
export { default as ListUnordered } from './list-unordered.svelte';
25+
export { default as Check } from './check.svelte';
26+
export { default as CheckSquare } from './check-square.svelte';
27+
export { default as CheckSquareFill } from './check-square-fill.svelte';
28+
export { default as Hook } from './hook.svelte';
29+
export { default as Webhook } from './webhook.svelte';
30+
export { default as InformationFillSmall } from './information-fill-small.svelte';
31+
export { default as RotateCounterClockWise } from './rotate-counter-clockwise.svelte';
32+
33+
export { default as UserPlus } from './user-plus.svelte';
34+
export { default as Information } from './information.svelte';
35+
export { default as CheckCircle } from './check-circle.svelte';
36+
export { default as Warning } from './warning.svelte';
37+
export { default as LogoFacebook } from './logo-facebook.svelte';
38+
export { default as LogoTwitterX } from './logo-twitter-x.svelte';
39+
export { default as LogoTwitterXSmall } from './logo-twitter-x-small.svelte';
40+
export { default as LogoGithub } from './logo-github.svelte';
41+
export { default as LogoGitlab } from './logo-gitlab.svelte';
42+
export { default as LogoBitbucketColor } from './logo-bitbucket-color.svelte';
43+
export { default as MagnifyingGlass } from './magnifying-glass.svelte';
44+
45+
export { default as LockClosed } from './lock-closed.svelte';
46+
export { default as LockOpen } from './lock-open.svelte';
47+
export { default as LockClosedSmall } from './lock-closed-small.svelte';
48+
export { default as LockOpenSmall } from './lock-open-small.svelte';
49+
50+
export { default as MoreHorizontal } from './more-horizontal.svelte';
51+
export { default as Accessibility } from './accessibility.svelte';
52+
export { default as MenuAlt } from './menu-alt.svelte';
53+
export { default as Cross } from './cross.svelte';
54+
export { default as Star } from './star.svelte';
55+
export { default as StarFill } from './star-fill.svelte';
56+
export { default as Minus } from './minus.svelte';
57+
58+
export { default as LogoSlackColor } from './logo-slack-color.svelte';
59+
export { default as Link } from './link.svelte';

‎src/lib/icons/link.svelte‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<svg
2+
data-testid="geist-icon"
3+
height="100%"
4+
stroke-linejoin="round"
5+
style="color:currentColor"
6+
viewBox="0 0 16 16"
7+
width="100%"
8+
><path
9+
fill-rule="evenodd"
10+
clip-rule="evenodd"
11+
d="M8.46968 1.46968C10.1433 -0.203925 12.8567 -0.203923 14.5303 1.46968C16.2039 3.14329 16.2039 5.85674 14.5303 7.53034L12.0303 10.0303L10.9697 8.96968L13.4697 6.46968C14.5575 5.38186 14.5575 3.61816 13.4697 2.53034C12.3819 1.44252 10.6182 1.44252 9.53034 2.53034L7.03034 5.03034L5.96968 3.96968L8.46968 1.46968ZM11.5303 5.53034L5.53034 11.5303L4.46968 10.4697L10.4697 4.46968L11.5303 5.53034ZM1.46968 14.5303C3.14329 16.2039 5.85673 16.204 7.53034 14.5303L10.0303 12.0303L8.96968 10.9697L6.46968 13.4697C5.38186 14.5575 3.61816 14.5575 2.53034 13.4697C1.44252 12.3819 1.44252 10.6182 2.53034 9.53034L5.03034 7.03034L3.96968 5.96968L1.46968 8.46968C-0.203923 10.1433 -0.203925 12.8567 1.46968 14.5303Z"
12+
fill="currentColor"
13+
></path></svg
14+
>

‎src/lib/icons/logo-slack-color.svelte‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<svg
2+
data-testid="geist-icon"
3+
height="100%"
4+
stroke-linejoin="round"
5+
viewBox="0 0 16 16"
6+
width="100%"
7+
style="color: currentcolor;"
8+
><g clip-path="url(#clip0_872_3152)">
9+
<path
10+
d="M3.42681 10.0787C3.42681 10.9984 2.68351 11.7417 1.76382 11.7417C0.844137 11.7417 0.10083 10.9984 0.10083 10.0787C0.10083 9.15906 0.844137 8.41575 1.76382 8.41575H3.42681V10.0787ZM4.25831 10.0787C4.25831 9.15906 5.00162 8.41575 5.9213 8.41575C6.84099 8.41575 7.58429 9.15906 7.58429 10.0787V14.2362C7.58429 15.1559 6.84099 15.8992 5.9213 15.8992C5.00162 15.8992 4.25831 15.1559 4.25831 14.2362V10.0787Z"
11+
fill="#E01E5A"
12+
></path>
13+
<path
14+
d="M5.92121 3.40158C5.00152 3.40158 4.25821 2.65827 4.25821 1.73858C4.25821 0.818899 5.00152 0.075592 5.92121 0.075592C6.84089 0.075592 7.5842 0.818899 7.5842 1.73858V3.40158H5.92121ZM5.92121 4.24567C6.84089 4.24567 7.5842 4.98898 7.5842 5.90866C7.5842 6.82835 6.84089 7.57165 5.92121 7.57165H1.75113C0.831442 7.57165 0.0881348 6.82835 0.0881348 5.90866C0.0881348 4.98898 0.831442 4.24567 1.75113 4.24567H5.92121Z"
15+
fill="#36C5F0"
16+
></path>
17+
<path
18+
d="M12.5858 5.90866C12.5858 4.98898 13.3291 4.24567 14.2488 4.24567C15.1685 4.24567 15.9118 4.98898 15.9118 5.90866C15.9118 6.82835 15.1685 7.57165 14.2488 7.57165H12.5858V5.90866ZM11.7543 5.90866C11.7543 6.82835 11.011 7.57165 10.0913 7.57165C9.17165 7.57165 8.42834 6.82835 8.42834 5.90866V1.73858C8.42834 0.818899 9.17165 0.075592 10.0913 0.075592C11.011 0.075592 11.7543 0.818899 11.7543 1.73858V5.90866Z"
19+
fill="#2EB67D"
20+
></path>
21+
<path
22+
d="M10.0913 12.5732C11.011 12.5732 11.7543 13.3165 11.7543 14.2362C11.7543 15.1559 11.011 15.8992 10.0913 15.8992C9.17165 15.8992 8.42834 15.1559 8.42834 14.2362V12.5732H10.0913ZM10.0913 11.7417C9.17165 11.7417 8.42834 10.9984 8.42834 10.0787C8.42834 9.15906 9.17165 8.41575 10.0913 8.41575H14.2614C15.1811 8.41575 15.9244 9.15906 15.9244 10.0787C15.9244 10.9984 15.1811 11.7417 14.2614 11.7417H10.0913Z"
23+
fill="#ECB22E"
24+
></path>
25+
</g>
26+
<defs>
27+
<clipPath id="clip0_872_3152">
28+
<rect width="16" height="16" fill="white"></rect>
29+
</clipPath>
30+
</defs></svg
31+
>

‎src/lib/input/input.svelte‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { randomString } from '$lib/utils/random.js';
55
import type { HTMLAttributes } from 'svelte/elements';
66
7-
interface Props extends HTMLAttributes<HTMLInputElement> {
7+
interface Props extends HTMLAttributes<HTMLInputElement> {
88
id?: string | undefined;
99
name?: string | undefined;
1010
value?: string | undefined;
@@ -18,7 +18,7 @@
1818
spellcheck?: boolean | undefined;
1919
placeholder?: string | undefined;
2020
disabled?: boolean | undefined;
21-
};
21+
}
2222
let {
2323
id = undefined,
2424
name = undefined,
@@ -33,7 +33,7 @@
3333
spellcheck = false,
3434
placeholder = undefined,
3535
disabled = false,
36-
... rest
36+
...rest
3737
}: Props = $props();
3838
3939
// The focus and blur state of the input
@@ -59,21 +59,21 @@
5959
// Show the ring when the input is focused
6060
let ringClass = $derived.by(() => {
6161
if (disabled) {
62-
return `cursor-not-allowed border-kui-light-gray-400 dark:border-kui-dark-gray-400
63-
bg-kui-light-gray-100 dark:bg-kui-dark-gray-100 text-kui-light-gray-600 dark:text-kui-dark-gray-600
62+
return `cursor-not-allowed border-kui-light-gray-400 dark:border-kui-dark-gray-400
63+
bg-kui-light-gray-100 dark:bg-kui-dark-gray-100 text-kui-light-gray-600 dark:text-kui-dark-gray-600
6464
placeholder-kui-light-gray-600 dark:placeholder-kui-dark-gray-600`;
6565
}
6666
if (error) {
67-
return `border-kui-light-red-700 dark:border-kui-dark-red-700 hover:border-kui-light-red-700
68-
dark:hover:border-kui-dark-red-700 ring-4 ring-kui-light-red-400 dark:ring-kui-dark-red-400
67+
return `border-kui-light-red-700 dark:border-kui-dark-red-700 hover:border-kui-light-red-700
68+
dark:hover:border-kui-dark-red-700 ring-4 ring-kui-light-red-400 dark:ring-kui-dark-red-400
6969
hover:ring-kui-light-red-500 dark:hover:ring-kui-dark-red-500 `;
7070
}
7171
if (hasRing) {
72-
return `border-kui-light-gray-700 dark:border-kui-dark-gray-700 ring-4 ring-kui-light-gray-400
73-
dark:ring-kui-dark-gray-400 hover:border-kui-light-gray-700 dark:hover:border-kui-dark-gray-700
72+
return `border-kui-light-gray-700 dark:border-kui-dark-gray-700 ring-4 ring-kui-light-gray-400
73+
dark:ring-kui-dark-gray-400 hover:border-kui-light-gray-700 dark:hover:border-kui-dark-gray-700
7474
placeholder:text-kui-light-gray-600 dark:placeholder:text-kui-dark-gray-600`;
7575
}
76-
return `border-kui-light-gray-400 dark:border-kui-dark-gray-400 hover:border-kui-light-gray-500
76+
return `border-kui-light-gray-400 dark:border-kui-dark-gray-400 hover:border-kui-light-gray-500
7777
dark:hover:border-kui-dark-gray-500`;
7878
});
7979

0 commit comments

Comments
 (0)