parent ec8f8b5

author hwigyeompark <[email protected]> 1718486357 -0400
committer hwigyeompark <[email protected]> 1720166697 -0400

refactor: refine to more semantic

refactor: modify minor styles based on figma

refactor: combine CSS in JS

remove: separated CSS file

rename: move JS file to /components

fix: add style tag

refactor: align depth of HTML

fix : adjust the new component writting styles and apply feedback provided

refactor: modified code structures according to the pr feedback

Revert "refactor: modify review item component"

feat: add review item component responsive design

remove: separated CSS, JS file

chore: update file paths in main.js

refactor: modify component based on updated new pattern

style: add colors

remove: unnecessary media query

refactor: rename attributes for clarity

chore: add comment about future removal of .review-card-list styles

Add footer-icon

Format document

fix typo in footer-icon.js

Fix component name in accordance with the code pattern

Simplify footer-icon.js

Co-authored-by: Evan Suhyeong Lee <[email protected]>

Add icon files

fix icon name

Open in new window

Co-authored-by: Evan Suhyeong Lee <[email protected]>

Update components/footer-icon.js

Co-authored-by: Evan Suhyeong Lee <[email protected]>

Extension check for various length of extension

feat: Add font weight variables for Spoqa Han Sans Neo

Fix footer-icon validateAttributes

feature: add step text link component and re-design step component

feat: re-design step component

style: modify some of styles

style: add color

feat: add step component responsive

refactor: Remove duplicate code by extracting common functionality into BaseElement

refactor: rename BaseElement to BaseStepElement

style: format StepTextLink HTML for better readability

fix: restore accidentally removed text in ds-review-item

style: Remove unused style code from index.html

style: add large media query in Step component

fix: remove unnecessary spacing

delete unused component

add work-break property to hero's h2

feat: implement intro section component

feat: add favicon

components/footer-icon.js

@@ -0,0 +1,63 @@
+import { css, html } from "../html-css-utils.js";
+
+class FooterIcon extends HTMLElement {
+  constructor() {
+    super();
+
+    this.validateAttributes();
+    this.render();
+  }
+
+  validateAttributes() {
+    const attributes = ["href", "width", "height", "iconSrc", "iconAlt"];
+
+    for (let i = 0; i < attributes.length; i++) {
+      if (!this.hasAttribute(attributes[i])) {
+        throw new Error(`The "${attributes[i]}" attribute is required.`);
+      }
+    }
+
+    const iconSrc = this.getAttribute("iconSrc");
+    const validExtensions = [".svg", ".png", ".jpg", ".jpeg"];
+    const extension = iconSrc.slice(iconSrc.lastIndexOf(".")).toLowerCase();
+
+    if (!validExtensions.includes(extension)) {
+      throw new Error(`The "iconSrc" attribute must end with one of the following extensions: ${validExtensions.join(", ")}.`);
+    }
+  }
+
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    const width = this.getAttribute("width");
+    const height = this.getAttribute("height");
+
+    return css`
+      a {
+        display: block;
+      }
+
+      img {
+        width: ${width};
+        height: ${height};
+      }
+    `;
+  }
+
+  createHtml() {
+    const href = this.getAttribute("href");
+    const iconSrc = this.getAttribute("iconSrc");
+    const iconAlt = this.getAttribute("iconAlt");
+
+    return html`
+      <a href="${href}" target="_blank">
+        <img src="${iconSrc}" alt="${iconAlt}" />
+      </a>
+    `;
+  }
+}
+
+customElements.define("ds-footer-icon", FooterIcon);

components/hero.js

@@ -20,6 +20,7 @@ class Hero extends HTMLElement {
         h2 {
           font-weight: inherit;
           font-size: 30px;
+          word-break: keep-all;
         }
 
         @media only screen and (min-width: 768px) {

components/image.js

@@ -0,0 +1,53 @@
+import { css, html } from "../html-css-utils.js";
+
+class Image extends HTMLElement {
+  constructor() {
+    super();
+
+    this.validateAttributes();
+    this.render();
+  }
+
+  validateAttributes() {
+    if (!this.hasAttribute("alt")) {
+      throw new Error('The "alt" attribute is required.');
+    }
+  }
+
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    return css`
+      img {
+        display: block;
+        max-width: 100%;
+      }
+    `;
+  }
+
+  createHtml() {
+    const src = this.getAttribute("src") || "";
+    const alt = this.getAttribute("alt") || "";
+    const width = this.getAttribute("width");
+    const height = this.getAttribute("height");
+
+    let imgHtml = `<img src="${src}" alt="${alt}"`;
+
+    if (width) {
+      imgHtml += ` width="${width}"`;
+    }
+
+    if (height) {
+      imgHtml += ` height="${height}"`;
+    }
+
+    imgHtml += `>`;
+
+    return imgHtml;
+  }
+}
+
+customElements.define("ds-image", Image);

components/intro-section.js

@@ -0,0 +1,114 @@
+import { css, html } from "../html-css-utils.js";
+
+class IntroSection extends HTMLElement {
+  constructor() {
+    super();
+
+    this.render();
+  }
+
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    return css`
+      section {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        height: 100vh;
+        background: linear-gradient(
+            0deg,
+            rgba(251, 250, 255, 0) -10%,
+            rgba(251, 250, 255, 1) 25%
+          ),
+          linear-gradient(
+            90deg,
+            rgba(36, 234, 202, 0.8) 0%,
+            rgba(132, 109, 233, 0.8) 100%
+          );
+      }
+
+      .inner-container {
+        display: flex;
+        flex-direction: column;
+        row-gap: 30px;
+
+        /* NOTE: Requires accurate policy settings */
+        margin: 0 7.5%;
+      }
+
+      @media only screen and (min-width: 768px) {
+        /* NOTE: Requires accurate policy settings */
+        .inner-container {
+          row-gap: 50px;
+          margin: 0 9%;
+        }
+      }
+
+      @media only screen and (min-width: 1024px) {
+        .inner-container {
+          position: relative;
+          flex-direction: row-reverse;
+          row-gap: unset;
+          /* NOTE: Requires accurate policy settings */
+          margin: 0;
+          width: 80%;
+        }
+      }
+
+      article {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        /* NOTE: Requires accurate policy settings */
+        row-gap: -4.9px;
+
+        width: 70%;
+      }
+
+      @media only screen and (min-width: 768px) {
+        article {
+          /* NOTE: Requires accurate policy settings */
+          row-gap: -3.2px;
+        }
+      }
+
+      @media only screen and (min-width: 1024px) {
+        article {
+          row-gap: unset;
+          width: 40%;
+        }
+      }
+
+      @media only screen and (min-width: 1024px) {
+        aside {
+          width: 60%;
+        }
+      }
+    `;
+  }
+
+  createHtml() {
+    return html`
+      <section>
+        <div class="inner-container">
+          <aside>
+            <slot name="image"></slot>
+          </aside>
+
+          <article>
+            <slot name="heading"></slot>
+            <slot name="button"></slot>
+          </article>
+        </div>
+      </section>
+    `;
+  }
+}
+
+customElements.define("ds-intro-section", IntroSection);

components/review-item.js

@@ -0,0 +1,134 @@
+import { css, html } from "../html-css-utils.js";
+
+class ReviewItem extends HTMLElement {
+  constructor() {
+    super();
+
+    this.validateAttributes();
+    this.render();
+  }
+
+  validateAttributes() {
+    if (!this.hasAttribute("authorImgSrc")) {
+      throw new Error('The "authorImgSrc" attribute is required.');
+    }
+
+    if (!this.hasAttribute("content")) {
+      throw new Error('The "content" attribute is required.');
+    }
+
+    if (!this.hasAttribute("author")) {
+      throw new Error('The "author" attribute is required.');
+    }
+  }
+
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    return css`
+      .review-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border-radius: 10px;
+        padding: 39px 20px;
+        background-color: var(--bg-300);
+        color: var(--text-900);
+      }
+      .review-item blockquote,
+      figure {
+        margin: 0;
+      }
+      .review-img {
+        width: 104px;
+        height: 104px;
+        flex-shrink: 0;
+        object-fit: cover;
+      }
+      .review-img figure > img {
+        width: 100%;
+        height: 100%;
+        padding-top: 7px;
+        border-radius: 48%;
+        background-color: #ffffff;
+      }
+      .review-content {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        text-align: center;
+        margin-top: 10px;
+      }
+      .review-content blockquote {
+        font-size: 14px;
+        margin-top: 17px;
+        word-break: keep-all;
+      }
+      .review-content figcaption {
+        width: 100%;
+        font-size: 16px;
+        text-align: center;
+      }
+
+      /* Medium devices such as tablets (768px and up) */
+      @media only screen and (min-width: 768px) {
+        .review-item {
+          padding: 37px 20px;
+        }
+        .review-content blockquote {
+          margin-top: 16px;
+        }
+      }
+
+      /* Large devices such as laptops (1024px and up) */
+      @media only screen and (min-width: 1024px) {
+        .review-item {
+          padding: 41px 51px 31px;
+          flex-direction: row;
+          align-items: flex-start;
+        }
+        .review-img {
+          margin-right: 31px;
+        }
+        .review-content {
+          flex-direction: column;
+          margin-top: 0;
+          text-align: left;
+        }
+        .review-content blockquote {
+          margin-top: 0;
+          margin-bottom: 14px;
+          word-break: unset;
+        }
+        .review-content figcaption {
+          text-align: right;
+        }
+      }
+    `;
+  }
+
+  createHtml() {
+    const authorImgSrc = this.getAttribute("authorImgSrc");
+    const content = this.getAttribute("content");
+    const author = this.getAttribute("author");
+
+    return html`
+      <article class="review-item">
+        <section class="review-img">
+          <figure>
+            <img src="${authorImgSrc}" alt="Author profile image" />
+          </figure>
+        </section>
+        <section class="review-content">
+          <blockquote>${content}</blockquote>
+          <figcaption>${author}</figcaption>
+        </section>
+      </article>
+    `;
+  }
+}
+
+customElements.define("ds-review-item", ReviewItem);