feat: add setting for browser support

messages/en.json

@@ -51,6 +51,8 @@
   "selectUnit": "Select a unit",
   "settingsButton": "Settings",
   "settingsHeading": "Settings",
+  "showBrowserSupport": "Show Browser Support",
+  "showBrowserSupportHint": "Toggle to hide or show Browser Details/Support",
   "skipLink": "Skip to content",
   "specification": "Specification",
   "theme": "Theme",

messages/sv.json

@@ -43,14 +43,16 @@
   "notAvailableInBrowser": "Inte tillgänglig i {browserName}",
   "options": "Alternativ",
   "output": "Utdata",
-  "partialSupport": "Delvis stöd",
+  "partialSupport": "Delvist stöd",
   "resolvedOptions": "Alternativ som används",
   "secondaryFormatters": "Sekundära formatterare",
   "seeAlso": "Se också",
   "selectCurrency": "Välj valuta",
   "selectUnit": "Välj enhet",
   "settingsButton": "Inställningar",
   "settingsHeading": "Inställningar",
+  "showBrowserSupport": "Visa Webbläsarstöd",
+  "showBrowserSupportHint": "Visa eller dölj stöd för webbläsare",
   "skipLink": "Hoppa till innehåll",
   "specification": "Specifikation",
   "theme": "Tema",

src/lib/components/pages/Playground/Playground.svelte

@@ -33,6 +33,7 @@
 	import BrowserSupport from '$lib/components/ui/BrowserSupport/BrowserSupport.svelte';
 	import Grid from '$lib/components/ui/Grid.svelte';
 	import { getMessages } from '$lib/i18n/util';
+	import { settings } from '$lib/store/settings';
 
 	export let data: { [key: string]: BrowserSupportDataForMethod };
 	export let locale: string;
@@ -43,7 +44,9 @@
 	$: isDesktop = Boolean(matchMedia?.matches);
 
 	$: schema = validateAndUpdateSchema(numberFormatSchema);
-	$: browserSupportData = schema ? { ...data[schema.method] } : { ...data.NumberFormat };
+	$: browserSupportData = schema
+		? { ...data[schema.method] }
+		: { optionsSupport: undefined, formattersSupport: undefined };
 
 	onMount(() => {
 		if (getSchemaParam()) {
@@ -123,7 +126,9 @@
 		<div class="main">
 			<Header header="Playground" link={schema.method} />
 			<Grid>
-				<BrowserSupport bind:data={browserSupportData} />
+				{#if $settings.showBrowserSupport}
+					<BrowserSupport bind:data={browserSupportData} />	
+				{/if}
 				<Button onClick={copySchema}>{m.copySchemaUrl()} <CopyToClipboard /></Button>
 			</Grid>
 			<Spacing />

src/lib/components/pages/Playground/PlaygroundOptions.svelte

@@ -13,6 +13,7 @@
 	import Radio from '$lib/components/ui/Radio.svelte';
 	import { optionIsActive } from '$lib/playground/validate';
 	import { getMessages } from '$lib/i18n/util';
+	import { settings } from '$lib/store/settings';
 
 	export let schema: PlaygroundSchema<'NumberFormat'>;
 	export let support: BrowserSupportDataForOptions | undefined;
@@ -29,7 +30,7 @@
 			option={option.name}
 			onChange={onChangeOption}
 			hideFullSupport
-			support={support?.[option.name]?.coverage}
+			support={$settings.showBrowserSupport ? support?.[option.name]?.coverage : undefined}
 		>
 			{#if option.inputType === 'select'}
 				<Select
@@ -67,7 +68,7 @@
 					{/each}
 				</div>
 			{/if}
-			{#if support?.[option.name]?.support}
+			{#if support?.[option.name]?.support && $settings.showBrowserSupport}
 				<Spacing />
 				<Details>
 					<p slot="summary">{m.browserDetails()}</p>

src/lib/components/pages/Playground/PlaygroundSecondaryFormatters.svelte

@@ -6,6 +6,7 @@
 	import type { BrowserSupportDataForOptions } from '$lib/types/BrowserSupport.types';
 	import Card from '$lib/components/ui/Card.svelte';
 	import { getMessages } from '$lib/i18n/util';
+	import { settings } from '$lib/store/settings';
 	
 	export let secondaryFormatters: { name: string; output: string }[];
 	export let support: BrowserSupportDataForOptions | undefined = undefined;
@@ -17,7 +18,11 @@
 	<Spacing />
 	{#each secondaryFormatters as formatter}
 	<Card>
-		<OptionSection header={formatter.name} support={support?.[formatter.name]} hideFullSupport={false}>
+		<OptionSection
+			header={formatter.name}
+			support={$settings.showBrowserSupport ?  support?.[formatter.name] : undefined}
+			hideFullSupport={false}
+		>
 			<Spacing />
 			<Highlight language={typescript} code={formatter.output} />
 		</OptionSection>

src/lib/components/ui/BrowserSupport/BrowserSupport.svelte

@@ -5,7 +5,7 @@
 	import SupportLabel from './SupportLabel.svelte';
 	import { getMessages } from '$lib/i18n/util';
 
-	export let data: BrowserSupportForOption | null;
+	export let data: BrowserSupportForOption | undefined;
 	export let hideFullSupport: boolean | undefined = undefined;
 	const m = getMessages();
 </script>

src/lib/components/ui/BrowserSupport/BrowserSupportGrid.svelte

@@ -4,7 +4,7 @@
 	import { getMessages } from '$lib/i18n/util';
 	import type { VersionValue } from '@mdn/browser-compat-data';
 
-	export let data: Record<string, BrowserReleaseData> | null;
+	export let data: Record<string, BrowserReleaseData> | undefined;
 	const m = getMessages();
 	const getAriaLabel = (browserName: string, versionAdded: VersionValue): string => {
   	if (!versionAdded) return m.notAvailableInBrowser({ browserName })

src/lib/components/ui/Button.svelte

@@ -9,7 +9,6 @@
 	export let onClick: MouseEventHandler<HTMLButtonElement> | undefined = undefined;
   export let onKeyDown: KeyboardEventHandler<HTMLButtonElement> | undefined = undefined;
   export let id: HTMLButtonAttributes["id"] | undefined = undefined;
-  export let className: string | undefined = undefined;
   export let type: HTMLButtonAttributes["type"] | undefined = undefined;
   export let ariaLabel: AriaAttributes["aria-label"] = undefined;
   export let ariaControls: AriaAttributes["aria-controls"] = undefined;
@@ -18,20 +17,33 @@
   export let textTransform: "uppercase" | undefined = undefined;
   export let href: string | undefined = undefined;
   export let hrefLang: string | undefined = undefined;
+  export let noBackground: boolean | undefined = undefined;
+  export let bold: boolean | undefined = undefined;
 </script>
 
 {#if href}
-  <a href={href} hreflang={hrefLang}><slot/></a>
+  <a
+    {id}
+    href={href}
+    class="button"
+    class:no-background={noBackground}
+    class:uppercase={textTransform === "uppercase"}
+    class:bold={bold}
+    hreflang={hrefLang}>
+      <slot/>
+  </a>
 {:else}
   <button
     on:click={onClick}
     {id}
     {type}
-    class={className}
+    class="button"
     aria-label={ariaLabel}
     aria-controls={ariaControls}
     aria-expanded={ariaExpanded}
     class:uppercase={textTransform === "uppercase"}
+    class:no-background={noBackground}
+    class:bold={bold}
     on:keydown={onKeyDown}
     bind:this={ref}
   >
@@ -40,13 +52,13 @@
 {/if}
 
 <style>
-	button, a {
-    background-color: inherit;
-		border: 1px solid var(--border-color);
+	.button {
+    background-color: var(--button-background-color);
+		border: 1px solid var(--button-border-color);
     border-radius: 4px;
 		padding: var(--spacing-2) var(--spacing-3);
 		cursor: pointer;
-		color: var(--text-color);
+		color: var(--button-text-color);
     text-align: center;
     display: inline-flex;
     justify-content: center;
@@ -56,8 +68,19 @@
   .uppercase {
     text-transform: uppercase;
   }
-  button:hover, a:hover {
-    background-color: var(--accent-background-color);
-    border: 1px solid var(--text-color);
+  .bold {
+    font-weight: bold;
+  }
+  .no-background {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--button-no-background-text-color);
+  }
+  .button.no-background:hover {
+    background-color: transparent;
+    border-color: var(--button-background-hover-color);
+  }
+  .button:hover {
+    background-color: var(--button-background-hover-color);
   }
 </style>

src/lib/components/ui/Checkbox.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+	import type { ChangeEventHandler } from "svelte/elements";
+
 	export let id: string;
 	export let name: string;
 	export let checked: boolean = false;
 	export let label: string;
-	export let onChange: (event: Event) => void;
+	export let srOnlyLabel: boolean | undefined = undefined;
+	export let onChange: ChangeEventHandler<HTMLInputElement>;
 </script>
 
 <div class="wrapper">
@@ -15,7 +18,7 @@
 		{checked}
 		on:change={onChange}
 	/>
-	<label for={id} class="sr-only">{label}</label>
+	<label for={id} class:sr-only={srOnlyLabel}>{label}</label>
 </div>
 
 <style>
@@ -25,7 +28,7 @@
 	input[type='checkbox'] {
 		width: var(--spacing-4);
 		height: var(--spacing-4);
-    color: var(--white);
-		accent-color: var(--purple);
+    color: var(--text-color);
+		accent-color: var(--purple4);
 	}
 </style>

src/lib/components/ui/Navigation.svelte

@@ -88,11 +88,17 @@
 			onClick={openDrawer}
 			bind:ref={openButton}
 			textTransform="uppercase"
+			noBackground
 		>
 			{m.menu()}
 		</Button>
 		<div class="settings">
-			<Button onClick={() => (showSettings = true)} ariaLabel="Settings" textTransform="uppercase">
+			<Button
+				onClick={() => (showSettings = true)}
+				ariaLabel="Settings"
+				textTransform="uppercase"
+				noBackground
+			>
 				<span class="mr-2">{m.settingsButton()}</span> <Settings />
 			</Button>
 		</div>
@@ -107,6 +113,7 @@
 				bind:ref={closeButton}
 				onKeyDown={onCloseButtonShiftTab}
 				textTransform="uppercase"
+				noBackground
 			>
 				{m.close()}
 			</Button>

src/lib/components/ui/OptionCard.svelte

@@ -19,6 +19,7 @@
 				label="{option} active"
 				name="{option}_active"
 				id="{option}_active"
+				srOnlyLabel
 				{checked}
 				{onChange}
 			/>

src/lib/components/ui/ProgressBar.svelte

@@ -8,7 +8,7 @@
   height: 4px;
 	width: 100%;
 	display: block;
-  background-color: var(--purple);
+  background-color: var(--progress-bar-color);
   background-image: linear-gradient(
     -45deg,
     rgba(255, 255, 255, 0.2) 25%,

src/lib/components/ui/Radio.svelte

@@ -16,7 +16,7 @@
 <style>
   :root {
   --radio-border-color: var(--border-color);
-  --radio-checked-color: var(--purple);
+  --radio-checked-color: var(--radio-checked-color);
   --radio-hover-color: var(--lightergray);
   --radio-disabled-bg-color: var(--lightergray);
   }