@scottish-government/designsystem-react 0.0.2 → 0.1.1

package/dist/components/page-header/page-header.jsx

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PageHeader = ({ children, className, label, title, ...props }) => {
+    return (<header className={[
+            'ds_page-header',
+            className
+        ].join(' ')} {...props}>
+            {label && <span className="ds_page-header__label  ds_content-label">{label}</span>}
+            <h1 className="ds_page-header__title">{title}</h1>
+
+            {children}
+        </header>);
+};
+PageHeader.displayName = 'PageHeader';
+exports.default = PageHeader;

package/dist/components/page-metadata/page-metadata.jsx

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetadataItem = void 0;
+const MetadataItem = ({ children, className, name, ...props }) => {
+    return (<div className={[
+            'ds_metadata__item',
+            className
+        ].join(' ')} {...props}>
+            <dt className="ds_metadata__key">{name}</dt>{' '}
+            <dd className="ds_metadata__value">
+                {children}
+            </dd>
+        </div>);
+};
+exports.MetadataItem = MetadataItem;
+const Metadata = ({ children, className, inline, ...props }) => {
+    return (<dl className={[
+            'ds_metadata',
+            inline && 'ds_metadata--inline',
+            className
+        ].join(' ')} {...props}>
+            {children}
+        </dl>);
+};
+Metadata.displayName = 'Metadata';
+exports.MetadataItem.displayName = 'MetadataItem';
+exports.default = Metadata;

package/dist/components/phase-banner/phase-banner.jsx

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const tag_1 = __importDefault(require("../tag/tag"));
+const PhaseBanner = ({ children, className, phaseName, ...props }) => {
+    return (<div className={[
+            'ds_phase-banner',
+            className
+        ].join(' ')} {...props}>
+            <div className="ds_wrapper">
+                <p className="ds_phase-banner__content">
+                    {phaseName && <tag_1.default title={phaseName} className="ds_phase-banner__tag"/>}
+                    <span className="ds_phase-banner__text">
+                        {children || "This is a new service"}
+                    </span>
+                </p>
+            </div>
+        </div>);
+};
+PhaseBanner.displayName = 'PhaseBanner';
+exports.default = PhaseBanner;

package/dist/components/question/question.jsx

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const error_message_1 = __importDefault(require("../error-message/error-message"));
+const hint_text_1 = __importDefault(require("../../common/hint-text"));
+const wrapper_tag_1 = __importDefault(require("../../common/wrapper-tag"));
+const Question = function ({ children, className, error, errorMessage, hintText, legend, tagName = 'div', ...props }) {
+    return (<wrapper_tag_1.default tagName={tagName} className={[
+            'ds_question',
+            error && 'ds_question--error',
+            className
+        ].join(' ')} {...props}>
+            {legend && <legend>{legend}</legend>}
+            {hintText && <hint_text_1.default text={hintText}/>}
+            {error && errorMessage && <error_message_1.default text={errorMessage}/>}
+            {children}
+        </wrapper_tag_1.default>);
+};
+Question.displayName = 'Question';
+exports.default = Question;

package/dist/components/radio-button/radio-button.jsx

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const hint_text_1 = __importDefault(require("../../common/hint-text"));
+const Radio = ({ checked, hintText, id, label, name, onBlur, onChange, small }) => {
+    const hintTextId = `hint-text-${id}`;
+    function handleBlur(event) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+    function handleChange(event) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+    return (<div className={[
+            'ds_radio',
+            small && 'ds_radio--small'
+        ].join(' ')}>
+            <input aria-describedby={hintText ? hintTextId : undefined} className="ds_radio__input" defaultChecked={!!checked} id={id} name={name} onBlur={handleBlur} onChange={handleChange} type="radio"/>
+            <label className="ds_radio__label" htmlFor={id}>{label}</label>
+            {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
+        </div>);
+};
+exports.Radio = Radio;
+const RadioGroup = ({ className, inline, items, name, small, ...props }) => {
+    return (<div className={[
+            'ds_radios',
+            'ds_field-group',
+            inline && 'ds_field-group--inline',
+            className
+        ].join(' ')} {...props}>
+
+            {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}/>))}
+        </div>);
+};
+exports.Radio.displayName = 'Radio';
+RadioGroup.displayName = 'RadioGroup';
+exports.default = RadioGroup;

package/dist/components/select/select.jsx

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const error_message_1 = __importDefault(require("../error-message/error-message"));
+const hint_text_1 = __importDefault(require("../../common/hint-text"));
+const Option = function ({ text, value }) {
+    return (<option value={value}>{text}</option>);
+};
+const Select = function ({ className, defaultValue, error, errorMessage, hintText, id, label, name, onBlur, onChange, options, placeholder, width, ...props }) {
+    const errorMessageId = `error-message-${id}`;
+    const hintTextId = `hint-text-${id}`;
+    const describedbys = [];
+    if (hintText) {
+        describedbys.push(hintTextId);
+    }
+    ;
+    if (errorMessage) {
+        describedbys.push(errorMessageId);
+    }
+    ;
+    function handleBlur(event) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+    function handleChange(event) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+    return (<>
+            <label className="ds_label" htmlFor={id}>{label}</label>
+            {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
+            {errorMessage && <error_message_1.default id={errorMessageId} text={errorMessage}/>}
+            <div className={[
+            "ds_select-wrapper",
+            error && 'ds_input--error',
+            width && `ds_input--${width}`,
+            className
+        ].join(' ')} {...props}>
+                <select aria-describedby={describedbys.join(' ')} className="ds_select" defaultValue={defaultValue} id={id} name={name || id} onBlur={handleBlur} onChange={handleChange}>
+                    <option value="">{placeholder}</option>
+                    {options && options.map((option, index) => (<Option value={option.value} text={option.text} key={`option-${index}`}/>))}
+                </select>
+                <span className="ds_select-arrow" aria-hidden="true"></span>
+            </div>
+        </>);
+};
+Select.displayName = 'Select';
+exports.default = Select;

package/dist/components/sequential-navigation/sequential-navigation.jsx

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const NextLink = ({ href, title }) => {
+    return (<div className="ds_sequential-nav__item  ds_sequential-nav__item--next">
+            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--right">
+                <span className="ds_sequential-nav__text" data-label="Next">
+                    {title}
+                </span>
+            </a>
+        </div>);
+};
+const PrevLink = ({ href, title, }) => {
+    return (<div className="ds_sequential-nav__item  ds_sequential-nav__item--prev">
+            <a href={href} className="ds_sequential-nav__button  ds_sequential-nav__button--left">
+                <span className="ds_sequential-nav__text" data-label="Previous">
+                    {title}
+                </span>
+            </a>
+        </div>);
+};
+const SequentialNavigation = ({ ariaLabel = 'Article navigation', className, next, previous, ...props }) => {
+    return (<nav className={[
+            'ds_sequential-nav',
+            className
+        ].join(' ')} aria-label={ariaLabel} {...props}>
+            {previous && <PrevLink href={previous.href} title={previous.title}></PrevLink>}
+            {next && <NextLink href={next.href} title={next.title}></NextLink>}
+        </nav>);
+};
+SequentialNavigation.displayName = 'SequentialNavigation';
+exports.default = SequentialNavigation;

package/dist/components/side-navigation/side-navigation.jsx

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = exports.List = void 0;
+const react_1 = require("react");
+// @ts-ignore
+const side_navigation_1 = __importDefault(require("@scottish-government/design-system/src/components/side-navigation/side-navigation"));
+const List = function ({ items, root }) {
+    return (<ul className="ds_side-navigation__list" id={root ? 'side-navigation-root' : undefined}>
+            {items && items.map((item, index) => (<exports.Link title={item.title} href={item.href} items={item.items} current={item.current} key={'sidenavitem' + index}/>))}
+        </ul>);
+};
+exports.List = List;
+const Link = function ({ current = false, href, items, title }) {
+    return (<li className={[
+            'ds_side-navigation__item',
+            items && 'ds_side-navigation__item--has-children'
+        ].join(' ')}>
+            {current ?
+            <span className="ds_side-navigation__link  ds_current">{title}</span> :
+            <a href={href} className="ds_side-navigation__link">{title}</a>}
+
+            {items && <exports.List items={items}/>}
+        </li>);
+};
+exports.Link = Link;
+const SideNavigation = function ({ children, className, items, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new side_navigation_1.default(ref.current).init();
+        }
+    }, [ref]);
+    return (<nav aria-label="Sections" className={[
+            'ds_side-navigation',
+            className
+        ].join(' ')} data-module="ds-side-navigation" ref={ref} {...props}>
+            <input type="checkbox" className="fully-hidden  js-toggle-side-navigation" id="show-side-navigation" aria-controls="side-navigation-root"/>
+            <label className="ds_side-navigation__expand  ds_link" htmlFor="show-side-navigation">
+                <span className="visually-hidden">Show all</span> Pages in this section
+                <span className="ds_side-navigation__expand-indicator"></span>
+            </label>
+
+            {items && <exports.List root items={items}/>}
+        </nav>);
+};
+SideNavigation.displayName = 'SideNavigation';
+exports.Link.displayName = 'SideNavLink';
+exports.List.displayName = 'SideNavList';
+exports.default = SideNavigation;

package/dist/components/site-navigation/site-navigation.jsx

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const SiteNavLink = ({ current = false, href, title }) => {
+    return (<li className="ds_site-navigation__item">
+            <a href={href} className={[
+            'ds_site-navigation__link',
+            current ? 'ds_current' : undefined
+        ].join(' ')}>{title}</a>
+        </li>);
+};
+const SiteNavigation = ({ className, items, ...props }) => {
+    return (<nav className={[
+            'ds_site-navigation',
+            className
+        ].join(' ')} {...props}>
+            <ul className="ds_site-navigation__list">
+                {items && items.map((item, index) => (<SiteNavLink current={item.current} href={item.href} title={item.title} key={`link-${index}`}/>))}
+            </ul>
+        </nav>);
+};
+SiteNavigation.displayName = 'SiteNavigation';
+exports.default = SiteNavigation;

package/dist/components/site-search/site-search.jsx

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+// @ts-ignore
+const autocomplete_1 = __importDefault(require("@scottish-government/design-system/src/components/autocomplete/autocomplete"));
+const button_1 = __importDefault(require("../button/button"));
+const SiteSearch = function ({ action = '/search', autocompleteEndpoint, autocompleteSuggestionMappingFunction, className, id = 'site-search', method = 'GET', minLength = 3, name = 'q', placeholder = 'Search', ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const hasAutocomplete = !!autocompleteEndpoint;
+    let autocompleteId = hasAutocomplete ? id + '-autocomplete' : '';
+    (0, react_1.useEffect)(() => {
+        if (hasAutocomplete && ref.current) {
+            const options = {};
+            if (minLength) {
+                options.minLength = minLength;
+            }
+            if (autocompleteSuggestionMappingFunction) {
+                options.suggestionMappingFunction = autocompleteSuggestionMappingFunction;
+            }
+            const autocomplete = new autocomplete_1.default(document.getElementById(autocompleteId), autocompleteEndpoint, options);
+            autocomplete.init();
+        }
+    }, [ref, autocompleteEndpoint, autocompleteId, hasAutocomplete, minLength, autocompleteSuggestionMappingFunction]);
+    return (<div className={[
+            'ds_site-search', ,
+            className,
+            hasAutocomplete ? 'ds_autocomplete' : undefined
+        ].join(' ')} id={autocompleteId ? autocompleteId : undefined} ref={ref} {...props}>
+
+            <form role="search" className="ds_site-search__form" method={method} action={action}>
+                <label className="ds_label  visually-hidden" htmlFor={id} id={id + '-label'}>Search</label>
+
+                {hasAutocomplete && (<div role="status" aria-live="polite" id="autocomplete-status" className="visually-hidden"></div>)}
+
+                <div className="ds_input__wrapper  ds_input__wrapper--has-icon">
+                    <input aria-autocomplete={hasAutocomplete ? 'list' : undefined} aria-owns={hasAutocomplete ? 'autocomplete-suggestions' : undefined} autoComplete={hasAutocomplete ? 'off' : undefined} className={[
+            'ds_input',
+            'ds_site-search__input',
+            hasAutocomplete ? 'js-autocomplete-input' : undefined
+        ].join(' ')} id={id} name={name} placeholder={placeholder} required spellCheck="false" type="search"/>
+
+                    <button_1.default type="submit" icon="search" iconOnly>Search</button_1.default>
+
+                    {hasAutocomplete && (<div id="autocomplete-suggestions" className="ds_autocomplete__suggestions">
+                            <ol className="ds_autocomplete__suggestions-list" role="listbox" aria-labelledby="site-search-label"></ol>
+                        </div>)}
+                </div>
+            </form>
+        </div>);
+};
+SiteSearch.displayName = 'SiteSearch';
+exports.default = SiteSearch;

package/dist/components/skip-links/skip-links.jsx

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkipLink = void 0;
+const SkipLink = ({ targetId, title }) => {
+    return (<li className="ds_skip-links__item">
+            <a href={`#${targetId}`} className="ds_skip-links__link">{title}</a>
+        </li>);
+};
+exports.SkipLink = SkipLink;
+const SkipLinks = ({ items, mainContentId = 'main-content', mainLinkText = 'Skip to main content', ...props }) => {
+    return (<div className="ds_skip-links" {...props}>
+            <ul className="ds_skip-links__list">
+                <exports.SkipLink title={mainLinkText} targetId={mainContentId}/>
+
+                {items && items.map((item, index) => (<exports.SkipLink title={item.title} targetId={item.targetId} key={`skiplink-${index}`}/>))}
+            </ul>
+        </div>);
+};
+SkipLinks.displayName = 'SkipLinks';
+exports.SkipLink.displayName = 'SkipLink';
+exports.default = SkipLinks;

package/dist/components/tag/tag.jsx

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Tag = ({ className, colour, title, ...props }) => {
+    return (<span className={[
+            'ds_tag',
+            className,
+            colour && `ds_tag--${colour}`,
+        ].join(' ')} {...props}>
+            {title}
+        </span>);
+};
+Tag.displayName = 'Tag';
+exports.default = Tag;

package/dist/components/task-list/task-list.jsx

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaskGroup = exports.Task = void 0;
+const react_1 = require("react");
+const conditional_wrapper_1 = __importDefault(require("../../common/conditional-wrapper"));
+const hint_text_1 = __importDefault(require("../../common/hint-text"));
+const screen_reader_text_1 = __importDefault(require("../../common/screen-reader-text"));
+const tag_1 = __importDefault(require("../tag/tag"));
+const Task = ({ children, className, href, id, isComplete = false, statusText, tagColour = 'grey', title, ...props }) => {
+    if (isComplete) {
+        tagColour = 'green';
+    }
+    return (<li className={[
+            'ds_task-list__task',
+            className
+        ].join(' ')} id={id} {...props}>
+            <div className="ds_task-list__task-details">
+                <h3 className="ds_task-list__task-heading">
+                <conditional_wrapper_1.default condition={typeof href !== 'undefined'} wrapper={(children) => <a className="ds_task-list__task-link" href={href}>{children}</a>}>
+                    {title}
+                    {statusText && <screen_reader_text_1.default>({statusText})</screen_reader_text_1.default>}
+                </conditional_wrapper_1.default>
+                </h3>
+                <hint_text_1.default className="ds_task-list__task-summary">{children}</hint_text_1.default>
+            </div>
+
+            {typeof statusText !== 'undefined' &&
+            <tag_1.default aria-hidden="true" colour={tagColour} title={statusText}/>}
+        </li>);
+};
+exports.Task = Task;
+/**
+ * @param {Object} props
+ * @param {string} props.intro - Intro text
+ * @param {string} props.title - The title of the task group
+ * @returns {JSX.Element} - The element
+ */
+const TaskGroup = ({ children, className, intro, title, ...props }) => {
+    return (<li className={[
+            'ds_task-list-group__section',
+            className
+        ].join(' ')} {...props}>
+            <h2 className="ds_task-list-heading">{title}</h2>
+            {intro && <p className="ds_task-list-intro">{intro}</p>}
+            <ul className="ds_task-list">
+                {children}
+            </ul>
+        </li>);
+};
+exports.TaskGroup = TaskGroup;
+const TaskList = ({ children, className, headingId = 'task-list', title, ...props }) => {
+    let taskCount = 0;
+    let incompleteTaskIds = [];
+    let completedTasksCount = 0;
+    function processChild(item) {
+        if (item.type.displayName === 'Task') {
+            taskCount = taskCount + 1;
+            if (item.props.isComplete) {
+                completedTasksCount = completedTasksCount + 1;
+            }
+            else {
+                incompleteTaskIds.push(item.props.id);
+            }
+        }
+        else if (item.type.displayName === 'TaskGroup') {
+            react_1.Children.forEach(item.props.children, child => {
+                processChild(child);
+            });
+        }
+    }
+    function firstIncompleteTaskLink() {
+        if (incompleteTaskIds.length > 0) {
+            return (<p><a href={'#' + incompleteTaskIds[0]} className="js-task-list-skip-link">Skip to first incomplete section</a></p>);
+        }
+    }
+    react_1.Children.forEach(children, child => {
+        processChild(child);
+    });
+    return (<div className={className} {...props}>
+            <h2 id={`${headingId}-status`} className="ds_task-list-status-heading">{title}</h2>
+            <nav aria-labelledby={`${headingId}-status`} className="ds_task-list-status">
+                <p>You have completed {completedTasksCount} of {taskCount} sections.</p>
+                {firstIncompleteTaskLink()}
+            </nav>
+            <ul className="ds_task-list">
+                {children}
+            </ul>
+        </div>);
+};
+TaskList.displayName = 'TaskList';
+exports.Task.displayName = 'Task';
+exports.TaskGroup.displayName = 'TaskGroup';
+exports.default = TaskList;

package/dist/components/text-input/text-input.jsx

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+// @ts-ignore
+const character_count_1 = __importDefault(require("@scottish-government/design-system/src/forms/character-count/character-count"));
+const button_1 = __importDefault(require("../button/button"));
+const conditional_wrapper_1 = __importDefault(require("../../common/conditional-wrapper"));
+const error_message_1 = __importDefault(require("../error-message/error-message"));
+const hint_text_1 = __importDefault(require("../../common/hint-text"));
+const TextInput = ({ buttonIcon, buttonText, children, className, countThreshold, width, currency, currencySymbol, error, errorMessage, hasButton = false, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, type = 'text', value, ...props }) => {
+    const errorMessageId = `error-message-${id}`;
+    const hintTextId = `hint-text-${id}`;
+    const ref = (0, react_1.useRef)(null);
+    const inputWrapperClasses = `${hasButton ? 'ds_input__wrapper  ds_input__wrapper--has-icon' : ''} ${currency ? 'ds_currency-wrapper' : ''}`;
+    const describedbys = [];
+    if (hintText) {
+        describedbys.push(hintTextId);
+    }
+    ;
+    if (errorMessage) {
+        describedbys.push(errorMessageId);
+    }
+    ;
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new character_count_1.default(ref.current).init();
+        }
+    }, [ref]);
+    function handleBlur(event) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+    function handleChange(event) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+    return (<conditional_wrapper_1.default condition={typeof maxlength !== 'undefined' && maxlength > 0} wrapper={(children) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}>
+            <label className="ds_label" htmlFor={id}>{label}</label>
+            {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
+            {errorMessage && <error_message_1.default id={errorMessageId} text={errorMessage}/>}
+            <conditional_wrapper_1.default condition={hasButton || typeof currency !== 'undefined' && currency} wrapper={(children) => <div className={inputWrapperClasses} data-symbol={currencySymbol}>{children}</div>}>
+                <input aria-describedby={describedbys.join(' ')} className={[
+            'ds_input',
+            className,
+            error ? 'ds_input--error' : '',
+            width ? `ds_input--${width}` : '',
+        ].join(' ')} defaultValue={value} id={id} maxLength={maxlength} name={name || id} onBlur={handleBlur} onChange={handleChange} placeholder={placeholder} type={type} {...props}/>
+                {hasButton && (buttonText || buttonIcon) && <button_1.default iconOnly icon={buttonIcon}>{buttonText}</button_1.default>}
+            </conditional_wrapper_1.default>
+        </conditional_wrapper_1.default>);
+};
+TextInput.displayName = 'TextInput';
+exports.default = TextInput;

package/dist/components/textarea/textarea.jsx

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+// @ts-ignore
+const character_count_1 = __importDefault(require("@scottish-government/design-system/src/forms/character-count/character-count"));
+const conditional_wrapper_1 = __importDefault(require("../../common/conditional-wrapper"));
+const error_message_1 = __importDefault(require("../error-message/error-message"));
+const hint_text_1 = __importDefault(require("../../common/hint-text"));
+const Textarea = ({ className, countThreshold, error, errorMessage, hintText, id, label, maxlength, name, onBlur, onChange, placeholder, rows = 4, value, ...props }) => {
+    const errorMessageId = `error-message-${id}`;
+    const hintTextId = `hint-text-${id}`;
+    const ref = (0, react_1.useRef)(null);
+    const describedbys = [];
+    if (hintText) {
+        describedbys.push(hintTextId);
+    }
+    ;
+    if (errorMessage) {
+        describedbys.push(errorMessageId);
+    }
+    ;
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            new character_count_1.default(ref.current).init();
+        }
+    }, [ref]);
+    function handleBlur(event) {
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }
+    function handleChange(event) {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+    }
+    return (<conditional_wrapper_1.default condition={typeof maxlength !== 'undefined' && maxlength > 0} wrapper={(children) => <div ref={ref} data-threshold={countThreshold} data-module="ds-character-count">{children}</div>}>
+            <label className="ds_label" htmlFor={id}>{label}</label>
+            {hintText && <hint_text_1.default id={hintTextId} text={hintText}/>}
+            {errorMessage && <error_message_1.default id={errorMessageId} text={errorMessage}/>}
+
+            <textarea aria-describedby={describedbys.join(' ')} className={[
+            'ds_input',
+            error && 'ds_input--error',
+            className
+        ].join(' ')} defaultValue={value} id={id} maxLength={maxlength} name={name || id} onBlur={handleBlur} onChange={handleChange} placeholder={placeholder} rows={rows} {...props}/>
+
+        </conditional_wrapper_1.default>);
+};
+Textarea.displayName = 'Textarea';
+exports.default = Textarea;

package/dist/components/warning-text/warning-text.jsx

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const WarningText = ({ children, className, ...props }) => {
+    return (<div className={[
+            'ds_warning-text',
+            className
+        ].join(' ')} {...props}>
+            <strong className="ds_warning-text__icon" aria-hidden="true"></strong>
+            <strong className="visually-hidden">Warning</strong>
+            <div className="ds_warning-text__text">
+                {children}
+            </div>
+        </div>);
+};
+WarningText.displayName = 'WarningText';
+exports.default = WarningText;