inland-empire-software-development / main Goto Github PK

This component is almost identical to #6

This component will require that you create a fix component that floats on the left hand side of the desktop version of the site. Icons can be pulled from FontAwesome, which our project is currently using. The phone icon should be linking to the phone number found in the footer, the email icon should open an email client pointing to the email found in the footer and the message bubble should open a contact form. That contact form will be a separate component. In the meantime, you can make it so that when you click on the button a function is fire that prints a message to the console "placeholder contact button".

Components that require updating:

• Global script for all links

Tech to be used:

• JS

What is the current behavior: As of right now, external links and internal links are not distinguishable.

What is the new behavior: All external links within the content should have an icon that lets the user know they will be going outside of the IESD network when hovered. Icon should only be visible when external link is hovered on.

Example:

Submission information [For PR]:

All Submissions:

• The commit message follows our guidelines
• Testing steps have been added to this issue or the PR for this issue
• Submission has been tested in all supported browsers

New Feature Submissions:

• Code gone through a code review by at least one other person
• Code has been locally linted yarn lint

When I click on it, it does not respond.

We need a modal component to open up on the screen for different purposes. It can be fixed, dead center and only take up the space required by the contents within it. We also need to make sure that whatever we drop in, like an iframe or any content is also centered.

Example use case: We will be using this for the sponsorship component - we will be dropping in an iframe for donation payments via WePay.

Notes: Ideally, you can wrap whatever content goes in to the modal in a div with a class that will make sure its all centered within the modal.

During development, you can use this iframe to fill the modal:

<iframe frameborder = "0" height="1100" scrolling="no"  src = "https://give.donatekindly.org/ie544/makedonation/donation/c711001e-0442-4c13-adeb-feb07e121807"  width="560" ></iframe>

Desktop

Mobile

Some profile pictures for past speakers are needed, as well as preferred titles. A placeholder iesd logo currently appears if no photo is provided. Also, I have included the name of the talk in place of a title.

Per Lloan, so that it can be added to the site

https://docs.google.com/document/d/1mSqbeNSfP83vv-tDY0ZMyM_aZmPrUvCJn2vJHxFUYGM/edit

The Success Stories section displays the excerpt but does not have a link to view the complete post.

This component has a light background that can be found within the static folder. There should be 4 columns for each row. There can initially be 1 row, the second row in the image is for informational purposes. Each column should be responsive and equal in width to the other columns - Calcite allows for this quite easily. Search in the documentation under Grid > Groups

This is a complex component. It has a couple of moving parts that make it complex.

There are 3 parts to this component:

• series events (omit for v1)
• single events (omit presented by text)
• event timeline

Data you need from Meetup.com for each event:

• date
• time
• title
• link to event

This will require that you check Meetup to see if we have a series going on. However, for v1, we might just omit this section and focus on the single events. Retrieve all events for the current month and render the 4 upcoming events. The timeline will require that you render a circle for each event and their placement depends on the day of the event. In the image below, May is at the top and April is at the bottom. An event that is on April 16 will be about halfway in between those. An event that happens on April 28th would be much closer to the May text. When you hover on any of these, it should have a hover state (fills with gradient color) and tool tip has the date for the event. If user clicks on it, the 4 rendered events should lead with the event clicked and the 3 events right behind that one. If there are only 2 events, render only 2 events.

Components that require updating:

• New component

Tech to be used:

• React

What is the current behavior:
Currently, when a user visits the IESD website there is no way for them to reach our social medias.

What is the new behavior:
Ideas:

• Add new menu items to the navbar that takes user to our social medias
• A side nav that contains just our social medias, like this:

Submission information [For PR]:

All Submissions:

• The commit message follows our guidelines
• Testing steps have been added to this issue or the PR for this issue
• Submission has been tested in all supported browsers

New Feature Submissions:

• Code gone through a code review by at least one other person
• Code has been locally linted using the command yarn lint

Components that require updating:

• all

Tech to be used:

• ESLint

What is the current behavior: Several errors are showing up because of formatting errors.

What is the new behavior: Make sure all ESLint errors are addressed and that the compiler doesn't show linting errors.

Submission information [For PR]:

All Submissions:

• The commit message follows our guidelines
• Testing steps have been added to this issue or the PR for this issue
• Submission has been tested in all supported browsers

New Feature Submissions:

• Code gone through a code review by at least one other person
• Code has been locally linted yarn lint

Need to collect information for success stories.

I created a file called successStoriesData.js that will be a part of the PR for issue #19 Component: Success Stories. The file has a JavaScript object that contains the following properties:

• imageURL (600x650 width x height)
• name
• title
• excerpt
• linkToStory

Components that require updating:

• Nav

Tech to be used:

• NextJS (React)

What is the current behavior: As of right now, mobile menu items with children do not open on touch. This bug is affecting the about and organization list items. While there, also adding padding to the "+" icon so that its a bit farther from the text, maybe 5-10px away from the left side.

What is the new behavior: Tapping on a nav item on mobile with a child should show the children.

Submission information [For PR]:

All Submissions:

• The commit message follows our guidelines
• Testing steps have been added to this issue or the PR for this issue
• Submission has been tested in all supported browsers

New Feature Submissions:

• Code gone through a code review by at least one other person
• Code has been locally linted yarn lint

This component is pretty simple. For v1, you can use 2 images for the right side. 1 layer is the actual image and the second layer is the cutout for IE. These can be found here: static/images/mobile/ie-background and static/images/mobile/ie-cutout

To get the padding required on both sides, Calcite uses 24 columns. You'll want your content to be within 20 columns and you can use pre-2 to move your content 2 columns from the left. Check out the Footer component to see how it's done there. Keep in mind this is a boxed layout, meaning our content won't go edge to edge, the width limit for our containers is 1440px.

When the site loads it throws this console error.

There is some error handling but it was just an afterthought. @lloan

This component has a light background, image can be found within static

Images can vary in size, as long as they're not bigger than 80% the height of the component. The spacing between each image will be the same, make sure to check out the spec sheet. This section needs to be draggable from left to right, etc. Don't worry about the drag element, that is addressed in #12

Images can come from an array OR you can get creative. For v1, images from an array are fine, we can manually put those in for now. In the future, we could make it where there is a folder where when we drop images, they show up in this component, sorted by date last modified, making the latest image show up first.

This component DOES NOT include the navigation, side bars and event section. For the navigation, side bars and event section, just leave a placeholder comment.

This component only needs the background image that can be found at static/images/desktop.

For mobile devices:

Omit the image on the left. This section requires the use of gradients. Gradient information comes from the sass/base/colors.scss. The classes yellow-red and blue-green are available for use.

The buttons should be configured to log to console when clicked. The message logged to the console should be the title of the button. These will then be, in a separate tasks, be connected to a payment merchant.

Components that require updating:

• Nav

Tech to be used:

• React

What is the current behavior: Navigation toggles the drawer on desktop, should only work on mobile items.

What is the new behavior: Navigation works like expected - desktop version doesn't toggle the offCanvas.

Great component for new contributors to work on or get experience with the workflow for this project. This component is essentially a whole section with a custom background. Initially, it was considered to make 'Community and Developer Excellence' to be set as text, but for the sake of simplicity and getting v1 out the door, let's use the image with the text embedded. Make sure the height of the component matches the design provided. The overall layout is boxed, meaning, this is not a full-width component. Look at other existing components to see how to get this started.

Background: (./static/images/desktop/developer-and-community-excellence.jpg)

The drag component is essentially a component with a subtle animation that lets users know that the section it shows up in can be dragged left to right. This component does NOT need to be able to interact with the actual section it is used in. It just needs to render the asset and have a subtle pulse animation. This is the most basic implementation of this idea. @johnathantng and @kellytlam have a few ideas, but for v1 we can use this. Down the road, as an enhancement, we can create a new issue and revisit this idea.

This asset will have to be created with CSS. Sphere with a gradient, 2 arrows on left and right side. Arrows are NOT of the same width, outermost arrow on each side is heavier. You can search CSS examples to get inspiration on how to build this. Should be built using pure HTML/CSS.

Once a user interacts with the section where this component is rendered, it should disappear (fade out).

Purpose of component is not to be used as a control but rather to inform the user that there is a dragging capability in the section it shows up on.

This component can be found on the hero component, it will float on the right hand side of the website. That means the position for this component is fixed on the screen and should align with the Contact Floating Bar (left). If you take this component, you should take that component as well. The icons found in this component can be pulled from FontAwesome - which our project is already using.

Component involves creating the navigation for the hero section. This will require you test mobile responsiveness AND creating the mobile version of the menu. Its a bit more involved than other components. You will utilize a lot of custom CSS and some JavaScript. We don't have a 'on scroll' state for the desktop navigation, but that can be part of v2 enhancements. For now, the focus is on getting a v1 ready for go-live.

Not sure if this is an issue that needs to be resolved or if it can be resolved. When you open the console log it says there are 25 violations.

If you remove the google map from the footer

the violations go away

the site info the the top left where the lock is located is not green. Says parts of site is not secure, such as images. I found this https://stackoverflow.com/questions/34273230/firefox-some-parts-of-this-page-are-not-secure-such-as-images-what-counts-a and we might have issues either regarding maps or some other external image we are referencing without the https at the beginning.

Need higher res assets for mission and goals section. As other sections are completed, they will most likely require the same issue.

This component has a couple of steps.

First, you need to create the actual component, so that you can pass in the data once you have it.
Second, you need to make an API call to Meetup.com to get the latest event. So which event is coming up soon? That's the event you need to get. You need the following data points:

• Date
• Time
• Title
• URL for event on Meetup.com (for button to link to)

For now, we can omit the 'Presented By' line of text as we don't have a custom implementation or connector between Meetup.com and our own event management system. That will be an enhancement down the line.

@tonynguyen111997 Can we add the missing logo on mobile so the head section isn't so bare?

Components that require updating:

• speakers
• operations
• community
• success stories

Tech to be used:

• React

What is the current behavior: Sliders are currently not intuitive. Users don't know if they can slide left or right. We currently have some text that talks about being able to slide, but we can do better.

What is the new behavior: Sliders should have some form of way to show users they can slide. Something like what we are doing for the blog component on mobile, see example:

We can have each component have its own position component for the slider, so users know how the sliders work.

Submission information [For PR]:

All Submissions:

• The commit message follows our guidelines
• Testing steps have been added to this issue or the PR for this issue
• Submission has been tested in all supported browsers

New Feature Submissions:

• Code gone through a code review by at least one other person
• Code has been locally linted yarn lint

All docs require updating.

Initial component to build other components off of.

This component shows you how to import images, use Calcite, interact with SASS files and structure your component file.

File can be found here: src/components/footer.js

Components that require updating:

• package.json
• packages that need updating

Tech to be used:

• yarn

What is the current behavior: We are on an outdated version of next.js - this new version includes a lot of upgrades we can benefit from. All packages should be updated.

What is the new behavior: We are on the latest version of next.js - all packages have been updated.

Submission information [For PR]:

All Submissions:

• The commit message follows our guidelines
• Testing steps have been added to this issue or the PR for this issue
• Submission has been tested in all supported browsers

New Feature Submissions:

• Code gone through a code review by at least one other person
• Regression testing has been done by at least one other person
• Code has been locally linted yarn lint

Backend blog functionality needs to be implemented with an API that can be used to access and display blog posts. Post information that should be made available to the frontend component is listed in #16, which requires this item for completion.

Issue with going to the site https://www.ie-sd.com
Does not happen when going directly to https://ie-sd.com

Screenshot of error attached.

Components that require updating:

• operations

Tech to be used:

• wp-api (api.iesd.com)

What is the current behavior: David Acosta, Project Manager, is missing from the operations team list.

What is the new behavior: David Acosta should show up on the operations list.

Submission information [For PR]:

All Submissions:

• The commit message follows our guidelines
• Testing steps have been added to this issue or the PR for this issue
• Submission has been tested in all supported browsers

New Feature Submissions:

• Code gone through a code review by at least one other person
• Code has been locally linted yarn lint

Create Error Boundary class components that will provide components that make API requests a fallback UI.

It would be nice to have the ErrorBoundary component accept a prop that lets you display a custom error message. Such as <ErrorBoundary message={'Something went wrong'} />

You can read up more about this at https://reactjs.org/docs/error-boundaries.html

This can be added after version 1.0

This component will be redesigned in the future, for now, this is our v1 for go-live.

This component will have two rows, one of organizers/contributors/etc and another for speakers that have given talks at IESD. The drag element will be addressed here: #12 - users will be pulled from an array of objects. Each object will have the user name, title and image. One array for speakers and another for organizers.

You can use a placeholder image @tonynguyen111997 can we add 1-2 images from those used on Ledkyb? Thanks!

Make sure to checkout the specs sheet

As of July 27th the performance score (according to Google's Lighthouse tool) is a 20 out of 100. I'm sure that as we continue to add more content to the website it will continue to get slower.

Things to consider:

• Lazy loading for images that are offscreen.
• Make sure images are properly sized

The lighthouse tool also suggests other ways we can improve the performance.

We can break this issue into smaller issues, such as an issue for implementing lazy loading.

Components that require updating:

nav
Tech to be used:
Next.js

What is the current behavior: As of right now, the nav items (EVENTS AND JOIN) just redirect you to the meetup page

What is the new behavior: Make them open a new tab when they are clicked in both mobile and desktop.

Submission information [For PR]:

All Submissions:

The commit message follows our guidelines
Testing steps have been added to this issue or the PR for this issue
Submission has been tested in all supported browsers
New Feature Submissions:

Code gone through a code review by at least one other person
Code has been locally linted yarn lint

If you would like this issue message Lloan(@lloan ) on slack

This issue is being open because of the warning "Each child in a list should have a unique "key" prop.". This issue is related to React, but you don't need to know React entirely to fix it.

If you pick this up, I'd recommend looking into the for loop map, and see how to get a unique value from it. Then, I'd look into how React components can be created dynamically with a loop.

The reason I say to look into map is because the component uses map to dynamically create the items in the list.

Or you can just straight up google the error lol

This component has a background image that can be found in the static directory. The social media icons can be omitted for v1. In the future, it would be a great enhancement, to include social media information for the member currently being featured. The way this component should work is that it takes a JS object that has x number of users with their information in it and render one on random on page load. The object would always have the following data:

• image url
• user name
• title
• excerpt
• link to full story

Make sure to checkout the spec sheet for additional information. Refer to the repo readme for additional information regarding the spec sheet. Gradients can be found in sass/base/colors.scss

Navbar on mobile screen shouldn't allow scrolling when menu is open.

Also, code needs to be cleaned up.

Navbar is also missing image at top left.
Menu needs arrow to indicate dropdown.

Simple component with a background and big button in the center. Button links to the meetup.com page for IESD to join us there - should open a new tab. We don't want to take the user away from the site or lose their place on the site. Image can be found under the static folder.

This issue does NOT INCLUDE implementing the LoadingIndicator component. Only the creation of the component.

EDIT: This component will be used for the events API

If the user has slow internet speeds, it is important to provide them with feedback that tells them that the site is currently retrieving information to be displayed.

Calcite does provide a loading indicator in main/sass/vendors/calcite/img/loader-ie9.gif, but I'm unsure about how this specific loading indicator would translate on the design of the site. You may have to take some initiative in regards to creativity.

Here's an example of what I am referring to:

Here's the article you can refer to - Just remember that only the component has to be made: https://www.basefactor.com/react-how-to-display-a-loading-indicator-on-fetch-calls

Components that require updating:

• mission
• goal

Tech to be used:

• Axios

What is the current behavior: As of right now, the data is hard-coded in to the code. It requires pushing up to GitHub and then Jenkins triggers a deploy.

What is the new behavior: The mission and goal component should pull its data from the IESD API so that in the future, anyone on the OPs team can update it without doing a code deploy, real-time.

Future Cleanup: Will need to update this to use GraphQL soon as the GraphQL plugin on WordPress supports option pages.

Submission information [For PR]:

All Submissions:

• The commit message follows our guidelines
• Testing steps have been added to this issue or the PR for this issue
• Submission has been tested in all supported browsers

New Feature Submissions:

• Code gone through a code review by at least one other person
• Code has been locally linted yarn lint

We need to create a blog post component that can be used to render blog posts from an API call. The API will return all the information required for each post:

• image url
• category
• title
• author
• date published
• short description
• slug (used for identification)

You can initially create a grid of 4 columns and 2 rows of blog posts - these two rows will act as one section that will be draggable from left to right. This component does not require you to create the drag component, that's addressed in #12 but it does require that you make this section draggable. Check if something is being used to make things draggable yet or implement it yourself.

This component is pretty simple. For v1, you can use 1 image for the left side. This image can be found here: static/images/desktop/goals-section-gradient - can provide the full asset without clipping if requested.

To get the padding required on both sides, Calcite uses 24 columns. You'll want your content to be within 20 columns and you can use pre-2 to move your content 2 columns from the left. Check out the Footer component to see how it's done there. Keep in mind this is a boxed layout, meaning our content won't go edge to edge, the width limit for our containers is 1440px.

Components that require updating:

• Nav

Tech to be used:

• React

What is the current behavior:
On mobile screens, when you click a nav item it will scroll down to its destination, but the nav menu will still be open. This leads to bad UX, because the user is forced to click off the nav in order to close the nav.

What is the new behavior:
On mobile, the nav should automatically close itself upon the user clicking a menu item that is not a dropdown item.

Submission information [For PR]:

All Submissions:

• The commit message follows our guidelines
• Testing steps have been added to this issue or the PR for this issue
• Submission has been tested in all supported browsers

New Feature Submissions:

• Code gone through a code review by at least one other person
• Code has been locally linted using the command yarn lint