@ons/design-system 70.0.9 → 70.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/components/address-output/example-address-output.njk +11 -0
  2. package/components/document-list/{document-list.scss → _document-list.scss} +4 -4
  3. package/components/header/_macro.spec.js +513 -721
  4. package/components/header/_test_examples.js +157 -0
  5. package/components/label/_label.scss +1 -1
  6. package/components/list/_list.scss +14 -11
  7. package/components/list/_macro.njk +3 -3
  8. package/components/list/_macro.spec.js +3 -6
  9. package/components/list/example-bare-list.njk +21 -0
  10. package/components/list/example-bulleted-list.njk +17 -0
  11. package/components/list/example-dashed-list.njk +20 -0
  12. package/components/list/example-inline-list-with-social-icon-prefix.njk +42 -0
  13. package/components/list/example-inline-list.njk +20 -0
  14. package/components/list/example-list-with-icon-prefix.njk +18 -0
  15. package/components/list/example-list-with-icon-suffix.njk +18 -0
  16. package/components/list/example-nested-list.njk +39 -0
  17. package/components/list/example-numbered-list.njk +17 -0
  18. package/components/list/example-prefixed-list.njk +19 -0
  19. package/components/list/example-suffixed-list.njk +19 -0
  20. package/components/list/example-summary-list.njk +17 -0
  21. package/components/navigation/_macro.njk +1 -1
  22. package/components/navigation/_macro.spec.js +1 -1
  23. package/components/quote/example-quote.njk +7 -0
  24. package/components/related-content/example-related-content-social-media.njk +0 -1
  25. package/components/section-navigation/_macro.njk +1 -1
  26. package/components/section-navigation/example-section-navigation-single-vertical-with-title.njk +23 -0
  27. package/components/summary/_macro.njk +1 -1
  28. package/components/text-indent/example-text-indent.njk +6 -0
  29. package/css/main.css +1 -1
  30. package/img/large/placeholder-card.png +0 -0
  31. package/img/small/placeholder-card.png +0 -0
  32. package/layout/_dsTemplate.njk +1 -1
  33. package/package.json +1 -1
  34. package/scss/main.scss +1 -1
  35. package/scss/utilities/_index.scss +1 -1
  36. package/scss/utilities/{_pad.scss → _padding.scss} +6 -6
  37. package/scss/vars/_colors.scss +1 -2
  38. package/components/back-link/example-back-link.njk +0 -17
  39. package/components/helpers/_grid.scss +0 -6
  40. package/components/helpers/grid.njk +0 -20
package/img/large/placeholder-card.png CHANGED
Binary file
package/img/small/placeholder-card.png CHANGED
Binary file
package/layout/_dsTemplate.njk CHANGED
@@ -6,7 +6,7 @@
6
6
  "label": {
7
7
  "text": "Search",
8
8
  "id": "search-field-label",
9
- "classes": "ons-u-pl-m"
9
+ "classes": "ons-u-pl-l"
10
10
  },
11
11
  "classes": "ons-input-search ons-input-search--icon ons-input-search--dark ons-u-mb-s",
12
12
  "accessiblePlaceholder": true,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ons/design-system",
3
3
  "description": "ONS Design System built CSS, JS, and Nunjucks templates",
4
- "version": "70.0.9",
4
+ "version": "70.0.11",
5
5
  "main": "index.js",
6
6
  "license": "MIT",
7
7
  "author": {
package/scss/main.scss CHANGED
@@ -27,7 +27,6 @@
27
27
  @import '../components/fieldset/fieldset';
28
28
  @import '../components/footer/footer';
29
29
  @import '../components/header/header';
30
- @import '../components/helpers/grid';
31
30
  @import '../components/hero/hero';
32
31
  @import '../components/icon/icon';
33
32
  @import '../components/image/image';
@@ -60,6 +59,7 @@
60
59
  @import '../components/timeline/timeline';
61
60
  @import '../components/upload/upload';
62
61
  @import '../components/video/video';
62
+ @import '../foundations/grid/grid';
63
63
  @import 'utilities/index';
64
64
  @import 'utilities/highlight';
65
65
 
package/scss/utilities/_index.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  @import './grid';
6
6
  @import './highlight';
7
7
  @import './margin';
8
- @import './pad';
8
+ @import './padding';
9
9
  @import './typography';
10
10
  @import './utilities';
11
11
  @import './visibility';
package/scss/utilities/{_pad.scss → _padding.scss} RENAMED
@@ -1,11 +1,11 @@
1
- // e.g ons-u-pl-m
2
1
  $sizes: (
3
- no: 0 !important,
4
- xxs: 0.3rem,
2
+ no: 0,
3
+ xxs: 0.25rem,
5
4
  xs: 0.5rem,
6
5
  s: 1rem,
7
- m: 2rem,
8
- l: 3rem,
6
+ m: 1.5rem,
7
+ l: 2rem,
8
+ xl: 3rem,
9
9
  );
10
10
 
11
11
  $padding: (
@@ -19,7 +19,7 @@ $padding: (
19
19
  @each $key, $value in $sizes {
20
20
  @each $abbr, $dec in $padding {
21
21
  @include bp-suffix(ons-u-#{$abbr}-#{$key}, $create-between-breakpoints: true) {
22
- #{$dec}: #{$value};
22
+ #{$dec}: #{$value} !important;
23
23
  }
24
24
  }
25
25
  }
package/scss/vars/_colors.scss CHANGED
@@ -102,8 +102,7 @@
102
102
  --ons-color-borders-document-image-focus: var(--ons-color-black);
103
103
 
104
104
  // Placeholders
105
- --ons-color-text-placeholder: var(--ons-color-grey-75);
106
- --ons-color-image-placeholder: var(--ons-color-grey-15);
105
+ --ons-color-placeholder: var(--ons-color-grey-75);
107
106
 
108
107
  // Form elements
109
108
  --ons-color-button: var(--ons-color-leaf-green);
package/components/back-link/example-back-link.njk DELETED
@@ -1,17 +0,0 @@
1
- {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
2
-
3
- {{
4
- onsBreadcrumbs({
5
- "ariaLabel": 'Back',
6
- "itemsList": [
7
- {
8
- "url": '/',
9
- "id": "backlink",
10
- "text": 'Back',
11
- "attributes": {
12
- "data-attribute": "Example attribute"
13
- }
14
- }
15
- ]
16
- })
17
- }}
package/components/helpers/_grid.scss DELETED
@@ -1,6 +0,0 @@
1
- .ons-pl-grid-col {
2
- background: var(--ons-color-grey-5);
3
- font-size: 0.8rem;
4
- margin: 0 0 1rem;
5
- padding: 1rem;
6
- }
package/components/helpers/grid.njk DELETED
@@ -1,20 +0,0 @@
1
- {% macro dsExampleGrid(params) %}
2
-
3
- {% set grid %}
4
- <div class="ons-grid">
5
- {%- for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
6
- {%- for i in range(0, item.repeat | default(1) ) -%}
7
- <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
8
- <div class="ons-pl-grid-col">{{ item.col }} col</div>
9
- </div>
10
- {%- endfor -%}
11
- {%- endfor -%}
12
- </div>
13
- {% endset %}
14
-
15
- {%- if params.container -%}
16
- <div class="ons-container">{{ grid | safe }}</div>
17
- {% else %}
18
- {{ grid | safe }}
19
- {%- endif -%}
20
- {% endmacro %}