Update styles to match latest design system discussion

i-dot-ai · May 16, 2024 · c55a891 · c55a891
1 parent c821c90
commit c55a891
Show file tree

Hide file tree

Showing 8 changed files with 7,797 additions and 101 deletions.
diff --git a/django_app/frontend/i-ai.scss → django_app/frontend/iai.scss b/django_app/frontend/i-ai.scss → django_app/frontend/iai.scss
@@ -21,9 +21,6 @@
     display: none;
 }
 .govuk-header__content {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
     padding-left: 0;
     width: 100%;
 }
@@ -38,35 +35,42 @@
 .govuk-header__navigation {
     margin-bottom: 0;
 }
+.govuk-header__navigation-list {
+    margin-top: 0.75rem;
+}
+@media (min-width: 769px) {
+    .govuk-header__content {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+    }
+    .govuk-header__navigation-list {
+        margin-top: 0;
+    }
+}
 
 /* BUTTON */
 .govuk-button {
-    background-color: var(--product-colour);
     border: 0;
     border-radius: var(--border-radius);
     box-shadow: none;
-    color: white;
     padding: 13px 12px 12px 12px;
 }
-.govuk-button--secondary {
-    background-color: transparent;
-    border: 2px solid var(--product-colour);
-    color: var(--product-colour) !important;
-}
 
 /* FOOTER */
 .govuk-footer {
-    padding-top: 0.75rem;
+    padding-top: 1.75rem;
 }
 .govuk-footer__meta-item {
     margin-bottom: 0;
 }
-.govuk-footer__meta-custom { /* temp - for Built by i.AI */
-    display: none;
-}
 .govuk-footer__copyright-logo {
-    background-image: url('/static/govuk-assets/i-dot-ai-Official-Logo.svg');
-    margin-bottom: -1rem;
+    background-image: none;
+    padding-top: 0.5rem;
+}
+.govuk-footer__copyright-logo img {
+    height: 5.25rem;
+    width: 7rem;
 }
 
 /* LINKS */
@@ -76,8 +80,6 @@
 
 /* NOTIFICATION BANNER */
 .govuk-notification-banner {
-    background-color: var(--product-colour);
-    border-color: var(--product-colour);
     border-radius: var(--border-radius);
 }
 .govuk-notification-banner__content {
@@ -86,9 +88,6 @@
 }
 
 /* PHASE BANNER */
-.govuk-phase-banner {
-    display: none;
-}
 .govuk-phase-banner__content__tag {
     background-color: var(--product-colour);
     font-weight: 700;
@@ -97,33 +96,7 @@
     text-transform: uppercase;
 }
 
-/* TEXTAREA */
-.govuk-textarea {
-    border-color: var(--product-colour);
-    border-radius: var(--border-radius);
-}
-
-/** NEW COMPONENTS **/
-/* BOX OUT */
-.iai-box-out {
-    background-color: #f3f2f1;
-    border: 1px solid #b1b4b6;
+/* INPUT, TEXTAREA */
+.govuk-input, .govuk-textarea {
     border-radius: var(--border-radius);
-    padding: 1rem;
 }
-
-/* NEW MESSAGE */
-.iai-new-message {
-    align-items: flex-end;
-    display: flex;
-    gap: 0.5rem;
-}
-.iai-new-message .govuk-form-group {
-    margin: 0;
-    width: 100%;
-}
-.iai-new-message textarea, .iai-new-message button {
-    height: 4rem;
-    margin: 0;
-}
-
diff --git a/django_app/frontend/js/i-ai.js b/django_app/frontend/js/i-ai.js
diff --git a/django_app/frontend/readme.md b/django_app/frontend/readme.md
@@ -0,0 +1,50 @@
+# i.AI Design System
+
+This is a light-weight wrapper to go over the top of the gov.uk design system, adding styles for i.AI services.
+
+## Installation
+
+1. Import the `iai.scss` file
+
+2. Add the i.AI logo to govuk-assets folder (or other appropriate folder for serving static files)
+
+3. In the footer, replace:
+
+```
+<a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"> © Crown copyright</a>
+```
+
+With:
+
+```
+<a class="govuk-footer__link govuk-footer__copyright-logo" href="https://ai.gov.uk">
+    <img src="/static/govuk-assets/i-dot-ai-Official-Logo.svg" alt="Incubator for Artificial Intelligence" loading="lazy"/>
+</a>
+```
+
+## Optional styles and components
+
+## Brand colour
+
+The default brand colour is the i.AI pink. It is possible to change this by updating the `--product-colour` css variable at the top of the `iai.scss` file.
+
+### Phase banner
+
+Instead of using the standard phase banner, it is possible to add this to the header.
+
+Replace:
+
+```
+<a href="/" class="govuk-header__link govuk-header__service-name">Service name</a>
+```
+
+With:
+
+```
+<div class="iai-header__service-name-container">
+    <a href="/" class="govuk-header__link govuk-header__service-name">Service name</a>
+    <strong class="govuk-tag govuk-phase-banner__content__tag">Beta</strong>
+</div>
+```
+
+You may also wish to add a feedback link to the footer. Using the example at https://design-system.service.gov.uk/components/footer/#footer-with-links-and-secondary-navigation replace "Built by the Government Digital Service" with "This is a new service – your feedback will help us to improve it.".