@digigov/react-core 1.0.0-8ae63a77 → 1.0.0-8bbf3ef2

package/src/TextArea/index.tsx

@@ -10,6 +10,13 @@ export interface TextAreaProps extends BaseProps<'textarea'> {
   * @value false
   */
   error?: boolean;
+  /**
+   * dense is optional.
+   * @value true TextArea will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * Textarea component is used when you need to let users enter an
@@ -17,17 +24,19 @@ export interface TextAreaProps extends BaseProps<'textarea'> {
  */
 export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
   function TextArea(
-    { name, rows = 6, error, className, children, ...props },
+    { name, rows, error, dense, className, children, ...props },
     ref
   ) {
+    const defaultRows = dense? 3 : 6;
     return (
       <Base
         as="textarea"
         name={name}
-        rows={rows}
+        rows={rows || defaultRows}
         ref={ref}
         className={clsx(className, {
           'govgr-textarea': true,
+          'govgr-textarea--dense': dense,
           'govgr-input--error': error,
         })}
         {...props}

package/src/TextInput/__snapshots__/index.test.tsx.snap

@@ -108,6 +108,23 @@ exports[`renders the TextInput  with with maxWidth="5-char" with width=two-third
 </ForwardRef(TextInput)>
 `;
 
+exports[`renders the TextInput with dense prop 1`] = `
+<ForwardRef(TextInput)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-input--dense govgr-input"
+    type="text"
+  >
+    <input
+      className="govgr-input--dense govgr-input"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(TextInput)>
+`;
+
 exports[`renders the TextInput with maxWidth="2-char" 1`] = `
 <ForwardRef(TextInput)
   maxWidth="2-char"

package/src/TextInput/index.test.tsx

@@ -6,6 +6,9 @@ import TextInput from '@digigov/react-core/TextInput';
 it('renders the TextInput with no props', () => {
   expect(mount(<TextInput></TextInput>)).toMatchSnapshot();
 });
+it('renders the TextInput with dense prop', () => {
+  expect(mount(<TextInput dense></TextInput>)).toMatchSnapshot();
+});
 
 it('renders the TextInput with maxWidth="2-char"', () => {
   expect(mount(<TextInput maxWidth='2-char'></TextInput>)).toMatchSnapshot();

package/src/TextInput/index.tsx

@@ -34,6 +34,13 @@ export interface TextInputProps extends BaseProps<'input'> {
    * @value false
    */
   error?: boolean;
+  /**
+   * dense is optional.
+   * @value true TextInput will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * TextInput component when you need to let users enter text that’s no
@@ -46,6 +53,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       maxWidth,
       width,
       error,
+      dense,
       className,
       children,
       ...props
@@ -60,6 +68,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         className={clsx(className, {
           'govgr-input': true,
           'govgr-input--error': error,
+          'govgr-input--dense': dense,
           [`govgr-input--width-${maxWidth}`]: maxWidth !== undefined,
           'govgr-!-width-one-quarter': width === '25%',
           'govgr-!-width-one-third': width === '33.3%',

package/src/WarningText/__snapshots__/index.test.tsx.snap

@@ -31,6 +31,37 @@ exports[`renders the WarningText with assistive text 1`] = `
 </ForwardRef(WarningText)>
 `;
 
+exports[`renders the WarningText with dense=true 1`] = `
+<ForwardRef(WarningText)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-warning-text--dense govgr-warning-text"
+  >
+    <div
+      className="govgr-warning-text--dense govgr-warning-text"
+    >
+      <span
+        className="govgr-warning-text__icon"
+      >
+        !
+      </span>
+      <strong
+        className="govgr-warning-text__text"
+      >
+        <span
+          className="govgr-warning-text__assistive"
+        >
+          Προσοχή
+        </span>
+        hello
+      </strong>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(WarningText)>
+`;
+
 exports[`renders the WarningText with no props 1`] = `
 <ForwardRef(WarningText)>
   <ForwardRef(Base)

package/src/WarningText/index.test.tsx

@@ -9,3 +9,6 @@ it('renders the WarningText with no props', () => {
 it('renders the WarningText with assistive text', () => {
   expect(mount(<WarningText assistiveText='alert'>hello</WarningText>)).toMatchSnapshot();
 });
+it('renders the WarningText with dense=true', () => {
+  expect(mount(<WarningText dense>hello</WarningText>)).toMatchSnapshot();
+});

package/src/WarningText/index.tsx

@@ -9,6 +9,13 @@ export interface WarningTextProps extends BaseProps<'div'> {
    * assistiveText is used to provide a textual warning for assistive technologies like screen readers.
    */
   assistiveText?: string;
+  /**
+   * dense is optional.
+   * @value true WarningText will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
 }
 /**
  * WarningText.
@@ -17,7 +24,7 @@ export interface WarningTextProps extends BaseProps<'div'> {
  */
 export const WarningText = React.forwardRef<HTMLDivElement, WarningTextProps>(
   function WarningText(
-    { className, assistiveText = 'Προσοχή', children, ...props },
+    { className, assistiveText = 'Προσοχή', dense, children, ...props },
     ref
   ) {
     return (
@@ -26,6 +33,7 @@ export const WarningText = React.forwardRef<HTMLDivElement, WarningTextProps>(
         ref={ref}
         className={clsx(className, {
           'govgr-warning-text': true,
+          'govgr-warning-text--dense': dense,
         })}
         {...props}
       >