3 |
5 |
6 |
7 |
16 |
--------------------------------------------------------------------------------
/tests/data/bankdata.ts:
--------------------------------------------------------------------------------
1 | export const IBAN = 'DE12500105170648489890';
2 | export const formattedIBAN = 'DE12 5001 0517 0648 4898 90';
3 | export const BIC = 'INGDDEFFXXX';
4 | export const accountNumber = '0648489890';
5 | export const bankCode = '50010517';
6 | export const bankName = 'ING-DiBa';
7 |
--------------------------------------------------------------------------------
/webpack.config.mjs:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const environment = ( process.env.NODE_ENV || 'development' ).trim();
4 |
5 | import dev from './webpack/webpack.config.dev.mjs';
6 | import prod from './webpack/webpack.config.prod.mjs';
7 |
8 | export default environment === 'development' ? dev : prod;
9 |
--------------------------------------------------------------------------------
/types.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.md' {
2 | const value: string;
3 | export default value;
4 | }
5 |
6 | declare module '*.html?raw' {
7 | const value: string;
8 | export default value;
9 | }
10 |
11 | declare module '*.css?raw' {
12 | const value: string;
13 | export default value;
14 | }
15 |
--------------------------------------------------------------------------------
/src/Domain/Membership/MembershipPaymentSummary.ts:
--------------------------------------------------------------------------------
1 | import { MembershipType } from '@src/view_models/MembershipTypeModel';
2 |
3 | export interface MembershipPaymentSummary {
4 | paymentIntervalInMonths: string;
5 | membershipFee: number;
6 | paymentType: string;
7 | membershipType: MembershipType;
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/patterns/Summary.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
--------------------------------------------------------------------------------
/src/pattern_library/samples/compact-donation-form/index.ts:
--------------------------------------------------------------------------------
1 | import { Sample } from '@src/pattern_library/samples/Sample';
2 |
3 | const name = 'Compact Donation Form';
4 | const url = 'compact-donation-form';
5 | import component from './Sample.vue';
6 |
7 | export default { name, url, component } as Sample;
8 |
--------------------------------------------------------------------------------
/src/pattern_library/samples/membership-fee-change/index.ts:
--------------------------------------------------------------------------------
1 | import { Sample } from '@src/pattern_library/samples/Sample';
2 |
3 | const name = 'Membership Fee Change';
4 | const url = 'membership-fee-change';
5 | import component from './Sample.vue';
6 |
7 | export default { name, url, component } as Sample;
8 |
--------------------------------------------------------------------------------
/src/components/shared/composables/useModalState.ts:
--------------------------------------------------------------------------------
1 | import { Ref, ref } from 'vue';
2 |
3 | export enum ModalStates {
4 | Open,
5 | Closed,
6 | }
7 |
8 | const modalState = ref
4 |
6 |
7 |
9 | 2 | 3 |5 | -------------------------------------------------------------------------------- /tests/unit/TestDoubles/FailingBankValidationResource.ts: -------------------------------------------------------------------------------- 1 | import type { BankValidationResource } from '@src/api/BankValidationResource'; 2 | 3 | export const newFailingBankValidationResource = (): BankValidationResource => { 4 | return { 5 | validateBankNumber: jest.fn().mockRejectedValue( 'ERR' ), 6 | validateIban: jest.fn().mockRejectedValue( 'ERR' ), 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/layout/AppContent.vue: -------------------------------------------------------------------------------- 1 | 2 |We think we understand the rules when we become adults but what we really experience is a narrowing of the imagination.4 |
3 |
4 |
6 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/pattern_library/css/utilities/visually-hidden.css:
--------------------------------------------------------------------------------
1 | /*
2 | VISUALLY HIDDEN UTILITY
3 | Info: https://piccalil.li/quick-tip/visually-hidden/
4 | */
5 | .visually-hidden {
6 | border: 0;
7 | clip: rect(0 0 0 0);
8 | height: 0;
9 | margin: 0;
10 | overflow: hidden;
11 | padding: 0;
12 | position: absolute;
13 | width: 1px;
14 | white-space: nowrap;
15 | }
16 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/verbose-checkbox/description.md:
--------------------------------------------------------------------------------
1 | The verbose checkbox is a special checkbox in that it has a long info paragraph that follows it that needs to line up with the label text. It is used for the mailing list field.
2 |
3 | ## Web Standards
4 |
5 | The input should have an `aria-describedby` attribute that points to the ID of the paragraph element.
6 |
--------------------------------------------------------------------------------
/src/Domain/Membership/MembershipApplication.ts:
--------------------------------------------------------------------------------
1 | import { MembershipType } from '@src/view_models/MembershipTypeModel';
2 |
3 | export interface MembershipApplication {
4 | paymentIntervalInMonths: string | number;
5 | membershipFee: string | number;
6 | membershipType: MembershipType;
7 | paymentType: string;
8 | incentives: string[];
9 | isExported: boolean;
10 | }
11 |
--------------------------------------------------------------------------------
/src/pattern_library/css/utilities/stretch-single-content-card.css:
--------------------------------------------------------------------------------
1 | /**
2 | * When we have short pages, like a 404 or an error the main content is shorter than
3 | * the sidebar and looks weird. This makes a content card that's an only child stretch
4 | * vertically and fill the space.
5 | */
6 | .stretch-single-content-card > .content-card:only-child {
7 | min-height: 100%;
8 | }
--------------------------------------------------------------------------------
/src/components/shared/icons/ChevronUpIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/src/components/shared/icons/ChevronDown.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
--------------------------------------------------------------------------------
/src/store/ValidationResponse.ts:
--------------------------------------------------------------------------------
1 | // These types encapsulate the JSON responses that come from the server when calling a validation route
2 |
3 | export interface SuccessResponse {
4 | status: 'OK';
5 | }
6 |
7 | export interface ErrorResponse {
8 | status: 'ERR';
9 | messages: Record
3 |
5 |
6 |
7 |
13 |
--------------------------------------------------------------------------------
/src/components/shared/icons/Checkmark.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/src/components/shared/icons/TickIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
--------------------------------------------------------------------------------
/src/pattern_library/css/blocks/footer-nav.css:
--------------------------------------------------------------------------------
1 | .footer-nav a {
2 | display: block;
3 | padding-block: var(--space-2xs);
4 | color: var(--color-grey-800);
5 | border-bottom: 1px solid var(--color-grey-600);
6 | }
7 |
8 | .footer-nav a:not(:hover):not(:focus) {
9 | text-decoration: none;
10 | }
11 |
12 | .footer-nav a:hover,
13 | .footer-nav a:focus {
14 | color: var(--color-blue-600);
15 | }
16 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/mobile-nav-toggle/markup.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/api/UpdateDonorRequest.ts:
--------------------------------------------------------------------------------
1 | export interface UpdateDonorRequest {
2 | donationId: number;
3 | updateToken: string;
4 | addressType: string;
5 | salutation: string;
6 | title: string;
7 | firstName: string;
8 | lastName: string;
9 | companyName: string;
10 | street: string;
11 | city: string;
12 | postcode: string;
13 | country: string;
14 | email: string;
15 | mailingList: boolean;
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/pages/contact/ContactFormData.ts:
--------------------------------------------------------------------------------
1 | import type { ContactFormItem } from '@src/components/pages/contact/ContactFormItem';
2 |
3 | export interface ContactFormData {
4 | firstname: ContactFormItem;
5 | lastname: ContactFormItem;
6 | donationNumber: ContactFormItem;
7 | email: ContactFormItem;
8 | topic: ContactFormItem;
9 | subject: ContactFormItem;
10 | comment: ContactFormItem;
11 | }
12 |
--------------------------------------------------------------------------------
/src/store/membership_address/constants.ts:
--------------------------------------------------------------------------------
1 | import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
2 |
3 | export const REQUIRED_FIELDS: { [key: number]: string[] } = {
4 | [ AddressTypeModel.PERSON ]: [ 'salutation', 'firstName', 'lastName', 'street', 'postcode', 'city', 'country', 'email' ],
5 | [ AddressTypeModel.COMPANY ]: [ 'companyName', 'street', 'postcode', 'city', 'country', 'email' ],
6 | };
7 |
--------------------------------------------------------------------------------
/webpack/env/prod.env.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 | NODE_ENV: 'production',
3 | VUE_APP_LOGGER: 'errbit',
4 | VUE_APP_ERRBIT_HOST: process.env.VUE_APP_ERRBIT_HOST || 'https://logging.wikimedia.de',
5 | // should be set in the CI/CD pipeline or when running locally
6 | // e.g. "VUE_APP_ERRBIT_PROJECT_KEY=1234567890abcdef npm run build"
7 | VUE_APP_ERRBIT_PROJECT_KEY: process.env.VUE_APP_ERRBIT_PROJECT_KEY || '',
8 | };
9 |
--------------------------------------------------------------------------------
/src/components/pages/donation_form/AddressTypeIds.ts:
--------------------------------------------------------------------------------
1 | import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
2 |
3 | export const AddressTypeIds = new Map
2 |
--------------------------------------------------------------------------------
/src/pattern_library/pages/font-scaling/index.ts:
--------------------------------------------------------------------------------
1 | import { Page } from '@src/pattern_library/pages/Page';
2 |
3 | const name = 'Font Scaling';
4 | const url = 'font-scaling';
5 | import content from './content.md';
6 |
7 | import type from '@src/pattern_library/css/variables/type.css?raw';
8 |
9 | const codeSamples = [
10 | { name: 'type.css', code: type },
11 | ];
12 |
13 | export default { name, url, content, codeSamples } as Page;
14 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/button/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Button';
4 | const url = 'button';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/button.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/callout/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Callout';
4 | const url = 'callout';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/callout.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/summary/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Summary';
4 | const url = 'summary';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/summary.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/toggle/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Toggle';
4 | const url = 'toggle';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/toggle.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/tooltip/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Tooltip';
4 | const url = 'tooltip';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/tooltip.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/components/shared/icons/ExternalLink.vue:
--------------------------------------------------------------------------------
1 |
2 | ({{ $t( 'opens_in_new_tab' ) }})
3 |
8 |
9 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/combobox/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Combobox';
4 | const url = 'combobox';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/combobox.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/locale/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Locale Changer';
4 | const url = 'locale';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/locale.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | /coverage
6 | /tests/e2e/reports/
7 | selenium-debug.log
8 |
9 | # tmp dir with npm cache, created by Makefile
10 | tmp
11 |
12 | # local env files
13 | .env.local
14 | .env.*.local
15 |
16 | # Log files
17 | npm-debug.log*
18 | yarn-debug.log*
19 | yarn-error.log*
20 |
21 | # Editor directories and files
22 | .idea
23 | .vscode
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw*
29 |
--------------------------------------------------------------------------------
/src/components/pages/membership_confirmation/SummaryLinks.vue:
--------------------------------------------------------------------------------
1 |
2 | More Information
3 |This is all the more info. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque laudantium nisi possimus, quas repudiandae veritatis? Architecto blanditiis, et impedit in incidunt inventore laborum molestiae molestias odio pariatur rem sit veniam.
4 |
3 |
6 |
7 |
8 |
9 |
17 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/accordion/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Accordion';
4 | const url = 'accordion';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/accordion.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/icon-text/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Icon Text';
4 | const url = 'icon-text';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/icon-text.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/site-foot/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Site Foot';
4 | const url = 'site-foot';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/site-foot.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/site-head/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Site Head';
4 | const url = 'site-head';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/site-head.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/footer-nav/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Footer Nav';
4 | const url = 'footer-nav';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/footer-nav.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/pagination/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Pagination';
4 | const url = 'pagination';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/pagination.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/section-heading/markup.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 | A 2 level section heading
3 |Section Heading 2
4 |5 |
8 |
10 |
11 |
12 | A single level section heading
9 |10 |
13 |
16 |
17 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/text-radio/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Text Radio';
4 | const url = 'text-radio';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/text-radio.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/components/shared/icons/SuccessIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/content-card/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Content Card';
4 | const url = 'content-card';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/content-card.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/icon-sidebar/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Icon Sidebar';
4 | const url = 'icon-sidebar';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/icon-sidebar.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/info-columns/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Info Columns';
4 | const url = 'info-columns';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/info-columns.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/tests/data/countries.ts:
--------------------------------------------------------------------------------
1 | export default [
2 | { countryCode: 'DE', countryFullName: 'Deutschland', group: '', postCodeValidation: '^[0-9]{5}$' },
3 | { countryCode: 'AU', countryFullName: 'Austria', group: '', postCodeValidation: '^[0-9]{5}$' },
4 | { countryCode: 'IE', countryFullName: 'Ireland', group: 'infrequent', postCodeValidation: '^[0-9]{11}$' },
5 | { countryCode: 'AUS', countryFullName: 'Australia', group: 'infrequent', postCodeValidation: '^[0-9]{7}$' },
6 | ];
7 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/modal-dialogue/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Modal Dialogue';
4 | const url = 'modal-dialogue';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/modal-dialogue.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/view_models/Comment.ts:
--------------------------------------------------------------------------------
1 | export interface Comment {
2 | amount: string;
3 | donor: string;
4 | comment: string;
5 | date: string;
6 | }
7 |
8 | export function commentModelsFromObject( obj: any ): Comment[] {
9 | return obj.map( ( rawComment: any ) => {
10 | return {
11 | amount: rawComment.betrag,
12 | donor: rawComment.spender,
13 | comment: rawComment.kommentar,
14 | date: rawComment.lokalisiertes_datum,
15 | } as Comment;
16 | } );
17 | }
18 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/field-container/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Field Container';
4 | const url = 'field-container';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/field-container.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/iban-calculator/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'IBAN Calculator';
4 | const url = 'iban-calculator';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/iban-calculator.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/section-heading/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Section Heading';
4 | const url = 'section-heading';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/section-heading.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/detailed-info-box/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Detailed Info Box';
4 | const url = 'detailed-info-box';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/detailed-info-box.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/donation-comment/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Donation Comment';
4 | const url = 'donation-comment';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/donation-comment.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/mobile-nav-toggle/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Mobile Nav Toggle';
4 | const url = 'mobile-nav-toggle';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/mobile-nav-toggle.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/more-info-toggle/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'More Info Toggle';
4 | const url = 'more-info-toggle';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/more-info-toggle.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/verbose-checkbox/index.ts:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@src/pattern_library/patterns/Pattern';
2 |
3 | const name = 'Verbose Checkbox';
4 | const url = 'verbose-checkbox';
5 | import description from './description.md';
6 | import html from './markup.html?raw';
7 | import examples from './Examples.vue';
8 | import css from '../../css/blocks/verbose-checkbox.css?raw';
9 |
10 | export default { name, url, description, html, examples, css } as Pattern;
11 |
--------------------------------------------------------------------------------
/src/view_models/supporters.ts:
--------------------------------------------------------------------------------
1 | export interface SupportersData {
2 | visibleSupporterId: number | null;
3 | }
4 |
5 | export interface Supporter {
6 | name: string;
7 | amount: string;
8 | comment: string;
9 | }
10 |
11 | export function supportersFromObject( obj: any ): Supporter[] {
12 | return obj.supporters.map( ( supporter: any ) => {
13 | return {
14 | name: supporter.name,
15 | amount: supporter.amount,
16 | comment: supporter.comment,
17 | };
18 | } );
19 | }
20 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/toggle/Examples.vue:
--------------------------------------------------------------------------------
1 |
2 | A section heading with normal text
14 |This is some normal text
15 |16 |
3 |
15 |
16 |
17 |
20 |
--------------------------------------------------------------------------------
/src/components/shared/form_fields/useFieldModel.ts:
--------------------------------------------------------------------------------
1 | import { Ref, ref, UnwrapRef, watch } from 'vue';
2 |
3 | type VueRefReturnType
4 |
6 |
7 |
8 | Toggle
5 |6 |
9 |
13 |
14 |
2 |
15 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/info-columns/markup.html:
--------------------------------------------------------------------------------
1 |
3 |
6 | Lorem ipsum dolor sit amet
5 |
7 |
10 | Lorem ipsum dolor sit amet
9 |
11 |
14 | Lorem ipsum dolor sit amet
13 |
2 |
15 |
--------------------------------------------------------------------------------
/src/util/merge_validation_results.ts:
--------------------------------------------------------------------------------
1 | import type { ValidationResult } from '@src/view_models/Address';
2 |
3 | export function mergeValidationResults( results: ValidationResult[] ) {
4 | return results.reduce(
5 | ( result: ValidationResult, currentResult: ValidationResult ) => {
6 | if ( currentResult.status !== 'OK' ) {
7 | result.status = 'ERR';
8 | result.messages = Object.assign( result.messages, currentResult.messages );
9 | }
10 | return result;
11 | },
12 | { status: 'OK', messages: {} },
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/webpack/helpers.mjs:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import path from 'path';
4 | import { fileURLToPath } from 'url';
5 |
6 | const filename = fileURLToPath( import.meta.url );
7 | const dirname = path.dirname( filename );
8 |
9 | export default {
10 | root: function ( args ) {
11 | args = Array.prototype.slice.call( arguments, 0 );
12 |
13 | return path.join.apply( path, [ path.resolve( dirname, '..' ) ].concat( args ) );
14 | },
15 | assetsPath: function ( _path ) {
16 | return path.posix.join( 'static', _path );
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/src/components/pages/donation_form/DonationReceipt/useAddressTypeModel.ts:
--------------------------------------------------------------------------------
1 | import { Ref, ref, watch } from 'vue';
2 | import { action } from '@src/store/util';
3 | import { Store } from 'vuex';
4 |
5 | export function useAddressTypeModel( store: Store
3 |
6 | Lorem ipsum dolor sit amet
5 |
7 |
10 | Lorem ipsum dolor sit amet
9 |
11 |
14 | Lorem ipsum dolor sit amet
13 |
2 |
5 |
10 |
--------------------------------------------------------------------------------
/tests/unit/TestDoubles/FakeCommentResource.ts:
--------------------------------------------------------------------------------
1 | import type { CommentResource } from '@src/api/CommentResource';
2 |
3 | export const successMessage = 'Success';
4 | export const failureMessage = 'Fail';
5 |
6 | export class FakeSucceedingCommentResource implements CommentResource {
7 | post(): Promise
3 |
4 |
6 |
10 |
11 |
12 |
22 |
--------------------------------------------------------------------------------
/src/store/paymentTypeValidator.ts:
--------------------------------------------------------------------------------
1 | import { PaymentType } from '@src/view_models/PaymentType';
2 |
3 | export function isValidPaymentType( paymentType: string, interval: string, allowedPaymentTypes: string[] ): boolean {
4 | if ( !allowedPaymentTypes.includes( paymentType ) ) {
5 | return false;
6 | }
7 |
8 | // Sofort payments can't be recurring so clear the type if it is initialised with an interval
9 | if ( paymentType === PaymentType.SOFORT && ![ '', '0' ].includes( interval ) ) {
10 | return false;
11 | }
12 |
13 | return true;
14 | }
15 |
--------------------------------------------------------------------------------
/src/pattern_library/index.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from '@src/pattern_library/components/App.vue';
3 | import PageDataInitializer from '@src/util/page_data_initializer';
4 | import { content } from '@src/pattern_library/content';
5 |
6 | interface ApplicationVars {
7 | pattern: string;
8 | }
9 |
10 | const pageData = new PageDataInitializer
4 |
6 |
7 |
9 | {{ pageTitle }}
5 | 6 | 7 | 8 | 9 |{{ $t( 'system_message_page_header' ) }}
5 | 6 | 7 |{{ $t( errorData.message ) }}
8 | 9 |
2 |
--------------------------------------------------------------------------------
/src/store/amountValidator.ts:
--------------------------------------------------------------------------------
1 | import { AmountValidity } from '@src/view_models/Payment';
2 |
3 | const minCentAmount = 100;
4 | const maxCentAmount = 9999999;
5 |
6 | export function validateAmount( amount: number ): AmountValidity {
7 |
8 | if ( amount < minCentAmount ) {
9 | return AmountValidity.AMOUNT_TOO_LOW;
10 | }
11 |
12 | if ( amount > maxCentAmount ) {
13 | return AmountValidity.AMOUNT_TOO_HIGH;
14 | }
15 |
16 | return AmountValidity.AMOUNT_VALID;
17 | }
18 |
19 | export function isValidAmount( amount: number ): boolean {
20 | return validateAmount( amount ) === AmountValidity.AMOUNT_VALID;
21 | }
22 |
--------------------------------------------------------------------------------
/src/store/data_persistence/address.ts:
--------------------------------------------------------------------------------
1 | import { DataPersistenceMutationType } from '@src/view_models/DataPersistence';
2 | import { mutation } from '@src/store/util';
3 |
4 | export default ( namespace: string ) => {
5 | return {
6 | storageKey: 'address',
7 | mutationType: DataPersistenceMutationType.KEY_VALUE_PAIR,
8 | mutationKey: mutation( namespace, 'SET_ADDRESS_FIELD' ),
9 | fields: [
10 | 'salutation',
11 | 'title',
12 | 'firstName',
13 | 'lastName',
14 | 'street',
15 | 'postcode',
16 | 'city',
17 | 'country',
18 | 'email',
19 | 'companyName',
20 | 'date',
21 | ],
22 | };
23 | };
24 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "experimentalDecorators": true,
4 | "target": "es5",
5 | "skipLibCheck": true,
6 | "importHelpers": true,
7 | "sourceMap": true,
8 | "baseUrl": ".",
9 | "esModuleInterop": true,
10 | "resolveJsonModule": true,
11 | "types": [
12 | "webpack-env",
13 | "jest"
14 | ],
15 | "paths": {
16 | "@src/*": [ "src/*" ],
17 | "@test/*": [ "tests/*" ]
18 | },
19 | "lib": [
20 | "esnext",
21 | "dom",
22 | "dom.iterable",
23 | "scripthost",
24 | "es5",
25 | "es2015.promise"
26 | ]
27 | },
28 | "exclude": [
29 | "node_modules"
30 | ]
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/pages/AccessDenied.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 | Your Contact Data
4 |
5 | Joe Bloggs
6 | Any Street
7 | 23456 Some City
8 | Germany
9 | joebloggs@example.com
10 |
13 |
21 | Your Bank Details
14 | 15 |-
16 |
- IBAN: DE1234 5678 1234 5678 17 |
- BIC: BS123 18 |
- Bank Name: Berliner Sparkasse 19 |
{{ $t( 'access_denied_header' ) }}
5 | 6 | 7 | 8 | 9 |
3 |
18 |
19 |
22 |
--------------------------------------------------------------------------------
/src/util/street_and_building_number_tools.ts:
--------------------------------------------------------------------------------
1 | export const separator = '|||';
2 |
3 | export function splitStreetAndBuildingNumber( street: string ): { street: string; buildingNumber: string } {
4 | const values = street.split( separator );
5 | return {
6 | street: values[ 0 ] ?? '',
7 | buildingNumber: values[ 1 ] ?? '',
8 | };
9 | }
10 |
11 | export function joinStreetAndBuildingNumber( streetName: string, buildingNumber: string ): string {
12 | return streetName + separator + buildingNumber;
13 | }
14 |
15 | export function clearStreetAndBuildingNumberSeparator( street: string ): string {
16 | return street.replace( separator, ' ' ).trim();
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/shared/form_elements/useInputFocusing.ts:
--------------------------------------------------------------------------------
1 | import { ref, Ref } from 'vue';
2 |
3 | type ReturnType = {
4 | labelRef: Ref
4 |
6 |
7 |
8 |
17 | Footer Navigation
5 |6 |
3 |
16 |
17 |
20 |
--------------------------------------------------------------------------------
/src/scss/settings/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | $tablet: 769px;
2 | $desktop: 1024px;
3 | $widescreen: 1216px;
4 | $full-hd: 1408px;
5 |
6 | /*
7 | MIXIN USAGE:
8 |
9 | .my-selector {
10 | @include breakpoints.small-up {
11 | // Stuff that happens when bigger than $small
12 | }
13 | }
14 |
15 | */
16 |
17 | @mixin tablet-up {
18 | @media ( min-width: $tablet ) {
19 | @content;
20 | }
21 | }
22 |
23 | @mixin desktop-up {
24 | @media ( min-width: $desktop ) {
25 | @content;
26 | }
27 | }
28 |
29 | @mixin widescreen-up {
30 | @media ( min-width: $widescreen ) {
31 | @content;
32 | }
33 | }
34 |
35 | @mixin full-hd-up {
36 | @media ( min-width: $full-hd ) {
37 | @content;
38 | }
39 | }
--------------------------------------------------------------------------------
/src/components/shared/icons/ChevronLeftIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
--------------------------------------------------------------------------------
/tests/unit/TestDoubles/FakeBankValidationResource.ts:
--------------------------------------------------------------------------------
1 | import type { BankValidationResource } from '@src/api/BankValidationResource';
2 | import type { BankAccountResponse } from '@src/view_models/BankAccount';
3 |
4 | export class FakeBankValidationResource implements BankValidationResource {
5 | async validateIban(): Promise
4 |
6 |
7 |
8 | Button Examples
5 |6 |
9 |
10 | Link Button
11 |
12 |
13 |
14 |
15 |
3 |
4 |
6 |
8 |
9 |
25 |
--------------------------------------------------------------------------------
/src/pattern_library/css/compositions/repel.css:
--------------------------------------------------------------------------------
1 | /*
2 | REPEL
3 | Repel is used when you need 2 elements in a row that align to the left and right
4 | edges but will stack once there is not enough space for them.
5 |
6 | CUSTOM PROPERTIES AND CONFIGURATION
7 | --gutter (var(--space-m)): This defines the space
8 | between each item.
9 |
10 | --repel-vertical-alignment (center): How items should align vertically.
11 | Can be any acceptable flexbox alignment value.
12 | */
13 | .repel {
14 | display: flex;
15 | flex-wrap: wrap;
16 | justify-content: space-between;
17 | align-items: var(--repel-vertical-alignment, center);
18 | gap: var(--gutter, var(--space-m));
19 | }
20 |
21 | .repel[data-nowrap] {
22 | flex-wrap: nowrap;
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/pages/UpdateAddressSuccess.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ $t( 'address_change_form_success_title' ) }}
5 | 6 | 7 | 8 | 9 | 10 |
2 |
6 |
8 |
--------------------------------------------------------------------------------
/src/scss/settings/_forms.scss:
--------------------------------------------------------------------------------
1 | @use './units';
2 | @use './colors';
3 | @use "sass:map";
4 | @use 'sass:color';
5 |
6 | $input: (
7 | 'border-radius': 8px,
8 | 'border': 1px solid colors.$gray-mid,
9 | 'border-focus-color': colors.$primary,
10 | 'border-error-color': colors.$error,
11 | 'height': 46px,
12 | 'font-size': 16px,
13 | 'min-width': 272px,
14 | 'max-width': 414px,
15 | );
16 |
17 | $checkbox-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
18 |
--------------------------------------------------------------------------------
/src/components/shared/useMailHostList.ts:
--------------------------------------------------------------------------------
1 | import { Ref, ref } from 'vue';
2 | import axios from 'axios';
3 |
4 | /**
5 | * This is a Vue composable that provides a list of popular mail providers.
6 | *
7 | * Right now it's used in the Email component to check for typos.
8 | */
9 | export function useMailHostList(): RefIf you do not want to receive emails, please uncheck the box. You can also unsubscribe at any time in the future, for example, via the unsubscribe link at the bottom of each email or by sending an email to spenden@wikimedia.de. You can find further information in our privacy policy.
7 |{{ $t( 'membership_form_sidebar_title' ) }}
6 |{{ $t( 'membership_form_sidebar_text' ) }}
8 | 9 |{{ $t('form_summary_bank_details_header') }}
3 |-
4 |
- 5 | {{ $t('form_summary_iban') }} {{ bankData.iban }} 6 | 7 |
- 8 | {{ $t('form_summary_bic') }} {{ bankData.bic }} 9 | 10 |
- 11 | {{ $t('form_summary_bank_name') }} {{ bankData.bankName }} 12 | 13 |
{{ $t( 'page_not_found_header' ) }}
5 | 6 | 7 | 8 | 9 |
8 |
11 |
12 | {{ $t('membership_fee_upgrade_error_page_headline') }}
9 |{{ $t('membership_fee_upgrade_error_page_text') }}
10 |
8 |
11 |
12 | {{ $t('membership_fee_upgrade_returning_page_headline') }}
9 |{{ $t('membership_fee_upgrade_returning_page_text') }}
10 |
3 |
9 |
10 |
4 |
6 |
7 |
8 | {{ page.name }}
5 |6 |
11 |
22 |
23 |
32 |
--------------------------------------------------------------------------------
/src/pattern_library/css/global/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Source Sans Pro';
3 | src: url('../../fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
4 | url('../../fonts/sourcesanspro-regular-webfont.woff') format('woff');
5 | font-weight: normal;
6 | font-style: normal;
7 | }
8 |
9 | @font-face {
10 | font-family: 'Source Sans Pro';
11 | src: url('../../fonts/sourcesanspro-it-webfont.woff2') format('woff2'),
12 | url('../../fonts/sourcesanspro-it-webfont.woff') format('woff');
13 | font-weight: normal;
14 | font-style: italic;
15 | }
16 |
17 | @font-face {
18 | font-family: 'Source Sans Pro';
19 | src: url('../../fonts/sourcesanspro-bold-webfont.woff2') format('woff2'),
20 | url('../../fonts/sourcesanspro-bold-webfont.woff') format('woff');
21 | font-weight: bold;
22 | font-style: normal;
23 | }
24 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/tooltip/markup.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/patterns/Callout.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
14 |
15 |
16 |
17 | Code Samples
13 |14 |
{{ codeSample.name }}
18 |{{ codeSample.code.trim() }}
12 |
14 |
15 |
16 |
30 |
--------------------------------------------------------------------------------
/src/components/shared/composables/useReceiptModel.ts:
--------------------------------------------------------------------------------
1 | import { Store } from 'vuex';
2 | import { computed, ComputedRef, Ref, ref, watch } from 'vue';
3 | import { action } from '@src/store/util';
4 |
5 | export type ReturnType = {
6 | receiptNeeded: Ref8 | {{ $t('bank_data_title_new_prefix') }} 9 | {{ $t('bank_data_title') }} 10 |
11 | 12 |
3 |
21 |
22 |
29 |
--------------------------------------------------------------------------------
/src/pattern_library/css/blocks/content-card.css:
--------------------------------------------------------------------------------
1 | .content-card {
2 | --card-padding: var(--space-xs-l);
3 |
4 | padding: var(--card-padding);
5 | background: var(--color-white);
6 | border-bottom: 1px solid var(--color-blue-600);
7 | }
8 |
9 | .content-card[data-theme='bordered'] {
10 | border: 3px solid var(--color-blue-600);
11 | }
12 |
13 | .content-card[data-sidebar-card] {
14 | --card-padding: var(--space-xs);
15 | }
16 |
17 | .content-card[data-collapsable] {
18 | --card-padding: 0;
19 | --summary-color: var(--color-blue-600);
20 | }
21 |
22 | .content-card[data-collapsable] summary {
23 | --summary-margin: 0;
24 | --summary-padding: var(--space-xs-l);
25 | --summary-border: 0;
26 | }
27 |
28 | .content-card[data-collapsable] details > div,
29 | .content-card[data-collapsable] .content-card__content {
30 | padding-inline: var(--space-xs-l);
31 | padding-block-end: var(--space-xs-l);
32 | }
33 |
--------------------------------------------------------------------------------
/jest.setup.ts:
--------------------------------------------------------------------------------
1 | import { config } from '@vue/test-utils';
2 | import { createI18n } from 'vue-i18n';
3 | // See https://stackoverflow.com/a/57439821/130121
4 | require( 'regenerator-runtime/runtime' );
5 |
6 | // eslint-disable-next-line no-underscore-dangle
7 | global._paq = {
8 | push: jest.fn(),
9 | };
10 |
11 | config.global.plugins = [ createI18n( { legacy: false, missingWarn: false, fallbackWarn: false } ) ];
12 |
13 | jest.mock( 'vue-i18n', () => {
14 | return {
15 | ...jest.requireActual( 'vue-i18n' ),
16 | useI18n: jest.fn().mockReturnValue( {
17 | t: ( key: string, params?: Object ) => JSON.stringify( { key, ...params } ),
18 | n: ( amount: string, keyOrOptions?: string | object ) => {
19 | if ( typeof keyOrOptions === 'string' ) {
20 | return `${amount}-${keyOrOptions}`;
21 | }
22 |
23 | return JSON.stringify( { amount, ...keyOrOptions } );
24 | },
25 | } ),
26 | };
27 | } );
28 |
--------------------------------------------------------------------------------
/src/api/DonorResource.ts:
--------------------------------------------------------------------------------
1 | import type { Address } from '@src/view_models/Address';
2 | import axios, { AxiosResponse } from 'axios';
3 | import type { UpdateDonorRequest } from '@src/api/UpdateDonorRequest';
4 |
5 | export interface DonorResource {
6 | put: ( data: UpdateDonorRequest ) => Promise;
7 | }
8 |
9 | export class ApiDonorResource implements DonorResource {
10 |
11 | putEndpoint: string;
12 |
13 | constructor( putEndpoint: string ) {
14 | this.putEndpoint = putEndpoint;
15 | }
16 |
17 | put( data: UpdateDonorRequest ): Promise {
18 | return axios.put(
19 | this.putEndpoint,
20 | data,
21 | { headers: { 'Content-Type': 'application/json' } }
22 | ).then( ( response: AxiosResponse ) => {
23 | return Promise.resolve( response.data );
24 | } ).catch( ( error: any ) => {
25 | return Promise.reject( error.response.data.errors[ 0 ] );
26 | } );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/pages/use_of_funds/UseOfFundsContent.ts:
--------------------------------------------------------------------------------
1 | interface AccordionItem {
2 | title: string;
3 | content: string;
4 | }
5 |
6 | interface BenefitsItem {
7 | icon: 'hand' | 'smartphone' | 'world' | 'megaphone' | 'twentyfourseven';
8 | content: string;
9 | }
10 |
11 | export interface RevenueComparisonItem {
12 | name: string;
13 | budget: number;
14 | budgetString: string;
15 | link: string;
16 | linkText: string;
17 | }
18 |
19 | export interface UseOfFundsContent {
20 | title: string;
21 | summary: string;
22 | callToAction: string;
23 | accordion: {
24 | items: AccordionItem[];
25 | summary: string;
26 | };
27 | benefits: {
28 | title: string;
29 | items: BenefitsItem[];
30 | };
31 | revenueComparison: {
32 | title: string;
33 | content: string[];
34 | companies: {
35 | title: string;
36 | items: RevenueComparisonItem[];
37 | };
38 | };
39 | closingParagraph: string;
40 | }
41 |
--------------------------------------------------------------------------------
/src/pattern_library/css/blocks/mobile-nav-toggle.css:
--------------------------------------------------------------------------------
1 | .mobile-nav-toggle {
2 | --icon-fill: var(--color-grey-800);
3 | --button-width: var(--navigation-height);
4 | --button-height: var(--navigation-height);
5 |
6 | all: unset;
7 | display: flex;
8 | height: var(--button-width);
9 | width: var(--button-height);
10 | justify-content: center;
11 | align-items: center;
12 | }
13 |
14 | .mobile-nav-toggle:hover,
15 | .mobile-nav-toggle:focus {
16 | background-color: var(--color-grey-100);
17 | }
18 |
19 | .mobile-nav-toggle__open,
20 | .mobile-nav-toggle__close {
21 | justify-content: center;
22 | }
23 |
24 | .mobile-nav-toggle__open {
25 | display: flex;
26 | }
27 |
28 | .mobile-nav-toggle__close {
29 | display: none;
30 | }
31 |
32 | .mobile-nav-toggle--active .mobile-nav-toggle__close {
33 | display: flex;
34 | }
35 |
36 | .mobile-nav-toggle--active .mobile-nav-toggle__open {
37 | display: none;
38 | }
39 |
--------------------------------------------------------------------------------
/src/store/membership_fee/index.ts:
--------------------------------------------------------------------------------
1 | import { Module } from 'vuex';
2 | import { Validity } from '@src/view_models/Validity';
3 | import { actions } from '@src/store/membership_fee/actions';
4 | import { getters } from '@src/store/membership_fee/getters';
5 | import { mutations } from '@src/store/membership_fee/mutations';
6 | import type { MembershipFee } from '@src/view_models/MembershipFee';
7 |
8 | export default function (): Module
4 |
6 |
7 |
8 |
9 |
10 | Nav Examples
5 |6 |
11 |
19 |
20 | {{ $t( 'donation_confirmation_exported_title' ) }}
7 |9 | {{ $t( 'donation_confirmation_exported_content' ) }} 10 |
11 | 12 |
3 |
19 |
20 |
28 |
--------------------------------------------------------------------------------
/src/components/shared/icons/EditIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/icon-text/markup.html:
--------------------------------------------------------------------------------
1 |
4 |
6 |
7 |
8 |
18 | Mobile Nav Toggle Example
5 |6 |
2 |
4 |
5 | Icon Heading 1
3 |
6 |
8 |
9 | Icon Heading 2
7 |
10 |
12 |
13 | Icon Heading 3
11 |
14 |
16 |
17 | Icon text short
15 |
18 |
--------------------------------------------------------------------------------
/tests/unit/components/pages/donation_form/PaymentSummary.spec.ts:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils';
2 | import PaymentSummary from '@src/components/pages/donation_form/PaymentSummary.vue';
3 |
4 | describe( 'PaymentSummary.vue', () => {
5 | it( 'renders the payment summary with paymentType', () => {
6 | const wrapper = mount( PaymentSummary, {
7 | props: {
8 | amount: 50,
9 | interval: 'monthly',
10 | paymentType: 'Credit Card',
11 | },
12 | } );
13 |
14 | expect( wrapper.find( '.callout' ).html() ).toContain(
15 | 'donation_form_payment_summary'
16 | );
17 | } );
18 |
19 | it( 'renders the payment summary with paymentType', () => {
20 | const wrapper = mount( PaymentSummary, {
21 | props: {
22 | amount: 41.3,
23 | interval: 'yearly',
24 | },
25 | } );
26 |
27 | expect( wrapper.find( '.callout' ).html() ).toContain(
28 | 'donation_form_payment_summary_payment_type_missing'
29 | );
30 | } );
31 | } );
32 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/donation-comment/Examples.vue:
--------------------------------------------------------------------------------
1 |
2 | Long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet, consectetur culpa doloremque ex, exercitationem harum illum in ipsa ipsum, modi natus nemo odio perferendis quaerat quis similique sint tempore.
19 |
3 |
18 |
19 |
22 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/text-radio/markup.html:
--------------------------------------------------------------------------------
1 |
4 |
6 |
7 |
8 | Examples
5 |6 |
9 | 10 |12 | 13 |We think we understand the rules when we become adults but what we really experience is a narrowing of the imagination.11 |
14 | 15 |17 |We think we understand the rules when we become adults but what we really experience is a narrowing of the imagination.16 |
2 |
20 |
--------------------------------------------------------------------------------
/src/api/AddressChangeResource.ts:
--------------------------------------------------------------------------------
1 | import type { Address } from '@src/view_models/Address';
2 | import axios, { AxiosResponse } from 'axios';
3 | import type { UpdateAddressResponse } from '@src/api/UpdateAddressResponse';
4 |
5 | export interface AddressChangeResource {
6 | put: ( data: Address ) => Promise
3 |
4 |
10 |
11 |
5 |
6 |
7 | €
8 |
9 |
12 |
13 |
19 |
14 |
15 |
16 | €
17 |
18 |
3 |
9 |
10 |
4 |
6 |
7 |
8 | {{ pattern.name }}
5 |6 |
13 |
19 |
20 |
14 |
16 |
17 | HTML
15 |16 |
{{ pattern.html.trim() }}
21 |
27 |
28 |
29 |
30 |
42 |
--------------------------------------------------------------------------------
/src/components/pages/donation_form/DonationSummaryHeadline.vue:
--------------------------------------------------------------------------------
1 |
2 |
22 |
24 |
25 | CSS
23 |24 |
{{ pattern.css.trim() }}{{ $t( 'donation_form_summary_headline' ) }} 3 | {{ formattedAmount }} 4 | {{ interval }} 5 | {{ $t('donation_summary_via') }} {{ paymentType }} 6 |
7 | 8 | 24 | -------------------------------------------------------------------------------- /src/api/CommentResource.ts: -------------------------------------------------------------------------------- 1 | import axios, { AxiosResponse } from 'axios'; 2 | 3 | export interface CommentRequest { 4 | donationId: number; 5 | updateToken: string; 6 | comment: string; 7 | withName: boolean; 8 | isPublic: boolean; 9 | } 10 | 11 | interface CommentResponse { 12 | status: string; 13 | message: string; 14 | } 15 | 16 | export interface CommentResource { 17 | post: ( data: CommentRequest ) => Promise{{ $t( 'subscription_confirmation_page_header' ) }}
5 | 6 | 7 | 8 | 9 | 10 |{{ $t( 'donation_confirmation_survey_title' ) }}
7 |{{ $t( 'donation_confirmation_survey_content' ) }}
9 | 10 | 11 |{{ $t( 'membership_confirmation_survey_title' ) }}
7 |{{ $t( 'membership_confirmation_survey_content' ) }}
9 | 10 | 11 |{{ $t( 'membership_fee_upgrade_sidebar_headline' )}}
7 |[{{ externalMemberId }}]
9 | 10 |
3 |
19 |
20 |
28 |
--------------------------------------------------------------------------------
/tests/unit/utils/createCampaignQueryString.spec.ts:
--------------------------------------------------------------------------------
1 | import { createCampaignQueryString } from '@src/util/createCampaignQueryString';
2 |
3 | describe( 'createCampaignQueryString', () => {
4 |
5 | test.each( [
6 | // URL contains all parameters
7 | [ 'test1=test1&test2=test2', 'test1=test1&test2=test2' ],
8 | // URL contains additional params - they should be filtered
9 | [ 'test1=test1&utoken=TESTX&token=1&accessToken=2&id=123456', 'test1=test1' ],
10 | // URL contains no parameters - all should be filtered
11 | [ 'addressType=test1&amount=TESTX&interval=1&paymentType=2', '' ],
12 | // URL contains non-campaign tracking params - the output should contain them
13 | [
14 | 'test1=test1&piwik_kwd=testKeyword&piwik_campaign=testCampaign&impCount=3&bImpCount=1',
15 | 'piwik_kwd=testKeyword&piwik_campaign=testCampaign&impCount=3&bImpCount=1&test1=test1',
16 | ],
17 | ] )( 'given query %p outputs %p', ( query: string, expected: string ) => {
18 | expect( createCampaignQueryString( query, [ 'test1', 'test2' ] ) ).toStrictEqual( expected );
19 | } );
20 |
21 | } );
22 |
--------------------------------------------------------------------------------
/src/pattern_library/patterns/pagination/markup.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/scss/pattern-library-compatibility/button.scss:
--------------------------------------------------------------------------------
1 | @use "../variables";
2 |
3 | @use '../settings/forms';
4 | @use '../settings/colors';
5 | @use '../settings/global';
6 | @use 'sass:color';
7 | @use 'sass:map';
8 |
9 | $hover-color: color.adjust( colors.$primary, $lightness: -5% );
10 |
11 | .button {
12 | font-weight: bold;
13 | font-family: variables.$family-primary;
14 | font-size: 16px;
15 |
16 | position: relative;
17 | display: inline-block;
18 | background: colors.$primary;
19 | color: colors.$white;
20 | border: 0;
21 | border-radius: map.get( forms.$input, 'border-radius' );
22 | padding: 0;
23 | margin: 0;
24 | font-size: 1em;
25 | font-weight: 700;
26 | text-align: center;
27 | height: 54px;
28 | width: 240px;
29 | cursor: pointer;
30 | transition: background-color 200ms global.$easing, color 200ms global.$easing;
31 | text-decoration: none;
32 |
33 | &:hover,
34 | &:focus {
35 | color: colors.$white;
36 | text-decoration: none;
37 | background: $hover-color;
38 | border: 1px solid colors.$white;
39 | box-shadow: 0 0 0 2px colors.$primary;
40 | }
41 | }
--------------------------------------------------------------------------------
/src/util/FilteredUrlMembershipValues.ts:
--------------------------------------------------------------------------------
1 | import type { InitialMembershipFeeValues } from '@src/view_models/MembershipFee';
2 |
3 | export default class FilteredUrlMembershipValues implements InitialMembershipFeeValues {
4 | private params: URLSearchParams;
5 | public validateFeeUrl: string;
6 | public paymentType: string | null;
7 |
8 | constructor( params: URLSearchParams, validateFeeUrl: string ) {
9 | this.params = params;
10 | this.validateFeeUrl = validateFeeUrl;
11 | this.paymentType = null;
12 | }
13 |
14 | get fee() {
15 | const feeValue = this.params.get( 'fee' ) ?? '';
16 | return feeValue.match( /^\d+$/ ) ? feeValue : '';
17 | }
18 |
19 | get interval() {
20 | const rawInterval = this.params.get( 'interval' ) ?? '';
21 | return [ '1', '3', '6', '12' ].indexOf( rawInterval ) > -1 ? rawInterval : '';
22 | }
23 |
24 | get type() {
25 | return this.paymentType;
26 | }
27 |
28 | public setTypeFromAvailablePaymentTypes( paymentTypes: string[] ) {
29 | if ( paymentTypes.length === 1 ) {
30 | this.paymentType = paymentTypes[ 0 ];
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/tests/unit/components/pages/donation_confirmation/AddressAnonymous.spec.ts:
--------------------------------------------------------------------------------
1 | import { mount, VueWrapper } from '@vue/test-utils';
2 | import AddressAnonymous from '@src/components/pages/donation_confirmation/AddressAnonymous.vue';
3 |
4 | describe( 'AddressAnonymous', () => {
5 | function getWrapper(): VueWrapper
4 |
6 |
7 |
8 | Locale Example
5 |6 |
9 |
12 |
17 |
18 |
8 |
12 |