User stories

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my conversational learning page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my booklets page.

Technical Analysis

The module should be placed in the library libs/features/pages/ booklets-page (booklets-page is a module). The module is named " BookletsPageModule". The module has one component called booklets-page found in the lib/main folder. For reference check how this has been implemented in the other page modules.

The route to this should be set in the root routes and it should also have a child routing module that renders the booklets-page component as the root module route.

Acceptance Criteria

• The code is isolated to the libs/features/pages/booklets-page package unless a justified reason is specified.
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation

A reusable InfoCard component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a developer, I want a reusable info card component I can use to present data well.

Description

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528)

Technical Analysis

The news component should be placed in the library libs/elements/cards (cards is a module). The module is named "CardsModule"

It exports the elewa-info-card component, for other modules to import.
The component accepts an Angular input of type:

interface InfoCard {
  title: string
  description: string
  icon: string
}

The type/model should be stored in libs/models/schema/ui/cards (cards is a module/library). The name of the file containing the interface is info-card.interface.ts and it's exported by its parent module above.

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/layout/cards package unless a justified reason is specified.
• The model/schema is isolated in the libs/models/schema/ui/cards package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

Create the website header

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a header I can use to navigate the website.

Description

Your task is to add the website header as described below.

The content of this header will include:

1. "Elewa" logo on the left
2. A transparent background 
3. Black text in correct font 
4. Contact button on the right

The header looks as follows:

TODO Logo Url -> https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690297/elewa-group-website/Icons/SVG/_Logo/Logo_White_arvoyx.svg

The header needs to be absolute and of higher z-index so that it appears on top of the page banner.

Full design reference: https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

The container adapts naturally to the following screen widths:

Technical Analysis

• Create an angular package in libs/elements/layout/header. Name the module AppHeaderModule
• Create a header component inside a components folder of the package above.
• Export the header in the package
• Use labels to make the header available in two languages

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The header adapts naturally to different screen widths
3. The header can change language

A Reusable Pricing Card Component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a developer, I want a reusable pricing card component I can use to render an individual price card.
I want a good experience on the web and phone.

Description

Design:

Link to full design

Technical Analysis

The reusable price item component should be placed in the library libs/elements/cards (cards is a module that already exists)

It exports the elewa-website-price-item-card component, for other modules to import. The component name is elewa-website-price-item-card.

The component accepts an Angular input of type:

interface PriceItem extends PriceItemColors {
  title: string
  amount: number
  subTitle: string
  description: string
  sliderButton: SliderButtonData
}

interface PriceItemColors {
  amountColor: string
  textColor: string
  backgroundColor: string
}

The SliderButtonData type already exists in the codebase at libs/models/schema/ui/buttons.

The type/model should be stored in libs/models/schema/ui/cards (cards is a module/library already implemented in the codebase). The name of the file containing the interface is price-item.interface.ts and it's exported by its parent module above.

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/layout/cards package unless a justified reason is specified.
• The model/schema is isolated in the libs/models/schema/ui/cards package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

Create the website footer

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a simple footer that displays my information in a structured way.
Another component can be injected into the footer to highlight a certain action per page

Description

Currently the website page has no footer. Your job is to add one. The footer needs to appear well on web and mobile:

Web:

Mobile:

NB: The mobile design is for a different website, ours should look exactly the same apart from the textual content itself

Link to full design:

https://xd.adobe.com/view/30f592fb-2ceb-4ea9-a6b9-2aee6239a957-65a6/screen/9ce6f3d4-3ff5-4c36-86f0-bf3a67e02b13

Technical Analysis

Create a layout package in libs/elements/layout/footer

Create a footer component inside a components folder of the package above.
Add a module and export the component.

The footer has a dynamic component which can change from page to page, as illustrated below:

Use simple content projection/transclusion for this through the <ng-content></ng-content> element

https://angular.io/guide/content-projection

Social media links

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690295/elewa-group-website/Icons/SVG/_Social/instagram_x8ujcq.svg

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690294/elewa-group-website/Icons/SVG/_Social/linkedin_x8smhm.svg

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690294/elewa-group-website/Icons/SVG/_Social/facebook_lhhwk2.svg

Acceptance Criteria

• When rendered the component is pixel perfect compared to the design above.
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/layout/footer package, unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• The component allows for a transclusive element that is centered using CSS

Create the menu solutions component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a menu on the header section that opens when the solutions tab is clicked and drops from the top (if possible animate this) that captures my attention and introduces the menu content with router links to the different pages shown in the design below. I want a good experience on the web and phone. The menu section is a component created in libs\elements\layout\header inside the components folder. If you need to update the header component to achieve this feel free to do so.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in libs\elements\layout\header inside a components folder. The component's name is header-menu. The individual router links that are visible when the menu is open should be a reusable menu-item component located in the same module in the components folder.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the global style.scss
4. The design is responsive for screen, tablet and phone

Create a reusable Slider Button component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a developer, I want a reusable slider button component that I can reuse anywhere it's needed across my application.

Description

Design:

Link to full design

Technical analysis

Package

The button component should be placed in the library libs/elements/layout/buttons (buttons is a module/library)

Use the command nx generate @nrwl/angular:library elements/layout/buttons to create this library. Make sure it's a separate commit.

The normal button component is a reusable component that can be reused across my application. The module is named "ButtonsModule". The normal button is being developed in #23. Avoid merge conflicts when creating the package.

The ButtonsModule exports the elewa-normal-button component, for other modules to import.

You are adding a second component to this package, i.e. elewa-slider-button.

Input and outputs

The component exposes one Angular input of type:

interface SliderButtonData extends ButtonData
{
  text: string;

  bgColour?: string; // Background colour
  color?: string;
  borderColor?: string;
  iconColor?: string;
  iconBackgroundColor?: string;

  hoverBgColour?: string;
  hoverColor?: string;
  hoverBorderColor?: string;
  hoverIconColor?: string;
  hoverIconBackgroundColor?: string;
}

Most of the parameters are optional, and therefore nullable (hence the ?) on the variable. If the variables are set, the button adopts the correct colours. If not, the default colours are used as per the design spec.

The type/model should be stored in libs/models/schema/ui/buttons (buttons is a module/library) The name of the file containing the interface is slider-button-data.interface.ts and it's exported by its parent module above.

On click, the button exports an output called (click). The click output is an EventEmitter of type void.

Behaviour

When hovering over the slider, the mouse shows the button is clickable and the slider adapts and moves via an animation. The icon at the end moves to the front and the colour changes per design spec. Use SCSS animations for this.

Default, the hover inverts the colours so if the icon is black and the slider is white, the slider becomes black and the icon becomes white.

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/layout/buttons package unless a justified reason is specified.
• The model/schema is isolated in the libs/models/schema/ui/buttons package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

User stories

A user I want a Reusable SDG Infio List Component.

Note: This issue is dependent on #28 , please complete that before you continue.

Summary

As a developer, I want an SDG info list card component I can use to render the SDG list in the SDG section of the about page. I want a good experience on the web and phone.

Description

Design:

Link to full design

Technical Analysis

The SDG list component should be placed in the library libs/elements/cards in the components folder (cards is a module that already exists). The component name is elewa-sdg-list. It's exported by it's parent module above. It reuses the component created in #28.

The component accepts an Angular input of type (already in the codebase):

 InfoCard []

Data

Mock news items are defined for the component and placed in data/sections (already in the codebase) under the file name sdg-list.data.ts.
The index file exports an InfoCard[] with the name "__highlightedSDGList".

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/layout/cards package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

Create Consultancy Page About Section (first)

Note: This issue is dependent on #8, please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a component that displays the first section of the about section on the consultancy page. I want a good design on both desktop and mobile.

Description

Your assignment is to implement the component to appear as below. This component reuses the banner component created in #8. Please take note of all the design features.

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

Technical Analysis

This component will be created in libs\features\pages\consultancy-page inside a components folder. The component will be called elewa-consultancy-about-one. The component reuses the image and text banner and is therefore dependent on #8. If you need to edit the code in #8 to get the desired result feel free to do so.

The section has a property of the below type:

 ImageAndText

NB: The interface for the type above will be implemented in #8

Data

The mock data for this should be stored in libs\data\sections

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The design is responsive for screen, tablet and phone
5. The image renders fast and has multiple srcsets

User stories

As a user, I want nice icons that match the specified design.

Summary

Swap out the existing icons with the right match from the SVG icons below. The icons/assets should be saved in the assets folder in the main app 'elewa-website'.

Description

Existing Icons:

Required Icons:

Link To Icons

Technical Analysis

The assets should be saved in the assets\svgs folder in the main app. apps\elewa-website\src\assets\svgs

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation

User stories

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my conversational learning page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my conversational learning page.

Technical Analysis

The module should be placed in the library libs/features/pages/conversational-learning (conversational-learning is a module). The module is named "ConversationalLearningModule". The module has one component called conversational-learning-page found in the lib/main folder. For reference check how this has been implemented in the other page modules.

The route to this should be set in the root routes and it should also have a child routing module that renders the conversational-learning-page component as the root module route.

Acceptance Criteria

• The code is isolated to the libs/features/pages/conversational-learning package unless a justified reason is specified.
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation

Create Content Development Page About Section (second)

Note: This issue is dependent on #178, please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a component that displays the second section of the About section on the content development page. I want a good design on both desktop and mobile.

Description

Your assignment is to implement the component to appear as below. This component reuses the banner component created in #178. Please take note of all the design features.

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

Technical Analysis

This component will be created in libs\features\pages\content-development inside a components folder. The component will be called elewa-content-dev-about-two. The component reuses the image and details banner and is therefore dependent on #178. If you need to edit the code in #178 to get the desired result feel free to do so.

The section has a property of the below type:

 ImageAndDetails

NB: The interface for the type above will be implemented in #178

Mock Data

Mock data for this component should be stored in libs\data\sections.

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The design is responsive for screen, tablet and phone
5. The image renders fast and has multiple srcsets

Create the conversational learning hero section

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the conversational learning page that captures my attention and introduces the page content. Reuse the text-content component created in #20, and the reusable slider button in #24. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in libs/features/pages/conversational-learning inside a components folder. The component's name is conv-hero-section.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the global style.scss
4. The design is responsive for screen, tablet and phone

Create reusable project item component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a component I can reuse throughout the site to display project items in a carousel

Description

This component displays a project item as shown in the design.

Your assignment is to implement the component to appear as above.

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

Technical Analysis

This component will be created in libs/elements/cards (cards is a module)

The component will be called elewa-project-item-card

The component accepts one Angular input of type:

interface ProjectItem {
  title: string
  description: string
  tag: string
  imgSrc: string
}

The type/model should be stored in libs/models/ui/cards (cards is a module/library)

The name of the file containing the interface is project-item.interface.ts and it's exported by its parent module above.

Data

Mock projects are defined for the component and placed in data/sections under the file name highlighted-projects.data.ts.
The file exports a Projects[] with the name "__highlightedProjects".

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/cards package unless a justified reason is specified.
• The model/schema is isolated in the libs/models/ui/cards package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone.
• The image renders fast and has multiple srcsets.

Create the website header

Note: This issue is dependent on #2 , please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a header I can use to navigate the website.

Description

Your task is to add the website header as described below.

The content of this header will include:

1. "Elewa" logo on the left
2. A transparent background 
3. White text

The header needs to be absolute and of higher z-index so that it appears on top of the page banner.

The header needs to appear as shown below on web (the background color should be transparent as it will be re-used across the different pages):

Technical Analysis

Create a layout package in libs/elements/layout

Create a header component inside a components folder of the package above

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.

🎨 Create the SDG section on the AboutPage

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a section that shows/lists my support for SDG. Should reuse the component defined in #148. Should be placed in the about page main component. Check the full design below for component placement.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This component will be created in a components folder in the about page module libs/pages/about/src/lib/components, The name of the component will be sdg-section

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The code is isolated to the libs/page/home package, unless a justified reason is specified.
5. The design is responsive for screen, tablet and phone
6. The image renders fast and has multiple srcsets

Create the about page hero section

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the about page that captures my attention and introduces the page content. Reuse the text-content component created in #20 and the image container component created in #19. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in libs/features/pages/about inside a components folder. The component's name is about-hero-section.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the global style.scss
4. The design is responsive for screen, tablet and phone

Create a reusable hero (Top page banner) component for the website

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a consistent top page banner for various pages of the website. We will have two banner designs for the website. The one below is the secondary banner.

Description

As seen on the designs (link below), there are various pages that share a similar top banner which we'll call the "secondary hero section". The hero section is the first view when a user lands on a page. We need two reusable components that can be reused for every page that needs a banner.

The contents of the hero will be passed as inputs to the component and will include:

1. Title 
2. Description
3. Button (do not implement).
4. An Image (right)

The hero section needs to appear as shown below (but the Image and text will vary based on the page).

Your assignment is to implement the component to appear as above.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This component will be created in libs/elements/layout

The name of the component will be "elewa-secondary-hero"

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The code is isolated to the libs/page/home package, unless a justified reason is specified.
5. The design is responsive for screen, tablet and phone
6. The image renders fast and has multiple srcsets

Create reusable text and details banner (side by side)

Note: This issue is dependent on #19 and #28 , please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a component I can reuse throughout the site to display images and text side by side.

Description

This component displays text and images side by side on the site

Your assignment is to implement the component to appear as above.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

Technical Analysis

This component will be created in libs/elements/banners (banners is a module). The component will be called elewa-image-and-details-banner. The component reuses the image-container and is therefore dependant on #19 . The component reuses the info card component in #28.

The section has an input of the below type to the component that will be passed down to the reusable components in the linked issue:

ImageConfig -> #19 and ContentText -> #28

interface ImageAndDetails {
  cards: InfoCard[]
  image: ImageConfig
  imagePosition: 'left' | 'right'
}

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The design is responsive for screen, tablet and phone
5. The image renders fast and has multiple srcsets

Create the contact page form section

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice user-friendly contact form on my Contact page to facilitate easy communication with my users.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in libs\features\pages\contact-page inside a components folder. The component's name is contact-page-form-section. Use Reactive Forms to process user input i.e. add logic to submit the form/collect the user data (don't send it anywhere).

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the global style.scss
4. The design is responsive for screen, tablet and phone

A reusable News Item component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a developer, I want a reusable news item component I can use to present a news item.
I want a good experience on web and phone.

Description

Design:

Link to full design

Technical Analysis

The news component should be placed in the library libs/elements/cards (cards is a module)

The module is named "CardsModule"

It exports the elewa-news-item-card component, for other modules to import. The component name is elewa-news-item-card.

The component accepts an Angular input of type:

interface NewsItem {
  title: string
  description: string
  buttonText: string
}

The type/model should be stored in libs/models/schema/ui/cards (cards is a module/library). The name of the file containing the interface is news-item.interface.ts and it's exported by its parent module above.

Data

Mock news items are defined for the component and placed in data/sections under the file name highlighted-news.data.ts.
The file exports a NewsItem[] with the name "__highlightedNews".

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/layout/cards package unless a justified reason is specified.
• The model/schema is isolated in the libs/models/schema/ui/cards package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690297/elewa-group-website/Icons/SVG/_Logo/Logo_White_arvoyx.svg

User stories

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my contact page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my contact page.

Technical Analysis

The module should be placed in the library libs/features/pages/contact-page (contact-page is a module). The module is named " ContactPageModule". The module has one component called contact-page found in the lib/main folder. For reference check how this has been implemented in the other page modules.

The route to this should be set in the root routes and it should also have a child routing module that renders the contact-page component as the root module route.

Acceptance Criteria

• The code is isolated to the libs/features/pages/contact-page package unless a justified reason is specified.
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation

🎨 Create the partner's section on the HomePage

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a section that shows/lists all our core business partners. Check the full design below for component placement

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This component will be created in libs/pages/home/components, The name of the component will be partners-section

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The code is isolated to the libs/page/home package, unless a justified reason is specified.
5. The design is responsive for screen, tablet and phone
6. The image renders fast and has multiple srcsets

User stories

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my conversational learning page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my news page.

Technical Analysis

The module should be placed in the library libs/features/pages/news-page (news-page is a module). The module is named " NewsPageModule". The module has one component called news-page found in the lib/main folder. For reference check how this has been implemented in the other page modules.

The route to this should be set in the root routes and it should also have a child routing module that renders the news-page component as the root module route.

Acceptance Criteria

• The code is isolated to the libs/features/pages/news-page package unless a justified reason is specified.
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation

User stories

A user I want a Reusable Pricing List Component.

Note: This issue is dependent on #81 , please complete that before you continue.

Summary

As a developer, I want a reusable pricing list card component I can use to render the billing list for the unique service that I offer. The component is reusable as it will be needed on different pages, I want a good experience on the web and phone.

Description

Design:

Link to full design

Technical Analysis

The reusable price list component should be placed in the library libs/elements/cards (cards is a module that already exists) in the components folder. The component name is elewa-price-list. It's exported by it's parent module above. It reuses the component created in #81.

The component accepts an Angular input of type (already in the codebase):

 priceItem []

Data

Mock news items are defined for the component and placed in data/sections (already in the codebase) under the file name pricing-list.data.ts.
The index file exports a priceItem[] with the name "__highlightedPricingList".

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/cards package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

Create the booklets page hero section

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a nice hero section on the booklets page that captures my attention and introduces the page content. Reuse the text-content component created in #20, and the reusable slider button in #24. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in libs/features/pages/booklets-page inside a components folder. The component's name is booklets-hero-section.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the global style.scss
4. The design is responsive for screen, tablet and phone

Create reusable text and image banner (side by side)

Note: This issue is dependent on #19 and #27 , please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want a component I can reuse throughout the site to display images and text side by side.

Description

This component displays text and images side by side on the site

Your assignment is to implement the component to appear as above.

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

Technical Analysis

This component will be created in libs/elements/banners (banners is a module). The component will be called elewa-image-and-text-banner. The component reuses the image-container and is therefore dependant on #19 . The component reuses the title and paragraph component in #27.

The section has an input of the below type to the component that will be passed down to the reusable components in the linked issue:

ImageConfig -> #19 and ContentText -> #27

interface ImageAndText {
  content: ContentText
  image: ImageConfig
  imagePosition: 'left' | 'right'
}

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The component is aligned using CSS flex
5. The design is responsive for screen, tablet and phone
6. The image renders fast and has multiple srcsets

🎨 Create the Home Page News Section Component

Note: This issue is dependent on #11 , please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a section that displays all news- items(blogs) that I have on my homepage.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This component will be created in libs/pages/home/components, The name of the component will be news-section

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The code is isolated to the libs/page/home package, unless a justified reason is specified.
5. The design is responsive for screen, tablet and phone
6. The image renders fast and has multiple srcsets

Create Consultancy Page Learning Design Services Section

Note: This issue is dependent on #28, please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a component that displays the learning devices section on the consultancy page. Reuse the component created in #28. I want a good design on both desktop and mobile.

Description

Your assignment is to implement the component to appear as below. Please take note of all the design features.

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

Technical Analysis

This component will be created in libs\features\pages\consultancy-page inside a components folder. The component will be called elewa-website-learning-services.

The section has an input of the below type:

 InfoCard[]

NB: The interface for the type above will be implemented in #28

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The design is responsive for screen, tablet and phone
5. The image renders fast and has multiple srcsets

Create the Home Landing page

Note: This issue is dependent on #19, #20 and #1, please complete that first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the home page that captures my attention and introduces the page content. Reuse the text-content component created in #20, the image container created in #19 and the header component in #1. I want a good experience on the web and phone.

Description

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528

Technical Analysis

This feature can be found in libs/pages/home. This feature should be a stand-alone component. The component's name is home-hero-section.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The code is isolated to the libs/page/home package, unless a justified reason is specified.
5. The design is responsive for screen, tablet and phone

Create Consultancy Page About Section (second)

Note: This issue is dependent on #8, please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a component that displays the second section of the about section on the consultancy page. I want a good design on both desktop and mobile.

Description

Your assignment is to implement the component to appear as below. This component reuses the banner component created in #8. Please take note of all the design features.

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

Technical Analysis

This component will be created in libs\features\pages\consultancy-page inside a components folder. The component will be called elewa-consultancy-about-two. The component reuses the image and text banner and is therefore dependent on #8. If you need to edit the code in #8 to get the desired result feel free to do so.

The section has a property of the below type:

 ImageAndText

NB: The interface for the type above will be implemented in #8

Data

The mock data for this should be stored in libs\data\sections

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The design is responsive for screen, tablet and phone
5. The image renders fast and has multiple srcsets

Create a reusable hero (Top page banner) component for the website

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a consistent top page banner for various pages of the website. We will have two banner designs for the website. The one below is the primary banner.

Description

As seen on the designs (link below), there are various pages that share a similar top banner which we'll call the "primary hero section". The hero section is the first view when a user lands on a page. We need two reusable components that can be reused for every page that needs a banner.

The contents of the hero will be passed as inputs to the component and will include:

1. Title 
2. Description
3. Button (do not implement).
4. An Image (right)

The hero section needs to appear as shown below (but the Image and text will vary based on the page).

Your assignment is to implement the component to appear as above.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This component will be created in libs/elements/layout

The name of the component will be "elewa-primary-hero"

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The code is isolated to the libs/page/home package, unless a justified reason is specified.
5. The design is responsive for screen, tablet and phone
6. The image renders fast and has multiple srcsets

Create the home Page "Educational Solution" section

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a section that shows an Overview section that describes what Elewa does as shown in the image below

Description

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528

Technical Analysis

This feature can be found in libs/pages/home inside the components folder. The name of the component is education-section

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/page/home package, unless a justified reason is specified.
• The component is aligned using CSS fGrid
• The design is responsive for screen, tablet and phone

User stories

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my content-development page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my content-development page.

Technical Analysis

The module should be placed in the library libs/features/pages/content-development (content-development is a module). The module is named "ContentDevelopmentModule". The module has one component called content-development-page found in the lib/main folder. For reference check how this has been implemented in the other page modules.

The route to this should be set in the root routes and it should also have a child routing module that renders the content-development-page component

Acceptance Criteria

• The code is isolated to the libs/features/pages/content-development package unless a justified reason is specified.
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation

Create the home Page "Overview" section

Note: This issue is dependent on #19 and #27 , please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a section that shows an Overview section that describes what Elewa does as shown in the image below

Description

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528

Technical Analysis

This feature can be found in libs/features/pages/home (already created)

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/page/home package, unless a justified reason is specified.
• The component is aligned using CSS flex
• The design is responsive for screen, tablet and phone

Create a reusable team member component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a component I can reuse throughout the site to display team members in a carousel

Description

This component displays a team member as shown in the design.

Your assignment is to implement the component to appear as above.

Please take note of all the design features (including mobile and rounded corners)

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

Technical Analysis

This component will be created in libs/elements/cards (cards is a module)

The component will be called team-member-card

The component accepts one Angular input of type:

interface TeamMember {
  fullName: string
  imgSrc: string
}

The type/model should be stored in libs/models/ui/cards (cards is a module/library)

The name of the file containing the interface is team-member.interface.ts and it's exported by its parent module above.

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/cards package unless a justified reason is specified.
• The model/schema is isolated in the libs/models/ui/cards package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone.
• The image renders fast and has multiple srcsets.

Create a reusable Content-Text component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a developer, I require a versatile text content component that I can easily integrate into the app to display various forms of textual information.

I want a good experience on the web and phone.

Description

Design:

Link to full Design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528

Technical Analysis

The text-content component should be placed in the library libs/elements/layout/texts

Use the command nx generate @nrwl/angular:library elements/layout/texts to create this library. Make sure it's a separate commit. The text component is a reusable component that can be used by other sections across the application.

The component name is elewa-text-content-item.

The module is named "TextsModule". It exports the elewa-text-content-item component, for other modules to import.

The component accepts an Angular input of type:

interface ContentText {
  title: string
  descriptions: string[]
}

You should loop through the list of descriptions using the *ngfor directive and render them with a space between as shown in the design spec.
The type/model should be stored in libs/models/schema/ui/texts (texts is a module/library). The name of the file containing the interface is content-text.interface.ts and it's exported by its parent module above.

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/layout/texts package unless a justified reason is specified.
• The model/schema is isolated in the libs/models/schema/ui/texts package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

Create a reusable Text-Section component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a developer, I want a reusable text-section component I can use to render hero section texts i.e title, description and subtitle for the different pages in our app.

I want a good experience on the web and phone.

Description

Design:

Link to full design

Technical Analysis

The text-section component should be placed in the library libs/elements/layout/texts

Use the command nx generate @nrwl/angular:library elements/layout/texts to create this library. Make sure it's a separate commit. The text component is a reusable component that can be used by e.g. the home page to properly display its hero text items (title, description, subtitle).

The component name is elewa-text-section.

The module is named "TextsModule". It exports the elewa-hero-text-item component, for other modules to import.

The component accepts an Angular input of type:

interface HeroText {
  title: string
  subtitle?: string
  description?: string
}

Most of the parameters are optional, and therefore nullable (hence the ?) on the variable. If a variable is not set, its part of text-section is not rendered.

The type/model should be stored in libs/models/schema/ui/texts (texts is a module/library). The name of the file containing the interface is hero-text.interface.ts and it's exported by its parent module above.

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/layout/texts package unless a justified reason is specified.
• The model/schema is isolated in the libs/models/schema/ui/texts package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

User stories

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my consultancy page.

Quick links: Summary | Description | Template | Example | Resources

Description

As a Developer I need a Page Module where I can create declarations(components, directives...) that will represent the different sections of my consultancy page.

Technical Analysis

The module should be placed in the library libs/features/pages/consultancy-page (consultancy-page is a module). The module is named " ContactPageModule". The module has one component called consultancy-page found in the lib/main folder. For reference check how this has been implemented in the other page modules.

The route to this should be set in the root routes and it should also have a child routing module that renders the consultancy-page component as the root module route.

Acceptance Criteria

• The code is isolated to the libs/features/pages/consultancy-page package unless a justified reason is specified.
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation

Create the Projects Carousel Section.

Note: This issue is dependent on #14, please complete that first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice carousel to display all my projects as a list. I should be able to move the carousel and view projects that are not yet in view.

Description

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528

Technical Analysis

This feature can be found in libs/elements/carousel
This feature consists out of at least two different components, i.e. a content-card and a carousel list. More components might exist for your determination. The carousel-list component takes a list of projects as input. It should use the component in #14 to display the projects.

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The main code is isolated to the libs/elements/layout/carousel package. The card is isolated in libs/elements/layout/cards
5. The project interface is defined. No any types are being used anywhere
6. The design is responsive for screen, tablet and phone

Remove default Nx template from the site

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user I want to interact with the elewa website.

Description

Currently the site contains a default NX template. Remove the template and replace with a simple landing page with black background and white text "Elewa Education".

Current site is as shown below

Technical Analysis

This feature can be found in apps/elewa-website

Create a temporary landing page on libs/features/elewa/home

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.

Create reusable Normal Button component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a developer, I want a reusable normal button component that I can reuse anywhere it's needed across my application.

Description

Design:

Link to full design

Technical Analysis

The button component should be placed in the library libs/elements/layout/buttons (buttons is a module/library). Use the command nx generate @nrwl/angular:library elements/layout/buttons to create this library. Make sure it's a separate commit.

The normal button component is a reusable component that can be reused across my application. The component name is elewa-normal-button.

The angular module is named "ButtonsModule". It exports the elewa-normal-button component, for other modules to import.

The component exposes one Angular input of type:

interface ButtonData 
{
  text: string
  
  bgColor?: string; // Background colour
  color?: string; // text color
  
  hoverBgColor?: string;
  hoverColor?: string;
}

Most of the parameters are optional, and therefore nullable (hence the ?) on the variable. If the variables are set, the button adopts the correct colours. If not, the default colours are used as per the design spec.

The type/model should be stored in libs/models/schema/ui/buttons (buttons is a module/library). The name of the file containing the interface is button.interface.ts and it's exported by its parent module above.

On click, the button exports an output called (click). The click output is an EventEmitter of type void.

Behaviour

When hovering over the slider, the slider adapts and moves via an animation. The icon at the end moves to the front and the colour changes per design spec. Use SCSS animations for this.

Default, the hover inverts the colours so if the icon is black and the slider is white, the slider becomes black and the icon becomes white.

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component is clean and does not have more than 50 lines
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/page/home package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component

Create the booklets page text and image banner section(side by side)

Note: This issue is dependent on #8, please complete that first.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a beautiful-looking section that provides the main content of the bookings page.
I want a good experience on the web and phone. Reuse the component created in #8.

Description

Design:

Link to full design:

https://xd.adobe.com/view/30f592fb-2ceb-4ea9-a6b9-2aee6239a957-65a6/screen/9ce6f3d4-3ff5-4c36-86f0-bf3a67e02b13

Technical Analysis

This feature can be found in libs/pages/booklets-page module inside a components folder. This feature is a standalone component.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The code is isolated to the libs/features/page/booklets-page package, unless a justified reason is specified.
5. The design is responsive for screen, tablet and phone

Create a reusable image container component

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a few consistent sets of displaying images.

Description

As seen on the designs (link below), there are different ways in which we visualise images.

We differentiate the following forms:

• Pill: The pill is an oval rounded shape with the roundings being on the top and bottom (rounding of each corner is 30% of window height)
• Stacked: The stacked cuts out two horizontal pills
• Window: A window rounds at the top only (rounding is 30% of height)
• Card: A card image only rounds slightly (5 to 10px)

These cutouts are provided by a component called an "image-container".

An "image-container" accepts an input of type "ImageConfig", which has the following properties:

1. Title 
2. Image source
3. Visualisation (type ImageVisualisation = Enum { Pill = 0, Stacked = 1, Window = 2, Card = 3 })
4. Max-width (optional)

interface ImageConfig {
  title: string
  imageSrc: string
  visualisation: ImageVisualisation
  maxWidth?: string
}

export enum ImageVisualisation {
  Pill = 0,
  stacked = 1,
  Window = 2,
  Card = 3
}

The type/model should be stored in libs/models/schema/ui/images (images is a module/library)

The name of the file containing the interface is image-config.interface.ts and it's exported by its parent module above.

Your assignment is to implement the component to appear as above.

Please take note of all the design features

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This component will be created in libs/elements/layout/images

The name of the component will be "elewa-image-container"

Use CSS clipping to visualise the different image forms - https://css-tricks.com/clipping-masking-css/

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to several of the designs above.
2. The component is clean and does not have more than 80 lines
3. The component accepts rectangular width/height images and uses clipping masks to achieve the desired image shapes
4. The correct types are defined in "model/ui/images"
5. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
6. The code is isolated to the libs/elements/layout/images package, unless a justified reason is specified.
7. The design is responsive and reacts to screens smaller than
8. The image renders fast and has multiple srcsets

Create Content Development Page About Section (first)

Note: This issue is dependent on #8, please complete that before you continue.

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a component that displays the first section of the about section on the content development page. I want a good design on both desktop and mobile.

Description

Your assignment is to implement the component to appear as below. This component reuses the banner component created in #8. Please take note of all the design features.

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

Technical Analysis

This component will be created in libs\features\pages\content-development inside a components folder. The component will be called elewa-content-dev-about-one. The component reuses the image and text banner and is therefore dependent on #8. If you need to edit the code in #8 to get the desired result feel free to do so.

The section has a property of the below type:

 ImageAndText

NB: The interface for the type above will be implemented in #8

Data

The mock data for this should be stored in libs\data\sections

Acceptance Criteria

1. When rendered the component is pixel-perfect compared to the design above.
2. The component is clean and does not have more than 50 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
4. The design is responsive for screen, tablet and phone
5. The image renders fast and has multiple srcsets

Create the content development hero section

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the content development page that captures my attention and introduces the page content. Reuse the text-content component created in #20, and the reusable slider button in #24. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in libs/features/pages/content-development inside a components folder. The component's name is content-dev-hero-section.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the global style.scss
4. The design is responsive for screen, tablet and phone

Create the consultancy hero section

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

Summary

As a user, I want a nice hero section on the consultancy page that captures my attention and introduces the page content. Reuse the text-content component created in #20, and the reusable slider button in #24. I want a good experience on the web and phone.

Design:

Link to full design:

https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/screen/cc35e19a-24f2-42ce-8803-ee2942839528/

Technical Analysis

This feature can be found in libs/features/pages/consultancy-page inside a components folder. The component's name is consultancy-hero-section.

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The component is clean and does not have more than 30 lines
3. The component SCSS uses CSS variables for colour, font, ... Connected to the global style.scss
4. The design is responsive for screen, tablet and phone

User stories

As a user, I want a team member section on my about page.

Summary

As a user, I want a team member section I can use to render/showcase my current team, I want a good experience on the web and phone.

Description

Design:

Link to full design

Technical Analysis

The team members' section component should be placed in the About page module under the components folder. The component name is team-members-section. The component reuses the carousel component created in #16. The carousel has been updated to allow transclusion so make sure you sync the latest changes. It also reuses the team member component created in #125.

The component accepts an Angular input of type (already in the codebase):

 TeamMember []

Data

Mock team members are defined for the component and placed in data/sections (already in the codebase) under the file name team-members-list.data.ts. The index file exports a TeamMember[] with the name "__highlightedTeamMembers".

Acceptance Criteria

• When rendered the component is pixel-perfect compared to the design above.
• The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
• The code is isolated to the libs/elements/layout/cards package unless a justified reason is specified.
• The design is responsive for screen, tablet and phone
• A separate commit is used for each small change
• The commits and PR are well formatted/use proper documentation
• The module exports the component