oscafrica / osf-website Goto Github PK

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Dropdown and SearchBar component similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Processing Options components similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Tab components similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Text Box & Pagination components similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Selector components similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Date Picker & Icons components similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

Feature: We need to design the travel page.
Find the new design here

Guidelines:

In the repository, find the 2023 sub-folder in src. Please do not change files that are not related to this feature except when updating configurations or fixing a bug.
In the components folder, find the 2023 sub-folder and create the components you will need for the travel page.
We use Tailwind CSS; kindly complete the designs with Tailwind only.
Import the components where needed in the pages sub-folder of the 2023 folder.
If possible, write tests; however, this should not hinder you from contributing as the team regularly updates tests.
Special Note: Take note of mobile designs. We prefer a mobile-first approach.

If you have any questions, ask @BolajiAyodeji or @Princesso

Thank you

The design team has built the Style guide which can be found here.

The style guide consists of Typography and Components.

Build a demo typography page similar to the design and document all classes used in a typography.md file

Build the typography for all font styles and sizes with great focus on responsiveness.

Add the required patterns, backgrounds, sliders, adequate element sizes, and relevant fixes to the header component.

Setup and document tests for all components. These tests should test the functionality of the app and mimic how it will be used by end-users based on the design prototype.

Many integration tests. No snapshot tests. Few unit tests. Few end to end tests.

Proposed tools: Jest or Cypress

Useful guide(s):

• https://reactjs.org/docs/testing.html
• https://www.gatsbyjs.org/docs/testing-react-components/
• https://flaviocopes.com/react-testing-components/

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Pagination component similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

The design team has built the Style guide, which can be found here.
This style guide consists of Typography and Components.

Build a demo components page similar to the design and document all classes used in a components.md file

Build all components with great focus on all states, responsiveness, and experience as seen in the design. (The final component page should use the implementation in #13)

Update

We have further broken this issue into smaller tasks for ease and efficiency; we now have 10 sub-issues for each component in this issue. You can pick one and ensure to use one component demo page for documentation and preview.

• #14: Button
• #15: Input Fields
• #16: Date Picker & Icons
• #17: Text Box & Pagination
• #18: Checkboxes
• #19: Radio Button
• #20: Selector
• #21: Text Link
• #22: Processing Options
• #23: Tab

There seem to be test failing due to some issue with the Jest version ^27.1.0. Can you help look into this @vimoppa, please?

Setup the following Storybook Addons to increase productivity.

• Storysource: Addon to view story code to paste it in your project
• Docs: Addon for automatic documentation generation from stories

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Text Link components similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Checkboxes components similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

Page Affected
https://festival.oscafrica.org/scholarship/

Explanation
In the field that says "Do you hold a valid passport?", the next line says, "Note: For locals, please indicate with "Not Applicable", if you are living Nigeria."
the word "in" is missing between "living" and "Nigeria".

This Issue relies on the completion of #2, #3 and #4.

Build a replicate of the header section in a component as seen in the website's design prototype

• Build and style the Navigation component
• Build and style the header component
• Add patterns to the background
• Make the Navigation fixed
• Ensure the pattern positions are accurate on scroll and fixed

This Issue relies on the completion of #2, #3, #4, #6 and #9

Build a replicate of the About section in a component as seen in the website's design prototype

• Build and style the section
• Fetch media asset from cloudinary

Feature: We need to design the sustain page.
Find the new design here

Guidelines:

In the repository, find the 2023 sub-folder in src. Please do not change files that are not related to this feature except when updating configurations or fixing a bug.
In the components folder, find the 2023 sub-folder and create the components you will need for the sustain page.
We use Tailwind CSS; kindly complete the designs with Tailwind only.
Import the components where needed in the pages sub-folder of the 2023 folder.
If possible, write tests; however, this should not hinder you from contributing as the team regularly updates tests.
Special Note: Take note of mobile designs. We prefer a mobile-first approach.

If you have any questions, ask @BolajiAyodeji or @Princesso

Thank you

Set up the workflow of using Tailwind with our components and overriding Tailwind default properties.

• Set up Tailwind base styles and prefixes to be used to build our components
• Configure the workflow of using Tailwind to build our custom CSS classes or partials

Useful resources:

• https://tailwindcss.com/course/customizing-your-design-system/
• https://tailwindcss.com/docs/configuration
• https://tailwindcss.com/docs/theme

Create a drive with all media assets and link(s) to all designs and prototypes.

Run lighthouse tests and fix/improve all relevant performance and accessibility errors skipped during development.

This Issue relies on the completion of #2, #3, #4 and #6

Build a replicate of the CTA section in a component as seen in the website's design prototype

• Build and style the CTA section

Add theme font family in tailwind config and update across the website excluding 2020.

This issue relies on the completion of #2.

Build the Layout, spacing and grid styles across all devices.

• Document your work
• Classes used should follow the configuration set in #2

Feature: Add the navigation bar for both mobile and desktop screens.
Design Link: Find the design here
Guidelines:

• In the repository, find the 2023 sub-folder in src. Please do not change files that are not related to this feature except when updating configurations or fixing a bug.
• In the components folder, find the 2023 sub-folder and create the nav.js file.
• We use Tailwind CSS; kindly complete the designs with Tailwind only.
• Import the nav item where needed.
• If possible, write tests, however, this should not hinder you from contributing as the team regularly updates tests.

Special Note: Take note of mobile designs. We prefer a mobile-first approach.

If you have any questions, ask @BolajiAyodeji or @Princesso

Thank you

Update nav component to have a transparent background, orange background on scroll, and fixed on mobile open.

The become a sponsor button is leading to a 404 page, it is meant to open the PDF with the present sponsorship details

Problem: The current link on the call for speakers on the home page is empty

Solution- Add this link: https://www.papercall.io/oscafest23

Where to add link:

If you have any questions, ask @BolajiAyodeji or @Princesso

Thank you

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Feedback component similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

So I went through the website and realized the buttons don't have any interaction states(hover, pressed, disabled, etc). It would look cooler(because its already cool) if simple animated interactions can be added.
I was wondering if this is something I can work on as my first open-source contribution.

Fix: The design for the homepage has been updated. See what it looked like here.
Find the new design here

Guidelines:

• In the repository, find the 2023 sub-folder in src. Please do not change files that are not related to this feature except when updating configurations or fixing a bug.
• In the components folder, find the 2023 sub-folder and create the components you will need for the home page.
• We use Tailwind CSS; kindly complete the designs with Tailwind only.
• Import the components where needed in the homepage file in the pages sub-folder of the 2023 folder.
• If possible, write tests; however, this should not hinder you from contributing as the team regularly updates tests.

Special Note: Take note of mobile designs. We prefer a mobile-first approach.

If you have any questions, ask @BolajiAyodeji or @Princesso

Thank you

test

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the button components similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

Create a Cloudinary account, move all media assets to the cloud and document Cloudinary API usage for easy access.

The design team has built the Style guide, which can be found here.

This issue is a chunk of #4, ensure to check it first.

• Build the Radio Button components similar to the design and document all classes used
• Build with great focus on all states and responsiveness.

This issue relies on the completion of #7

Setup continuous integration to keep track of all tests and coverall to give a coverage report of how much of our code is being tested.

Make navigation component fixed and sticky upon scroll.

Feature: We need to design the schedule page.
Find the new design here

Guidelines:

• In the repository, find the 2023 sub-folder in src. Please do not change files that are not related to this feature except when updating configurations or fixing a bug.
• In the components folder, find the 2023 sub-folder and create the components you will need for the schedule page.
• We use Tailwind CSS; kindly complete the designs with Tailwind only.
• Import the components where needed in the pages sub-folder of the 2023 folder.
• If possible, write tests; however, this should not hinder you from contributing as the team regularly updates tests.

Special Note: Take note of mobile designs. We prefer a mobile-first approach.

If you have any questions, ask @BolajiAyodeji or @Princesso

Thank you

Update the header component and add the play/stop video button.