[NDRR-Dashboard] WIP Card

app/assets/stylesheets/application.scss

@@ -1 +1,5 @@
 @import "lib/govuk-frontend/dist/govuk/base";
+@import 'components/colors';
+@import 'components/flexbox';
+@import 'components/card';
+

app/assets/stylesheets/components/_card.scss

@@ -0,0 +1,172 @@
+//THIS IS THE STYLE FOR CARDS:
+.card {
+  flex-grow: 0;
+  flex-basis: 100%;
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:600px) and (max-width:900px) {
+  .card {
+    flex-basis: 45.99%;
+    // Every card in the first row needs horizontal margin
+    &:nth-child(2n-1) {
+      margin-right: 3%;
+    }
+    // Every card in the second row needs horizontal margin
+    &:nth-child(2n-2) {
+      margin-left: 3%;
+    }
+  }
+}
+
+@media screen and (min-width:900px) {
+  .card {
+    flex-basis: 31%;
+
+    &:nth-child(3n-1) {
+      margin-left: 3%;
+      margin-right: 3%;
+    }
+  }
+}
+
+html[data-useragent*='MSIE 10.0'] .flex-container {
+  .card {
+    flex-basis: 31%;
+    margin: 3%;
+  }
+}
+
+.card {
+  border: 1px solid $panel-colour;
+  font-size: 16px;
+
+  &.inactive {
+    color: $secondary-text-colour;
+  }
+
+  .card-heading {
+    margin-top: 0;
+    color: #005EA5;
+  }
+
+  .card-body {
+    border-bottom: 1px solid #dee0e2;
+    padding: 15px;
+    background-color: govuk-colour("light-grey");
+    *:last-child {
+      margin-bottom: 0;
+    }
+
+    &.active {
+      background-color: $grey-4;
+      transition: .1s ease-in-out;
+
+      .card-heading a {
+        color: $link-colour;
+        margin-top: 0;
+          &:focus {
+            color: $black;
+            outline: 3px solid transparent;
+            box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+          }
+      }
+    }
+
+    .detail-large {
+      color: $secondary-text-colour;
+      font-size: 32px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .detail {
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+  }
+
+  .card-action {
+    border-top: 0;
+    padding: 12px;
+
+    a {
+      display: inline;
+      color: $link-colour;
+      line-height: 1.5em;
+
+      &:link,
+      &:visited {
+        color: $link-colour;
+      }
+
+      &:hover {
+        text-decoration: none;
+        border-bottom: 1px solid $link-colour;
+        color: #2e8aca;
+      }
+
+      &:focus {
+        color: $black;
+        outline: 3px solid transparent;
+        box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+      }
+    }
+
+    ul {
+      margin: 0;
+
+      li {
+        margin: 0 0 1em;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+//THIS IS THE TRANSITION ON HOVER FOR CARDS:
+  .js-enabled .card-body.active:hover {
+    background-color: #1d70b8;
+    color: #ffffff;
+    cursor: pointer;
+  }
+
+  .js-enabled .card-body.active:hover p, .js-enabled .card-body.active:hover h2 {
+    color: #ffffff;
+  }
+
+  .js-enabled .card-body.active:hover .card-heading a {
+    color: #ffffff;
+  }
+
+  .js-enabled .card-body.active:hover .status-low {
+    border: 1px solid #FFFFFF;
+    color: #FFFFFF;
+    transition-delay: .25s;
+  }
+
+  .js-enabled .card-body.active:hover .status-med {
+    background-color: #005EA5;
+    border: 1px solid #FFFFFF;
+    color: #FFFFFF;
+    transition-delay: .25s;
+  }
+
+  .js-enabled .card-body.active:hover .status-high {
+    border: 1px solid #FFFFFF;
+    transition-delay: .25s;
+  }
+
+  .js-enabled .card-body.active:hover .detail-large {
+    color: #FFFFFF;
+    transition-delay: .25s;
+  }
+
+  .js-enabled .card-body.active a {
+    display: inline-block;
+    text-decoration: none;
+  }

app/assets/stylesheets/components/_colors.scss

@@ -0,0 +1,18 @@
+$govuk-blue: #005ea5;
+$red: #d4351c;
+$grey-1: #6f777b;
+$grey-2: #bfc1c3;
+$grey-3: #dee0e2;
+$grey-4: #f8f8f8;
+$light-blue: #2b8cc4;
+$link-colour: $govuk-blue;
+$link-active-colour: $light-blue;
+$link-hover-colour: $light-blue;
+$link-visited-colour: #4c2c92;
+$yellow: #ffbf47;
+$black: #0b0c0c;
+$banner-text-colour: #000;
+$white: #fff;
+$panel-colour: #dee0e2;
+$secondary-text-colour: $grey-1;
+$page-colour: $white;

app/assets/stylesheets/components/_flexbox.scss

@@ -0,0 +1,11 @@
+.flex-container {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding: 0 15px;
+}

app/uk/gov/hmrc/ndrrprotofrontend/config/AppConfig.scala

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 HM Revenue & Customs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 package uk.gov.hmrc.ndrrprotofrontend.config
 
 import javax.inject.{Inject, Singleton}

app/uk/gov/hmrc/ndrrprotofrontend/config/ErrorHandler.scala

@@ -1,9 +1,27 @@
+/*
+ * Copyright 2024 HM Revenue & Customs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 package uk.gov.hmrc.ndrrprotofrontend.config
 
-import javax.inject.{Inject, Singleton}
+import play.api.Logging
+import play.api.http.HttpErrorHandler
 
-import play.api.i18n.MessagesApi
-import play.api.mvc.RequestHeader
+import javax.inject.{Inject, Singleton}
+import play.api.i18n.{I18nSupport, Messages, MessagesApi}
+import play.api.mvc.{Request, RequestHeader}
 import play.twirl.api.Html
 import uk.gov.hmrc.play.bootstrap.frontend.http.FrontendErrorHandler
 import uk.gov.hmrc.ndrrprotofrontend.views.html.ErrorTemplate

app/uk/gov/hmrc/ndrrprotofrontend/config/Module.scala

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 HM Revenue & Customs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 package uk.gov.hmrc.ndrrprotofrontend.config
 
 import com.google.inject.AbstractModule

app/uk/gov/hmrc/ndrrprotofrontend/controllers/ContactDetailsController.scala

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2024 HM Revenue & Customs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package uk.gov.hmrc.ndrrprotofrontend.controllers
+
+import play.api.mvc.{Action, AnyContent, MessagesControllerComponents}
+import uk.gov.hmrc.ndrrprotofrontend.models.DashboardCard
+import uk.gov.hmrc.ndrrprotofrontend.views.html.ContactDetailsView
+import uk.gov.hmrc.play.bootstrap.frontend.controller.FrontendController
+
+import javax.inject.{Inject, Singleton}
+import scala.concurrent.Future
+
+@Singleton
+class ContactDetailsController @Inject()(
+                                          mcc: MessagesControllerComponents,
+                                          contactDetailsView: ContactDetailsView)
+  extends FrontendController(mcc) {
+  val show: Action[AnyContent] = Action.async { implicit request =>
+    Future.successful(
+      Ok(
+        contactDetailsView() //todo make this a sequence
+      )
+    )
+  }
+}

app/uk/gov/hmrc/ndrrprotofrontend/controllers/DashboardController.scala

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2024 HM Revenue & Customs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package uk.gov.hmrc.ndrrprotofrontend.controllers
+
+import play.api.i18n.Messages
+import uk.gov.hmrc.auth.delegation.Link
+import play.api.mvc.{Action, AnyContent, MessagesControllerComponents}
+import uk.gov.hmrc.ndrrprotofrontend.models.{Card, DashboardCard}
+import uk.gov.hmrc.ndrrprotofrontend.views.html.DashboardView
+import uk.gov.hmrc.play.bootstrap.frontend.controller.FrontendController
+
+import javax.inject.{Inject, Singleton}
+import scala.concurrent.Future
+
+  @Singleton
+  class DashboardController @Inject()(
+                                       mcc: MessagesControllerComponents,
+                                       dashboardView: DashboardView)
+    extends FrontendController(mcc) {
+
+    lazy val testUser: String = "Jake Reid"
+
+    private def hasPropertyCheck(userProperty: Option[Int])(implicit messages: Messages):Seq[Card] = {
+      userProperty match {
+        case Some(properties) => Seq(
+          DashboardCard.card(DashboardCard.propertiesCard(
+            link = Link(
+              text = Some("home.propertiesCard.manageProperties"),
+              url = "/ndrr-proto-frontend/what-you-will-need"))),
+          DashboardCard.card(DashboardCard.reportChangeCard()),
+        )
+        case _ => Seq(
+          DashboardCard.card(
+            DashboardCard.propertiesCard(
+              link = Link(
+                text = Some("home.propertiesCard.addProperty"),
+                url = "/ndrr-proto-frontend/what-you-will-need"),
+                tag = Some("home.propertiesCard.tag"))
+          )
+        )
+      }
+    }
+
+    val show: Action[AnyContent] = Action.async { implicit request =>
+      Future.successful(
+        Ok(
+          dashboardView(
+            user = testUser,
+            cards = hasPropertyCheck(Some(1))
+          )
+        )
+      )
+    }
+}