parameterize pos-image story to manipulate style

Author: angelo-v

storybook/stories/7_pos-image.stories.mdx

@@ -1,67 +1,54 @@
-import {
-  html
-} from "lit-html";
+import { html } from "lit-html";
 
-import {
-  Canvas,
-  Meta,
-  Story
-} from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 
 <Meta
   title="pos-image"
   args={{
+    width: "300px",
+    height: "300px",
+    borderRadius: "0",
     url: "https://solidproject.solidcommunity.net/SPS/assets/img/solid-emblem.svg",
-    notFoundUrl: "https://solidproject.solidcommunity.net/public/non-existing-image.png",
-    unauthenticatedUrl: "https://solidproject.solidcommunity.net/private/restricted-access.png"
+    notFoundUrl:
+      "https://solidproject.solidcommunity.net/public/non-existing-image.png",
+    unauthenticatedUrl:
+      "https://solidproject.solidcommunity.net/private/restricted-access.png",
   }}
 />
 
-
 ## pos-image
 
 Fetches and shows an image. It supports images that are behind access control.
 
-While loading it will show an animated skeleton and afterwords the successfully loaded image:
+While loading it will show an animated skeleton and afterwords the successfully
+loaded image:
 
-<Canvas
-  withSource="open">
-  <Story
-    name="Display an image"
-  >
-    {({url}) => html`
-      <pos-image
-        src=${url}/>
+<Canvas withSource="open">
+  <Story name="Display an image">
+    {({ url, width, height, borderRadius }) => html`
+      <pos-image style="--width: ${width}; --height: ${height}; --border-radius: ${borderRadius};" src=${url} />
     `}
   </Story>
 </Canvas>
 
 If the file is not found it will display a box with an error message:
 
-<Canvas
-  withSource="open">
-  <Story
-    name="Not Found"
-  >
-    {({notFoundUrl}) => html`
-      <pos-image
-        src=${notFoundUrl}/>
-    `}
+<Canvas withSource="open">
+  <Story name="Not Found">
+    {({ notFoundUrl, width, height, borderRadius }) => html` <pos-image style="--width: ${width}; --height: ${height}; --border-radius: ${borderRadius};" src=${notFoundUrl} /> `}
   </Story>
 </Canvas>
 
-If the file is behind access control, but the user is not authenticated it will show that:
+If the file is behind access control, but the user is not authenticated it will
+show that:
 
-<Canvas
-  withSource="open">
-  <Story
-    name="Unauthenticated"
-  >
-    {({unauthenticatedUrl}) => html`
-      <pos-image
-        src=${unauthenticatedUrl}/>
+<Canvas withSource="open">
+  <Story name="Unauthenticated">
+    {({ unauthenticatedUrl, width, height, borderRadius }) => html`
+      <pos-image style="--width: ${width}; --height: ${height}; --border-radius: ${borderRadius};" src=${unauthenticatedUrl} />
     `}
   </Story>
 </Canvas>
 
-After authentication the image will load normally, if the user has the required access rights.
+After authentication the image will load normally, if the user has the required
+access rights.