@turnipxenon/pineapple 2.4.12 → 2.4.14

package/dist/components/pineapple/toast/DefaultToastBody.svelte

@@ -0,0 +1,48 @@
+<script>import CloseIcon from "../../../assets/icons/close.svg";
+export let props;
+export let dismissToastCallback;
+export let shouldEnableButton = false;
+</script>
+
+<div class="body-container">
+	<!-- todo: support markdown? -->
+	<button class="btn"
+	        disabled={!shouldEnableButton}
+	        on:click={dismissToastCallback}>
+		<img class="img-icon" src={CloseIcon} alt="close button">
+	</button>
+	<div class="text-container">
+		<span>{props.message}</span>
+	</div>
+</div>
+
+<style>
+    .body-container {
+        display: flex;
+        gap: 1em;
+    }
+
+    .text-container {
+        margin-top: 0.25lh;
+        margin-right: 1em;
+    }
+
+    .text-container:dir(rtl) {
+        margin-left: 1em;
+    }
+
+    .btn {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
+}
+
+    :is(.dark .btn) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
+}
+
+    .btn {
+        border-radius: 8px;
+		    padding: 0.5em;
+    }
+</style>

package/dist/components/pineapple/toast/DefaultToastBody.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Props } from "./DefaultToastBody";
+import type { DismissToastCallback } from "./Toast";
+declare const __propDef: {
+    props: {
+        props: Props;
+        dismissToastCallback: DismissToastCallback | undefined;
+        shouldEnableButton?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DefaultToastBodyProps = typeof __propDef.props;
+export type DefaultToastBodyEvents = typeof __propDef.events;
+export type DefaultToastBodySlots = typeof __propDef.slots;
+export default class DefaultToastBody extends SvelteComponent<DefaultToastBodyProps, DefaultToastBodyEvents, DefaultToastBodySlots> {
+}
+export {};

package/dist/components/pineapple/toast/Toast.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="svelte" />
+import type { DefaultToastPair } from "./DefaultToastBody";
+import type { TestCustomToastPair } from "./custom-toast/TestCustomToast";
+/**
+ * Default toast duration is 5 seconds
+ */
+export declare const DefaultToastParamsDuration = 5000;
+export type CustomToastPairs = DefaultToastPair | TestCustomToastPair;
+export type DismissToastCallback = () => void;
+export interface ToastParams {
+    componentAndProps: CustomToastPairs;
+    /**
+     * Time in millisecond. If undefined, defaults to DefaultToastParamsDuration
+     */
+    duration?: number;
+}
+/**
+ * todo: do not call directly documentation
+ */
+export declare const activeToast: import("svelte/store").Writable<ToastParams | undefined>;
+export declare const toastQueue: ToastParams[];
+/**
+ *
+ * @param newToast
+ */
+export declare const showComponentInToast: (newToast: ToastParams) => void;
+export declare const showTextInToast: (message: string) => void;

package/dist/components/pineapple/toast/Toast.js

@@ -0,0 +1,37 @@
+import { writable } from "svelte/store";
+import DefaultToastBody from "./DefaultToastBody.svelte";
+/**
+ * Default toast duration is 5 seconds
+ */
+export const DefaultToastParamsDuration = 5000;
+/**
+ * todo: do not call directly documentation
+ */
+export const activeToast = writable();
+export const toastQueue = [];
+/**
+ *
+ * @param newToast
+ */
+export const showComponentInToast = (newToast) => {
+    // todo: queue component
+    activeToast.update((currentToast) => {
+        if (currentToast !== undefined) {
+            toastQueue.push(newToast);
+            return currentToast;
+        }
+        else {
+            return newToast;
+        }
+    });
+};
+export const showTextInToast = (message) => {
+    showComponentInToast({
+        componentAndProps: {
+            component: DefaultToastBody,
+            props: {
+                message
+            }
+        }
+    });
+};

package/dist/components/pineapple/toast/Toast.svelte

@@ -0,0 +1,89 @@
+<script>import {
+  activeToast,
+  DefaultToastParamsDuration,
+  toastQueue
+} from "./Toast";
+import {} from "svelte";
+import Card from "../../Card.svelte";
+import { spring, tweened } from "svelte/motion";
+let localComponent;
+let localProps;
+const HIDDEN_VALUE = -15;
+const SHOWN_VALUE = 0;
+const progress = tweened(0, { duration: DefaultToastParamsDuration });
+const position = spring(HIDDEN_VALUE);
+position.damping = 0.4;
+let isDismissed = false;
+let shouldEnableButton = false;
+const onToastDisappear = () => {
+  localComponent = void 0;
+  activeToast.update(() => {
+    if (toastQueue.length === 0) {
+      return void 0;
+    }
+    return toastQueue.shift();
+  });
+};
+activeToast.subscribe((params) => {
+  if (!params) {
+    return;
+  }
+  if (params.componentAndProps?.component === localComponent) {
+    return;
+  }
+  localComponent = params.componentAndProps.component;
+  localProps = params.componentAndProps.props;
+  progress.set(0, { duration: 0 }).then(() => {
+    position.set(SHOWN_VALUE).then(() => {
+      shouldEnableButton = true;
+      progress.set(100, { delay: 500, duration: params.duration ?? DefaultToastParamsDuration }).then(() => {
+        shouldEnableButton = false;
+        if (isDismissed) {
+          return;
+        }
+        position.set(HIDDEN_VALUE).then(onToastDisappear);
+      });
+    });
+  });
+});
+const dismissToast = () => {
+  shouldEnableButton = false;
+  isDismissed = true;
+  position.set(HIDDEN_VALUE).then(onToastDisappear);
+};
+</script>
+
+{#if (localComponent !== undefined)}
+	<div class="toast-positioner" style={`bottom: ${$position}lh;`}>
+		<!-- todo: adjust shadow to be more dynamic or transparent -->
+		<Card marginBottom="1lh" overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
+			<div slot="content">
+				{#if (localProps !== undefined)}
+					<svelte:component this={localComponent}
+					                  props={localProps}
+					                  dismissToastCallback={dismissToast}
+					                  shouldEnableButton={shouldEnableButton} />
+				{:else }
+					<svelte:component this={localComponent} />
+				{/if}
+				<progress id="toast-progress" value={$progress/100}></progress>
+			</div>
+		</Card>
+	</div>
+{/if}
+
+<style>
+    .toast-positioner {
+        position: fixed;
+        /* 12em = this component's margin (4em) + fab margin + width (8em) */
+        max-width: calc(100vw - 12em);
+    }
+
+    .toast-positioner:dir(ltr) {
+        left: 2em;
+    }
+
+    .toast-positioner:dir(rtl) {
+        right: 2em;
+    }
+</style>

package/dist/components/pineapple/toast/Toast.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastProps = typeof __propDef.props;
+export type ToastEvents = typeof __propDef.events;
+export type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponent<ToastProps, ToastEvents, ToastSlots> {
+}
+export {};

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.d.ts

@@ -0,0 +1,5 @@
+import TestCustomToast from "./TestCustomToast.svelte";
+export interface TestCustomToastPair {
+    component: typeof TestCustomToast;
+    props: undefined;
+}

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.js

@@ -0,0 +1 @@
+import TestCustomToast from "./TestCustomToast.svelte";

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.svelte

@@ -0,0 +1 @@
+<h1>Testing bad custom card</h1>

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TestCustomToastProps */
+/** @typedef {typeof __propDef.events}  TestCustomToastEvents */
+/** @typedef {typeof __propDef.slots}  TestCustomToastSlots */
+export default class TestCustomToast extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TestCustomToastProps = typeof __propDef.props;
+export type TestCustomToastEvents = typeof __propDef.events;
+export type TestCustomToastSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export { default as SeaweedTemplate } from "./template/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export * from "./components/dialog_manager/DialogManagerStore";

package/dist/index.js

@@ -1,4 +1,4 @@
-export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export { default as SeaweedTemplate } from "./template/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export * from "./components/dialog_manager/DialogManagerStore";

package/dist/postcss.d.ts

@@ -1,3 +1,3 @@
-// from https://stackoverflow.com/a/63885623/17836168
-declare module "./app.postcss";
-declare module "./theme.postcss";
+// from https://stackoverflow.com/a/63885623/17836168
+declare module "./app.postcss";
+declare module "./theme.postcss";

package/dist/styles/global.css

@@ -1 +1 @@
-/* todo: delete if unneeded */
+/* todo: delete if unneeded */

package/dist/theme.postcss

@@ -5,7 +5,7 @@
     --theme-font-family-base: system-ui;
     --theme-font-family-heading: system-ui;
     --theme-font-color-base: var(--color-primary-900);
-    --theme-font-color-dark: var(--color-primary-100);
+    --theme-font-color-dark: var(--color-primary-50);
     --theme-rounded-base: 24px;
     --theme-rounded-container: 16px;
     --theme-border-base: 2px;
@@ -99,6 +99,7 @@
     --color-surface-800: 153 148 136; /* ⬅ #999488 */
     --color-surface-900: 125 121 111; /* ⬅ #7d796f */
     /* text color | #3f312f */
+    --color-text-25: 237 234 234; /* ⬅ #e2e0e0 */
     --color-text-50: 226 224 224; /* ⬅ #e2e0e0 */
     --color-text-100: 217 214 213; /* ⬅ #d9d6d5 */
     --color-text-200: 207 204 203; /* ⬅ #cfcccb */

package/docs/OverlaySpec.md

@@ -0,0 +1,23 @@
+# Overlay Spec
+
+**What are the things that can appear on top of the normal content?**
+
+- Toast
+- Modal
+- Dialog
+  - Choices
+- Backstage
+  - Preferences
+  - Optional: Dialog??
+
+**Which one appears on top?**
+
+- Toast
+- Modal
+  - blocks access on anything below
+- Backstage
+  - blocks access on anything below
+- Dialog: choices
+  - blocks access on anything below
+- Dialog
+- Everything else

package/docs/pull_request_template.md

@@ -0,0 +1,34 @@
+## Which issues does this affect?
+
+- Closes #*PR number*
+
+## Overview
+
+*Insert brief description here*
+
+## Description
+
+*If there are more details or more things that needs to be talked about, put it here.*
+
+## Checks
+
+- [ ] If some of the checks below are deferred, link an issue for it under as a child
+
+### Accessibility
+
+- [ ] [Changes are keyboard accessible](https://accessibility.18f.gov/keyboard/)
+- [ ] [All form inputs have explicit labels](https://accessibility.18f.gov/forms/)
+- [ ] [Page content has a meaningful heading hierarchy](https://accessibility.18f.gov/headings/)
+- [ ] [All relevant images use an img tag and have alt attributes](https://accessibility.18f.gov/images/)
+- [ ] [Text has sufficient color contrast](https://accessibility.18f.gov/color/) (a contrast ratio of 4.5:1 with the
+  background)
+- [ ] [No red flags when running WAVE on the page](http://wave.webaim.org/)
+- [ ] The UI should also work in left-to-right direction
+
+For the full list, see [18F's Accessibility Checklist](https://accessibility.18f.gov/checklist/).
+
+
+<!--
+References:
+- https://github.com/ministryofjustice/accessibility-checklist/blob/master/README.md
+-->

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.12",
+  "version": "2.4.14",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

package/src/lib/app.postcss

@@ -41,11 +41,11 @@ html, body {
 }
 
 /* todo: add some hues to the icon that should be in sync with primary and make them not pure darkness */
-.turnip-button > img {
+.turnip-button > img, .img-icon {
     filter: grayscale(100%) brightness(0%) invert(25%);
 }
 
-.dark .turnip-button > img {
+.dark .turnip-button > img, .dark .img-icon {
     filter: grayscale(100%) brightness(0%) invert(100%);
 }
 
@@ -164,4 +164,30 @@ a:active {
 .accordion-item {
     @apply variant-filled-primary rounded-md;
 }
+
 /* endregion Accordion css for handling missing styles in package */
+
+:root {
+    --shadow-color: rgba(91, 79, 54, 0.5);
+}
+
+/* todo: adjust shadow for each component + change depending on dark mode or not */
+.fab, #shell-header {
+    box-shadow: 3px 3px 3px var(--shadow-color);
+}
+
+#toast-progress {
+    position: relative;
+    top: 5px;
+    left: 6px;
+    width: calc(100% - 12px);
+    border-radius: 8px;
+    background: transparent;
+    height: 10px;
+}
+
+#toast-progress::-moz-progress-bar {
+    /*background-color: red;*/
+    background: rgba(var(--color-secondary-500));
+}
+

package/src/lib/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

package/src/lib/components/Card.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-	export let margin = "0";
-	export let marginBottom = "3em";
-	export let overrideStyle = "";
-	export let includeDataNoSnippet = true;
-
-	// warning: don't forget the semi-colon when adding new style!
-	const style = `
-		--turnip-card-margin: ${margin};
-		--turnip-card-margin-bottom: ${marginBottom};
-		${overrideStyle};
-	`;
-</script>
-
-{#if (includeDataNoSnippet)}
-	<div class="card turnip-card" style={style} data-no-snippet>
-		<slot name="content" class="card" />
-	</div>
-{:else }
-	<div class="card turnip-card" style={style}>
-		<slot name="content" class="card" />
-	</div>
-{/if}
-
-<style lang="postcss">
-    .turnip-card {
-        @apply bg-surface-100 dark:bg-surface-900;
-        margin: var(--turnip-card-margin);
-        margin-bottom: var(--turnip-card-margin-bottom);
-        border-radius: var(--theme-rounded-container);
-    }
-</style>
+<script lang="ts">
+	export let margin = "0";
+	export let marginBottom = "2lh";
+	export let overrideStyle = "";
+	export let includeDataNoSnippet = true;
+
+	// warning: don't forget the semi-colon when adding new style!
+	const style = `
+		--turnip-card-margin: ${margin};
+		--turnip-card-margin-bottom: ${marginBottom};
+		${overrideStyle};
+	`;
+</script>
+
+{#if (includeDataNoSnippet)}
+	<div class="card turnip-card" style={style} data-no-snippet>
+		<slot name="content" class="card" />
+	</div>
+{:else }
+	<div class="card turnip-card" style={style}>
+		<slot name="content" class="card" />
+	</div>
+{/if}
+
+<style lang="postcss">
+    .turnip-card {
+        @apply bg-surface-100 dark:bg-surface-900;
+        margin: var(--turnip-card-margin);
+        margin-bottom: var(--turnip-card-margin-bottom);
+        border-radius: var(--theme-rounded-container);
+    }
+</style>

package/src/lib/components/CarouselElement.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-    export let activeGameIndex: number;
-    export let selfIndex: number;
-
-    import {fly, slide, scale} from "svelte/transition";
-
-</script>
-
-{#if (activeGameIndex === selfIndex)}
-	<!--todo: make section consistent size for all-->
-	<section class="game-showcase"
-	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
-		<slot/>
-	</section>
-{/if}
-
-<style>
-    .game-showcase {
-        @apply snap-center rounded-container-token;
-        margin: auto;
-        width: 100%;
-    }
+<script lang="ts">
+    export let activeGameIndex: number;
+    export let selfIndex: number;
+
+    import {fly, slide, scale} from "svelte/transition";
+
+</script>
+
+{#if (activeGameIndex === selfIndex)}
+	<!--todo: make section consistent size for all-->
+	<section class="game-showcase"
+	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
+		<slot/>
+	</section>
+{/if}
+
+<style>
+    .game-showcase {
+        @apply snap-center rounded-container-token;
+        margin: auto;
+        width: 100%;
+    }
 </style>

package/src/lib/components/Chip.svelte

@@ -1,12 +1,13 @@
-<span class="chip variant-filled-tertiary">
-<slot />
-</span>
-
-<style lang="postcss">
-    .chip {
-        border-radius: 1em;
-        margin: 0.25em;
-        font-weight: bold;
-        pointer-events: none;
-    }
-</style>
+<span class="chip variant-filled-tertiary">
+<slot />
+</span>
+
+<style lang="postcss">
+    .chip {
+        border-radius: 1em;
+        margin: 0.25em;
+        font-weight: bold;
+        pointer-events: none;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+    }
+</style>

package/src/lib/components/ElementVisbilityDetector.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-    import {onMount} from "svelte";
-
-    export let isVisible = true;
-
-    let stickyElem: HTMLElement;
-
-    let observer: undefined | IntersectionObserver;
-    onMount(() => {
-        observer = new IntersectionObserver(
-            ([e]) => {
-                isVisible = e.intersectionRatio >= 1;
-            },
-            {threshold: [1]}
-        );
-        observer.observe(stickyElem);
-    });
-</script>
-
-<span bind:this={stickyElem}>
-	<slot/>
-</span>
+<script lang="ts">
+    import {onMount} from "svelte";
+
+    export let isVisible = true;
+
+    let stickyElem: HTMLElement;
+
+    let observer: undefined | IntersectionObserver;
+    onMount(() => {
+        observer = new IntersectionObserver(
+            ([e]) => {
+                isVisible = e.intersectionRatio >= 1;
+            },
+            {threshold: [1]}
+        );
+        observer.observe(stickyElem);
+    });
+</script>
+
+<span bind:this={stickyElem}>
+	<slot/>
+</span>

package/src/lib/components/OnElementVisbilityChanged.ts

@@ -1 +1 @@
-export type OnElementVisibilityChanged = (isVisible: boolean) => void;
+export type OnElementVisibilityChanged = (isVisible: boolean) => void;