@ons/design-system 72.2.0 → 72.3.0

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 (25) hide show
  1. package/components/address-input/_macro.spec.js +0 -1
  2. package/components/address-input/autosuggest.address.spec.js +0 -1
  3. package/components/autosuggest/autosuggest.spec.js +0 -2
  4. package/components/button/_button.scss +82 -3
  5. package/components/document-list/_macro.spec.js +298 -347
  6. package/components/footer/_macro.njk +1 -1
  7. package/components/header/_header.scss +42 -0
  8. package/components/header/_macro.njk +95 -0
  9. package/components/header/_macro.spec.js +0 -1
  10. package/components/header/example-header-basic.njk +152 -1
  11. package/components/header/example-header-external-with-navigation-and-search.njk +0 -1
  12. package/components/hero/_hero.scss +91 -0
  13. package/components/hero/_macro.njk +7 -1
  14. package/components/hero/_macro.spec.js +5 -0
  15. package/components/hero/example-hero-pale-blue.njk +24 -0
  16. package/components/message-list/_macro.njk +10 -3
  17. package/components/message-list/_macro.spec.js +72 -14
  18. package/components/message-list/_message-list.scss +1 -1
  19. package/components/navigation/_macro.njk +0 -1
  20. package/components/navigation/_macro.spec.js +0 -1
  21. package/css/main.css +1 -1
  22. package/package.json +1 -1
  23. package/scss/base/_typography.scss +1 -1
  24. package/scss/helpers/_mq.scss +1 -1
  25. package/scss/vars/_colors.scss +3 -0
package/components/address-input/_macro.spec.js CHANGED
@@ -83,7 +83,6 @@ describe('FOR: Macro: Address-input', () => {
83
83
  ariaYouHaveSelected: '[params.ariaYouHaveSelected]',
84
84
  ariaMinChars: '[params.ariaMinChars]',
85
85
  minChars: '[params.minChars]',
86
- ariaResultsLabel: '[params.ariaResultsLabel]',
87
86
  ariaOneResult: '[params.ariaOneResult]',
88
87
  ariaNResults: '[params.ariaNResults]',
89
88
  ariaLimitedResults: '[params.ariaLimitedResults]',
package/components/address-input/autosuggest.address.spec.js CHANGED
@@ -15,7 +15,6 @@ const EXAMPLE_ADDRESS_INPUT = {
15
15
  ariaYouHaveSelected: 'You have selected',
16
16
  ariaMinChars: 'Enter 3 or more characters for suggestions.',
17
17
  minChars: 3,
18
- ariaResultsLabel: 'Country suggestions',
19
18
  ariaOneResult: 'There is one suggestion available.',
20
19
  ariaNResults: 'There are {n} suggestions available.',
21
20
  ariaLimitedResults: 'Type more characters to improve your search',
package/components/autosuggest/autosuggest.spec.js CHANGED
@@ -16,7 +16,6 @@ const EXAMPLE_AUTOSUGGEST = {
16
16
  ariaYouHaveSelected: 'You have selected',
17
17
  ariaMinChars: 'Enter 3 or more characters for suggestions.',
18
18
  minChars: 3,
19
- ariaResultsLabel: 'Country suggestions',
20
19
  ariaOneResult: 'There is one suggestion available.',
21
20
  ariaNResults: 'There are {n} suggestions available.',
22
21
  ariaLimitedResults: 'Type more characters to improve your search',
@@ -40,7 +39,6 @@ const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = {
40
39
  ariaYouHaveSelected: 'You have selected',
41
40
  ariaMinChars: 'Enter 3 or more characters for suggestions.',
42
41
  minChars: 3,
43
- ariaResultsLabel: 'Country suggestions',
44
42
  ariaOneResult: 'There is one suggestion available.',
45
43
  ariaNResults: 'There are {n} suggestions available.',
46
44
  ariaLimitedResults: 'Type more characters to improve your search',
package/components/button/_button.scss CHANGED
@@ -28,8 +28,9 @@ $button-shadow-size: 3px;
28
28
 
29
29
  &--search {
30
30
  .ons-icon {
31
- @include mq(s, l) {
32
- margin-right: 0.5rem;
31
+ margin: 0.125rem 0.5rem 0.125rem 0;
32
+ @include mq(xs, s) {
33
+ margin-right: 0;
33
34
  }
34
35
  }
35
36
  }
@@ -430,7 +431,8 @@ $button-shadow-size: 3px;
430
431
  }
431
432
 
432
433
  &--mobile[aria-expanded='true'],
433
- &--text-link[aria-expanded='true'] {
434
+ &--text-link[aria-expanded='true'],
435
+ &--menu[aria-expanded='true'] {
434
436
  .ons-icon {
435
437
  transform: rotate(270deg);
436
438
  }
@@ -550,6 +552,83 @@ $button-shadow-size: 3px;
550
552
  }
551
553
  }
552
554
  }
555
+
556
+ &--menu {
557
+ align-items: center;
558
+ display: flex;
559
+ padding: 1.5rem;
560
+ border-bottom: 4px solid rgb(0 0 0 / 0%);
561
+ .ons-icon {
562
+ transform: rotate(90deg);
563
+ }
564
+ }
565
+
566
+ &--menu & {
567
+ &__inner {
568
+ background: rgb(0 0 0 / 0%);
569
+ box-shadow: none;
570
+ color: var(--ons-color-text-link);
571
+ padding: 0;
572
+ .ons-icon {
573
+ fill: var(--ons-color-text-link);
574
+ height: 1rem;
575
+ margin-top: 0;
576
+ width: 1rem;
577
+ }
578
+ }
579
+ }
580
+
581
+ &--menu:focus {
582
+ background-color: var(--ons-color-focus);
583
+ border-color: var(--ons-color-black);
584
+ }
585
+
586
+ &--menu:hover {
587
+ border-color: var(--ons-color-text-link-hover);
588
+ }
589
+
590
+ &--menu:focus & {
591
+ &__inner {
592
+ box-shadow: none;
593
+ }
594
+ }
595
+
596
+ &--menu:focus:hover:not(:active, .active) {
597
+ .ons-btn__inner {
598
+ background: none;
599
+ }
600
+ }
601
+
602
+ &--menu:active,
603
+ &--menu[aria-expanded='true'] {
604
+ background-color: var(--ons-color-branded-tint);
605
+ border-color: var(--ons-color-text-link-hover);
606
+ }
607
+
608
+ &--menu:hover &,
609
+ &--menu:active &,
610
+ &--menu.active & {
611
+ &__inner {
612
+ background: none;
613
+ color: var(--ons-color-text-link-hover);
614
+ .ons-icon {
615
+ fill: var(--ons-color-text-link-hover);
616
+ }
617
+ }
618
+ }
619
+
620
+ &--menu:active &,
621
+ &--menu:active:focus &,
622
+ &--menu.active &,
623
+ &--menu.active:focus & {
624
+ &__inner {
625
+ background: none;
626
+ color: var(--ons-color-text-link-hover);
627
+ .ons-icon {
628
+ fill: var(--ons-color-text-link-hover);
629
+ }
630
+ }
631
+ }
553
632
  }
554
633
 
555
634
  .ons-search__btn {