@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.
Files changed (66) hide show
  1. package/package.json +1 -1
  2. package/dist/common/abstract-notification-banner.jsx +0 -63
  3. package/dist/common/conditional-wrapper.jsx +0 -8
  4. package/dist/common/file-icon.jsx +0 -51
  5. package/dist/common/hint-text.jsx +0 -9
  6. package/dist/common/icon.jsx +0 -57
  7. package/dist/common/screen-reader-text.jsx +0 -9
  8. package/dist/common/wrapper-tag.jsx +0 -11
  9. package/dist/components/accordion/accordion.jsx +0 -102
  10. package/dist/components/aspect-box/aspect-box.jsx +0 -79
  11. package/dist/components/back-to-top/back-to-top.jsx +0 -27
  12. package/dist/components/breadcrumbs/breadcrumbs.jsx +0 -28
  13. package/dist/components/button/button.jsx +0 -30
  14. package/dist/components/checkbox/checkbox.jsx +0 -62
  15. package/dist/components/confirmation-message/confirmation-message.jsx +0 -24
  16. package/dist/components/contents-nav/contents-nav.jsx +0 -33
  17. package/dist/components/cookie-banner/cookie-banner.jsx +0 -21
  18. package/dist/components/date-picker/date-picker.jsx +0 -54
  19. package/dist/components/details/details.jsx +0 -17
  20. package/dist/components/error-message/error-message.jsx +0 -12
  21. package/dist/components/error-summary/error-summary.jsx +0 -27
  22. package/dist/components/file-download/file-download.jsx +0 -50
  23. package/dist/components/hide-this-page/hide-this-page.jsx +0 -71
  24. package/dist/components/inset-text/inset-text.jsx +0 -14
  25. package/dist/components/notification-banner/notification-banner.jsx +0 -26
  26. package/dist/components/notification-panel/notification-panel.jsx +0 -21
  27. package/dist/components/page-header/page-header.jsx +0 -15
  28. package/dist/components/page-metadata/page-metadata.jsx +0 -26
  29. package/dist/components/pagination/pagination.jsx +0 -97
  30. package/dist/components/phase-banner/phase-banner.jsx +0 -23
  31. package/dist/components/question/question.jsx +0 -22
  32. package/dist/components/radio-button/radio-button.jsx +0 -43
  33. package/dist/components/select/select.jsx +0 -52
  34. package/dist/components/sequential-navigation/sequential-navigation.jsx +0 -31
  35. package/dist/components/side-navigation/side-navigation.jsx +0 -52
  36. package/dist/components/site-header/site-header.jsx +0 -68
  37. package/dist/components/site-navigation/site-navigation.jsx +0 -22
  38. package/dist/components/site-search/site-search.jsx +0 -55
  39. package/dist/components/skip-links/skip-links.jsx +0 -21
  40. package/dist/components/summary-card/summary-card.jsx +0 -67
  41. package/dist/components/summary-list/summary-list.jsx +0 -75
  42. package/dist/components/table/table.jsx +0 -24
  43. package/dist/components/tabs/tabs.jsx +0 -99
  44. package/dist/components/tag/tag.jsx +0 -13
  45. package/dist/components/task-list/task-list.jsx +0 -95
  46. package/dist/components/text-input/text-input.jsx +0 -58
  47. package/dist/components/textarea/textarea.jsx +0 -54
  48. package/dist/components/warning-text/warning-text.jsx +0 -16
  49. package/dist/icons/ArrowUpward.jsx +0 -41
  50. package/dist/icons/CalendarToday.jsx +0 -41
  51. package/dist/icons/Cancel.jsx +0 -40
  52. package/dist/icons/CheckCircle.jsx +0 -41
  53. package/dist/icons/ChevronLeft.jsx +0 -41
  54. package/dist/icons/ChevronRight.jsx +0 -41
  55. package/dist/icons/Close.jsx +0 -41
  56. package/dist/icons/Description.jsx +0 -41
  57. package/dist/icons/DoubleChevronLeft.jsx +0 -40
  58. package/dist/icons/DoubleChevronRight.jsx +0 -40
  59. package/dist/icons/Error.jsx +0 -41
  60. package/dist/icons/ExpandLess.jsx +0 -41
  61. package/dist/icons/ExpandMore.jsx +0 -41
  62. package/dist/icons/List.jsx +0 -44
  63. package/dist/icons/Menu.jsx +0 -41
  64. package/dist/icons/PriorityHigh.jsx +0 -42
  65. package/dist/icons/Search.jsx +0 -41
  66. package/dist/icons/index.js +0 -40
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@scottish-government/designsystem-react",
3
3
  "description": "A React/JSX implementation of the Scottish Government Design System",
4
- "version": "0.7.0",
4
+ "version": "0.7.1",
5
5
  "license": "MIT",
6
6
  "author": {
7
7
  "name": "Scottish Government Digital Design System team",
@@ -1,63 +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 icon_1 = __importDefault(require("./icon"));
8
- const screen_reader_text_1 = __importDefault(require("./screen-reader-text"));
9
- const Buttons = ({ children }) => {
10
- return (<>{children}</>);
11
- };
12
- const AbstractNotificationBanner = ({ children, className, close, icon, iconColour, iconInverse, title = 'Information', ...props }) => {
13
- let content = [];
14
- let buttons;
15
- react_1.Children.forEach(children, (child) => {
16
- if ((0, react_1.isValidElement)(child) && child.type === Buttons) {
17
- buttons = child;
18
- }
19
- else {
20
- content.push(child);
21
- }
22
- });
23
- return (<div className={[
24
- 'ds_notification',
25
- className
26
- ].join(' ')} data-module="ds-notification" {...props}>
27
- <div className="ds_wrapper">
28
- <div className={[
29
- 'ds_notification__content',
30
- close && 'ds_notification__content--has-close'
31
- ].join(' ')}>
32
- <h2 className="visually-hidden">{title}</h2>
33
-
34
- {icon &&
35
- <span className={[
36
- 'ds_notification__icon',
37
- iconInverse && 'ds_notification__icon--inverse',
38
- iconColour && 'ds_notification__icon--colour'
39
- ].join(' ')} aria-hidden="true">
40
- <icon_1.default icon={icon}/>
41
- </span>}
42
-
43
- <div className="ds_notification__text">
44
- {content}
45
- </div>
46
-
47
- {close &&
48
- <button type="button" className="ds_notification__close js-close-notification">
49
- <screen_reader_text_1.default>Close this notification</screen_reader_text_1.default>
50
- <icon_1.default fill icon="Close" aria-hidden="true"/>
51
- </button>}
52
-
53
- {buttons &&
54
- <div className="ds_button-group">
55
- {buttons}
56
- </div>}
57
- </div>
58
- </div>
59
- </div>);
60
- };
61
- AbstractNotificationBanner.displayName = 'AbstractNotificationBanner';
62
- AbstractNotificationBanner.Buttons = Buttons;
63
- exports.default = AbstractNotificationBanner;
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- /**
4
- * Wraps all children in a specified HTML tag if a condition is met.
5
- */
6
- const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
7
- ConditionalWrapper.displayName = 'ConditionalWrapper';
8
- exports.default = ConditionalWrapper;
@@ -1,51 +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 = __importDefault(require("react"));
40
- const FileIcons = __importStar(require("../images/documents"));
41
- const FileIcon = ({ ariaLabel = '', className, icon }) => {
42
- const Component = react_1.default.createElement(FileIcons[icon], {
43
- className: className,
44
- 'aria-label': ariaLabel
45
- });
46
- return (<>
47
- {Component}
48
- </>);
49
- };
50
- FileIcon.displayName = 'FileIcon';
51
- exports.default = FileIcon;
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const HintText = ({ children, id, text, ...props }) => {
4
- return (<p className="ds_hint-text" dangerouslySetInnerHTML={text ? { __html: text } : undefined} id={id} {...props}>
5
- {!text ? children : null}
6
- </p>);
7
- };
8
- HintText.displayName = 'HintText';
9
- exports.default = HintText;
@@ -1,57 +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 = __importDefault(require("react"));
40
- const Icons = __importStar(require("../images/icons"));
41
- const Icon = ({ ariaLabel, className, fill, icon, iconSize }) => {
42
- const Component = react_1.default.createElement(Icons[icon], {
43
- 'aria-hidden': ariaLabel ? undefined : true,
44
- 'aria-label': ariaLabel,
45
- className: [
46
- 'ds_icon',
47
- className,
48
- fill && 'ds_icon--fill',
49
- iconSize && `ds_icon--${iconSize}`
50
- ].join(' ')
51
- });
52
- return (<>
53
- {Component}
54
- </>);
55
- };
56
- Icon.displayName = 'Icon';
57
- exports.default = Icon;
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const ScreenReaderText = ({ children, ...props }) => {
4
- return (<span className="visually-hidden" {...props}>
5
- {children}
6
- </span>);
7
- };
8
- ScreenReaderText.displayName = 'ScreenReaderText';
9
- exports.default = ScreenReaderText;
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- /**
4
- * Wraps all children in a specified HTML tag.
5
- */
6
- const WrapperTag = ({ children, tagName = 'div', ...props }) => {
7
- const TagName = tagName;
8
- return <TagName {...props}>{children}</TagName>;
9
- };
10
- WrapperTag.displayName = 'WrapperTag';
11
- exports.default = WrapperTag;
@@ -1,102 +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
- const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
41
- // @ts-ignore
42
- const accordion_1 = __importDefault(require("@scottish-government/design-system/src/components/accordion/accordion"));
43
- let accordionItemCounter = 0;
44
- const AccordionItem = ({ children, className, headerLevel = 'h3', id: rawId, open = false, title, ...props }) => {
45
- accordionItemCounter = accordionItemCounter + 1;
46
- const processedId = rawId || `accordion-item-${accordionItemCounter}`;
47
- return (<div className={[
48
- 'ds_accordion-item',
49
- className
50
- ].join(' ')} id={processedId} {...props}>
51
- <input aria-labelledby={`panel-${processedId}-heading`} className={[
52
- 'ds_accordion-item__control',
53
- 'visually-hidden'
54
- ].join(' ')} defaultChecked={open} id={`${processedId}-control`} type="checkbox"/>
55
- <div className="ds_accordion-item__header">
56
- <wrapper_tag_1.default id={`panel-${processedId}-heading`} className="ds_accordion-item__title" tagName={headerLevel}>
57
- {title}
58
- </wrapper_tag_1.default>
59
- <span className='ds_accordion-item__indicator'/>
60
- <label className="ds_accordion-item__label" htmlFor={`${processedId}-control`}>
61
- <span className="visually-hidden">Show this section</span>
62
- </label>
63
- </div>
64
- <div className="ds_accordion-item__body">
65
- {children}
66
- </div>
67
- </div>);
68
- };
69
- const Accordion = ({ children, className, headerLevel = 'h3', hideOpenAll, ...props }) => {
70
- const ref = (0, react_1.useRef)(null);
71
- (0, react_1.useEffect)(() => {
72
- if (ref.current) {
73
- new accordion_1.default(ref.current).init();
74
- }
75
- }, [ref]);
76
- if (!children) {
77
- hideOpenAll = true;
78
- }
79
- function processChild(child) {
80
- return react_1.default.cloneElement(child, { headerLevel: headerLevel });
81
- }
82
- return (<div className={[
83
- 'ds_accordion',
84
- className
85
- ].join(' ')} ref={ref} {...props}>
86
- {!hideOpenAll && (<button className={[
87
- 'ds_accordion__open-all',
88
- 'ds_link',
89
- 'js-open-all'
90
- ].join(' ')} type='button'>
91
- Open all
92
- {' '}
93
- <span className="visually-hidden">sections</span>
94
- </button>)}
95
-
96
- {react_1.Children.map(children, child => processChild(child))}
97
- </div>);
98
- };
99
- Accordion.displayName = 'Accordion';
100
- AccordionItem.displayName = 'AccordionItem';
101
- Accordion.Item = AccordionItem;
102
- exports.default = Accordion;
@@ -1,79 +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 aspect_box_fallback_1 = __importDefault(require("@scottish-government/design-system/src/components/aspect-box/aspect-box-fallback"));
42
- const AspectBox = ({ children, className, ratio, ...props }) => {
43
- const ref = (0, react_1.useRef)(null);
44
- (0, react_1.useEffect)(() => {
45
- if (ref.current) {
46
- new aspect_box_fallback_1.default(ref.current).init();
47
- }
48
- }, [ref]);
49
- function processChild(child) {
50
- if (['img', 'svg', 'picture'].includes(child.type)) {
51
- return react_1.default.cloneElement(child, { className: 'ds_aspect-box__inner' });
52
- }
53
- }
54
- let ratioClassName;
55
- switch (ratio) {
56
- case '1:1':
57
- case 'square':
58
- ratioClassName = 'ds_aspect-box--square';
59
- break;
60
- case '4:3':
61
- ratioClassName = 'ds_aspect-box--43';
62
- break;
63
- case '21:9':
64
- ratioClassName = 'ds_aspect-box--219';
65
- break;
66
- default:
67
- ratioClassName = '';
68
- break;
69
- }
70
- return (<div className={[
71
- 'ds_aspect-box',
72
- ratioClassName,
73
- className
74
- ].join(' ')} ref={ref} {...props}>
75
- {react_1.Children.map(children, child => processChild(child))}
76
- </div>);
77
- };
78
- AspectBox.displayName = 'AspectBox';
79
- exports.default = AspectBox;
@@ -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 react_1 = require("react");
7
- // @ts-ignore
8
- const back_to_top_1 = __importDefault(require("@scottish-government/design-system/src/components/back-to-top/back-to-top"));
9
- const icon_1 = __importDefault(require("../../common/icon"));
10
- const BackToTop = ({ className, href = '#page-top', ...props }) => {
11
- const ref = (0, react_1.useRef)(null);
12
- (0, react_1.useEffect)(() => {
13
- if (ref.current) {
14
- new back_to_top_1.default(ref.current).init();
15
- }
16
- }, [ref]);
17
- return (<div className={[
18
- 'ds_back-to-top',
19
- className
20
- ].join(' ')} ref={ref} {...props}>
21
- <a href={href} className="ds_back-to-top__button">Back to top
22
- <icon_1.default className="ds_back-to-top__icon" icon="ArrowUpward"/>
23
- </a>
24
- </div>);
25
- };
26
- BackToTop.displayName = 'BackToTop';
27
- exports.default = BackToTop;
@@ -1,28 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const Breadcrumb = ({ hidden, href, title }) => {
4
- return (<li className={[
5
- 'ds_breadcrumbs__item',
6
- hidden && 'visually-hidden'
7
- ].join(' ')}>
8
-
9
- {href ? (<a className="ds_breadcrumbs__link" href={href}>
10
- {title}
11
- </a>) : (title)}
12
- </li>);
13
- };
14
- /**
15
- * @param {boolean} hideLastItem
16
- * @param {Array} items
17
- * @param {Object} props - Properties for the element
18
- * @returns {JSX.Element} - The element
19
- */
20
- const Breadcrumbs = ({ hideLastItem, items, ...props }) => {
21
- return (<nav aria-label="Breadcrumb" {...props}>
22
- <ol className="ds_breadcrumbs">
23
- {items && items.map((item, index) => (<Breadcrumb title={item.title} href={item.href} hidden={(hideLastItem) && index + 1 === items.length} key={'breadcrumb' + index}/>))}
24
- </ol>
25
- </nav>);
26
- };
27
- Breadcrumbs.displayName = 'Breadcrumbs';
28
- exports.default = Breadcrumbs;
@@ -1,30 +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 icon_1 = __importDefault(require("../../common/icon"));
7
- const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
8
- const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
9
- const Button = ({ buttonStyle, children, className, icon, iconLeft, iconOnly = false, href, small, styleAsLink, type = 'button', width, ...props }) => {
10
- // determine which HTML tag to use
11
- let tagName = 'button';
12
- if (href) {
13
- tagName = 'a';
14
- }
15
- return (<wrapper_tag_1.default tagName={tagName} className={[
16
- !styleAsLink ? 'ds_button' : 'ds_link',
17
- width && `ds_button--${width}`,
18
- buttonStyle && `ds_button--${buttonStyle}`,
19
- small && 'ds_button--small',
20
- (icon && !iconOnly) ? 'ds_button--has-icon' : undefined,
21
- iconLeft && 'ds_button--has-icon--left',
22
- className
23
- ].join(' ')} href={href} {...(tagName === 'button' ? { type: type } : {})} {...props}>
24
- {iconOnly ? <screen_reader_text_1.default>{children}</screen_reader_text_1.default> : children}
25
-
26
- {icon && <icon_1.default icon={icon}/>}
27
- </wrapper_tag_1.default>);
28
- };
29
- Button.displayName = 'Button';
30
- exports.default = Button;
@@ -1,62 +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.CheckboxGroup = exports.Checkbox = void 0;
7
- const react_1 = require("react");
8
- // @ts-ignore
9
- const checkboxes_1 = __importDefault(require("@scottish-government/design-system/src/forms/checkbox/checkboxes"));
10
- const hint_text_1 = __importDefault(require("../../common/hint-text"));
11
- const Checkbox = ({ checked, hintText, id, exclusive, label, name, onBlur, onChange, small }) => {
12
- const hintTextId = `hint-text-${id}`;
13
- const behaviour = exclusive && 'exclusive';
14
- function handleBlur(event) {
15
- if (typeof onBlur === 'function') {
16
- onBlur(event);
17
- }
18
- }
19
- function handleChange(event) {
20
- if (typeof onChange === 'function') {
21
- onChange(event);
22
- }
23
- }
24
- return (<>
25
- {exclusive && <p className="ds_checkbox-separator">or</p>}
26
- <div className={[
27
- 'ds_checkbox',
28
- small && 'ds_checkbox--small'
29
- ].join(' ')}>
30
-
31
- <input aria-describedby={hintText ? hintTextId : undefined} className="ds_checkbox__input" data-behaviour={behaviour} defaultChecked={!!checked} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange} type="checkbox"/>
32
- <label className="ds_checkbox__label" htmlFor={id}>{label}</label>
33
- {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
34
- </div>
35
- </>);
36
- };
37
- exports.Checkbox = Checkbox;
38
- /**
39
- * @param {Object} props - Properties for the element
40
- * @param {Array} items - Checkboxes
41
- * @param {boolean} small - Use the small display style for all checkboxes
42
- * @returns {JSX.Element} - The element
43
- */
44
- const CheckboxGroup = ({ className, items, small, ...props }) => {
45
- const ref = (0, react_1.useRef)(null);
46
- (0, react_1.useEffect)(() => {
47
- if (ref.current) {
48
- new checkboxes_1.default(ref.current).init();
49
- }
50
- }, [ref]);
51
- return (<div className={[
52
- 'ds_checkboxes',
53
- 'ds_field-group',
54
- className
55
- ].join(' ')} data-module="ds-checkboxes" ref={ref} {...props}>
56
- {items && items.map((item, index) => (<exports.Checkbox exclusive={item.exclusive} checked={item.checked} hintText={item.hintText} id={item.id} key={'checkbox' + index} label={item.label} onBlur={item.onBlur} onChange={item.onChange} small={small || item.small}/>))}
57
- </div>);
58
- };
59
- exports.CheckboxGroup = CheckboxGroup;
60
- exports.Checkbox.displayName = 'Checkbox';
61
- exports.CheckboxGroup.displayName = 'CheckboxGroup';
62
- exports.default = exports.CheckboxGroup;
@@ -1,24 +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 icon_1 = __importDefault(require("../../common/icon"));
7
- const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
8
- const ConfirmationMessage = ({ ariaLive = 'polite', children, className, headerLevel = 'h3', title, ...props }) => {
9
- return (<div aria-live={ariaLive} className={[
10
- 'ds_confirmation-message',
11
- className
12
- ].join(' ')} {...props}>
13
- <icon_1.default className="ds_confirmation-message__icon" icon="CheckCircle" iconSize="24"/>
14
-
15
- <wrapper_tag_1.default className="ds_confirmation-message__title" tagName={headerLevel}>
16
- {title}
17
- </wrapper_tag_1.default>
18
- {children && <div className="ds_confirmation-message__body">
19
- {children}
20
- </div>}
21
- </div>);
22
- };
23
- ConfirmationMessage.displayName = 'ConfirmationMessage';
24
- exports.default = ConfirmationMessage;
@@ -1,33 +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.Link = void 0;
7
- const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
8
- const Link = ({ current, href, title }) => {
9
- // determine which HTML tag to use
10
- const tagName = href && !current ? 'a' : 'span';
11
- return (<li aria-current={current && 'page' || undefined} className="ds_contents-nav__item">
12
- <wrapper_tag_1.default tagName={tagName} className={[
13
- 'ds_contents-nav__link',
14
- current && 'ds_current'
15
- ].join(' ')} href={!current ? href : undefined}>
16
- {title}
17
- </wrapper_tag_1.default>
18
- </li>);
19
- };
20
- exports.Link = Link;
21
- const ContentsNav = function ({ className, items, label = 'Pages in this section', title = 'Contents', ...props }) {
22
- return (<nav aria-label={label} className={[
23
- 'ds_contents-nav',
24
- className
25
- ].join(' ')} {...props}>
26
- <h2 className="ds_contents-nav__title">{title}</h2>
27
- <ul className="ds_contents-nav__list">
28
- {items && items.map((item, index) => (<exports.Link current={item.current} href={item.href} title={item.title} key={'link' + index}/>))}
29
- </ul>
30
- </nav>);
31
- };
32
- ContentsNav.displayName = 'ContentsNav';
33
- exports.default = ContentsNav;
@@ -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 abstract_notification_banner_1 = __importDefault(require("../../common/abstract-notification-banner"));
7
- const CookieBanner = ({ children, className, title, ...props }) => {
8
- return (<>
9
- <abstract_notification_banner_1.default className={[
10
- 'ds_notification--large',
11
- 'ds_notification--cookie',
12
- 'js-initial-cookie-content',
13
- className
14
- ].join(' ')} data-module="ds-cookie-notification" title={title} {...props}>
15
- {children}
16
- </abstract_notification_banner_1.default>
17
- </>);
18
- };
19
- CookieBanner.displayName = 'CookieBanner';
20
- CookieBanner.Buttons = abstract_notification_banner_1.default.Buttons;
21
- exports.default = CookieBanner;