From 72536c5f2efc45d7436bc43a228567db06cc8a9f Mon Sep 17 00:00:00 2001 From: Jonas Chagas Date: Mon, 3 Jun 2024 20:04:19 -0300 Subject: [PATCH 1/8] feat: create SizeSelector component feat: add responsive chore: changed imgs to template sting fix: translation bug mobile fix: add aria-checked event feat: create new sizeSelector feat: create methods and add navigation with keyboard feat: finish component fix: remove css noPet fix: remove justify-content: center --- src/components/SizeSelector/images/large.js | 5 + src/components/SizeSelector/images/medium.js | 5 + src/components/SizeSelector/images/small.js | 5 + src/components/SizeSelector/index.js | 164 ++++++++++++++++ src/components/SizeSelector/index.scss | 190 +++++++++++++++++++ src/stories/SizeSelector.stories.js | 51 +++++ src/styles/fonts.scss | 1 + 7 files changed, 421 insertions(+) create mode 100644 src/components/SizeSelector/images/large.js create mode 100644 src/components/SizeSelector/images/medium.js create mode 100644 src/components/SizeSelector/images/small.js create mode 100644 src/components/SizeSelector/index.js create mode 100644 src/components/SizeSelector/index.scss create mode 100644 src/stories/SizeSelector.stories.js diff --git a/src/components/SizeSelector/images/large.js b/src/components/SizeSelector/images/large.js new file mode 100644 index 00000000..7f3abc6d --- /dev/null +++ b/src/components/SizeSelector/images/large.js @@ -0,0 +1,5 @@ +const large = ` + + `; + +export default large; diff --git a/src/components/SizeSelector/images/medium.js b/src/components/SizeSelector/images/medium.js new file mode 100644 index 00000000..95ef5f51 --- /dev/null +++ b/src/components/SizeSelector/images/medium.js @@ -0,0 +1,5 @@ +const medium = ` + + `; + +export default medium; diff --git a/src/components/SizeSelector/images/small.js b/src/components/SizeSelector/images/small.js new file mode 100644 index 00000000..a08478b4 --- /dev/null +++ b/src/components/SizeSelector/images/small.js @@ -0,0 +1,5 @@ +const small = ` + +`; + +export default small; diff --git a/src/components/SizeSelector/index.js b/src/components/SizeSelector/index.js new file mode 100644 index 00000000..1621cc76 --- /dev/null +++ b/src/components/SizeSelector/index.js @@ -0,0 +1,164 @@ +import { Component } from 'pet-dex-utilities'; +import small from './images/small'; +import medium from './images/medium'; +import large from './images/large'; + +import './index.scss'; + +const events = ['event']; + +const html = ` +
+ +
+`; + +export default function SizeSelector() { + Component.call(this, { html, events }); + + this.$sizeList = this.selected.get('sizelist'); + this.$cards = Array.from( + this.$sizeList.querySelectorAll('.container-size-selector__card'), + ); + + const addEventListeners = (card, index) => { + card.addEventListener('click', () => { + this.selectCard(card, index); + this.getCardActiveEvent('click', card, index); + }); + + card.addEventListener('keydown', (key) => { + this.handleKeyDown(key, 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; + }, + + handleKeyDown(event, card) { + let next; + let prev; + let nextIndex; + let prevIndex; + if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { + next = card.nextElementSibling; + if (next) { + 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) { + prevIndex = this.$cards.indexOf(prev); + prev.focus(); + this.selectCard(prev, prevIndex); + this.getCardActiveEvent('keydown', prev, prevIndex); + } + } + }, + + selectCard(selected, index) { + this.addActive(selected, 'container-size-selector__card--active'); + this.centerCard(selected, index); + }, + + centerCard(card, index) { + if (index === 0) + this.$sizeList.classList.add( + 'container-size-selector__size-list--active-padding', + ); + + const cardRect = card.getBoundingClientRect(); + const listRect = this.$sizeList.getBoundingClientRect(); + const cardCenter = cardRect.left + cardRect.width / 2; + const listCenter = listRect.left + listRect.width / 2; + const offset = cardCenter - listCenter; + + this.$sizeList.scrollBy({ + left: offset, + behavior: 'smooth', + }); + }, + + addActive(element, className) { + this.$cards.forEach((card) => { + card.setAttribute('aria-checked', 'false'); + card.classList.remove(className); + }); + element.classList.add(className); + element.setAttribute('aria-checked', 'true'); + }, + + getCardActiveEvent(eventName, card, index) { + if (eventName === 'click') { + this.emit('event', card, index); + } + if (eventName === 'keydown') { + this.emit('event', 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, + }; + }, + }, +); diff --git a/src/components/SizeSelector/index.scss b/src/components/SizeSelector/index.scss new file mode 100644 index 00000000..e9cd578c --- /dev/null +++ b/src/components/SizeSelector/index.scss @@ -0,0 +1,190 @@ +@use '~styles/colors.scss' as colors; +@use '~styles/breakpoints.scss' as breakpoints; +@use '~styles/fonts.scss' as fonts; + +.container-size-selector { + width: 100%; + max-width: 60rem; + + display: flex; + + &__size-list { + width: 100%; + overflow-x: hidden; + + display: flex; + flex-direction: row; + gap: 1rem; + + padding: 5rem 40% 5rem 0; + + transition: padding 0.4s; + + &--active-padding { + padding: 5rem 40%; + } + } + + &__card:focus { + outline: none; + } + + &__card { + display: flex; + + align-items: center; + justify-content: center; + + margin: 0 0.7rem; + + padding: 1rem 0; + + box-sizing: border-box; + + background-color: colors.$secondary100; + box-shadow: 0 0 0.3rem 0.3rem colors.$gray150; + border-radius: 1.8rem; + + transition: transform 0.3s; + + &:focus { + outline: 0.3rem solid colors.$primary200; + } + + &:hover { + outline: 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 { + transform: scale(1.3); + outline: 0.3rem solid colors.$primary200; + + transition: transform 0.3s; + + .container-size-selector__svg path { + fill: colors.$primary200; + } + + .container-size-selector__title { + color: colors.$primary200; + font-size: fonts.$xs; + } + + .container-size-selector__text { + color: colors.$primary200; + font-size: fonts.$xxs; + } + + .container-size-selector__container-img { + width: 4.5rem; + height: 4.5rem; + + background-color: rgb(209, 230, 255); + } + } + } + + &__card-size { + width: 9.4rem; + height: 10.6rem; + + 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.$xxs; + font-weight: fonts.$regular; + } +} + +@include breakpoints.from360 { + .container-size-selector { + &__size-list { + gap: 1.5rem; + } + + &__card { + padding: 1rem 0; + } + } +} + +@include breakpoints.from667 { + .container-size-selector { + &__size-list { + gap: 5rem; + } + + &__card { + padding: 4rem 2rem; + + &--active { + .container-size-selector__title { + font-size: fonts.$sm; + } + + .container-size-selector__text { + font-size: fonts.$xs; + } + } + } + + &__text { + font-size: fonts.$xs; + } + } +} diff --git a/src/stories/SizeSelector.stories.js b/src/stories/SizeSelector.stories.js new file mode 100644 index 00000000..474a0df7 --- /dev/null +++ b/src/stories/SizeSelector.stories.js @@ -0,0 +1,51 @@ +import SizeSelector from '../components/SizeSelector'; + +export default { + title: 'Components/SizeSelector', + render: (args) => { + const sizeselector = new SizeSelector(); + sizeselector.setText(args.card, args.titleCard, args.subtitleCard); + sizeselector.selectCard( + sizeselector.$cards[args.selectCard], + args.selectCard, + ); + const $container = document.createElement('div'); + $container.style.width = '100%'; + $container.style.display = 'flex'; + $container.style.justifyContent = 'center'; + sizeselector.mount($container); + + return $container; + }, + argTypes: { + card: { control: 'number', default: 1 }, + titleCard: { control: 'text', default: 'Medium' }, + subtitleCard: { control: 'text', default: 'under 14kg' }, + selectCard: { control: 'number', default: 1 }, + }, +}; + +export const Default = { + args: { + card: 1, + titleCard: 'Medium', + subtitleCard: 'under 14kg', + selectCard: 1, + }, +}; + +export const CardText = { + args: { + ...Default.args, + card: 1, + titleCard: 'Medium', + subtitleCard: 'under 14kg', + }, +}; + +export const CardSelect = { + args: { + ...Default.args, + selectCard: 1, + }, +}; diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss index 82b3e46c..0ae8109a 100644 --- a/src/styles/fonts.scss +++ b/src/styles/fonts.scss @@ -4,6 +4,7 @@ $tertiaryFont: 'Helvetica', sans-serif; $fourthFont: 'Noto Sans', sans-serif; $fifthFont: 'Poppins', sans-serif; +$xxs: 1.2rem; $xs: 1.4rem; $sm: 1.6rem; $md: 2rem; From 3b1ed73626517d5227c8734c7dd0306cf90bd0ce Mon Sep 17 00:00:00 2001 From: Jonas Chagas Date: Mon, 8 Jul 2024 22:57:41 -0300 Subject: [PATCH 2/8] chore: reduce method handleKeyDown --- src/components/SizeSelector/index.js | 39 +++++++++++----------------- src/stories/SizeSelector.stories.js | 7 ----- 2 files changed, 15 insertions(+), 31 deletions(-) diff --git a/src/components/SizeSelector/index.js b/src/components/SizeSelector/index.js index 1621cc76..096eed20 100644 --- a/src/components/SizeSelector/index.js +++ b/src/components/SizeSelector/index.js @@ -75,48 +75,39 @@ 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; + nextElement(next) { + let nextIndex; + if (next) { + nextIndex = this.$cards.indexOf(next); + next.focus(); + this.selectCard(next, nextIndex); + this.getCardActiveEvent('keydown', next, nextIndex); + } }, handleKeyDown(event, card) { let next; - let prev; - let nextIndex; - let prevIndex; if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { next = card.nextElementSibling; - if (next) { - nextIndex = this.$cards.indexOf(next); - next.focus(); - this.selectCard(next, nextIndex); - this.getCardActiveEvent('keydown', next, nextIndex); - } + this.nextElement(next); } if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') { - prev = card.previousElementSibling; - if (prev) { - prevIndex = this.$cards.indexOf(prev); - prev.focus(); - this.selectCard(prev, prevIndex); - this.getCardActiveEvent('keydown', prev, prevIndex); - } + next = card.previousElementSibling; + this.nextElement(next); } }, selectCard(selected, index) { - this.addActive(selected, 'container-size-selector__card--active'); + this.setActiveCard(selected, 'container-size-selector__card--active'); this.centerCard(selected, index); }, centerCard(card, index) { - if (index === 0) + if (index === 0) { this.$sizeList.classList.add( 'container-size-selector__size-list--active-padding', ); + } const cardRect = card.getBoundingClientRect(); const listRect = this.$sizeList.getBoundingClientRect(); @@ -130,7 +121,7 @@ SizeSelector.prototype = Object.assign( }); }, - addActive(element, className) { + setActiveCard(element, className) { this.$cards.forEach((card) => { card.setAttribute('aria-checked', 'false'); card.classList.remove(className); diff --git a/src/stories/SizeSelector.stories.js b/src/stories/SizeSelector.stories.js index 474a0df7..d9662755 100644 --- a/src/stories/SizeSelector.stories.js +++ b/src/stories/SizeSelector.stories.js @@ -4,7 +4,6 @@ export default { title: 'Components/SizeSelector', render: (args) => { const sizeselector = new SizeSelector(); - sizeselector.setText(args.card, args.titleCard, args.subtitleCard); sizeselector.selectCard( sizeselector.$cards[args.selectCard], args.selectCard, @@ -19,8 +18,6 @@ export default { }, argTypes: { card: { control: 'number', default: 1 }, - titleCard: { control: 'text', default: 'Medium' }, - subtitleCard: { control: 'text', default: 'under 14kg' }, selectCard: { control: 'number', default: 1 }, }, }; @@ -28,8 +25,6 @@ export default { export const Default = { args: { card: 1, - titleCard: 'Medium', - subtitleCard: 'under 14kg', selectCard: 1, }, }; @@ -38,8 +33,6 @@ export const CardText = { args: { ...Default.args, card: 1, - titleCard: 'Medium', - subtitleCard: 'under 14kg', }, }; From 843e64d535ea62beb05d9b8f4bdb573066daccc8 Mon Sep 17 00:00:00 2001 From: Jonas Chagas Date: Tue, 9 Jul 2024 13:26:05 -0300 Subject: [PATCH 3/8] chore: change name methods activeCard and remove width and height fixed for padding --- src/components/SizeSelector/index.js | 8 ++++---- src/components/SizeSelector/index.scss | 11 +++++------ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/components/SizeSelector/index.js b/src/components/SizeSelector/index.js index 096eed20..42a8b7ab 100644 --- a/src/components/SizeSelector/index.js +++ b/src/components/SizeSelector/index.js @@ -60,7 +60,7 @@ export default function SizeSelector() { const addEventListeners = (card, index) => { card.addEventListener('click', () => { this.selectCard(card, index); - this.getCardActiveEvent('click', card, index); + this.emitCardEvent('click', card, index); }); card.addEventListener('keydown', (key) => { @@ -81,7 +81,7 @@ SizeSelector.prototype = Object.assign( nextIndex = this.$cards.indexOf(next); next.focus(); this.selectCard(next, nextIndex); - this.getCardActiveEvent('keydown', next, nextIndex); + this.emitCardEvent('keydown', next, nextIndex); } }, @@ -130,7 +130,7 @@ SizeSelector.prototype = Object.assign( element.setAttribute('aria-checked', 'true'); }, - getCardActiveEvent(eventName, card, index) { + emitCardEvent(eventName, card, index) { if (eventName === 'click') { this.emit('event', card, index); } @@ -139,7 +139,7 @@ SizeSelector.prototype = Object.assign( } }, - getCardActive() { + getActiveCard() { const $activeCard = this.$cards.find((element) => element.classList.contains('container-size-selector__card--active'), ); diff --git a/src/components/SizeSelector/index.scss b/src/components/SizeSelector/index.scss index e9cd578c..679f47c9 100644 --- a/src/components/SizeSelector/index.scss +++ b/src/components/SizeSelector/index.scss @@ -92,24 +92,21 @@ } .container-size-selector__container-img { - width: 4.5rem; - height: 4.5rem; - background-color: rgb(209, 230, 255); + transform: scale(1.1); } } } &__card-size { - width: 9.4rem; - height: 10.6rem; - display: flex; flex-direction: column; gap: 1.5rem; align-items: center; justify-content: center; + + padding: 1rem 1.5rem; } &__container-img { @@ -134,6 +131,8 @@ align-items: center; justify-content: center; + + white-space: nowrap; } &__title { From 93130b3e36ee863076725003ebceff074369be46 Mon Sep 17 00:00:00 2001 From: Jonas Chagas Date: Thu, 11 Jul 2024 12:30:16 -0300 Subject: [PATCH 4/8] chore: remove next declaration --- src/components/SizeSelector/index.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/SizeSelector/index.js b/src/components/SizeSelector/index.js index 42a8b7ab..f72a0c0c 100644 --- a/src/components/SizeSelector/index.js +++ b/src/components/SizeSelector/index.js @@ -86,14 +86,11 @@ SizeSelector.prototype = Object.assign( }, handleKeyDown(event, card) { - let next; if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { - next = card.nextElementSibling; - this.nextElement(next); + this.nextElement(card.nextElementSibling); } if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') { - next = card.previousElementSibling; - this.nextElement(next); + this.nextElement(card.previousElementSibling); } }, From 4e11ec82d6f74f9f4523bac419af0cf08cb05d03 Mon Sep 17 00:00:00 2001 From: Jonas Chagas Date: Wed, 17 Jul 2024 23:25:00 -0300 Subject: [PATCH 5/8] chore: change component for scroll-snap and scrollIntoView --- src/components/SizeSelector/index.js | 83 +++++++++---------- src/components/SizeSelector/index.scss | 109 ++++++++++++------------- 2 files changed, 93 insertions(+), 99 deletions(-) diff --git a/src/components/SizeSelector/index.js b/src/components/SizeSelector/index.js index f72a0c0c..41e1d1b3 100644 --- a/src/components/SizeSelector/index.js +++ b/src/components/SizeSelector/index.js @@ -9,7 +9,7 @@ const events = ['event']; const html = `
-
    +
      - @@ -52,23 +52,32 @@ const html = ` export default function SizeSelector() { Component.call(this, { html, events }); - this.$sizeList = this.selected.get('sizelist'); - this.$cards = Array.from( - this.$sizeList.querySelectorAll('.container-size-selector__card'), + this.$sizeList = this.selected.get('size-list'); + this.$cards = this.$sizeList.querySelectorAll( + '.container-size-selector__card', ); + this.$initialCard = this.selected.get('initial-card'); - const addEventListeners = (card, index) => { - card.addEventListener('click', () => { - this.selectCard(card, index); - this.emitCardEvent('click', card, index); + this.listen('mount', () => { + requestAnimationFrame(() => { + this.$initialCard.scrollIntoView({ + inline: 'center', + behavior: 'instant', + }); }); + }); - card.addEventListener('keydown', (key) => { - this.handleKeyDown(key, card); + this.$cards.forEach((item, index) => { + item.addEventListener('click', () => { + this.setScroll(item); + this.scrollEnd(item); + this.emitCardEvent('click', item, index); }); - }; - this.$cards.forEach((card, index) => addEventListeners(card, index)); + item.addEventListener('keydown', (event) => { + this.handleKeyDown(event, item); + }); + }); } SizeSelector.prototype = Object.assign( @@ -78,52 +87,38 @@ SizeSelector.prototype = Object.assign( nextElement(next) { let nextIndex; if (next) { - nextIndex = this.$cards.indexOf(next); - next.focus(); - this.selectCard(next, nextIndex); + nextIndex = Array.from(this.$cards).indexOf(next); + this.scrollEnd(next); this.emitCardEvent('keydown', next, nextIndex); } }, handleKeyDown(event, card) { - if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { + if (event.key === 'ArrowRight') { this.nextElement(card.nextElementSibling); } - if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') { + if (event.key === 'ArrowLeft') { this.nextElement(card.previousElementSibling); } }, - selectCard(selected, index) { - this.setActiveCard(selected, 'container-size-selector__card--active'); - this.centerCard(selected, index); + setScroll(card) { + card.scrollIntoView({ inline: 'center' }); }, - centerCard(card, index) { - if (index === 0) { - this.$sizeList.classList.add( - 'container-size-selector__size-list--active-padding', - ); - } - - const cardRect = card.getBoundingClientRect(); - const listRect = this.$sizeList.getBoundingClientRect(); - const cardCenter = cardRect.left + cardRect.width / 2; - const listCenter = listRect.left + listRect.width / 2; - const offset = cardCenter - listCenter; - - this.$sizeList.scrollBy({ - left: offset, - behavior: 'smooth', + scrollEnd(card) { + this.$sizeList.addEventListener('scrollend', () => { + this.setActiveCard(card); + card.focus(); }); }, - setActiveCard(element, className) { + setActiveCard(element) { this.$cards.forEach((card) => { card.setAttribute('aria-checked', 'false'); - card.classList.remove(className); + card.classList.remove('container-size-selector__card--active'); }); - element.classList.add(className); + element.classList.add('container-size-selector__card--active'); element.setAttribute('aria-checked', 'true'); }, @@ -136,11 +131,11 @@ SizeSelector.prototype = Object.assign( } }, - getActiveCard() { - const $activeCard = this.$cards.find((element) => + activeCardInit() { + const $activeCard = Array.from(this.$cards).find((element) => element.classList.contains('container-size-selector__card--active'), ); - const indexCard = this.$cards.findIndex((element) => + const indexCard = Array.from(this.$cards).findIndex((element) => element.classList.contains('container-size-selector__card--active'), ); return { diff --git a/src/components/SizeSelector/index.scss b/src/components/SizeSelector/index.scss index 679f47c9..82b9c0bd 100644 --- a/src/components/SizeSelector/index.scss +++ b/src/components/SizeSelector/index.scss @@ -4,25 +4,25 @@ .container-size-selector { width: 100%; - max-width: 60rem; + max-width: 15rem; display: flex; + justify-content: center; + &__size-list { - width: 100%; + max-width: 100%; overflow-x: hidden; display: flex; flex-direction: row; - gap: 1rem; - - padding: 5rem 40% 5rem 0; + flex-shrink: 0; + gap: 4rem; - transition: padding 0.4s; + padding: 5rem 20rem; - &--active-padding { - padding: 5rem 40%; - } + scroll-behavior: smooth; + scroll-snap-type: x mandatory; } &__card:focus { @@ -30,14 +30,14 @@ } &__card { + max-width: 12rem; + display: flex; align-items: center; justify-content: center; - margin: 0 0.7rem; - - padding: 1rem 0; + padding: 4rem 3rem; box-sizing: border-box; @@ -45,7 +45,8 @@ box-shadow: 0 0 0.3rem 0.3rem colors.$gray150; border-radius: 1.8rem; - transition: transform 0.3s; + transition: transform 0.2s ease; + scroll-snap-align: center; &:focus { outline: 0.3rem solid colors.$primary200; @@ -75,7 +76,7 @@ transform: scale(1.3); outline: 0.3rem solid colors.$primary200; - transition: transform 0.3s; + transition: transform 0.2s ease; .container-size-selector__svg path { fill: colors.$primary200; @@ -105,8 +106,6 @@ align-items: center; justify-content: center; - - padding: 1rem 1.5rem; } &__container-img { @@ -124,6 +123,8 @@ } &__container-text { + min-width: max-content; + display: flex; flex-direction: column; gap: 0.3em; @@ -131,8 +132,6 @@ align-items: center; justify-content: center; - - white-space: nowrap; } &__title { @@ -150,40 +149,40 @@ } } -@include breakpoints.from360 { - .container-size-selector { - &__size-list { - gap: 1.5rem; - } - - &__card { - padding: 1rem 0; - } - } -} - -@include breakpoints.from667 { - .container-size-selector { - &__size-list { - gap: 5rem; - } - - &__card { - padding: 4rem 2rem; - - &--active { - .container-size-selector__title { - font-size: fonts.$sm; - } - - .container-size-selector__text { - font-size: fonts.$xs; - } - } - } - - &__text { - font-size: fonts.$xs; - } - } -} +// @include breakpoints.from360 { +// .container-size-selector { +// &__size-list { +// gap: 1.5rem; +// } + +// &__card { +// padding: 1rem 0; +// } +// } +// } + +// @include breakpoints.from667 { +// .container-size-selector { +// &__size-list { +// gap: 3rem; +// } + +// &__card { +// padding: 4rem 2rem; + +// &--active { +// .container-size-selector__title { +// font-size: fonts.$sm; +// } + +// .container-size-selector__text { +// font-size: fonts.$xs; +// } +// } +// } + +// &__text { +// font-size: fonts.$xs; +// } +// } +// } From 0ab0501ab475c4d7b6fb9d0a9da1ea98841ba538 Mon Sep 17 00:00:00 2001 From: Jonas Chagas Date: Thu, 18 Jul 2024 22:53:23 -0300 Subject: [PATCH 6/8] feat: finish component 2.0 --- src/components/SizeSelector/index.scss | 72 +++++++++++--------------- src/stories/SizeSelector.stories.js | 32 ++---------- 2 files changed, 33 insertions(+), 71 deletions(-) diff --git a/src/components/SizeSelector/index.scss b/src/components/SizeSelector/index.scss index 82b9c0bd..47bfdadd 100644 --- a/src/components/SizeSelector/index.scss +++ b/src/components/SizeSelector/index.scss @@ -17,9 +17,9 @@ display: flex; flex-direction: row; flex-shrink: 0; - gap: 4rem; + gap: 2.5rem; - padding: 5rem 20rem; + padding: 5rem 10rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; @@ -37,7 +37,7 @@ align-items: center; justify-content: center; - padding: 4rem 3rem; + padding: 2rem 1.5rem; box-sizing: border-box; @@ -76,8 +76,6 @@ transform: scale(1.3); outline: 0.3rem solid colors.$primary200; - transition: transform 0.2s ease; - .container-size-selector__svg path { fill: colors.$primary200; } @@ -149,40 +147,30 @@ } } -// @include breakpoints.from360 { -// .container-size-selector { -// &__size-list { -// gap: 1.5rem; -// } - -// &__card { -// padding: 1rem 0; -// } -// } -// } - -// @include breakpoints.from667 { -// .container-size-selector { -// &__size-list { -// gap: 3rem; -// } - -// &__card { -// padding: 4rem 2rem; - -// &--active { -// .container-size-selector__title { -// font-size: fonts.$sm; -// } - -// .container-size-selector__text { -// font-size: fonts.$xs; -// } -// } -// } - -// &__text { -// font-size: fonts.$xs; -// } -// } -// } +@include breakpoints.from667 { + .container-size-selector { + &__size-list { + gap: 4rem; + + padding: 5rem 20rem; + } + + &__card { + padding: 4rem 3rem; + + &--active { + .container-size-selector__title { + font-size: fonts.$sm; + } + + .container-size-selector__text { + font-size: fonts.$xs; + } + } + } + + &__text { + font-size: fonts.$xs; + } + } +} diff --git a/src/stories/SizeSelector.stories.js b/src/stories/SizeSelector.stories.js index d9662755..6a7df023 100644 --- a/src/stories/SizeSelector.stories.js +++ b/src/stories/SizeSelector.stories.js @@ -2,12 +2,9 @@ import SizeSelector from '../components/SizeSelector'; export default { title: 'Components/SizeSelector', - render: (args) => { + render: () => { const sizeselector = new SizeSelector(); - sizeselector.selectCard( - sizeselector.$cards[args.selectCard], - args.selectCard, - ); + const $container = document.createElement('div'); $container.style.width = '100%'; $container.style.display = 'flex'; @@ -16,29 +13,6 @@ export default { return $container; }, - argTypes: { - card: { control: 'number', default: 1 }, - selectCard: { control: 'number', default: 1 }, - }, -}; - -export const Default = { - args: { - card: 1, - selectCard: 1, - }, }; -export const CardText = { - args: { - ...Default.args, - card: 1, - }, -}; - -export const CardSelect = { - args: { - ...Default.args, - selectCard: 1, - }, -}; +export const Default = {}; From 77bf9d9ae8237ff13c75ff3e1c39603ad55e2112 Mon Sep 17 00:00:00 2001 From: JonasGz Date: Fri, 19 Jul 2024 13:46:00 -0300 Subject: [PATCH 7/8] chore: event for 'size:change' --- src/components/SizeSelector/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/SizeSelector/index.js b/src/components/SizeSelector/index.js index 41e1d1b3..e79021df 100644 --- a/src/components/SizeSelector/index.js +++ b/src/components/SizeSelector/index.js @@ -5,7 +5,7 @@ import large from './images/large'; import './index.scss'; -const events = ['event']; +const events = ['size:change']; const html = `
      @@ -124,10 +124,10 @@ SizeSelector.prototype = Object.assign( emitCardEvent(eventName, card, index) { if (eventName === 'click') { - this.emit('event', card, index); + this.emit('size:change', card, index); } if (eventName === 'keydown') { - this.emit('event', card, index); + this.emit('size:change', card, index); } }, From fcd19d98697c814716bce53b2c79e561877a5768 Mon Sep 17 00:00:00 2001 From: Jonas Chagas Date: Wed, 24 Jul 2024 22:52:01 -0300 Subject: [PATCH 8/8] chore: remove max width card and add min-width card-size --- src/components/SizeSelector/index.scss | 32 +++++++++++++++++++------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/src/components/SizeSelector/index.scss b/src/components/SizeSelector/index.scss index 47bfdadd..612bbd00 100644 --- a/src/components/SizeSelector/index.scss +++ b/src/components/SizeSelector/index.scss @@ -30,22 +30,23 @@ } &__card { - max-width: 12rem; - display: flex; align-items: center; justify-content: center; - padding: 2rem 1.5rem; + padding: 1.5rem 0.3rem; box-sizing: border-box; background-color: colors.$secondary100; box-shadow: 0 0 0.3rem 0.3rem colors.$gray150; + outline: 0.3rem solid transparent; border-radius: 1.8rem; - transition: transform 0.2s ease; + transition: 0.3s ease; + + cursor: pointer; scroll-snap-align: center; &:focus { @@ -98,6 +99,8 @@ } &__card-size { + min-width: 9rem; + display: flex; flex-direction: column; gap: 1.5rem; @@ -116,20 +119,29 @@ justify-content: center; + padding: 0.4rem; + background-color: colors.$gray150; border-radius: 100%; + + transition: 0.3s ease; } &__container-text { - min-width: max-content; - display: flex; flex-direction: column; gap: 0.3em; align-items: center; - justify-content: center; + + text-align: center; + } + + &__svg path { + transition: 0.3s ease; + + fill: rgb(128, 139, 154); } &__title { @@ -137,6 +149,8 @@ color: colors.$gray800; font-size: fonts.$xs; font-weight: fonts.$semiBold; + + transition: 0.3s ease; } &__text { @@ -144,6 +158,8 @@ color: colors.$gray600; font-size: fonts.$xxs; font-weight: fonts.$regular; + + transition: 0.3s ease; } } @@ -156,7 +172,7 @@ } &__card { - padding: 4rem 3rem; + padding: 4rem 2rem; &--active { .container-size-selector__title {