-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #669 from wmde/use_of_funds_2024
Add new Use of Funds 2024 modal
- Loading branch information
Showing
31 changed files
with
1,093 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <template> | ||
| <div class="call-to-action"> | ||
| <button @click="$emit( 'hide' )">{{ text }}</button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| interface Props { | ||
| text: string; | ||
| } | ||
| defineProps<Props>(); | ||
| defineEmits( [ 'hide' ] ); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <template> | ||
| <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="chevron-down-icon"> | ||
| <path d="M2 1.5L9 8.5L16 1.5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="stroke: var( --chevron-stroke );"/> | ||
| </svg> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 | ||
| 7.71573 31 16 31Z" | ||
| stroke-width="2" | ||
| style="stroke: var( --close-icon-stroke );" | ||
| /> | ||
| <path d="M9 9L24 24" stroke-width="2" stroke-linecap="square" style="stroke: var( --close-icon-stroke );"/> | ||
| <path d="M8.49512 23.4586L24.5049 9.54144" stroke-width="2" stroke-linecap="square" style="stroke: var( --close-icon-stroke );"/> | ||
| </svg> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <template> | ||
| <div class="use-of-funds"> | ||
| <h2>{{ content.title }}</h2> | ||
| <p class="use-of-funds-summary-text">{{ content.summary }}</p> | ||
|
|
||
| <div class="use-of-funds-usage"> | ||
| <div class="use-of-funds-usage-accordion"> | ||
| <details v-for="( accordionItem, index ) in content.accordion.items" :key="index"> | ||
| <summary tabindex="0"> | ||
| {{ accordionItem.title }} | ||
| <ChevronDown/> | ||
| </summary> | ||
| <div v-html="accordionItem.content"/> | ||
| </details> | ||
| </div> | ||
| <p class="use-of-funds-summary-text" v-html="content.accordion.summary"/> | ||
| </div> | ||
|
|
||
| <CallToAction :text="content.callToAction" @hide="$emit( 'callToAction' )"/> | ||
|
|
||
| <div class="use-of-funds-benefits"> | ||
| <h2>{{ content.benefits.title }}</h2> | ||
|
|
||
| <ul> | ||
| <li v-for="( benefitItem, index ) in content.benefits.items" :key="index"> | ||
| <BenefitsIcon :icon="benefitItem.icon"/> | ||
| <span>{{ benefitItem.content }}</span> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="use-of-funds-revenue-comparison"> | ||
| <div class="use-of-funds-revenue-comparison-content"> | ||
| <h2>{{ content.revenueComparison.title }}</h2> | ||
| <p v-for="( paragraph, index ) in content.revenueComparison.content" :key="index"> | ||
| {{ paragraph }} | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="use-of-funds-revenue-comparison-companies"> | ||
| <h3>{{ content.revenueComparison.companies.title }}</h3> | ||
| <ul> | ||
| <li v-for="company in content.revenueComparison.companies.items" :key="company.name"> | ||
| <span class="use-of-funds-companies-company">{{ company.name }}</span> | ||
| <span class="use-of-funds-companies-graph"> | ||
| <span class="use-of-funds-companies-budget-line" :style="{ width: ( company.budget / highestBudget * 100 ) + '%' }"> </span> | ||
| </span> | ||
| <span class="use-of-funds-companies-number"> | ||
| {{ company.budgetString }} | ||
| </span> | ||
| <span class="use-of-funds-companies-link"> | ||
| <a v-if="company.link !== ''" class="company_budgets__citation_link" :href="company.link" target="_blank"> | ||
| {{ company.linkText }} | ||
| </a> | ||
| <span v-else> </span> | ||
| </span> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
|
|
||
| <CallToAction :text="content.callToAction" @hide="$emit( 'callToAction' )"/> | ||
|
|
||
| <p v-html="content.closingParagraph"/> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { computed } from 'vue'; | ||
| import BenefitsIcon from '@src/components/UseOfFunds2024/BenefitsIcon.vue'; | ||
| import CallToAction from '@src/components/UseOfFunds2024/CallToAction.vue'; | ||
| import ChevronDown from '@src/components/UseOfFunds2024/Icons/ChevronDown.vue'; | ||
| import { RevenueComparisonItem, UseOfFundsContent } from '@src/domain/UseOfFunds2024/UseOfFundsContent'; | ||
| interface Props { | ||
| content: UseOfFundsContent | ||
| } | ||
| const props = defineProps<Props>(); | ||
| defineEmits( [ 'callToAction' ] ); | ||
| const highestBudget = computed( () => props.content.revenueComparison.companies.items.reduce( ( budget: number, company: RevenueComparisonItem ) => | ||
| Math.max( budget, company.budget ), 0 ) | ||
| ); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <template> | ||
| <dialog class="wmde-banner-funds-modal" ref="useOfFundsDialogue"> | ||
| <div class="wmde-banner-funds-modal-close"> | ||
| <button @click="$emit( 'hide' )"> | ||
| <IconClose/> | ||
| </button> | ||
| </div> | ||
| <div class="wmde-banner-funds-modal-scroll"> | ||
| <UseOfFunds :content="content" @call-to-action="$emit( 'callToAction' )"/> | ||
| </div> | ||
| </dialog> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref, watch } from 'vue'; | ||
| import IconClose from '@src/components/UseOfFunds2024/Icons/IconClose.vue'; | ||
| import UseOfFunds from '@src/components/UseOfFunds2024/UseOfFunds.vue'; | ||
| import { UseOfFundsContent } from '@src/domain/UseOfFunds2024/UseOfFundsContent'; | ||
| interface Props { | ||
| content: UseOfFundsContent | ||
| visible?: boolean; | ||
| } | ||
| const props = withDefaults( defineProps<Props>(), { | ||
| visible: false | ||
| } ); | ||
| const emit = defineEmits( [ 'shown', 'hide', 'callToAction' ] ); | ||
| const useOfFundsDialogue = ref<HTMLDialogElement>(); | ||
| watch( () => props.visible, ( newVisible: boolean ) => { | ||
| if ( newVisible ) { | ||
| useOfFundsDialogue.value.showModal(); | ||
| emit( 'shown' ); | ||
| } else { | ||
| useOfFundsDialogue.value.close(); | ||
| } | ||
| } ); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| @use './variables/units'; | ||
| @use './variables/breakpoints'; | ||
| @use 'sass:map'; | ||
|
|
||
| .wmde-banner { | ||
| .call-to-action { | ||
| text-align: center; | ||
| margin-bottom: map.get( units.$spacing, 'small' ); | ||
|
|
||
| @include breakpoints.tablet-up { | ||
| margin-bottom: map.get( units.$spacing, 'large' ); | ||
| } | ||
|
|
||
| button { | ||
| padding: map.get( units.$spacing, 'small' ) map.get( units.$spacing, 'large' ); | ||
| border: 0; | ||
| border-radius: 5px; | ||
| background: var( --call-to-action-background ); | ||
| color: var( --call-to-action-color ); | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| &:hover, | ||
| &:focus { | ||
| color: var( --call-to-action-color ); | ||
| background: var( --call-to-action-background-hover ); | ||
| text-decoration: none; | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.