Skip to content

Commit 9f6b94f

Browse files
shinokadashinokada
committed
docs: code builder to span page
1 parent 3b862b5 commit 9f6b94f

File tree

3 files changed

+97
-61
lines changed

3 files changed

+97
-61
lines changed

‎src/lib/typography/span/theme.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const span = tv({
2727
blueToGreen: 'text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-teal-500 to-green-400',
2828
orangeToPurple: 'text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-pink-500 to-purple-500',
2929
yellowToRed: 'text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 via-indigo-400 to-red-600',
30-
normal: 'font-semibold text-gray-900 dark:text-white'
30+
none: ''
3131
},
3232
highlight: {
3333
blue: 'text-blue-600 dark:text-blue-500',
@@ -42,7 +42,8 @@ export const span = tv({
4242
cyan: 'text-cyan-600 dark:text-cyan-500',
4343
fuchsia: 'text-fuchsia-600 dark:text-fuchsia-500',
4444
amber: 'text-amber-600 dark:text-amber-500',
45-
lime: 'text-lime-600 dark:text-lime-500'
45+
lime: 'text-lime-600 dark:text-lime-500',
46+
none: ''
4647
},
4748
decoration: {
4849
solid: 'underline decoratio-solid',
@@ -65,7 +66,8 @@ export const span = tv({
6566
cyan: 'underline decoration-cyan-400 dark:decoration-cyan-600',
6667
fuchsia: 'underline decoration-fuchsia-400 dark:decoration-fuchsia-600',
6768
amber: 'underline decoration-amber-400 dark:decoration-amber-600',
68-
lime: 'underline decoration-lime-400 dark:decoration-lime-600'
69+
lime: 'underline decoration-lime-400 dark:decoration-lime-600',
70+
none: 'decoration-none'
6971
},
7072
decorationThickness: {
7173
'1': 'underline decoration-1',

‎src/routes/typography/span/+page.svelte‎

Lines changed: 89 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { P, Span, Button, Label, Radio } from '$lib';
2+
import { P, Span, span, Button, Label, Radio } from '$lib';
33
import HighlightCompo from '../../utils/HighlightCompo.svelte';
44
import CodeWrapper from '../../utils/CodeWrapper.svelte';
55
import H1 from '../../utils/H1.svelte';
@@ -12,83 +12,112 @@
1212
});
1313
1414
let spanItalic: Span['italic'] = $state(false);
15+
const changeItalic = () => {
16+
spanItalic = !spanItalic;
17+
}
1518
let spanUnderline: Span['underline'] = $state(false);
19+
const changeUnderline = () => {
20+
spanUnderline = !spanUnderline;
21+
spanDecorationColor = 'none';
22+
spanDecorationThickness = '0';
23+
spanDecoration = 'none';
24+
spanLinethrough = false;
25+
}
1626
let spanLinethrough: Span['linethrough'] = $state(false);
27+
const changeLinethrough = () => {
28+
spanLinethrough = !spanLinethrough;
29+
spanUnderline = false;
30+
spanDecorationColor = 'none';
31+
spanDecorationThickness = '0';
32+
spanDecoration = 'none';
33+
spanGradient = 'none';
34+
}
1735
let spanUppercase: Span['uppercase'] = $state(false);
18-
const gradients = ['skyToEmerald', 'purpleToBlue', 'tealToLime', 'redToYellow', 'indigoToCyan', 'fuchsiaToRose', 'amberToEmerald', 'violetToRed', 'blueToGreen', 'orangeToPurple', 'yellowToRed', 'normal'];
19-
let spanGradient: Span['gradient'] = $state('normal');
20-
let spanHighlight: Span['highlight'] = $state('blue');
21-
const highlights = ['blue', 'red', 'green', 'yellow', 'purple', 'pink', 'indigo', 'teal', 'orange', 'cyan', 'fuchsia', 'amber', 'lime'];
22-
let spanDecoration: Span['decoration'] = $state('solid');
23-
const decorations = ['solid', 'double', 'dotted', 'dashed', 'wavy', 'none'];
24-
let spanDecorationColor: Span['decorationColor'] = $state('blue');
25-
const decorationColors = ['blue', 'red', 'green', 'yellow', 'purple', 'pink', 'indigo', 'teal', 'orange', 'cyan', 'fuchsia', 'amber', 'lime'];
26-
let spanDecorationThickness: Span['decorationThickness'] = $state('1');
27-
const docrationThickness = ['1', '2', '4', '8', '0'];
28-
</script>
36+
const changeUppercase = () => {
37+
spanUppercase = !spanUppercase;
38+
}
39+
const gradients = Object.keys(span.variants.gradient);
40+
let spanGradient: Span['gradient'] = $state('none');
41+
let spanHighlight: Span['highlight'] = $state('none');
42+
const highlights = Object.keys(span.variants.highlight);
43+
let spanDecoration: Span['decoration'] = $state('none');
44+
const decorations = Object.keys(span.variants.decoration);
45+
let spanDecorationColor: Span['decorationColor'] = $state('none');
46+
const decorationColors = Object.keys(span.variants.decorationColor);
47+
let spanDecorationThickness: Span['decorationThickness'] = $state('0');
48+
const docrationThickness = Object.keys(span.variants.decorationThickness);
2949
30-
<H1>Span</H1>
50+
// code generator
51+
let generatedCode = $derived(
52+
(() => {
53+
let props = [];
54+
// italic, underline, linethrough, uppercase, gradient, highlight, decoration, decorationColor, decorationThickness, className
55+
if ( spanItalic ) props.push(` italic`);
56+
if ( spanUnderline ) props.push(` underline`);
57+
if ( spanLinethrough ) props.push(` linethrough`);
58+
if ( spanUppercase ) props.push(` uppercase`);
59+
if ( spanGradient !== 'none' ) props.push(` gradient="${spanGradient}"`);
60+
if ( spanHighlight !== 'none' ) props.push(` highlight="${spanHighlight}"`);
61+
if ( spanDecoration !== 'none' ) props.push(` decoration="${spanDecoration}"`);
62+
if ( spanDecorationColor !== 'none' ) props.push(` decorationColor="${spanDecorationColor}"`);
63+
if ( spanDecorationThickness !== '0' ) props.push(` decorationThickness="${spanDecorationThickness}"`);
3164
32-
<H2>Italic, underline, linethrough, and uppercase</H2>
33-
<CodeWrapper>
34-
<P>
35-
Track work across the enterprise through an open, collaborative platform.
36-
<Span italic={spanItalic} underline={spanUnderline} class="text-red-500">Link issues across Jira</Span> and ingest data from other <Span linethrough={spanLinethrough} uppercase={spanUppercase} class="text-blue-500">software development</Span> tools, so your IT support and operations teams have richer contextual information ...
37-
</P>
38-
<div class="mt-4 flex flex-wrap items-center gap-2 rtl:space-x-reverse">
39-
<Button onclick={() => (spanItalic = !spanItalic)}>Italic</Button>
40-
<Button onclick={() => (spanUnderline = !spanUnderline)}>Underline</Button>
41-
<Button onclick={() => (spanLinethrough = !spanLinethrough)}>Linethrough</Button>
42-
<Button onclick={() => (spanUppercase = !spanUppercase)}>Uppercase</Button>
43-
</div>
44-
</CodeWrapper>
45-
<HighlightCompo code={modules['./md/italic.md'] as string} />
65+
66+
const propsString = props.length > 0 ? props.map((prop) => `\n ${prop}`).join('') + '\n' : '';
4667
47-
<H2>Gradient</H2>
48-
<CodeWrapper>
49-
<P size="2xl" weight="bold"><Span gradient={spanGradient}>Track work across the enterprise through an open, collaborative platform.</Span></P>
50-
<div class="mt-4 flex flex-wrap space-x-4">
51-
<Label class="mb-4 w-full font-bold">Gradient:</Label>
52-
{#each gradients as gradient}
53-
<Radio labelClass="w-32 my-1" name="span_gradient" bind:group={spanGradient} value={gradient}>{gradient}</Radio>
54-
{/each}
55-
</div>
56-
</CodeWrapper>
57-
<HighlightCompo code={modules['./md/gradient.md'] as string} />
68+
return `<P>Lorem ipsum dolor sit amet.
69+
<Span${propsString}>Eligendi, nam ea eum provident.</Span>
70+
Fugiat vitae possimus ipsum a unde, at laboriosam.
71+
</P>`;
72+
})()
73+
);
74+
</script>
5875

59-
<H2>Highlight</H2>
76+
<H1>Span</H1>
77+
<HighlightCompo code={modules['./md/setup.md'] as string} />
78+
79+
<H2>Interactive Span Builder</H2>
6080
<CodeWrapper>
61-
<P size="2xl" weight="bold"><Span highlight={spanHighlight}>Track work across the enterprise through an open, collaborative platform.</Span></P>
62-
<div class="mt-4 flex flex-wrap space-x-4">
81+
<P size="xl" weight="bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. <Span italic={spanItalic} underline={spanUnderline} linethrough={spanLinethrough} uppercase={spanUppercase} gradient={spanGradient} decoration={spanDecoration} decorationColor={spanDecorationColor} decorationThickness={spanDecorationThickness} highlight={spanHighlight} >Eligendi, nam ea eum provident.</Span> Fugiat vitae possimus ipsum a unde, at laboriosam.</P>
82+
<div class="flex flex-wrap space-x-4 mb-4 mt-4">
6383
<Label class="mb-4 w-full font-bold">Highlight:</Label>
6484
{#each highlights as highlight}
65-
<Radio labelClass="w-32 my-1" name="span_highlight" bind:group={spanHighlight} color={highlight as Span['color']} value={highlight}>{highlight}</Radio>
85+
<Radio labelClass="w-32 my-1" name="span_highlight" bind:group={spanHighlight} onchange={()=> spanGradient = 'none'} color={highlight as Span['color']} value={highlight}>{highlight}</Radio>
6686
{/each}
6787
</div>
68-
</CodeWrapper>
69-
<HighlightCompo code={modules['./md/highlight.md'] as string} />
70-
71-
<H2>Decoration</H2>
72-
<CodeWrapper>
73-
<P size="2xl" weight="bold"><Span decoration={spanDecoration} decorationColor={spanDecorationColor} decorationThickness={spanDecorationThickness}>Track work across the enterprise through an open, collaborative platform.</Span></P>
74-
<div class="mt-8 flex flex-wrap space-x-4">
88+
<div class="flex flex-wrap space-x-4 mb-4">
89+
<Label class="mb-4 w-full font-bold">Decoration color:</Label>
90+
{#each decorationColors as color}
91+
<Radio labelClass="w-32 my-1" name="p_decoration_color" bind:group={spanDecorationColor} onchange={()=> {spanUnderline = false; spanLinethrough = false}} color={color as Span['decorationColor']} value={color}>{color}</Radio>
92+
{/each}
93+
</div>
94+
<div class="flex flex-wrap space-x-4 mb-4">
7595
<Label class="mb-4 w-full font-bold">Decoration:</Label>
7696
{#each decorations as decoration}
77-
<Radio labelClass="w-32 my-1" name="span_decoration" bind:group={spanDecoration} value={decoration}>{decoration}</Radio>
97+
<Radio labelClass="w-32 my-1" name="span_decoration" bind:group={spanDecoration} onchange={()=> {spanUnderline = false; spanLinethrough = false}} value={decoration}>{decoration}</Radio>
7898
{/each}
7999
</div>
80-
<div class="mt-4 flex flex-wrap space-x-4">
81-
<Label class="mb-4 w-full font-bold">Decoration color:</Label>
82-
{#each decorationColors as color}
83-
<Radio labelClass="w-32 my-1" name="p_decoration_color" bind:group={spanDecorationColor} color={color as Span['decorationColor']} value={color}>{color}</Radio>
100+
<div class="flex flex-wrap space-x-4">
101+
<Label class="mb-4 w-full font-bold">Decoration thickness:</Label>
102+
{#each docrationThickness as thickness}
103+
<Radio labelClass="w-32 my-1" name="span_decoration_thickness" bind:group={spanDecorationThickness} onchange={()=> {spanUnderline = false; spanLinethrough = false}} value={thickness}>{thickness}</Radio>
84104
{/each}
85105
</div>
86106
<div class="mt-4 flex flex-wrap space-x-4">
87-
<Label class="mb-4 w-full font-bold">Decoration thickness:</Label>
88-
{#each docrationThickness as thickness}
89-
<Radio labelClass="w-32 my-1" name="span_decoration_thickness" bind:group={spanDecorationThickness} value={thickness}>{thickness}</Radio>
107+
<Label class="mb-4 w-full font-bold">Gradient:</Label>
108+
{#each gradients as gradient}
109+
<Radio labelClass="w-32 my-1" name="span_gradient" bind:group={spanGradient} onchange={()=>spanHighlight = 'none'} value={gradient}>{gradient}</Radio>
90110
{/each}
91111
</div>
112+
<div class="mt-4 flex flex-wrap items-center gap-2 rtl:space-x-reverse">
113+
<Button class="w-32" onclick={changeItalic}>{spanItalic ? 'No italic' : 'Italic'}</Button>
114+
<Button class="w-32" color="amber" onclick={changeUnderline}>{ spanUnderline ? 'No underline' : 'Underline'}</Button>
115+
<Button class="w-40" color="violet" onclick={changeLinethrough}>{spanLinethrough ? 'No linethrough' : 'Linethrough '}</Button>
116+
<Button class="w-40" color="blue" onclick={changeUppercase}>{spanUppercase ? 'No uppercase' : 'Uppercase'}</Button>
117+
</div>
118+
{#snippet codeblock()}
119+
<HighlightCompo code={generatedCode} />
120+
{/snippet}
92121
</CodeWrapper>
93122

94123
<H2>Opacity</H2>
@@ -99,5 +128,7 @@
99128
<P size="xl"><Span class="text-blue-600/75 dark:text-blue-500/75">Flowbite app will help you</Span> improve yourself by analysing your everyday life.</P>
100129
<P size="xl"><Span class="text-blue-600/50 dark:text-blue-500/50">Flowbite app will help you</Span> improve yourself by analysing your everyday life.</P>
101130
<P size="xl"><Span class="text-blue-600/25 dark:text-blue-500/25">Flowbite app will help you</Span> improve yourself by analysing your everyday life.</P>
131+
{#snippet codeblock()}
132+
<HighlightCompo code={modules['./md/opacity.md'] as string} />
133+
{/snippet}
102134
</CodeWrapper>
103-
<HighlightCompo code={modules['./md/opacity.md'] as string} />

‎src/routes/typography/span/md/setup.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script lang="ts">
2+
import { Span, P } from 'svelte-5-ui-lib'
3+
</script>

0 commit comments

Comments
 (0)