@digigov/css 1.2.1-496927f3 → 1.3.0-01ea6f24

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 (66) hide show
  1. package/dist/base/index.css +1 -1
  2. package/dist/base.js +1 -1
  3. package/dist/components.js +1 -1
  4. package/dist/digigov.css +3 -3
  5. package/dist/utilities/index.css +1 -1
  6. package/dist/utilities.js +1 -1
  7. package/package.json +1 -1
  8. package/src/components/accordion.css +37 -37
  9. package/src/components/admin-header.css +9 -9
  10. package/src/components/admin-layout.css +8 -8
  11. package/src/components/autocomplete.css +31 -31
  12. package/src/components/back-to-top.css +4 -4
  13. package/src/components/bottom-info.css +2 -2
  14. package/src/components/breadcrumbs.css +5 -5
  15. package/src/components/button.css +47 -47
  16. package/src/components/card.css +27 -27
  17. package/src/components/checkboxes.css +17 -17
  18. package/src/components/chip.css +16 -16
  19. package/src/components/copy-to-clipboard.css +18 -18
  20. package/src/components/details.css +4 -4
  21. package/src/components/dev-theme.css +1 -1
  22. package/src/components/drawer.css +30 -30
  23. package/src/components/dropdown.css +37 -37
  24. package/src/components/experimental.css +10 -10
  25. package/src/components/fillable.css +3 -3
  26. package/src/components/filter.css +51 -51
  27. package/src/components/footer.css +24 -24
  28. package/src/components/form.css +85 -85
  29. package/src/components/full-page-background.css +1 -1
  30. package/src/components/header.css +40 -40
  31. package/src/components/hidden.css +11 -11
  32. package/src/components/kitchensink.css +18 -18
  33. package/src/components/layout.css +31 -31
  34. package/src/components/loader.css +11 -11
  35. package/src/components/masthead.css +23 -23
  36. package/src/components/misc.css +11 -11
  37. package/src/components/modal.css +11 -11
  38. package/src/components/nav.css +48 -48
  39. package/src/components/notification-banner.css +15 -15
  40. package/src/components/pagination.css +24 -24
  41. package/src/components/panel.css +4 -4
  42. package/src/components/phase-banner.css +7 -7
  43. package/src/components/radios.css +15 -15
  44. package/src/components/skiplink.css +1 -1
  45. package/src/components/stack.css +22 -22
  46. package/src/components/stepnav.css +42 -42
  47. package/src/components/summary-list.css +32 -32
  48. package/src/components/svg-icons.css +26 -29
  49. package/src/components/table.css +98 -98
  50. package/src/components/tabs.css +18 -18
  51. package/src/components/task-list.css +20 -20
  52. package/src/components/timeline.css +16 -16
  53. package/src/components/typography.css +87 -87
  54. package/src/components/warning-text.css +6 -6
  55. package/src/pages/admin-filtering-data.js +86 -86
  56. package/src/pages/admin.js +36 -36
  57. package/src/pages/dropdown.js +109 -109
  58. package/src/pages/form.js +210 -210
  59. package/src/pages/headings/service-heading.js +9 -9
  60. package/src/pages/index.js +201 -201
  61. package/src/pages/pagination.js +49 -49
  62. package/src/pages/table.js +223 -223
  63. package/src/utilities/index.css +195 -195
  64. package/src/utilities/utilities.css +416 -416
  65. package/tailwind.config.js +0 -2
  66. package/themes.plugin.js +1 -1
@@ -1,7 +1,7 @@
1
- .govgr-dropdown {
1
+ .ds-dropdown {
2
2
  @apply w-fit relative;
3
- &.govgr-dropdown--up {
4
- .govgr-dropdown__content {
3
+ &.ds-dropdown--up {
4
+ .ds-dropdown__content {
5
5
  @apply mb-4 border border-b-0 bottom-full;
6
6
  -webkit-box-box-shadow:
7
7
  0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
@@ -11,38 +11,38 @@
11
11
  0 2px 0 var(--color-base-500);
12
12
  }
13
13
  }
14
- &.govgr-dropdown--right {
15
- .govgr-dropdown__content {
14
+ &.ds-dropdown--right {
15
+ .ds-dropdown__content {
16
16
  @apply right-0 mr-0 ml-4;
17
17
  }
18
18
  }
19
- &.govgr-dropdown--disabled {
19
+ &.ds-dropdown--disabled {
20
20
  @apply cursor-not-allowed;
21
- .govgr-dropdown__button {
21
+ .ds-dropdown__button {
22
22
  pointer-events: none;
23
23
  user-select: none;
24
24
  opacity: 0.5;
25
25
  }
26
26
  }
27
- &.govgr-dropdown--dense,
28
- .govgr-dense & {
29
- .govgr-dropdown__content {
27
+ &.ds-dropdown--dense,
28
+ .ds-dense & {
29
+ .ds-dropdown__content {
30
30
  @apply p-2;
31
31
  }
32
32
  }
33
- .govgr-dropdown__button {
33
+ .ds-dropdown__button {
34
34
  @apply w-fit print:text-base-content;
35
35
  &::marker {
36
36
  font-size: 0px;
37
37
  }
38
38
  }
39
- .govgr-dropdown__button.govgr-link + .govgr-dropdown__content {
39
+ .ds-dropdown__button.ds-link + .ds-dropdown__content {
40
40
  @apply mt-4 print:text-base-content;
41
41
  }
42
- .govgr-btn-group .govgr-btn + .govgr-dropdown__content {
42
+ .ds-btn-group .ds-btn + .ds-dropdown__content {
43
43
  @apply mt-4;
44
44
  }
45
- .govgr-dropdown__content {
45
+ .ds-dropdown__content {
46
46
  @apply border border-base-400 p-4 bg-base-100 border-t-0
47
47
  max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
48
48
  -webkit-box-box-shadow:
@@ -55,59 +55,59 @@
55
55
  @apply mb-0;
56
56
  }
57
57
  }
58
- .govgr-dropdown__content--full-width {
58
+ .ds-dropdown__content--full-width {
59
59
  @apply min-w-full;
60
60
  }
61
61
  }
62
62
 
63
63
  /* overrides */
64
64
 
65
- .govgr-dropdown {
65
+ .ds-dropdown {
66
66
  &[open] {
67
- .govgr-dropdown__button--chevron {
68
- .govgr-svg-icon--chevron {
67
+ .ds-dropdown__button--chevron {
68
+ .ds-svg-icon--chevron {
69
69
  @apply transform -rotate-180;
70
70
  }
71
71
  }
72
- .govgr-dropdown__button {
73
- &.govgr-btn-primary {
72
+ .ds-dropdown__button {
73
+ &.ds-btn-primary {
74
74
  background-color: var(--btn-primary-background-color-hover);
75
75
  color: var(--btn-primary-color-hover);
76
76
  }
77
- &.govgr-btn-secondary {
77
+ &.ds-btn-secondary {
78
78
  background-color: var(--btn-secondary-background-color-hover);
79
79
  color: var(--btn-secondary-color-hover);
80
80
  }
81
- &.govgr-btn-warning {
81
+ &.ds-btn-warning {
82
82
  background-color: var(--btn-warning-background-color-hover);
83
83
  color: var(--btn-warning-color-hover);
84
84
  }
85
85
  }
86
86
  }
87
- .govgr-dropdown__button--chevron {
88
- .govgr-svg-icon--chevron {
87
+ .ds-dropdown__button--chevron {
88
+ .ds-svg-icon--chevron {
89
89
  @apply transition duration-300;
90
90
  }
91
91
  }
92
- .govgr-dropdown__button {
93
- .govgr-svg-icon {
92
+ .ds-dropdown__button {
93
+ .ds-svg-icon {
94
94
  @apply w-5 h-6 md:h-8;
95
95
  @apply print:hidden;
96
96
  }
97
- &.govgr-link {
97
+ &.ds-link {
98
98
  @apply inline-flex gap-1 items-center;
99
99
  }
100
100
  }
101
- .govgr-dropdown__content {
102
- .govgr-field {
101
+ .ds-dropdown__content {
102
+ .ds-field {
103
103
  @apply mb-4;
104
104
  }
105
- .govgr-section-break {
105
+ .ds-section-break {
106
106
  @apply -mx-4 w-auto;
107
107
  }
108
- > .govgr-nav__list {
108
+ > .ds-nav__list {
109
109
  @apply w-auto -mx-4 flex-col;
110
- .govgr-nav__list-item {
110
+ .ds-nav__list-item {
111
111
  @apply border-b border-base-300 py-2 px-4;
112
112
  &:last-child {
113
113
  @apply border-0;
@@ -118,13 +118,13 @@
118
118
  }
119
119
  }
120
120
  }
121
- &.govgr-dropdown--dense,
122
- .govgr-dense & {
123
- .govgr-dropdown__content {
124
- .govgr-section-break {
121
+ &.ds-dropdown--dense,
122
+ .ds-dense & {
123
+ .ds-dropdown__content {
124
+ .ds-section-break {
125
125
  @apply -mx-2 w-auto;
126
126
  }
127
- > .govgr-nav__list {
127
+ > .ds-nav__list {
128
128
  @apply w-auto -mx-2 flex-col;
129
129
  }
130
130
  }
@@ -1,16 +1,16 @@
1
- .govgr-floating-btn {
1
+ .ds-floating-btn {
2
2
  @apply absolute bottom-4;
3
3
  @apply p-4 rounded-full border-0 !important;
4
4
  box-shadow: 0px 2px 8px rgba(var(--color-base-900-rgb), 0.3);
5
- &.govgr-floating-btn--right {
5
+ &.ds-floating-btn--right {
6
6
  @apply right-4;
7
7
  }
8
- &.govgr-floating-btn--left {
8
+ &.ds-floating-btn--left {
9
9
  @apply left-4;
10
10
  }
11
11
  }
12
12
 
13
- .govgr-option-btn {
13
+ .ds-option-btn {
14
14
  @apply flex flex-col gap-2
15
15
  bg-base-100 border-base-100 border-2;
16
16
  @apply w-full sm:w-fit leading-tight m-0 !important;
@@ -19,21 +19,21 @@
19
19
  @apply border-base-content;
20
20
  }
21
21
  }
22
- .govgr-option-btn--selected {
22
+ .ds-option-btn--selected {
23
23
  @apply border-success border-4 text-success p-4 !important;
24
- .govgr-option-btn__steps {
24
+ .ds-option-btn__steps {
25
25
  @apply opacity-100;
26
26
  }
27
- .govgr-svg-icon {
27
+ .ds-svg-icon {
28
28
  fill: var(--color-success) !important;
29
29
  }
30
30
  }
31
- .govgr-option-btn__steps {
31
+ .ds-option-btn__steps {
32
32
  @apply flex flex-nowrap w-full gap-2 h-1 mt-2 opacity-0;
33
33
  }
34
- .govgr-option-btn__step {
34
+ .ds-option-btn__step {
35
35
  @apply bg-base-300 w-full;
36
36
  }
37
- .govgr-option-btn__step--active {
37
+ .ds-option-btn__step--active {
38
38
  @apply bg-success;
39
39
  }
@@ -1,10 +1,10 @@
1
- .govgr-fillable-text {
1
+ .ds-fillable-text {
2
2
  @apply lg:mb-8 mb-4 md:mb-8 p-4 border-l-6 border-base-300 bg-base-200
3
3
  text-base-content md:text-lg leading-relaxed text-base;
4
4
  }
5
- .govgr-labeled-text {
5
+ .ds-labeled-text {
6
6
  @apply bg-base-300 w-fit inline-block px-3 mx-1 mt-px font-bold border-0 border-b-2 border-base-800;
7
7
  }
8
- .govgr-labeled-text--active {
8
+ .ds-labeled-text--active {
9
9
  @apply bg-focus;
10
10
  }
@@ -1,138 +1,138 @@
1
- .govgr-filter {
1
+ .ds-filter {
2
2
  @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
3
3
  box-shadow: 0 0 30px rgba(var(--color-base-900-rgb), 0.9);
4
4
  }
5
- .govgr-filter {
6
- &.govgr-filter--position-relative-always {
5
+ .ds-filter {
6
+ &.ds-filter--position-relative-always {
7
7
  @apply block relative overflow-visible w-full shadow-none z-2 !important;
8
- &.govgr-filter--closed {
8
+ &.ds-filter--closed {
9
9
  @apply block !important;
10
10
  }
11
11
  }
12
- &.govgr-filter--position-relative-sm {
12
+ &.ds-filter--position-relative-sm {
13
13
  @apply sm:block sm:relative sm:overflow-visible sm:w-full sm:shadow-none sm:z-2;
14
- &.govgr-filter--closed {
14
+ &.ds-filter--closed {
15
15
  @apply sm:block;
16
16
  }
17
17
  }
18
- &.govgr-filter--position-relative-md {
18
+ &.ds-filter--position-relative-md {
19
19
  @apply md:block md:relative md:overflow-visible md:w-full md:shadow-none md:z-2;
20
- &.govgr-filter--closed {
20
+ &.ds-filter--closed {
21
21
  @apply md:block;
22
22
  }
23
23
  }
24
- &.govgr-filter--position-relative-lg {
24
+ &.ds-filter--position-relative-lg {
25
25
  @apply lg:block lg:relative lg:overflow-visible lg:w-full lg:shadow-none lg:z-2;
26
- &.govgr-filter--closed {
26
+ &.ds-filter--closed {
27
27
  @apply lg:block;
28
28
  }
29
29
  }
30
30
  }
31
- .govgr-filter--border {
31
+ .ds-filter--border {
32
32
  @apply border border-base-300 p-4;
33
33
  }
34
- .govgr-filter--closed {
34
+ .ds-filter--closed {
35
35
  @apply hidden;
36
36
  }
37
- .govgr-filter__content {
37
+ .ds-filter__content {
38
38
  @apply flex flex-col gap-8 p-0;
39
39
  }
40
- .govgr-filter__options--horizontal {
40
+ .ds-filter__options--horizontal {
41
41
  @apply flex gap-4 flex-col;
42
42
  align-items: stretch;
43
43
  @apply md:flex-row md:flex-wrap;
44
44
  }
45
45
  @media (min-width: 768px) {
46
- .govgr-filter__options--horizontal {
46
+ .ds-filter__options--horizontal {
47
47
  align-items: flex-end;
48
48
  }
49
49
  }
50
- .govgr-filter__heading,
51
- .govgr-filter__selected,
52
- .govgr-filter__options {
50
+ .ds-filter__heading,
51
+ .ds-filter__selected,
52
+ .ds-filter__options {
53
53
  @apply p-0;
54
54
  }
55
- .govgr-filter__heading {
55
+ .ds-filter__heading {
56
56
  @apply mb-4;
57
57
  }
58
- .govgr-filter__selected {
58
+ .ds-filter__selected {
59
59
  @apply bg-base-200 p-4 m-0 rounded;
60
60
  }
61
- .govgr-filter__selected-heading {
61
+ .ds-filter__selected-heading {
62
62
  @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-6 justify-between gap-x-2;
63
63
  }
64
- .govgr-input__search-btn {
64
+ .ds-input__search-btn {
65
65
  @apply shadow-none !important;
66
66
  @apply border-b-2 border-base-content rounded-none
67
67
  px-4 py-2 w-min m-0 ml-3
68
68
  flex gap-2
69
69
  hover:bg-success-hover active:bg-success-hover hover:no-underline;
70
70
  }
71
- .govgr-search {
71
+ .ds-search {
72
72
  @apply flex w-full max-w-3xl;
73
73
  }
74
- .govgr-results__action-bar {
74
+ .ds-results__action-bar {
75
75
  @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline;
76
76
  > * {
77
77
  @apply mb-0;
78
78
  }
79
79
  }
80
- .govgr-results__heading {
80
+ .ds-results__heading {
81
81
  @apply flex flex-wrap justify-between items-baseline gap-x-2;
82
82
  }
83
- .govgr-results__actions {
83
+ .ds-results__actions {
84
84
  @apply flex flex-wrap gap-4 justify-start min-w-min mb-4;
85
85
  }
86
- .govgr-link-filters {
86
+ .ds-link-filters {
87
87
  @apply block md:hidden;
88
88
  }
89
89
 
90
90
  /* overrides */
91
91
 
92
- .govgr-filter {
92
+ .ds-filter {
93
93
  @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
94
94
  box-shadow: 0 0 30px rgba(var(--color-base-900-rgb), 0.9);
95
- .govgr-select {
95
+ .ds-select {
96
96
  @apply w-full;
97
97
  }
98
98
  }
99
- .govgr-filter__options--horizontal {
100
- .govgr-field {
99
+ .ds-filter__options--horizontal {
100
+ .ds-field {
101
101
  @apply mb-0;
102
102
  }
103
- .govgr-label,
104
- .govgr-btn {
103
+ .ds-label,
104
+ .ds-btn {
105
105
  @apply mb-0;
106
106
  }
107
107
  }
108
- .govgr-filter__heading {
109
- .govgr-close-btn,
110
- .govgr-heading-xs,
111
- .govgr-heading-sm,
112
- .govgr-heading-md,
113
- .govgr-heading-lg,
114
- .govgr-heading-xl {
108
+ .ds-filter__heading {
109
+ .ds-close-btn,
110
+ .ds-heading-xs,
111
+ .ds-heading-sm,
112
+ .ds-heading-md,
113
+ .ds-heading-lg,
114
+ .ds-heading-xl {
115
115
  @apply m-0;
116
116
  }
117
117
  }
118
- .govgr-filter__selected-heading {
119
- .govgr-link,
120
- .govgr-heading-xs,
121
- .govgr-heading-sm,
122
- .govgr-heading-md,
123
- .govgr-heading-lg,
124
- .govgr-heading-xl {
118
+ .ds-filter__selected-heading {
119
+ .ds-link,
120
+ .ds-heading-xs,
121
+ .ds-heading-sm,
122
+ .ds-heading-md,
123
+ .ds-heading-lg,
124
+ .ds-heading-xl {
125
125
  @apply m-0 h-full;
126
126
  }
127
127
  }
128
- .govgr-input__search-btn {
129
- .govgr-svg-icon--search {
128
+ .ds-input__search-btn {
129
+ .ds-svg-icon--search {
130
130
  fill: var(--color-white);
131
131
  @apply w-7 h-7;
132
132
  }
133
133
  }
134
- .govgr-results__action-bar {
135
- .govgr-field {
134
+ .ds-results__action-bar {
135
+ .ds-field {
136
136
  @apply flex items-baseline gap-2;
137
137
  }
138
138
  }
@@ -1,45 +1,45 @@
1
- .govgr-footer {
1
+ .ds-footer {
2
2
  @apply border-0 border-solid font-normal text-base py-4 md:py-8
3
3
  border-t-4 border-tertiary text-base-800 bg-base-200 w-full
4
4
  print:py-2 print:bg-white print:border-t-2;
5
5
  }
6
- .govgr-footer__info {
6
+ .ds-footer__info {
7
7
  @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-center md:justify-between box-border ;
8
8
  }
9
- .govgr-footer__info-section {
9
+ .ds-footer__info-section {
10
10
  @apply mx-2 md:mx-4 mb-6 print:mb-4;
11
11
  }
12
- .govgr-footer__info-section--grow {
12
+ .ds-footer__info-section--grow {
13
13
  @apply flex flex-grow;
14
14
  }
15
- .govgr-footer__content {
15
+ .ds-footer__content {
16
16
  @apply w-full;
17
17
  }
18
- .govgr-footer__content--logos {
18
+ .ds-footer__content--logos {
19
19
  @apply flex flex-wrap items-center mb-6 md:mb-8;
20
20
  }
21
- .govgr-footer__logo {
21
+ .ds-footer__logo {
22
22
  @apply mr-4;
23
23
  @apply print:w-32 print:min-w-32 !important;
24
24
  &:last-child {
25
25
  @apply mr-0;
26
26
  }
27
27
  }
28
- .govgr-footer__government-logo-inverted {
28
+ .ds-footer__government-logo-inverted {
29
29
  @apply max-w-full h-auto w-52 min-w-52 hidden;
30
30
 
31
31
  }
32
- .govgr-footer__logo, .govgr-footer__government-logo {
32
+ .ds-footer__logo, .ds-footer__government-logo {
33
33
  @apply max-w-full h-auto w-52 min-w-52 block;
34
34
  }
35
- .govgr-footer__copyright {
35
+ .ds-footer__copyright {
36
36
  @apply mt-6 print:mt-4;
37
37
  font-size: var(--footer__copyright-font-size);
38
- .govgr-link {
38
+ .ds-link {
39
39
  font-size: inherit;
40
40
  }
41
41
  }
42
- .govgr-footer__link {
42
+ .ds-footer__link {
43
43
  @apply underline ;
44
44
  &:hover {
45
45
  text-decoration-thickness: 2px;
@@ -52,45 +52,45 @@
52
52
  text-decoration: none;
53
53
  }
54
54
  }
55
- .govgr-footer__navigation {
55
+ .ds-footer__navigation {
56
56
  @apply flex flex-wrap print:hidden;
57
57
  }
58
- .govgr-footer__navigation-section {
58
+ .ds-footer__navigation-section {
59
59
  @apply inline-block mx-4 mb-8 align-top flex-grow flex-shrink
60
60
  print:hidden;
61
61
  }
62
62
  @media (min-width: 768px) {
63
- .govgr-footer__navigation-section:first-child:nth-last-child(2) {
63
+ .ds-footer__navigation-section:first-child:nth-last-child(2) {
64
64
  @apply flex-grow-2;
65
65
  }
66
66
  }
67
- .govgr-footer__list {
67
+ .ds-footer__list {
68
68
  @apply m-0 p-0 list-none gap-x-6 text-sm md:text-base
69
69
  print:hidden;
70
70
  }
71
- .govgr-footer__list--horizontal {
71
+ .ds-footer__list--horizontal {
72
72
  @apply mb-4;
73
- .govgr-footer__list-item {
73
+ .ds-footer__list-item {
74
74
  @apply inline-block mr-4 mb-2;
75
75
  }
76
76
  }
77
77
  @media (min-width: 768px) {
78
- .govgr-footer__list--columns-2 {
78
+ .ds-footer__list--columns-2 {
79
79
  column-count: 2;
80
80
  }
81
81
  }
82
- .govgr-footer__list-item {}
83
- .govgr-footer__heading {
82
+ .ds-footer__list-item {}
83
+ .ds-footer__heading {
84
84
  @apply mb-4 pb-4 border-b border-base-300;
85
85
  }
86
86
 
87
87
  /* overrides */
88
88
 
89
- .govgr-footer {
90
- .govgr-section-break {
89
+ .ds-footer {
90
+ .ds-section-break {
91
91
  @apply print:hidden;
92
92
  }
93
- .govgr-link {
93
+ .ds-link {
94
94
  @apply print:text-base-content;
95
95
  }
96
96
  }