1 | import {
|
2 | glThemes as glThemesVariable,
|
3 | glIconSizes as glIconSizesVariable,
|
4 | } from '../../scss_to_js/scss_variables';
|
5 |
|
6 | import { POSITION } from '../components/utilities/truncate/constants';
|
7 |
|
8 | function appendDefaultOption(options) {
|
9 | return { ...options, default: '' };
|
10 | }
|
11 |
|
12 | export const COMMA = ',';
|
13 |
|
14 | export const glThemes = glThemesVariable.split(COMMA).map((glTheme) => glTheme.trim());
|
15 |
|
16 | export const variantOptions = {
|
17 | primary: 'primary',
|
18 | secondary: 'secondary',
|
19 | success: 'success',
|
20 | warning: 'warning',
|
21 | danger: 'danger',
|
22 | info: 'info',
|
23 | light: 'light',
|
24 | dark: 'dark',
|
25 | };
|
26 |
|
27 | export const badgeSizeOptions = {
|
28 | sm: 'sm',
|
29 | md: 'md',
|
30 | lg: 'lg',
|
31 | };
|
32 |
|
33 | export const badgeVariantOptions = {
|
34 | muted: 'muted',
|
35 | neutral: 'neutral',
|
36 | info: 'info',
|
37 | success: 'success',
|
38 | warning: 'warning',
|
39 | danger: 'danger',
|
40 | };
|
41 |
|
42 | export const variantCssColorMap = {
|
43 | muted: 'gl-text-gray-500',
|
44 | neutral: 'gl-text-blue-100',
|
45 | info: 'gl-text-blue-500',
|
46 | success: 'gl-text-green-500',
|
47 | warning: 'gl-text-orange-500',
|
48 | danger: 'gl-text-red-500',
|
49 | };
|
50 |
|
51 | export const targetOptions = ['_self', '_blank', '_parent', '_top', null];
|
52 |
|
53 | export const sizeOptions = {
|
54 | default: null,
|
55 | sm: 'sm',
|
56 | lg: 'lg',
|
57 | };
|
58 |
|
59 | export const labelSizeOptions = {
|
60 | default: null,
|
61 | sm: 'sm',
|
62 | };
|
63 |
|
64 | export const labelColorOptions = {
|
65 | dark: 'dark',
|
66 | light: 'light',
|
67 | };
|
68 |
|
69 | export const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
|
70 |
|
71 | export const avatarsInlineSizeOptions = [32, 24];
|
72 |
|
73 | export const avatarShapeOptions = {
|
74 | circle: 'circle',
|
75 | rect: 'rect',
|
76 | };
|
77 |
|
78 | export const formStateOptions = {
|
79 | default: null,
|
80 | valid: true,
|
81 | invalid: false,
|
82 | };
|
83 |
|
84 | export const newButtonCategoryOptions = {
|
85 | primary: 'primary',
|
86 | secondary: 'secondary',
|
87 | tertiary: 'tertiary',
|
88 | };
|
89 |
|
90 | export const newButtonVariantOptions = {
|
91 | default: 'default',
|
92 | confirm: 'confirm',
|
93 | info: 'info (deprecated)',
|
94 | success: 'success (deprecated)',
|
95 | warning: 'warning (deprecated)',
|
96 | danger: 'danger',
|
97 | dashed: 'dashed',
|
98 | link: 'link',
|
99 | };
|
100 |
|
101 | export const newDropdownVariantOptions = {
|
102 | default: 'default',
|
103 | confirm: 'confirm',
|
104 | info: 'info (deprecated)',
|
105 | success: 'success (deprecated)',
|
106 | warning: 'warning (deprecated)',
|
107 | danger: 'danger',
|
108 | link: 'link',
|
109 | };
|
110 |
|
111 | export const newButtonSizeOptions = {
|
112 | small: 'small',
|
113 | medium: 'medium',
|
114 | };
|
115 |
|
116 | export const newButtonSizeOptionsMap = {
|
117 | small: 'sm',
|
118 | medium: 'md',
|
119 | };
|
120 |
|
121 |
|
122 | export const iconSizeOptions = glIconSizesVariable.split(' ').map(Number);
|
123 |
|
124 | export const triggerVariantOptions = {
|
125 | click: 'click',
|
126 | hover: 'hover',
|
127 | focus: 'focus',
|
128 | };
|
129 |
|
130 | export const tooltipPlacements = {
|
131 | top: 'top',
|
132 | left: 'left',
|
133 | right: 'right',
|
134 | bottom: 'bottom',
|
135 | };
|
136 |
|
137 |
|
138 | export const tooltipDelay = {
|
139 | show: 500,
|
140 | hide: 0,
|
141 | };
|
142 |
|
143 | export const popoverPlacements = {
|
144 | top: 'top',
|
145 | right: 'right',
|
146 | bottom: 'bottom',
|
147 | left: 'left',
|
148 | };
|
149 |
|
150 | export const columnOptions = {
|
151 | stacked: 'stacked',
|
152 | tiled: 'tiled',
|
153 | };
|
154 |
|
155 | export const alignOptions = {
|
156 | left: 'left',
|
157 | center: 'center',
|
158 | right: 'right',
|
159 | fill: 'fill',
|
160 | };
|
161 |
|
162 | export const alertVariantOptions = {
|
163 | success: 'success',
|
164 | warning: 'warning',
|
165 | danger: 'danger',
|
166 | info: 'info',
|
167 | tip: 'tip',
|
168 | };
|
169 |
|
170 | export const alertVariantIconMap = {
|
171 | success: 'check-circle',
|
172 | warning: 'warning',
|
173 | danger: 'error',
|
174 | info: 'information-o',
|
175 | tip: 'bulb',
|
176 | };
|
177 |
|
178 | export const colorThemes = {
|
179 | indigo: 'theme-indigo-900',
|
180 | 'light-indigo': 'theme-indigo-700',
|
181 | blue: 'theme-blue-900',
|
182 | 'light-blue': 'theme-blue-700',
|
183 | green: 'theme-green-900',
|
184 | 'light-green': 'theme-green-700',
|
185 | red: 'theme-red-900',
|
186 | 'light-red': 'theme-red-700',
|
187 | dark: 'gray-900',
|
188 | light: 'gray-700',
|
189 | };
|
190 |
|
191 | export const modalButtonDefaults = {
|
192 | actionPrimary: {
|
193 | variant: 'confirm',
|
194 | category: 'primary',
|
195 | },
|
196 | actionSecondary: {
|
197 | variant: 'confirm',
|
198 | category: 'secondary',
|
199 | },
|
200 | actionCancel: {
|
201 | variant: 'default',
|
202 | },
|
203 | };
|
204 |
|
205 | export const tabsButtonDefaults = {
|
206 | actionPrimary: {
|
207 | variant: 'success',
|
208 | category: 'primary',
|
209 | },
|
210 | actionSecondary: {
|
211 | variant: 'default',
|
212 | category: 'secondary',
|
213 | },
|
214 | actionTertiary: {
|
215 | variant: 'default',
|
216 | },
|
217 | };
|
218 |
|
219 | export const tokenVariants = ['default', 'search-type', 'search-value'];
|
220 |
|
221 | export const resizeDebounceTime = 200;
|
222 |
|
223 | export const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
|
224 | export const sizeOptionsWithNoDefault = appendDefaultOption(sizeOptions);
|
225 |
|
226 |
|
227 | export const defaultDateFormat = 'YYYY-MM-DD';
|
228 |
|
229 | export const bannerVariants = ['promotion', 'introduction'];
|
230 |
|
231 | export const maxZIndex = 10;
|
232 |
|
233 |
|
234 | export const deprecatedButtonCategoryOptions = {
|
235 | tertiary: 'tertiary',
|
236 | primary: 'primary',
|
237 | secondary: 'secondary',
|
238 | };
|
239 |
|
240 | export const deprecatedButtonVariantCategoryMap = {
|
241 | default: 'tertiary',
|
242 | primary: 'primary',
|
243 | secondary: 'primary',
|
244 | dark: 'primary',
|
245 | light: 'primary',
|
246 | info: 'primary',
|
247 | success: 'primary',
|
248 | warning: 'primary',
|
249 | danger: 'primary',
|
250 | 'outline-info': 'secondary',
|
251 | 'outline-success': 'secondary',
|
252 | 'outline-warning': 'secondary',
|
253 | 'outline-danger': 'secondary',
|
254 | };
|
255 |
|
256 | export const deprecatedButtonVariantOptions = {
|
257 | primary: 'primary',
|
258 | secondary: 'secondary',
|
259 | dark: 'dark',
|
260 | light: 'light',
|
261 | };
|
262 |
|
263 | export const deprecatedButtonOutlineVariantOptions = {
|
264 | 'outline-info': 'outline-info',
|
265 | 'outline-success': 'outline-success',
|
266 | 'outline-warning': 'outline-warning',
|
267 | 'outline-danger': 'outline-danger',
|
268 | };
|
269 |
|
270 | export const buttonVariantOptions = {
|
271 | default: 'default',
|
272 | info: 'info',
|
273 | success: 'success',
|
274 | warning: 'warning',
|
275 | danger: 'danger',
|
276 | link: 'link',
|
277 | loading: 'loading',
|
278 | };
|
279 |
|
280 | export const availableButtonVariantOptions = {
|
281 | ...buttonVariantOptions,
|
282 | ...deprecatedButtonVariantOptions,
|
283 | ...deprecatedButtonOutlineVariantOptions,
|
284 | };
|
285 |
|
286 | export const deprecatedButtonSizeOptions = {
|
287 | sm: 'sm',
|
288 | md: 'md',
|
289 | lg: 'lg',
|
290 | };
|
291 |
|
292 | export const modalSizeOptions = {
|
293 | sm: 'sm',
|
294 | md: 'md',
|
295 | lg: 'lg',
|
296 | };
|
297 |
|
298 | export const focusableTags = ['INPUT', 'TEXTAREA', 'A', 'BUTTON', 'SELECT'];
|
299 |
|
300 | export const keyboard = {
|
301 | escape: 'Escape',
|
302 | backspace: 'Backspace',
|
303 | delete: 'Delete',
|
304 | left: 'Left',
|
305 | arrowLeft: 'ArrowLeft',
|
306 | right: 'Right',
|
307 | arrowRight: 'ArrowRight',
|
308 | home: 'Home',
|
309 | end: 'End',
|
310 | };
|
311 |
|
312 | export const truncateOptions = POSITION;
|
313 |
|
314 | export const formInputSizes = {
|
315 | xs: 'xs',
|
316 | sm: 'sm',
|
317 | md: 'md',
|
318 | lg: 'lg',
|
319 | xl: 'xl',
|
320 | '(unset or null)': null,
|
321 | };
|
322 |
|
323 | export const toggleLabelPosition = {
|
324 | hidden: 'hidden',
|
325 | left: 'left',
|
326 | top: 'top',
|
327 | };
|
328 |
|
329 | export const tooltipActionEvents = ['open', 'close', 'enable', 'disable'];
|