Merge pull request #31 from kacper-cyra/ui-18/add_portrait_component

add portrait component
kacper-cyra · Dec 12, 2021 · 736742f · 736742f
2 parents 3aa4b57 + 327872f
commit 736742f
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 3 deletions.
diff --git a/README_NEW.md b/README_NEW.md
@@ -0,0 +1,13 @@
+## Conventions
+
+For file structure reference this [repo](https://github.com/wiledal/vanilla-bean).
+
+Branches are named after category, task number and with meaningful description. E.g.'ui-18/add_portrait_component'.
+
+## Warnings
+
+Parcel in v2 has a [bug](https://github.com/parcel-bundler/parcel/issues/5965) witch it's cache and will not update changes on website without manual page refresh.
+
+## Useful resources
+
+- [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements),
diff --git a/index.html b/index.html
@@ -14,6 +14,6 @@
   <body>
     <div id="swquiz-app"></div>
 
-    <script src="src/index.js" type="module"></script>
+    <script src="./src/index.js" type="module"></script>
   </body>
 </html>
diff --git a/src/app/App.js b/src/app/App.js
@@ -1 +1,3 @@
-export const App = ({ options }) => {};
+export const App = ({ options: { rootNodeId } }) => {
+  const rootNode = document.getElementById(rootNodeId);
+};
diff --git a/src/components/Portrait/Portrait.js b/src/components/Portrait/Portrait.js
@@ -0,0 +1,30 @@
+import * as classes from './style.module.scss';
+
+export const PORTRAIT_COMPONENT_NAME = 'portrait-component';
+
+class Portrait extends HTMLElement {
+  constructor() {
+    super();
+    this._contents = new DocumentFragment();
+
+    this.imageContainer = Portrait.imageContainerBuilder();
+
+    this._contents.appendChild(this.imageContainer);
+  }
+
+  connectedCallback() {
+    this.imageContainer.style.backgroundImage = `url(${this.getAttribute(
+      'data-image-url',
+    )})`;
+    this.appendChild(this._contents);
+  }
+
+  static imageContainerBuilder() {
+    const imageContainer = document.createElement('div');
+    imageContainer.className = classes.imageContainer;
+
+    return imageContainer;
+  }
+}
+
+customElements.define(PORTRAIT_COMPONENT_NAME, Portrait);
diff --git a/src/components/Portrait/style.module.scss b/src/components/Portrait/style.module.scss
@@ -0,0 +1,11 @@
+@use '../../themes/theme.scss' as *;
+
+.portrait {
+  display: flex;
+  flex: 1;
+  box-shadow: $red-box-shadow;
+  border-radius: $border-radius;
+  min-height: 100px;
+  background-size: cover;
+  background-position: center;
+}
diff --git a/src/index.js b/src/index.js
@@ -7,11 +7,14 @@ const SW_API_BASE_URL = process.env.SW_API_BASE_URL || 'https://swapi.dev/api';
 const QUIZ_MAX_TIME = process.env.QUIZ_MAX_TIME_SECONDS
   ? process.env.QUIZ_MAX_TIME_SECONDS * ONE_SECOND_MILLIS
   : 120 * ONE_SECOND_MILLIS;
+const ROOT_NODE_ID = 'swquiz-app';
 
-window.onload = () =>
+window.onload = () => {
   App({
     options: {
       swApiBaseUrl: SW_API_BASE_URL,
       quizMaxTime: QUIZ_MAX_TIME,
+      rootNodeId: ROOT_NODE_ID,
     },
   });
+};
diff --git a/src/themes/theme.scss b/src/themes/theme.scss
@@ -0,0 +1,3 @@
+$red-box-shadow: 4px 4px 40px 0px #ff0000e5, 0px 4px 4px 0px #00000040;
+
+$border-radius: 16px;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		$red-box-shadow: 4px 4px 40px 0px #ff0000e5, 0px 4px 4px 0px #00000040;

		$border-radius: 16px;