A slice to display the application process (in steps) and course dates.

With this component you can display different steps in paragraphs in one column, and the start dates in the other. Please note that each new paragraph will also come with the paragraph big number on the side. You can also use it for any course dates, as long as we have it in the DB. This slice doesn't come with a Title and Subtitle: if you want to give it a title, use the Title component before this slice. See the Title component's documentation for details on how to use that slice.

IMPORTANT

We can add any course we want, as long as we have in the DB. BUT, if there's new courses that are not included in the current dropdowns, you need to let the dev team know, and we will add the option for the new course for you on Prismic. Let the dev team know if you change / add ANY of the course names from the Admin!

CURRENT AVAILABLE COURSES:

1) ACADEMIES

• Cyber Security
• Full-Stack Web Development
• Full-Stack Web Development - Part Time

2) BOOTCAMPS

• JavaScript Beginner Bootcamp
• React Intermediate Bootcamp
• Redux Intermediate Bootcamp
• Databases & API’s Advanced Bootcamp

3) WORKSHOPS:

• Admissions Training Camp
• Ethisch Hacken
• Leren Programmeren
• Taste of Tech (NL)
• Bouw je eigen AI

Limits

• NEVER select more than one course from the dropdown! You should only select one course you want to display the dates for. If you need to display dates for multiple courses, add one ApplicationProcess slice per course.
• The first column will have the length of the paragraphs you decide to pass in. So make sure to add a balanced amount of text between the 2 columns, so it will look good. The other side will always have the academy dates, so the second column will always hava a similar height. Make sure to keep it in mind when adding content to the first column.
• It will only display the next 5 course dates.
• Make sure to add at least 3 steps / paragraphs

Do's:

• TITLE COMPONENT: Add a Title component above it, like in the examples. You can color portions of your title with either red or blue. To do so, nest the word(s) you want to color with “(red)” if you want the word to be red, or “(blue)” for blue. For example, if you want to write “Become a developer” and you want the word “developer” to be red, write "Become a (red)developer(red)."

Don'ts:

Props:

1. bootcamp

• Name: bootcamp
• Type: String
• Description: If you want to display this component for a certain bootcamp, make sure to insert the right name through this dropdown. Leave it empty for the Academy start dates.

2. academy

• Name: bootcamp
• Type: String
• Description: If you want to display this component for a certain bootcamp, make sure to insert the right name through this dropdown. Leave it empty for the Academy start dates.

3. workshop

• Name: bootcamp
• Type: String
• Description: If you want to display this component for a certain bootcamp, make sure to insert the right name through this dropdown. Leave it empty for the Academy start dates.

4. Title of the first column

• Name: titleColumn1
• Type: String
• Description: The title at the top of the first column (e.g. "The admissions process:")

5. Subtitle of the first column

• Name: subtitleColumn1
• Type: String
• Description: The subtitle at the top of the first column (e.g. "These are the steps you will go through.")

6. Title of the second column

• Name: titleColumn2
• Type: String
• Description: The title at the top of the second column (e.g. "Pick a date:")

7. Subtitle of the second column

• Name: subtitleColumn2
• Type: String
• Description: The subtitle at the top of the second column (e.g. "You can always change this later.")

8. Image (OPTIONAL)

• Name: image
• Type: String
• Description: You can change the tiny image from the Humaans collection. See available options under the "STYLEGUIDE - Illustrations and Icons" folder in this documentation. Leave this empty if you're happy with the yellow-shirt one.

9. Button link (OPTIONAL)

• Name: buttonlink
• Type: String
• Description: You can change the link of the "Apply" button. The default is my.codaisseur

Repeatable:

Each column has a repeatable area. The first has the paragraphs (or steps), each with title and text, the second has the academies, each with a start and an end date.

Paragraphs (You need to fill these):

1. Id

• Name: id
• Type: Number
• Description: Scalar number, starting from 1. Needed for the code, and it's also the number showing on the side of the steps.

2. Title

• Name: title
• Type: String
• Description: The title of a single paragraph

3. Text

• Name: text
• Type: String
• Description: The text of a single paragraph

Academies (IMPORTANT: props marked with { } automatically come from our DB --> you don't need to fill them in!)

{1. Id}

• {Name: id }
• {Type: Number}
• {{Description: Scalar number, starting from 1. Needed for the code, and it's also the number showing on the side of the steps.}}

{2. Start Date}

• {Name: startDate}
• {Type: String}
• {Description: Start date of eaxch academy}

{3. End Date}

• {Name: endDate}
• {Type: String}
• {Description: End date of eaxch academy}

{4. Academy Almost Full (optional)}

• {Name: almostFull}
• {Type: Boolean}
• {Description: If set to true, the small text "almost full" will appear below the "apply now" button.}

{5. Academy Full (optional)}

• {Name: full }
• {Type: Boolean}
• {{Description: If set to true, the card will still be visible but the button will be disabled and showing the "full" text.}}