fix: remove unnecessary margin from content header actions (#182)

* fix: remove unnecessary margin from content header actions * chore: clean up demo component * fix: styling of demo component * fix: place scripts in head Co-authored-by: arnevandoorslaer <[email protected]>
useid · Sep 22, 2022 · cf4151a · cf4151a
1 parent f164969
commit cf4151a
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 19 deletions.
diff --git a/packages/dgt-components/demo/demo.component.ts b/packages/dgt-components/demo/demo.component.ts
@@ -8,7 +8,6 @@ import { FormEvent, FormUpdatedEvent } from '../lib/components/forms/form.events
 import { FormValidator } from '../lib/components/forms/form-validator';
 import { FormElementComponent } from '../lib/components/forms/form-element.component';
 import { define } from '../lib/util/define';
-import { hydrate } from '../lib/util/hydrate';
 import { getTranslator, getTranslatorFor, MemoryTranslatorFactory, setTranslator, setTranslatorFactory, TRANSLATIONS_LOADED, Translator } from '@digita-ai/dgt-utils';
 
 
@@ -170,6 +169,10 @@ export class DemoComponent extends RxLitElement {
     return [
       unsafeCSS(Theme),
       css`
+      h1 {
+        margin: 0;
+        padding: 0;
+      }
       form {
         display: flex;
         flex-direction: column;

diff --git a/packages/dgt-components/demo/demo.ts b/packages/dgt-components/demo/demo.ts
@@ -5,13 +5,17 @@ import { DemoAuthenticateComponent } from './demo-authenticate.component';
 import { ListItemComponent } from '../lib/components/list-item/list-item.component';
 import { DemoComponent } from './demo.component';
 import { ProgressBarComponent } from '../lib/components/progress-bar/progress-bar.component';
+import { hydrate } from '../lib/util/hydrate';
+import { define } from '../lib/util/define';
+import { ContentHeaderComponent } from '../lib/components/header/content-header.component';
 
 
-customElements.define('demo-auth', DemoAuthenticateComponent);
-customElements.define('card-component', CardComponent);
-customElements.define('list-item', ListItemComponent);
-customElements.define('demo-component', DemoComponent);
-customElements.define('progress-bar', ProgressBarComponent);
+define('demo-auth', DemoAuthenticateComponent);
+define('card-component', CardComponent);
+define('list-item', ListItemComponent);
+define('demo-component', DemoComponent);
+define('progress-bar', ProgressBarComponent);
+define('content-header-component', hydrate(ContentHeaderComponent)());
 
 const parser = new Parser();
 

diff --git a/packages/dgt-components/demo/index.html b/packages/dgt-components/demo/index.html
@@ -7,18 +7,33 @@
   <link href="./styles.module.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
-</head>
-<body>
-
-  <!-- just a placeholder for serving in develop -->
   <script>window.global = window;</script>
   <script type="module" src="./demo.ts"></script>
-  <demo-component></demo-component>
-  <demo-auth></demo-auth>
-  <list-item>
-    <div slot="icon"><img style="height: 50px" src="./itsme.svg"></div>
-    <div slot="text">Lorem</div>
-    <div slot="action"><img style="height: 50px" src="./itsme.svg"></div>
-  </list-item>
+</head>
+<body style="width:100%">  
+  <content-header-component style="margin:0;">
+    <div slot="icon">I</div>
+    <div slot="actions"> 
+      <a class="business" href="https://get.use.id/business">A</a>
+    </div>
+    <div slot="actions"> 
+      <a class="business" href="https://get.use.id/business">B</a>
+    </div>
+    <div slot="actions"> 
+      <a class="business" href="https://get.use.id/business">C</a>
+    </div>
+    <div class="language" slot="actions">
+      <span>EN</span>
+    </div>
+  </content-header-component>
+  <div style="width:550px;margin:auto;padding:40px 0;">
+    <demo-component></demo-component>
+    <demo-auth></demo-auth>
+    <list-item>
+      <div slot="icon"><img style="height: 50px" src="./itsme.svg"></div>
+      <div slot="text">Lorem</div>
+      <div slot="action"><img style="height: 50px" src="./itsme.svg"></div>
+    </list-item>
+  </div>
 </body>
 </html>
diff --git a/packages/dgt-components/lib/components/header/content-header.component.ts b/packages/dgt-components/lib/components/header/content-header.component.ts
@@ -39,6 +39,8 @@ export class ContentHeaderComponent extends LitElement {
       unsafeCSS(Theme),
       css`
         :host {
+          box-sizing: border-box;
+          width: 100%;
           height: 99px;
           padding: 0px var(--gap-large);
           background-color: var( --colors-background-light);
@@ -55,6 +57,10 @@ export class ContentHeaderComponent extends LitElement {
           color: var(--colors-foreground-inverse);
           fill: var(--colors-foreground-inverse);
         }
+        content-header-component {
+          position: absolute;
+          width: 100%;
+        }
         .icon {
           font-size: 25px;
         }
@@ -84,7 +90,7 @@ export class ContentHeaderComponent extends LitElement {
           line-height: var(--gap-normal);
         }
         .actions {
-          margin-right: var(--gap-normal);
+          margin: 0;
           display: flex;
           flex-direction: row;
         }
@@ -99,7 +105,6 @@ export class ContentHeaderComponent extends LitElement {
           fill: var(--colors-primary-light);
           color: var(--colors-primary-light);
           cursor: pointer;
-          margin-left: var(--gap-normal);
         }
         :host.inverse .actions ::slotted(*) {
           fill: var(--colors-foreground-inverse);