feat: define display type for web component :host elements

nl-design-system · Aug 24, 2021 · e3bbe84 · e3bbe84
1 parent 08260e0
commit e3bbe84
Show file tree

Hide file tree

Showing 50 changed files with 253 additions and 24 deletions.
diff --git a/components/article/stencil.scss b/components/article/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
diff --git a/components/article/stencil.tsx b/components/article/stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-article",
-  styleUrl: "bem.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class Article {

diff --git a/components/badge-counter/stencil.scss b/components/badge-counter/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: inline-block;
+}
diff --git a/components/badge-counter/stencil.tsx b/components/badge-counter/stencil.tsx
@@ -6,7 +6,7 @@ import { Component, Prop, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-badge-counter",
-  styleUrl: "bem.scss",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class BadgeCounter {

diff --git a/components/badge-data/stencil.scss b/components/badge-data/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: inline-block;
+}
diff --git a/components/badge-data/stencil.tsx b/components/badge-data/stencil.tsx
@@ -6,7 +6,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-badge-data",
-  styleUrl: "bem.scss",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class BadgeData {

diff --git a/components/badge-status/stencil.scss b/components/badge-status/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: inline-block;
+}
diff --git a/components/badge-status/stencil.tsx b/components/badge-status/stencil.tsx
@@ -6,7 +6,7 @@ import { Component, Prop, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-badge-status",
-  styleUrl: "bem.scss",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class BadgeStatus {

diff --git a/components/breadcrumb/stencil.scss b/components/breadcrumb/stencil.scss
@@ -5,3 +5,7 @@
 
 @import "./bem";
 @import "../link/bem";
+
+:host {
+  display: block;
+}
diff --git a/components/button/stencil.scss b/components/button/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: inline-block;
+}
diff --git a/components/button/stencil.tsx b/components/button/stencil.tsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 @Component({
   tag: "utrecht-button",
-  styleUrl: "bem.scss",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class Button {

diff --git a/components/document/stencil.scss b/components/document/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
diff --git a/components/document/stencil.tsx b/components/document/stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-document",
-  styleUrl: "bem.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class Document {

diff --git a/components/form-field-checkbox/stencil.scss b/components/form-field-checkbox/stencil.scss
@@ -6,3 +6,7 @@
 @import "./bem";
 @import "../form-label/bem";
 @import "../checkbox/bem";
+
+:host {
+  display: block;
+}
diff --git a/components/form-field-description/stencil.scss b/components/form-field-description/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
diff --git a/components/form-field-description/stencil.tsx b/components/form-field-description/stencil.tsx
@@ -8,7 +8,7 @@ import clsx from "clsx";
 
 @Component({
   tag: "utrecht-form-field-description",
-  styleUrl: "bem.scss",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class FormFieldDescription {

diff --git a/components/form-field-textarea/stencil.scss b/components/form-field-textarea/stencil.scss
@@ -6,3 +6,7 @@
 @import "../form-label/bem";
 @import "../form-field/bem";
 @import "../textarea/bem";
+
+:host {
+  display: block;
+}
diff --git a/components/form-field-textbox/stencil.scss b/components/form-field-textbox/stencil.scss
@@ -6,3 +6,7 @@
 @import "./bem";
 @import "../form-label/bem";
 @import "../textbox/bem";
+
+:host {
+  display: block;
+}
diff --git a/components/heading-1/stencil.scss b/components/heading-1/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
diff --git a/components/heading-1/stencil.tsx b/components/heading-1/stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-heading-1",
-  styleUrl: "bem.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class Heading1 {

diff --git a/components/heading-2/stencil.scss b/components/heading-2/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
diff --git a/components/heading-2/stencil.tsx b/components/heading-2/stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-heading-2",
-  styleUrl: "bem.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class Heading2 {

diff --git a/components/heading-3/stencil.scss b/components/heading-3/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
diff --git a/components/heading-3/stencil.tsx b/components/heading-3/stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-heading-3",
-  styleUrl: "bem.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class Heading3 {

diff --git a/components/heading-4/stencil.scss b/components/heading-4/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
diff --git a/components/heading-4/stencil.tsx b/components/heading-4/stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-heading-4",
-  styleUrl: "bem.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class Heading4 {

diff --git a/components/heading-5/stencil.scss b/components/heading-5/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
diff --git a/components/heading-5/stencil.tsx b/components/heading-5/stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-heading-5",
-  styleUrl: "bem.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class Heading5 {

diff --git a/components/heading-6/stencil.scss b/components/heading-6/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}
diff --git a/components/heading/stencil.scss b/components/heading/stencil.scss
@@ -9,3 +9,7 @@
 @import "../heading-4/bem";
 @import "../heading-5/bem";
 @import "../heading-6/bem";
+
+:host {
+  display: block;
+}
diff --git a/components/html-content/stencil.scss b/components/html-content/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./html";
+
+:host {
+  display: block;
+}
diff --git a/components/html-content/stencil.tsx b/components/html-content/stencil.tsx
@@ -6,7 +6,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-html-content",
-  styleUrl: "html.scss",
+  styleUrl: "stencil.scss",
   shadow: false,
 })
 export class HTMLContent {

diff --git a/components/icon/facebook.stencil.tsx b/components/icon/facebook.stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-icon-facebook",
-  styleUrl: "stencil.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class IconFacebook {

diff --git a/components/icon/instagram.stencil.tsx b/components/icon/instagram.stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-icon-instagram",
-  styleUrl: "stencil.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class IconInstagram {

diff --git a/components/icon/linkedin.stencil.tsx b/components/icon/linkedin.stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-icon-linkedin",
-  styleUrl: "stencil.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class IconLinkedin {

diff --git a/components/icon/stencil.css → components/icon/stencil.scss b/components/icon/stencil.css → components/icon/stencil.scss
@@ -1,3 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+:host {
+  display: inline-block;
+}
+
 svg {
   color: var(--utrecht-icon-color, var(--utrecht-document-color, currentColor));
   height: var(--utrecht-icon-size, 100%);

diff --git a/components/icon/twitter.stencil.tsx b/components/icon/twitter.stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-icon-twitter",
-  styleUrl: "stencil.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class IconTwitter {

diff --git a/components/icon/whatsapp.stencil.tsx b/components/icon/whatsapp.stencil.tsx
@@ -2,7 +2,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-icon-whatsapp",
-  styleUrl: "stencil.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class IconWhatsapp {

diff --git a/components/logo/stencil.scss b/components/logo/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: inline;
+}
diff --git a/components/logo/stencil.tsx b/components/logo/stencil.tsx
@@ -7,7 +7,7 @@ import { Component, h } from "@stencil/core";
 
 @Component({
   tag: "utrecht-logo",
-  styleUrl: "bem.css",
+  styleUrl: "stencil.scss",
   shadow: true,
 })
 export class Logo {

diff --git a/components/page-footer/stencil.scss b/components/page-footer/stencil.scss
@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+:host {
+  display: block;
+}