@scottish-government/designsystem-react 0.1.0 → 0.1.2

package/src/components/text-input/text-input.test.tsx

@@ -305,3 +305,16 @@ test('passing additional props', () => {
     const textInput = screen.getByRole('textbox');
     expect(textInput?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <TextInput
+            id={id}
+            label={labelText}
+            className="foo"
+        />
+    );
+
+    const textInput = screen.getByRole('textbox');
+    expect(textInput).toHaveClass('foo', 'ds_input');
+});

package/src/components/textarea/textarea.test.tsx

@@ -210,3 +210,16 @@ test('passing additional props', () => {
     const textarea = screen.getByRole('textbox');
     expect(textarea?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <Textarea
+            id={id}
+            label={labelText}
+            className="foo"
+        />
+    );
+
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toHaveClass('foo');
+});

package/src/components/textarea/textarea.tsx

@@ -6,6 +6,7 @@ import ErrorMessage from '../error-message/error-message';
 import HintText from '../../common/hint-text';
 
 const Textarea: React.FC<SGDS.Component.Textarea> = ({
+    className,
     countThreshold,
     error,
     errorMessage,
@@ -61,6 +62,7 @@ const Textarea: React.FC<SGDS.Component.Textarea> = ({
                 className={[
                     'ds_input',
                     error && 'ds_input--error',
+                    className
                 ].join(' ')}
                 defaultValue={value}
                 id={id}

package/src/components/warning-text/warning-text.test.tsx

@@ -38,3 +38,14 @@ test('passing additional props', () => {
     const warningTextOuter = document.querySelector('.ds_warning-text');
     expect(warningTextOuter?.dataset.test).toEqual('foo');
 });
+
+test('passing additional CSS classes', () => {
+    render(
+        <WarningText className="foo">
+            {text}
+        </WarningText>
+    )
+
+    const warningTextOuter = document.querySelector('.ds_warning-text');
+    expect(warningTextOuter).toHaveClass('foo');
+});

package/src/components/warning-text/warning-text.tsx

@@ -1,10 +1,14 @@
-const WarningText: React.FC<React.PropsWithChildren> = ({
+const WarningText: React.FC<SGDS.Component.WarningText> = ({
     children,
+    className,
     ...props
 }) => {
     return (
         <div
-            className="ds_warning-text"
+            className={[
+                'ds_warning-text',
+                className
+            ].join(' ')}
             {...props}
         >
             <strong className="ds_warning-text__icon" aria-hidden="true"></strong>

package/.editorconfig

@@ -1,12 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-root = true
-
-[*]
-indent_size = 4
-indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true