Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1441 ariadna 1 
$prefix: bs-;
2 
$enable-important-utilities: false;
3 
 
4 
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
5 
@import "../../mixins/utilities";
6 
 
7 
@mixin test-generate-utility($params...) {
8 
  @include assert() {
9 
    @include output() {
10 
      @include generate-utility($params...);
11 
    }
12 
 
13 
    @include expect() {
14 
      @content;
15 
    }
16 
  }
17 
}
18 
 
19 
@include describe(generate-utility) {
20 
  @include it("generates a utility class for each value") {
21 
    @include test-generate-utility(
22 
      (
23 
        property: "padding",
24 
        values: (small: .5rem, large: 2rem)
25 
      )
26 
    ) {
27 
      .padding-small {
28 
        padding: .5rem;
29 
      }
30 
 
31 
      .padding-large {
32 
        padding: 2rem;
33 
      }
34 
    }
35 
  }
36 
 
37 
  @include describe("global $enable-important-utilities: true") {
38 
    @include it("sets !important") {
39 
      $enable-important-utilities: true !global;
40 
 
41 
      @include test-generate-utility(
42 
        (
43 
          property: "padding",
44 
          values: (small: .5rem, large: 2rem)
45 
        )
46 
      ) {
47 
        .padding-small {
48 
          padding: .5rem !important;
49 
        }
50 
 
51 
        .padding-large {
52 
          padding: 2rem !important;
53 
        }
54 
      }
55 
 
56 
      $enable-important-utilities: false !global;
57 
    }
58 
  }
59 
 
60 
  @include describe("$utility") {
61 
    @include describe("values") {
62 
      @include it("supports null keys") {
63 
        @include test-generate-utility(
64 
          (
65 
            property: "padding",
66 
            values: (null: 1rem, small: .5rem, large: 2rem)
67 
          ),
68 
        ) {
69 
          .padding {
70 
            padding: 1rem;
71 
          }
72 
 
73 
          .padding-small {
74 
            padding: .5rem;
75 
          }
76 
 
77 
          .padding-large {
78 
            padding: 2rem;
79 
          }
80 
        }
81 
      }
82 
 
83 
      @include it("ignores null values") {
84 
        @include test-generate-utility(
85 
          (
86 
            property: "padding",
87 
            values: (small: null, large: 2rem)
88 
          )
89 
        ) {
90 
          .padding-large {
91 
            padding: 2rem;
92 
          }
93 
        }
94 
      }
95 
 
96 
      @include it("supports lists") {
97 
        @include test-generate-utility(
98 
          (
99 
            property: "padding",
100 
            values: 1rem 2rem
101 
          )
102 
        ) {
103 
          .padding-1rem {
104 
            padding: 1rem;
105 
          }
106 
 
107 
          .padding-2rem {
108 
            padding: 2rem;
109 
          }
110 
        }
111 
      }
112 
 
113 
      @include it("supports single values") {
114 
        @include test-generate-utility(
115 
          (
116 
            property: padding,
117 
            values: 1rem
118 
          )
119 
        ) {
120 
          .padding-1rem {
121 
            padding: 1rem;
122 
          }
123 
        }
124 
      }
125 
    }
126 
 
127 
    @include describe("class & property") {
128 
      @include it("adds each property to the declaration") {
129 
        @include test-generate-utility(
130 
          (
131 
            class: padding-x,
132 
            property: padding-inline-start padding-inline-end,
133 
            values: 1rem
134 
          )
135 
        ) {
136 
          .padding-x-1rem {
137 
            padding-inline-start: 1rem;
138 
            padding-inline-end: 1rem;
139 
          }
140 
        }
141 
      }
142 
 
143 
      @include it("uses the first property as class name") {
144 
        @include test-generate-utility(
145 
          (
146 
            property: padding-inline-start padding-inline-end,
147 
            values: 1rem
148 
          )
149 
        ) {
150 
          .padding-inline-start-1rem {
151 
            padding-inline-start: 1rem;
152 
            padding-inline-end: 1rem;
153 
          }
154 
        }
155 
      }
156 
 
157 
      @include it("supports a null class to create classes straight from the values") {
158 
        @include test-generate-utility(
159 
          (
160 
            property: visibility,
161 
            class: null,
162 
            values: (
163 
              visible: visible,
164 
              invisible: hidden,
165 
            )
166 
          )
167 
        ) {
168 
          .visible {
169 
            visibility: visible;
170 
          }
171 
 
172 
          .invisible {
173 
            visibility: hidden;
174 
          }
175 
        }
176 
      }
177 
    }
178 
 
179 
    @include describe("state") {
180 
      @include it("Generates selectors for each states") {
181 
        @include test-generate-utility(
182 
          (
183 
            property: padding,
184 
            values: 1rem,
185 
            state: hover focus,
186 
          )
187 
        ) {
188 
          .padding-1rem {
189 
            padding: 1rem;
190 
          }
191 
 
192 
          .padding-1rem-hover:hover {
193 
            padding: 1rem;
194 
          }
195 
 
196 
          .padding-1rem-focus:focus {
197 
            padding: 1rem;
198 
          }
199 
        }
200 
      }
201 
    }
202 
 
203 
    @include describe("css-var"){
204 
      @include it("sets a CSS variable instead of the property") {
205 
        @include test-generate-utility(
206 
          (
207 
            property: padding,
208 
            css-variable-name: padding,
209 
            css-var: true,
210 
            values: 1rem 2rem
211 
          )
212 
        ) {
213 
          .padding-1rem {
214 
            --bs-padding: 1rem;
215 
          }
216 
 
217 
          .padding-2rem {
218 
            --bs-padding: 2rem;
219 
          }
220 
        }
221 
      }
222 
 
223 
      @include it("defaults to class") {
224 
        @include test-generate-utility(
225 
          (
226 
            property: padding,
227 
            class: padding,
228 
            css-var: true,
229 
            values: 1rem 2rem
230 
          )
231 
        ) {
232 
          .padding-1rem {
233 
            --bs-padding: 1rem;
234 
          }
235 
 
236 
          .padding-2rem {
237 
            --bs-padding: 2rem;
238 
          }
239 
        }
240 
      }
241 
    }
242 
 
243 
    @include describe("local-vars") {
244 
      @include it("generates the listed variables") {
245 
        @include test-generate-utility(
246 
          (
247 
            property: color,
248 
            class: desaturated-color,
249 
            local-vars: (
250 
              color-opacity: 1,
251 
              color-saturation: .25
252 
            ),
253 
            values: (
254 
              blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
255 
            )
256 
          )
257 
        ) {
258 
          .desaturated-color-blue {
259 
            --bs-color-opacity: 1;
260 
            // Sass compilation will put a leading zero so we want to keep that one
261 
            // stylelint-disable-next-line @stylistic/number-leading-zero
262 
            --bs-color-saturation: 0.25;
263 
            color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
264 
          }
265 
        }
266 
      }
267 
    }
268 
 
269 
    @include describe("css-var & state") {
270 
      @include it("Generates a rule with for each state with a CSS variable") {
271 
        @include test-generate-utility(
272 
          (
273 
            property: padding,
274 
            css-var: true,
275 
            css-variable-name: padding,
276 
            values: 1rem,
277 
            state: hover focus,
278 
          )
279 
        ) {
280 
          .padding-1rem {
281 
            --bs-padding: 1rem;
282 
          }
283 
 
284 
          .padding-1rem-hover:hover {
285 
            --bs-padding: 1rem;
286 
          }
287 
 
288 
          .padding-1rem-focus:focus {
289 
            --bs-padding: 1rem;
290 
          }
291 
        }
292 
      }
293 
    }
294 
 
295 
    @include describe("rtl") {
296 
      @include it("sets up RTLCSS for removal when false") {
297 
        @include test-generate-utility(
298 
          (
299 
            property: padding,
300 
            values: 1rem,
301 
            rtl: false
302 
          )
303 
        ) {
304 
          /* rtl:begin:remove */
305 
 
306 
          .padding-1rem {
307 
            padding: 1rem;
308 
          }
309 
 
310 
          /* rtl:end:remove */
311 
 
312 
        }
313 
      }
314 
    }
315 
 
316 
    @include describe("rfs") {
317 
      @include it("sets the fluid value when not inside media query") {
318 
        @include test-generate-utility(
319 
          (
320 
            property: padding,
321 
            values: 1rem,
322 
            rfs: true
323 
          )
324 
        ) {
325 
          .padding-1rem {
326 
            padding: rfs-fluid-value(1rem);
327 
          }
328 
        }
329 
      }
330 
 
331 
      @include it("sets the value when inside the media query") {
332 
        @include test-generate-utility(
333 
          (
334 
            property: padding,
335 
            values: 1rem,
336 
            rfs: true
337 
          ),
338 
          $is-rfs-media-query: true
339 
        ) {
340 
          .padding-1rem {
341 
            padding: rfs-value(1rem);
342 
          }
343 
        }
344 
      }
345 
    }
346 
  }
347 
 
348 
  @include describe("$infix") {
349 
    @include it("inserts the given infix") {
350 
      @include test-generate-utility(
351 
        (
352 
          property: "padding",
353 
          values: (null: 1rem, small: .5rem, large: 2rem)
354 
        ),
355 
        $infix: -sm
356 
      ) {
357 
        .padding-sm {
358 
          padding: 1rem;
359 
        }
360 
 
361 
        .padding-sm-small {
362 
          padding: .5rem;
363 
        }
364 
 
365 
        .padding-sm-large {
366 
          padding: 2rem;
367 
        }
368 
      }
369 
    }
370 
 
371 
    @include it("strips leading - if class is null") {
372 
      @include test-generate-utility(
373 
        (
374 
          property: visibility,
375 
          class: null,
376 
          values: (
377 
            visible: visible,
378 
            invisible: hidden,
379 
          )
380 
        ),
381 
        -sm
382 
      ) {
383 
        .sm-visible {
384 
          visibility: visible;
385 
        }
386 
 
387 
        .sm-invisible {
388 
          visibility: hidden;
389 
        }
390 
      }
391 
    }
392 
  }
393 
}