-
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.
- Add new use of funds components and styles. - Add duplicate interface, environment imports and content loaders for the new content structure. - Add tests. - Add details to clean up document. Ticket: https://phabricator.wikimedia.org/T381411
- Loading branch information
Showing
31 changed files
with
1,109 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.