sncfdevelopers / wcs Goto Github PK

A divider component would be nice as it is used in :

• Select groups
• Cards
• Find others...?

Should we merge radial and progress bar into one and passing a prop for the mode ?

<wcs-progress mode="radial"></wcs-progress>
<wcs-progress mode="bar"></wcs-progress>
<!-- or -->
<wcs-progress-radial></wcs-progress-radial>
<wcs-progress-bar></wcs-progress-bar>

• Document that each module using web components should add CUSTOM_ELEMENTS_SCHEMA.
• Change the path to match wcs/dist/... instead wcs/... or change the way we distribute the package.

https://designmetier-bootstrap.sncf.fr/docs/4.3/components/checkboxes-and-radios/

The files :

• .github/CONTRIBUTING.md
• .github/ISSUE_TEMPLATE.md

- are still the default one from the stencil templates.

They should be updated for this project.

Implement textarea

• api design
• focus
• validation
• tests

ref : https://designmetier-bootstrap.sncf.fr/docs/4.3/components/forms/

Implement the toggle component.

https://designmetier-bootstrap.sncf.fr/docs/4.3/components/checkboxes-and-radios/#switch

Other implementations

• https://material.angular.io/components/slide-toggle
• https://clarity.design/documentation/toggle-switches
• https://www.carbondesignsystem.com/components/toggle/code
• https://developer.microsoft.com/en-us/fabric#/controls/web/toggle

Font handling is quirky for now, we should investigate on these points :

• CSS variables for font-family and other font related attributes
• Document and test font integration
• Document that Avenir font is not free of use and therefore should not be used as is for open source.

https://designmetier-bootstrap.sncf.fr/docs/4.3/layout/navs/

Première étape : https://designmetier-bootstrap.sncf.fr/docs/4.3/layout/navs/#simple-action-bar

Tab headers as well as content have no animation, they should have one so that it's clearer to the user that a change is happening.

Implement this component :
https://designmetier-bootstrap.sncf.fr/docs/4.3/components/forms/#range-slider

https://designmetier-bootstrap.sncf.fr/docs/4.3/components/toasts/

Create a design system list in order not to have to think about which one we could compare to when designing APIs.
It would be even better if the list could have a ranking of some sort !

As of now the button does not have a clear mode. That is a mode where everything's transparent except the text until we hover.

This is really useful for icon only buttons.

Box shadows are used in some places, e.g. cards, it would be nice to have box-shadow utilities provided by wcs.

Migrate to v1+ of Stencil.
Breaking changes can be found here

The app-shell is not finished at all, it should at least work on mobile.

Form group component containing support for :

• Label

• Hint

• Error message

• Required

• API Design

• Input, textarea

• Tests

• Doc

ref: https://designmetier-bootstrap.sncf.fr/docs/4.3/components/forms/

The ripple on the button does not work anymore.

reflectToAttr argument to the @Prop() decorator is still used here and there. It must be replaced by the new reflect argument.

According to this article, web components can make use of ngModel without further ado if configured correctly.

We should either make it work by default with ngModel or document and provide a way to do it.

• Input - Done by using directly native element
• TextArea - Use the native element as the input
• Select
• Checkbox
• Switch

• API Design
• Tests
• Docs

ref: https://designmetier-bootstrap.sncf.fr/docs/4.3/components/modal/

The block button should be removed from this package as user can create it themselves using native utilities.

Remaining :

• Basic version
• Multiple values
• Compare function

The design does not define a focused style for the different component.

Some effort has been done on the select but it is not sufficient.

More work should be done in order to find a focused styling that is coherent and reusable across components that can be focused, that is :

• Select
• Checkbox
• Button
• Input
• Tab headers (Are not focusable as of now)

References :

• https://zellwk.com/blog/creating-focus-style/
• https://zellwk.com/blog/design-focus-style/

Créer une liste d'utilisateur pilote pour lancer le projet et avoir des retours rapidement.

A contacter:

When we click on the checkbox on the select, the item and the checkbox state differs.

Tabs header are not focusable, they should be so users can navigate with the keyboard.