@civicactions/cmsds-open-data-components 2.1.1 → 3.0.0-alpha.2

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.
package/dist/main.css CHANGED
@@ -70,6 +70,10 @@ nav.dc-c-site-menu .dc-c-header--links a.dc-c-active-link span {
70
70
  display: flex;
71
71
  }
72
72
 
73
+ .dc-dataset-search--clear-all-filters {
74
+ width: 100%;
75
+ }
76
+
73
77
  .dc-c-datatable {
74
78
  border-spacing: 0;
75
79
  width: 100%;
package/dist/main.css.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"AAAA;;;;ACCE;;;;AAEE;;;;AAKF;;;;AAIA;;;;;;ACZF;;;;AAIA;;;;;;;ACJA;;;;AAIA;;;;AAIA;;;;AAEE;;;;AAKF;;;;AAEE;;;;;;;;;AAUF;;;;AAIA;;;;;;AC/BA;;;;;AAGE;;;;;AAIA;;;;;;AAOF;;;;AAIA;;;;AAKE;;;;;;;;;;;;;;AAYE;;;;AAQF;;;;;;;AAQF;;;;AAIA;;;;;AAKE;;;;;;;;;AAUF;;;;AAGA;;;;AAGA;;;;AC5EA;;;;;ACCE;;;;AAKF;;;;AAIA;;;;;ACTE;;;;ACAA;;;;;;;;;AAUF;;;;;;;AAOA;;;;ACjBE;;;;AAGA;;;;;;;;ACHA;;;;;;;AAQF;;;;;AAGE;;;;;;;;;;;;;;;;AAiBF;;;;;;;AAKE;;;;;;;;;;;;;;;AAgBF;;;;;;;;;;;;;;AAcA;;;;;;;;AAME;;;;AAKF;;;;;AAME;;;;;;;;;;AASA;;;;;;AAKA;;;;;;;;AAUA;;;;AAKF;;;;;;;;;;;;;;;;AAeA;;;;AAIE;;;;;AAIA;;;;AAMA;;;;;AAIA;;;;AAOA;;;;;AAMF;;;;;;AAKE;;;;;;;AAOA;;;;;;;;;;;;;;;;AAeA;;;;;;;AAQF;;;;;;AAMA;;;;;AAGE;;;;AAGA;;;;;;;;AASA;;;;AAMF;EACE;;;;;AAMF;EACE;;;;;;;EAKE;;;;;EAIA;;;;;;;;EAOA;;;;;;;;;AAYF;;;;;AAGE;;;;;AAIA;;;;;;AAKE;;;;AAIF;;;;;AAGE;;;;AAIF;;;;AAYJ;;;;;;;;AASA;;;;AAIA;;;;AAGA;;;;AAIA;;;;;;;;;;AAQE;;;;;AAGE;;;;AAIF;;;;AAMF;;;;AAIA;;;;AAKE;;;;;;;;;;;;;;;;ACnVF;;;;AAEE;;;;;;AAOF;;;;AAIA;;;;;AAGE;;;;AAKF;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AASA;;;;;;;;;AAQE;;;;;AAKA;;;;AAIA;;;;;;AAMF;;;;;;ACzEA;;;;;;;;AAKE;;;;;AAGE;;;;;;;;AAQE;;;;;AASN;;;;AAIA;;;;AC7BA;;;;AAIA;;;;AAMI;;;;AAMJ","sources":["src/components/NavLink/NavLink.scss","src/components/DatasetSearchListItem/dataset-search-list-item.scss","src/components/DatasetSearchFacets/dataset-search-facets.scss","src/templates/DatasetSearch/dataset-search.scss","src/components/Datatable/datatable.scss","src/components/DatasetTags/dataset-tags.scss","src/components/DatasetAdditionalInformation/additional-information-table.scss","src/components/ResourceInformation/resource-information-table.scss","src/templates/Dataset/dataset.scss","src/components/MobileHeader/mobile-header.scss","src/templates/Header/header.scss","src/templates/Footer/footer.scss","src/components/Breadcrumb/breadcrumb.scss","src/templates/FilteredResource/filtered-resource.scss"],"sourcesContent":["nav.dc-c-site-menu .dc-c-header--links a.dc-c-active-link span {\n border-bottom: 2px solid #{var(--color-primary-alt-light)};\n}",".dc-dataset-searchlist-item {\n h2 a {\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n\n ul {\n list-style: none;\n }\n\n .dc-dataset-searchlist-item--keyword {\n background: #{var(--color-primary-alt-lightest)};\n border: none;\n color: #{var(--color-base)};\n }\n}\n",".dc-dataset-search--facets-container .ds-c-accordion__content {\n max-height: 32rem;\n}\n\n.dc-dataset-search--facets {\n display: block;\n list-style: none;\n position: relative;\n max-height: 32rem;\n}\n",".dc-dataset-search-list {\n list-style: none;\n}\n\n.dc-c-clear-filters {\n font-weight: 300;\n}\n\n.dc-fulltext--input-container {\n width: 100%;\n input {\n max-width: inherit;\n }\n}\n\n.dc-search-header {\n display: relative;\n &::after {\n content: '';\n display: block;\n width: 48px;\n height: 4px;\n margin: 16px 0;\n background-color: #{var(--color-primary-alt-light)};\n }\n}\n\n.dataset-results-count {\n font-weight: bold;\n}\n\n.dc-dataset-search--facets-container .ds-c-accordion__button {\n display: flex;\n justify-content: space-between;\n padding: 16px 24px 16px 24px;\n}\n",".dc-c-datatable {\n width: 100%;\n border-spacing: 0px;\n th {\n position: relative;\n text-align: left;\n }\n thead th div {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n}\n\n.dc-thead--fixed-size th {\n border-left: 2px solid var(--color-border);\n}\n\n.dc-thead--fixed-size th:first-child {\n border-left: none;\n}\n\n.dc-thead--resizeable {\n .dc-c-resize-handle {\n top: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n background-color: #{var(--color-gray-light)};\n width: 10px;\n cursor: col-resize;\n min-width: 10px;\n display: block;\n margin-left: -10px;\n z-index: 1;\n &.isResizing,\n &:hover {\n background-color: #{var(--color-primary)};\n }\n }\n}\n\n.dc-thead--truncated {\n th span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline-block;\n }\n}\n\n.dc-c-datatable--even-row td {\n background-color: #{var(--table-striped__background-color)};\n}\n\n.dc-c-sort--default,\n.dc-c-sort--asc,\n.dc-c-sort--desc {\n padding-left: 8px;\n padding-right: 16px;\n &::after {\n font-family: 'Font Awesome 5 Pro';\n display: inline;\n padding-left: 8px;\n line-height: 18px;\n height: 18px;\n width: 18px;\n }\n}\n\n.dc-c-sort--default::after {\n content: '\\f0dc';\n}\n.dc-c-sort--asc::after {\n content: '\\f0de';\n}\n.dc-c-sort--desc::after {\n content: '\\f0dd';\n}\n\n\n// @media (hover: hover) {\n// .resizer {\n// opacity: 0;\n// }\n\n// *:hover > .resizer {\n// opacity: 1;\n// }\n// }",".dc-c-dataset-tags--tag {\n display: inline-block;\n background: #{var(--color-primary-alt-lightest)};\n}\n",".dc-c-additional-info-table {\n table {\n width: 100%;\n }\n}\n\n.dc-c-additional-info-table a {\n word-break: break-all;\n}\n\n.ds-u-word-break-anywhere {\n word-break: break-word;\n overflow-wrap: anywhere;\n}\n",".dc-c-resource-info-table {\n table {\n width: 100%;\n }\n}\n",".dc-resource-header {\n &::before {\n content: '';\n display: block;\n width: 48px;\n height: 4px;\n margin: 8px 0;\n background-color: #{var(--color-primary-alt-light)};\n }\n}\n\n.dc-truncate {\n max-width: 85%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.dc-c-metadata-description {\n white-space: pre-line;\n}\n",".dc-c-mobile-header--menu {\n :focus {\n box-shadow: 0 0 0 3px transparent,0 0 4px 6px transparent;\n }\n :focus-visible {\n // Copy styling from DS items with focus\n background-color: #0000;\n border-radius: var(--button__border-radius);\n box-shadow: 0 0 0 3px var(--color-focus-light),0 0 4px 6px var(--color-focus-dark);\n outline: 3px solid #0000;\n outline-offset: 3px;\n }\n}\n",".ds-c-usa-banner__button-text {\n &::after {\n width: 0 !important;\n height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n}\n\n.dc-c-mobile-menu--open {\n color: #{var(--color-white)};\n text-decoration: none;\n &::before {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f0c9';\n color: #{var(--color-white)};\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n margin-left: 10px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n }\n}\n\n.dc-c-mobile-menu--close {\n color: #{var(--color-white)};\n text-decoration: none;\n padding-left: 0;\n padding-bottom: 16px;\n &::before {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f00d';\n color: #{var(--color-white)};\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n }\n}\n\n.dc-c-mobile-header--menu {\n position: fixed;\n background-color: #{var(--color-gray-dark)};\n top: 0;\n bottom: 0;\n left: -100%;\n z-index: 500;\n height: 100%;\n width: 100%;\n transition: left 0.7s;\n padding: 50px 0;\n visibility: hidden;\n}\n\n.dc-c-mobile-header .dc-c-site-menu--sub-menu {\n position: relative;\n background: transparent;\n top: -24px;\n width: auto;\n left: auto;\n a {\n padding: 8px;\n }\n}\n\n.dc-c-cmsheader {\n position: relative;\n background: #{var(--color-white)};\n}\n\n.dc-c-cms-mobile-header-menu {\n &::before {\n display: block;\n margin-left: 8px;\n margin-bottom: 16px;\n width: 48px;\n height: 2px;\n background: #{var(--color-primary-alt-light)};\n content: '';\n }\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n a,\n a:hover,\n a:focus,\n a:visited {\n background-color: transparent;\n display: inline-block;\n color: #{var(--color-white)};\n text-decoration: none;\n border-bottom: 2px solid transparent;\n }\n a:hover,\n a:active {\n border-bottom: 2px solid #{var(--color-primary-alt-light)};\n }\n}\n.has-submenu > button::after {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f105';\n color: #{var(--color-white)};\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n margin-left: 10px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n}\n.has-submenu.open > button::after {\n content: '\\f107';\n}\n.dc-c-header--mobile-links {\n button {\n padding: 0;\n font-weight: 700;\n }\n a {\n display: block;\n }\n}\n\n.dc-c-mobile-header.menu-open {\n .dc-c-cmsheader {\n z-index: 501;\n background-color: transparent;\n }\n .dc-c-cmsheader-menu a,\n button {\n color: #{var(--color-white)};\n }\n .cms-link-container a::before {\n color: #{var(--color-white)};\n }\n .dc-c-mobile-header--menu {\n left: 0;\n visibility: visible;\n }\n}\n\n.cms-link-container {\n display: block;\n margin-right: 20px;\n // margin-top: -5px;\n border-right: none;\n a {\n text-decoration: none;\n border-bottom: none;\n\n margin-right: 20px;\n display: inline-block;\n }\n a::before {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f33e';\n color: #323a45;\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n margin-left: 10px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n }\n img {\n height: auto;\n width: 90px;\n display: inline-block;\n vertical-align: middle;\n }\n}\n\n.cms-text-container {\n display: block;\n padding-top: 28px;\n color: #6f757c;\n}\n\n.dc-c-cmsheader-menu {\n padding: 0;\n margin: 0;\n li {\n list-style: none;\n }\n a {\n margin: 3px 7px;\n padding: 0;\n color: #323a45;\n text-decoration: none;\n border-bottom: 1px solid;\n border-bottom-color: #eee;\n border-bottom-color: rgba(255, 255, 255, 0.2);\n }\n a:hover,\n a:active {\n border-bottom: 2px solid #323a45;\n }\n}\n\n@media (min-width: 544px) {\n .dc-c-main-navigation--search,\n .dc-c-mobile-menu--search {\n border-left: 1px solid #{var(--color-white)};\n }\n}\n\n@media (min-width: 1024px) {\n .cms-link-container {\n height: 85px;\n width: 240px;\n float: left;\n border-right: 1px solid #d6d7d9;\n a {\n margin-top: 28px;\n margin-bottom: 20px;\n }\n img {\n height: auto;\n width: auto;\n display: inline-block;\n vertical-align: middle;\n max-width: 80%;\n }\n a::before {\n font-size: 28px;\n line-height: 28px;\n width: 28px;\n height: 28px;\n margin-left: 0;\n }\n }\n}\n\n\nnav.dc-c-site-menu {\n .dc-c-header--links {\n padding: 0;\n margin: 0;\n li {\n list-style: none;\n height: 100%;\n }\n button {\n // color: #{var(--color-white)};\n text-decoration: none;\n font-size: 16px;\n border: none;\n span {\n border-bottom: 2px solid transparent;\n }\n }\n a {\n text-decoration: none;\n padding: #{var(--space, 8px 24px)};\n span {\n border-bottom: 2px solid transparent;\n }\n }\n > li:hover > button span,\n > li button:focus span,\n > li button:hover span,\n > li:hover > a span,\n > li:focus > a span,\n > li a:hover span,\n > li a:focus span {\n border-bottom: 2px solid #{var(--color-primary-alt-lightest)};\n }\n }\n}\n\nnav.dc-c-site-menu .dc-c-header--links a:focus,\n.dc-c-site-title a:focus {\n background-color: transparent;\n outline: 3px solid transparent;\n box-shadow: 0 0 0 3px #{var(--color-focus-light)}, 0 0 4px 6px #{var(--color-focus-dark)};\n outline-offset: 3px;\n border-radius: #{var(--button__border-radius)};\n}\n\nnav > ul li ul {\n display: none;\n}\n\nnav > ul li.open ul {\n display: block;\n}\nli.has-submenu {\n position: relative;\n}\n\n.dc-c-site-menu--sub-menu {\n background: #{var(--color-primary)};\n position: absolute;\n left: 0;\n top: 48px;\n margin: 0;\n padding: 0;\n width: 300px;\n a {\n display: block;\n padding: 16px;\n span {\n border-bottom: 2px solid transparent;\n }\n }\n a:hover span,\n a:focus span {\n border-bottom: 2px solid #{var(--color-primary-alt-light)};\n }\n}\n\n.dc-c-site-title a {\n text-decoration: none;\n}\n\n.dc-c-mobile-menu--search {\n display: inherit;\n}\n\n.dc-c-search-modal--button {\n &::before {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f002';\n color: #{var(--color-white)};\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n margin-left: 10px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n }\n}\n",".dc-c-footer {\n background-color: white;\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n}\n\n.dc-c-footer--middle-container {\n background: linear-gradient(90deg, #f6f9fd 50%, #e8f0fa 50%);\n}\n\n.dc-c-footer__title {\n font-weight: 400;\n color: #{var(--color-gray)};\n span {\n font-weight: 700;\n }\n}\n\n.dc-c-footer__resources {\n background: #f6f9fd;\n}\n\n.dc-c-footer__utility {\n background: #{var(--color-white)};\n}\n\n.dc-c-footer__utility li {\n list-style: none;\n}\n\n.dc-c-footer__cms-information {\n background: #e8f0fa;\n}\n\n.dc-footer--heading {\n text-transform: uppercase;\n}\n\n.dc-c-emailupdates {\n background-image: linear-gradient(\n 35deg,\n #{var(--color-primary-darkest)},\n #{var(--color-primary-darker)},\n #{var(--color-primary)}\n );\n color: #{var(--color-white)};\n}\n.dc-c-footer--svg-icon {\n width: 40px;\n height: 40px;\n font-size: 42px;\n display: inline-block;\n text-align: center;\n position: relative;\n\n svg.svg-inline--fa {\n width: 1em;\n height: 1em;\n }\n\n .fa-circle {\n fill: #6f757c;\n }\n\n .fa-inverse {\n font-size: 25px;\n padding-left: 2px;\n fill: #{var(--color-white)};\n }\n}\n.svg-inline--fa {\n bottom: 0;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n}\n",".dc-c-breadcrumb__list {\n margin-top: 0;\n margin-bottom: 0;\n list-style-type: none;\n padding-left: 0;\n > li {\n margin-bottom: 0;\n max-width: unset;\n &::after {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f054';\n margin: 0 10px;\n font-size: 10px;\n font-weight: 600;\n }\n &:last-child {\n &::after {\n content: '';\n margin: 0;\n }\n }\n }\n display: block;\n}\n\n.dc-c-breadcrumb__list-item {\n display: inline-block;\n}\n\n.dc-c-breadcrumb__link {\n display: inline;\n}\n",".dc-c-resource-action {\n min-height: 100%;\n}\n\n.dc-filtered-resource-toggle {\n align-self: center;\n}\n\n.dc-c-filterd-resouce-drawer {\n .ds-c-help-drawer__footer {\n h4 {\n display: none;\n }\n }\n}\n\n.dc-c-resource-header--buttons {\n display: flex;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
1
+ {"mappings":"AAAA;;;;ACCE;;;;AAEE;;;;AAKF;;;;AAIA;;;;;;ACZF;;;;AAIA;;;;;;;ACJA;;;;AAIA;;;;AAIA;;;;AAEE;;;;AAKF;;;;AAEE;;;;;;;;;AAUF;;;;AAIA;;;;;;AAMA;;;;ACrCA;;;;;AAGE;;;;;AAIA;;;;;;AAOF;;;;AAIA;;;;AAKE;;;;;;;;;;;;;;AAYE;;;;AAQF;;;;;;;AAQF;;;;AAIA;;;;;AAKE;;;;;;;;;AAUF;;;;AAGA;;;;AAGA;;;;AC5EA;;;;;ACCE;;;;AAKF;;;;AAIA;;;;;ACTE;;;;ACAA;;;;;;;;;AAUF;;;;;;;AAOA;;;;ACjBE;;;;AAGA;;;;;;;;ACHA;;;;;;;AAQF;;;;;AAGE;;;;;;;;;;;;;;;;AAiBF;;;;;;;AAKE;;;;;;;;;;;;;;;AAgBF;;;;;;;;;;;;;;AAcA;;;;;;;;AAME;;;;AAKF;;;;;AAME;;;;;;;;;;AASA;;;;;;AAKA;;;;;;;;AAUA;;;;AAKF;;;;;;;;;;;;;;;;AAeA;;;;AAIE;;;;;AAIA;;;;AAMA;;;;;AAIA;;;;AAOA;;;;;AAMF;;;;;;AAKE;;;;;;;AAOA;;;;;;;;;;;;;;;;AAeA;;;;;;;AAQF;;;;;;AAMA;;;;;AAGE;;;;AAGA;;;;;;;;AASA;;;;AAMF;EACE;;;;;AAMF;EACE;;;;;;;EAKE;;;;;EAIA;;;;;;;;EAOA;;;;;;;;;AAYF;;;;;AAGE;;;;;AAIA;;;;;;AAKE;;;;AAIF;;;;;AAGE;;;;AAIF;;;;AAYJ;;;;;;;;AASA;;;;AAIA;;;;AAGA;;;;AAIA;;;;;;;;;;AAQE;;;;;AAGE;;;;AAIF;;;;AAMF;;;;AAIA;;;;AAKE;;;;;;;;;;;;;;;;ACnVF;;;;AAEE;;;;;;AAOF;;;;AAIA;;;;;AAGE;;;;AAKF;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AASA;;;;;;;;;AAQE;;;;;AAKA;;;;AAIA;;;;;;AAMF;;;;;;ACzEA;;;;;;;;AAKE;;;;;AAGE;;;;;;;;AAQE;;;;;AASN;;;;AAIA;;;;AC7BA;;;;AAIA;;;;AAMI;;;;AAMJ","sources":["src/components/NavLink/NavLink.scss","src/components/DatasetSearchListItem/dataset-search-list-item.scss","src/components/DatasetSearchFacets/dataset-search-facets.scss","src/templates/DatasetSearch/dataset-search.scss","src/components/Datatable/datatable.scss","src/components/DatasetTags/dataset-tags.scss","src/components/DatasetAdditionalInformation/additional-information-table.scss","src/components/ResourceInformation/resource-information-table.scss","src/templates/Dataset/dataset.scss","src/components/MobileHeader/mobile-header.scss","src/templates/Header/header.scss","src/templates/Footer/footer.scss","src/components/Breadcrumb/breadcrumb.scss","src/templates/FilteredResource/filtered-resource.scss"],"sourcesContent":["nav.dc-c-site-menu .dc-c-header--links a.dc-c-active-link span {\n border-bottom: 2px solid #{var(--color-primary-alt-light)};\n}",".dc-dataset-searchlist-item {\n h2 a {\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n\n ul {\n list-style: none;\n }\n\n .dc-dataset-searchlist-item--keyword {\n background: #{var(--color-primary-alt-lightest)};\n border: none;\n color: #{var(--color-base)};\n }\n}\n",".dc-dataset-search--facets-container .ds-c-accordion__content {\n max-height: 32rem;\n}\n\n.dc-dataset-search--facets {\n display: block;\n list-style: none;\n position: relative;\n max-height: 32rem;\n}\n",".dc-dataset-search-list {\n list-style: none;\n}\n\n.dc-c-clear-filters {\n font-weight: 300;\n}\n\n.dc-fulltext--input-container {\n width: 100%;\n input {\n max-width: inherit;\n }\n}\n\n.dc-search-header {\n display: relative;\n &::after {\n content: '';\n display: block;\n width: 48px;\n height: 4px;\n margin: 16px 0;\n background-color: #{var(--color-primary-alt-light)};\n }\n}\n\n.dataset-results-count {\n font-weight: bold;\n}\n\n.dc-dataset-search--facets-container .ds-c-accordion__button {\n display: flex;\n justify-content: space-between;\n padding: 16px 24px 16px 24px;\n}\n\n.dc-dataset-search--clear-all-filters {\n width: 100%;\n}",".dc-c-datatable {\n width: 100%;\n border-spacing: 0px;\n th {\n position: relative;\n text-align: left;\n }\n thead th div {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n}\n\n.dc-thead--fixed-size th {\n border-left: 2px solid var(--color-border);\n}\n\n.dc-thead--fixed-size th:first-child {\n border-left: none;\n}\n\n.dc-thead--resizeable {\n .dc-c-resize-handle {\n top: 0;\n bottom: 0;\n right: 0;\n position: absolute;\n background-color: #{var(--color-gray-light)};\n width: 10px;\n cursor: col-resize;\n min-width: 10px;\n display: block;\n margin-left: -10px;\n z-index: 1;\n &.isResizing,\n &:hover {\n background-color: #{var(--color-primary)};\n }\n }\n}\n\n.dc-thead--truncated {\n th span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: inline-block;\n }\n}\n\n.dc-c-datatable--even-row td {\n background-color: #{var(--table-striped__background-color)};\n}\n\n.dc-c-sort--default,\n.dc-c-sort--asc,\n.dc-c-sort--desc {\n padding-left: 8px;\n padding-right: 16px;\n &::after {\n font-family: 'Font Awesome 5 Pro';\n display: inline;\n padding-left: 8px;\n line-height: 18px;\n height: 18px;\n width: 18px;\n }\n}\n\n.dc-c-sort--default::after {\n content: '\\f0dc';\n}\n.dc-c-sort--asc::after {\n content: '\\f0de';\n}\n.dc-c-sort--desc::after {\n content: '\\f0dd';\n}\n\n\n// @media (hover: hover) {\n// .resizer {\n// opacity: 0;\n// }\n\n// *:hover > .resizer {\n// opacity: 1;\n// }\n// }",".dc-c-dataset-tags--tag {\n display: inline-block;\n background: #{var(--color-primary-alt-lightest)};\n}\n",".dc-c-additional-info-table {\n table {\n width: 100%;\n }\n}\n\n.dc-c-additional-info-table a {\n word-break: break-all;\n}\n\n.ds-u-word-break-anywhere {\n word-break: break-word;\n overflow-wrap: anywhere;\n}\n",".dc-c-resource-info-table {\n table {\n width: 100%;\n }\n}\n",".dc-resource-header {\n &::before {\n content: '';\n display: block;\n width: 48px;\n height: 4px;\n margin: 8px 0;\n background-color: #{var(--color-primary-alt-light)};\n }\n}\n\n.dc-truncate {\n max-width: 85%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.dc-c-metadata-description {\n white-space: pre-line;\n}\n",".dc-c-mobile-header--menu {\n :focus {\n box-shadow: 0 0 0 3px transparent,0 0 4px 6px transparent;\n }\n :focus-visible {\n // Copy styling from DS items with focus\n background-color: #0000;\n border-radius: var(--button__border-radius);\n box-shadow: 0 0 0 3px var(--color-focus-light),0 0 4px 6px var(--color-focus-dark);\n outline: 3px solid #0000;\n outline-offset: 3px;\n }\n}\n",".ds-c-usa-banner__button-text {\n &::after {\n width: 0 !important;\n height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n}\n\n.dc-c-mobile-menu--open {\n color: #{var(--color-white)};\n text-decoration: none;\n &::before {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f0c9';\n color: #{var(--color-white)};\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n margin-left: 10px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n }\n}\n\n.dc-c-mobile-menu--close {\n color: #{var(--color-white)};\n text-decoration: none;\n padding-left: 0;\n padding-bottom: 16px;\n &::before {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f00d';\n color: #{var(--color-white)};\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n }\n}\n\n.dc-c-mobile-header--menu {\n position: fixed;\n background-color: #{var(--color-gray-dark)};\n top: 0;\n bottom: 0;\n left: -100%;\n z-index: 500;\n height: 100%;\n width: 100%;\n transition: left 0.7s;\n padding: 50px 0;\n visibility: hidden;\n}\n\n.dc-c-mobile-header .dc-c-site-menu--sub-menu {\n position: relative;\n background: transparent;\n top: -24px;\n width: auto;\n left: auto;\n a {\n padding: 8px;\n }\n}\n\n.dc-c-cmsheader {\n position: relative;\n background: #{var(--color-white)};\n}\n\n.dc-c-cms-mobile-header-menu {\n &::before {\n display: block;\n margin-left: 8px;\n margin-bottom: 16px;\n width: 48px;\n height: 2px;\n background: #{var(--color-primary-alt-light)};\n content: '';\n }\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n a,\n a:hover,\n a:focus,\n a:visited {\n background-color: transparent;\n display: inline-block;\n color: #{var(--color-white)};\n text-decoration: none;\n border-bottom: 2px solid transparent;\n }\n a:hover,\n a:active {\n border-bottom: 2px solid #{var(--color-primary-alt-light)};\n }\n}\n.has-submenu > button::after {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f105';\n color: #{var(--color-white)};\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n margin-left: 10px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n}\n.has-submenu.open > button::after {\n content: '\\f107';\n}\n.dc-c-header--mobile-links {\n button {\n padding: 0;\n font-weight: 700;\n }\n a {\n display: block;\n }\n}\n\n.dc-c-mobile-header.menu-open {\n .dc-c-cmsheader {\n z-index: 501;\n background-color: transparent;\n }\n .dc-c-cmsheader-menu a,\n button {\n color: #{var(--color-white)};\n }\n .cms-link-container a::before {\n color: #{var(--color-white)};\n }\n .dc-c-mobile-header--menu {\n left: 0;\n visibility: visible;\n }\n}\n\n.cms-link-container {\n display: block;\n margin-right: 20px;\n // margin-top: -5px;\n border-right: none;\n a {\n text-decoration: none;\n border-bottom: none;\n\n margin-right: 20px;\n display: inline-block;\n }\n a::before {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f33e';\n color: #323a45;\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n margin-left: 10px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n }\n img {\n height: auto;\n width: 90px;\n display: inline-block;\n vertical-align: middle;\n }\n}\n\n.cms-text-container {\n display: block;\n padding-top: 28px;\n color: #6f757c;\n}\n\n.dc-c-cmsheader-menu {\n padding: 0;\n margin: 0;\n li {\n list-style: none;\n }\n a {\n margin: 3px 7px;\n padding: 0;\n color: #323a45;\n text-decoration: none;\n border-bottom: 1px solid;\n border-bottom-color: #eee;\n border-bottom-color: rgba(255, 255, 255, 0.2);\n }\n a:hover,\n a:active {\n border-bottom: 2px solid #323a45;\n }\n}\n\n@media (min-width: 544px) {\n .dc-c-main-navigation--search,\n .dc-c-mobile-menu--search {\n border-left: 1px solid #{var(--color-white)};\n }\n}\n\n@media (min-width: 1024px) {\n .cms-link-container {\n height: 85px;\n width: 240px;\n float: left;\n border-right: 1px solid #d6d7d9;\n a {\n margin-top: 28px;\n margin-bottom: 20px;\n }\n img {\n height: auto;\n width: auto;\n display: inline-block;\n vertical-align: middle;\n max-width: 80%;\n }\n a::before {\n font-size: 28px;\n line-height: 28px;\n width: 28px;\n height: 28px;\n margin-left: 0;\n }\n }\n}\n\n\nnav.dc-c-site-menu {\n .dc-c-header--links {\n padding: 0;\n margin: 0;\n li {\n list-style: none;\n height: 100%;\n }\n button {\n // color: #{var(--color-white)};\n text-decoration: none;\n font-size: 16px;\n border: none;\n span {\n border-bottom: 2px solid transparent;\n }\n }\n a {\n text-decoration: none;\n padding: #{var(--space, 8px 24px)};\n span {\n border-bottom: 2px solid transparent;\n }\n }\n > li:hover > button span,\n > li button:focus span,\n > li button:hover span,\n > li:hover > a span,\n > li:focus > a span,\n > li a:hover span,\n > li a:focus span {\n border-bottom: 2px solid #{var(--color-primary-alt-lightest)};\n }\n }\n}\n\nnav.dc-c-site-menu .dc-c-header--links a:focus,\n.dc-c-site-title a:focus {\n background-color: transparent;\n outline: 3px solid transparent;\n box-shadow: 0 0 0 3px #{var(--color-focus-light)}, 0 0 4px 6px #{var(--color-focus-dark)};\n outline-offset: 3px;\n border-radius: #{var(--button__border-radius)};\n}\n\nnav > ul li ul {\n display: none;\n}\n\nnav > ul li.open ul {\n display: block;\n}\nli.has-submenu {\n position: relative;\n}\n\n.dc-c-site-menu--sub-menu {\n background: #{var(--color-primary)};\n position: absolute;\n left: 0;\n top: 48px;\n margin: 0;\n padding: 0;\n width: 300px;\n a {\n display: block;\n padding: 16px;\n span {\n border-bottom: 2px solid transparent;\n }\n }\n a:hover span,\n a:focus span {\n border-bottom: 2px solid #{var(--color-primary-alt-light)};\n }\n}\n\n.dc-c-site-title a {\n text-decoration: none;\n}\n\n.dc-c-mobile-menu--search {\n display: inherit;\n}\n\n.dc-c-search-modal--button {\n &::before {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f002';\n color: #{var(--color-white)};\n font-size: 18px;\n padding-right: 10px;\n display: inline-block;\n line-height: 18px;\n height: 18px;\n width: 18px;\n margin-left: 10px;\n text-align: center;\n vertical-align: middle;\n font-weight: lighter;\n }\n}\n",".dc-c-footer {\n background-color: white;\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n}\n\n.dc-c-footer--middle-container {\n background: linear-gradient(90deg, #f6f9fd 50%, #e8f0fa 50%);\n}\n\n.dc-c-footer__title {\n font-weight: 400;\n color: #{var(--color-gray)};\n span {\n font-weight: 700;\n }\n}\n\n.dc-c-footer__resources {\n background: #f6f9fd;\n}\n\n.dc-c-footer__utility {\n background: #{var(--color-white)};\n}\n\n.dc-c-footer__utility li {\n list-style: none;\n}\n\n.dc-c-footer__cms-information {\n background: #e8f0fa;\n}\n\n.dc-footer--heading {\n text-transform: uppercase;\n}\n\n.dc-c-emailupdates {\n background-image: linear-gradient(\n 35deg,\n #{var(--color-primary-darkest)},\n #{var(--color-primary-darker)},\n #{var(--color-primary)}\n );\n color: #{var(--color-white)};\n}\n.dc-c-footer--svg-icon {\n width: 40px;\n height: 40px;\n font-size: 42px;\n display: inline-block;\n text-align: center;\n position: relative;\n\n svg.svg-inline--fa {\n width: 1em;\n height: 1em;\n }\n\n .fa-circle {\n fill: #6f757c;\n }\n\n .fa-inverse {\n font-size: 25px;\n padding-left: 2px;\n fill: #{var(--color-white)};\n }\n}\n.svg-inline--fa {\n bottom: 0;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n}\n",".dc-c-breadcrumb__list {\n margin-top: 0;\n margin-bottom: 0;\n list-style-type: none;\n padding-left: 0;\n > li {\n margin-bottom: 0;\n max-width: unset;\n &::after {\n font-family: 'Font Awesome 5 Pro';\n content: '\\f054';\n margin: 0 10px;\n font-size: 10px;\n font-weight: 600;\n }\n &:last-child {\n &::after {\n content: '';\n margin: 0;\n }\n }\n }\n display: block;\n}\n\n.dc-c-breadcrumb__list-item {\n display: inline-block;\n}\n\n.dc-c-breadcrumb__link {\n display: inline;\n}\n",".dc-c-resource-action {\n min-height: 100%;\n}\n\n.dc-filtered-resource-toggle {\n align-self: center;\n}\n\n.dc-c-filterd-resouce-drawer {\n .ds-c-help-drawer__footer {\n h4 {\n display: none;\n }\n }\n}\n\n.dc-c-resource-header--buttons {\n display: flex;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
package/dist/main.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import "./main.css";
2
2
  import {jsxs as $hgUW1$jsxs, jsx as $hgUW1$jsx, Fragment as $hgUW1$Fragment} from "react/jsx-runtime";
3
3
  import $hgUW1$react, {useState as $hgUW1$useState, useRef as $hgUW1$useRef, useEffect as $hgUW1$useEffect} from "react";
4
- import {Button as $hgUW1$Button, TextField as $hgUW1$TextField, Spinner as $hgUW1$Spinner, Alert as $hgUW1$Alert, Pagination as $hgUW1$Pagination, Dropdown as $hgUW1$Dropdown, Badge as $hgUW1$Badge, Accordion as $hgUW1$Accordion, AccordionItem as $hgUW1$AccordionItem, Choice as $hgUW1$Choice, Tooltip as $hgUW1$Tooltip, Table as $hgUW1$Table, TableHead as $hgUW1$TableHead, TableRow as $hgUW1$TableRow, TableCell as $hgUW1$TableCell, TableBody as $hgUW1$TableBody, Dialog as $hgUW1$Dialog, HelpDrawer as $hgUW1$HelpDrawer} from "@cmsgov/design-system";
4
+ import {Button as $hgUW1$Button, TextField as $hgUW1$TextField, Spinner as $hgUW1$Spinner, Dropdown as $hgUW1$Dropdown, Alert as $hgUW1$Alert, Pagination as $hgUW1$Pagination, Badge as $hgUW1$Badge, Accordion as $hgUW1$Accordion, AccordionItem as $hgUW1$AccordionItem, Choice as $hgUW1$Choice, Tooltip as $hgUW1$Tooltip, Table as $hgUW1$Table, TableHead as $hgUW1$TableHead, TableRow as $hgUW1$TableRow, TableCell as $hgUW1$TableCell, TableBody as $hgUW1$TableBody, Dialog as $hgUW1$Dialog, HelpDrawer as $hgUW1$HelpDrawer} from "@cmsgov/design-system";
5
5
  import $hgUW1$proptypes from "prop-types";
6
6
  import {NavLink as $hgUW1$NavLink, useLocation as $hgUW1$useLocation, useSearchParams as $hgUW1$useSearchParams, Link as $hgUW1$Link, useNavigate as $hgUW1$useNavigate} from "react-router-dom";
7
+ import $hgUW1$qs from "qs";
7
8
  import $hgUW1$swaggeruireact from "swagger-ui-react";
8
9
  import "swagger-ui-react/swagger-ui.css";
9
- import $hgUW1$qs from "qs";
10
10
  import {useQuery as $hgUW1$useQuery, QueryClient as $hgUW1$QueryClient, QueryClientProvider as $hgUW1$QueryClientProvider} from "@tanstack/react-query";
11
11
  import $hgUW1$axios from "axios";
12
- import $hgUW1$reacttexttruncate from "react-text-truncate";
13
12
  import $hgUW1$dompurify from "dompurify";
13
+ import $hgUW1$reacttexttruncate from "react-text-truncate";
14
14
  import {createColumnHelper as $hgUW1$createColumnHelper, useReactTable as $hgUW1$useReactTable, getCoreRowModel as $hgUW1$getCoreRowModel, getSortedRowModel as $hgUW1$getSortedRowModel, flexRender as $hgUW1$flexRender} from "@tanstack/react-table";
15
15
  import {useMediaQuery as $hgUW1$useMediaQuery} from "react-responsive";
16
16
  import {usePopper as $hgUW1$usePopper} from "react-popper";
@@ -531,7 +531,7 @@ function $116bd29db288848e$export$28fa7926a3fa4176(selectedFacets, fulltext, sor
531
531
 
532
532
 
533
533
 
534
- const $007dd6bfbe0f2956$var$DatasetSearch = ({ rootUrl: rootUrl , pageTitle: pageTitle , introText: introText , fulltextLabel: fulltextLabel , fulltextLabelClassName: fulltextLabelClassName , fulltextPlaceholder: fulltextPlaceholder , formClassName: formClassName , additionalParams: additionalParams , sortOptions: sortOptions , defaultSort: defaultSort , showSort: showSort })=>{
534
+ const $007dd6bfbe0f2956$var$DatasetSearch = ({ rootUrl: rootUrl , pageTitle: pageTitle , introText: introText , fulltextLabel: fulltextLabel , fulltextLabelClassName: fulltextLabelClassName , fulltextPlaceholder: fulltextPlaceholder , filterTitle: filterTitle , formClassName: formClassName , additionalParams: additionalParams , sortOptions: sortOptions , defaultSort: defaultSort , showSort: showSort })=>{
535
535
  const defaultSortBy = "";
536
536
  const defaultFulltext = "";
537
537
  const defaultSelectedFacets = {};
@@ -552,7 +552,31 @@ const $007dd6bfbe0f2956$var$DatasetSearch = ({ rootUrl: rootUrl , pageTitle: pag
552
552
  const [page, setPage] = (0, $hgUW1$useState)(transformedParams.page ? transformedParams.page : defaultPage);
553
553
  const [sort, setSort] = (0, $hgUW1$useState)(transformedParams.sort ? transformedParams.sort : defaultSort ? defaultSort.defaultSort : defaultSortBy);
554
554
  const [sortOrder, setSortOrder] = (0, $hgUW1$useState)(transformedParams.sortOrder ? transformedParams.sortOrder : defaultSort ? defaultSort.defaultOrder : defaultSortOrder);
555
+ const [sortDisplay, setSortDisplay] = (0, $hgUW1$useState)(()=>{
556
+ return sort === "modified" ? sortOrder === "desc" ? "newest" : "oldest" : sortOrder === "desc" ? "titleZA" : "titleAZ";
557
+ });
555
558
  const [selectedFacets, setSelectedFacets] = (0, $hgUW1$useState)(transformedParams.selectedFacets ? transformedParams.selectedFacets : defaultSelectedFacets);
559
+ const setSortOptions = (value)=>{
560
+ setSortDisplay(value);
561
+ switch(value){
562
+ case "newest":
563
+ setSort("modified");
564
+ setSortOrder("desc");
565
+ break;
566
+ case "oldest":
567
+ setSort("modified");
568
+ setSortOrder("asc");
569
+ break;
570
+ case "titleAZ":
571
+ setSort("title");
572
+ setSortOrder("asc");
573
+ break;
574
+ case "titleZA":
575
+ setSort("title");
576
+ setSortOrder("desc");
577
+ break;
578
+ }
579
+ };
556
580
  function updateSelectedFacets(currentFacet) {
557
581
  const facets = (0, $116bd29db288848e$export$9ef1e909a5e43470)(currentFacet, selectedFacets);
558
582
  setPage(1);
@@ -631,187 +655,159 @@ const $007dd6bfbe0f2956$var$DatasetSearch = ({ rootUrl: rootUrl , pageTitle: pag
631
655
  className: "dc-search-header ds-title ds-u-margin-y--3",
632
656
  children: pageTitle
633
657
  }),
634
- /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
658
+ /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
635
659
  className: "ds-l-row",
636
- children: [
637
- /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
638
- className: "ds-l-md-col--8 ds-l-sm-col--12ds-u-margin-bottom--3",
639
- children: [
640
- introText ? introText : null,
641
- /*#__PURE__*/ (0, $hgUW1$jsxs)("form", {
642
- onSubmit: (e)=>{
643
- e.preventDefault();
644
- ()=>{
660
+ children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
661
+ className: "ds-l-col--12",
662
+ children: [
663
+ introText ? introText : null,
664
+ /*#__PURE__*/ (0, $hgUW1$jsxs)("form", {
665
+ onSubmit: (e)=>{
666
+ e.preventDefault();
667
+ ()=>{
668
+ setFullText(filterText);
669
+ setPage(defaultPage);
670
+ };
671
+ },
672
+ className: formClassName,
673
+ children: [
674
+ /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TextField), {
675
+ fieldClassName: "ds-u-margin--0",
676
+ value: filterText,
677
+ className: "dc-fulltext--input-container ds-u-padding-right--2",
678
+ label: fulltextLabel,
679
+ labelClassName: fulltextLabelClassName,
680
+ placeholder: fulltextPlaceholder,
681
+ name: "dataset_fulltext_search",
682
+ onChange: (e)=>setFilterText(e.target.value)
683
+ }),
684
+ /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
685
+ type: "submit",
686
+ variation: "solid",
687
+ htmlFor: "dataset_fulltext_search",
688
+ onClick: ()=>{
645
689
  setFullText(filterText);
646
690
  setPage(defaultPage);
647
- };
648
- },
649
- className: formClassName,
650
- children: [
651
- /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TextField), {
652
- fieldClassName: "ds-u-margin--0",
653
- value: filterText,
654
- className: "dc-fulltext--input-container ds-u-padding-right--2",
655
- label: fulltextLabel,
656
- labelClassName: fulltextLabelClassName,
657
- placeholder: fulltextPlaceholder,
658
- name: "dataset_fulltext_search",
659
- onChange: (e)=>setFilterText(e.target.value)
660
- }),
661
- /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
662
- type: "submit",
663
- variation: "solid",
664
- htmlFor: "dataset_fulltext_search",
665
- onClick: ()=>{
666
- setFullText(filterText);
667
- setPage(defaultPage);
668
- },
669
- children: "Search"
670
- })
671
- ]
672
- }),
673
- status === "loading" ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
674
- className: "ds-u-valign--middle",
675
- "aria-valuetext": "Dataset Search loading",
676
- role: "status"
677
- }) : /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
678
- children: [
679
- /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
680
- className: "ds-u-display--flex ds-u-justify-content--between ds-u-align-items--end",
681
- children: [
682
- /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
683
- children: [
684
- currentResultNumbers && /*#__PURE__*/ (0, $hgUW1$jsxs)("p", {
685
- className: "ds-u-margin-y--0",
686
- role: "region",
687
- "aria-live": "polite",
688
- "data-testid": "currentResults",
689
- children: [
690
- "Showing ",
691
- currentResultNumbers.startingNumber,
692
- " -",
693
- " ",
694
- currentResultNumbers.endingNumber,
695
- " of ",
696
- data.data.total,
697
- " datasets"
698
- ]
699
- }),
700
- /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
701
- className: "ds-u-margin-y--0",
702
- children: (0, $116bd29db288848e$export$b638ec7c7eac7f18)(selectedFacets, {
703
- theme: "Categories",
704
- keyword: "Tags"
705
- })
706
- })
707
- ]
708
- }),
709
- /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
710
- className: "ds-u-padding--0 dc-c-clear-filters",
711
- variation: "ghost",
712
- onClick: ()=>resetFilters(),
713
- children: "Clear all filters"
714
- })
715
- ]
716
- }),
717
- /*#__PURE__*/ (0, $hgUW1$jsxs)("ol", {
718
- className: "dc-dataset-search-list ds-u-padding--0",
719
- children: [
720
- noResults && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
721
- variation: "error",
722
- heading: "No results found."
723
- }),
724
- Object.keys(data.data.results).map((key)=>{
725
- return data.data.results[key];
726
- }).map((item)=>/*#__PURE__*/ (0, $hgUW1$jsx)("li", {
727
- className: "ds-u-padding--0",
728
- children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $dc6d3aaf3e07417b$export$2e2bcd8739ae039), {
729
- item: item,
730
- updateFacets: updateSelectedFacets
731
- })
732
- }, item.identifier))
733
- ]
734
- }),
735
- data.data.total != 0 && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
736
- id: "test-default",
737
- currentPage: Number(page),
738
- totalPages: Math.ceil(Number(data.data.total) / pageSize),
739
- onPageChange: (evt, page)=>{
740
- evt.preventDefault();
741
- window.scroll(0, 0);
742
- setPage(page);
743
- },
744
- renderHref: (page)=>{
745
- const searchParams = buildSearchParams(false);
746
- const includeAnd = searchParams ? "&" : "";
747
- return `/datasets?page=${page}${includeAnd}${searchParams}`;
748
- }
749
- })
750
- ]
751
- })
752
- ]
753
- }),
691
+ },
692
+ children: "Search"
693
+ })
694
+ ]
695
+ })
696
+ ]
697
+ })
698
+ }),
699
+ /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
700
+ className: "ds-l-row ds-u-padding-top--6",
701
+ children: [
754
702
  /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
755
- className: "ds-l-md-col--4 ds-l-sm-col--12",
703
+ className: "ds-l-col--12 ds-l-sm-col--4",
756
704
  children: [
757
- showSort && /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
758
- className: "ds-u-padding--2 ds-u-margin-bottom--4 ds-u-border--1",
759
- children: [
760
- /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
761
- options: sortOptions,
762
- value: sort,
763
- label: "Sort by",
764
- labelClassName: "ds-u-margin-top--0",
765
- name: "dataset_search_sort",
766
- onChange: (e)=>setSort(e.target.value)
767
- }),
768
- /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
769
- options: [
770
- {
771
- label: "Ascending",
772
- value: "asc"
773
- },
774
- {
775
- label: "Descending",
776
- value: "desc"
777
- }
778
- ],
779
- value: sortOrder,
780
- label: "Sort order",
781
- labelClassName: "ds-u-margin-top--0",
782
- name: "dataset_search_sort_order",
783
- onChange: (e)=>setSortOrder(e.target.value)
784
- })
785
- ]
705
+ /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
706
+ className: "dc-dataset-search--clear-all-filters ds-u-margin-bottom--2",
707
+ onClick: ()=>resetFilters(),
708
+ children: "Clear all filters"
786
709
  }),
787
- /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
788
- className: "ds-u-padding--2 ds-u-margin-bottom--4 ds-u-border--1",
789
- children: [
790
- theme ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $19c005961efdef1a$export$2e2bcd8739ae039), {
791
- title: "Categories",
792
- facets: theme,
793
- onclickFunction: updateSelectedFacets,
794
- selectedFacets: selectedFacets.theme,
795
- loading: status === "loading"
796
- }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
797
- className: "ds-u-valign--middle",
798
- "aria-valuetext": "Categories loading",
799
- role: "status"
800
- }),
801
- keyword ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $19c005961efdef1a$export$2e2bcd8739ae039), {
802
- title: "Tags",
803
- facets: keyword,
804
- onclickFunction: updateSelectedFacets,
805
- selectedFacets: selectedFacets.keyword,
806
- loading: status === "loading"
807
- }) : /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
808
- className: "ds-u-valign--middle",
809
- "aria-valuetext": "Tags loading",
810
- role: "status"
811
- })
812
- ]
710
+ theme && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $19c005961efdef1a$export$2e2bcd8739ae039), {
711
+ facets: theme,
712
+ title: "Categories",
713
+ onClickFunction: updateSelectedFacets,
714
+ selectedFacets: selectedFacets.theme
715
+ }),
716
+ keyword && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $19c005961efdef1a$export$2e2bcd8739ae039), {
717
+ facets: keyword,
718
+ title: filterTitle ? filterTitle : "Tags",
719
+ onClickFunction: updateSelectedFacets,
720
+ selectedFacets: selectedFacets.keyword
813
721
  })
814
722
  ]
723
+ }),
724
+ /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
725
+ className: "ds-l-col--12 ds-l-sm-col--8",
726
+ children: status === "loading" ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Spinner), {
727
+ className: "ds-u-valign--middle",
728
+ "aria-valuetext": "Dataset Search loading",
729
+ role: "status"
730
+ }) : /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
731
+ children: [
732
+ /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
733
+ className: "ds-u-display--flex ds-u-justify-content--between ds-u-align-items--end ds-u-flex-wrap--reverse ds-u-sm-flex-wrap--wrap",
734
+ children: [
735
+ /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
736
+ className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--8",
737
+ children: [
738
+ currentResultNumbers && /*#__PURE__*/ (0, $hgUW1$jsxs)("p", {
739
+ className: "ds-u-margin-y--0",
740
+ role: "region",
741
+ "aria-live": "polite",
742
+ "data-testid": "currentResults",
743
+ children: [
744
+ "Showing ",
745
+ currentResultNumbers.startingNumber,
746
+ " -",
747
+ " ",
748
+ currentResultNumbers.endingNumber,
749
+ " of ",
750
+ data.data.total,
751
+ " datasets"
752
+ ]
753
+ }),
754
+ /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
755
+ className: "ds-u-margin-y--0",
756
+ children: (0, $116bd29db288848e$export$b638ec7c7eac7f18)(selectedFacets, {
757
+ theme: "Categories",
758
+ keyword: "Tags"
759
+ })
760
+ })
761
+ ]
762
+ }),
763
+ showSort && /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
764
+ className: "ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-u-sm-padding-right--0",
765
+ children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
766
+ options: sortOptions,
767
+ value: sortDisplay,
768
+ label: "Sort",
769
+ labelClassName: "ds-u-margin-top--0",
770
+ name: "dataset_search_sort",
771
+ onChange: (e)=>setSortOptions(e.target.value)
772
+ })
773
+ })
774
+ ]
775
+ }),
776
+ /*#__PURE__*/ (0, $hgUW1$jsxs)("ol", {
777
+ className: "dc-dataset-search-list ds-u-padding--0",
778
+ children: [
779
+ noResults && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Alert), {
780
+ variation: "error",
781
+ heading: "No results found."
782
+ }),
783
+ Object.keys(data.data.results).map((key)=>{
784
+ return data.data.results[key];
785
+ }).map((item)=>/*#__PURE__*/ (0, $hgUW1$jsx)("li", {
786
+ className: "ds-u-padding--0",
787
+ children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $dc6d3aaf3e07417b$export$2e2bcd8739ae039), {
788
+ item: item,
789
+ updateFacets: updateSelectedFacets
790
+ })
791
+ }, item.identifier))
792
+ ]
793
+ }),
794
+ data.data.total != 0 && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
795
+ id: "test-default",
796
+ currentPage: Number(page),
797
+ totalPages: Math.ceil(Number(data.data.total) / pageSize),
798
+ onPageChange: (evt, page)=>{
799
+ evt.preventDefault();
800
+ window.scroll(0, 0);
801
+ setPage(page);
802
+ },
803
+ renderHref: (page)=>{
804
+ const searchParams = buildSearchParams(false);
805
+ const includeAnd = searchParams ? "&" : "";
806
+ return `/datasets?page=${page}${includeAnd}${searchParams}`;
807
+ }
808
+ })
809
+ ]
810
+ })
815
811
  })
816
812
  ]
817
813
  })
@@ -828,12 +824,20 @@ $007dd6bfbe0f2956$var$DatasetSearch.defaultProps = {
828
824
  showSort: true,
829
825
  sortOptions: [
830
826
  {
831
- label: "Recently Updated",
832
- value: "modified"
827
+ label: "Newest",
828
+ value: "newest"
829
+ },
830
+ {
831
+ label: "Oldest",
832
+ value: "oldest"
833
+ },
834
+ {
835
+ label: "Title A-Z",
836
+ value: "titleAZ"
833
837
  },
834
838
  {
835
- label: "Title",
836
- value: "title"
839
+ label: "Title Z-A",
840
+ value: "titleZA"
837
841
  }
838
842
  ],
839
843
  defaultSort: {