Skip to content

Commit f2c3b90

Browse files
jesperorbjesperorb
committed
fix: merge layouts
1 parent c00f397 commit f2c3b90

28 files changed

+657
-830
lines changed

‎src/lib/components/Sidebar.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
<li aria-hidden="true" class="menu-heading"><strong>Playground</strong></li>
7373
<Spacing size={1} />
7474
<li>
75-
<a href="/Playground?locale={locale}">Playground</a>
75+
<a href="/Playground?locale={locale}" class:active={path.includes("Playground")}>Playground</a>
7676
</li>
7777
<Spacing />
7878
<li aria-hidden="true" class="menu-heading"><strong>Intl.</strong></li>

‎src/lib/components/pages/Collator.svelte

Lines changed: 30 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,13 @@
44
import Highlight from '$lib/components/ui/Highlight.svelte';
55
import Input from '$lib/components/ui/Input.svelte';
66
import Spacing from '$lib/components/ui/Spacing.svelte';
7+
import PageLayout from '$lib/components/pages/PageLayout.svelte';
78
9+
import type { BrowserCompatData } from '$lib/types/BrowserSupport.types';
10+
import type { OptionValues } from '$lib/types/OptionValues.types';
811
import { collatorFormatOptions } from '$lib/format-options/collator.options';
912
import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
10-
import type { OptionValues } from '$lib/types/OptionValues.types';
11-
import type { BrowserCompatData } from '$lib/types/BrowserSupport.types';
12-
import { languageByLocaleAsComboBoxOptions } from '$lib/locale-data/locales';
13-
import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
14-
import ComboBoxContext from '$lib/components/ui/ComboBox/ComboBoxContext.svelte';
15-
import { selectedLocale } from '$lib/store/selected-locale';
16-
import { trackEvent } from '$lib/utils/analytics';
13+
import { trackEvent } from '$lib/utils/analytics';
1714
1815
export let locale: string;
1916
export let browserCompatData: BrowserCompatData | null;
@@ -32,51 +29,31 @@
3229
};
3330
</script>
3431

35-
<h2>Input values</h2>
36-
37-
<Spacing />
38-
39-
<ComboBoxContext>
40-
<ComboBox
41-
label="Locale"
42-
name="locale"
43-
bind:value={$selectedLocale}
44-
options={languageByLocaleAsComboBoxOptions}
45-
/>
46-
</ComboBoxContext>
47-
48-
<Spacing />
49-
50-
<div>
51-
<Input id="list" label="List" bind:value={list} />
52-
</div>
53-
54-
<Spacing />
55-
56-
<h2>Output</h2>
32+
<PageLayout>
33+
<Input slot="input" id="list" label="List" bind:value={list} />
34+
<Grid slot="output">
35+
{#each Object.entries(collatorFormatOptions) as [option, values]}
36+
<OptionSection header={option} {browserCompatData} stackedCompatView>
37+
{#each values as value}
38+
{#if value !== undefined}
39+
<Spacing size={1} />
40+
<Highlight
41+
{onClick}
42+
values={{ [option]: value }}
43+
output={list
44+
.split(',')
45+
.sort(
46+
new Intl.Collator(locale, {
47+
[option]: value
48+
}).compare
49+
)
50+
.join(',')}
51+
/>
52+
{/if}
53+
{/each}
54+
</OptionSection>
55+
{/each}
56+
</Grid>
57+
</PageLayout>
5758

58-
<Spacing />
5959

60-
<Grid>
61-
{#each Object.entries(collatorFormatOptions) as [option, values]}
62-
<OptionSection header={option} {browserCompatData} stackedCompatView>
63-
{#each values as value}
64-
{#if value !== undefined}
65-
<Spacing size={1} />
66-
<Highlight
67-
{onClick}
68-
values={{ [option]: value }}
69-
output={list
70-
.split(',')
71-
.sort(
72-
new Intl.Collator(locale, {
73-
[option]: value
74-
}).compare
75-
)
76-
.join(',')}
77-
/>
78-
{/if}
79-
{/each}
80-
</OptionSection>
81-
{/each}
82-
</Grid>

‎src/lib/components/pages/DateTimeFormat.svelte

Lines changed: 40 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,19 @@
55
import DateTime from '$lib/components/ui/DateTime.svelte';
66
import Token from '$lib/components/ui/Highlight/Token.svelte';
77
import CodeBlock from '$lib/components/ui/CodeBlock.svelte';
8+
import Spacing from '$lib/components/ui/Spacing.svelte';
9+
import PageLayout from '$lib/components/pages/PageLayout.svelte';
10+
811
import {
912
datetimeFormatOptions,
1013
getDateTimeFormatOptions
1114
} from '$lib/format-options/datetime-format.options';
1215
import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
13-
import { languageByLocaleAsComboBoxOptions } from '$lib/locale-data/locales';
1416
import type { OptionValues } from '$lib/types/OptionValues.types';
1517
import type { BrowserCompatData } from '$lib/types/BrowserSupport.types';
16-
import ComboBoxContext from '$lib/components/ui/ComboBox/ComboBoxContext.svelte';
17-
import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
18-
import { selectedLocale } from '$lib/store/selected-locale';
19-
import Spacing from '$lib/components/ui/Spacing.svelte';
2018
import { trackEvent } from '$lib/utils/analytics';
2119
20+
2221
export let locale: string;
2322
export let browserCompatData: BrowserCompatData | null;
2423
@@ -42,55 +41,40 @@
4241
};
4342
</script>
4443

45-
<h2>Input values</h2>
46-
<Spacing />
47-
48-
<ComboBoxContext>
49-
<ComboBox
50-
label="Locale"
51-
name="locale"
52-
bind:value={$selectedLocale}
53-
options={languageByLocaleAsComboBoxOptions}
54-
/>
55-
</ComboBoxContext>
56-
<Spacing size={2} />
57-
<DateTime defaultValue={dateTimeString} {onChange} />
58-
<Spacing />
59-
<h2>Alternative use</h2>
60-
<Spacing />
44+
<PageLayout>
45+
<DateTime slot="input" defaultValue={dateTimeString} {onChange} />
46+
<div slot="alternativeUse">
47+
<code>Intl.DateTimeFormat</code>
48+
can also be used from
49+
<strong
50+
><a
51+
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString"
52+
target="_blank"
53+
rel="noopener noreferrer">Date.prototype.toLocaleString()</a
54+
></strong
55+
>
56+
</div>
57+
<CodeBlock slot="alternativeCode">
58+
<Token v="new" t="punctuation" /> <Token v="Date" t="class" />{"("}<Token v="{`"${dateTimeString}"`}" t="string" />{")"}
59+
.<Token v="toLocaleString" t="function" />{"("}<Token v="{`"${locale}"`}" t="string" />{")"}{"\n"}<Token v="// " ariaHidden noTrim t="comment"/><Token v={`${new Date(dateTimeString).toLocaleString(locale)}`} t="comment" />
60+
</CodeBlock>
61+
<Grid slot="output">
62+
{#each Object.entries(datetimeFormatOptions) as [option, values]}
63+
<OptionSection header={option} {browserCompatData} stackedCompatView>
64+
{#each values as value}
65+
{#if value !== undefined}
66+
<Spacing size={1} />
67+
<Highlight
68+
{onClick}
69+
values={{ [option]: value }}
70+
output={new Intl.DateTimeFormat(locale, getDateTimeFormatOptions(option, value)).format(
71+
new Date(`${dateTimeString}`)
72+
)}
73+
/>
74+
{/if}
75+
{/each}
76+
</OptionSection>
77+
{/each}
78+
</Grid>
79+
</PageLayout>
6180

62-
<code>Intl.DateTimeFormat</code>
63-
can also be used from
64-
<strong
65-
><a
66-
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString"
67-
target="_blank"
68-
rel="noopener noreferrer">Date.prototype.toLocaleString()</a
69-
></strong
70-
>
71-
<Spacing size={2} />
72-
<CodeBlock>
73-
<Token v="new" t="punctuation" /> <Token v="Date" t="class" />{"("}<Token v="{`"${dateTimeString}"`}" t="string" />{")"}
74-
.<Token v="toLocaleString" t="function" />{"("}<Token v="{`"${locale}"`}" t="string" />{")"}{"\n"}<Token v="// " ariaHidden noTrim t="comment"/><Token v={`${new Date(dateTimeString).toLocaleString(locale)}`} t="comment" />
75-
</CodeBlock>
76-
<Spacing size={2} />
77-
<h2>Output</h2>
78-
<Spacing />
79-
<Grid>
80-
{#each Object.entries(datetimeFormatOptions) as [option, values]}
81-
<OptionSection header={option} {browserCompatData} stackedCompatView>
82-
{#each values as value}
83-
{#if value !== undefined}
84-
<Spacing size={1} />
85-
<Highlight
86-
{onClick}
87-
values={{ [option]: value }}
88-
output={new Intl.DateTimeFormat(locale, getDateTimeFormatOptions(option, value)).format(
89-
new Date(`${dateTimeString}`)
90-
)}
91-
/>
92-
{/if}
93-
{/each}
94-
</OptionSection>
95-
{/each}
96-
</Grid>

0 commit comments

Comments
 (0)