@onsvisual/svelte-components 1.0.0-next.5 → 1.0.0-next.7

package/dist/layout/Highlight/Highlight.svelte

@@ -1,5 +1,4 @@
 <script>
-	import Theme from "../../wrappers/Theme/Theme.svelte";
 	import Container from "../../wrappers/Container/Container.svelte";
 
 	/**
@@ -8,7 +7,7 @@
 	 */
 	export let id = "";
 	/**
-	 * Optional: Set a CSS class for the section
+	 * Optional: Set an additional CSS class for the section
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -29,7 +28,7 @@
 	export let height = null;
 	/**
 	 * Sets a predefined theme
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|null}
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
 	 */
 	export let theme = "paleblue";
 	/**
@@ -43,34 +42,28 @@
 	 */
 	export let background = null;
 	/**
-	 * Optional margin above section
+	 * Adds margin above section
 	 * @type {boolean}
 	 */
 	export let marginTop = false;
 	/**
-	 * Optional margin below section
+	 * Adds margin below section
 	 * @type {boolean}
 	 */
 	export let marginBottom = true;
 </script>
 
-<Theme {theme} overrides={themeOverrides} {background}>
-	<Container {id} {cls} {width} {marginTop} {marginBottom}>
-		<section
-			class="ons-section__highlight ons-u-mt-xl ons-u-mb-xl"
-			class:ons-u-fs-l={bigText}
-			style:height={typeof height === "number"
-				? `${height}px`
-				: height === "full"
-					? "100vh"
-					: height}
-		>
-			<div>
-				<slot />
-			</div>
-		</section>
-	</Container>
-</Theme>
+<Container {id} {cls} {width} {marginTop} {marginBottom} {theme} {themeOverrides} {background}>
+	<section
+		class="ons-section__highlight ons-u-mt-xl ons-u-mb-xl"
+		class:ons-u-fs-l={bigText}
+		style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
+	>
+		<div>
+			<slot />
+		</div>
+	</section>
+</Container>
 
 <style>
 	.ons-section__highlight {

package/dist/layout/Highlight/Highlight.svelte.d.ts

@@ -2,14 +2,14 @@
 /** @typedef {typeof __propDef.events}  HighlightEvents */
 /** @typedef {typeof __propDef.slots}  HighlightSlots */
 export default class Highlight extends SvelteComponentTyped<{
-    id?: string | undefined;
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+    background?: string | null | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     height?: string | number | null | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
-    background?: string | null | undefined;
-    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
     themeOverrides?: object | undefined;
     bigText?: boolean | undefined;
 }, {
@@ -24,14 +24,14 @@ export type HighlightSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+        background?: string | null | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         height?: string | number | null | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;
-        background?: string | null | undefined;
-        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
         themeOverrides?: object | undefined;
         bigText?: boolean | undefined;
     };

package/dist/layout/Image/Image.svelte

@@ -14,9 +14,14 @@
 	 * @type {string}
 	 */
 	export let caption = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<figure class="ons-image">
+<figure class="ons-image {cls}">
 	<img class="ons-image__img" {src} {alt} />
 	{#if caption}
 		<figcaption class="ons-image__caption">{caption}</figcaption>

package/dist/layout/Image/Image.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ImageEvents */
 /** @typedef {typeof __propDef.slots}  ImageSlots */
 export default class Image extends SvelteComponentTyped<{
+    cls?: string | undefined;
     caption?: string | undefined;
     src?: string | undefined;
     alt?: string | undefined;
@@ -15,6 +16,7 @@ export type ImageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         caption?: string | undefined;
         src?: string | undefined;
         alt?: string | undefined;

package/dist/layout/List/List.svelte

@@ -11,10 +11,15 @@
 	 * @type {string[]|null}
 	 */
 	export let items = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
 {#if mode === "number"}
-	<ol class="ons-list">
+	<ol class="ons-list {cls}">
 		<slot>
 			{#if items}
 				{#each items as item}

package/dist/layout/List/List.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ListEvents */
 /** @typedef {typeof __propDef.slots}  ListSlots */
 export default class List extends SvelteComponentTyped<{
+    cls?: string | undefined;
     mode?: "number" | "inline" | "bullet" | "dash" | "bare" | undefined;
     items?: string[] | null | undefined;
 }, {
@@ -16,6 +17,7 @@ export type ListSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         mode?: "number" | "inline" | "bullet" | "dash" | "bare" | undefined;
         items?: string[] | null | undefined;
     };

package/dist/layout/NavSections/NavSection.svelte

@@ -14,7 +14,7 @@
 	 */
 	export let id = slugify(title);
 	/**
-	 * Optional: Set a CSS class for the section
+	 * Optional: Set an additional CSS class for the section
 	 * @type {string}
 	 */
 	export let cls = "";

package/dist/layout/NavSections/NavSection.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  NavSectionEvents */
 /** @typedef {typeof __propDef.slots}  NavSectionSlots */
 export default class NavSection extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     title?: string | undefined;
     hideTitle?: boolean | undefined;
     subsection?: boolean | undefined;
@@ -19,8 +19,8 @@ export type NavSectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         title?: string | undefined;
         hideTitle?: boolean | undefined;
         subsection?: boolean | undefined;

package/dist/layout/NavSections/NavSections.svelte

@@ -9,7 +9,7 @@
 	 */
 	export let id = "toc";
 	/**
-	 * Optional: Set a CSS class for the section
+	 * Optional: Set an additional CSS class for the section
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -29,12 +29,12 @@
 	 */
 	export let noContents = false;
 	/**
-	 * Optional margin above section
+	 * Adds margin above section
 	 * @type {boolean}
 	 */
 	export let marginTop = false;
 	/**
-	 * Optional margin below section
+	 * Adds margin below section
 	 * @type {boolean}
 	 */
 	export let marginBottom = true;

package/dist/layout/NavSections/NavSections.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  NavSectionsEvents */
 /** @typedef {typeof __propDef.slots}  NavSectionsSlots */
 export default class NavSections extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
@@ -26,8 +26,8 @@ export type NavSectionsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;

package/dist/layout/Notice/Notice.svelte

@@ -4,10 +4,15 @@
 	 * @type {"info"|"success"|"error"|"warning"}
 	 */
 	export let mode = "info";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
 <div
-	class="ons-panel ons-panel--no-title"
+	class="ons-panel ons-panel--no-title {cls}"
 	class:ons-panel--info={mode === "info"}
 	class:ons-panel--warn={mode === "warning"}
 	class:ons-panel--error={mode === "error"}

package/dist/layout/Notice/Notice.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  NoticeEvents */
 /** @typedef {typeof __propDef.slots}  NoticeSlots */
 export default class Notice extends SvelteComponentTyped<{
+    cls?: string | undefined;
     mode?: "error" | "info" | "success" | "warning" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -15,6 +16,7 @@ export type NoticeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         mode?: "error" | "info" | "success" | "warning" | undefined;
     };
     events: {

package/dist/layout/PhaseBanner/PhaseBanner.svelte

@@ -9,9 +9,14 @@
 	 * @type {string}
 	 */
 	export let href = "https://www.ons.gov.uk/feedback";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-phase-banner">
+<div class="ons-phase-banner {cls}">
 	<div class="ons-container">
 		<div
 			class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap"

package/dist/layout/PhaseBanner/PhaseBanner.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  PhaseBannerEvents */
 /** @typedef {typeof __propDef.slots}  PhaseBannerSlots */
 export default class PhaseBanner extends SvelteComponentTyped<{
+    cls?: string | undefined;
     href?: string | undefined;
     phase?: string | undefined;
 }, {
@@ -14,6 +15,7 @@ export type PhaseBannerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         href?: string | undefined;
         phase?: string | undefined;
     };

package/dist/layout/RelatedContent/RelatedContent.svelte

@@ -14,9 +14,14 @@
 	 * @type {object[]}
 	 */
 	export let related = [{ title, links }];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<aside class="ons-related-content" aria-label="Related content">
+<aside class="ons-related-content {cls}" aria-label="Related content">
 	<slot />
 	{#each related as section}
 		<div class="ons-related-content__section">

package/dist/layout/RelatedContent/RelatedContent.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  RelatedContentEvents */
 /** @typedef {typeof __propDef.slots}  RelatedContentSlots */
 export default class RelatedContent extends SvelteComponentTyped<{
+    cls?: string | undefined;
     title?: string | undefined;
     links?: object | object[] | undefined;
     related?: object[] | undefined;
@@ -17,6 +18,7 @@ export type RelatedContentSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         title?: string | undefined;
         links?: object | object[] | undefined;
         related?: object[] | undefined;

package/dist/layout/Scroller/Scroller.svelte

@@ -136,6 +136,11 @@
 	 * @type {boolean}
 	 */
 	export let visible = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	const sections = writable([]);
 	setContext("sections", sections);
@@ -251,7 +256,7 @@
 	<div class="ons-u-mt-xl"></div>
 {/if}
 
-<svelte-scroller-outer {id} bind:this={outer} class:splitscreen>
+<svelte-scroller-outer {id} bind:this={outer} class={cls} class:splitscreen>
 	<svelte-scroller-background-container class="background-container" style="{style}{widthStyle}">
 		<svelte-scroller-background bind:this={background}>
 			<slot name="background" />

package/dist/layout/Scroller/Scroller.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ScrollerEvents */
 /** @typedef {typeof __propDef.slots}  ScrollerSlots */
 export default class Scroller extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
@@ -30,6 +31,7 @@ export type ScrollerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -17,6 +17,11 @@
 	 * @type {boolean}
 	 */
 	export let hideTitle = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	let section;
 
@@ -35,7 +40,7 @@
 	});
 </script>
 
-<section data-id={id} bind:this={section}>
+<section data-id={id} bind:this={section} class={cls}>
 	<Container width="narrow">
 		<div class="ons-scroller-section">
 			{#if title}

package/dist/layout/Scroller/ScrollerSection.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ScrollerSectionEvents */
 /** @typedef {typeof __propDef.slots}  ScrollerSectionSlots */
 export default class ScrollerSection extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     title?: string | undefined;
     hideTitle?: boolean | undefined;
@@ -17,6 +18,7 @@ export type ScrollerSectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         title?: string | undefined;
         hideTitle?: boolean | undefined;

package/dist/layout/Section/Section.svelte

@@ -8,7 +8,7 @@
 	 */
 	export let id = "";
 	/**
-	 * Optional: Set a CSS class for the section
+	 * Optional: Set an additional CSS class for the section
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -33,12 +33,12 @@
 	 */
 	export let hideTitle = false;
 	/**
-	 * Optional margin above section
+	 * Adds margin above section
 	 * @type {boolean}
 	 */
 	export let marginTop = false;
 	/**
-	 * Optional margin below section
+	 * Adds margin below section
 	 * @type {boolean}
 	 */
 	export let marginBottom = true;

package/dist/layout/Section/Section.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  SectionEvents */
 /** @typedef {typeof __propDef.slots}  SectionSlots */
 export default class Section extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     height?: string | number | null | undefined;
     marginTop?: boolean | undefined;
@@ -22,8 +22,8 @@ export type SectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         height?: string | number | null | undefined;
         marginTop?: boolean | undefined;

package/dist/layout/ShareButtons/ShareButtons.svelte

@@ -8,15 +8,20 @@
 	 */
 	export let title = "Share this page";
 	/**
-	 * Optional margin above section
+	 * Adds margin above section
 	 * @type {boolean}
 	 */
 	export let marginTop = false;
 	/**
-	 * Optional margin below section
+	 * Adds margin below section
 	 * @type {boolean}
 	 */
 	export let marginBottom = true;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	let href = "";
 	let pageTitle = "";
@@ -27,7 +32,7 @@
 	});
 </script>
 
-<Container width="wide" {marginTop} {marginBottom}>
+<Container width="wide" {marginTop} {marginBottom} {cls}>
 	<h2 class="ons-u-fs-r--b ons-u-mb-2xs">{title}</h2>
 	<ul class="ons-list ons-list--inline ons-list--icons">
 		<li class="ons-list__item">

package/dist/layout/ShareButtons/ShareButtons.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ShareButtonsEvents */
 /** @typedef {typeof __propDef.slots}  ShareButtonsSlots */
 export default class ShareButtons extends SvelteComponentTyped<{
+    cls?: string | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
     title?: string | undefined;
@@ -15,6 +16,7 @@ export type ShareButtonsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;
         title?: string | undefined;

package/dist/layout/Summary/Summary.svelte

@@ -18,13 +18,18 @@
 	 * @type {object[]}
 	 */
 	export let items = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	function handleChange(item) {
 		dispatch("change", { item });
 	}
 </script>
 
-<div class="ons-summary">
+<div class="ons-summary {cls}">
 	<div {id} class="ons-summary__group">
 		{#if title}<h2 class="ons-summary__group-title">{title}</h2>{/if}
 		<dl class="ons-summary__items">

package/dist/layout/Summary/Summary.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  SummaryEvents */
 /** @typedef {typeof __propDef.slots}  SummarySlots */
 export default class Summary extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     title?: string | undefined;
     items?: object[] | undefined;
@@ -17,6 +18,7 @@ export type SummarySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         title?: string | undefined;
         items?: object[] | undefined;

package/dist/layout/Tabs/Tabs.svelte

@@ -20,6 +20,11 @@
 	 * @type {string|null}
 	 */
 	export let selected = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	let el;
 
@@ -39,7 +44,7 @@
 </script>
 
 <section
-	class="ons-tabs"
+	class="ons-tabs {cls}"
 	class:ons-tabs__border={border}
 	class:ons-tabs__compact={compact}
 	bind:this={el}

package/dist/layout/Tabs/Tabs.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  TabsEvents */
 /** @typedef {typeof __propDef.slots}  TabsSlots */
 export default class Tabs extends SvelteComponentTyped<{
+    cls?: string | undefined;
     compact?: boolean | undefined;
     border?: boolean | undefined;
     selected?: string | null | undefined;
@@ -19,6 +20,7 @@ export type TabsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         compact?: boolean | undefined;
         border?: boolean | undefined;
         selected?: string | null | undefined;

package/dist/templates/intro.mdx

@@ -4,7 +4,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Using templates
 
-This section includes a series of starter templates constructed from multiple components within this library. All of these templates are included in the [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project, which is typically to be the easiest way to use them.
+This section includes a series of starter templates constructed from multiple components within this library. Similar templates to these examples are included in the [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project, which is typically the easiest way to use them.
 
 When using these templates in an existing SvelteKit project (or one built from scratch), you will need to include the **main.css** file from this library, which is best imported to your top-level `+layout.svelte` file in Svelte Kit. By doing this, you will not need to include it on individual pages.