SummaryTable

Component to display the survey summary in the form of a table

Params

• items: item[] // Item is object with {id, name, color, type: 'group' | 'section', points, total}

from grow-me.

Circle

Component to display a circle with text or icon inside.

Params

• text?: string
• icon?: string
• theme: Theme // object with colors and size of text, background, border

from grow-me.

Designs

ItemSquare

Component to display a single template or survey on the list

Params

• id: string // id of the template or the survey
• name: string
• groupsNumber: number
• sectionsNumber: number
• questionsNumber: number
• badge: { total: number; amount?: number } // numbers in dot on the top right side of the square
• theme: 'template' | 'survey' // theme to choose styles for the component, i.e. colors
• click: () => string // return id on click

from grow-me.

HeaderTitle

Component for display the view title

Params

• titleText: string
• theme: theme to choose styles for the component, i.e. colors, fonts

from grow-me.

ProfileDropdown

Component for display user data and available options

Params

• user: User
• theme: theme to choose styles for the component, i.e. colors, fonts

from grow-me.

Select

Component for select control

Params

• value: SelectOption
• options: SelectOption[]
• theme: Theme // theme to choose styles for the component, i.e. colors
• change: () => SelectOption // return selected option on change

from grow-me.

SurveyCounters

Component to display counters for a survey to show how many elements are inside

Params

• groupsNumber: number
• sectionsNumber: number
• questionsNumber: number
• theme: 'template' | 'survey' // theme to choose styles for the component, i.e. colors
• click: () => string // return id on click

from grow-me.

Tabs

Component to switch the routes by clicking on tabs

Params

• tabs: Tab[] // Tab is a object with { id: string; name: string; link: string }
• activeTabId: string // Id of currently active tab

from grow-me.

Group

Component to display group of sections

Params

• group: Group // Group is object with { id: string; name: string }
• theme: 'template' | 'survey'
• editMode: boolean // turn on/off edit mode to change the name of the group
• changeName: () => Group // callback when name of the group was changed

from grow-me.

Section

Component to display section with questions

Params

• section: Section // Section is object with { id: string; name: string }
• theme: 'template' | 'survey'
• editMode: boolean // turn on/off edit mode to change the name of the section
• changeName: () => Section // callback when name of the section was changed

from grow-me.

With single-select while filling the survey

With multi-select while filling the survey

With single-select while creating survey/template

With multi-select while creating survey/template

QuestionSelectGroup

Component to display, answer, and edit a group of questions with answers.
It's possible to add and edit questions, answers, and weight of both when editMode === true.
It's possible to answer questions when editMode === false.

Params

• questions: Question[] // Question is object with { id: string; phrase: string; answer?: string; weight: number }
• answers: Answer[] // Answer is object with { id: string; name: string; weight: number }
• multiSelect: boolean // To choose if question can have single or multiple answers selected
• editMode: boolean // false for filling survey, true for creating template/survey
• theme: 'template' | 'survey'
• addQuestion: () => void // when user click New Question button
• editQuestion: () => Question // when name or weight of the question was changed
• addAnswer: () => void // when user click on + button next to the answers
• editAnswer: () => Answer // when name or weight of the answer was changed
• selectAnswerQuestion: () => { questionId: string; answerId: string } // when user select answer for question (while filling survey) when multiSelect === false
• changeAnswerQuestion: () => { questionId: string; answerId: string; check: boolean } // when user check/uncheck answer for question (while filling survey) when multiSelect === true

from grow-me.

Aside

Component to display, edit our templates and is set to hover

Params

• aside: Aside // Aside is object with { id: string, name: string, active: boolean }
• theme: 'template' | 'survey'
• clickItem: () = > when user click on 'circle'

from grow-me.

Text question while filling the survey

Text question while creating template/survey

QuestionText

Component to display, answer and edit text question

Params

• question: Question
• textAnswer?: string
• long?: boolean // false for short (single-line) answer, true for long (multi-line) answer
• editMode: boolean // false for filling survey, true for creating template/survey
• theme: 'template' | 'survey'
• changeQuestion: () => Question // when name or weight of question was changed
• changeAnswer: () => string // when answer was changed

from grow-me.

Question to select single/multiple answers while filling the survey

Question to select single/multiple answers while creating template/survey

QuestionSelect

Component to display, answer, and edit question with single/multiple answers to select.

Params

• question: Question
• answers: Answer[]
• multiSelect: boolean // false for single-select, true for multi-select
• editMode: boolean
• theme: 'template' | 'survey'
• changeQuestion: () => Question // when name or weight of question was changed
• changeAnswer: () => Answer // when name or weight of answer was changed
• selectAnswer: () => Answer // when answer was selected while filling survey when multiSelect === false

from grow-me.

FillSurveyButton (one component for all buttons will be enough 😉 )

The button allows us to proceed to completing the survey

Params

• name: string
• clickToFill: () => when the user clicks on the button

from grow-me.

Button

Component to display button

Params

• name: string
• icon?: { id: string, side: 'after' | 'before' } // to set if button should have icon and on which side of the text
• click: () => void // callback when the user clicks on the button

from grow-me.

AddButton

Button with which we add new questions, sections and group to the template

Params

• name: string
• theme: Theme // theme to choose styles for the component, i.e. colors
• click: () => void // when the user clicks on the button

from grow-me.