# give/4.18.0/src/Onboarding/Setup/templates/stories/components.stories.js

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 117 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Onboarding/Setup/templates/stories/components.stories.js
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Onboarding/Setup/templates/stories/components.stories.js
- Modified: 2021-11-23T23:55:18+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/Onboarding/Setup/templates/stories/components.stories.js#L10-L20`.

```javascript
import styles from './src/styles';
import paypal from './src/paypal.js';
import stripe from './src/stripe.js';
import section from '../section.html';
import footer from '../footer.html';
import dismiss from '../dismiss.html';

import {withA11y} from '@storybook/addon-a11y';

export default {
    title: 'Setup Page/Components',
    decorators: [withA11y],
};

const Styles = '<style>' + styles + '</style>';

export const header = () =>
    Styles +
    section
        .replace(/{{\s*title\s*}}/gi, 'Connect a payment gateway to begin accepting donations')
        .replace(/{{\s*badge\s*}}/gi, '<span class="badge badge-complete">Complete</span>')
        .replace(/{{\s*contents\s*}}/gi, '')
        .replace(/{{\s*footer\s*}}/gi, '');

export const Footer = () =>
    Styles +
    '<section>' +
    footer.replace(
        /{{\s*contents\s*}}/gi,
        'Want to use a different gateway? GiveWP has support for many others including Authorize.net, Square, Razorpay and more!<a href="#">View all gateways</a>'
    ) +
    '</section>';

export const Dismiss = () =>
    Styles +
    dismiss
        .replace(/{{\s*action\s*}}/gi, '')
        .replace(/{{\s*nonce\s*}}/gi, '')
        .replace(/{{\s*label\s*}}/gi, 'Dismiss Setup Screen');

export const SectionBasic = () =>
    Styles +
    `
	<section>
		<header>
			<h2>Connect a payment gateway to begin accepting donations</h2>
		</header>
		<main>
			` +
    paypal() +
    `
		</main>
	</section>
`;

export const SectionMultiple = () =>
    Styles +
    `
	<section>
		<main>
			` +
    paypal() +
    stripe() +
    `
		</main>
	</section>
`;

export const SectionWithHeader = () =>
    Styles +
    `
	<section>
		<header>
			<h2>Connect a payment gateway to begin accepting donations</h2>
		</header>
		<main>
			` +
    paypal() +
    `
		</main>
	</section>
`;

export const SectionWithFooter = () =>
    Styles +
    `
	<section>
		<main>
			` +
    paypal() +
    `
		</main>
			` +
    footer.replace(
        /{{\s*contents\s*}}/gi,
        'Want to use a different gateway? GiveWP has support for many others including Authorize.net, Square, Razorpay and more!<a href="#">View all gateways</a>'
    ) +
    `
	</section>
`;

export const SectionMarkedComplete = () =>
    Styles +
    `
	<section>
		<header>
			<h2>Connect a payment gateway to begin accepting donations</h2>
			<span class="badge badge-complete">Complete</span>
		</header>
			<main>
			` +
    paypal() +
    `
		</main>
	</section>
`;

```