@abgov/react-components 4.0.0-alpha.68 → 4.0.0-alpha.69

package/lib/skeleton/skeleton.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 export declare type SkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile";
+declare type SkeletonSize = 1 | 2 | 3 | 4;
 interface WCProps {
-    size: number;
+    maxwidth?: string;
+    size?: SkeletonSize;
+    linecount?: number;
     type: SkeletonType;
 }
 declare global {
@@ -12,8 +15,10 @@ declare global {
     }
 }
 export interface SkeletonProps {
+    maxWidth?: string;
+    size?: SkeletonSize;
+    lineCount?: number;
     type: SkeletonType;
-    size?: number;
 }
-export declare const GoASkeleton: ({ type, size }: SkeletonProps) => JSX.Element;
+export declare const GoASkeleton: ({ maxWidth, size, lineCount, type }: SkeletonProps) => JSX.Element;
 export default GoASkeleton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.68",
+  "version": "4.0.0-alpha.69",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -1241,7 +1241,7 @@ function instance$A($$self, $$props, $$invalidate) {
 class AppHeader extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--font-family)}.app-header{margin:0 auto;border-bottom:1px solid var(--color-gray-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
+    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--font-family)}.app-header{margin:0 auto;border-bottom:1px solid var(--color-gray-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:1.5rem 1.125rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -12056,9 +12056,9 @@ function create_if_block$3(ctx) {
       attr(div1, "class", div1_class_value = "card card-" +
       /*size*/
       ctx[1]);
-      set_style(div1, "--width",
-      /*width*/
-      ctx[0] + "px");
+      set_style(div1, "--max-width",
+      /*maxwidth*/
+      ctx[0]);
     },
 
     m(target, anchor) {
@@ -12104,11 +12104,11 @@ function create_if_block$3(ctx) {
       }
 
       if (!current || dirty &
-      /*width*/
+      /*maxwidth*/
       1) {
-        set_style(div1, "--width",
-        /*width*/
-        ctx[0] + "px");
+        set_style(div1, "--max-width",
+        /*maxwidth*/
+        ctx[0]);
       }
     },
 
@@ -12278,7 +12278,7 @@ function create_fragment$7(ctx) {
 
 function instance$5($$self, $$props, $$invalidate) {
   let {
-    width = 320
+    maxwidth
   } = $$props;
   let {
     size = 1
@@ -12291,25 +12291,25 @@ function instance$5($$self, $$props, $$invalidate) {
   } = $$props;
 
   $$self.$$set = $$props => {
-    if ('width' in $$props) $$invalidate(0, width = $$props.width);
+    if ('maxwidth' in $$props) $$invalidate(0, maxwidth = $$props.maxwidth);
     if ('size' in $$props) $$invalidate(1, size = $$props.size);
     if ('linecount' in $$props) $$invalidate(2, linecount = $$props.linecount);
     if ('type' in $$props) $$invalidate(3, type = $$props.type);
   };
 
-  return [width, size, linecount, type];
+  return [maxwidth, size, linecount, type];
 }
 
 class Skeleton extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--color-gray-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--color-gray-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--color-gray-100);border-radius:4px}.card{width:100%}@media(min-width: 320px){.card{width:var(--width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--color-gray-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--color-gray-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--color-gray-100);border-radius:4px}.card{width:100%}@media(min-width: 480px){.card{max-width:var(--max-width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$5, create_fragment$7, safe_not_equal, {
-      width: 0,
+      maxwidth: 0,
       size: 1,
       linecount: 2,
       type: 3
@@ -12328,16 +12328,16 @@ class Skeleton extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["width", "size", "linecount", "type"];
+    return ["maxwidth", "size", "linecount", "type"];
   }
 
-  get width() {
+  get maxwidth() {
     return this.$$.ctx[0];
   }
 
-  set width(width) {
+  set maxwidth(maxwidth) {
     this.$$set({
-      width
+      maxwidth
     });
     flush();
   }
@@ -15110,12 +15110,16 @@ const GoARadioGroup = ({
 };
 
 const GoASkeleton = ({
-  type,
-  size: _size = 1
+  maxWidth,
+  size,
+  lineCount,
+  type
 }) => {
   return jsx("goa-skeleton", {
+    maxwidth: maxWidth,
+    linecount: lineCount,
     type: type,
-    size: _size
+    size: size
   }, void 0);
 };
 

package/react-components.umd.js

@@ -1282,7 +1282,7 @@
 	class AppHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--font-family)}.app-header{margin:0 auto;border-bottom:1px solid var(--color-gray-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
+	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--font-family)}.app-header{margin:0 auto;border-bottom:1px solid var(--color-gray-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:1.5rem 1.125rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -12105,9 +12105,9 @@
 	      attr(div1, "class", div1_class_value = "card card-" +
 	      /*size*/
 	      ctx[1]);
-	      set_style(div1, "--width",
-	      /*width*/
-	      ctx[0] + "px");
+	      set_style(div1, "--max-width",
+	      /*maxwidth*/
+	      ctx[0]);
 	    },
 
 	    m(target, anchor) {
@@ -12153,11 +12153,11 @@
 	      }
 
 	      if (!current || dirty &
-	      /*width*/
+	      /*maxwidth*/
 	      1) {
-	        set_style(div1, "--width",
-	        /*width*/
-	        ctx[0] + "px");
+	        set_style(div1, "--max-width",
+	        /*maxwidth*/
+	        ctx[0]);
 	      }
 	    },
 
@@ -12327,7 +12327,7 @@
 
 	function instance$5($$self, $$props, $$invalidate) {
 	  let {
-	    width = 320
+	    maxwidth
 	  } = $$props;
 	  let {
 	    size = 1
@@ -12340,25 +12340,25 @@
 	  } = $$props;
 
 	  $$self.$$set = $$props => {
-	    if ('width' in $$props) $$invalidate(0, width = $$props.width);
+	    if ('maxwidth' in $$props) $$invalidate(0, maxwidth = $$props.maxwidth);
 	    if ('size' in $$props) $$invalidate(1, size = $$props.size);
 	    if ('linecount' in $$props) $$invalidate(2, linecount = $$props.linecount);
 	    if ('type' in $$props) $$invalidate(3, type = $$props.type);
 	  };
 
-	  return [width, size, linecount, type];
+	  return [maxwidth, size, linecount, type];
 	}
 
 	class Skeleton extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--color-gray-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--color-gray-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--color-gray-100);border-radius:4px}.card{width:100%}@media(min-width: 320px){.card{width:var(--width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--color-gray-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--color-gray-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--color-gray-100);border-radius:4px}.card{width:100%}@media(min-width: 480px){.card{max-width:var(--max-width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$5, create_fragment$7, safe_not_equal, {
-	      width: 0,
+	      maxwidth: 0,
 	      size: 1,
 	      linecount: 2,
 	      type: 3
@@ -12377,16 +12377,16 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["width", "size", "linecount", "type"];
+	    return ["maxwidth", "size", "linecount", "type"];
 	  }
 
-	  get width() {
+	  get maxwidth() {
 	    return this.$$.ctx[0];
 	  }
 
-	  set width(width) {
+	  set maxwidth(maxwidth) {
 	    this.$$set({
-	      width
+	      maxwidth
 	    });
 	    flush();
 	  }
@@ -15153,10 +15153,13 @@
 	};
 
 	var GoASkeleton = function GoASkeleton(_a) {
-	  var type = _a.type,
-	      _b = _a.size,
-	      size = _b === void 0 ? 1 : _b;
+	  var maxWidth = _a.maxWidth,
+	      size = _a.size,
+	      lineCount = _a.lineCount,
+	      type = _a.type;
 	  return jsxRuntime.jsx("goa-skeleton", {
+	    maxwidth: maxWidth,
+	    linecount: lineCount,
 	    type: type,
 	    size: size
 	  }, void 0);