Skip to content

Commit 57fcfb4

Browse files
arielsrodriguezarielsrodriguez
authored
Merge pull request #76 from dd3tech/feat/PD-1729-single-select-doc
Feat(SingleSelect): Add documentation single select componente
2 parents 17780f0 + 47bea30 commit 57fcfb4

6 files changed

Lines changed: 198 additions & 24 deletions

File tree

‎.github/workflows/format.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ jobs:
1414
- uses: actions/checkout@v3
1515
- uses: actions/setup-node@v3
1616
with:
17-
node-version: '16'
17+
node-version: '20'
1818
cache: npm
1919
- run: npm install
2020

‎.github/workflows/sonarcloud.yml‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
name: SonarCloud analysis
22

33
on:
4-
pull_request:
5-
branches: ['main']
6-
workflow_dispatch:
4+
pull_request:
5+
branches: ['main']
6+
workflow_dispatch:
77

88
permissions:
9-
pull-requests: read
9+
pull-requests: read
1010

1111
jobs:
12-
Analysis:
13-
runs-on: ubuntu-latest
12+
Analysis:
13+
runs-on: ubuntu-latest
1414

15-
steps:
16-
- name: Analyze with SonarCloud
15+
steps:
16+
- name: Analyze with SonarCloud
1717

18-
uses: SonarSource/sonarcloud-github-action@de2e56b42aa84d0b1c5b622644ac17e505c9a049
19-
env:
20-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information
21-
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Generate a token on Sonarcloud.io, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
22-
with:
23-
args: -Dsonar.projectKey=dd3tech_dd360-components-docs -Dsonar.organization=dd3tech-1
18+
uses: SonarSource/sonarcloud-github-action@de2e56b42aa84d0b1c5b622644ac17e505c9a049
19+
env:
20+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information
21+
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Generate a token on Sonarcloud.io, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
22+
with:
23+
args:
24+
-Dsonar.projectKey=dd3tech_dd360-components-docs
25+
-Dsonar.organization=dd3tech-1

‎docs/form/single-select.mdx‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
---
2+
product: dd360-ds
3+
title: React SingleSelect component
4+
components: SingleSelect
5+
---
6+
import { DynamicHeroIcon } from 'dd360-ds'
7+
8+
<br id='top' />
9+
<br />
10+
11+
<Label>Form</Label>
12+
13+
# <HeaderDocCustom title="Single Select" pathUrl="form-single-select" />
14+
15+
The SingleSelect component allows you to create a modern and functional option selector, ideal for forms and web applications that require option selection.
16+
17+
<br />
18+
19+
##### <span name="floating-nav">Imports</span>
20+
21+
The first alternative is recommended as it can reduce the application bundle
22+
23+
<WindowEditor codeString="import SingleSelect from 'dd360-ds/SingleSelect'" />
24+
<WindowEditor codeString="import { SingleSelect } from 'dd360-ds'" />
25+
26+
##### <span name="floating-nav">Usage</span>
27+
28+
The SingleSelect component requires at least the `optionsList` property that defines the available options for selection.
29+
30+
<Playground className='h-60'>
31+
<SingleSelect
32+
optionsList={[
33+
{ value: '1', label: 'Option 1' },
34+
{ value: '2', label: 'Option 2' },
35+
{ value: '3', label: 'Option 3' }
36+
]}
37+
/>
38+
</Playground>
39+
40+
The following code shows how to use the SingleSelect component:
41+
42+
<WindowEditor
43+
codeString={`import { SingleSelect } from 'dd360-ds'
44+
45+
<SingleSelect
46+
optionsList={[
47+
{ value: '1', label: 'Option 1' },
48+
{ value: '2', label: 'Option 2' },
49+
{ value: '3', label: 'Option 3' }
50+
]}
51+
/>
52+
`}/>
53+
54+
<br />
55+
56+
##### <span name="floating-nav">Label</span>
57+
58+
The <TagDocs text='label' /> property allows you to add a descriptive label to the selector.
59+
60+
<Playground className='h-60'>
61+
<SingleSelect
62+
label="Select an option"
63+
optionsList={[
64+
{ value: '1', label: 'Option 1' },
65+
{ value: '2', label: 'Option 2' },
66+
{ value: '3', label: 'Option 3' }
67+
]}
68+
/>
69+
</Playground>
70+
71+
<WindowEditor
72+
codeString={`import { SingleSelect } from 'dd360-ds'
73+
74+
<SingleSelect
75+
label="Select an option"
76+
optionsList={[
77+
{ value: '1', label: 'Option 1' },
78+
{ value: '2', label: 'Option 2' },
79+
{ value: '3', label: 'Option 3' }
80+
]}
81+
/>
82+
`}/>
83+
84+
<br />
85+
86+
##### <span name="floating-nav">Large</span>
87+
88+
The <TagDocs text='large' /> property allows you to increase the size of the selector.
89+
90+
<Playground className='h-60'>
91+
<SingleSelect
92+
large
93+
optionsList={[
94+
{ value: '1', label: 'Option 1' },
95+
{ value: '2', label: 'Option 2' },
96+
{ value: '3', label: 'Option 3' }
97+
]}
98+
/>
99+
</Playground>
100+
101+
<WindowEditor
102+
codeString={`import { SingleSelect } from 'dd360-ds'
103+
104+
<SingleSelect
105+
large
106+
optionsList={[
107+
{ value: '1', label: 'Option 1' },
108+
{ value: '2', label: 'Option 2' },
109+
{ value: '3', label: 'Option 3' }
110+
]}
111+
/>
112+
`}/>
113+
114+
<br />
115+
116+
##### <span name="floating-nav">Disabled</span>
117+
118+
The <TagDocs text='isDisabled' /> property allows you to disable the selector.
119+
120+
<Playground className='h-60'>
121+
<SingleSelect
122+
isDisabled
123+
optionsList={[
124+
{ value: '1', label: 'Option 1' },
125+
{ value: '2', label: 'Option 2' },
126+
{ value: '3', label: 'Option 3' }
127+
]}
128+
/>
129+
</Playground>
130+
131+
<WindowEditor
132+
codeString={`import { SingleSelect } from 'dd360-ds'
133+
134+
<SingleSelect
135+
isDisabled
136+
optionsList={[
137+
{ value: '1', label: 'Option 1' },
138+
{ value: '2', label: 'Option 2' },
139+
{ value: '3', label: 'Option 3' }
140+
]}
141+
/>
142+
`}/>
143+
144+
<br />
145+
146+
##### <span name="floating-nav">API Reference</span>
147+
148+
<CustomTableDocs
149+
dataTable={[
150+
{ title: 'optionsList', default: null, types: ['ISelectOption[]'], required: true },
151+
{ title: 'label', default: null, types: ['string'] },
152+
{ title: 'value', default: null, types: ['string | number'] },
153+
{ title: 'large', default: false, types: ['boolean'] },
154+
{ title: 'isDisabled', default: false, types: ['boolean'] },
155+
{ title: 'isRequired', default: false, types: ['boolean'] },
156+
{ title: 'className', default: null, types: ['string'] },
157+
{ title: 'classNameAdornment', default: null, types: ['string'] },
158+
{ title: 'classNameDropdown', default: null, types: ['string'] },
159+
{ title: 'styleDropdown', default: null, types: ['StyleObject'] },
160+
{ title: 'onChangeSelect', default: null, types: ['(option: ISelectOption) => void'] }
161+
]}
162+
/>
163+
164+
Note: This documentation assumes that the user has basic knowledge of React and how to use components in React applications.
165+
166+
<BackAndForwardController />

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@algolia/autocomplete-core": "^1.8.3",
2020
"@docsearch/react": "^3.5.1",
2121
"@vercel/analytics": "^1.0.1",
22-
"dd360-ds": "6.38.0",
22+
"dd360-ds": "6.39.1",
2323
"dd360-utils": "18.1.0",
2424
"gray-matter": "^4.0.3",
2525
"i18next": "^22.4.9",

‎src/components/Layout/SideBarDocs.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,8 @@ export const components: ComponentObjectProps = {
9797
},
9898
{
9999
label: 'Filter Bar Button',
100-
pathname: 'filter-bar-button'
100+
pathname: 'filter-bar-button',
101+
badge: BADGE_TYPES.new
101102
}
102103
]
103104
},
@@ -193,6 +194,11 @@ export const components: ComponentObjectProps = {
193194
label: 'Select',
194195
pathname: 'select'
195196
},
197+
{
198+
label: 'Single Select',
199+
pathname: 'single-select',
200+
badge: BADGE_TYPES.new
201+
},
196202
{
197203
label: 'Text Area',
198204
pathname: 'textarea'

0 commit comments

Comments
 (0)