@storybook/addon-backgrounds 7.0.0-alpha.49 → 7.0.0-alpha.50

package/dist/preview.d.ts

@@ -1,6 +1,6 @@
 import * as lib_types_dist from 'lib/types/dist';
 
-declare const decorators: ((StoryFn: lib_types_dist.PartialStoryFn<lib_types_dist.Framework, lib_types_dist.Args>, context: lib_types_dist.StoryContext<lib_types_dist.Framework, lib_types_dist.Args>) => unknown)[];
+declare const decorators: ((StoryFn: lib_types_dist.PartialStoryFn<lib_types_dist.Renderer, lib_types_dist.Args>, context: lib_types_dist.StoryContext<lib_types_dist.Renderer, lib_types_dist.Args>) => unknown)[];
 declare const parameters: {
     backgrounds: {
         grid: {

package/dist/preview.js

@@ -1,20 +1,20 @@
-var P=Object.create;var b=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var D=(e,r)=>{for(var o in r)b(e,o,{get:r[o],enumerable:!0})},E=(e,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of _(r))!Y.call(e,t)&&t!==o&&b(e,t,{get:()=>r[t],enumerable:!(n=H(r,t))||n.enumerable});return e};var G=(e,r,o)=>(o=e!=null?P(K(e)):{},E(r||!e||!e.__esModule?b(o,"default",{value:e,enumerable:!0}):o,e)),I=e=>E(b({},"__esModule",{value:!0}),e);var q={};D(q,{decorators:()=>U,globals:()=>X,parameters:()=>j});module.exports=I(q);var m=require("@storybook/addons");var z="storybook/background",d="backgrounds";var Q={UPDATE:`${z}/update`};var A=G(require("global")),w=require("ts-dedent"),B=require("@storybook/client-logger"),{document:c,window:N}=A.default,h=()=>N.matchMedia("(prefers-reduced-motion: reduce)").matches,v=(e,r=[],o)=>{if(e==="transparent")return"transparent";if(r.find(t=>t.value===e))return e;let n=r.find(t=>t.name===o);if(n)return n.value;if(o){let t=r.map(i=>i.name).join(", ");B.logger.warn(w.dedent`
+var H=Object.create;var b=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var D=(r,e)=>{for(var o in e)b(r,o,{get:e[o],enumerable:!0})},E=(r,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of F(e))!Y.call(r,t)&&t!==o&&b(r,t,{get:()=>e[t],enumerable:!(n=_(e,t))||n.enumerable});return r};var G=(r,e,o)=>(o=r!=null?H(K(r)):{},E(e||!r||!r.__esModule?b(o,"default",{value:r,enumerable:!0}):o,r)),I=r=>E(b({},"__esModule",{value:!0}),r);var q={};D(q,{decorators:()=>U,globals:()=>X,parameters:()=>j});module.exports=I(q);var g=require("@storybook/addons");var z="storybook/background",d="backgrounds";var Q={UPDATE:`${z}/update`};var A=G(require("global")),B=require("ts-dedent"),h=require("@storybook/client-logger"),{document:c,window:N}=A.default,R=()=>N.matchMedia("(prefers-reduced-motion: reduce)").matches,v=(r,e=[],o)=>{if(r==="transparent")return"transparent";if(e.find(t=>t.value===r))return r;let n=e.find(t=>t.name===o);if(n)return n.value;if(o){let t=e.map(i=>i.name).join(", ");h.logger.warn(B.dedent`
         Backgrounds Addon: could not find the default color "${o}".
         These are the available colors for your story based on your configuration:
         ${t}.
-      `)}return"transparent"},k=e=>{(Array.isArray(e)?e:[e]).forEach(O)},O=e=>{let r=c.getElementById(e);r&&r.parentElement.removeChild(r)},C=(e,r)=>{let o=c.getElementById(e);if(o)o.innerHTML!==r&&(o.innerHTML=r);else{let n=c.createElement("style");n.setAttribute("id",e),n.innerHTML=r,c.head.appendChild(n)}},F=(e,r,o)=>{let n=c.getElementById(e);if(n)n.innerHTML!==r&&(n.innerHTML=r);else{let t=c.createElement("style");t.setAttribute("id",e),t.innerHTML=r;let i=`addon-backgrounds-grid${o?`-docs-${o}`:""}`,a=c.getElementById(i);a?a.parentElement.insertBefore(t,a):c.head.appendChild(t)}};var T=(e,r)=>{var x;let{globals:o,parameters:n}=r,t=(x=o[d])==null?void 0:x.value,i=n[d],a=(0,m.useMemo)(()=>i.disable?"transparent":v(t,i.values,i.default),[i,t]),s=(0,m.useMemo)(()=>a&&a!=="transparent",[a]),l=r.viewMode==="docs"?`#anchor--${r.id} .docs-story`:".sb-show-main",g=(0,m.useMemo)(()=>{let p="transition: background-color 0.3s;";return`
+      `)}return"transparent"},$=r=>{(Array.isArray(r)?r:[r]).forEach(O)},O=r=>{let e=c.getElementById(r);e&&e.parentElement.removeChild(e)},w=(r,e)=>{let o=c.getElementById(r);if(o)o.innerHTML!==e&&(o.innerHTML=e);else{let n=c.createElement("style");n.setAttribute("id",r),n.innerHTML=e,c.head.appendChild(n)}},C=(r,e,o)=>{let n=c.getElementById(r);if(n)n.innerHTML!==e&&(n.innerHTML=e);else{let t=c.createElement("style");t.setAttribute("id",r),t.innerHTML=e;let i=`addon-backgrounds-grid${o?`-docs-${o}`:""}`,s=c.getElementById(i);s?s.parentElement.insertBefore(t,s):c.head.appendChild(t)}};var T=(r,e)=>{var M;let{globals:o,parameters:n}=e,t=(M=o[d])==null?void 0:M.value,i=n[d],s=(0,g.useMemo)(()=>i.disable?"transparent":v(t,i.values,i.default),[i,t]),a=(0,g.useMemo)(()=>s&&s!=="transparent",[s]),l=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",u=(0,g.useMemo)(()=>{let p="transition: background-color 0.3s;";return`
       ${l} {
-        background: ${a} !important;
-        ${h()?"":p}
+        background: ${s} !important;
+        ${R()?"":p}
       }
-    `},[a,l]);return(0,m.useEffect)(()=>{let p=r.viewMode==="docs"?`addon-backgrounds-docs-${r.id}`:"addon-backgrounds-color";if(!s){k(p);return}F(p,g,r.viewMode==="docs"?r.id:null)},[s,g,r]),e()};var $=require("@storybook/addons");var L=(e,r)=>{var S;let{globals:o,parameters:n}=r,t=n[d].grid,i=((S=o[d])==null?void 0:S.grid)===!0&&t.disable!==!0,{cellAmount:a,cellSize:s,opacity:l}=t,g=r.viewMode==="docs",p=n.layout===void 0||n.layout==="padded"?16:0,u=t.offsetX??(g?20:p),f=t.offsetY??(g?20:p),M=(0,$.useMemo)(()=>{let y=r.viewMode==="docs"?`#anchor--${r.id} .docs-story`:".sb-show-main",R=[`${s*a}px ${s*a}px`,`${s*a}px ${s*a}px`,`${s}px ${s}px`,`${s}px ${s}px`].join(", ");return`
+    `},[s,l]);return(0,g.useEffect)(()=>{let p=e.viewMode==="docs"?`addon-backgrounds-docs-${e.id}`:"addon-backgrounds-color";if(!a){$(p);return}C(p,u,e.viewMode==="docs"?e.id:null)},[a,u,e]),r()};var x=require("@storybook/addons");var L=(r,e)=>{var S;let{globals:o,parameters:n}=e,t=n[d].grid,i=((S=o[d])==null?void 0:S.grid)===!0&&t.disable!==!0,{cellAmount:s,cellSize:a,opacity:l}=t,u=e.viewMode==="docs",p=n.layout===void 0||n.layout==="padded"?16:0,m=t.offsetX??(u?20:p),f=t.offsetY??(u?20:p),k=(0,x.useMemo)(()=>{let y=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",P=[`${a*s}px ${a*s}px`,`${a*s}px ${a*s}px`,`${a}px ${a}px`,`${a}px ${a}px`].join(", ");return`
       ${y} {
-        background-size: ${R} !important;
-        background-position: ${u}px ${f}px, ${u}px ${f}px, ${u}px ${f}px, ${u}px ${f}px !important;
+        background-size: ${P} !important;
+        background-position: ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px !important;
         background-blend-mode: difference !important;
         background-image: linear-gradient(rgba(130, 130, 130, ${l}) 1px, transparent 1px),
          linear-gradient(90deg, rgba(130, 130, 130, ${l}) 1px, transparent 1px),
          linear-gradient(rgba(130, 130, 130, ${l/2}) 1px, transparent 1px),
          linear-gradient(90deg, rgba(130, 130, 130, ${l/2}) 1px, transparent 1px) !important;
       }
-    `},[s]);return(0,$.useEffect)(()=>{let y=r.viewMode==="docs"?`addon-backgrounds-grid-docs-${r.id}`:"addon-backgrounds-grid";if(!i){k(y);return}C(y,M)},[i,M,r]),e()};var U=[L,T],j={[d]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},X={[d]:null};0&&(module.exports={decorators,globals,parameters});
+    `},[a]);return(0,x.useEffect)(()=>{let y=e.viewMode==="docs"?`addon-backgrounds-grid-docs-${e.id}`:"addon-backgrounds-grid";if(!i){$(y);return}w(y,k)},[i,k,e]),r()};var U=[L,T],j={[d]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},X={[d]:null};0&&(module.exports={decorators,globals,parameters});

package/dist/preview.mjs

@@ -1,11 +1,11 @@
-import{b as e,c as k,d as S,e as m,f as x,g as w}from"./chunk-6BSBHII6.mjs";import{useMemo as y,useEffect as v}from"@storybook/addons";var A=(g,o)=>{let{globals:f,parameters:d}=o,a=f[e]?.value,n=d[e],t=y(()=>n.disable?"transparent":S(a,n.values,n.default),[n,a]),r=y(()=>t&&t!=="transparent",[t]),s=o.viewMode==="docs"?`#anchor--${o.id} .docs-story`:".sb-show-main",i=y(()=>{let c="transition: background-color 0.3s;";return`
+import{b as t,c as k,d as S,e as g,f as x,g as A}from"./chunk-6BSBHII6.mjs";import{useMemo as y,useEffect as w}from"@storybook/addons";var M=(m,o)=>{let{globals:f,parameters:d}=o,n=f[t]?.value,a=d[t],e=y(()=>a.disable?"transparent":S(n,a.values,a.default),[a,n]),r=y(()=>e&&e!=="transparent",[e]),s=o.viewMode==="docs"?`#anchor--${o.id} .docs-story`:".sb-show-main",i=y(()=>{let c="transition: background-color 0.3s;";return`
       ${s} {
-        background: ${t} !important;
+        background: ${e} !important;
         ${k()?"":c}
       }
-    `},[t,s]);return v(()=>{let c=o.viewMode==="docs"?`addon-backgrounds-docs-${o.id}`:"addon-backgrounds-color";if(!r){m(c);return}w(c,i,o.viewMode==="docs"?o.id:null)},[r,i,o]),g()};import{useMemo as C,useEffect as P}from"@storybook/addons";var F=(g,o)=>{let{globals:f,parameters:d}=o,a=d[e].grid,n=f[e]?.grid===!0&&a.disable!==!0,{cellAmount:t,cellSize:r,opacity:s}=a,i=o.viewMode==="docs",b=d.layout===void 0||d.layout==="padded"?16:0,p=a.offsetX??(i?20:b),l=a.offsetY??(i?20:b),$=C(()=>{let u=o.viewMode==="docs"?`#anchor--${o.id} .docs-story`:".sb-show-main",M=[`${r*t}px ${r*t}px`,`${r*t}px ${r*t}px`,`${r}px ${r}px`,`${r}px ${r}px`].join(", ");return`
+    `},[e,s]);return w(()=>{let c=o.viewMode==="docs"?`addon-backgrounds-docs-${o.id}`:"addon-backgrounds-color";if(!r){g(c);return}A(c,i,o.viewMode==="docs"?o.id:null)},[r,i,o]),m()};import{useMemo as C,useEffect as P}from"@storybook/addons";var R=(m,o)=>{let{globals:f,parameters:d}=o,n=d[t].grid,a=f[t]?.grid===!0&&n.disable!==!0,{cellAmount:e,cellSize:r,opacity:s}=n,i=o.viewMode==="docs",b=d.layout===void 0||d.layout==="padded"?16:0,p=n.offsetX??(i?20:b),l=n.offsetY??(i?20:b),$=C(()=>{let u=o.viewMode==="docs"?`#anchor--${o.id} .docs-story`:".sb-show-main",v=[`${r*e}px ${r*e}px`,`${r*e}px ${r*e}px`,`${r}px ${r}px`,`${r}px ${r}px`].join(", ");return`
       ${u} {
-        background-size: ${M} !important;
+        background-size: ${v} !important;
         background-position: ${p}px ${l}px, ${p}px ${l}px, ${p}px ${l}px, ${p}px ${l}px !important;
         background-blend-mode: difference !important;
         background-image: linear-gradient(rgba(130, 130, 130, ${s}) 1px, transparent 1px),
@@ -13,4 +13,4 @@ import{b as e,c as k,d as S,e as m,f as x,g as w}from"./chunk-6BSBHII6.mjs";impo
          linear-gradient(rgba(130, 130, 130, ${s/2}) 1px, transparent 1px),
          linear-gradient(90deg, rgba(130, 130, 130, ${s/2}) 1px, transparent 1px) !important;
       }
-    `},[r]);return P(()=>{let u=o.viewMode==="docs"?`addon-backgrounds-grid-docs-${o.id}`:"addon-backgrounds-grid";if(!n){m(u);return}x(u,$)},[n,$,o]),g()};var N=[F,A],O={[e]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},L={[e]:null};export{N as decorators,L as globals,O as parameters};
+    `},[r]);return P(()=>{let u=o.viewMode==="docs"?`addon-backgrounds-grid-docs-${o.id}`:"addon-backgrounds-grid";if(!a){g(u);return}x(u,$)},[a,$,o]),m()};var N=[R,M],O={[t]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},L={[t]:null};export{N as decorators,L as globals,O as parameters};

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -75,13 +75,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/api": "7.0.0-alpha.49",
-    "@storybook/client-logger": "7.0.0-alpha.49",
-    "@storybook/components": "7.0.0-alpha.49",
-    "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/theming": "7.0.0-alpha.49",
-    "@storybook/types": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
@@ -111,7 +111,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",