From f4d291d46e3db26bb0f32ef5cfdfe058ef3a0913 Mon Sep 17 00:00:00 2001 From: Jess Divers Date: Thu, 14 Nov 2024 10:10:04 -0700 Subject: [PATCH 1/7] feat: mobile drawer --- src/lib-components/MobileDrawer.vue | 87 ++++++++++ src/stories/MobileDrawer.spec.js | 8 + src/stories/MobileDrawer.stories.js | 53 ++++++ src/styles/default/_mobile-drawer.scss | 217 +++++++++++++++++++++++++ src/styles/ftva/_mobile-drawer.scss | 23 +++ 5 files changed, 388 insertions(+) create mode 100644 src/lib-components/MobileDrawer.vue create mode 100644 src/stories/MobileDrawer.spec.js create mode 100644 src/stories/MobileDrawer.stories.js create mode 100644 src/styles/default/_mobile-drawer.scss create mode 100644 src/styles/ftva/_mobile-drawer.scss diff --git a/src/lib-components/MobileDrawer.vue b/src/lib-components/MobileDrawer.vue new file mode 100644 index 000000000..4f83761a8 --- /dev/null +++ b/src/lib-components/MobileDrawer.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/src/stories/MobileDrawer.spec.js b/src/stories/MobileDrawer.spec.js new file mode 100644 index 000000000..471c1795f --- /dev/null +++ b/src/stories/MobileDrawer.spec.js @@ -0,0 +1,8 @@ +describe('GLOBAL / Mobile Drawer', () => { + it('Default', () => { + cy.visit('/iframe.html?id=mobile-drawer--default&args=&viewMode=story') + cy.get('.mobile-drawer').should('exist') + + cy.percySnapshot('GLOBAL / Mobile Drawer: Default') + }) +}) diff --git a/src/stories/MobileDrawer.stories.js b/src/stories/MobileDrawer.stories.js new file mode 100644 index 000000000..20c6da98d --- /dev/null +++ b/src/stories/MobileDrawer.stories.js @@ -0,0 +1,53 @@ +import { computed } from 'vue' +import MobileDrawer from '@/lib-components/MobileDrawer.vue' + +/** + * A component to wrap dropdown fields in a drawer that can be toggled open and closed on mobile with a button. + * + * The componenet has 2 slots: + * - dropdownItems: The items to be displayed in the drawer + * - buttonLabel: The label for the button that toggles the drawer open and closed, icons can also be included here + */ +export default { + title: 'Global / Mobile Drawer', + component: MobileDrawer, +} + +export function Default() { + return { + components: { MobileDrawer }, + template: ` + + + `, + } +} + +export function FTVA() { + return { + components: { MobileDrawer }, + provide() { + return { + theme: computed(() => 'ftva'), + } + }, + template: ` + + + `, + } +} diff --git a/src/styles/default/_mobile-drawer.scss b/src/styles/default/_mobile-drawer.scss new file mode 100644 index 000000000..e0f8945fb --- /dev/null +++ b/src/styles/default/_mobile-drawer.scss @@ -0,0 +1,217 @@ +.mobile-drawer { + display: flex; + position: relative; + + .button { + display: flex; + justify-content: space-between; + min-width: 194px; + width: 100%; + padding: 12px 16px 12px 20px; + border-radius: 8px; + border: 1px solid #{$primary-blue-03}; + font-weight: 500; + font-size: 18px; + background-color: $white; + color: #{$primary-blue-03}; + + .button-inner-wrapper { + display: flex; + -moz-column-gap: 8px; + column-gap: 8px; + height: 100%; + } + + .button-svg { + position: relative; + top: 1px; + stroke: #{$primary-blue-03}; + } + } + + .button.is-expanded { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + .is-expanded.toggle-triangle-icon>svg { + transform: rotate(180deg); + position: relative; + bottom: 2px; + } + + .button-dropdown-modal-wrapper { + display: flex; + flex-direction: column; + row-gap: 14px; + padding: 24px 20px 20px 20px; + min-height: auto; + min-width: 186px; + width: 96%; + margin: 0 auto; + border-width: 0 1px 1px 1px; + border-style: solid; + border-color: #{$primary-blue-03}; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + background-color: $white; + } + + .button-dropdown-modal-wrapper.is-expanded { + position: absolute; + width: auto; + margin: 0 4px; + } + + .dropdown-modal-item { + :deep(.icon-with-link) { + .icon-with-link-container { + gap: var(--space-s); + padding: 5px 0 3px 5px; + } + } + + :deep(.icon-with-link.not-smart-link) .text, + :deep(.icon-with-link) .text { + align-self: baseline; + } + + :deep(.icon-with-link) .text { + font-family: "Karbon", Helvetica, Arial, sans-serif; + font-weight: 500; + color: $medium-grey; + } + + :deep(.icon-with-link) .link, + :deep(.icon-with-link.not-smart-link) .text { + text-decoration: underline; + text-decoration-thickness: 3px; + text-underline-offset: 6px; + -webkit-text-decoration-color: $grey-blue; + text-decoration-color: $grey-blue; + } + + :deep(.icon-with-link.not-smart-link) { + width: unset; + } + + :deep(.icon-with-link.is-link-copied) { + .text { + position: relative; + top: 3px; + } + } + } + + @media #{$has-hover} { + .button:hover { + background-color: #f1f1f1; + } + + .svg__icon-close.svg-glyph-close:hover { + cursor: pointer; + } + + :deep(.icon-with-link) .link:hover, + :deep(.icon-with-link.not-smart-link):hover .text { + -webkit-text-decoration-color: #{$bright-blue}; + text-decoration-color: #{$bright-blue}; + } + + :deep(.icon-with-link) { + .link:hover { + text-decoration-thickness: 3px; + text-underline-offset: 6px; + } + } + + :deep(.icon-with-link.not-smart-link):hover { + + .text, + .icon { + cursor: pointer; + } + } + } + + @media #{$small} { + .button { + display: block; + // width: 36px; + // height: 36px; + min-width: 0; + + .button-inner-wrapper { + justify-content: center; + align-items: center; + -moz-column-gap: 0; + column-gap: 0; + } + + .button-svg { + left: -2px; + top: 2px; + } + } + + .button.is-expanded { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + } + + .button-text, + .toggle-triangle-icon { + display: none; + } + + .dropdown-overlay.is-expanded { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + } + + .button-dropdown-modal { + position: fixed; + width: 100%; + left: 0; + bottom: 0; + height: auto; + z-index: 1; + } + + .button-dropdown-modal-wrapper.is-expanded { + width: 100%; + position: static; + margin: 0; + } + + .svg__icon-close.svg-glyph-close { + // TODO + position: absolute; // was fixed + right: 24px; + top: 24px; // was bottom: 190px; + + z-index: 1; + } + + :deep(.icon-with-link.is-link-copied) { + width: 85%; + background-color: $page-blue; + + .text { + top: 3px; + } + } + + .dropdown-modal-item { + :deep(.icon-with-link):active { + background-color: #faf5f4; + width: 85%; + } + } + } +} \ No newline at end of file diff --git a/src/styles/ftva/_mobile-drawer.scss b/src/styles/ftva/_mobile-drawer.scss new file mode 100644 index 000000000..bd4e497f1 --- /dev/null +++ b/src/styles/ftva/_mobile-drawer.scss @@ -0,0 +1,23 @@ +.ftva.mobile-drawer { + .button { + border-color: $medium-grey; + color: $medium-grey; + + .button-svg { + stroke: unset; + } + } + + .toggle-triangle-icon { + :deep(.svg__fill--accent-blue) { + fill: $medium-grey; + } + } + + .button-dropdown-modal-wrapper { + border-left-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-color: $medium-grey; + } +} \ No newline at end of file From a22fc993f022233076d34c7cd9513bf204e7fcb0 Mon Sep 17 00:00:00 2001 From: Jess Divers Date: Thu, 14 Nov 2024 16:57:52 -0700 Subject: [PATCH 2/7] chore: refactor buttondropdown --- src/lib-components/ButtonDropdown.vue | 227 ++++++++++++++--------- src/lib-components/MobileDrawer.vue | 11 +- src/stories/MobileDrawer.spec.js | 2 +- src/styles/default/_button-dropdown.scss | 223 +++++++++++----------- src/styles/default/_mobile-drawer.scss | 171 ++++++++--------- src/styles/ftva/_button-dropdown.scss | 9 +- src/styles/ftva/_mobile-drawer.scss | 2 +- 7 files changed, 340 insertions(+), 305 deletions(-) diff --git a/src/lib-components/ButtonDropdown.vue b/src/lib-components/ButtonDropdown.vue index f951b0b65..dc3e8528f 100644 --- a/src/lib-components/ButtonDropdown.vue +++ b/src/lib-components/ButtonDropdown.vue @@ -1,19 +1,19 @@ @@ -200,96 +200,139 @@ const parsedClasses = computed(() => { hideIconButton="true" listStyle="dropdown-static" :debug="debugModeEnabled" - @click="handleActbExpandedStyle" -> + @click="handleActbExpandedStyle"> -
-
-
+ class="not-smart-link" + @click="handleCopiedLink(route.fullPath)" /> + + + + +
- + --> + diff --git a/src/lib-components/MobileDrawer.vue b/src/lib-components/MobileDrawer.vue index 4f83761a8..521223627 100644 --- a/src/lib-components/MobileDrawer.vue +++ b/src/lib-components/MobileDrawer.vue @@ -30,7 +30,7 @@ function removeOverlay() { // THEME const theme = useTheme() const parsedClasses = computed(() => { - return ['mobile-drawer', 'button-dropdown', theme?.value || '', { 'is-expanded': isDropdownExpanded.value }] + return ['mobile-drawer', theme?.value || '', { 'is-expanded': isDropdownExpanded.value }] }) onMounted(() => { @@ -46,13 +46,15 @@ onMounted(() => {
diff --git a/src/stories/MobileDrawer.spec.js b/src/stories/MobileDrawer.spec.js index 471c1795f..81b6d13ea 100644 --- a/src/stories/MobileDrawer.spec.js +++ b/src/stories/MobileDrawer.spec.js @@ -1,6 +1,6 @@ describe('GLOBAL / Mobile Drawer', () => { it('Default', () => { - cy.visit('/iframe.html?id=mobile-drawer--default&args=&viewMode=story') + cy.visit('/iframe.html?id=global-mobile-drawer--default&args=&viewMode=story') cy.get('.mobile-drawer').should('exist') cy.percySnapshot('GLOBAL / Mobile Drawer: Default') diff --git a/src/styles/default/_button-dropdown.scss b/src/styles/default/_button-dropdown.scss index 20ddffc79..00797d361 100644 --- a/src/styles/default/_button-dropdown.scss +++ b/src/styles/default/_button-dropdown.scss @@ -1,67 +1,73 @@ .button-dropdown { - display: flex; - position: relative; + // display: flex; + // position: relative; - .button { - display: flex; - justify-content: space-between; - min-width: 194px; - width: 100%; - padding: 12px 16px 12px 20px; - border-radius: 8px; - border: 1px solid #{$primary-blue-03}; - font-weight: 500; - font-size: 18px; - background-color: $white; - color: #{$primary-blue-03}; - - .button-inner-wrapper { - display: flex; - -moz-column-gap: 8px; - column-gap: 8px; - height: 100%; - } - - .button-svg { - position: relative; - top: 1px; - stroke: #{$primary-blue-03}; - } - } - - .button.is-expanded { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - - .is-expanded.toggle-triangle-icon > svg { - transform: rotate(180deg); + .button-svg { position: relative; - bottom: 2px; - } - - .button-dropdown-modal-wrapper { - display: flex; - flex-direction: column; - row-gap: 14px; - padding: 24px 20px 20px 20px; - min-height: auto; - min-width: 186px; - width: 96%; - margin: 0 auto; - border-width: 0 1px 1px 1px; - border-style: solid; - border-color: #{$primary-blue-03}; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - background-color: $white; + top: 1px; + stroke: #{$primary-blue-03}; } - .button-dropdown-modal-wrapper.is-expanded { - position: absolute; - width: auto; - margin: 0 4px; - } + // .button { + // display: flex; + // justify-content: space-between; + // min-width: 194px; + // width: 100%; + // padding: 12px 16px 12px 20px; + // border-radius: 8px; + // border: 1px solid #{$primary-blue-03}; + // font-weight: 500; + // font-size: 18px; + // background-color: $white; + // color: #{$primary-blue-03}; + + // .button-inner-wrapper { + // display: flex; + // -moz-column-gap: 8px; + // column-gap: 8px; + // height: 100%; + // } + + // .button-svg { + // position: relative; + // top: 1px; + // stroke: #{$primary-blue-03}; + // } + // } + + // .button.is-expanded { + // border-bottom-left-radius: 0; + // border-bottom-right-radius: 0; + // } + + // .is-expanded.toggle-triangle-icon > svg { + // transform: rotate(180deg); + // position: relative; + // bottom: 2px; + // } + + // .button-dropdown-modal-wrapper { + // display: flex; + // flex-direction: column; + // row-gap: 14px; + // padding: 24px 20px 20px 20px; + // min-height: auto; + // min-width: 186px; + // width: 96%; + // margin: 0 auto; + // border-width: 0 1px 1px 1px; + // border-style: solid; + // border-color: #{$primary-blue-03}; + // border-bottom-left-radius: 8px; + // border-bottom-right-radius: 8px; + // background-color: $white; + // } + + // .button-dropdown-modal-wrapper.is-expanded { + // position: absolute; + // width: auto; + // margin: 0 4px; + // } .dropdown-modal-item { :deep(.icon-with-link) { @@ -104,13 +110,13 @@ } @media #{$has-hover} { - .button:hover { - background-color: #f1f1f1; - } + // .button:hover { + // background-color: #f1f1f1; + // } - .svg__icon-close.svg-glyph-close:hover { - cursor: pointer; - } + // .svg__icon-close.svg-glyph-close:hover { + // cursor: pointer; + // } :deep(.icon-with-link) .link:hover, :deep(.icon-with-link.not-smart-link):hover .text { @@ -134,66 +140,59 @@ } @media #{$small} { - .button { + :deep(.mobile-button) { display: block; width: 36px; height: 36px; min-width: 0; - - .button-inner-wrapper { - justify-content: center; - align-items: center; - -moz-column-gap: 0; - column-gap: 0; - } - - .button-svg { - left: -2px; - top: 2px; - } } - .button.is-expanded { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + .button-svg { + left: -2px; + top: 2px; } + // .button.is-expanded { + // border-bottom-left-radius: 8px; + // border-bottom-right-radius: 8px; + // } + .button-text, .toggle-triangle-icon { display: none; } - .dropdown-overlay.is-expanded { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1; - } - - .button-dropdown-modal { - position: fixed; - width: 100%; - left: 0; - bottom: 0; - height: auto; - z-index: 1; - } - - .button-dropdown-modal-wrapper.is-expanded { - width: 100%; - position: static; - margin: 0; - } - - .svg__icon-close.svg-glyph-close { - position: fixed; - right: 24px; - bottom: 190px; - z-index: 1; - } + // .dropdown-overlay.is-expanded { + // position: fixed; + // top: 0; + // left: 0; + // right: 0; + // bottom: 0; + // background-color: rgba(0, 0, 0, 0.5); + // z-index: 1; + // } + + // .button-dropdown-modal { + // position: fixed; + // width: 100%; + // left: 0; + // bottom: 0; + // height: auto; + // z-index: 1; + // } + + // .button-dropdown-modal-wrapper.is-expanded { + // width: 100%; + // position: static; + // margin: 0; + // } + + // .svg__icon-close.svg-glyph-close { + // position: fixed; + // right: 24px; + // bottom: 190px; + // z-index: 1; + // } :deep(.icon-with-link.is-link-copied) { width: 85%; diff --git a/src/styles/default/_mobile-drawer.scss b/src/styles/default/_mobile-drawer.scss index e0f8945fb..e9e78734d 100644 --- a/src/styles/default/_mobile-drawer.scss +++ b/src/styles/default/_mobile-drawer.scss @@ -2,7 +2,7 @@ display: flex; position: relative; - .button { + .mobile-button { display: flex; justify-content: space-between; min-width: 194px; @@ -22,14 +22,15 @@ height: 100%; } - .button-svg { - position: relative; - top: 1px; - stroke: #{$primary-blue-03}; - } + //TODO + // :deep(.button-svg) { + // position: relative; + // top: 1px; + // stroke: #{$primary-blue-03}; + // } } - .button.is-expanded { + .mobile-button.is-expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -63,48 +64,48 @@ margin: 0 4px; } - .dropdown-modal-item { - :deep(.icon-with-link) { - .icon-with-link-container { - gap: var(--space-s); - padding: 5px 0 3px 5px; - } - } - - :deep(.icon-with-link.not-smart-link) .text, - :deep(.icon-with-link) .text { - align-self: baseline; - } - - :deep(.icon-with-link) .text { - font-family: "Karbon", Helvetica, Arial, sans-serif; - font-weight: 500; - color: $medium-grey; - } - - :deep(.icon-with-link) .link, - :deep(.icon-with-link.not-smart-link) .text { - text-decoration: underline; - text-decoration-thickness: 3px; - text-underline-offset: 6px; - -webkit-text-decoration-color: $grey-blue; - text-decoration-color: $grey-blue; - } - - :deep(.icon-with-link.not-smart-link) { - width: unset; - } - - :deep(.icon-with-link.is-link-copied) { - .text { - position: relative; - top: 3px; - } - } - } + // .dropdown-modal-item { + // :deep(.icon-with-link) { + // .icon-with-link-container { + // gap: var(--space-s); + // padding: 5px 0 3px 5px; + // } + // } + + // :deep(.icon-with-link.not-smart-link) .text, + // :deep(.icon-with-link) .text { + // align-self: baseline; + // } + + // :deep(.icon-with-link) .text { + // font-family: "Karbon", Helvetica, Arial, sans-serif; + // font-weight: 500; + // color: $medium-grey; + // } + + // :deep(.icon-with-link) .link, + // :deep(.icon-with-link.not-smart-link) .text { + // text-decoration: underline; + // text-decoration-thickness: 3px; + // text-underline-offset: 6px; + // -webkit-text-decoration-color: $grey-blue; + // text-decoration-color: $grey-blue; + // } + + // :deep(.icon-with-link.not-smart-link) { + // width: unset; + // } + + // :deep(.icon-with-link.is-link-copied) { + // .text { + // position: relative; + // top: 3px; + // } + // } + // } @media #{$has-hover} { - .button:hover { + .mobile-button:hover { background-color: #f1f1f1; } @@ -112,33 +113,31 @@ cursor: pointer; } - :deep(.icon-with-link) .link:hover, - :deep(.icon-with-link.not-smart-link):hover .text { - -webkit-text-decoration-color: #{$bright-blue}; - text-decoration-color: #{$bright-blue}; - } + // :deep(.icon-with-link) .link:hover, + // :deep(.icon-with-link.not-smart-link):hover .text { + // -webkit-text-decoration-color: #{$bright-blue}; + // text-decoration-color: #{$bright-blue}; + // } - :deep(.icon-with-link) { - .link:hover { - text-decoration-thickness: 3px; - text-underline-offset: 6px; - } - } + // :deep(.icon-with-link) { + // .link:hover { + // text-decoration-thickness: 3px; + // text-underline-offset: 6px; + // } + // } - :deep(.icon-with-link.not-smart-link):hover { + // :deep(.icon-with-link.not-smart-link):hover { - .text, - .icon { - cursor: pointer; - } - } + // .text, + // .icon { + // cursor: pointer; + // } + // } } @media #{$small} { - .button { + .mobile-button { display: block; - // width: 36px; - // height: 36px; min-width: 0; .button-inner-wrapper { @@ -147,14 +146,9 @@ -moz-column-gap: 0; column-gap: 0; } - - .button-svg { - left: -2px; - top: 2px; - } } - .button.is-expanded { + .mobile-button.is-expanded { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } @@ -190,28 +184,27 @@ } .svg__icon-close.svg-glyph-close { - // TODO - position: absolute; // was fixed + position: absolute; right: 24px; - top: 24px; // was bottom: 190px; + top: 24px; z-index: 1; } - :deep(.icon-with-link.is-link-copied) { - width: 85%; - background-color: $page-blue; + // :deep(.icon-with-link.is-link-copied) { + // width: 85%; + // background-color: $page-blue; - .text { - top: 3px; - } - } + // .text { + // top: 3px; + // } + // } - .dropdown-modal-item { - :deep(.icon-with-link):active { - background-color: #faf5f4; - width: 85%; - } - } + // .dropdown-modal-item { + // :deep(.icon-with-link):active { + // background-color: #faf5f4; + // width: 85%; + // } + // } } } \ No newline at end of file diff --git a/src/styles/ftva/_button-dropdown.scss b/src/styles/ftva/_button-dropdown.scss index 3d03927b9..47d6e7948 100644 --- a/src/styles/ftva/_button-dropdown.scss +++ b/src/styles/ftva/_button-dropdown.scss @@ -1,12 +1,11 @@ .ftva.button-dropdown { - .button { - border-color: $medium-grey; - color: $medium-grey; - + // .button { + // border-color: $medium-grey; + // color: $medium-grey; .button-svg { stroke: unset; } - } + // } .toggle-triangle-icon { :deep(.svg__fill--accent-blue) { diff --git a/src/styles/ftva/_mobile-drawer.scss b/src/styles/ftva/_mobile-drawer.scss index bd4e497f1..5dcf042a8 100644 --- a/src/styles/ftva/_mobile-drawer.scss +++ b/src/styles/ftva/_mobile-drawer.scss @@ -1,5 +1,5 @@ .ftva.mobile-drawer { - .button { + .mobile-button { border-color: $medium-grey; color: $medium-grey; From 45971fc4159c5eab76ef9b34e54de9fae82e9db1 Mon Sep 17 00:00:00 2001 From: Jess Divers Date: Fri, 15 Nov 2024 10:14:46 -0700 Subject: [PATCH 3/7] fix: cleanup commented out code, import vonclickoutside --- src/lib-components/ButtonDropdown.vue | 99 -------------------- src/lib-components/MobileDrawer.vue | 1 + src/styles/default/_button-dropdown.scss | 109 ----------------------- src/styles/default/_mobile-drawer.scss | 84 ----------------- src/styles/ftva/_button-dropdown.scss | 10 +-- 5 files changed, 4 insertions(+), 299 deletions(-) diff --git a/src/lib-components/ButtonDropdown.vue b/src/lib-components/ButtonDropdown.vue index dc3e8528f..f0ce66446 100644 --- a/src/lib-components/ButtonDropdown.vue +++ b/src/lib-components/ButtonDropdown.vue @@ -1,7 +1,5 @@ + + + + + @@ -317,6 +441,17 @@ watch(date, async (newDate, oldDate) => { outline: 1px hidden $accent-blue; } + .button-text { + display: inline-flex; + align-items: center; + svg { + margin-right: 10px; + } + :deep(path.svg__fill--accent-blue) { + fill: $medium-grey; + } + } + .vue-date-picker { --dp-font-family: var(--font-primary); --dp-menu-min-width: 380px; @@ -650,5 +785,15 @@ watch(date, async (newDate, oldDate) => { } } } + + //mobile drawer styles for datefilter + :deep(.mobile-drawer) { + .dp__main { + margin: 0 auto; + .dp__menu { + border: none; + } + } + } } diff --git a/src/lib-components/MobileDrawer.vue b/src/lib-components/MobileDrawer.vue index c90838cb0..2bfb29c22 100644 --- a/src/lib-components/MobileDrawer.vue +++ b/src/lib-components/MobileDrawer.vue @@ -52,7 +52,7 @@ onMounted(() => { @click="handleDropdownExpansion" > + Note: icons can be included, clicking button will open drawer --> @@ -76,7 +76,7 @@ onMounted(() => { :class="isDropdownExpandedClass" > - + diff --git a/src/stories/DateFilter.stories.js b/src/stories/DateFilter.stories.js index 9b994e49c..f165b71cf 100644 --- a/src/stories/DateFilter.stories.js +++ b/src/stories/DateFilter.stories.js @@ -1,6 +1,5 @@ -import { onBeforeUnmount, onMounted } from 'vue' +import { computed } from 'vue' import DateFilter from '@/lib-components/DateFilter' -import { useGlobalStore } from '@/stores/GlobalStore' export default { title: 'DateFilter', @@ -12,38 +11,18 @@ const mock = { eventDates: ['2/29/2024', '2/29/2024', '2/29/2024', '2/29/2024', '3/1/2024', '3/2/2024', '3/2/2024', '3/4/2024', '3/6/2024', '3/8/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024',], } -function Template(args) { +export function Default() { return { - setup() { - // Setup function provides a context where you can use Composition API - onMounted(() => { - const globalStore = useGlobalStore() - - const updateWinWidth = () => { - globalStore.winWidth = window.innerWidth - } - - // Set initial winWidth - updateWinWidth() - - // Update winWidth on window resize - window.addEventListener('resize', updateWinWidth) - - // Use onBeforeUnmount to clean up - onBeforeUnmount(() => { - window.removeEventListener('resize', updateWinWidth) - }) - }) - - return { ...mock, ...args } + data() { + return { + ...mock, + } }, components: { DateFilter }, template: '
', } } -export const Default = Template.bind({}) - const mockNoInput = { hideInput: true, eventDates: ['2/29/2024', '2/29/2024', '2/29/2024', '2/29/2024', '3/1/2024', '3/2/2024', '3/2/2024', '3/4/2024', '3/6/2024', '3/8/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024',], @@ -75,19 +54,19 @@ export function InitialDates() { } } -export function Mobile() { +export function FTVA() { return { data() { return { ...mock, } }, - created() { - const globalStore = useGlobalStore() - globalStore.winWidth = 320 + provide() { + return { + theme: computed(() => 'ftva'), + } }, components: { DateFilter }, - template: - '
', + template: '', } } From 452f1f3b6e00513ddd612ae10353124a17742402 Mon Sep 17 00:00:00 2001 From: Jess Divers Date: Tue, 19 Nov 2024 15:00:05 -0700 Subject: [PATCH 5/7] fix: today btn error on mobile --- src/lib-components/DateFilter.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/lib-components/DateFilter.vue b/src/lib-components/DateFilter.vue index adc60b19d..ffc765589 100644 --- a/src/lib-components/DateFilter.vue +++ b/src/lib-components/DateFilter.vue @@ -84,7 +84,12 @@ function goToToday() { document?.activeElement?.blur() } else { - date.value = [new Date(), new Date()] + if (isMobile.value) + // mobile does allow range selection + date.value = new Date() + else + date.value = [new Date(), new Date()] + todayBtnActive.value = true } } From 315c38f6fe6021678b540766ecf79fed715e279e Mon Sep 17 00:00:00 2001 From: Jess Divers Date: Tue, 19 Nov 2024 15:28:23 -0700 Subject: [PATCH 6/7] chore: lint --- src/lib-components/DateFilter.vue | 5 +++-- src/stories/DateFilter.stories.js | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/lib-components/DateFilter.vue b/src/lib-components/DateFilter.vue index ffc765589..824d0edf6 100644 --- a/src/lib-components/DateFilter.vue +++ b/src/lib-components/DateFilter.vue @@ -30,7 +30,8 @@ const { eventDates, initialDates, hideInput } = defineProps({ type: Object as PropType, default: () => ({ startDate: null, endDate: null }), }, - // if true, the datepicker will be shown in 'inline' mode + // if true, the datepicker will be shown in 'inline' mode all the time, event on desktop + // this option is not currently used on the ftva site // https://vue3datepicker.com/props/modes/#inline hideInput: { type: Boolean, @@ -48,6 +49,7 @@ const date = ref([]) const datepicker = ref(null) const isSelecting = ref(false) const isOpen = ref(false) +const isMobile = ref(false) const todayBtnActive = ref(false) const textConfig = ref({ rangeSeparator: ' — ', @@ -187,7 +189,6 @@ watch(date, async (newDate, oldDate) => { } }) -const isMobile = ref(false) onMounted(() => { const { width } = useWindowSize() watch(width, (newWidth) => { diff --git a/src/stories/DateFilter.stories.js b/src/stories/DateFilter.stories.js index f165b71cf..38a477667 100644 --- a/src/stories/DateFilter.stories.js +++ b/src/stories/DateFilter.stories.js @@ -7,7 +7,6 @@ export default { } const mock = { - hideInput: false, eventDates: ['2/29/2024', '2/29/2024', '2/29/2024', '2/29/2024', '3/1/2024', '3/2/2024', '3/2/2024', '3/4/2024', '3/6/2024', '3/8/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024',], } @@ -19,10 +18,11 @@ export function Default() { } }, components: { DateFilter }, - template: '
', + template: '
', } } - +/* hideInput prop is not currently used anywhere in the app, +input is hidden automatically on mobile */ const mockNoInput = { hideInput: true, eventDates: ['2/29/2024', '2/29/2024', '2/29/2024', '2/29/2024', '3/1/2024', '3/2/2024', '3/2/2024', '3/4/2024', '3/6/2024', '3/8/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024', '3/19/2024',], From c2d54a51adce0a43c4cf33d7f3fb0cfe77a10533 Mon Sep 17 00:00:00 2001 From: Jess Divers Date: Thu, 21 Nov 2024 11:09:54 -0700 Subject: [PATCH 7/7] chore: update button styles --- src/lib-components/DateFilter.vue | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/lib-components/DateFilter.vue b/src/lib-components/DateFilter.vue index 824d0edf6..30bef55ad 100644 --- a/src/lib-components/DateFilter.vue +++ b/src/lib-components/DateFilter.vue @@ -451,7 +451,7 @@ onMounted(() => { display: inline-flex; align-items: center; svg { - margin-right: 10px; + margin-right: 8px; } :deep(path.svg__fill--accent-blue) { fill: $medium-grey; @@ -794,12 +794,34 @@ onMounted(() => { //mobile drawer styles for datefilter :deep(.mobile-drawer) { + // center datepicker within drawer .dp__main { margin: 0 auto; .dp__menu { border: none; } } + // styles for the drawer launch button + // these may be useful for filterdropdown as well + .mobile-button { + width: 166px; + padding: 6px; + border-radius: 4px; + &:active { + color: white; + background-color: $accent-blue; + path.svg__fill--accent-blue { + fill: white; + } + } + &.is-expanded { + color: $accent-blue; + border: 2px solid $accent-blue; + path.svg__fill--accent-blue { + fill: $accent-blue; + } + } + } } }