Skip to content

Commit

Permalink
feat: create SizeSelector component
Browse files Browse the repository at this point in the history 
feat: add responsive
  • Loading branch information
@JonasGz
JonasGz committed Jun 15, 2024
1 parent 6e2835c commit 7f963b6
Show file tree
Hide file tree
Showing 3 changed files with 429 additions and 0 deletions.
165 changes: 165 additions & 0 deletions src/components/SizeSelector/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
import { Component } from 'pet-dex-utilities';
import './index.scss';

const events = ['click', 'keydown'];

const html = `
<div class="container-size-selector" role="radiogroup">
<ul class="container-size-selector__size-list" data-select="card">
<div class="container-size-selector__card" role="radio" aria-checked="false" tabindex="0">
<li class="container-size-selector__card-size">
<div class="container-size-selector__container-img">
<svg class="container-size-selector__svg" width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5436 7.21576C12.9645 7.1634 13.1974 6.00679 13.1974 6.00679C13.2506 5.54961 13.2467 5.11354 13.1427 4.73061C13.4616 5.10338 13.4381 5.8036 13.4381 5.8036C13.4585 6.95943 14.0188 7.14465 14.0188 7.14465C13.6382 6.775 13.6984 5.78093 13.6984 5.78093C13.7124 4.57743 13.181 4.22029 12.845 4.11479C12.6332 3.83814 12.3206 3.61933 11.8783 3.47944C11.2226 3.27312 9.01957 3.55289 8.34436 3.56227C7.1729 3.5779 5.78809 3.68809 4.83701 2.8519C4.50175 2.55649 4.19384 1.95631 3.993 1.55696C3.88906 1.35065 3.82029 1.14277 3.65305 0.974745C3.49128 0.811413 3.28574 0.695752 3.07239 0.612913C2.7426 0.48553 2.37218 0.462872 2.03145 0.560559C1.87906 0.604323 1.72432 0.683249 1.63835 0.819229C1.54301 0.970839 1.45626 1.11307 1.32419 1.23654C1.18274 1.36862 0.648199 1.54914 0.464548 1.59916C0.416095 1.61244 0.364515 1.62652 0.316062 1.64449C0.291836 1.63511 0.263707 1.63198 0.233229 1.63667C0.185558 1.6437 0.133974 1.66325 0.0909916 1.68357C0.0675468 1.69451 0.0441069 1.70857 0.0276955 1.72967C-0.0176311 1.7875 0.00190965 1.87112 0.021447 1.9352C0.0331694 1.97115 0.0487924 2.01179 0.0730188 2.04383C0.0863042 2.11026 0.110534 2.1759 0.13476 2.22748C0.373897 2.73624 1.44767 2.55492 1.9025 2.54555C2.07365 2.54164 2.24792 2.53852 2.41438 2.57837C2.41126 2.80266 2.45892 3.01758 2.61209 3.14965C2.60819 3.14574 2.60429 3.14262 2.60038 3.13871C2.60741 3.14183 2.61444 3.14496 2.62147 3.14809C3.26777 3.41457 3.31388 2.32907 3.51707 1.99928C3.5663 1.91879 3.64914 1.86096 3.66399 1.76172C3.68431 1.62495 3.65227 1.4835 3.59287 1.36003C3.48346 1.13261 3.29513 0.913794 3.08881 0.76531C3.12554 0.785629 3.15992 0.811419 3.19275 0.834082C3.40766 0.982566 3.60616 1.20841 3.71947 1.44442C3.77887 1.5679 3.81169 1.70935 3.79059 1.84611C3.77574 1.94536 3.69369 2.0032 3.64367 2.08369C3.46471 2.37519 3.40766 3.25593 2.95127 3.2739C3.0427 3.77562 2.95517 4.41957 3.01222 4.78609C3.01222 4.78609 2.96612 6.05368 4.17353 6.7117C3.75855 7.72373 3.14976 7.90894 3.14976 7.90894C2.90281 8.04648 2.97862 8.25515 2.97862 8.25515H3.63351C4.08834 7.85268 4.42204 7.46272 4.6557 7.14543C4.51972 7.93239 4.09303 7.90816 4.09303 7.90816C3.84608 8.0457 3.92188 8.25437 3.92188 8.25437H4.57677C5.06755 7.81985 5.30826 7.40019 5.42392 7.0704C6.02489 7.13214 6.77433 7.09072 7.71134 6.89222C8.37405 6.75155 9.07428 6.65933 9.64242 6.60072C10.2246 7.78937 11.5633 7.50725 11.5633 7.50725C12.1932 7.65574 12.1932 7.90816 12.1932 7.90816C11.9463 8.0457 12.0221 8.25437 12.0221 8.25437H12.677C12.752 7.92692 12.702 7.69247 12.6176 7.52914C12.7254 7.52054 12.7903 7.50648 12.7903 7.50648C13.4202 7.65496 13.4202 7.90739 13.4202 7.90739C13.1732 8.04493 13.249 8.25358 13.249 8.25358H13.9039C14.0844 7.47053 13.5429 7.21497 13.5429 7.21497L13.5436 7.21576Z" fill="#808B9A"/>
</svg>
</div>
<div class="container-size-selector__container-text">
<h3 class="container-size-selector__title">Small</h3>
<span class="container-size-selector__text">under 14kg</span>
</div>
</li>
</div>
<div class="container-size-selector__card container-size-selector__card--active" role="radio" aria-checked="true" tabindex="0">
<li class="container-size-selector__card-size">
<div class="container-size-selector__container-img">
<svg class="container-size-selector__svg" width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.0445 9.83526L22.3546 9.86317C22.3546 9.86317 23.3471 9.15313 23.6429 7.5198L23.1785 7.94181C23.1785 7.94181 23.404 5.40865 22.1726 3.82445V4.55683C22.1726 4.55683 21.8343 3.41696 20.0827 2.7058L20.7302 3.74742C20.7302 3.74742 19.2532 2.03037 16.5503 2.60644L17.5495 2.84647C17.5495 2.84647 15.4026 3.09208 14.9025 4.61934L15.4651 4.3235C15.4651 4.3235 14.9159 5.42094 15.071 6.37882C15.071 6.37882 15.761 5.43545 17.1052 5.56942L16.4085 5.92779C16.4085 5.92779 18.3154 5.40084 19.2866 6.23146L18.801 6.36543C18.801 6.36543 20.0257 6.63337 19.7299 7.71629L19.2163 7.34341C19.2163 7.34341 19.6997 8.20864 18.8278 8.81374C17.2324 7.73527 15.1068 7.78551 15.1068 7.78551L10.9057 7.47738C9.69324 7.38919 8.83695 6.61439 8.34238 5.55044C8.26311 5.37963 8.19166 5.20658 8.12021 5.03242C8.05769 4.88059 7.99516 4.72987 7.93265 4.57804C7.83998 4.35364 7.76407 4.12477 7.67252 3.90037C7.39788 3.2361 7.02612 2.56513 6.45786 2.14648C6.30937 1.58603 6.08052 0.919528 5.72661 0.238512C5.72661 0.238512 5.47429 -0.249362 5.36711 0.170412C5.28896 0.474078 5.14607 0.934041 5.15053 1.66865C4.58116 1.60836 3.9861 1.70102 3.49823 1.95668C3.05836 2.18778 2.796 2.5763 2.41083 2.87103C2.1909 3.0385 1.87272 3.06976 1.61147 3.04631C1.43061 3.03068 1.20399 3.00165 0.995221 3.0251C0.971776 3.00947 0.946089 2.99719 0.915945 2.98937C0.838912 2.96704 0.748487 2.96035 0.669221 2.96146C0.62568 2.96146 0.581022 2.96704 0.541947 2.98714C0.433654 3.04296 0.40463 3.18251 0.391233 3.29304C0.382302 3.36672 0.378951 3.45492 0.403512 3.53083C0.32313 3.80882 0.327602 4.15268 0.339882 4.37485C0.357745 4.70084 0.464913 5.03353 0.693779 5.26575C0.896967 5.47117 1.17496 5.58281 1.4496 5.67101C1.8236 5.79158 2.20876 5.87978 2.56602 6.0439C3.13874 6.30514 3.52056 6.8053 3.67016 7.41151C3.82199 8.03224 3.74161 10.542 3.71035 11.1739L4.02853 10.7697C4.02853 10.7697 3.94145 11.6528 4.07207 12.2746L4.15915 12.0067C5.67525 17.274 3.79296 19.8976 3.79296 19.8976C2.94113 20.276 3.16218 21.0374 3.16218 21.0374H4.62469C5.50778 20.3988 5.94431 18.2229 5.94431 18.2229L6.21225 18.5668L5.98003 17.5553L6.3451 18.262C6.4199 17.4414 6.09279 16.5818 6.09279 16.5818L6.64988 17.7652C6.64765 17.0395 6.01353 15.4363 6.01353 15.4363L6.38195 15.9812C7.11432 18.8202 6.46121 19.8976 6.46121 19.8976C5.60827 20.276 5.8282 21.0374 5.8282 21.0374H7.17906C8.06327 20.3988 8.50425 18.2229 8.50425 18.2229L8.77108 18.5668L8.54222 17.5553L8.90506 18.262C8.98097 17.4414 8.65722 16.5818 8.65722 16.5818L9.21095 17.7652C9.21095 17.0395 8.58129 15.4363 8.58129 15.4363L9.21095 16.3719C9.20426 16.114 9.10043 15.7612 8.97092 15.4174C9.62961 15.5178 10.5384 15.5491 11.6269 15.3124L10.8599 15.1416L12.2264 15.0021C13.0224 17.8891 15.6884 17.9271 15.6884 17.9271C16.8261 18.1336 17.084 20.1186 17.084 20.1186C16.6363 20.6188 16.6675 21.1011 16.6675 21.1011C16.6675 21.1011 16.6686 21.1044 16.672 21.11L18.2205 21.1011C18.8814 19.5905 18.2249 18.3457 17.746 17.7105C18.3355 17.9204 18.7898 17.9271 18.7898 17.9271C19.9275 18.1336 20.1854 20.1186 20.1854 20.1186C19.7377 20.6188 19.7689 21.1011 19.7689 21.1011C19.7689 21.1011 19.7701 21.1044 19.7734 21.11L21.3219 21.1011C22.2865 18.8961 20.4433 17.2561 20.4433 17.2561C19.616 16.7392 20.0815 16.2223 20.0815 16.2223C20.7212 15.1137 20.7279 14.3914 20.7101 14.1737L20.8563 15.3962C21.4246 14.5689 21.1142 13.0706 21.1142 13.0706C21.6825 13.8979 21.5273 14.4148 21.5273 14.4148C22.301 12.0815 20.3763 10.9193 20.3763 10.9193C20.3305 10.7608 20.2769 10.6101 20.2155 10.4672C20.69 10.5051 21.9382 10.5252 23.0445 9.84085V9.83526Z" fill="#808B9A"/>
</svg>
</div>
<div class="container-size-selector__container-text">
<h3 class="container-size-selector__title">Medium</h3>
<span class="container-size-selector__text">14-25kg</span>
</div>
</li>
</div>
<div class="container-size-selector__card" role="radio" aria-checked="false" tabindex="0">
<li class="container-size-selector__card-size">
<div class="container-size-selector__container-img">
<svg class="container-size-selector__svg" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.1235 12.1451C23.8819 11.0565 23.3254 10.1256 22.6606 9.6606C21.825 9.07587 20.7943 8.82963 19.7774 8.74958C18.7604 8.66954 17.7388 8.74348 16.7188 8.73815C14.5918 8.72671 12.0448 8.97143 10.1031 7.90566C9.44137 7.54278 8.85588 7.08994 8.50291 6.41754C8.09581 5.64223 7.44476 4.93095 6.59016 4.73579C6.27607 4.66413 5.95131 4.66489 5.6296 4.66642C5.26595 4.66794 4.90079 4.67023 4.54096 4.72359C4.32521 4.75561 4.10946 4.80745 3.91888 4.91266C3.60784 5.08495 3.38828 5.38608 3.22208 5.70093C3.01472 6.09278 2.4704 6.04094 2.03815 6.06686C2.02976 6.06533 2.02214 6.06381 2.01375 6.06229C1.87577 6.04018 1.71644 6.0478 1.57845 6.06533C1.50298 6.07525 1.42674 6.0943 1.36347 6.13776C1.1866 6.25745 1.16602 6.50674 1.16602 6.70038C1.16602 6.89401 1.19346 7.1433 1.3627 7.26909C1.32763 7.88507 1.35889 8.48581 1.5876 9.07511C1.67832 9.30991 1.79877 9.55006 2.01452 9.67966C2.21883 9.80316 2.47117 9.80468 2.70902 9.82603C3.17863 9.86719 3.66349 10.012 3.98749 10.3543C4.2688 10.6524 4.39458 11.0595 4.53714 11.4437C5.03496 12.787 5.66314 14.5313 6.74187 15.4735C6.87376 15.5887 7.00793 15.6992 7.14592 15.8059C8.69502 19.6215 6.77923 21.7927 6.77923 21.7927C5.85297 22.1937 6.19298 22.9652 6.19298 22.9652H8.41524C9.04266 22.122 9.542 20.9777 9.93004 19.822C10.0779 20.9899 9.99179 21.7927 9.99179 21.7927C9.06553 22.1937 9.40554 22.9652 9.40554 22.9652H11.6278C12.7523 21.4535 12.6623 18.9857 12.4016 17.2216C13.1152 17.1202 13.7395 16.9327 14.2129 16.7558C14.8998 19.8662 17.7914 19.8929 17.7914 19.8929C19.1225 20.178 19.4 21.7927 19.4 21.7927C18.4737 22.1937 18.7078 22.9652 18.7078 22.9652H21.2571C21.4591 21.6311 21.2068 20.5928 20.9064 19.8906C20.9415 19.8929 20.9605 19.8929 20.9605 19.8929C22.2916 20.178 22.5691 21.7927 22.5691 21.7927C21.6428 22.1937 21.8769 22.9652 21.8769 22.9652H24.4262C24.8272 20.3107 23.4328 18.8294 23.4328 18.8294C22.2108 17.5006 23.2476 16.2367 23.2476 16.2367C23.2743 16.2031 23.301 16.1703 23.3261 16.1368C23.8628 17.9924 25.2366 18.7082 25.2366 18.7082V18.2523C26.0729 19.4942 27.9993 19.3928 27.9993 19.3928C26.281 17.5006 24.7532 13.7979 24.1235 12.1421V12.1451ZM7.8145 6.74917C7.65593 7.20963 7.47907 7.65637 7.23207 8.07947C7.05063 8.39051 6.82954 8.75416 6.50325 8.94475C6.12589 9.16583 5.84306 8.87995 5.68449 8.55213C5.59072 8.35926 5.51982 8.14885 5.46264 7.93615C5.5061 8.06804 5.55565 8.19688 5.61511 8.31809C5.77368 8.64514 6.05652 8.93102 6.43388 8.7107C6.75941 8.52011 6.98125 8.15647 7.16269 7.84543C7.40893 7.42232 7.58656 6.97559 7.74513 6.51512C7.80459 6.34207 7.82899 6.18274 7.81222 6.03637C7.9159 6.2422 7.90827 6.47929 7.81527 6.74917H7.8145Z" fill="#808B9A"/>
</svg>
</div>
<div class="container-size-selector__container-text">
<h3 class="container-size-selector__title">Large</h3>
<span class="container-size-selector__text">over 25kg</span>
</div>
</li>
</div>
</ul>
</div>
`;

export default function SizeSelector() {
Component.call(this, { html, events });

this.$sizeComponent = this.selected.get('card');

this.$cards = Array.from(
this.selected.get('card').querySelectorAll('[role="radio"]'),
);

const addEventListeners = (card, index) => {
card.addEventListener('click', () => {
this.selectCard(card, index);
this.getCardActiveEvent('click', card, index);
});
card.addEventListener('keydown', (event) => {
this.handleKeyDown(event, card);
});
};

this.$cards.forEach((card, index) => addEventListeners(card, index));
}

SizeSelector.prototype = Object.assign(
SizeSelector.prototype,
Component.prototype,
{
setText(index, title, subtitle) {
const h3 = this.$cards[index].querySelector('h3');
const span = this.$cards[index].querySelector('span');
h3.textContent = title;
span.textContent = subtitle;
},

centerCard(index) {
this.$cards.forEach((card, i) => {
let orderCard;
const cardItem = card;
if (index === 2) {
if (i === 0) orderCard = 2;
if (i === 1) orderCard = 0;
if (i === 2) orderCard = 1;
}

if (index === 0) {
if (i === 0) orderCard = 1;
if (i === 1) orderCard = 2;
if (i === 2) orderCard = 0;
}

if (index === 1) {
if (i === 0) orderCard = 0;
if (i === 1) orderCard = 1;
if (i === 2) orderCard = 2;
}

if (orderCard !== undefined) cardItem.style.order = orderCard;
});
},

addActive(element, className) {
this.$cards.forEach((card) => {
card.setAttribute('aria-checked', 'false');
card.classList.remove(className);
});
element.classList.add(className);
},

selectCard(selected, index) {
this.addActive(selected, 'container-size-selector__card--active');
this.centerCard(index);
},

handleKeyDown(event, card) {
let next;
let prev;
let nextIndex;
let prevIndex;
if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
next = card.nextElementSibling;
if (!next) [next] = this.$cards;
nextIndex = this.$cards.indexOf(next);
next.focus();
this.selectCard(next, nextIndex);
this.getCardActiveEvent('keydown', next, nextIndex);
}
if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
prev = card.previousElementSibling;
if (!prev) prev = this.$cards[this.$cards.length - 1];
prevIndex = this.$cards.indexOf(prev);
prev.focus();
this.selectCard(prev, prevIndex);
this.getCardActiveEvent('keydown', prev, prevIndex);
}
},

getCardActiveEvent(eventName, card, index) {
if (eventName === 'click') this.emit('click', card, index);
if (eventName === 'keydown') this.emit('keydown', card, index);
},

getCardActive() {
const $activeCard = this.$cards.find((element) =>
element.classList.contains('container-size-selector__card--active'),
);
const indexCard = this.$cards.findIndex((element) =>
element.classList.contains('container-size-selector__card--active'),
);
return {
card: $activeCard,
index: indexCard,
};
},
},
);
216 changes: 216 additions & 0 deletions src/components/SizeSelector/index.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
@use '~styles/colors.scss' as colors;
@use '~styles/breakpoints.scss' as breakpoints;
@use '~styles/fonts.scss' as fonts;

.container-size-selector {
min-width: 30rem;
height: 13rem;

display: flex;

align-items: center;
justify-content: center;

&__size-list {
display: flex;
flex-direction: row;
gap: 1rem;

align-items: center;
justify-content: center;
}

&__card:focus {
outline: none;
}

&__card {
width: 8.5rem;
height: 10.5rem;

display: flex;

align-items: center;
justify-content: center;

border: 0.3rem solid transparent;
box-sizing: border-box;

background-color: colors.$secondary100;
box-shadow: 0 0 0.3rem 0.3rem colors.$gray150;
border-radius: 1.8rem;

transition:
width 0.3s ease-in-out,
height 0.3s ease-in-out;

&:hover {
border: 0.3rem solid colors.$primary200;

.container-size-selector__svg path {
fill: colors.$primary200;
}

.container-size-selector__title {
color: colors.$primary200;
}

.container-size-selector__text {
color: colors.$primary200;
}

.container-size-selector__container-img {
background-color: rgb(209, 230, 255);
}
}

&--active {
width: 10.5rem;
height: 13.5rem;

border: 0.3rem solid colors.$primary200;

border-radius: 1.8rem;

transition:
width 0.3s,
height 0.3s;

.container-size-selector__svg path {
fill: colors.$primary200;
}

.container-size-selector__title {
color: colors.$primary200;
font-size: fonts.$sm;
}

.container-size-selector__text {
color: colors.$primary200;
font-size: fonts.$xs;
}

.container-size-selector__container-img {
width: 4.5rem;
height: 4.5rem;

background-color: rgb(209, 230, 255);
}
}
}

&__card-size {
display: flex;
flex-direction: column;
gap: 1.5rem;

align-items: center;
justify-content: center;
}

&__container-img {
width: 4rem;
height: 4rem;

display: flex;

align-items: center;

justify-content: center;

background-color: colors.$gray150;
border-radius: 100%;
}

&__container-text {
display: flex;
flex-direction: column;
gap: 0.3em;

align-items: center;

justify-content: center;
}

&__title {
font-family: fonts.$primaryFont;
color: colors.$gray800;
font-size: fonts.$xs;
font-weight: fonts.$semiBold;
}

&__text {
font-family: fonts.$primaryFont;
color: colors.$gray600;
font-size: fonts.$xs;
font-weight: fonts.$regular;
}
}

@include breakpoints.from360() {
.container-size-selector {
&__card {
width: 9rem;
height: 12rem;

&--active {
width: 11.5rem;
height: 15rem;

.container-size-selector__container-img {
width: 6rem;
height: 6rem;
}
}

&__container-img {
width: 4.5rem;
height: 4.5rem;
}
}
}
}

@include breakpoints.from667() {
.container-size-selector {
height: 26rem;

align-items: center;
justify-content: center;

&__size-list {
gap: 5rem;
}

&__card {
width: 15.6rem;
height: 20rem;

transition:
width 0.3s,
height 0.3s;

&--active {
width: 20rem;
height: 26rem;

.container-size-selector__title {
font-size: fonts.$lg;
}

.container-size-selector__text {
font-size: fonts.$md;
}
}
}

&__title {
font-size: fonts.$md;
}

&__text {
font-size: fonts.$sm;
font-weight: fonts.$regular;
}
}
}
Loading

0 comments on commit 7f963b6

Please sign in to comment.