@oicl/openbridge-webcomponents 0.0.13 → 0.0.15

package/dist/svghelpers/roundedArch.js

@@ -0,0 +1,63 @@
+function roundedArch({
+  startAngle,
+  endAngle,
+  r,
+  R,
+  roundOutsideCut,
+  roundInsideCut
+}) {
+  const a1 = startAngle * Math.PI / 180;
+  const a2 = endAngle * Math.PI / 180;
+  const X1 = Math.sin(a1) * R;
+  const Y1 = -Math.cos(a1) * R;
+  const x1 = Math.sin(a1) * r;
+  const y1 = -Math.cos(a1) * r;
+  const X2 = Math.sin(a2) * R;
+  const Y2 = -Math.cos(a2) * R;
+  const x2 = Math.sin(a2) * r;
+  const y2 = -Math.cos(a2) * r;
+  const roundRadius = 8;
+  let svgPath = "";
+  if (roundOutsideCut) {
+    const roundDeltaAngle = Math.asin(roundRadius / R);
+    const largeArcFlag = a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;
+    const x1i = Math.sin(a1) * (R - roundRadius);
+    const y1i = -Math.cos(a1) * (R - roundRadius);
+    const x1o = Math.sin(a1 + roundDeltaAngle) * R;
+    const y1o = -Math.cos(a1 + roundDeltaAngle) * R;
+    const x2i = Math.sin(a2) * (R - roundRadius);
+    const y2i = -Math.cos(a2) * (R - roundRadius);
+    const x2o = Math.sin(a2 - roundDeltaAngle) * R;
+    const y2o = -Math.cos(a2 - roundDeltaAngle) * R;
+    svgPath += `M ${x1i} ${y1i} A ${roundRadius} ${roundRadius} 1 0 1 ${x1o} ${y1o}`;
+    svgPath += `A ${R} ${R} 1 ${largeArcFlag} 1 ${x2o} ${y2o}`;
+    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x2i} ${y2i}`;
+  } else {
+    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;
+    svgPath += `M ${X1} ${Y1} A ${R} ${R} 1 ${largeArcFlag} 1 ${X2} ${Y2}`;
+  }
+  if (roundInsideCut) {
+    const roundDeltaAngle = Math.asin(roundRadius / r);
+    const largeArcFlag = a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;
+    const x1i = Math.sin(a1) * (r + roundRadius);
+    const y1i = -Math.cos(a1) * (r + roundRadius);
+    const x1o = Math.sin(a1 + roundDeltaAngle) * r;
+    const y1o = -Math.cos(a1 + roundDeltaAngle) * r;
+    const x2i = Math.sin(a2) * (r + roundRadius);
+    const y2i = -Math.cos(a2) * (r + roundRadius);
+    const x2o = Math.sin(a2 - roundDeltaAngle) * r;
+    const y2o = -Math.cos(a2 - roundDeltaAngle) * r;
+    svgPath += `L ${x2i} ${y2i} A ${roundRadius} ${roundRadius} 1 0 1 ${x2o} ${y2o}`;
+    svgPath += `A ${r} ${r} 1 ${largeArcFlag} 0 ${x1o} ${y1o}`;
+    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x1i} ${y1i}`;
+  } else {
+    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;
+    svgPath += `L ${x2} ${y2} A ${r} ${r} 1 ${largeArcFlag} 0 ${x1} ${y1}`;
+  }
+  svgPath += `Z`;
+  return svgPath;
+}
+export {
+  roundedArch
+};
+//# sourceMappingURL=roundedArch.js.map

package/dist/svghelpers/roundedArch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roundedArch.js","sources":["../../src/svghelpers/roundedArch.ts"],"sourcesContent":["export function roundedArch({\n  startAngle,\n  endAngle,\n  r,\n  R,\n  roundOutsideCut,\n  roundInsideCut,\n}: {\n  startAngle: number;\n  R: number;\n  r: number;\n  endAngle: number;\n  roundOutsideCut: boolean;\n  roundInsideCut: boolean;\n}) {\n  const a1 = (startAngle * Math.PI) / 180;\n  const a2 = (endAngle * Math.PI) / 180;\n\n  const X1 = Math.sin(a1) * R;\n  const Y1 = -Math.cos(a1) * R;\n  const x1 = Math.sin(a1) * r;\n  const y1 = -Math.cos(a1) * r;\n  const X2 = Math.sin(a2) * R;\n  const Y2 = -Math.cos(a2) * R;\n  const x2 = Math.sin(a2) * r;\n  const y2 = -Math.cos(a2) * r;\n  const roundRadius = 8;\n\n  let svgPath = '';\n  if (roundOutsideCut) {\n    const roundDeltaAngle = Math.asin(roundRadius / R);\n    const largeArcFlag =\n      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;\n    const x1i = Math.sin(a1) * (R - roundRadius);\n    const y1i = -Math.cos(a1) * (R - roundRadius);\n    const x1o = Math.sin(a1 + roundDeltaAngle) * R;\n    const y1o = -Math.cos(a1 + roundDeltaAngle) * R;\n    const x2i = Math.sin(a2) * (R - roundRadius);\n    const y2i = -Math.cos(a2) * (R - roundRadius);\n    const x2o = Math.sin(a2 - roundDeltaAngle) * R;\n    const y2o = -Math.cos(a2 - roundDeltaAngle) * R;\n    // Rounded start\n    svgPath += `M ${x1i} ${y1i} A ${roundRadius} ${roundRadius} 1 0 1 ${x1o} ${y1o}`;\n    // Arch\n    svgPath += `A ${R} ${R} 1 ${largeArcFlag} 1 ${x2o} ${y2o}`;\n    // Rounded end\n    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x2i} ${y2i}`;\n  } else {\n    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;\n    svgPath += `M ${X1} ${Y1} A ${R} ${R} 1 ${largeArcFlag} 1 ${X2} ${Y2}`;\n  }\n\n  if (roundInsideCut) {\n    const roundDeltaAngle = Math.asin(roundRadius / r);\n    const largeArcFlag =\n      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;\n    const x1i = Math.sin(a1) * (r + roundRadius);\n    const y1i = -Math.cos(a1) * (r + roundRadius);\n    const x1o = Math.sin(a1 + roundDeltaAngle) * r;\n    const y1o = -Math.cos(a1 + roundDeltaAngle) * r;\n    const x2i = Math.sin(a2) * (r + roundRadius);\n    const y2i = -Math.cos(a2) * (r + roundRadius);\n    const x2o = Math.sin(a2 - roundDeltaAngle) * r;\n    const y2o = -Math.cos(a2 - roundDeltaAngle) * r;\n    // Rounded start\n    svgPath += `L ${x2i} ${y2i} A ${roundRadius} ${roundRadius} 1 0 1 ${x2o} ${y2o}`;\n    // Arch\n    svgPath += `A ${r} ${r} 1 ${largeArcFlag} 0 ${x1o} ${y1o}`;\n    // Rounded end\n    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x1i} ${y1i}`;\n  } else {\n    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;\n    svgPath += `L ${x2} ${y2} A ${r} ${r} 1 ${largeArcFlag} 0 ${x1} ${y1}`;\n  }\n  svgPath += `Z`;\n  return svgPath;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "repository": {
     "type": "git",
@@ -31,6 +31,7 @@
     "release": "release-it"
   },
   "dependencies": {
+    "@lit-labs/observers": "^2.0.2",
     "lit": "^3.1.0"
   },
   "devDependencies": {

package/script/download-icons.ts

@@ -133,7 +133,7 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('obi-${name}')
 export class Obi${upperCammelCaseName} extends LitElement {
-  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+  @property({type: Boolean}) useCssColor = false;
 
   private icon = svg\`${singleColorIcon}\`;
 

package/src/automation/automation-button/automation-button.css

@@ -8,7 +8,88 @@
     } 
 }
 
+.outer-wrapper {
+    width: 0;
+    height: 0;
+}
+
 .wrapper {
+    position: absolute;
+
+    &.label-bottom {
+        top: -33px;
+        transform: translateX(-50%);
+    }
+
+    &.label-right {
+        left: -33px;
+        transform: translateY(-50%);
+    }
+
+    &.label-top{
+        bottom: -33px;
+        transform: translateX(-50%);
+    }
+
+    &.label-left {
+        right: -33px;
+        transform: translateY(-50%);
+    }
+
+    &.size-small {
+        &.label-bottom {
+            top: -25px;
+        }
+
+        &.label-right {
+            left: -25px;
+        }
+
+        &.label-top{
+            bottom: -25px;
+        }
+
+        &.label-left {
+            right: -25px;
+        }
+    }
+
+    &.size-large {
+        &.label-bottom {
+            top: -41px;
+        }
+
+        &.label-right {
+            left: -41px;
+        }
+
+        &.label-top{
+            bottom: -41px;
+        }
+
+        &.label-left {
+            right: -41px;
+        }
+    }
+
+    &.size-xl {
+        &.label-bottom {
+            top: -57px;
+        }
+
+        &.label-right {
+            left: -57px;
+        }
+
+        &.label-top{
+            bottom: -57px;
+        }
+
+        &.label-left {
+            right: -57px;
+        }
+    }
+
     display: flex;
     flex-direction: row;
     align-items: center;

package/src/automation/automation-button/automation-button.stories.ts

@@ -24,11 +24,13 @@ import '../../icons/icon-08-pump-on-horisontal';
 import '../../icons/icon-08-pump-off-horisontal';
 import '../valve-analog-three-way-icon/valve-analog-three-way-icon';
 import {BadgeSize} from '../../components/badge/badge';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcAutomationButton> = {
   title: 'Automation/Button',
   tags: ['autodocs'],
   component: 'obc-automation-button',
+  decorators: [crossDecorator],
   argTypes: {
     size: {
       options: ['small', 'regular', 'large', 'xl'],
@@ -93,7 +95,7 @@ export const ValveOpen: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-open
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-open>
@@ -124,7 +126,7 @@ export const ValveAlert: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-open
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-open>
@@ -158,12 +160,12 @@ export const ValveBadges: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-open
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-open>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-top-right"
@@ -171,7 +173,7 @@ export const ValveBadges: Story = {
         <obi-14-alert-off></obi-14-alert-off>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-top-left"
@@ -179,7 +181,7 @@ export const ValveBadges: Story = {
         <obi-08-auto></obi-08-auto>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-bottom-left"
@@ -187,7 +189,7 @@ export const ValveBadges: Story = {
         <obi-08-duty></obi-08-duty>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-bottom-right"
@@ -221,7 +223,7 @@ export const ValveProgress: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-open
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-open>
@@ -249,7 +251,7 @@ export const ValveClosed: Story = {
       ?progress=${args.progress}
     >
       <obi-09-twoway-digital-closed
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; transform: rotate(90deg); line-height: 0;"
       ></obi-09-twoway-digital-closed>
@@ -279,7 +281,7 @@ export const SwitchOn: Story = {
       ?progress=${args.progress}
     >
       <obi-09-switch-horizontal-on
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-switch-horizontal-on>
@@ -309,7 +311,7 @@ export const SwitchOff: Story = {
       ?progress=${args.progress}
     >
       <obi-09-switch-horizontal-off
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-switch-horizontal-off>
@@ -339,7 +341,7 @@ export const DamperOn: Story = {
       ?progress=${args.progress}
     >
       <obi-09-damper-horizontal-on
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-damper-horizontal-on>
@@ -369,7 +371,7 @@ export const DamperOff: Story = {
       ?progress=${args.progress}
     >
       <obi-09-damper-horizontal-off
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-damper-horizontal-off>
@@ -405,12 +407,12 @@ export const DamperBadges: Story = {
       ?progress=${args.progress}
     >
       <obi-09-damper-horizontal-on
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-09-damper-horizontal-on>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-top-right"
@@ -418,7 +420,7 @@ export const DamperBadges: Story = {
         <obi-14-alert-off></obi-14-alert-off>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-top-left"
@@ -426,7 +428,7 @@ export const DamperBadges: Story = {
         <obi-08-auto></obi-08-auto>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-bottom-left"
@@ -434,7 +436,7 @@ export const DamperBadges: Story = {
         <obi-08-duty></obi-08-duty>
       </obc-badge>
       <obc-badge
-        hide-number
+        hideNumber
         type="automation"
         .size=${badgeSize}
         slot="badge-bottom-right"
@@ -472,7 +474,7 @@ export const MotorOn: Story = {
       ?progress=${args.progress}
     >
       <obi-08-pump-on-horisontal
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-08-pump-on-horisontal>
@@ -507,7 +509,7 @@ export const MotorOff: Story = {
       ?progress=${args.progress}
     >
       <obi-08-pump-off-horisontal
-        use-css-color
+        usecsscolor
         slot="icon"
         style="display: block; line-height: 0;"
       ></obi-08-pump-off-horisontal>

package/src/automation/automation-button/automation-button.ts

@@ -159,66 +159,68 @@ export class ObcAutomationButton extends LitElement {
     const direction = this.getDirectionIcon();
 
     return html`
-      <button
-        class=${classMap({
-          wrapper: true,
-          ['size-' + this.size]: true,
-          ['variant-' + this.variant]: true,
-          ['state-' + this.state]: true,
-          ['label-' + this.labelPosition]: true,
-          ['label-size-' + this.labelSize]: true,
-          ['label-style-' + this.labelStyle]: true,
-          alert: this.alert,
-          progress: this.progress,
-        })}
-      >
-        <div class="icon-holder">
-          ${direction}
-          ${this.variant !== AutomationButtonVariant.double ||
-          this.size !== AutomationButtonSize.small
-            ? html`<div class="icon-primary">
-                <slot name="icon"></slot>
-              </div>`
-            : ''}
-          ${progressSpinner}
-          ${this.alert
-            ? html`<svg
-                class="alert-icon"
-                width="18"
-                height="31"
-                viewBox="0 0 18 31"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M 0 0 L 16 0 C 17.1046 0 18 0.8954 18 2 V 14.7889 C 18 15.5786 17.7662 16.3506 17.3282 17.0077 L 9 30 V 3 L  7 1 H 0  Z"
-                  fill="var(--alert-alarm-color)"
-                />
-                <path
-                  d="M12 4H14V11.5H12V4Z"
-                  fill="var(--on-alarm-active-color)"
-                />
-                <path
-                  d="M12 13.5H14V15.5H12V13.5Z"
-                  fill="var(--on-alarm-active-color)"
-                />
-              </svg> `
-            : ''}
-          <div class="badge-top-right">
-            <slot name="badge-top-right"></slot>
-          </div>
-          <div class="badge-top-left">
-            <slot name="badge-top-left"></slot>
-          </div>
-          <div class="badge-bottom-left">
-            <slot name="badge-bottom-left"></slot>
-          </div>
-          <div class="badge-bottom-right">
-            <slot name="badge-bottom-right"></slot>
+      <div class="outer-wrapper">
+        <button
+          class=${classMap({
+            wrapper: true,
+            ['size-' + this.size]: true,
+            ['variant-' + this.variant]: true,
+            ['state-' + this.state]: true,
+            ['label-' + this.labelPosition]: true,
+            ['label-size-' + this.labelSize]: true,
+            ['label-style-' + this.labelStyle]: true,
+            alert: this.alert,
+            progress: this.progress,
+          })}
+        >
+          <div class="icon-holder">
+            ${direction}
+            ${this.variant !== AutomationButtonVariant.double ||
+            this.size !== AutomationButtonSize.small
+              ? html`<div class="icon-primary">
+                  <slot name="icon"></slot>
+                </div>`
+              : ''}
+            ${progressSpinner}
+            ${this.alert
+              ? html`<svg
+                  class="alert-icon"
+                  width="18"
+                  height="31"
+                  viewBox="0 0 18 31"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M 0 0 L 16 0 C 17.1046 0 18 0.8954 18 2 V 14.7889 C 18 15.5786 17.7662 16.3506 17.3282 17.0077 L 9 30 V 3 L  7 1 H 0  Z"
+                    fill="var(--alert-alarm-color)"
+                  />
+                  <path
+                    d="M12 4H14V11.5H12V4Z"
+                    fill="var(--on-alarm-active-color)"
+                  />
+                  <path
+                    d="M12 13.5H14V15.5H12V13.5Z"
+                    fill="var(--on-alarm-active-color)"
+                  />
+                </svg> `
+              : ''}
+            <div class="badge-top-right">
+              <slot name="badge-top-right"></slot>
+            </div>
+            <div class="badge-top-left">
+              <slot name="badge-top-left"></slot>
+            </div>
+            <div class="badge-bottom-left">
+              <slot name="badge-bottom-left"></slot>
+            </div>
+            <div class="badge-bottom-right">
+              <slot name="badge-bottom-right"></slot>
+            </div>
           </div>
-        </div>
-        <div class="label">${labels}</div>
-      </button>
+          <div class="label">${labels}</div>
+        </button>
+      </div>
     `;
   }
 
@@ -360,7 +362,7 @@ export class ObcAutomationButton extends LitElement {
     } else if (this.direction === AutomationButtonDirection.standby) {
       return html`<obi-08-standby
         class="icon-direction"
-        use-css-color
+        usecsscolor
       ></obi-08-standby>`;
     }
     throw new Error('Invalid direction');

package/src/automation/automation-input-modal/automation-input-modal.stories.ts

@@ -56,7 +56,7 @@ export const Compact: Story = {
       </div>
       <div slot="preview"></div>
       <div slot="actions">
-        <obc-toggle-button-group has-labels value="run">
+        <obc-toggle-button-group hasLabels value="run">
           <obc-toggle-button-option value="stop"
             >Stop
             <obi-01-stop slot="icon"></obi-01-stop>
@@ -67,10 +67,10 @@ export const Compact: Story = {
           </obc-toggle-button-option>
         </obc-toggle-button-group>
         <div class="speed">
-          <obc-notification-button icon corner-left open-right>
+          <obc-notification-button icon cornerLeft openRight>
             <obi-02-chevron-double-left></obi-02-chevron-double-left>
           </obc-notification-button>
-          <obc-notification-button icon open-right>
+          <obc-notification-button icon openRight>
             <obi-02-chevron-left></obi-02-chevron-left>
           </obc-notification-button>
           <obc-input
@@ -79,10 +79,10 @@ export const Compact: Story = {
             textAlign="center"
             font="button"
           ></obc-input>
-          <obc-notification-button icon open-left>
+          <obc-notification-button icon openLeft>
             <obi-02-chevron-right></obi-02-chevron-right>
           </obc-notification-button>
-          <obc-notification-button icon corner-right open-left>
+          <obc-notification-button icon cornerRight openLeft>
             <obi-02-chevron-double-right></obi-02-chevron-double-right>
           </obc-notification-button>
           <div class="label">-10</div>

package/src/automation/automation-readout/automation-readout.stories.ts

@@ -6,11 +6,13 @@ import '../horizontal-line/horizontal-line';
 import '../vertical-line/vertical-line';
 import {LineMedium, LineType} from '../index';
 import {html} from 'lit';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcAutomationReadout> = {
   title: 'Automation/Readout',
   tags: ['autodocs'],
   component: 'obc-automation-readout',
+  decorators: [crossDecorator],
   args: {
     value: 25,
     unit: '°C',
@@ -52,13 +54,7 @@ export const UsageWithPipeBottom: Story = {
       #line-bottom {
         position: absolute;
         top: 0;
-        left: 0;
-      }
-
-      #readout-bottom {
-        position: absolute;
-        top: 12px; /* 12px is the height of the grid size */
-        left: calc(2.5 * 24px); /* 5 is the length of the line */
+        left: calc(-2.5 * 24px);
       }
     </style>
     <div class="canvas">
@@ -91,14 +87,8 @@ export const UsageWithPipeTop: Story = {
 
       #line-top {
         position: absolute;
-        top: 24px;
-        left: 0;
-      }
-
-      #readout-top {
-        position: absolute;
-        top: 36px; /* 12px is the height of the grid size */
-        left: calc(2.5 * 24px); /* 5 is the length of the line */
+        top: 0;
+        left: calc(-2.5 * 24px);
       }
     </style>
     <div class="canvas">
@@ -131,14 +121,8 @@ export const UsageWithPipeLeft: Story = {
 
       #line-left {
         position: absolute;
-        top: 0;
-        left: calc(24px * 3);
-      }
-
-      #readout-left {
-        position: absolute;
-        top: calc(2.5 * 24px); /* 24px is the height of the grid size */
-        left: calc(24px * 3 + 12px);
+        left: 0;
+        top: calc(-24px * 2.5);
       }
     </style>
     <div class="canvas">
@@ -171,14 +155,7 @@ export const UsageWithPipeRight: Story = {
 
       #line-right {
         position: absolute;
-        top: 0;
-        left: 0;
-      }
-
-      #readout-right {
-        position: absolute;
-        top: calc(2.5 * 24px); /* 24px is the height of the grid size */
-        left: 12px;
+        top: calc(-2.5 * 24px);
       }
     </style>
     <div class="canvas">

package/src/automation/automation-tank/automation-tank.css

@@ -15,6 +15,7 @@
     /* This is a hack to make the badge appear above the content */
     position: relative;
     top: -20px;
+    transform: translateX(-50%);
 }
 
 .badges {
@@ -54,7 +55,7 @@
 }
 
 .header {
-    width: 140px;
+    width: 150px;
     display: flex;
     align-items: center;
     justify-content: space-between;