UNPKG

4.49 kBJavaScriptView Raw
1import angular from 'angular';
2
3import {storiesOf} from '@storybook/html';
4
5import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
6
7import '../input/input.scss';
8import '../form/form.scss';
9import '../input-size/input-size.scss';
10
11import ButtonNG from '../button-ng/button-ng';
12
13storiesOf('Style-only|Form', module).
14 addParameters({
15 notes: 'Helps create forms with various types of controls.'
16 }).
17 addDecorator(angularDecorator()).
18 add('basic', () => {
19 angular.module(APP_NAME, [ButtonNG]);
20
21 return `
22 <div style="width: 700px">
23 <form class="ring-form">
24 <span class="ring-form__title">Form Title</span>
25
26 <div class="ring-form__group">
27 <label for="ring-form-1" class="ring-form__label">Full-Width
28 Input</label>
29 <div class="ring-form__control">
30 <input class="ring-input" id="ring-form-1" type="text">
31 </div>
32 </div>
33
34 <div class="ring-form__group">
35 <label for="ring-form-2" class="ring-form__label">Medium Input</label>
36 <div class="ring-form__control">
37 <input class="ring-input ring-input-size_md" id="ring-form-2"
38 type="text">
39 </div>
40 </div>
41
42 <div class="ring-form__group">
43 <label for="ring-form-3" class="ring-form__label">Medium Input & Error</label>
44 <div class="ring-form__control">
45 <input class="ring-input ring-input_error ring-input-size_md"
46 id="ring-form-3" type="text">
47 <div class="ring-error-bubble active">Error bubble</div>
48 </div>
49 </div>
50
51 <div class="ring-form__group">
52 <label for="ring-form-4" class="ring-form__label">Long Input</label>
53 <div class="ring-form__control">
54 <input class="ring-input ring-input-size_l" id="ring-form-4"
55 type="text">
56 <div class="ring-error-bubble active">Error bubble for a long
57 control
58 </div>
59 </div>
60 </div>
61
62 <div class="ring-form__group">
63 <label for="ring-form-5" class="ring-form__label">Full-Width
64 Control</label>
65 <div class="ring-form__control">
66 <input class="ring-input" id="ring-form-5" type="text">
67 <div class="ring-error-bubble active">Error bubble for a full-width
68 control
69 </div>
70 </div>
71 </div>
72
73 <div class="ring-form__group">
74 <label for="ring-form-7" class="ring-form__label">Textarea</label>
75 <div class="ring-form__control">
76 <textarea class="ring-input ring-input-size_md"
77 id="ring-form-7"></textarea>
78 </div>
79 </div>
80
81 <div class="ring-form__group">
82 <label for="ring-form-8" class="ring-form__label">Long
83 Textarea</label>
84 <div class="ring-form__control">
85 <textarea class="ring-input ring-input-size_l"
86 id="ring-form-8"></textarea>
87 </div>
88 </div>
89
90 <div class="ring-form__group">
91 <label for="ring-form-9" class="ring-form__label">Full-Width
92 Textarea</label>
93 <div class="ring-form__control">
94 <textarea class="ring-input" id="ring-form-9"></textarea>
95 </div>
96 </div>
97
98 <div class="ring-form__group">
99 <label for="ring-form-11" class="ring-form__label">Input in
100 a small container</label>
101 <div class="ring-form__control ring-form__control_small">
102 <input class="ring-input ring-input-size_md" id="ring-form-11"
103 type="text">
104 </div>
105 </div>
106
107 <div class="ring-form__group">
108 <label for="ring-form-12" class="ring-form__label">Textarea in
109 a small container</label>
110 <div class="ring-form__control ring-form__control_small">
111 <textarea class="ring-input ring-input-size_md"
112 id="ring-form-12"></textarea>
113 </div>
114 </div>
115
116 <div class="ring-form__footer">
117 <rg-button mode="primary">Save</rg-button>
118 <rg-button>Cancel</rg-button>
119 </div>
120 </form>
121 </div>
122 `;
123 });