NDS-385 homepage updates (#312)

* NDS-385 Add image to hero component * NDS-385 Adjust scale and rotation of hero image angle * NDS-385 Update homepage, add prototyping and get started sections * NDS-385 Update hero image * NDS-385 Add links to prototyping docs * NDS-385 Update team email address * NDS-385 Add remaining prototyping assets --------- Co-authored-by: Chris Barker <chris.barker@nice.org.uk>
nice-digital · Jun 13, 2023 · 184ff0a · 184ff0a
1 parent e67fd24
commit 184ff0a
Show file tree

Hide file tree

Showing 13 changed files with 36,332 additions and 36,080 deletions.
diff --git a/components/nds-core/scss/colours/tokens/_alias.scss b/components/nds-core/scss/colours/tokens/_alias.scss
@@ -120,6 +120,7 @@ $full-bleed-text-image-light: global.$nice-black;
 // Hero
 $hero-background: global.$nice-blue-tint-1;
 $hero-border: global.$nice-blue-tint-2;
+$hero-image-wash: global.$nice-black;
 
 // Horizontal nav
 $horizontal-nav-list-border: global.$nice-black;

diff --git a/components/nds-hero/scss/hero.scss b/components/nds-hero/scss/hero.scss
@@ -26,6 +26,11 @@
   right: calc(50%);
   width: 100vw;
 
+  & > * {
+    position: relative;
+    z-index: 2;
+  }
+
   .breadcrumbs {
     @include typography.links-inverse;
   }
@@ -68,6 +73,41 @@
     }
   }
 
+  &__image-container {
+    background-position: center center;
+    background-size: cover;
+    bottom: 0;
+    display: flex;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 40%;
+    z-index: 0;
+
+    @include media-queries.mq($from: md) {
+      width: 33%;
+    }
+
+    &::before {
+      background: colours.$hero-background;
+      content: '';
+      flex: 0 0 200px;
+      position: relative;
+      transform: rotate(-15deg) scale(1.2) translateX(-60%);
+      z-index: 1;
+    }
+
+    &::after {
+      background: colours.$hero-image-wash;
+      content: '';
+      inset: 0;
+      opacity: 0.6;
+      position: absolute;
+      z-index: 0;
+    }
+  }
+
   @include media-queries.mq($from: md) {
     &__copy {
       float: left;

diff --git a/components/nds-hero/src/Hero.tsx b/components/nds-hero/src/Hero.tsx
@@ -10,6 +10,7 @@ export interface HeroProps {
 	header?: React.ReactNode;
 	intro?: React.ReactNode;
 	title: React.ReactNode;
+	image?: string;
 	className?: string;
 	children?: React.ReactNode;
 }
@@ -22,6 +23,7 @@ export const Hero: React.FC<HeroProps> = (props: HeroProps) => {
 		header,
 		intro,
 		title,
+		image,
 		className,
 		...rest
 	} = props;
@@ -43,6 +45,12 @@ export const Hero: React.FC<HeroProps> = (props: HeroProps) => {
 				</div>
 				{footer && <div className="hero__footer">{footer}</div>}
 			</div>
+			{image && (
+				<div
+					className="hero__image-container"
+					style={{ backgroundImage: `url(${image})` }}
+				></div>
+			)}
 		</div>
 	);
 };
diff --git a/docs/components/layouts/DefaultLayout.tsx b/docs/components/layouts/DefaultLayout.tsx
@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+import Head from "next/head";
+import { Breadcrumb, Breadcrumbs } from "@nice-digital/nds-breadcrumbs";
+import { InPageNav } from "@nice-digital/nds-in-page-nav";
+import { Grid, GridItem } from "@nice-digital/nds-grid";
+
+import { type PageMeta } from "types/PageMeta";
+
+export interface DefaultLayoutProps {
+	children: ReactNode;
+	meta: PageMeta;
+}
+
+export const DefaultLayout: React.FC<DefaultLayoutProps> = ({
+	children,
+	meta
+}: DefaultLayoutProps) => {
+	return (
+		<>
+			<Head>
+				<title>{`${meta.title} | NICE Design System`}</title>
+			</Head>
+			<Breadcrumbs>
+				<Breadcrumb to="/">NICE Design System</Breadcrumb>
+				<Breadcrumb>{meta.title}</Breadcrumb>
+			</Breadcrumbs>
+
+			<h1>{meta.title}</h1>
+
+			<Grid>
+				<GridItem cols={12} md={{ cols: 10 }} className="main-content">
+					{children}
+				</GridItem>
+				<GridItem cols={12} md={{ cols: 2 }}>
+					<InPageNav
+						headingsContainerSelector=".main-content"
+						headingsExcludeSelector=".exclude-in-page-nav"
+						headingsExcludeContainer=".exclude-container"
+					/>
+				</GridItem>
+			</Grid>
+		</>
+	);
+};
diff --git a/docs/pages/design-library.tsx b/docs/pages/design-library.tsx
@@ -8,7 +8,7 @@ import { type PageData } from "types/PageData";
 import { components } from "../data/components";
 import { foundations } from "../data/foundations";
 
-export default function Test() {
+export default function DesignLibrary() {
 	return (
 		<>
 			<Head>

diff --git a/docs/pages/get-started.mdx b/docs/pages/get-started.mdx
@@ -0,0 +1,37 @@
+import { DefaultLayout } from "components/layouts/DefaultLayout";
+
+export const meta = {
+	title: "Get started",
+};
+
+Our design system is here to help you design and build services at NICE.
+
+It is a collection of guidelines, design elements and tools that helps you create consistent, accessible and usable digital products.
+
+There are a number of ways you can use the design system or get involved:
+
+## Find and reference design elements
+
+Our current design [components](/design-library/#components) and [foundations](/design-library/#foundations) are documented with guidance and best practice on how to use them, including:
+
+- when and when not to use a component.
+- accessibility requirements and best practice.
+- any evidence or research behind a component.
+
+## Grab the code
+
+The code for all our design elements is available on the [component](/design-library/#components) and [foundation](/design-library/#foundations) pages.
+
+Use the HTML or React code for building, prototyping or experimenting with.
+
+## Prototyping
+
+There are a few different ways you can prototype new designs and concepts using the Design System.
+
+Our [prototyping](/prototyping) page has all the information you need to create low and high-fidelity prototypes.
+
+## Code and development
+
+View the [GitHub repo](https://github.com/nice-digital/nice-design-system) to learn how to update the system and use components in your code base.
+
+export default ({ children }) => <DefaultLayout meta={meta}>{children}</DefaultLayout>;
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
@@ -20,6 +20,12 @@ export default function Home() {
 			<Hero
 				title="Design and build digital services at NICE"
 				intro="Guides, resources and assets to build accessible, usable, on-brand services at NICE."
+				image="/images/hero-bg.jpg"
+				actions={
+					<Link className="btn btn--cta" href="/get-started">
+						Get started
+					</Link>
+				}
 				header={
 					<Breadcrumbs>
 						<Breadcrumb to="/">NICE Design System</Breadcrumb>
@@ -99,21 +105,37 @@ export default function Home() {
 
 			<hr />
 
-			<h2>Contact the team</h2>
-			<ul>
-				<li>
-					For questions or help, contact the design system team at{" "}
-					<a href="mailto:NICE_Service_Manual@nice.org.uk">
-						NICE_Service_Manual@nice.org.uk
-					</a>
-				</li>
-				<li>
-					If you work for NICE,{" "}
-					<a href="https://teams.microsoft.com/l/team/19%3aj3x65ql6djS-Ro2mM8yQIRzK_QHOk1S3Jl75got7hwk1%40thread.tacv2/conversations?groupId=10c92ff2-b41f-42d1-abef-f34f5bfe1202&tenantId=6030f479-b342-472d-a5dd-740ff7538de9">
-						ask us a question in our Teams channel
-					</a>
-				</li>
-			</ul>
+			<Grid>
+				<GridItem sm={6}>
+					<h2>Contact the team</h2>
+					<p>For questions or support with the design system contact us:</p>
+					<ul>
+						<li>
+							<a href="https://teams.microsoft.com/l/team/19%3aj3x65ql6djS-Ro2mM8yQIRzK_QHOk1S3Jl75got7hwk1%40thread.tacv2/conversations?groupId=10c92ff2-b41f-42d1-abef-f34f5bfe1202&tenantId=6030f479-b342-472d-a5dd-740ff7538de9">
+								in our Teams channel
+							</a>{" "}
+							(NICE staff only)
+						</li>
+						<li>
+							by email at{" "}
+							<a href="mailto:designsystem@nice.org.uk">
+								designsystem@nice.org.uk
+							</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem sm={6}>
+					<h2>Prototyping</h2>
+					<p>
+						Our design components and settings are available as Adobe XD and
+						Axure RP files.
+					</p>
+					<p>
+						Our <Link href="/prototyping">prototyping page</Link> has
+						information on how and when to create prototypes.
+					</p>
+				</GridItem>
+			</Grid>
 		</>
 	);
 }
diff --git a/docs/pages/prototyping.mdx b/docs/pages/prototyping.mdx
@@ -0,0 +1,96 @@
+import { DefaultLayout } from "components/layouts/DefaultLayout";
+
+export const meta = {
+	title: "Prototyping",
+};
+
+There are two main ways of creating prototypes with the design system:
+
+- design kits
+- HTML
+
+## Design kits
+
+Our design kits support single page mockups, low and high-fidelity prototypes and simple or complex interactions.
+
+Our design components and settings are available as Adobe XD and Axure RP files.
+
+- [Adobe XD - Design System UI kit](/assets/NICE-Design-System.xd)
+- [Axure RP - Design System UI kit](/assets/NICE-Design-System-v1.0.rplib)
+
+## HTML
+
+HTML is best for advanced functionality, complex logic or to simulate the most realistic user experience, for example when testing for accessibility.
+
+HTML prototypes currently need developer support to setup. [Contact the Design System team](mailto:designsystem@nice.org.uk) to see how we can help with this.
+
+## How to set up Axure RP
+
+Axure RP is an application used to  create wireframes, mockups and interactive prototypes.
+
+### Add the NICE Design System Axure library to Axure RP
+
+1. Install [Axure RP](https://www.axure.com/) - make sure you install the latest version
+2. Get the Design System widget library. The library contains widgets for Design System components, design elements and patterns.
+3. Open Axure and click the 'Add Library +' icon at the top of the libraries pane.
+4. Locate and select the `NICE_Design_System_2023_v1.0.rplib` file.
+
+[NICE Design System Axure library](https://cxngys.axshare.com/?id=dmzedi&p=notes_about_the_nice_design_system_library&c=1)
+
+
+### Start Designing
+
+Use the widgets from the NICE Design System Axure library to start designing. The widgets are in the libraries pane on the left side panel. To add a widget to the canvas, click and drag it from the libraries pane.
+
+All widgets come with styles and interactions already built into them.
+
+### Support
+
+If you are new to Axure, there are lots of [tutorials](https://docs.axure.com/axure-rp/reference/getting-started-video/) to get you started.
+
+### Releases
+
+When a new library version is available, you must download the new file to replace the old one.
+
+## Pick the right tool for the job
+
+Consider what you need to learn with your prototype and choose the right prototyping tool.
+
+### Flat mockups
+Mockups of pages without interactions or navigation.
+
+#### Best used for
+Initial design feedback, early concepts, copy and content testing.
+
+#### Tools to use
+Adobe XD is good for quick mockups and simple user journeys. You can also use Axure if you are familiar with it, but it has a steeper learning curve for beginners.
+
+### Simple prototypes
+Ideal for demonstrating content and simple user flows and journeys, for example, navigating between pages.
+
+#### Best used for
+Simple journeys, user flows and interactions.
+
+#### Tools to use
+Adobe XD is suitable for simple user journeys and interactions. However, it lacks advanced prototyping functionality.
+
+### Complex prototypes
+Prototypes with more complex functionality and logic. For example, working filters, form fields and drop-down menus.
+
+#### Best used for
+Functionality and task performance, usability and user journey testing.
+
+#### Tools to use
+Axure allows you to add more complex interactions and functionality to your prototype, for example, logic and conditions.
+
+### HTML prototypes
+
+Building designs in HTML is the most realistic and accessible experience for testing but also potentially the most time-consuming to produce. HTML prototypes should only be considered if you are confident in the design and content. Try to learn as much as possible with simpler prototypes before considering HTML.
+
+#### Best used for
+Accessibility testing with assistive technologies. Testing of responsive design and layouts across viewports. Testing advanced interactions that would be too difficult or time-consuming to build in a design tool.
+
+#### Tools to use
+HTML prototypes will need support from developers to setup and build. [Contact the team](mailto:designsystem@nice.org.uk) if you think this is something you need.
+
+export default ({ children }) => <DefaultLayout meta={meta}>{children}</DefaultLayout>;
diff --git a/docs/public/assets/NICE-Design-System-v1.0.rplib b/docs/public/assets/NICE-Design-System-v1.0.rplib
diff --git a/docs/public/assets/NICE-Design-System.xd b/docs/public/assets/NICE-Design-System.xd
diff --git a/docs/public/images/hero-bg.jpg b/docs/public/images/hero-bg.jpg