Skip to content
This repository was archived by the owner on Aug 7, 2020. It is now read-only.

Commit e690a84

Browse files
Axel Peterneolitec
Axel Peter
authored and
neolitec
committed
chore(oui-stepper): update examples
1 parent 31ea3a0 commit e690a84

File tree

1 file changed

+67
-156
lines changed

1 file changed

+67
-156
lines changed

‎packages/oui-stepper/README.md‎

Lines changed: 67 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,57 @@
44

55
## Usage
66

7-
### Simple step
7+
### Linear stepper
8+
9+
**Note**: The value of the custom validation attribute doesn't override the angular form validation `form.$valid`. Both are needed to be `true` to enable the submission.
810

911
```html:preview
10-
<oui-stepper>
11-
<oui-step-form
12-
header="Simple step">
13-
<oui-field label="Lorem ipsum" size="xl">
14-
<input class="oui-input" name="simpleInput1"
15-
type="text" required
16-
ng-model="$ctrl.simpleInput1">
12+
<oui-stepper linear>
13+
<oui-step-form header="Simple step"
14+
description="This is a description">
15+
<oui-field label="Email" size="xl">
16+
<input class="oui-input" type="email" name="email"
17+
ng-model="$ctrl.user.email" required>
1718
</oui-field>
18-
<oui-field label="Dolor sit amet" size="xl">
19-
<input class="oui-input" name="simpleInput2"
20-
type="text" required
21-
ng-model="$ctrl.simpleInput2">
19+
20+
<oui-field label="Username" error-messages="{
21+
pattern: 'Username must be alphabetic with a length between 3 and 8.'
22+
}" size="xl">
23+
<input class="oui-input" type="text" name="username"
24+
ng-model="$ctrl.user.username" ng-pattern="/^[a-zA-Z]{3,8}$/" required>
25+
</oui-field>
26+
</oui-step-form>
27+
28+
<oui-step-form header="Skippable step" skippable
29+
description="This is another description">
30+
<oui-field label="Firstname" size="xl">
31+
<input class="oui-input" type="text" name="firstname"
32+
ng-model="$ctrl.user.firstname" maxlength="32">
33+
</oui-field>
34+
<oui-field label="Lastname" size="xl">
35+
<input class="oui-input" type="text" name="lastname"
36+
ng-model="$ctrl.user.lastname" maxlength="32">
37+
</oui-field>
38+
<oui-field label="Description" size="xl">
39+
<oui-textarea model="$ctrl.user.description" name="description" placeholder="Please insert your text..." maxlength="10"></oui-textarea>
40+
</oui-field>
41+
</oui-step-form>
42+
43+
<oui-step-form header="Custom validation and navigation"
44+
navigation="$ctrl.isValid"
45+
valid="$ctrl.isValid">
46+
<button class="oui-button" type="button"
47+
ng-class="{
48+
'oui-button_primary': $ctrl.isValid,
49+
'oui-button_secondary': !$ctrl.isValid
50+
}"
51+
ng-click="$ctrl.isValid = !$ctrl.isValid">
52+
Toggle navigation &amp; validation
53+
</button>
54+
<oui-field label="Lorem ipsum" size="xl">
55+
<input class="oui-input" name="customValidationInput"
56+
type="text" autocomplete="off" required
57+
ng-model="$ctrl.skippableInput">
2258
</oui-field>
2359
</oui-step-form>
2460
</oui-stepper>
@@ -29,7 +65,7 @@
2965
```html:preview
3066
<div class="oui-doc-preview-only">
3167
<p>
32-
<button class="oui-button" type="text"
68+
<button class="oui-button" type="button"
3369
ng-class="{
3470
'oui-button_primary': $ctrl.stepDisabled,
3571
'oui-button_secondary': !$ctrl.stepDisabled
@@ -62,28 +98,6 @@
6298
</oui-stepper>
6399
```
64100

65-
### Skippable step
66-
67-
**Note**: This step has no input with attributes that trigger an error
68-
69-
```html:preview
70-
<oui-stepper>
71-
<oui-step-form skippable
72-
header="Skippable step">
73-
<oui-field label="Lorem ipsum" size="xl">
74-
<input class="oui-input" name="skippableInput"
75-
type="text" autocomplete="off"
76-
ng-model="$ctrl.skippableInput">
77-
</oui-field>
78-
<oui-field label="Dolor sit amet" size="xl">
79-
<oui-textarea name="skippableTextarea" rows="7"
80-
model="$ctrl.skippableTextarea">
81-
</oui-textarea>
82-
</oui-field>
83-
</oui-step-form>
84-
</oui-stepper>
85-
```
86-
87101
### Events on `oui-stepper`
88102

89103
**Note**: If you want to access the forms inside `on-finish` callback, you need to use the `forms` variable as below.
@@ -132,127 +146,6 @@
132146
</div>
133147
```
134148

135-
### Custom validation
136-
137-
**Note**: The value of the custom validation attribute doesn't override the angular form validation `form.$valid`. Both are needed to be `true` to enable the submission.
138-
139-
```html:preview
140-
<div class="oui-doc-preview-only">
141-
<p>
142-
<button class="oui-button" type="text"
143-
ng-class="{
144-
'oui-button_primary': $ctrl.isValid,
145-
'oui-button_secondary': !$ctrl.isValid
146-
}"
147-
ng-click="$ctrl.isValid = !$ctrl.isValid">
148-
Toggle validation
149-
</button>
150-
</p>
151-
</div>
152-
<oui-stepper>
153-
<oui-step-form
154-
header="Custom validation"
155-
valid="$ctrl.isValid"
156-
on-submit="$ctrl.onCustomSubmit()">
157-
<oui-field label="Lorem ipsum" size="xl">
158-
<input class="oui-input" name="customValidationInput"
159-
type="text" autocomplete="off" required
160-
ng-model="$ctrl.skippableInput">
161-
</oui-field>
162-
</oui-step-form>
163-
</oui-stepper>
164-
<div class="oui-doc-preview-only">
165-
<p><strong>onSubmit count:</strong> {{$ctrl.customSubmitCount}}</p>
166-
</div>
167-
```
168-
169-
### Hide navigation buttons
170-
171-
**Note**: Can be combined with `valid` to avoid default form submission.
172-
173-
```html:preview
174-
<div class="oui-doc-preview-only">
175-
<p>
176-
<button class="oui-button" type="text"
177-
ng-class="{
178-
'oui-button_primary': $ctrl.hasNav,
179-
'oui-button_secondary': !$ctrl.hasNav
180-
}"
181-
ng-click="$ctrl.hasNav = !$ctrl.hasNav">
182-
Toggle navigation &amp; validation
183-
</button>
184-
</p>
185-
</div>
186-
<oui-stepper>
187-
<oui-step-form
188-
header="Navigation buttons"
189-
navigation="$ctrl.hasNav"
190-
valid="$ctrl.hasNav">
191-
<oui-field label="Lorem ipsum" size="xl">
192-
<input class="oui-input" name="navigationsInput"
193-
type="text" autocomplete="off"
194-
ng-model="$ctrl.navigationsInput">
195-
</oui-field>
196-
</oui-step-form>
197-
</oui-stepper>
198-
```
199-
200-
### Linear stepper
201-
202-
```html:preview
203-
<oui-stepper linear>
204-
<oui-step-form header="Step 1"
205-
description="This is a description">
206-
<oui-field label="Email" size="xl">
207-
<input class="oui-input" type="email" name="email"
208-
ng-model="$ctrl.user.email" required>
209-
</oui-field>
210-
211-
<oui-field label="Username" error-messages="{
212-
pattern: 'Username must be alphabetic with a length between 3 and 8.'
213-
}" size="xl">
214-
<input class="oui-input" type="text" name="username"
215-
ng-model="$ctrl.user.username" ng-pattern="/^[a-zA-Z]{3,8}$/" required>
216-
</oui-field>
217-
</oui-step-form>
218-
219-
<oui-step-form header="Step 2" skippable
220-
description="This is a description">
221-
<oui-field label="Firstname" help-text="At least 3 chars" size="xl">
222-
<input class="oui-input" type="text" name="firstname"
223-
ng-model="$ctrl.user.firstname" maxlength="32">
224-
</oui-field>
225-
<oui-field label="Lastname" help-text="At least 3 chars" size="xl">
226-
<input class="oui-input" type="text" name="lastname"
227-
ng-model="$ctrl.user.lastname" maxlength="32">
228-
</oui-field>
229-
<oui-field label="Description" size="xl">
230-
<oui-textarea model="$ctrl.user.description" name="description" placeholder="Please insert your text..." maxlength="10"></oui-textarea>
231-
</oui-field>
232-
</oui-step-form>
233-
234-
<oui-step-form header="Step 3"
235-
description="This is a description">
236-
<oui-field label="OS" size="m">
237-
<label class="oui-select">
238-
<select name="os" ng-model="os" class="oui-select__input" required>
239-
<option ng-value="undefined">Select the OS</option>
240-
<option value="freebsd">FreeBSD</option>
241-
<option value="linux">Linux</option>
242-
<option value="osx">OSX</option>
243-
<option value="windows">Windows</option>
244-
</select>
245-
<i class="oui-icon oui-icon-chevron-down" aria-hidden="true"></i>
246-
</label>
247-
</oui-field>
248-
<oui-field label="Server options">
249-
<oui-checkbox name="ssl" text="SSL" model="$ctrl.ssl" required></oui-checkbox>
250-
<oui-checkbox name="hsts" text="HSTS" model="$ctrl.hsts"></oui-checkbox>
251-
</oui-field>
252-
</oui-step-form>
253-
</oui-stepper>
254-
```
255-
256149
## API
257150

258151
### oui-stepper
@@ -282,3 +175,21 @@
282175
| `valid` | boolean | <? | | | true | custom validation for the form |
283176
| `on-focus` | function | & | | | | focused step function |
284177
| `on-submit` | function | & | | | | submit step function |
178+
179+
## Configuration
180+
181+
The stepper translations can be globally configured with a provider.
182+
183+
```js
184+
angular.module("myModule", [
185+
"oui.stepper"
186+
]).config(ouiStepperConfigurationProvider => {
187+
ouiStepperConfigurationProvider.setTranslations({
188+
optionalLabel: "(optional)",
189+
modifyThisStep: "Modify this step",
190+
skipThisStep: "Skip this step",
191+
nextButtonLabel: "Next",
192+
submitButtonLabel: "Submit"
193+
});
194+
});
195+
```

0 commit comments

Comments
 (0)