@abcnews/components-builder 0.0.8 → 0.0.10

package/README.md

@@ -196,6 +196,15 @@ As a prerequisite your builder must store its state in window.location.hash. E.g
 
 Prefixes correlate to the different marker types that have been implemented in the app. Users can choose which type of marker they want to copy. This is the same object as the `ScreenshotTool` component.
 
+## Loader
+
+A fairly straightforward spinner with the text "Loading" underneath. Use it when the user needs to wait for a process to complete. You can adjust the size or text:
+
+```svelte
+<Loader width="32px" />
+<Loader>Reticulating splines</Loader>
+```
+
 ## Developing
 
 Once you've nstalled dependencies with `npm install`, start a development storybook:
@@ -214,15 +223,7 @@ To build the library:
 npm run build
 ```
 
-You can preview the production build with `npm run preview`.
-
-> To deploy the app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for the target environment.
-
-## Publishing
-
-Go into the `package.json` and give the package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish the library to [npm](https://www.npmjs.com):
+Then publish the new version with:
 
 ```bash
 npm publish

package/dist/Loader/Loader.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  /**
+   * @file
+   * A loading spinner
+   */
+  let { width = "32px", children = null } = $props();
+</script>
+
+<div class="loader" style:--width={width}>
+  <div class="loader__widget"></div>
+  <div class="loader__text">{@render children()}</div>
+</div>
+
+<style>
+  .loader {
+    font-family: "abcsans", sans-serif;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    animation: fadeIn 1s;
+  }
+  .loader__widget,
+  .loader__widget::after {
+    display: block;
+    position: relative;
+    width: var(--width);
+    height: var(--width);
+    border: 2px solid currentcolor;
+    border-radius: 100%;
+    box-sizing: border-box;
+  }
+  .loader__widget::after {
+    content: "";
+    display: block;
+    border-color: white;
+    position: absolute;
+    left: -2px;
+    top: -2px;
+    clip-path: polygon(0 0%, 50% 0, 50% 50%, 0% 50%);
+    animation: spin 1.5s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(45deg);
+    }
+    to {
+      transform: rotate(405deg);
+    }
+  }
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+</style>

package/dist/Loader/Loader.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Loader: import("svelte").Component<{
+    width?: string;
+    children?: any;
+}, {}, "">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;

package/dist/ScreenshotTool/saveAs.d.ts

@@ -1 +1 @@
-export function saveAs(blob: any, name: any): void;
+export default function saveAs(blob: any, name: any): void;

package/dist/ScreenshotTool/saveAs.js

@@ -7,7 +7,7 @@
  * License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
  * source  : http://purl.eligrey.com/github/FileSaver.js
  */
-export function saveAs(blob, name) {
+export default function saveAs(blob, name) {
   var a = document.createElement("a");
   name = name || blob.name || "download";
 

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export { default as ScreenshotTool } from "./ScreenshotTool/ScreenshotTool.svelt
 export { default as Typeahead } from "./Typeahead/Typeahead.svelte";
 export { default as UpdateChecker } from "./UpdateChecker/UpdateChecker.svelte";
 export { default as MarkerAdmin } from "./MarkerAdmin/MarkerAdmin.svelte";
+export { default as Loader } from "./Loader/Loader.svelte";

package/dist/index.js

@@ -8,3 +8,4 @@ export { default as ScreenshotTool } from "./ScreenshotTool/ScreenshotTool.svelt
 export { default as Typeahead } from "./Typeahead/Typeahead.svelte";
 export { default as UpdateChecker } from "./UpdateChecker/UpdateChecker.svelte";
 export { default as MarkerAdmin } from "./MarkerAdmin/MarkerAdmin.svelte";
+export { default as Loader } from "./Loader/Loader.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/components-builder",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",