agroptima-design-system 0.26.9 → 0.26.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.26.9",
+  "version": "0.26.10",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Input.scss

@@ -15,6 +15,11 @@
 
   .input-label {
     @include typography.form-label;
+  
+    &.is-required::after {
+      content: '*';
+      color: color_alias.$primary-color-600;
+    }
   }
 
   &.invalid .input-help-text {
@@ -146,4 +151,5 @@
       }
     }
   }
+
 }

package/src/atoms/Input.tsx

@@ -18,6 +18,7 @@ export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
   id?: string
   suffix?: string
   errors?: string[]
+  required?: boolean
 }
 
 export function Input({
@@ -34,6 +35,7 @@ export function Input({
   name,
   id,
   errors,
+  required = false,
   ...props
 }: InputProps): React.JSX.Element {
   const identifier = id || name
@@ -62,10 +64,14 @@ export function Input({
       })}
     >
       {!hideLabel && (
-        <label className="input-label" htmlFor={identifier}>
+        <label
+          className={classNames('input-label', required ? 'is-required' : '')}
+          htmlFor={identifier}
+        >
           {label}
         </label>
       )}
+
       <div className="input-container">
         {icon && <Icon className="left-icon" name={icon} />}
         <input
@@ -74,7 +80,10 @@ export function Input({
           type={handleInputType()}
           name={name}
           aria-label={accessibilityLabel || label}
-          className={classNames({ 'primary-outlined': type === 'file' })}
+          required={required}
+          className={classNames({
+            'primary-outlined': type === 'file',
+          })}
           {...props}
         />
         {suffix && <span className="input-suffix">{suffix}</span>}

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.26.10
+
+* Add required property for input
+
 # 0.26.9
 
 * Update Checkbox component to use input and not span

package/tests/Input.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { getByText, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Input } from '@/atoms/Input'
 
@@ -87,4 +87,17 @@ describe('Input', () => {
     expect(getByRole('spinbutton')).toBeInTheDocument()
     expect(getByText('€/Bottle')).toBeInTheDocument()
   })
+  it('renders required input', () => {
+    const { getByText } = render(
+      <Input
+        helpText="This text can help you"
+        label="Required input"
+        name="input"
+        type="text"
+        required
+      />,
+    )
+
+    expect(getByText('Required input')).toHaveClass('input-label is-required')
+  })
 })