@oicl/openbridge-webcomponents 0.0.13 → 0.0.14

package/src/automation/end-point-line/end-point-line.ts

@@ -57,6 +57,7 @@ export class ObcEndPointLine extends LitElement {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         transform="rotate(${rotation})"
+        class="${this.direction}"
       >
         <path
           d="M${12 - h} 25 V${12 + h}h-${(terminalWidth - width) /
@@ -74,6 +75,28 @@ export class ObcEndPointLine extends LitElement {
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+
+      &.top,
+      &.bottom {
+        left: -12px;
+      }
+
+      &.bottom {
+        top: -24px;
+      }
+
+      &.left,
+      &.right {
+        top: -12px;
+      }
+
+      &.right {
+        left: -24px;
+      }
+    }
   `;
 }
 

package/src/automation/horizontal-line/horizontal-line.stories.ts

@@ -1,11 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcHorizontalLine} from './horizontal-line';
 import './horizontal-line';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcHorizontalLine> = {
   title: 'Line/Horizontal line',
   tags: ['autodocs'],
   component: 'obc-horizontal-line',
+  decorators: [crossDecorator],
   argTypes: {
     medium: {
       options: ['normal', 'empty', 'water'],

package/src/automation/horizontal-line/horizontal-line.ts

@@ -78,9 +78,10 @@ export class ObcHorizontalLine extends LitElement {
       display: block;
       line-height: 0;
     }
-    .line {
+    svg {
       position: relative;
       left: -0.5px;
+      top: -12px;
     }
   `;
 }

package/src/automation/line-cross/line-cross.stories.ts

@@ -1,11 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcLineCross} from './line-cross';
 import './line-cross';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcLineCross> = {
   title: 'Line/Cross',
   tags: ['autodocs'],
   component: 'obc-line-cross',
+  decorators: [crossDecorator],
   argTypes: {
     medium: {
       options: ['normal', 'empty', 'water'],

package/src/automation/line-cross/line-cross.ts

@@ -107,6 +107,12 @@ export class ObcLineCross extends LitElement {
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+      top: -12px;
+      left: -12px;
+    }
   `;
 }
 

package/src/automation/line-overlap/line-overlap.stories.ts

@@ -1,12 +1,14 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcLineOverlap} from './line-overlap';
 import './line-overlap';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcLineOverlap> = {
   title: 'Line/Overlap',
   tags: ['autodocs'],
   component: 'obc-line-overlap',
   args: {},
+  decorators: [crossDecorator],
   argTypes: {
     medium: {
       options: ['normal', 'empty', 'water'],

package/src/automation/line-overlap/line-overlap.ts

@@ -59,6 +59,12 @@ export class ObcLineOverlap extends LitElement {
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+      left: -12px;
+      top: -12px;
+    }
   `;
 }
 

package/src/automation/line.stories.ts

@@ -38,7 +38,7 @@ const meta: Meta = {
 
         #line1 {
           position: absolute;
-          top: calc(24px * 1);
+          top: calc(24px * 0.5);
           left: calc(24px * 0);
         }
 
@@ -51,7 +51,7 @@ const meta: Meta = {
         #line2 {
           position: absolute;
           top: calc(24px * 0);
-          left: calc(24px * 1);
+          left: calc(24px * 0.5);
         }
         #corner-2-3 {
           position: absolute;
@@ -61,7 +61,7 @@ const meta: Meta = {
 
         #line3 {
           position: absolute;
-          top: calc(24px * 1);
+          top: calc(24px * 0.5);
           left: calc(24px * 6);
         }
         #three-way {
@@ -80,7 +80,7 @@ const meta: Meta = {
         <obc-vertical-line
           medium=${args.medium}
           lineType=${args.lineType}
-          length="5"
+          length="5.5"
           id="line1"
         ></obc-vertical-line>
         <obc-corner-line

package/src/automation/three-way-line/three-way-line.stories.ts

@@ -1,11 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcThreeWayLine} from './three-way-line';
 import './three-way-line';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcThreeWayLine> = {
   title: 'Line/Three way line',
   tags: ['autodocs'],
   component: 'obc-three-way-line',
+  decorators: [crossDecorator],
   argTypes: {
     medium: {
       options: ['normal', 'empty', 'water'],

package/src/automation/three-way-line/three-way-line.ts

@@ -103,6 +103,12 @@ export class ObcThreeWayLine extends LitElement {
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+      top: -12px;
+      left: -12px;
+    }
   `;
 }
 

package/src/automation/vertical-line/vertical-line.stories.ts

@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcVerticalLine} from './vertical-line';
 import './vertical-line';
 import '../horizontal-line/horizontal-line';
-import {html} from 'lit';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcVerticalLine> = {
   title: 'Line/Vertical line',
@@ -14,6 +14,7 @@ const meta: Meta<typeof ObcVerticalLine> = {
       control: {type: 'radio'},
     },
   },
+  decorators: [crossDecorator],
 } satisfies Meta<ObcVerticalLine>;
 
 export default meta;
@@ -34,38 +35,3 @@ export const Primary: Story = {
     },
   },
 };
-
-export const Complex: Story = {
-  render: () => {
-    return html`
-      <style>
-        .canvas {
-          position: relative;
-          width: 400px;
-          height: 400px;
-        }
-
-        #line1 {
-          position: absolute;
-          top: 24px;
-        }
-
-        #line2 {
-          position: absolute;
-          top: calc(24px * 3);
-          left: calc(24px * 5);
-        }
-        #line3 {
-          position: absolute;
-          top: calc(24px * 3);
-          left: calc(24px * 5);
-        }
-      </style>
-      <div class="canvas">
-        <obc-vertical-line length="5" id="line1"></obc-vertical-line>
-        <obc-vertical-line length="2" id="line2"></obc-vertical-line>
-        <obc-horizontal-line length="5" id="line3"></obc-horizontal-line>
-      </div>
-    `;
-  },
-};

package/src/automation/vertical-line/vertical-line.ts

@@ -82,9 +82,10 @@ export class ObcVerticalLine extends LitElement {
       line-height: 0;
     }
 
-    .line {
+    svg {
       position: relative;
       top: -0.5px;
+      left: -12px;
     }
   `;
 }

package/src/storybook-util.ts

@@ -5,7 +5,7 @@ import './icons/icon-04-day';
 import './icons/icon-04-brilliance-low';
 import './icons/icon-04-brilliance-high';
 import './icons/icon-06-ship';
-import {TemplateResult, html} from 'lit';
+import {HTMLTemplateResult, TemplateResult, html} from 'lit';
 import {spread} from '@open-wc/lit-helpers';
 
 export const iconIds = [
@@ -47,3 +47,43 @@ export function iconIdToIconHtml(
       throw new Error(`Unknown icon id: ${id}`);
   }
 }
+
+export function crossDecorator(story: () => unknown): HTMLTemplateResult {
+  return html` <style>
+      .wrapper {
+        width: 100%;
+        height: 100vh;
+        position: relative;
+      }
+
+      .wrapper > * {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+      }
+
+      .wrapper::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        left: calc(50% - 0.5px);
+        background-color: rgb(0, 0, 0, 0.3);
+      }
+
+      .wrapper::after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1px;
+        top: calc(50% - 0.5px);
+        background-color: rgb(0, 0, 0, 0.3);
+        z-index: -100;
+      }
+    </style>
+    <div class="wrapper">${story()}</div>`;
+}