Skip to content

Commit ccc9da7

Browse files
daniele-zuricodaniele-zurico
authored
Merge pull request #285 from Capgemini/release/0.4
Release/0.4
2 parents 584c0e7 + f315731 commit ccc9da7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+2880
-1540
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ dist
77
coverage
88
.parcel-cache
99
example/.parcel-cache/*
10+
example/build
1011
storybook-static

‎CONTRIBUTING.md‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,17 @@ developers managing and developing this project.
1111
1. Clone the repo
1212
`git clone [email protected]:Capgemini/dcx-react-library.git`
1313
2. Run `./setup.sh` in the root `dcx-react-library` folder
14-
3. Run `yarn` within `./example` folder
1514

16-
Once this is done, you can modify any file locally and run `yarn start`,
17-
`yarn test` or `yarn run build`.
18-
19-
If you want to test your component you can import the component into the
20-
`./example` application once you have `yarn start` the `cdcx-react-library`
21-
root project and run `yarn start` within the `./example` folder
15+
this command will install all the dependencies and it will links the dcx-react-library to the example folder.
2216

2317
## Commands
2418

25-
DCX Component Library scaffolds your new library inside the `/src` folder and also sets up a [Parcel-based](https://parceljs.org) playground for it inside the `/example` folder.
19+
DCX Component Library scaffolds your new library inside the `/src` folder and also sets up a [Create-React-App](https://reactjs.org/docs/create-a-new-react-app.html) playground for it inside the `/example` folder.
2620

2721
The recommended workflow is to run DCX Component Library in one terminal:
2822

2923
```bash
30-
yarn install #to install dependencies
31-
yarn start #to run the library
24+
yarn dev #to run the library
3225
```
3326

3427
This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
@@ -53,29 +46,30 @@ Run the example inside another terminal:
5346

5447
```bash
5548
cd example
56-
yarn install #to install dependencies
5749
yarn start #to run the examples
5850
```
5951

60-
The default example imports and live reloads whatever is in the `/dist` folder, so if you are seeing an out of date component, make sure DCX Component Library is running in watch mode as recommended above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
52+
The default example imports and live reloads whatever is in the `/dist` folder, so if you are seeing an out of date component, make sure DCX Component Library is running in watch mode as recommended above.
6153

62-
- To do a one-off build, use `yarn build`;
54+
- To do a one-off build, use `yarn build` at the root of your project;
6355

64-
- To run tests, use `yarn test`;
56+
- To run tests, use `yarn test` at the root of your project;
6557

66-
- To check the code coverage use `yarn test: coverage;
58+
- To check the code coverage use `yarn test: coverage at the root of your project;
6759

68-
- To fix all the linting errors use `yarn lint: fix`.
60+
- To fix all the linting errors use `yarn lint: fix` at the root of your project.
6961

7062
## Submit your PR
7163

7264
To create a new component the following must be satisfied before adding
7365
`READY TO MERGE` labels on PR:
7466

75-
1. create a branch called: feature/7-input (where 7 is the git issue number)
76-
2. create a folder under `src` for the component-name
77-
3. create the test under `__tests__` within the component-name folder
78-
4. create a demo in the `example/src`
67+
1. we usually have a base branch to branch from based on the release we currently are: release/x.x
68+
2. create a branch called: feature/7-input (where 7 is the git issue number) from the base branch (release/x.x)
69+
3. create a folder under `src` for the component-name
70+
4. create the test under `__tests__` within the component-name folder
71+
5. create or edit a demo in the `example/src`
72+
6. create or edit the story in the `stories`
7973

8074
Example folder structure with component `SnackBar`:
8175

@@ -137,6 +131,10 @@ We use circleCi for continuous integration. CircleCi configuration is stored und
137131

138132
Code quality is set up for you with `prettier`, `husky`, and `lint-staged`.
139133

134+
## Documentation
135+
136+
All the stories created in Storybook are deployed in [Chromatic](main--6069a6f47f4b9f002171f8e1.chromatic.com). You can also see a preview of your PR before requesting a merge looking on the circle-ci pipline.
137+
140138
### Jest
141139

142140
Jest tests are set up to run with `yarn test`. PR with a coverage less than **100%** will not be merged.

‎README.md‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,14 @@ dcx-react-library is **UI/UX agnostic** so you need to provide styling to match
1212

1313
## Components
1414

15-
To see the full list of components built in dcx-react-library, and how to use it, have a look on our [storybook-showcase](https://www.chromatic.com/library?appId=6069a6f47f4b9f002171f8e1) (Click on View Storybook to see the list of components)
15+
To see the full list of components built in dcx-react-library, and how to use it, have a look on our [storybook-showcase](https://main--6069a6f47f4b9f002171f8e1.chromatic.com)
1616
In Storybook, each component is presented with 4 main sections:
1717

1818
- **documentation**: describes the list of properties available, optional and mandatory;
1919
- **live**: you can play directly with all the properties and see the component's behaviour;
2020
- **unstyled**: the bare component without any styling applied;
2121
- **styled**: an example (mainly based on GDS) of how to style the component and the final result.
2222

23-
![Image of dcx-react-library showcase](https://github.com/Capgemini/dcx-react-library/blob/main/stories/img/storybook-doc.png)
24-
2523
## How to use it
2624

2725
Using dcx-react-library should not require any particular setup. You only need to import the component and use it :smiley:
@@ -32,13 +30,22 @@ Steps:
3230
- Import the component you need and use it. For example:
3331

3432
```js
35-
import { Button } from 'dcx-react-library';
33+
import { Button } from '@capgeminiuk/dcx-react-library';
3634

3735
const App = () => {
3836
return <Button label="start" onClick={() => {}} />;
3937
};
4038
```
4139

40+
## Styling
41+
42+
We don't ship `dcx-react-library` with any included CSS. However, some stylesheet is required to use some components (for example, `toggle` and `tooltip`).
43+
44+
```js
45+
/* The following line can be included in your src/index.js or App.js file */
46+
import '@capgeminiuk/dcx-react-library/dist/dcx-react-library.css';
47+
```
48+
4249
## Contributing
4350

4451
If you'd like to contribute, please follow our [CONTRIBUTING section](https://github.com/Capgemini/dcx-react-library/blob/main/CONTRIBUTING.md).

‎example/src/components/FormCheckboxDemo.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,13 @@ export const FormCheckboxDemo = () => {
132132
},
133133
}}
134134
/>
135+
<h2>Group using string values</h2>
136+
<FormGroup
137+
name="name-of-group-string"
138+
type="checkbox"
139+
onChange={handleFormChange}
140+
items={['yes', 'no']}
141+
/>
135142
<pre>{formValue}</pre>
136143
</>
137144
);

‎example/src/components/FormInputDemo.tsx‎

Lines changed: 113 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,21 @@ export const FormInputDemo = () => {
3131
placeholder: 'enter your email',
3232
}}
3333
/>
34+
<h1>Label</h1>
35+
<FormInput
36+
name="password"
37+
type="text"
38+
value={value}
39+
onChange={handleChange}
40+
inputProps={{
41+
placeholder: 'enter your email',
42+
htmlFor: 'input-id',
43+
}}
44+
label="this is a label"
45+
labelProps={{
46+
htmlFor: 'input-id',
47+
}}
48+
/>
3449
<h1>Prefix</h1>
3550
<FormInput
3651
name="password"
@@ -40,16 +55,39 @@ export const FormInputDemo = () => {
4055
inputProps={{
4156
placeholder: 'enter your email',
4257
}}
43-
prefix={
44-
<div
45-
style={{
58+
prefix={{
59+
properties: {
60+
style: {
4661
border: '1px solid #d2d2d2',
4762
padding: '5px',
48-
}}
49-
>
50-
<FontAwesomeIcon icon={faAt} />
51-
</div>
52-
}
63+
},
64+
},
65+
content: <FontAwesomeIcon icon={faAt} />,
66+
}}
67+
/>
68+
<h1>Prefix Label</h1>
69+
<FormInput
70+
name="password"
71+
type="text"
72+
value={value}
73+
onChange={handleChange}
74+
inputProps={{
75+
placeholder: 'enter your email',
76+
id: 'input-id',
77+
}}
78+
label="this is a label"
79+
labelProps={{
80+
htmlFor: 'input-id',
81+
}}
82+
prefix={{
83+
properties: {
84+
style: {
85+
border: '1px solid #d2d2d2',
86+
padding: '5px',
87+
},
88+
},
89+
content: <FontAwesomeIcon icon={faAt} />,
90+
}}
5391
/>
5492
<h1>Suffix</h1>
5593
<FormInput
@@ -60,16 +98,15 @@ export const FormInputDemo = () => {
6098
inputProps={{
6199
placeholder: 'enter your email',
62100
}}
63-
suffix={
64-
<div
65-
style={{
101+
suffix={{
102+
properties: {
103+
style: {
66104
border: '1px solid #d2d2d2',
67105
padding: '5px',
68-
}}
69-
>
70-
<FontAwesomeIcon icon={faAt} />
71-
</div>
72-
}
106+
},
107+
},
108+
content: <FontAwesomeIcon icon={faAt} />,
109+
}}
73110
/>
74111
<h1>Prefix and suffix</h1>
75112
<FormInput
@@ -80,26 +117,56 @@ export const FormInputDemo = () => {
80117
inputProps={{
81118
placeholder: 'enter your email',
82119
}}
83-
prefix={
84-
<div
85-
style={{
120+
prefix={{
121+
properties: {
122+
style: {
86123
border: '1px solid #d2d2d2',
87124
padding: '5px',
88-
}}
89-
>
90-
<FontAwesomeIcon icon={faAt} />
91-
</div>
92-
}
93-
suffix={
94-
<div
95-
style={{
125+
},
126+
},
127+
content: <FontAwesomeIcon icon={faAt} />,
128+
}}
129+
suffix={{
130+
properties: {
131+
style: {
96132
border: '1px solid #d2d2d2',
97133
padding: '5px',
98-
}}
99-
>
100-
<FontAwesomeIcon icon={faAt} />
101-
</div>
102-
}
134+
},
135+
},
136+
content: <FontAwesomeIcon icon={faAt} />,
137+
}}
138+
/>
139+
<h1>Prefix and suffix with label</h1>
140+
<FormInput
141+
name="password"
142+
type="text"
143+
value={value}
144+
onChange={handleChange}
145+
inputProps={{
146+
placeholder: 'enter your email',
147+
}}
148+
prefix={{
149+
properties: {
150+
style: {
151+
border: '1px solid #d2d2d2',
152+
padding: '5px',
153+
},
154+
},
155+
content: <FontAwesomeIcon icon={faAt} />,
156+
}}
157+
suffix={{
158+
properties: {
159+
style: {
160+
border: '1px solid #d2d2d2',
161+
padding: '5px',
162+
},
163+
},
164+
content: <FontAwesomeIcon icon={faAt} />,
165+
}}
166+
label="this is a label"
167+
labelProps={{
168+
htmlFor: 'input-id',
169+
}}
103170
/>
104171
<h1>Validation</h1>
105172
<FormInput
@@ -126,26 +193,24 @@ export const FormInputDemo = () => {
126193
'your password need to be min 8 chars 1 Uppercase, 1 Number and one special character',
127194
}}
128195
errorPosition={ErrorPosition.BOTTOM}
129-
prefix={
130-
<div
131-
style={{
196+
prefix={{
197+
properties: {
198+
style: {
132199
border: '1px solid #d2d2d2',
133200
padding: '5px',
134-
}}
135-
>
136-
<FontAwesomeIcon icon={faAt} />
137-
</div>
138-
}
139-
suffix={
140-
<div
141-
style={{
201+
},
202+
},
203+
content: <FontAwesomeIcon icon={faAt} />,
204+
}}
205+
suffix={{
206+
properties: {
207+
style: {
142208
border: '1px solid #d2d2d2',
143209
padding: '5px',
144-
}}
145-
>
146-
<FontAwesomeIcon icon={faAt} />
147-
</div>
148-
}
210+
},
211+
},
212+
content: <FontAwesomeIcon icon={faAt} />,
213+
}}
149214
/>
150215
<div>isValid:{showValid.toString()}</div>
151216
</>

‎example/src/components/FormRadioDemo.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,17 @@ export const FormRadioDemo = () => {
209209
//@ts-ignore
210210
onChange={handleGroupConditionalChange}
211211
/>
212+
<h4 id="basic-radio-group-with-string-tag">
213+
Basic Group Radios using string
214+
</h4>
215+
<FormGroup
216+
ariaDescribedBy="basic-radio-group-tag"
217+
name="group4"
218+
type="radio"
219+
items={['Option 1', 'Option 2', 'Option 3']}
220+
//@ts-ignore
221+
onChange={handleGroupConditionalChange}
222+
/>
212223
<br />
213224
</>
214225
);

‎example/src/components/FormSelectDemo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ export const FormSelectDemo = () => {
1717
</label>
1818
<br />
1919
<FormSelect
20-
nullOption="Select..."
20+
value="Arsenal"
2121
optionGroups={[
2222
{
2323
label: 'English Premier League',
2424
displayCount: true,
2525
options: [
26-
{ label: 'Arsenal', value: 'Arsenal', selected: true },
26+
{ label: 'Arsenal', value: 'Arsenal' },
2727
{ label: 'Chelsea', value: 'Chelsea' },
2828
{ label: 'Liverpool', value: 'Liverpool' },
2929
{ label: 'Manchester City', value: 'Manchester City' },

0 commit comments

Comments
 (0)