Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update button-link with new pattern #70

Merged
merged 2 commits into from
Jun 24, 2024
Merged

feat: update button-link with new pattern #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
663348f
feat: add color global variables
sounmind Jun 23, 2024
8955d8d
feat: update button-link with new pattern
sounmind Jun 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 84 additions & 107 deletions components/button-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,11 @@
const css = /*css*/ `
<style>
/* Default: Extra-small devices such as small phones (less than 640px) */
a {
display: flex;
justify-content: center;
align-items: center;

width: max-content;
text-align: center;
}

a.secondary {
color: #000;
background-color: #d9d9d9;
}

a.small {
height: 35px;
padding: 10px 20px;
font-size: 13px;
border-radius: 7px;
}

a.big {
height: 45px;
padding: 10px 25px;
font-size: 14px;
border-radius: 10px;
}

a.ghost {
border: none;
border-radius: 0;
height: min-content;
}

a.small.ghost {
padding: 0;
}

a.big.ghost {
padding: auto;
color: #000;
background-color: transparent;
border: 1px solid #000;
border-radius: 10px;
}

/* Medium devices such as tablets (768px and up) */
@media only screen and (min-width: 768px) {
a.small {
padding: 5px 25px;
font-size: 14px;
}

a.big {
padding: 16px 40px;
font-size: 20px;
}
}

/* Large devices such as laptops (1024px and up) */
@media only screen and (min-width: 1024px) {
a.small {
padding: 5px 30px;
font-size: 16px;
}
}
</style>
`;

const html = /*html*/ `
<link rel="stylesheet" href="./global-styles.css" />
<a>
<slot></slot>
</a>
`;
import { css, html } from "../html-css-utils.js";

class ButtonLink extends HTMLElement {
constructor() {
super();

this.attachShadow({
mode: "open",
});
this.shadowRoot.innerHTML = css + html;

this.setDefaultAttributes();
this.validateAttributes();
this.updateAttributes();
this.render();
}

validateAttributes() {
Expand All @@ -109,7 +26,7 @@ class ButtonLink extends HTMLElement {

if (this.hasAttribute("variant")) {
const variant = this.getAttribute("variant");
const validVariants = ["ghost", "secondary"];
const validVariants = ["ghost", "primary"];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

variant 이름이 왜 자꾸 바뀌는 거에요? ㅋ

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

처음에 이 색이 회색이길래 primary인 줄 모르고 secondary로 지었다가, global variable에 아예 primary, secondary가 생겨서 이렇게 바꾸게 되었습니다...ㅋㅋ


if (!validVariants.includes(variant)) {
throw new Error(
Expand All @@ -119,32 +36,92 @@ class ButtonLink extends HTMLElement {
}
}

setDefaultAttributes() {
if (!this.hasAttribute("size")) {
this.setAttribute("size", "small");
}

if (!this.hasAttribute("variant")) {
this.setAttribute("variant", "ghost");
}
render() {
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
}

updateAttributes() {
const link = this.shadowRoot.querySelector("a");
link.setAttribute("href", this.getAttribute("href"));
createCss() {
return css`
a {
display: flex;
justify-content: center;
align-items: center;

// Set target to "_blank" only for external links
if (!this.getAttribute("href").startsWith("#")) {
link.setAttribute("target", "_blank");
}
width: max-content;
text-align: center;
}

if (this.hasAttribute("size")) {
link.classList.add(this.getAttribute("size"));
}
a.small {
padding: 10px 20px;
font-size: 13px;
border-radius: 7px;
}

if (this.hasAttribute("variant")) {
link.classList.add(this.getAttribute("variant"));
}
a.big {
padding: 10px 25px;
font-size: 14px;
border-radius: 7px;
}

a.primary {
color: white;
font-weight: 500;
background-color: var(--primary);
}

a.ghost {
border: none;
border-radius: 0;
}

a.small.ghost {
padding: 0;
}

a.big.ghost {
padding: auto;
color: black;
font-weight: normal;
border-radius: 10px;
border: 2px solid black;
}

@media only screen and (min-width: 768px) {
a.small {
padding: 7px 25px;
font-size: 14px;
}

a.big {
padding: 16px 40px;
font-size: 20px;
}
}

@media only screen and (min-width: 1024px) {
a.small {
padding: 10px 30px;
font-size: 16px;
}
}
`;
}

createHtml() {
const href = this.getAttribute("href");
const variant = this.getAttribute("variant") ?? "ghost";
const size = this.getAttribute("size") ?? "small";

return html`
<a
href="${href}"
class="${size} ${variant}"
target=${href.startsWith("#") ? "_self" : "_blank"}
>
<slot></slot>
</a>
`;
}
}

Expand Down
2 changes: 1 addition & 1 deletion components/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ template.innerHTML = `

<div class="buttons-container">
<ds-button-link href="#join-instruction-container" size="small" variant="ghost">참여방법 안내</ds-button-link>
<ds-button-link href="https://discord.gg/43UkheRV" size="small" variant="secondary">디스코드 참여하기</ds-button-link>
<ds-button-link href="https://discord.gg/43UkheRV" size="small" variant="primary">디스코드 참여하기</ds-button-link>
</div>
</header>
`;
Expand Down
17 changes: 13 additions & 4 deletions global-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
:root {
--primary: #846de9;
--secondary: #24eaca;
--bg-100: #fdfdff;
--bg-200: #fbfaff;
--bg-300: #eee8fe;
--text-900: #160b46;
}

* {
font-family: "Spoqa Han Sans Neo", "Noto Sans KR", sans-serif;
}
Expand All @@ -8,6 +17,10 @@
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

a {
text-decoration: none;
color: inherit;
Expand Down Expand Up @@ -35,7 +48,3 @@ a:active {
a:focus {
outline: none;
}

html {
scroll-behavior: smooth;
}
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@
<p>해외취업을 위한 커뮤니티 기반 알고리즘 스터디</p>
<ds-button-link
size="big"
variant="secondary"
variant="primary"
href="https://discord.gg/43UkheRV"
>디스코드 참여하기</ds-button-link
>
Expand Down Expand Up @@ -273,7 +273,7 @@
<p>코드리뷰를 통해 새로운 관점을 배울 수 있어요</p>
<ds-button-link
size="big"
variant="secondary"
variant="primary"
href="https://discord.gg/43UkheRV"
>디스코드 참여하기</ds-button-link
>
Expand Down