30 | The WCS documentation has been moved.
31 |If you are not redirected within 5 seconds, click here to go to the new website.
33 | 34 | 35 | -------------------------------------------------------------------------------- /example/angular-standalone/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /example/angular-standalone/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /example/angular-standalone/README.md: -------------------------------------------------------------------------------- 1 | # WcsAngularStandaloneExample 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.3. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /example/angular-standalone/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wcs-angular-standalone-example", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^18.0.0", 14 | "@angular/common": "^18.0.0", 15 | "@angular/compiler": "^18.0.0", 16 | "@angular/core": "^18.0.0", 17 | "@angular/forms": "^18.0.0", 18 | "@angular/platform-browser": "^18.0.0", 19 | "@angular/platform-browser-dynamic": "^18.0.0", 20 | "@angular/router": "^18.0.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.14.3", 24 | "wcs-core": "file:../../", 25 | "wcs-angular": "file:../../angular/dist/wcs-angular/" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "^18.0.3", 29 | "@angular/cli": "^18.0.3", 30 | "@angular/compiler-cli": "^18.0.0", 31 | "@types/jasmine": "~5.1.0", 32 | "jasmine-core": "~5.1.0", 33 | "karma": "~6.4.0", 34 | "karma-chrome-launcher": "~3.2.0", 35 | "karma-coverage": "~2.2.0", 36 | "karma-jasmine": "~5.1.0", 37 | "karma-jasmine-html-reporter": "~2.1.0", 38 | "typescript": "~5.4.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /example/angular-standalone/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SNCFdevelopers/wcs/766f480e1e644ea6aa3aba19af41d326c17ed01e/example/angular-standalone/public/favicon.ico -------------------------------------------------------------------------------- /example/angular-standalone/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | imports: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have the 'wcs-angular-standalone-example' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('wcs-angular-standalone-example'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('h1')?.textContent).toContain('Hello, wcs-angular-standalone-example'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /example/angular-standalone/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | import { WcsAngularModule } from 'wcs-angular'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | standalone: true, 8 | imports: [RouterOutlet, WcsAngularModule], 9 | template: ` 10 |Angular Standalone Example
11 |About
9 |Découvrir le groupe SNCF.
10 |Détails :
11 |
12 |
15 | {{ article.title }}
16 |
17 |
18 | `,
19 | styles: [`
20 | .links-container {
21 | display: flex;
22 | flex-direction: column;
23 | align-items: flex-start;
24 | }
25 | `]
26 | })
27 | export class AboutIntroComponent implements OnInit {
28 | aboutArticles = [];
29 |
30 | ngOnInit(): void {
31 | this.aboutArticles = this.getAllAboutArticles();
32 | }
33 |
34 | // Service mock
35 | getAllAboutArticles() {
36 | return aboutArticles;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/example/angular/src/app/about/about.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-about',
5 | template: `
6 |
15 | Connexion
16 |
17 | 
9 | WcsReact Example
10 |
11 |
12 | Connexion
13 |
14 |
15 |
12 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/example/react/src/components/nav.tsx:
--------------------------------------------------------------------------------
1 | import { ReactElement } from 'react';
2 | import { WcsMatIcon, WcsNav, WcsNavItem } from 'wcs-react';
3 | import { NavLink } from 'react-router-dom';
4 |
5 | export default function Nav(): ReactElement {
6 | return (
7 | Demo of the input component
13 |
14 |
27 |
15 |
16 | setFirstNameWcsInput(event.target.value?.toString() ?? '')}>
18 |
20 | Hi! {firstNameWcsInput}
19 |
21 |
22 | setFirstNameWcsChange(event.detail.value?.toString() ?? '')}>
24 |
26 | Hi! {firstNameWcsChange}
25 |
12 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/example/react/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(
8 | document.getElementById('root') as HTMLElement
9 | );
10 | root.render(
11 | Demo of the textarea component
13 |
14 |
27 |
15 |
16 | setFirstNameWcsInput(event.target.value?.toString() ?? '')}>
18 |
20 | Hi! {firstNameWcsInput}
19 |
21 |
22 | setFirstNameWcsChange(event.detail.value?.toString() ?? '')}>
24 |
26 | Hi! {firstNameWcsChange}
25 |About
16 |This is the about page
17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /example/react/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /example/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | *.tgz 4 | dist-transpiled/ 5 | -------------------------------------------------------------------------------- /react/README.md: -------------------------------------------------------------------------------- 1 | # WcsReact 2 | 3 | [](https://www.npmjs.com/package/wcs-react) 4 | [](https://react.dev/) 5 | 6 | 7 | This project is the React integration of the [wcs-core package](https://www.npmjs.com/package/wcs-core). 8 | It contains : 9 | * **Custom elements** definition as functional React component 10 | * **Props** handling 11 | * **Utils** functions 12 | 13 | ## Requirements 14 | 15 | - Generated with [Create-React-App](https://create-react-app.dev/) version 5.0.1 16 | - Requires React >= 18 17 | 18 | ## Build 19 | 20 | Run `npm run build` from the wcs-core/react folder. 21 | 22 | ## Integration in your project 23 | 24 | Read the official [WCS documentation](https://wcs.dev.sncf/?path=/docs/documentation-getting-started-react--documentation) 25 | for React integration. 26 | 27 | ## Further help 28 | 29 | To get more help on the Create-React-App CLI use `npx create-react-app --help` or go check out the [Create-React-App documentation](https://create-react-app.dev/docs/getting-started). 30 | 31 | ## Licence 32 | 33 | [MIT](https://gitlab.com/SNCF/wcs/-/blob/master/LICENSE) 34 | -------------------------------------------------------------------------------- /react/lib/components/stencil-generated/react-component-lib/index.ts: -------------------------------------------------------------------------------- 1 | export { createReactComponent } from './createComponent'; 2 | export { createOverlayComponent } from './createOverlayComponent'; 3 | -------------------------------------------------------------------------------- /react/lib/components/stencil-generated/react-component-lib/interfaces.ts: -------------------------------------------------------------------------------- 1 | // General types important to applications using stencil built components 2 | export interface EventEmitter input.click()}>
23 | (input = el)}
31 | onClick={_ => onClick(row)}>
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/hint/hint.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | --wcs-hint-font-size-default: var(--wcs-semantic-font-size-caption-2);
3 | --wcs-hint-font-size-small: var(--wcs-semantic-font-size-caption-3);
4 | --wcs-hint-font-weight: var(--wcs-semantic-font-weight-book);
5 | --wcs-hint-color: var(--wcs-semantic-color-text-secondary);
6 |
7 | font-size: var(--wcs-hint-font-size-default);
8 | font-weight: var(--wcs-hint-font-weight);
9 | color: var(--wcs-hint-color);
10 | }
11 |
12 | :host([small]) {
13 | font-size: var(--wcs-hint-font-size-small);
14 | font-weight: var(--wcs-hint-font-weight);
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/hint/hint.tsx:
--------------------------------------------------------------------------------
1 | import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';
2 |
3 | /**
4 | * The `wcs-hint` should always be wrapped in a `wcs-form-field`.
5 | * It is used to display an informative message under the field indicating an incorrect user input.
6 | *
7 | * ## Accessibility guidelines 💡
8 | * - Provide a relevant hint message to inform the users about the format, how the data should be filled in, or what is the purpose of the field
9 | * - `aria-description` will be automatically added to the field for screen readers
10 | *
11 | * @cssprop --wcs-hint-color - Color of the text
12 | * @cssprop --wcs-hint-font-weight - Font weight of the text
13 | * @cssprop --wcs-hint-font-size-default - Font size default of the text
14 | * @cssprop --wcs-hint-font-size-small - Font size small of the text
15 | */
16 | @Component({
17 | tag: 'wcs-hint',
18 | styleUrl: 'hint.scss',
19 | shadow: true,
20 | })
21 | export class Hint implements ComponentInterface {
22 | /**
23 | * Whether the component should display the small version of the hint
24 | */
25 | @Prop({ reflect: true, mutable: true })
26 | small: boolean = false;
27 |
28 | render() {
29 | return (
30 |
23 | Contenu du site
24 |
25 | `,
26 | }
27 |
--------------------------------------------------------------------------------
/stories/components/divider/divider.stories.ts:
--------------------------------------------------------------------------------
1 | import { Meta, StoryFn } from '@storybook/web-components';
2 | import { html } from 'lit-html';
3 | import { getComponentArgs } from '../../utils/args-generation';
4 |
5 | const meta: Meta = {
6 | title: 'Components/Divider',
7 | component: 'wcs-divider',
8 | argTypes: getComponentArgs('wcs-divider'),
9 | };
10 | export default meta;
11 |
12 | const Template: StoryFn = () => html`
13 | Text before divider
14 |Text after divider
16 | `; 17 | 18 | const DividerInCardTemplate: StoryFn = () => html` 19 |
16 |
17 | Dropdown
18 | Premier item
19 | Second item
21 |
22 |
23 |
24 | `
25 | }
26 |
--------------------------------------------------------------------------------
/stories/components/dropdown/dropdown-header.stories.ts:
--------------------------------------------------------------------------------
1 | import { Meta, StoryObj } from '@storybook/web-components';
2 | import { html } from 'lit-html';
3 |
4 | const meta: Meta = {
5 | title: 'Components/Dropdown/Subcomponents/Dropdown Header',
6 | component: 'wcs-dropdown-header',
7 | };
8 |
9 | export default meta;
10 |
11 | export const Default: StoryObj = {
12 | render: () => html`
13 |
14 |
15 |
16 | Dropdown
17 | ACTION HEADER GROUP 1
18 | Item 1 group 1
19 | Item 2 group 1
20 |
21 |
22 |
23 | `
24 | }
25 |
--------------------------------------------------------------------------------
/stories/components/dropdown/dropdown-item.stories.ts:
--------------------------------------------------------------------------------
1 | import { Meta, StoryObj } from '@storybook/web-components';
2 | import { html } from 'lit-html';
3 | import { DropdownStoryArgs } from "./dropdown.stories";
4 | import { getComponentArgs } from "../../utils/args-generation";
5 |
6 | const meta: Meta = {
7 | title: 'Components/Dropdown/Subcomponents/Dropdown Item',
8 | component: 'wcs-dropdown-item',
9 | argTypes: getComponentArgs('wcs-dropdown-item')
10 | };
11 |
12 | export default meta;
13 |
14 | export const Default: StoryObj
18 |
19 | Dropdown
20 | Action 1
21 | Action 2
22 |
23 |
24 |
25 | `
26 | }
27 |
--------------------------------------------------------------------------------
/stories/components/field/field-content.stories.ts:
--------------------------------------------------------------------------------
1 | import { Meta, StoryFn, StoryObj } from '@storybook/web-components';
2 | import { html } from 'lit-html';
3 | import { getComponentArgs } from "../../utils/args-generation";
4 |
5 | const meta: Meta = {
6 | title: 'Components/Field/Field Content',
7 | component: 'wcs-field-content',
8 | argTypes: getComponentArgs('wcs-field-content'),
9 | };
10 |
11 | export default meta;
12 |
13 | export const Default = {
14 | render: () => html`
15 |