smartcontractkit / blockchain-ecosystem-map Goto Github PK

• Setup colour foundation in global CSS
• Setup storybook story to display the colour and their names

Figma: https://www.figma.com/file/Ho05S7qFYkewyfQVA3jIhf/Ecosystem-Map?node-id=9041%3A31956

AC:

• Will make use of the timeline icon component
• It will be hidden for accessibility (aria-hidden)
• It will accept a set of "names and icons"
• It will accept an "current" property to set icon as current
• It will look and feel as the figma design
• It will have a storybook story
• It will be added to the "chapter" component

Currently the navbar "hides" the chapter when the user scrolls down.

It would be great it the hiding and showing would actually have some smooth animation and not happen immediately:

• Add smooth transition when chapter are hidden
• Add smooth transition when chapter are shown

Steps to reproduce:

• Access the site
• Scroll down
• Open one of the section or subsection

What should happen:

• The selected heading should open, but there should be no SCROLL change

What happens:

• The app scrolls and jumps when I open a new heading.

Steps to reproduce:

• Open the app
• Scroll manually a littl
• Click on one of the heading (eg develop)

What should happen:

• The app should scroll and the develop heading should be in view

What happens:

• The app scrolls but the develop heading is hidden behind the navbar

Browsers: Latest Chrome

To Reproduce Steps to reproduce the behavior:

1. Go to the site
2. Open one of the accordion or section
3. close it

What happens:

• The URL keeeps the last opened section

Expected behavior A clear and concise description of what you expected to happen.

• The URL should NOT have any ID as all accordions are closed

NOTE: THis need to be solved twice. When you CLOSE a section and when you CLOSE an individual sub section! Both have code that should be updated

AC:

• Create a banner section that looks and feel like the figma design
• Add the banner directly in the homepage of the site
• Ensure the banner and the page have the correct margin

Figma: https://www.figma.com/file/Ho05S7qFYkewyfQVA3jIhf/Ecosystem-Map?node-id=9024%3A33923

AC:

• Create one yaml file for the section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

AC:

• Create one yaml file for the section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

Run the application through lighthouse and fix the errors in the "accessibility section"

AC:

• Run lighthouse locally and fix all the issue on the "performance" section
• Add a description of what was fixed in the PR
• Add a description of what was NOT fixed in the PR

When I first access the site, I would like the first entry "general Learning resources" to be opened to help people to understand that each section includes more entries.

AC:

• When I load the app with no ID specified in the URL, The general learning resources should open (we can append it to the URL if necessary).
• If I just close all sections (and therefore have no ID left), the "general learning resources" should NOT open

AC:

• The accordion component will look like the figma design
• The accordion component will take 100% of the width
• The component will have all the states provided in figma
• The accordion will include a "content" area that will be used to add other component within it
• The component will have an Expanded prop
• The component will have the correct AA definition for an accordion
• The component will have a storybook story

Figma: https://www.figma.com/file/Ho05S7qFYkewyfQVA3jIhf/Ecosystem-Map?node-id=9041%3A32122

NOTE: this will NOT include the progress bar

AC:

• It will look and feel like the figma design
• It will be sticky to the top
• It will display a currently active state (see "review UI page")
• It will "hide" heading if the page has been scrolled
• It will have the value hardcoded on it for now
• It will trigger a click event with the name of the "topic" when a button is clicked
• The component will have a storybook story

Figma: https://www.figma.com/file/Ho05S7qFYkewyfQVA3jIhf/Ecosystem-Map?node-id=9041%3A32122

The section (eg Deploy) has a couple of issues:

• It is not fully clickable: The full card should be clicable to open and not just the space adjacent to the heading
• It does not have a hover state: The card does not show a visual hover state. Please provide one

AC:

• Create one yaml file for the section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

AC:

• The component will look and feel as the "timeline icon" in figma
• The component will have 2 states
• The component will have a storybook story

Create a MIT license within the project.
Use SmartContract Inc. as the business name

AC:

• The card will have two size (small and large)
• The card will have ALL the active states shown in figma
• The card will have a storybook to story

Figma: https://www.figma.com/file/Ho05S7qFYkewyfQVA3jIhf/Ecosystem-Map?node-id=9041%3A32122

The C+ image is broken

Crypto link on the homepage should link "out" to the crypto homepages

AC:

• Create one yaml file for the section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

AC:

• Follow the figma design
• Has a storybook story
• Should be accessible
• Should NOT include the timeline!
• it will accept a property to define the "current" active heading

As an user I would like the currently expanded section to be saved in the URL, so that when I share the link in the future (when implementing Social share), my friends will be able to open the map on the same location that I was investigating.

PR:

• Save the current heading in the URL
• Save the current expanded section in the URL
• Make sure that accessing the a link with section and heading selected scroll nicely to the right position (add some smoth scrolling)

• Add storybook to the project
• Load same setting used in developer hub

AC:

• Create one yaml file for the section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

NOTE: All the site will be implemented in just one page, so there will not be any actual navigation, just same page heading navigation.

AC:

• The component will look like the figma component
• The component will have all the 4 states as displayed in figma
• The component will have a storybook story
• Implement the SVGR and SVGO to load and optimize the svg.

Figma: https://www.figma.com/file/Ho05S7qFYkewyfQVA3jIhf/Ecosystem-Map?node-id=9041%3A32122

Note: You can name it whatever you want

AC:

• It will have a expanded and collapsed state
• It will look like figma
• It will have a storybook component
• Research the best accessible approach for this (either list or tab, or whatever you think right,b ut do proper research please)
  

Ac:

• Add information on how to run the project
• Add information on how to contribute on the project

As a developer I would like to have access to a functionality that will help me determine what is the current section in the ecosystem map design.

This is a feature needed for a couple of components (navbar, timeline, chapter etc)

Note: this feature needs to be built using the "interseptionObserver".

AC:

• If no Headings are in the viewport, "current" should NOT be set
• If the user scroll and an heading is in view, that heading should be set as "current"
• If more than one heading are visible on the screen, the topmost should be the current.
• if a section is displayed, but the heading itself is hidden, that heading is NOT going to be current anymore.

Currently both the sections and chapters are H3.

• Change the sections to be h4 and leave the chapter to be H3.

AC:

• Reduce the paddings across the app
• Reduce the margin across the app
• On mobile view, hide the paragraph of the main section and reduce the spaces to take less space

AC:

• Create one yaml file for the section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

AC:

• Create one yaml file for the section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

AC:

• PR template to update a yaml (resource)
• Issue template to raise a bug or ask for new resources

It is very common in current development for horizontal meny that have more entry to be shown to actually have a settle shadow on the side to inform the user of that.

An example can be found here (open on mobile screen size): https://commons.m.wikimedia.org/wiki/Special:MediaSearch?type=image

AC:

• If the screen is LARGE and can fit all navbar entry, do nothing
• If the screen is small and cannot fit ALL the navbar, show the shadow on the right hand side
• If the navbar is scrolled all the way to the right and there are no more entry, do not show the shadow anymore

Add an SEO component to manage all metadata

• Add the module in the app
• Add known information or leave it blank
• Add a "social image" (screenshot of the main site for now)

AC:

• The bar will be applied to the Navbar component
• The progress bar will aligns with the active state (this initially can align to the middle of the button) - so if active is Sectrure, the progress bar will be right below secure
• The component will have a storybook story

NOte: this ticket DOES NOT include the functionality to calculate the active entry!

Figma: https://www.figma.com/file/Ho05S7qFYkewyfQVA3jIhf/Ecosystem-Map?node-id=9041%3A32122

Implement Google Analytics Tracking using "https://www.npmjs.com/package/react-gtm-module"

• Add module
• Add a component that loads the Tracking
• Create an environment variable for the tracking (call it NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING)
• Create an environment.example file with the above environment variable

Run the application through lighthouse and fix the errors in the "performance section"

AC:

• Run lighthouse locally and fix all the issue on the "performance" section
• Add a description of what was fixed in the PR
• Add a description of what was NOT fixed in the PR

AC:

• Load the JSON in the main app
• Redner the full page using the JSON

NOTE: The chapter information may not be available within the JSON (get started, etc). So we are ok for now to hardcode them in the Main app if necessary or create a small JSOn that includes them (if we create a json we can use it to also create the navbar)

AC:

• Create one yaml file for the section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

AC:

• Create a yaml including the blockchain name and id (Id can just be a camelcase of the name)
• Create a component that look like the figma design
• Use flex to fix as many cards as possible in one row
• If too many cards are available, wrap to a second line
• Use the correct HTML semantic (list)

Please improve the section component to provide a better UX.

AC:

• When a chapter component is expanded, the first section of that chapter should expand
• When a section within a chapter is opened, the chapter should show as "expanded"
• When I close ALL sections within a chapter, the chapter should show as "not expanded"
• When I open a different section in a new chapter, the previous chapter should close
• The aria-expanded should be true only if the chapter is expanded
• The aria-disabled should not be present

https://thisdot-labs.slack.com/files/U026HGFNB41/F03C08DGW8G/screen_recording_2022-04-13_at_9.21.36_am.mov

• Setup typography global styles
• Make sure to use Classes and not the HTML elements
• Create a storybook with the foundation typography

Figma: https://www.figma.com/file/Ho05S7qFYkewyfQVA3jIhf/Ecosystem-Map?node-id=9041%3A31991

• go to the site
• click on a "subsection" ( eg general-learning-resources)
• the id shows in the URL
• now click on a "section" (eg Fund)
• the "exchange" subsection will open automatically

What should have happen:

• The Exchange ID should have replaced the URL

WHat happen

• no changes happen in the URL

AC:

• Create one yaml file for the Learn section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

Steps:

• Click tabs to access the sections (DO NOT USE THE MOUSE IN THIS ISSUE)
• reach the first sub-section "General Learning Resources"
• Click tab

What should have happened:

• The next focused item should be the next sub section "3rd Party Learning Journeys" as the first was closed

What happened

• The element that is actually focused is the first entry of the first section even if it is actually HIDDEN!

NOTE: there may be some issue with the current aria roles assigned. Check that again and try to isolate the issue

AC:

• Create one yaml file for the section
• Each Yaml will include the title and the icon to show on the section
• The information should be the same displayed on the main figma https://smartcontractecosystem.com/

Currently the design does not allow all the crypto to fit on one line and it look quite bad. It would be great to make all card fit on one line

AC:

• Change the large card with to 8.75rem to fit the cards, or change the flex definition of the crypto component to allow all cards to fig on one line for now
• Make sure the changes do not allow 100 cards to fix on one row.. just the current number, more than this should go to 2 lines.