SSD-821: contact us template by 4fn4n · Pull Request #346 · govtechmy/myds

4fn4n · 2026-02-13T02:58:50Z

Summarise the feature

Issue ticket # SSD-821

Description:

update contact us
update this old branch with develop latest
add with registration and login template

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

Checklist

My code follows the style guidelines of this project
I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works

Feature: Template for contact us page (SOF-101)

vercel · 2026-02-13T02:58:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
myds	Ready	Preview, Comment	Feb 13, 2026 4:34am
myds-storybook	Ready	Preview, Comment	Feb 13, 2026 4:34am

changeset-bot · 2026-02-13T02:58:55Z

⚠️ No Changeset found

Latest commit: dae3bf7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot

Pull request overview

This PR adds a new "Contact Us" template to the MYDS documentation, providing developers with a ready-to-use UI component for contact pages. The changes also include translation updates to the login and forgot password documentation files, and adds a pull request template to standardize PR submissions.

Changes:

Added a new ContactUsTemplate component with responsive layout, Google Maps integration, and social media links
Created comprehensive English and Malay documentation for the contact us template
Updated Malay translations in login and forgot password documentation for consistency
Added a standardized pull request template

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
apps/docs/templates/contact-us.tsx	New React component providing a contact us page template with office information, map embed, and social links
apps/docs/content/docs/develop/(template)/contact-us.mdx	English documentation for the contact us template with usage examples and customization guide
apps/docs/content/docs/develop/(template)/contact-us.ms.mdx	Malay translation of contact us template documentation
apps/docs/content/docs/develop/(template)/login.ms.mdx	Translation update: "Login" → "Log Masuk" for title consistency
apps/docs/content/docs/develop/(template)/forgot-password.ms.mdx	Translation updates for consistency: "terlupa kata laluan" → "lupa kata laluan"
.github/pull_request_template.md	Added standardized PR template with checklist for contributors

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-13T03:03:13Z

+    TiktokIcon,
+} from "@govtechmy/myds-react/icon";
+
+export default function ContactUsTemplate() {


The ContactUsTemplate component doesn't accept a className prop, but it's being used with className in the MDX documentation files (line 32 in both contact-us.mdx and contact-us.ms.mdx). Similar templates like LoginTemplate accept a className parameter for consistent styling flexibility. Add className as an optional prop parameter and apply it to the root element.

Copilot · 2026-02-13T03:03:13Z

+
+## Ringkasan Umum
+
+Komponen `ContactUsTemplate` menyediakan contoh UI untuk skrin lupa kata laluan menggunakan komponen [MYDS](https://github.com/govtechmy/myds) Ia merangkumi:


The description incorrectly states this is for "skrin lupa kata laluan" (forgot password screen). This should be "skrin hubungi kami" (contact us screen) to match the actual purpose of the ContactUsTemplate component.

Suggested change

Komponen `ContactUsTemplate` menyediakan contoh UI untuk skrin lupa kata laluan menggunakan komponen [MYDS](https://github.com/govtechmy/myds) Ia merangkumi:

Komponen `ContactUsTemplate` menyediakan contoh UI untuk skrin hubungi kami menggunakan komponen [MYDS](https://github.com/govtechmy/myds) Ia merangkumi:

Copilot · 2026-02-13T03:03:14Z

+> - Butiran hubungan yang berfungsi untuk bingkai peta Google, nombor telefon dan e-mel
+> - Pautan media sosial yang berfungsi
+> 
+> You are expected to implement such logic based on your own system needs.


This English text is mixed into a Malay documentation file. It should be translated to Malay for consistency. The expected translation would be: "Anda dijangka melaksanakan logik tersebut berdasarkan keperluan sistem anda sendiri."

Suggested change

> You are expected to implement such logic based on your own system needs.

> Anda dijangka melaksanakan logik tersebut berdasarkan keperluan sistem anda sendiri.

Copilot · 2026-02-13T03:03:14Z

+- Responsive contact details section with google map frame, telephone and email.
+- Social media links with icons styled according to the MYDS design guidelines.
+- A mobile-friendly layout that adapts from stacked sections to a single row on large screens.
+
+This contact us page template is built for **rapid development** and **easy integration**. It is designed to help teams get started faster by providing a layout that adheres to the **MYDS design system**, eliminating the need to piece together individual components manually.
+
+> ⚠️ **Note**: This is a **design-only template**. It does **not** include any functional logic such as:
+> - Working contact details for google map frame, telephone and email


The phrase "google map" should be capitalized as "Google Map" to match proper noun capitalization standards, as it refers to the Google Maps product.

Suggested change

- Responsive contact details section with google map frame, telephone and email.

- Social media links with icons styled according to the MYDS design guidelines.

- A mobile-friendly layout that adapts from stacked sections to a single row on large screens.

This contact us page template is built for **rapid development** and **easy integration**. It is designed to help teams get started faster by providing a layout that adheres to the **MYDS design system**, eliminating the need to piece together individual components manually.

> ⚠️ **Note**: This is a **design-only template**. It does **not** include any functional logic such as:

> - Working contact details for google map frame, telephone and email

- Responsive contact details section with Google Map frame, telephone and email.

- Social media links with icons styled according to the MYDS design guidelines.

- A mobile-friendly layout that adapts from stacked sections to a single row on large screens.

This contact us page template is built for **rapid development** and **easy integration**. It is designed to help teams get started faster by providing a layout that adheres to the **MYDS design system**, eliminating the need to piece together individual components manually.

> ⚠️ **Note**: This is a **design-only template**. It does **not** include any functional logic such as:

> - Working contact details for Google Map frame, telephone and email

Copilot · 2026-02-13T03:03:14Z

+
+> ⚠️ **Note**: This is a **design-only template**. It does **not** include any functional logic such as:
+> - Working contact details for google map frame, telephone and email
+> - Working Social media links


The phrase "Social media" should be lowercase "social media" to match standard English capitalization conventions where it's not at the beginning of a sentence or in a title.

Suggested change

> - Working Social media links

> - Working social media links

Copilot · 2026-02-13T03:03:14Z

+## Customization
+


Duplicate "Customization" heading in English appears on line 417 immediately followed by "Penyesuaian" (the Malay translation of Customization) on line 419. Remove the duplicate English heading to maintain consistency in this Malay documentation file.

Suggested change

## Customization

Copilot · 2026-02-13T03:03:15Z

+- Responsive contact details section with google map frame, telephone and email.
+- Social media links with icons styled according to the MYDS design guidelines.
+- A mobile-friendly layout that adapts from stacked sections to a single row on large screens.
+
+This contact us page template is built for **rapid development** and **easy integration**. It is designed to help teams get started faster by providing a layout that adheres to the **MYDS design system**, eliminating the need to piece together individual components manually.
+
+> ⚠️ **Note**: This is a **design-only template**. It does **not** include any functional logic such as:
+> - Working contact details for google map frame, telephone and email


The phrase "google map" should be capitalized as "Google Map" to match proper noun capitalization standards, as it refers to the Google Maps product. This same issue appears multiple times in the documentation.

Suggested change

- Responsive contact details section with google map frame, telephone and email.

- Social media links with icons styled according to the MYDS design guidelines.

- A mobile-friendly layout that adapts from stacked sections to a single row on large screens.

This contact us page template is built for **rapid development** and **easy integration**. It is designed to help teams get started faster by providing a layout that adheres to the **MYDS design system**, eliminating the need to piece together individual components manually.

> ⚠️ **Note**: This is a **design-only template**. It does **not** include any functional logic such as:

> - Working contact details for google map frame, telephone and email

- Responsive contact details section with Google Map frame, telephone and email.

- Social media links with icons styled according to the MYDS design guidelines.

- A mobile-friendly layout that adapts from stacked sections to a single row on large screens.

This contact us page template is built for **rapid development** and **easy integration**. It is designed to help teams get started faster by providing a layout that adheres to the **MYDS design system**, eliminating the need to piece together individual components manually.

> ⚠️ **Note**: This is a **design-only template**. It does **not** include any functional logic such as:

> - Working contact details for Google Map frame, telephone and email

Copilot · 2026-02-13T03:03:15Z

+
+## Customization
+
+You can edit anything inside the code, its fully customizable!


The possessive "its" should be the contraction "it's" (meaning "it is"). The sentence means "it is fully customizable", so the contraction with an apostrophe is correct here.

Suggested change

You can edit anything inside the code, its fully customizable!

You can edit anything inside the code, it's fully customizable!

Copilot · 2026-02-13T03:03:15Z

+## Ciri-ciri
+
+- Susun atur responsif sepenuhnya dengan grid adaptif untuk skrin kecil hingga besar.
+


There's an extra blank list item (line 413) immediately after the first feature item and before the second feature item. This creates an empty bullet point in the rendered documentation. Remove this blank line to maintain proper list formatting.

Suggested change

Muhammad Afnan Mohd Sallehuddin and others added 7 commits August 15, 2025 09:22

add contact use template, docs and fix ms translation

7dd9917

update contact us template lg to xl column div, update ms translation

0d32215

style: remove some text

60a1166

Merge pull request #298 from govtechmy/feat/SOF-101/template-contact-us

6aa33df

Feature: Template for contact us page (SOF-101)

Merge branch 'develop' into feat/SOF-103/template-section

7644712

update contact us template

5bf832d

add pull request template

6c9f65b

4fn4n requested review from Copilot, harrisazmi and zaidaiman February 13, 2026 02:58

4fn4n self-assigned this Feb 13, 2026

4fn4n added the enhancement New feature or request label Feb 13, 2026

Copilot started reviewing on behalf of 4fn4n February 13, 2026 02:59 View session

Copilot AI reviewed Feb 13, 2026

View reviewed changes

update contact us mdx us and ms

dae3bf7

vercel Bot deployed to Preview – myds-storybook February 13, 2026 04:32 View deployment

vercel Bot deployed to Preview – myds February 13, 2026 04:34 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSD-821: contact us template#346

SSD-821: contact us template#346
4fn4n wants to merge 8 commits into
developfrom
feat/SOF-103/template-section

4fn4n commented Feb 13, 2026

Uh oh!

vercel Bot commented Feb 13, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Feb 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		## Ringkasan Umum

		Komponen `ContactUsTemplate` menyediakan contoh UI untuk skrin lupa kata laluan menggunakan komponen [MYDS](https://github.com/govtechmy/myds) Ia merangkumi:

	> You are expected to implement such logic based on your own system needs.
	> Anda dijangka melaksanakan logik tersebut berdasarkan keperluan sistem anda sendiri.

	> - Working Social media links
	> - Working social media links


		## Customization

		You can edit anything inside the code, its fully customizable!

		## Ciri-ciri

		- Susun atur responsif sepenuhnya dengan grid adaptif untuk skrin kecil hingga besar.

Conversation

4fn4n commented Feb 13, 2026

Summarise the feature

Type of change

Checklist

Uh oh!

vercel Bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented Feb 13, 2026 •

edited

Loading

changeset-bot Bot commented Feb 13, 2026 •

edited

Loading