@scottish-government/designsystem-react 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/dist/common/abstract-notification-banner.jsx +0 -63
- package/dist/common/conditional-wrapper.jsx +0 -8
- package/dist/common/file-icon.jsx +0 -51
- package/dist/common/hint-text.jsx +0 -9
- package/dist/common/icon.jsx +0 -57
- package/dist/common/screen-reader-text.jsx +0 -9
- package/dist/common/wrapper-tag.jsx +0 -11
- package/dist/components/accordion/accordion.jsx +0 -102
- package/dist/components/aspect-box/aspect-box.jsx +0 -79
- package/dist/components/back-to-top/back-to-top.jsx +0 -27
- package/dist/components/breadcrumbs/breadcrumbs.jsx +0 -28
- package/dist/components/button/button.jsx +0 -30
- package/dist/components/checkbox/checkbox.jsx +0 -62
- package/dist/components/confirmation-message/confirmation-message.jsx +0 -24
- package/dist/components/contents-nav/contents-nav.jsx +0 -33
- package/dist/components/cookie-banner/cookie-banner.jsx +0 -21
- package/dist/components/date-picker/date-picker.jsx +0 -54
- package/dist/components/details/details.jsx +0 -17
- package/dist/components/error-message/error-message.jsx +0 -12
- package/dist/components/error-summary/error-summary.jsx +0 -27
- package/dist/components/file-download/file-download.jsx +0 -50
- package/dist/components/hide-this-page/hide-this-page.jsx +0 -71
- package/dist/components/inset-text/inset-text.jsx +0 -14
- package/dist/components/notification-banner/notification-banner.jsx +0 -26
- package/dist/components/notification-panel/notification-panel.jsx +0 -21
- package/dist/components/page-header/page-header.jsx +0 -15
- package/dist/components/page-metadata/page-metadata.jsx +0 -26
- package/dist/components/pagination/pagination.jsx +0 -97
- package/dist/components/phase-banner/phase-banner.jsx +0 -23
- package/dist/components/question/question.jsx +0 -22
- package/dist/components/radio-button/radio-button.jsx +0 -43
- package/dist/components/select/select.jsx +0 -52
- package/dist/components/sequential-navigation/sequential-navigation.jsx +0 -31
- package/dist/components/side-navigation/side-navigation.jsx +0 -52
- package/dist/components/site-header/site-header.jsx +0 -68
- package/dist/components/site-navigation/site-navigation.jsx +0 -22
- package/dist/components/site-search/site-search.jsx +0 -55
- package/dist/components/skip-links/skip-links.jsx +0 -21
- package/dist/components/summary-card/summary-card.jsx +0 -67
- package/dist/components/summary-list/summary-list.jsx +0 -75
- package/dist/components/table/table.jsx +0 -24
- package/dist/components/tabs/tabs.jsx +0 -99
- package/dist/components/tag/tag.jsx +0 -13
- package/dist/components/task-list/task-list.jsx +0 -95
- package/dist/components/text-input/text-input.jsx +0 -58
- package/dist/components/textarea/textarea.jsx +0 -54
- package/dist/components/warning-text/warning-text.jsx +0 -16
- package/dist/icons/ArrowUpward.jsx +0 -41
- package/dist/icons/CalendarToday.jsx +0 -41
- package/dist/icons/Cancel.jsx +0 -40
- package/dist/icons/CheckCircle.jsx +0 -41
- package/dist/icons/ChevronLeft.jsx +0 -41
- package/dist/icons/ChevronRight.jsx +0 -41
- package/dist/icons/Close.jsx +0 -41
- package/dist/icons/Description.jsx +0 -41
- package/dist/icons/DoubleChevronLeft.jsx +0 -40
- package/dist/icons/DoubleChevronRight.jsx +0 -40
- package/dist/icons/Error.jsx +0 -41
- package/dist/icons/ExpandLess.jsx +0 -41
- package/dist/icons/ExpandMore.jsx +0 -41
- package/dist/icons/List.jsx +0 -44
- package/dist/icons/Menu.jsx +0 -41
- package/dist/icons/PriorityHigh.jsx +0 -42
- package/dist/icons/Search.jsx +0 -41
- package/dist/icons/index.js +0 -40
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = require("react");
|
|
7
|
-
// @ts-ignore
|
|
8
|
-
const date_picker_1 = __importDefault(require("@scottish-government/design-system/src/components/date-picker/date-picker"));
|
|
9
|
-
const error_message_1 = __importDefault(require("../error-message/error-message"));
|
|
10
|
-
const text_input_1 = __importDefault(require("../text-input/text-input"));
|
|
11
|
-
const DatePicker = ({ className, dateSelectCallback, disabledDates, error, errorMessage, hintText, id, iconPath = './', label, maxDate, minDate, multiple, name, onBlur, onChange, value, width = 'fixed-10', ...props }) => {
|
|
12
|
-
const ref = (0, react_1.useRef)(null);
|
|
13
|
-
(0, react_1.useEffect)(() => {
|
|
14
|
-
if (ref.current) {
|
|
15
|
-
new date_picker_1.default(ref.current, {
|
|
16
|
-
dateSelectCallback,
|
|
17
|
-
imagePath: iconPath
|
|
18
|
-
}).init();
|
|
19
|
-
}
|
|
20
|
-
}, [ref, dateSelectCallback, iconPath]);
|
|
21
|
-
function handleBlur(event) {
|
|
22
|
-
if (typeof onBlur === 'function') {
|
|
23
|
-
onBlur(event);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
function handleChange(event) {
|
|
27
|
-
if (typeof onChange === 'function') {
|
|
28
|
-
onChange(event);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
return (<div className={[
|
|
32
|
-
"ds_datepicker",
|
|
33
|
-
multiple && "ds_datepicker--multiple",
|
|
34
|
-
className
|
|
35
|
-
].join(' ')} data-disableddates={disabledDates} data-maxdate={maxDate} data-mindate={minDate} data-module="ds-datepicker" ref={ref} {...props}>
|
|
36
|
-
{(multiple ? (<fieldset className="ds_datepicker__input-wrapper">
|
|
37
|
-
<legend>{label}</legend>
|
|
38
|
-
{errorMessage && <error_message_1.default text={errorMessage}/>}
|
|
39
|
-
<div>
|
|
40
|
-
<text_input_1.default className="js-datepicker-date" error={!!error} id={id + "-day"} hintText={hintText} label="Day" name={name + "-day"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[0]} width="fixed-2"/>
|
|
41
|
-
</div>
|
|
42
|
-
|
|
43
|
-
<div>
|
|
44
|
-
<text_input_1.default className="js-datepicker-month" error={!!error} id={id + "-month"} hintText={hintText} label="Month" name={name + "-month"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[1]} width="fixed-2"/>
|
|
45
|
-
</div>
|
|
46
|
-
|
|
47
|
-
<div>
|
|
48
|
-
<text_input_1.default className="js-datepicker-year" error={!!error} id={id + "-year"} hintText={hintText} label="Year" name={name + "-year"} onBlur={handleBlur} onChange={handleChange} value={value?.split('/')[2]} width="fixed-4"/>
|
|
49
|
-
</div>
|
|
50
|
-
</fieldset>) : (<text_input_1.default error={!!error} errorMessage={errorMessage} id={id} hasButton hintText={hintText} label={label} name={name} onBlur={handleBlur} onChange={handleChange} placeholder="dd/mm/yyyy" value={value} width={width}/>))}
|
|
51
|
-
</div>);
|
|
52
|
-
};
|
|
53
|
-
DatePicker.displayName = 'DatePicker';
|
|
54
|
-
exports.default = DatePicker;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const Details = ({ children, className, summary, ...props }) => {
|
|
4
|
-
return (<details className={[
|
|
5
|
-
"ds_details",
|
|
6
|
-
className
|
|
7
|
-
].join(' ')} {...props}>
|
|
8
|
-
<summary className="ds_details__summary">
|
|
9
|
-
{summary}
|
|
10
|
-
</summary>
|
|
11
|
-
<div className="ds_details__text">
|
|
12
|
-
{children}
|
|
13
|
-
</div>
|
|
14
|
-
</details>);
|
|
15
|
-
};
|
|
16
|
-
Details.displayName = 'Details';
|
|
17
|
-
exports.default = Details;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const ErrorMessage = ({ children, className, id, text, ...props }) => {
|
|
4
|
-
return (<p className={[
|
|
5
|
-
'ds_question__error-message',
|
|
6
|
-
className
|
|
7
|
-
].join(' ')} dangerouslySetInnerHTML={text ? { __html: text } : undefined} id={id} {...props}>
|
|
8
|
-
{!text ? children : null}
|
|
9
|
-
</p>);
|
|
10
|
-
};
|
|
11
|
-
ErrorMessage.displayName = 'ErrorMessage';
|
|
12
|
-
exports.default = ErrorMessage;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const conditional_wrapper_1 = __importDefault(require("../../common/conditional-wrapper"));
|
|
7
|
-
const Error = ({ fragmentId, title }) => {
|
|
8
|
-
return (<li>
|
|
9
|
-
<conditional_wrapper_1.default condition={!!fragmentId} wrapper={() => <a href={`#${fragmentId}`}>{title}</a>}>{title}</conditional_wrapper_1.default>
|
|
10
|
-
</li>);
|
|
11
|
-
};
|
|
12
|
-
const ErrorSummary = ({ className, errors, title = 'There is a problem', ...props }) => {
|
|
13
|
-
return (<>
|
|
14
|
-
{errors && errors.length && (<div className={[
|
|
15
|
-
'ds_error-summary',
|
|
16
|
-
className
|
|
17
|
-
].join(' ')} aria-labelledby="error-summary-title" role="alert" {...props}>
|
|
18
|
-
<h2 className="ds_error-summary__title" id="error-summary-title">{title}</h2>
|
|
19
|
-
|
|
20
|
-
<ul className="ds_error-summary__list">
|
|
21
|
-
{errors && errors.map((error, index) => (<Error fragmentId={error.fragmentId} title={error.title} key={'error' + index}/>))}
|
|
22
|
-
</ul>
|
|
23
|
-
</div>)}
|
|
24
|
-
</>);
|
|
25
|
-
};
|
|
26
|
-
ErrorSummary.displayName = 'ErrorSummary';
|
|
27
|
-
exports.default = ErrorSummary;
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = require("react");
|
|
7
|
-
const file_icon_1 = __importDefault(require("../../common/file-icon"));
|
|
8
|
-
const FileDownload = ({ className, cover, highlighted, icon = 'Generic', fileSize, fileType, fileUrl, title, ...props }) => {
|
|
9
|
-
const hasMetadata = !!fileType || !!fileSize;
|
|
10
|
-
const metaContainerId = `file-download-${(0, react_1.useId)()}`;
|
|
11
|
-
return (<div className={[
|
|
12
|
-
'ds_file-download',
|
|
13
|
-
highlighted && 'ds_file-download--highlighted',
|
|
14
|
-
className
|
|
15
|
-
].join(' ')} {...props}>
|
|
16
|
-
<div className="ds_file-download__thumbnail">
|
|
17
|
-
<a className="ds_file-download__thumbnail-link" aria-hidden="true" tabIndex={-1} href={fileUrl}>
|
|
18
|
-
{cover ?
|
|
19
|
-
<img alt="" className="ds_file-download__thumbnail-image" src={cover}/>
|
|
20
|
-
:
|
|
21
|
-
<file_icon_1.default ariaLabel="" className="ds_file-download__thumbnail-image" icon={icon}/>}
|
|
22
|
-
</a>
|
|
23
|
-
</div>
|
|
24
|
-
|
|
25
|
-
<div className="ds_file-download__content">
|
|
26
|
-
<a href={fileUrl} className="ds_file-download__title" aria-describedby={hasMetadata ? metaContainerId : undefined}>
|
|
27
|
-
{title}
|
|
28
|
-
</a>
|
|
29
|
-
|
|
30
|
-
{hasMetadata &&
|
|
31
|
-
<div id={metaContainerId} className="ds_file-download__details">
|
|
32
|
-
<dl className="ds_metadata ds_metadata--inline">
|
|
33
|
-
{fileType &&
|
|
34
|
-
<div className="ds_metadata__item">
|
|
35
|
-
<dt className="ds_metadata__key visually-hidden">File type</dt>
|
|
36
|
-
<dd className="ds_metadata__value">{fileType}<span className="visually-hidden">,</span></dd>
|
|
37
|
-
</div>}
|
|
38
|
-
|
|
39
|
-
{fileSize &&
|
|
40
|
-
<div className="ds_metadata__item">
|
|
41
|
-
<dt className="ds_metadata__key visually-hidden">File size</dt>
|
|
42
|
-
<dd className="ds_metadata__value">{fileSize}</dd>
|
|
43
|
-
</div>}
|
|
44
|
-
</dl>
|
|
45
|
-
</div>}
|
|
46
|
-
</div>
|
|
47
|
-
</div>);
|
|
48
|
-
};
|
|
49
|
-
FileDownload.displayName = 'FileDownload';
|
|
50
|
-
exports.default = FileDownload;
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
-
};
|
|
38
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
const react_1 = __importStar(require("react"));
|
|
40
|
-
// @ts-ignore
|
|
41
|
-
const hide_this_page_1 = __importDefault(require("@scottish-government/design-system/src/components/hide-this-page/hide-this-page"));
|
|
42
|
-
const HideThisPage = ({ className, escapeUrl = 'https://www.bbc.co.uk/weather', ...props }) => {
|
|
43
|
-
const ref = (0, react_1.useRef)(null);
|
|
44
|
-
(0, react_1.useEffect)(() => {
|
|
45
|
-
if (ref.current) {
|
|
46
|
-
new hide_this_page_1.default().init();
|
|
47
|
-
const htpDivId = 'hide-this-page-instruction';
|
|
48
|
-
if (!document.getElementById(htpDivId)) {
|
|
49
|
-
const htpDiv = document.createElement('div');
|
|
50
|
-
htpDiv.id = htpDivId;
|
|
51
|
-
htpDiv.classList.add('visually-hidden');
|
|
52
|
-
htpDiv.classList.add('ds_hide-page');
|
|
53
|
-
htpDiv.innerHTML = '<p>To leave the page quickly, press the escape key.</p>';
|
|
54
|
-
document.body.prepend(htpDiv);
|
|
55
|
-
}
|
|
56
|
-
document.body.classList.add('ds_has-hide-page');
|
|
57
|
-
}
|
|
58
|
-
}, [ref]);
|
|
59
|
-
return (<div className={[
|
|
60
|
-
'ds_hide-page',
|
|
61
|
-
className
|
|
62
|
-
].join(' ')} ref={ref} {...props}>
|
|
63
|
-
<a href={escapeUrl} className="ds_hide-page__button ds_button js-hide-page">
|
|
64
|
-
<strong>Hide this page</strong>
|
|
65
|
-
<span className="visually-hidden js-enabled-text">Or press escape key to hide this page</span>
|
|
66
|
-
</a>
|
|
67
|
-
<p className="ds_hide-page__text js-enabled-text">Or press Esc key</p>
|
|
68
|
-
</div>);
|
|
69
|
-
};
|
|
70
|
-
HideThisPage.displayName = 'HideThisPage';
|
|
71
|
-
exports.default = HideThisPage;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const InsetText = ({ children, className, ...props }) => {
|
|
4
|
-
return (<div className={[
|
|
5
|
-
'ds_inset-text',
|
|
6
|
-
className
|
|
7
|
-
].join(' ')} {...props}>
|
|
8
|
-
<div className="ds_inset-text__text">
|
|
9
|
-
{children}
|
|
10
|
-
</div>
|
|
11
|
-
</div>);
|
|
12
|
-
};
|
|
13
|
-
InsetText.displayName = 'InsetText';
|
|
14
|
-
exports.default = InsetText;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = require("react");
|
|
7
|
-
const abstract_notification_banner_1 = __importDefault(require("../../common/abstract-notification-banner"));
|
|
8
|
-
// @ts-ignore
|
|
9
|
-
const notification_banner_1 = __importDefault(require("@scottish-government/design-system/src/components/notification-banner/notification-banner"));
|
|
10
|
-
const NotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title, ...props }) => {
|
|
11
|
-
const ref = (0, react_1.useRef)(null);
|
|
12
|
-
(0, react_1.useEffect)(() => {
|
|
13
|
-
if (ref.current) {
|
|
14
|
-
new notification_banner_1.default(ref.current).init();
|
|
15
|
-
}
|
|
16
|
-
}, [ref]);
|
|
17
|
-
return (<abstract_notification_banner_1.default className={[
|
|
18
|
-
'ds_reversed',
|
|
19
|
-
className
|
|
20
|
-
].join(' ')} close={close} icon={icon ? "PriorityHigh" : undefined} iconColour={iconColour} iconInverse={iconInverse} ref={ref} title="Information" {...props}>
|
|
21
|
-
{children}
|
|
22
|
-
</abstract_notification_banner_1.default>);
|
|
23
|
-
};
|
|
24
|
-
NotificationBanner.displayName = 'NotificationBanner';
|
|
25
|
-
NotificationBanner.Buttons = abstract_notification_banner_1.default.Buttons;
|
|
26
|
-
exports.default = NotificationBanner;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
|
|
7
|
-
const NotificationPanel = function ({ ariaLive, children, className, headerLevel = 'h1', title, ...props }) {
|
|
8
|
-
return (<div aria-live={ariaLive} className={[
|
|
9
|
-
'ds_notification-panel',
|
|
10
|
-
className
|
|
11
|
-
].join(' ')} {...props}>
|
|
12
|
-
<wrapper_tag_1.default className="ds_notification-panel__title" tagName={headerLevel}>
|
|
13
|
-
{title}
|
|
14
|
-
</wrapper_tag_1.default>
|
|
15
|
-
<div className="ds_notification-panel__content">
|
|
16
|
-
{children}
|
|
17
|
-
</div>
|
|
18
|
-
</div>);
|
|
19
|
-
};
|
|
20
|
-
NotificationPanel.displayName = 'NotificationPanel';
|
|
21
|
-
exports.default = NotificationPanel;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const PageHeader = ({ children, className, label, title, ...props }) => {
|
|
4
|
-
return (<header className={[
|
|
5
|
-
'ds_page-header',
|
|
6
|
-
className
|
|
7
|
-
].join(' ')} {...props}>
|
|
8
|
-
{label && <span className="ds_page-header__label ds_content-label">{label}</span>}
|
|
9
|
-
<h1 className="ds_page-header__title">{title}</h1>
|
|
10
|
-
|
|
11
|
-
{children}
|
|
12
|
-
</header>);
|
|
13
|
-
};
|
|
14
|
-
PageHeader.displayName = 'PageHeader';
|
|
15
|
-
exports.default = PageHeader;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const MetadataItem = ({ children, className, name, ...props }) => {
|
|
4
|
-
return (<div className={[
|
|
5
|
-
'ds_metadata__item',
|
|
6
|
-
className
|
|
7
|
-
].join(' ')} {...props}>
|
|
8
|
-
<dt className="ds_metadata__key">{name}</dt>{' '}
|
|
9
|
-
<dd className="ds_metadata__value">
|
|
10
|
-
{children}
|
|
11
|
-
</dd>
|
|
12
|
-
</div>);
|
|
13
|
-
};
|
|
14
|
-
const Metadata = ({ children, className, inline, ...props }) => {
|
|
15
|
-
return (<dl className={[
|
|
16
|
-
'ds_metadata',
|
|
17
|
-
inline && 'ds_metadata--inline',
|
|
18
|
-
className
|
|
19
|
-
].join(' ')} {...props}>
|
|
20
|
-
{children}
|
|
21
|
-
</dl>);
|
|
22
|
-
};
|
|
23
|
-
Metadata.displayName = 'Metadata';
|
|
24
|
-
MetadataItem.displayName = 'Metadata.Item';
|
|
25
|
-
Metadata.Item = MetadataItem;
|
|
26
|
-
exports.default = Metadata;
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Ellipsis = exports.Page = void 0;
|
|
7
|
-
const icon_1 = __importDefault(require("../../common/icon"));
|
|
8
|
-
const Page = ({ ariaLabel, current = false, href, onClick, text }) => {
|
|
9
|
-
function handleClick(event) {
|
|
10
|
-
if (typeof onClick === 'function') {
|
|
11
|
-
onClick(event);
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
return (<li className="ds_pagination__item">
|
|
15
|
-
<a aria-label={ariaLabel} className={[
|
|
16
|
-
'ds_pagination__link',
|
|
17
|
-
current ? 'ds_current' : undefined
|
|
18
|
-
].join(' ')} href={href} aria-current={current ? "page" : undefined} onClick={handleClick}>
|
|
19
|
-
<span className="ds_pagination__link-label">{text}</span>
|
|
20
|
-
</a>
|
|
21
|
-
</li>);
|
|
22
|
-
};
|
|
23
|
-
exports.Page = Page;
|
|
24
|
-
const Ellipsis = () => {
|
|
25
|
-
return (<li className="ds_pagination__item" aria-hidden="true">
|
|
26
|
-
<span className="ds_pagination__link ds_pagination__link--ellipsis">…</span>
|
|
27
|
-
</li>);
|
|
28
|
-
};
|
|
29
|
-
exports.Ellipsis = Ellipsis;
|
|
30
|
-
const Pagination = ({ ariaLabel = 'Pages', className, onClick, padding = 1, page = 1, pattern = '/search?page=$1', totalPages, ...props }) => {
|
|
31
|
-
padding = Number(padding);
|
|
32
|
-
page = Number(page);
|
|
33
|
-
const minToShow = padding + 2;
|
|
34
|
-
let includeFirst, includeLast;
|
|
35
|
-
let pages = [];
|
|
36
|
-
if (page <= minToShow) {
|
|
37
|
-
for (let i = 1; i <= minToShow + 1; i++) {
|
|
38
|
-
pages.push(Number(i));
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
else if (page <= totalPages - minToShow) {
|
|
42
|
-
pages = [page];
|
|
43
|
-
for (let i = 0; i < padding; i++) {
|
|
44
|
-
pages.unshift(page - 1 - i);
|
|
45
|
-
pages.push(Number(page) + 1 + i);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
else {
|
|
49
|
-
for (let i = totalPages; i > totalPages - minToShow - 1; i--) {
|
|
50
|
-
pages.push(Number(i));
|
|
51
|
-
}
|
|
52
|
-
pages.reverse();
|
|
53
|
-
}
|
|
54
|
-
// filter out pages that are out of bounds
|
|
55
|
-
pages = pages.filter(item => item > 0 && item <= totalPages);
|
|
56
|
-
if ((page - padding) > 2) {
|
|
57
|
-
includeFirst = true;
|
|
58
|
-
}
|
|
59
|
-
if ((page + padding < totalPages - 1)) {
|
|
60
|
-
includeLast = true;
|
|
61
|
-
}
|
|
62
|
-
return (<nav className={[
|
|
63
|
-
'ds_pagination',
|
|
64
|
-
className
|
|
65
|
-
].join(' ')} aria-label={ariaLabel} {...props}>
|
|
66
|
-
<ul className="ds_pagination__list">
|
|
67
|
-
{page > 1 && (<li className="ds_pagination__item">
|
|
68
|
-
<a aria-label="Previous page" className="ds_pagination__link ds_pagination__link--text ds_pagination__link--icon" href={pattern.replace('$1', String(page - 1))} data-search="pagination-previous" onClick={onClick}>
|
|
69
|
-
<icon_1.default icon="ChevronLeft"/>
|
|
70
|
-
<span className="ds_pagination__link-label">Previous</span>
|
|
71
|
-
</a>
|
|
72
|
-
</li>)}
|
|
73
|
-
|
|
74
|
-
{includeFirst && (<>
|
|
75
|
-
<exports.Page ariaLabel="Page 1" href={pattern.replace('$1', String(1))} onClick={onClick} text="1"/>
|
|
76
|
-
<exports.Ellipsis />
|
|
77
|
-
</>)}
|
|
78
|
-
|
|
79
|
-
{pages && pages.map((item, index) => (<exports.Page ariaLabel={`Page ${item}`} current={item === page} href={pattern.replace('$1', String(item))} key={`pagination${index}`} onClick={onClick} pattern={pattern} text={item.toString()}/>))}
|
|
80
|
-
|
|
81
|
-
{includeLast && (<>
|
|
82
|
-
<exports.Ellipsis />
|
|
83
|
-
<exports.Page ariaLabel={`Page ${totalPages}`} href={pattern.replace('$1', String(totalPages))} onClick={onClick} pattern={pattern} text={totalPages.toString()}/>
|
|
84
|
-
</>)}
|
|
85
|
-
|
|
86
|
-
{page < totalPages && (<li className="ds_pagination__item">
|
|
87
|
-
<a aria-label="Next page" className="ds_pagination__link ds_pagination__link--text ds_pagination__link--icon" href={pattern.replace('$1', String(page + 1))} data-search="pagination-next" onClick={onClick}>
|
|
88
|
-
<span className="ds_pagination__link-label">Next</span>
|
|
89
|
-
<icon_1.default icon="ChevronRight"/>
|
|
90
|
-
</a>
|
|
91
|
-
</li>)}
|
|
92
|
-
|
|
93
|
-
</ul>
|
|
94
|
-
</nav>);
|
|
95
|
-
};
|
|
96
|
-
Pagination.displayName = 'Pagination';
|
|
97
|
-
exports.default = Pagination;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const tag_1 = __importDefault(require("../tag/tag"));
|
|
7
|
-
const PhaseBanner = ({ children, className, content, phaseName, ...props }) => {
|
|
8
|
-
return (<div className={[
|
|
9
|
-
'ds_phase-banner',
|
|
10
|
-
className
|
|
11
|
-
].join(' ')} {...props}>
|
|
12
|
-
<div className="ds_wrapper">
|
|
13
|
-
<p className="ds_phase-banner__content">
|
|
14
|
-
{phaseName && <tag_1.default title={phaseName} className="ds_phase-banner__tag"/>}
|
|
15
|
-
<span className="ds_phase-banner__text">
|
|
16
|
-
{content ? content : children || "This is a new service"}
|
|
17
|
-
</span>
|
|
18
|
-
</p>
|
|
19
|
-
</div>
|
|
20
|
-
</div>);
|
|
21
|
-
};
|
|
22
|
-
PhaseBanner.displayName = 'PhaseBanner';
|
|
23
|
-
exports.default = PhaseBanner;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const error_message_1 = __importDefault(require("../error-message/error-message"));
|
|
7
|
-
const hint_text_1 = __importDefault(require("../../common/hint-text"));
|
|
8
|
-
const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
|
|
9
|
-
const Question = function ({ children, className, error, errorMessage, hintText, legend, tagName = 'div', ...props }) {
|
|
10
|
-
return (<wrapper_tag_1.default tagName={tagName} className={[
|
|
11
|
-
'ds_question',
|
|
12
|
-
error && 'ds_question--error',
|
|
13
|
-
className
|
|
14
|
-
].join(' ')} {...props}>
|
|
15
|
-
{legend && <legend>{legend}</legend>}
|
|
16
|
-
{hintText && <hint_text_1.default text={hintText}/>}
|
|
17
|
-
{error && errorMessage && <error_message_1.default text={errorMessage}/>}
|
|
18
|
-
{children}
|
|
19
|
-
</wrapper_tag_1.default>);
|
|
20
|
-
};
|
|
21
|
-
Question.displayName = 'Question';
|
|
22
|
-
exports.default = Question;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Radio = void 0;
|
|
7
|
-
const hint_text_1 = __importDefault(require("../../common/hint-text"));
|
|
8
|
-
const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small }) => {
|
|
9
|
-
const hintTextId = `hint-text-${id}`;
|
|
10
|
-
function handleBlur(event) {
|
|
11
|
-
if (typeof onBlur === 'function') {
|
|
12
|
-
onBlur(event);
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
function handleChange(event) {
|
|
16
|
-
if (typeof onChange === 'function') {
|
|
17
|
-
onChange(event);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
return (<div className={[
|
|
21
|
-
'ds_radio',
|
|
22
|
-
small && 'ds_radio--small'
|
|
23
|
-
].join(' ')}>
|
|
24
|
-
<input aria-describedby={hintText ? hintTextId : undefined} className="ds_radio__input" defaultChecked={!!checked} id={id} name={name} onBlur={handleBlur} onChange={handleChange} type="radio"/>
|
|
25
|
-
<label className="ds_radio__label" htmlFor={id}>{label}</label>
|
|
26
|
-
{hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
|
|
27
|
-
</div>);
|
|
28
|
-
};
|
|
29
|
-
exports.Radio = Radio;
|
|
30
|
-
const RadioGroup = ({ className, inline, items, name, small, ...props }) => {
|
|
31
|
-
return (<div className={[
|
|
32
|
-
'ds_radios',
|
|
33
|
-
'ds_field-group',
|
|
34
|
-
inline && 'ds_field-group--inline',
|
|
35
|
-
className
|
|
36
|
-
].join(' ')} {...props}>
|
|
37
|
-
|
|
38
|
-
{items && items.map((item, index) => (<exports.Radio checked={item.checked} hintText={item.hintText} id={item.id} key={'radio' + index} label={item.label} name={name} onBlur={item.onBlur} onChange={item.onChange} small={small || item.small}/>))}
|
|
39
|
-
</div>);
|
|
40
|
-
};
|
|
41
|
-
exports.Radio.displayName = 'Radio';
|
|
42
|
-
RadioGroup.displayName = 'RadioGroup';
|
|
43
|
-
exports.default = RadioGroup;
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const error_message_1 = __importDefault(require("../error-message/error-message"));
|
|
7
|
-
const hint_text_1 = __importDefault(require("../../common/hint-text"));
|
|
8
|
-
const Option = function ({ text, value }) {
|
|
9
|
-
return (<option value={value}>{text}</option>);
|
|
10
|
-
};
|
|
11
|
-
const Select = function ({ className, defaultValue, error, errorMessage, hintText, id, label, name, onBlur, onChange, options, placeholder, width, ...props }) {
|
|
12
|
-
const errorMessageId = `error-message-${id}`;
|
|
13
|
-
const hintTextId = `hint-text-${id}`;
|
|
14
|
-
const describedbys = [];
|
|
15
|
-
if (hintText) {
|
|
16
|
-
describedbys.push(hintTextId);
|
|
17
|
-
}
|
|
18
|
-
;
|
|
19
|
-
if (errorMessage) {
|
|
20
|
-
describedbys.push(errorMessageId);
|
|
21
|
-
}
|
|
22
|
-
;
|
|
23
|
-
function handleBlur(event) {
|
|
24
|
-
if (typeof onBlur === 'function') {
|
|
25
|
-
onBlur(event);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
function handleChange(event) {
|
|
29
|
-
if (typeof onChange === 'function') {
|
|
30
|
-
onChange(event);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
return (<>
|
|
34
|
-
<label className="ds_label" htmlFor={id}>{label}</label>
|
|
35
|
-
{hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
|
|
36
|
-
{errorMessage && <error_message_1.default id={errorMessageId} text={errorMessage}/>}
|
|
37
|
-
<div className={[
|
|
38
|
-
"ds_select-wrapper",
|
|
39
|
-
error && 'ds_input--error',
|
|
40
|
-
width && `ds_input--${width}`,
|
|
41
|
-
className
|
|
42
|
-
].join(' ')} {...props}>
|
|
43
|
-
<select aria-describedby={describedbys.join(' ')} aria-invalid={error} className="ds_select" defaultValue={defaultValue} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange}>
|
|
44
|
-
<option value="">{placeholder}</option>
|
|
45
|
-
{options && options.map((option, index) => (<Option value={option.value} text={option.text} key={`option-${index}`}/>))}
|
|
46
|
-
</select>
|
|
47
|
-
<span className="ds_select-arrow" aria-hidden="true"></span>
|
|
48
|
-
</div>
|
|
49
|
-
</>);
|
|
50
|
-
};
|
|
51
|
-
Select.displayName = 'Select';
|
|
52
|
-
exports.default = Select;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const NextLink = ({ href, title }) => {
|
|
4
|
-
return (<div className="ds_sequential-nav__item ds_sequential-nav__item--next">
|
|
5
|
-
<a href={href} className="ds_sequential-nav__button ds_sequential-nav__button--right">
|
|
6
|
-
<span className="ds_sequential-nav__text" data-label="Next">
|
|
7
|
-
{title}
|
|
8
|
-
</span>
|
|
9
|
-
</a>
|
|
10
|
-
</div>);
|
|
11
|
-
};
|
|
12
|
-
const PrevLink = ({ href, title, }) => {
|
|
13
|
-
return (<div className="ds_sequential-nav__item ds_sequential-nav__item--prev">
|
|
14
|
-
<a href={href} className="ds_sequential-nav__button ds_sequential-nav__button--left">
|
|
15
|
-
<span className="ds_sequential-nav__text" data-label="Previous">
|
|
16
|
-
{title}
|
|
17
|
-
</span>
|
|
18
|
-
</a>
|
|
19
|
-
</div>);
|
|
20
|
-
};
|
|
21
|
-
const SequentialNavigation = ({ ariaLabel = 'Article navigation', className, next, previous, ...props }) => {
|
|
22
|
-
return (<nav className={[
|
|
23
|
-
'ds_sequential-nav',
|
|
24
|
-
className
|
|
25
|
-
].join(' ')} aria-label={ariaLabel} {...props}>
|
|
26
|
-
{previous && <PrevLink href={previous.href} title={previous.title}></PrevLink>}
|
|
27
|
-
{next && <NextLink href={next.href} title={next.title}></NextLink>}
|
|
28
|
-
</nav>);
|
|
29
|
-
};
|
|
30
|
-
SequentialNavigation.displayName = 'SequentialNavigation';
|
|
31
|
-
exports.default = SequentialNavigation;
|