Merge branch 'main' into livekit-experiment

src/input/AvatarInputField.module.css

@@ -54,4 +54,6 @@ limitations under the License.
 
 .removeButton {
   color: var(--accent);
+  font-size: var(--font-size-caption);
+  padding: 6px 0;
 }

src/input/FeedbackInput.module.css

@@ -0,0 +1,23 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.feedback textarea {
+  height: 75px;
+  border-radius: 8px;
+}
+.feedback {
+  border-radius: 8px;
+}

src/input/Input.module.css

@@ -209,3 +209,7 @@ limitations under the License.
   margin-left: 26px;
   width: 100%; /* Ensure that it breaks onto the next row */
 }
+
+.description.noLabel {
+  margin-top: -20px; /* Ensures that there is no weired spacing if the checkbox doesn't have a label */
+}

src/input/Input.tsx

@@ -55,14 +55,14 @@ function Field({ children, className }: FieldProps): JSX.Element {
 }
 
 interface InputFieldProps {
-  label: string;
+  label?: string;
   type: string;
   prefix?: string;
   suffix?: string;
   id?: string;
   checked?: boolean;
   className?: string;
-  description?: string;
+  description?: string | ReactNode;
   disabled?: boolean;
   required?: boolean;
   // this is a hack. Those variables should be part of `HTMLAttributes<HTMLInputElement> | HTMLAttributes<HTMLTextAreaElement>`
@@ -72,6 +72,7 @@ interface InputFieldProps {
   autoCorrect?: string;
   autoCapitalize?: string;
   value?: string;
+  defaultValue?: string;
   placeholder?: string;
   defaultChecked?: boolean;
   onChange?: (event: ChangeEvent) => void;
@@ -140,7 +141,14 @@ export const InputField = forwardRef<
         </label>
         {suffix && <span>{suffix}</span>}
         {description && (
-          <p id={descriptionId} className={styles.description}>
+          <p
+            id={descriptionId}
+            className={
+              label
+                ? styles.description
+                : classNames(styles.description, styles.noLabel)
+            }
+          >
             {description}
           </p>
         )}

src/input/SelectInput.module.css

@@ -22,8 +22,6 @@ limitations under the License.
 }
 
 .label {
-  font-weight: 600;
-  font-size: var(--font-size-subtitle);
   margin-top: 0;
   margin-bottom: 12px;
 }

src/input/StarRatingInput.module.css

@@ -0,0 +1,41 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.starIcon {
+  cursor: pointer;
+}
+
+.starRating {
+  display: flex;
+  justify-content: center;
+  flex: 1;
+}
+
+.inputContainer {
+  display: inline-block;
+}
+
+.hideElement {
+  border: 0;
+  clip-path: content-box;
+  height: 0px;
+  width: 0px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  width: 1px;
+  display: inline-block;
+}

src/input/StarRatingInput.tsx

@@ -0,0 +1,85 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import styles from "./StarRatingInput.module.css";
+import { ReactComponent as StarSelected } from "../icons/StarSelected.svg";
+import { ReactComponent as StarUnselected } from "../icons/StarUnselected.svg";
+
+interface Props {
+  starCount: number;
+  onChange: (stars: number) => void;
+  required?: boolean;
+}
+
+export function StarRatingInput({
+  starCount,
+  onChange,
+  required,
+}: Props): JSX.Element {
+  const [rating, setRating] = useState(0);
+  const [hover, setHover] = useState(0);
+  const { t } = useTranslation();
+  return (
+    <div className={styles.starRating}>
+      {[...Array(starCount)].map((_star, index) => {
+        index += 1;
+        return (
+          <div
+            className={styles.inputContainer}
+            onMouseEnter={() => setHover(index)}
+            onMouseLeave={() => setHover(rating)}
+            key={index}
+          >
+            <input
+              className={styles.hideElement}
+              type="radio"
+              id={"starInput" + String(index)}
+              value={String(index) + "Star"}
+              name="star rating"
+              onChange={(_ev) => {
+                setRating(index);
+                onChange(index);
+              }}
+              required
+            />
+            <label
+              className={styles.hideElement}
+              id={"starInvisibleLabel" + String(index)}
+              htmlFor={"starInput" + String(index)}
+            >
+              {t("{{count}} stars", {
+                count: index,
+              })}
+            </label>
+            <label
+              className={styles.starIcon}
+              id={"starIcon" + String(index)}
+              htmlFor={"starInput" + String(index)}
+            >
+              {index <= (hover || rating) ? (
+                <StarSelected />
+              ) : (
+                <StarUnselected />
+              )}
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+}