odaptos_design_system 1.4.76 → 1.4.78

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.76",
+  "version": "1.4.78",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/Radio/Radio.tsx

@@ -41,7 +41,7 @@ const BpCheckedIcon = styled(BpIcon)({
 interface RadioProps {
   label?: string;
   leftLabel?: string;
-  onChange: () => void;
+  onChange?: () => void;
   onBlur?: () => void;
   checked: boolean;
   disabled?: boolean;

package/src/RatingScale/RatingScale.module.scss

@@ -0,0 +1,19 @@
+.ratingScale {
+
+    .formControl {
+
+        .radioGroup {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+
+            .radioContainer {
+                display: flex;
+                gap: 0.25rem;
+
+                .radio {
+                }
+            }
+        }
+    }
+}

package/src/RatingScale/RatingScale.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { FormControl, RadioGroup } from '@mui/material';
+import { Text } from '../Typography/Text';
+import { Radio } from '../Radio/Radio';
+
+import styles from './RatingScale.module.scss';
+
+interface RatingScaleProps {
+  className?: string;
+  topLabel?: string | undefined;
+  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
+  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+  required?: boolean | undefined;
+  name?: string;
+  options: string[];
+  value: string | number | null;
+  onChange: (event: any) => void;
+  onBlur?: (event: any) => void;
+  onKeyDown?: () => void;
+  disabled?: boolean;
+  id?: string;
+  helperText?: string;
+  errorText?: string;
+  error?: boolean;
+  otherProps?: any;
+}
+
+const RatingScale = (props: RatingScaleProps) => {
+  const {
+    className,
+    topLabel,
+    topLabelWeight,
+    topLabelSize,
+    required = false,
+    name,
+    options,
+    value,
+    id,
+    onChange,
+    onBlur,
+    disabled,
+    error,
+    otherProps,
+  } = props;
+
+  return (
+    <div className={styles.ratingScale + ' ' + className}>
+      <Text
+        text={`${topLabel ? topLabel : ''}`}
+        weight={topLabelWeight || 'bold'}
+        size={topLabelSize || 'base'}
+        className={styles.topLabel}
+        required={required}
+      />
+
+      <FormControl
+        component="fieldset"
+        className={styles.formControl}
+        error={error}
+      >
+        <RadioGroup
+          className={styles.radioGroup}
+          aria-label="rating"
+          name={name}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          id={id}
+          {...otherProps}
+        >
+          {options.map((option, index) => (
+            <Radio
+              key={`${option}-${index}`}
+              value={option}
+              label={option}
+              checked={value === option}
+              disabled={disabled}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+    </div>
+  );
+};
+
+export default RatingScale;

package/src/Search/Search.tsx

@@ -2,13 +2,19 @@ import React from 'react';
 import { SearchCircledIcon } from '../Icons';
 import { TextInput } from '../TextInput/TextInput';
 
-interface RadioProps {
+interface SearchProps {
   searchInput: string | number;
   placeholder?: string;
+  id?: string;
   onChange: (e: any) => void;
 }
 
-export const Search = ({ searchInput, onChange, placeholder }: RadioProps) => {
+export const Search = ({
+  searchInput,
+  onChange,
+  placeholder,
+  id,
+}: SearchProps) => {
   return (
     <TextInput
       value={searchInput}
@@ -21,6 +27,7 @@ export const Search = ({ searchInput, onChange, placeholder }: RadioProps) => {
         />
       }
       onChange={onChange}
+      id={id}
     />
   );
 };