+
+
+ );
+};
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/button/Button.styles.ts b/samples/react-feedback-sidebar/src/webparts/feedback/components/button/Button.styles.ts
new file mode 100644
index 000000000..c8e7394ee
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/button/Button.styles.ts
@@ -0,0 +1,59 @@
+import { createUseStyles } from "react-tss/lib";
+import { EButtonStyle } from "../../utils/Types";
+
+export const ButtonStyles = createUseStyles({
+ classes: {
+ button: {
+ borderRadius: "4px",
+ cursor: "pointer",
+ maxWidth: "100%",
+ padding: "16px 42px",
+ letterSpacing: "0",
+ lineHeight: "16px",
+ textAlign: "center",
+ whiteSpace: "normal",
+ wordBreak: "break-word",
+
+ [`&.${EButtonStyle.primary}`]: {
+ color: "white",
+ backgroundColor: "#007DB3",
+ },
+ [`&.${EButtonStyle.secondary}`]: {
+ color: "#007DB3",
+ backgroundColor: "white",
+ border: `2px solid #007DB3`,
+ },
+ [`&.${EButtonStyle.tertiary}`]: {
+ color: "#007DB3",
+ backgroundColor: "white",
+ lineHeight: "21px",
+ padding: "0",
+ textTransform: "capitalize",
+ },
+ [`&.${EButtonStyle.disabled}`]: {
+ color: "white",
+ backgroundColor: "#D3D3D3",
+ cursor: "not-allowed",
+ },
+ },
+ buttonIcon: {
+ marginRight: "16px",
+ height: "20px",
+ verticalAlign: "middle",
+ width: "20px",
+
+ [`.${EButtonStyle.primary} &`]: {
+ fill: "white",
+ },
+ [`.${EButtonStyle.secondary} &`]: {
+ fill: "#007DB3",
+ },
+ [`.${EButtonStyle.tertiary} &`]: {
+ fill: "#007DB3",
+ },
+ },
+ buttonContent: {
+ verticalAlign: "middle",
+ },
+ },
+});
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/button/Button.tsx b/samples/react-feedback-sidebar/src/webparts/feedback/components/button/Button.tsx
new file mode 100644
index 000000000..5b386783a
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/button/Button.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import clsx from "clsx";
+import { ButtonProps } from "../../utils/Types";
+import { ButtonStyles } from "./Button.styles";
+
+export const Button = ({
+ children,
+ type = "button",
+ onClick,
+ styleType,
+ className,
+ position = "left",
+ disabled = false,
+}: ButtonProps): JSX.Element => {
+ const style = ButtonStyles();
+
+ return (
+
+ );
+};
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/feedback/Feedback.tsx b/samples/react-feedback-sidebar/src/webparts/feedback/components/feedback/Feedback.tsx
new file mode 100644
index 000000000..d1a6c1508
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/feedback/Feedback.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { useState } from "react";
+import { FeedbackProps } from "../../utils/Types";
+import { FeedbackButton } from "../feedbackButton/FeedbackButton";
+import { FeedbackWrapper } from "../feedbackWrapper/FeedbackWrapper";
+
+const Feedback = ({ data }: FeedbackProps): JSX.Element => {
+ const [show, setShow] = useState
+ {wChilds
+ .filter(() => isOpen)
+ .map((child, idx) => {
+ if (child) {
+ const key = child.key || `content-${idx}`;
+ return { ...child, key };
+ }
+ return
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+ );
+ }
+ case "loading": {
+ return (
+ <>
+
+
+
+ );
+ }
+ case "success": {
+ return (
+ <>
+
+
+
+
+ {strings.FeedbackSent}
+
+
+
+
+ );
+ }
+ case "failure": {
+ return (
+ <>
+
+
+
+
+ {strings.Error}
+
+
+
+
+ );
+ }
+ default: {
+ return null;
+ }
+ }
+ }, [state, onChange, onRate, onClick, name, title, onSubmit]);
+
+ return (
+ {Component}
+ );
+};
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/feedbackWrapper/FeedbackWrapper.styles.ts b/samples/react-feedback-sidebar/src/webparts/feedback/components/feedbackWrapper/FeedbackWrapper.styles.ts
new file mode 100644
index 000000000..0999af34c
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/feedbackWrapper/FeedbackWrapper.styles.ts
@@ -0,0 +1,120 @@
+import { createUseStyles } from "react-tss/lib";
+
+export const FeedbackWrapperStyles = createUseStyles({
+ classes: {
+ FeedbackSection: {
+ background: "rgba(0, 0, 0, 0)",
+ animation: `$fadeIn 0.8s ease 0s 1 forwards`,
+ width: "100%",
+ position: "fixed",
+ top: 0,
+ left: 0,
+ height: "100vh",
+ zIndex: 9,
+ },
+ FeedbackWrapper: {
+ backgroundColor: "white",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "flex-start",
+ alignItems: "center",
+ position: "fixed",
+ top: 0,
+ right: 0,
+ height: "100vh",
+ zIndex: 9,
+ animation: `$scrollIn 0.8s ease 0s 1 forwards`,
+ maxWidth: "340px",
+ overflowY: "auto",
+ },
+ FeedbackWrapperRow: {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "flex-start",
+ alignItems: "center",
+ //margin: "0 32px",
+ width: "calc(100% - 32px * 2)",
+ "&.to-end": {
+ justifyContent: "flex-end",
+ paddingRight: "20px",
+ paddingBottom: "25px",
+ paddingTop: "100px",
+ marginLeft: "auto",
+ width: "initial",
+ },
+ "&.no-margin": {
+ margin: 0,
+ width: "100%",
+ },
+ "&.accordion-row": {
+ //backgroundColor: "#007DB3",
+ backgroundColor: "white",
+ flex: 1,
+ marginTop: "72px",
+ },
+ "&.loader-row": {
+ flex: 1,
+ position: "relative",
+ },
+ },
+ FeedbackWrapperClose: {
+ background: "transparent",
+ cursor: "pointer",
+ border: "none",
+ "& svg": {
+ width: "100%",
+ height: "100%",
+ fill: "#007DB3",
+ },
+ },
+ FeedbackWrapperTitle: {
+ fontWeight: "bold",
+ color: "black",
+ lineHeight: "36px",
+ marginBottom: "8px",
+ width: "100%",
+ },
+ FeedbackWrapperDescription: {
+ color: "#454D56",
+ lineHeight: "24px",
+ marginBottom: "32px",
+ width: "100%",
+ },
+ FeedbackWrapperList: {
+ listStyle: "none",
+ width: "100%",
+ paddingLeft: "0px",
+ margin: "0px",
+ },
+ FeedbackWrapperItem: {
+ width: "100%",
+ },
+ FeedbackSectionAccordion: {
+ padding: "0",
+ "& > button": {
+ borderTop: "none !important",
+ },
+ "& button > div": {
+ width: "100%",
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ whiteSpace: "nowrap",
+ },
+ "& button > svg": {
+ marginRight: "10px",
+ height: "20px",
+ width: "20px",
+ },
+ },
+ },
+ keyframes: {
+ fadeIn: {
+ from: { background: "rgba(0, 0, 0, 0)" },
+ to: { background: "rgba(0, 0, 0, 0.5)" },
+ },
+ scrollIn: {
+ from: { transform: "translateX(100%)" },
+ to: { transform: "translateX(0%)" },
+ },
+ },
+});
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/feedbackWrapper/FeedbackWrapper.tsx b/samples/react-feedback-sidebar/src/webparts/feedback/components/feedbackWrapper/FeedbackWrapper.tsx
new file mode 100644
index 000000000..8295bb360
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/feedbackWrapper/FeedbackWrapper.tsx
@@ -0,0 +1,126 @@
+import * as React from "react";
+import { useRef, useMemo, useCallback, useState, useEffect } from "react";
+import clsx from "clsx";
+import * as strings from "FeedbackWebPartStrings";
+import { buildFeedbackConfigFromPage } from "../../utils/SpHelper";
+import { FeedbackConfig, FeedbackWrapperProps } from "../../utils/Types";
+import { FeedbackWrapperStyles } from "./FeedbackWrapper.styles";
+import { Accordion } from "../accordion/Accordion";
+import { Image, ImageEnum } from "../image/Image";
+import { Loader } from "../loader/Loader";
+import { FeedbackForm } from "../feedbackForm/FeedbackForm";
+
+export const FeedbackWrapper = ({
+ onClose,
+ open,
+}: FeedbackWrapperProps): JSX.Element => {
+ const style = FeedbackWrapperStyles();
+ const [sections, setSections] = useState-
+
+
+ );
+};
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/image/Angle.tsx b/samples/react-feedback-sidebar/src/webparts/feedback/components/image/Angle.tsx
new file mode 100644
index 000000000..eca2e139c
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/image/Angle.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+export const Angle = (props: React.SVGProps
+
+
+
+
+
+
+ {SectionsList.length > 0 && (
+
+
+ {SectionsList.length > 0 ? (
+ + {strings.FeedbackWrapperTitle} +
++ {strings.FeedbackWrapperDescription} +
+
+
+ ) : (
+
+
+ )}
+
+
+ )}
+ - {SectionsList}
+);
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/image/StarLeft.tsx b/samples/react-feedback-sidebar/src/webparts/feedback/components/image/StarLeft.tsx
new file mode 100644
index 000000000..39a592d78
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/image/StarLeft.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export const StarLeft = (props: React.SVGProps
+
+ );
+};
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/rate/Rate.styles.ts b/samples/react-feedback-sidebar/src/webparts/feedback/components/rate/Rate.styles.ts
new file mode 100644
index 000000000..589c37edf
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/rate/Rate.styles.ts
@@ -0,0 +1,44 @@
+import { createUseStyles } from "react-tss/lib";
+
+export const RateStyles = createUseStyles({
+ classes: {
+ rate: {
+ border: "0",
+ boxSizing: "border-box",
+ margin: "0",
+ outline: "none",
+ padding: "0",
+ },
+ rateList: {
+ listStyle: "none",
+ alignItems: "center",
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "flex-start",
+ },
+ rateItem: {
+ height: "18px",
+ width: "9px",
+
+ "&.margin": {
+ marginRight: "9px",
+ },
+ },
+ rateInput: {
+ display: "none",
+ },
+ rateLabel: {
+ cursor: "pointer",
+ height: "100%",
+ width: "100%",
+ },
+ rateIcon: {
+ fill: "#EDF4F7",
+ //height: '100%',
+ //width: '100%',
+ "&.checked": {
+ fill: "#007DB3",
+ },
+ },
+ },
+});
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/rate/Rate.tsx b/samples/react-feedback-sidebar/src/webparts/feedback/components/rate/Rate.tsx
new file mode 100644
index 000000000..ebeaeddf1
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/rate/Rate.tsx
@@ -0,0 +1,76 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { RateStyles } from "./Rate.styles";
+import { Image, ImageEnum } from "../image/Image";
+import clsx from "clsx";
+import { RateProps } from "../../utils/Types";
+
+const handleRate = (value: number): number => {
+ if (value < 0) {
+ return 0;
+ } else if (value > 5) {
+ return 5;
+ }
+
+ return value !== Math.floor(value) ? Math.floor(value) + 0.5 : value;
+};
+
+export const Rate = ({
+ onRate: onRateProp,
+ rate,
+ name,
+ className,
+ rateLenght,
+}: RateProps): JSX.Element => {
+ const style = RateStyles();
+
+ const [currentRate, setCurrentRate] = useState
+
+ );
+};
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/textArea/TextArea.styles.ts b/samples/react-feedback-sidebar/src/webparts/feedback/components/textArea/TextArea.styles.ts
new file mode 100644
index 000000000..ff6e726ff
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/textArea/TextArea.styles.ts
@@ -0,0 +1,14 @@
+import { createUseStyles } from "react-tss/lib";
+
+export const TextAreaStyle = createUseStyles({
+ classes: {
+ textarea: {
+ color: "#454D56",
+ lineHeight: "16px",
+ border: `1px solid #454D56`,
+ borderRadius: "4px",
+ //padding: "16px",
+ width: "90%",
+ },
+ },
+});
diff --git a/samples/react-feedback-sidebar/src/webparts/feedback/components/textArea/TextArea.tsx b/samples/react-feedback-sidebar/src/webparts/feedback/components/textArea/TextArea.tsx
new file mode 100644
index 000000000..4af091d8e
--- /dev/null
+++ b/samples/react-feedback-sidebar/src/webparts/feedback/components/textArea/TextArea.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { useState, useEffect, useCallback } from "react";
+import { TextAreaStyle } from "./TextArea.styles";
+import clsx from "clsx";
+import { TextareaProps } from "../../utils/Types";
+
+export const TextArea = ({
+ className,
+ onChange: onChangeProp,
+ value: valueProp,
+ placeholder,
+}: TextareaProps): JSX.Element => {
+ const style = TextAreaStyle();
+
+ const [value, setValue] = useState(valueProp);
+
+ useEffect(() => {
+ setValue(valueProp);
+ }, [valueProp]);
+
+ const onChange = useCallback- {List}