hlxsites/aldevron

aldevron's Issues

Create articlecards Block

Feature Requirement:
Article Cards
User Story: Article cards block is used to author the image, main title, text link, description to show it as an article card.
It has 2 variations as of now.

1. Without sideline
   https://www.aldevron.com/
   
2. With sideline
   https://www.aldevron.com/campus
   
   Success Criteria:
   The component should be display as expected in Aldevron site, in desktop, tablet and mobile views.

Authoring guide:
Without sideline:-

1. Insert a table with three rows. (first row - full width, second & third row - 3 x 3)

2. In the first row, provide the name of the block along with the class name in brackets as shown here. "articlecards (outer)"

3. In the second row first column, provide the main title(only in first column - Ex - Recent News), image, text link, description. Repeat the same in 2nd and 3rd columns.
   Note: In Second row, each column must contain left side div content as shown in the below.
   

4. In the third row first column, provide the main title(only in first column - Ex - Recent Blog Posts), image, text link, description. Repeat the same in 2nd and 3rd columns.
   Note: In Third row, each column must contain right side div content as shown in the below.
   
   Ref authoring url: https://adobe.sharepoint.com/:w:/r/sites/HelixProjects/_layouts/15/Doc.aspx?sourcedoc=%7BC1FCFE29-A3EE-4097-8FBD-581FDE3BF3D7%7D&file=col-block-test.docx&action=default&mobileredirect=true

With sideline:-

1. Insert a table with three rows. (first row - full width, second & third row - 3 x 3)

2. In the first row, provide the name of the block in brackets as shown here. "articlecards"

3. In the second row first column, provide the main title(only in first column - Ex - Related News), image, text link, description. Repeat the same in 2nd and 3rd columns.
   

4. In the third row first column, provide the main title(only in first column - Ex - Recent Blog Posts), image, text link, description. Repeat the same in 2nd and 3rd columns.
   Note: In Third row, each column must contain right side div content as shown in the below.
   

5. ** Add the metadata table as shown below ** Sideline will not be shown if the below table is not added in the doc.
   

Template and hero banner bugs

This bug is related to early check on templates and hero bugs we are creating this ticket to fix those issues

We are creating the template to Blog page to create the blog issues. Here is the reference:

https://www.aldevron.com/blog

When we are checking the template issues we got to know that hero component is not working properly. That is the reason we have created this bug along with hero component.

Fixed the issue please go through this url: https://feature-template-hero-bugs--aldevron--hlxsites.hlx.page/blog/a-dialogue-on-timely-topics

Header- Lazy Loading

Hi Team,

I have noticed that there is a delay in loading the header while refreshing the page.

EDS Site:-

Create block for What's inside section for Whitepaper download pages

Summary

Create a new block to render the 'What's Inside' section of Whitepaper download pages as per below:

Create block for linkedin-connect

Summary

Create a new block to render the Linked Connect as per below:

Create RTE Block

Header--Mobile View-- Header menu should open in accordion mode and News should be in BOLD(font)

Hi Team,

While comparing the developed header block with the legacy site header block, I noticed two differences in the menu bar while the page is in mobile view.

1. The menu bar should be in accordion
2. The News Bar font should be in bold

Please have a glimpse at the below snapshot.

Footer-Mobile View- Footnote issue

Hi Team,

While comparing the developed Footer block with the legacy site Footer block, in mobile the footer footnote logo and text should be on the left side of the legacy site but it is centered in the EDS.

Please look in to the below SS

Create Hero Banner block

Feature Requirement:
Hero Banner
User Story:
We need this Hero banner block to use where ever, we need an image as background and half of the the right side of the block should contain an another background image with one heading, some description and one button.

Existing component example is in main page of the Aldevron site, above the contact-us section component.

Please find the reference : https://www.aldevron.com/

Success Criteria:
The component should be display as expected in Aldevron site, in desktop, tablet and mobile views.

Authoring guide

1. Insert a table with three rows. (first row - full width, second row 3 x 1)
2. In the first row, provide the name of the block along with the class name in brackets "Herobanner (right-content) ".
3. In the second row - provide the BG image.
4. In third row, provide title, description and button.
   

Forms issue on blog and news template

This issue is related to forms and news. We have to remove an outer class to fix the allignment issue

Create embed block for video display

Image Block implementation

Feature Requirement:
Imageshyperlink
User Story: This block will be used to author a single image with or without link.
ref link: https://www.aldevron.com/platforms/mrna-production

Success Criteria:
The component should be display as expected in Aldevron site, in desktop, tablet and mobile views.

Authoring guide:

1. Insert a table with two rows. (full width)
2. In the first row, provide the name of the block as "Imageshyperlink"
3. Add the image in the second field. Link is an optional field and can be used based on the requirement.
   

Header-Cart-Icon, Count and Total are missing

Hi Team,

While comparing the developed header block with the legacy site header block, I noticed that the Cart-Icon, Count and Total are missing in the header

Please have a glimpse at the below snapshot

Create table block with multiple variations

Authoring steps for Table block:-

1. Create a table with 2 rows then provide the name of the block in 1st row as "Table(heading-top, heading-left,outer)".
   

2. Insert new table in 2nd row with required number of rows and 5 columns.
   

3. Merge 1st row's 2nd, 3rd, 4th and 5th columns and add the text.
   

4. Then on the new table's 2nd row (created in step 3), merge column 2nd and 3rd. Rest shoud remain as it is.
   

5. Insert a table with 2 row's and 2 column's under the merged column( merged in step 4)
   

6. Merged the 1st row's column created in step 5.
   

7. Add data on the row's and column's as per requirement.
   

Authoring steps for Table block with variation:-

1. Create a table with 2 rows and Provide the name of the block in 1st row as "Table(heading-top,outer)".
2. Insert new table in 2nd row with required number of rows and 4 columns.
3. Add data on the row's and column's as per requirement.
   

Authoring steps for Table block with variation:-

1. Create a table with 2 rows and Provide the name of the block in 1st row as "Table(heading-left,outer,table-plain)".
2. Insert new table in 2nd row with required number of rows and 2 columns.
3. Add data on the row's and column's as per requirement.
   

@Kummu007 It's ready for QA.

Video Embed (YouTube)- Pause overlay issue

Hi Team,

I have noticed that there is a pause overlay popup appearing on the EDS site when the video is paused. Please look into the below snap.

Create block for Video Banner

Summary

Create a block for video banner as per below link:
https://www.aldevron.com/25th-anniversary

Footer-Mobile View- Footnote padding issue

Hi Team,

While comparing the developed Footer block with the legacy site Footer block, in mobile view for the legacy footer footnote padding is 10px but in the EDS it is 20px.

Please look into the below snap and do the needful.

vi

News template

This ticket is related to create a news template that can be fulfilled using the same json data and filter those data including dynamic sidebars and other things related to social share

Model Pop up for image

Create Footer Block

Create customer quote block

Feature Requirement:
Customer Quote:
User Story:
Need to create a customer quote block to render the customer feedback in the page.
example site link: https://www.aldevron.com/our-services/research-grade

Success Criteria:
The component should be display as expected in Aldevron site, in desktop, tablet and mobile views.

Authoring guide:

Insert a table with five rows having single column, or take four rows, if image is not required.

In the first row, provide the name of the block along with the class name in brackets as shown below.
"Sidebar-customerquote "

In the second row, provide the description and update the text style to italic if needed.

In the third row, provide the customer name.

In the forth row, provide the customer type.

In the fifth row, provide the image and save the doc.

And create another table below the main table and use it as Meta data table.
add the data as below table

Video Embed (YouTube)- Tooltip text and Play button color missing

Hi Team,

I have noticed that the play tooltip text and play button color are missing. Please look into the below snap.

Legacy play button:-

EDS play button:-

EDS play tooltip text:-

Legacy play tooltip text:-

Footer-Social Media Icons Issue

Hi Team,

While comparing the developed Footer block with the legacy site Footer block, identified a couple of issues which are mentioned below.

Issue-1:-

While the size is reducing, there is an alignment issue in the social media icons section.

Issue-2

When the page is in mobile view the icons should get shuffled like the legacy site but it's not happening in the EDS.

Image Hyperlink - Tooltip Text Issue

Hi Team,

I have noticed that when the mouse moves over the CTA the tooltip text appears on the screen. Please look into the below snap and do the needful.

Create Hero Banner Block

Hero -Mobile view/Text Alignment Issue

Hi Team,

I have noticed that there is a text alignment issue when the hero banner is in the mobile view.

Please look at the below snapshots.

Header-News Background color is missing

Hi Team,

While comparing the developed header block with the legacy site header block, I noticed a difference in the background color of the NEWS section in the header.

Please have a glimpse at the below snapshot

Create accordion variation with CTA for expand all/collapse all

Use case: Create a variation of existing Accordion block which will show hide a CTA to expand collapse all rows.
Refer to example here - https://www.aldevron.com/our-services/plasmid-dna-production/nanoplasmid/faq

Feature Requirement:
Accordion
User Story:
This Accordion will expand and collapse based on 'CTA' and space between the accordions will be based on 'spacer'.
Platforms:

Authoring steps :

1- Insert a table with 2 columns and required rows (as per the number of queries).
2-In the first row provide the name of the block as "Accordion(CTA)". If you don't append CTA in the block name then Collapse All/Expand All button will not be visible as per the functionality.
3-If we need space between the accordions , we have to append "spacer" in the block name as well i.e "Accordion(CTA, spacer)".
4-Place the question in the next rows of first column and answers in the second column. Find the below screenshot for your reference.

Create Cards/showcards block

Feature Requirement:
Show Cards
User Story:
This block is used to author the Image, title, description & the button field. It will be shown as below.
Platforms:

Services:

Authoring steps for platform section in Home page:

1. Insert a table with the required number of rows depending on how many cards are having on the page (for ex: 3) and a single column.
2. In the first row, provide the name of the block "showcards (data-block-heading--Platforms)". Here, "Platforms" is the name of heading for that section. You can replace it with any text it will be updated accordingly and If you don't need any heading at all you can remove the text as well after showcards {ie., (data-block-heading--Platforms)} and provide only "showcards".
3. In the next row, provide the image, heading, description and button data respectively one beneath the other.
4. Repeat step 3 by providing each card information {ie., Image, heading, description and button} in each row, until you complete all the cards on the page.
5. Please find the attached screenshot for your reference.
   

Authoring steps for Services section in Home page:

1. Insert a table with the required number of rows depending on how many cards are having on the page (for ex: 3) and 2 columns.
2. Merge the two columns in the first row, then provide the name of block "showcards (data-block-heading--Services)". Here, "Services" is the name of heading for that section. You can replace it with any text it will be updated accordingly and If you don't need any heading at all you can remove the text as well after showcards {ie., (data-block-heading--Services)} and provide only "showcards".
3. In the next row first column, provide the image and in the second column provide heading, description and button data respectively one beneath the other.
4. Repeat step 3 by providing each card Image in the first column and related information {ie., heading, description and button} in second column, until you complete all the cards on the page.
5. Please find the attached screenshot for your reference.
   

Header--URL should open in new tab

Hi Team,

While comparing the developed header block with the legacy site header block, the noticed difference is, that the provided URL should open in the new tab but the links are opening the same tab.

Page path Details:-

1. About us/Career
2. About us/ Code of Conduct and Ethics
3. About us/ Supplier Code of Conduct and Ethics

Video Embed (YouTube)- Label and Icons are missing

Hi Team,

I have noticed that the Watch Later and Share icons are missing and the Watch on youtube label is missing. Please look in to the below snap and do the needful.

Legacy site:-

EDS:-

Create Header Block including logo, navigation links and search bar

Footer-Logo Format Issue

Hi Team,

While comparing the developed Footer block with the legacy site Footer block, I noticed a difference in the footer logo format, in legacy the format is in SVG but in EDS the format is in PNG

Blog template including bloglist and individual blog page

This Issue is related for creating individual blog pages based on that we need to create blog list.

There are sidebars need to be created dynamically for that we used some url parameters
Parameters:
Archive
Topic
Author

Based on this we are creating blog list page including pagination.

Blog page and Blog listing page links from existing website are given below for reference:
https://www.aldevron.com/blog/webinar-crispr-cures-2033
https://www.aldevron.com/blog

Create tabs block

Authoring steps for Tabs block:

1. Insert a Table with required number of rows and 2 columns.
2. In the first row, merge the two columns and then provide the name of the block as "Tabs".
3. In the next row first column, Provide the details as "Tab 1" and in the second column, Provide the corresponding content (ie., only text) which is present under tab 1.
4. In the next row first column, Provide the details as "Tab 2" and in the second column, Provide the corresponding content (ie., only text) which is present under tab 2 and so on...
5. Repeat the above step until you complete all the number of Tabs.
   Please find the below screenshot for your reference.
   
   Preview Image:
   

Authoring steps for Tabs with Table Variation:

1. Insert a Table with required number of rows and 2 columns.

2. In the first row, merge the two columns and then provide the name of the block as "Tabs(tabs-with-table)".

3. In the next row first column, Provide the details as "Tab 1" and in the second column, Provide the corresponding content (ie., text and Table or only Table) which is present under tab 1.
   a. If any text is present above the Table then insert a table with required number of rows and columns under the text In the second row second column. Otherwise, you can simply insert a table with required number of rows and columns.
   b. Please author the table content as is without giving any specific name for it in the first row.

4. In the next row first column, Provide the details as "Tab 2" and in the second column, Provide the corresponding content (ie., text and Table or only Table) which is present under tab 2 and so on...

5. Repeat the step 3 until you complete all the number of Tabs.
   Please find the below screenshot for your reference.
   
   Preview Images:
   
   

Hero - Registered trademark symbol ® superscript text Issue

Hi Team,

I have noticed that the sup tag is missing for the Registered trademark symbol in the hero banner.

Please look into the below snap.

Accordion - Caret(downward-facing arrow) Alignment issue

Hi Team,

I have noticed an issue in the accordion Caret(downward-facing arrow) Alignment if the cell is empty in the edit mode.

Please look into the below snap and do the needful.

Author block for block and news pages

This block is related to authoring part of blog and news pages Here we need to update the author url to get the information about the auther including the author name and description and photo as well

Create Hero Carousel Block

AC: TBD

Create contact us block

Feature Requirement:
Contact Us
User Story:
This block is used to author the Image, title, description, contact number & the button field. It will be shown as below.

ref link: https://www.aldevron.com/
Authoring guide

1. Insert a table with two rows. (first row - full width, second row 2 x 1)
2. In the first row, provide the name of the block "contactus".
3. In the second row - provide title, description and button in the first column and provide Image in the second column as shown below.
   

Header- CTA should be Blank

Hi Team,

While comparing the developed header block with the legacy site header block, I noticed that for the below-given pages, the URL links should be blank which means the page CTA should be blank. Although I have tried to remove the link, there is a breach in the font face and font style (please refer to the image below).

Page path Details:-

1. Services
2. Products/Viral Vector
3. Products/Enzymes
4. Products/DNA/RNA Report

SS with link:-

SS after removing a link:-

Create accordion block

Accordion to have expand -collapse function

Include gtm script for one trust

social share block

This block is related to social share component that can be used on blog and news pages

Video Embed (YouTube)-Alignment issue

Hi Team,

I have noticed that there is an issue in the alignment. In the legacy, the YouTube video is aligned in the center but in EDS it is aligned to the left.

EDS:-

LEGACY:-

Hero Banner- Tittle and CTA Issue

Hi Team,

I have noticed an issue with the hero banner, title, and CTA are behaving by themselves. Please look into the below snap.

@Vinaykumargujja as discussed, please look into this.

Hero - CTA Tooltip Text Issue

Hi Team,

I have noticed that when the mouse moves over the CTA the tooltip text is appearing on the screen but not in the legacy site. So, expecting the same on the EDS site also.

Include Aldevron Fonts and Styles in Franklin

Create Column Images block

Feature Requirement:
Column Images
User Story:
Column Images block will be used to author the images in a section.
-> Text field is an optional. It can be added above or below the image.
-> Image & text hyperlink is also an optional field.
Ref link: https://www.aldevron.com/resources/product-guides#whitepapers

Success Criteria:
The component should be display as expected in Aldevron site, in desktop, tablet and mobile views.

Authoring Guide:

1. Insert a table with two rows. (first row - full width, second row 3 x 1)
2. In the first row, provide the name of the block along with the class name in brackets as below & as per requirement.
   columnimages (3col-img-link) - Image with link
   columnimages (3col-img-text-top) - Image with Text(top)
   columnimages (2col-img-text-bottom) - Image with Text(bottom) 2 columns
3. In the second row each column - provide the Image or Image with text top or Image with text bottom. It has an option to add 2 or 3 columns based on the class provided along with the block name.
   

Contact Us- punctuation mark (') issue

Hi Team,

I have noticed that the punctuation mark (') is appearing on the site page which is built with EDS. Please look into the below snap.