This tasks is related to #48

Without mousing over the 3 tabs, it is hard to tell that the buttons are clickable.

Perhaps it is worth looking into creating a stronger affordance for click-ability on these buttons

1. Breadcrumb alignment classes
2. is-small, is-medium, is-large classes
3. Alternatives seperator

• View themes
• Add themes
• Modify and remove themes

Task related to #49

In SGDS css, the declaration for the color for the bottom navigation is blue-ish (#4675d3)

.sgds-bottom-navigation a {
       color: white;
       background-color: #4675d3;
       display: block;
       width: 50%;
       padding: 1rem 5rem;
}

Text highlights in this same navigator is also blue-ish (#2c5bba)

.sgds-bottom-navigation a:hover {
     background-color: #2c5bba;
}

Suggestion to change color of a:hover to something with better contrast

Expected Behavior

On npm packages you should include source code files too, instead of only compiled css / js, so we can use separate sass file , not the whole. Why ? because every project is unique, you can't just change it all. it will break current components while we just want to use the sgds masthead, header style, or icons only.

Current Behavior

Current behavior after npm install on node_modules folder I just found compiled css / js files only. Cannot use it as separate saas file.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. npm install sgds-govtech
2. Look on node_modules/sgds-govtech folder

On mobile devices, the :hover styles do not apply for buttons when users "hover" over a button. The styling for :hover needs to be applied for :active states as well.

Conduct and display results of WCAG compliance checks on all components within static page.

Instructions for making contributions

Need to have docs for the range of padding and margin classes that SGDS uses. These classes should be responsive.

How grid responds to different browser sizing
What classes are available, eg:

• is-three-quarters-mobile
• is-two-thirds-tablet
• is-half-desktop
• is-one-third-widescreen
• is-one-quarter-fullhd
• .is-gapless for rows
• .is-multiline
• .is-centered for rows

at 1770px wide:

at 2200px wide:

solution: move language selector dropdown within the .language_selector div, so it's positioned against its parent.

Updated color

• $cyan: #17a2b8
• $blue: #007bff

No change to secondary

Add pointer-events:none; to the following

 .sgds-pagination-previous[disabled], .sgds-pagination-next[disabled], .sgds-pagination-link[disabled], .sgds-pagination-ellipsis[disabled] {
     cursor: not-allowed;
     pointer-events: none;
}

Media cards are a component feature that are not documented in sgds website.

currently a makeshift documentation exists on
designsystem.gov.sg/testing/card/

On mobile, main nav menu items should be collapsible

hi there o/

just curious if padding and font-size use of px was intentional since height and max-height uses rem.

not sure if font-size scaling is still a thing required for government websites, if it is, then the design would look something like this (which seems rather off to me).

perhaps a fix to this is to use rem or convert everything to px so that it doesn't scale?

wrap .sgds-container.is-fluid for full width navbar

No documentation for usage of pagination components

SGDS does not document what media queries are implemented (sizing etc) nor does it explain how it is responsive and adheres to DSS

Text are not fitting in boxes on components page, need to check if our media queries cover smaller sized screens.

There may be more of such instances of these broken responsive parts that we will need to fix.
In the event that we do not, we should try to cover for all screen resolutions (especially smaller ones!)

Add and maintain a changelog.
Make sure to tag, refer to issues in commits, properly document PRs so we can use github_changelog_generator.

• No information on color classes that are accessible to all components

This behaviour is present by default, and is fixed by setting has-text-weight-semibold to each nav bar item so that its font-weight doesn't change when hovering.

Possible to remove the font-weight change on hover?

The problem:
There is a x-overflow when sgds is used on mobile

How to replicate:

• Use iPhone and open SGDS page
• Use Safari and add iOS user agent using dev tools and load SGDS page

If js is provided for accordion, tabs etc, notifications should have js as well. Easy implementation!

This issue is twofold:

• Landing page link (first from right, under hero image) does not link to templates page
• When linked, href does not trigger the tab to show the templates (stuck on components)

Hotfix:
The link will first link to /docs until the tabs have been upgraded to enable hotlinking from another website.

Automated publishing of npm package with travis:
https://docs.travis-ci.com/user/deployment/npm/

Either:

1. Have new branch called production that can only accept pull requests, every accepted PR leads to an NPM publish
2. Have every tagged commit (e.g. v1.3.4) trigger a publish

Based on analytics, we notice that people have been copying individual links within the footer, perhaps it will make sense to break up the footer snippet and tie it to the SG government Digital Services Standards footer clauses to make it easier for people to adhere to.

Taken from @Neurrone
Buttons are rendered using a tag, which should only be used for links. I suggest using an actual element instead.

This would cause confusion for screen reader users, since the expectation of a link is that it moves you to a new page of the application, while buttons update something within the same page. They will also be read as links, not buttons.
The disabled attribute will also not be read, since its not recognized on links, but is conveyed for buttons. The conditional if statement that executes the onclick handler will no longer be needed, since the browser prevents users from interacting with a

Yellow and white text combo on Notification does not meet WCAG 4.5 on color contrast checker.

#F5A623 - Yellow and #FFFFFF - White