Merge branch 'feature/listevisning-valg-ny'

Author: bjoost94

package.json

@@ -14,6 +14,7 @@
     "@fortawesome/pro-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@kartverket/geonorge-web-components": "^4.0.11",
+    "@navikt/aksel-icons": "^8.9.0",
     "@uiw/react-md-editor": "^3.20.5",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.5.2",

src/components/partials/SearchResults.jsx

@@ -20,7 +20,8 @@ import FacetFilter from "@/components/partials/FacetFilter";
 // Stylesheets
 import style from "@/components/partials/SearchResults.module.scss";
 
-export const SearchResults = ({ searchData, searchResultsType }) => {
+export const SearchResults = ({ searchData, searchResultsType, viewMode }) => {
+
     const dispatch = useDispatch();
 
     const getShowMoreLink = () => {
@@ -43,11 +44,21 @@ export const SearchResults = ({ searchData, searchResultsType }) => {
                             visibleFields={["DownloadButton", "MapButton", "ApplicationButton"]}
                             key={i}
                             stretchButtons
+                            viewMode={viewMode}
                         />
                     </ErrorBoundary>
                 );
             });
-            return React.createElement("div", { className: style.list, key: "searchResult" }, listItemElements);
+            return React.createElement(
+                "div",
+                {
+                    className: viewMode === "list" ? style.resultsList : style.resultsGrid,
+                    key: "searchResult"
+                },
+                listItemElements
+            );
+
+
         } else {
             return null;
         }

src/components/partials/SearchResults.module.scss

@@ -1,14 +1,16 @@
 @use "../../scss/abstracts/all" as *;
-
 @import "@digdir/designsystemet-css/index.css";
 
-
+/* =========================
+   TABS
+   ========================= */
 
 :local(.tabs) {
   margin: 0 0 32px;
   list-style: none;
   background-color: #f8f8f7;
   flex: 1;
+
   @include breakpoint(tablet) {
     padding: 0 20px;
   }
@@ -23,6 +25,7 @@
     font-weight: 600;
     margin-right: 16px;
     cursor: pointer;
+
     @include breakpoint(tablet) {
       padding: 10px;
     }
@@ -52,6 +55,10 @@
   }
 }
 
+/* =========================
+   SUB TABS
+   ========================= */
+
 :local(.subTabs) {
   margin: 0 0 16px;
   padding: 0 20px;
@@ -89,37 +96,35 @@
   }
 }
 
-:local(.downloadcsv) {
-  margin: 10px;
-  text-align: right;
-  margin-bottom: 20px;
+/* =========================
+   RESULT CONTAINERS
+   ========================= */
+
+:local(.resultsGrid) {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
 }
 
-:local(.list) {
-    display: grid;
-    grid-template-columns:repeat(auto-fill, minmax(350px, 1fr)); 
-    gap: 24px;
-    margin-bottom: 24px;
 
-}
 
-//styling of card component from Designsystemet
-:global(.ds-card){
-  background-color: var(--ds-color-accent-background-default);
-  color: var (--ds-color-text-default);
+:local(.resultsList) {
   display: flex;
   flex-direction: column;
-  border-radius:10px;
-  border: 1px solid #d3d3d3;
-  width: 100%;
-  min-height:200px;
-  padding: 24px;
-  margin-bottom:24px;
+  gap: 16px;
+  margin-bottom: 24px;
 }
 
-:local(.list) :global(.ds-card) {
-		margin-bottom: 0px;
-	}
+/* =========================
+   MISC UI
+   ========================= */
+
+:local(.downloadcsv) {
+  margin: 10px;
+  text-align: right;
+  margin-bottom: 20px;
+}
 
 :local(.morecontainer) {
   width: 100%;
@@ -131,6 +136,7 @@
   margin: 0 80px 20px;
   font-size: 20px;
   height: 52px;
+
   > span {
     margin: 0 10px;
     display: inline-block;
@@ -147,36 +153,29 @@
   }
 }
 
+/* =========================
+   LAYOUT STRUCTURE
+   ========================= */
+
 :local(.activeContent) {
   display: block;
+  margin-top: 70px;
+
   @media print {
     margin-top: 0;
   }
-  margin-top: 70px;
-  flex-wrap: nowrap;
+
   @include breakpoint(tablet) {
     flex: 4;
     display: flex;
     margin-top: 0;
   }
 }
 
-:local(.resetSearchResults) {
-  margin-left: 10px;
-}
-
-.hide {
-  display: none;
-}
-
-.show {
-  display: inline;
-  padding-left: 10px;
-}
-
 :local(.searchResultContainer) {
   flex: 100%;
   margin: 0 20px;
+
   @include breakpoint(tablet) {
     flex: 3;
   }
@@ -195,3 +194,20 @@
   display: block;
   margin-bottom: 10px;
 }
+
+/* =========================
+   UTIL
+   ========================= */
+
+:local(.resetSearchResults) {
+  margin-left: 10px;
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: inline;
+  padding-left: 10px;
+}

src/components/partials/SearchResults/MetadataSearchResult.jsx

@@ -35,6 +35,8 @@ import style from "@/components/partials/SearchResults/MetadataSearchResult.modu
 const MetadataSearchResult = (props) => {
     const dispatch = useDispatch();
 
+    
+
     // State
     const [copied, setCopied] = useState(false);
 
@@ -256,15 +258,17 @@ const MetadataSearchResult = (props) => {
 
     return (
         //designsystemet list card element
-        <div className={style.listItem}>
+        <div className={`${style.listItem} ${props.viewMode === "list" ? style.listMode : style.gridMode}`}>
             <Card color="neutral" variant="outline">
                 {props.enableThumbnail ? renderThumbnail() : null}
-                {renderListItemInfo()}
-                <span className={style.listItemTitle}>
+                <div className={style.contentWrapper}>
+                    {renderListItemInfo()}
+                    <span className={style.listItemTitle}>
                     <ErrorBoundary>{renderLink()}</ErrorBoundary>
-                </span>
-                <div className={style.flex}>
+                    </span>
+                    <div className={style.flex}>
                     {renderType()} {renderDistributionFormats()}
+                    </div>
                 </div>
                 {renderButtons()}
             </Card>
@@ -276,12 +280,14 @@ const MetadataSearchResult = (props) => {
 
 MetadataSearchResult.propTypes = {
     searchResult: PropTypes.object.isRequired,
-    visibleFields: PropTypes.array
+    visibleFields: PropTypes.array,
+    viewMode: PropTypes.oneOf(["grid", "list"])
 };
 
 MetadataSearchResult.defaultProps = {
     visibleFields: [],
-    enableThumbnail: true
+    enableThumbnail: true,
+    viewMode: "grid"
 };
 
 export default MetadataSearchResult;