Skip to content

Commit 80a72ae

Browse files
barkertronChris Barker
barkertron
and
Chris Barker
authored
NDS-389 Add community section (#314)
* NDS-389 Add community section * NDS-389 Update community content * NDS-389 Pointless bump commit --------- Co-authored-by: Chris Barker <chris.barker@nice.org.uk>
1 parent 767b634 commit 80a72ae

10 files changed

Lines changed: 303 additions & 15 deletions

File tree

‎docs/components/layouts/ComponentLayout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { InPageNav } from "@nice-digital/nds-in-page-nav";
66
import { Grid, GridItem } from "@nice-digital/nds-grid";
77

88
import { type PageMeta } from "types/PageMeta";
9-
import { SidebarMenu } from "components/menus/SidebarMenu";
9+
import { ComponentMenu } from "components/menus/ComponentMenu";
1010
import { ComponentHeader } from "components/core/ComponentHeader/ComponentHeader";
1111
import { capitalise } from "utils/utils";
1212

@@ -80,7 +80,7 @@ export const ComponentLayout: React.FC<ComponentLayoutProps> = ({
8080
/>
8181
</GridItem>
8282
<GridItem cols={12} md={{ cols: 2, pull: 10 }}>
83-
<SidebarMenu type={type}></SidebarMenu>
83+
<ComponentMenu type={type}></ComponentMenu>
8484
</GridItem>
8585
</Grid>
8686
</>

‎docs/components/layouts/StackedNavLayout.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { ReactNode } from "react";
2+
import Head from "next/head";
3+
import { Breadcrumb, Breadcrumbs } from "@nice-digital/nds-breadcrumbs";
4+
import { Grid, GridItem } from "@nice-digital/nds-grid";
5+
6+
import { type PageMeta } from "types/PageMeta";
7+
8+
export interface StackedNavLayoutProps {
9+
children: ReactNode;
10+
meta: PageMeta;
11+
}
12+
13+
export const StackedNavLayout: React.FC<StackedNavLayoutProps> = ({
14+
children,
15+
meta
16+
}: StackedNavLayoutProps) => {
17+
const Menu: React.FC = meta.menu as React.FC;
18+
19+
return (
20+
<>
21+
<Head>
22+
<title>{`${meta.title} | NICE Design System`}</title>
23+
</Head>
24+
<Breadcrumbs>
25+
<Breadcrumb to="/">NICE Design System</Breadcrumb>
26+
<Breadcrumb>{meta.title}</Breadcrumb>
27+
</Breadcrumbs>
28+
29+
<h1>{meta.title}</h1>
30+
31+
<Grid>
32+
<GridItem cols={12} md={{ cols: 2 }}>
33+
{meta.menu && <Menu />}
34+
</GridItem>
35+
<GridItem cols={12} md={{ cols: 10 }} className="main-content">
36+
{children}
37+
</GridItem>
38+
</Grid>
39+
</>
40+
);
41+
};

‎docs/components/menus/CommunityMenu.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import Link from "next/link";
2+
import { useRouter } from "next/router";
3+
import { StackedNav, StackedNavLink } from "@nice-digital/nds-stacked-nav";
4+
5+
interface linkType {
6+
name: string;
7+
destination: string;
8+
}
9+
10+
// Build links that will make up the menu
11+
const links: linkType[] = [
12+
{
13+
name: "Community",
14+
destination: "/community/"
15+
},
16+
{
17+
name: "Proposing a component or pattern",
18+
destination: "/community/proposing-a-component/"
19+
},
20+
{
21+
name: "Requesting a component or pattern",
22+
destination: "/community/requesting-a-component/"
23+
},
24+
{
25+
name: "Component criteria",
26+
destination: "/community/component-criteria/"
27+
}
28+
];
29+
30+
export function CommunityMenu() {
31+
const { asPath } = useRouter();
32+
33+
return (
34+
<StackedNav label="Community" elementType="h2">
35+
{links.map(({ name, destination }) => (
36+
<StackedNavLink
37+
elementType={Link}
38+
method="href"
39+
destination={destination}
40+
isCurrent={asPath === destination}
41+
key={name}
42+
>
43+
{name}
44+
</StackedNavLink>
45+
))}
46+
</StackedNav>
47+
);
48+
}

docs/components/menus/SidebarMenu.tsx renamed to docs/components/menus/ComponentMenu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import { foundations } from "../../data/foundations";
66
import { type PageData } from "types/PageData";
77
import { capitalise } from "utils/utils";
88

9-
export interface SidebarMenuProps {
9+
export interface ComponentMenuProps {
1010
type: "components" | "foundations";
1111
}
1212

13-
export function SidebarMenu({ type }: SidebarMenuProps) {
13+
export function ComponentMenu({ type }: ComponentMenuProps) {
1414
const { asPath } = useRouter(),
1515
urlArray = asPath.split("/"),
1616
pageSlug = urlArray[urlArray.length - 2]; // Infer slug from part of URL preceding final slash

‎docs/pages/community/component-criteria.mdx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { StackedNavLayout } from "components/layouts/StackedNavLayout";
2+
import { CommunityMenu } from "components/menus/CommunityMenu";
3+
4+
export const meta = {
5+
title: "Component criteria",
6+
menu: CommunityMenu
7+
};
8+
9+
To ensure that the contents in the NICE design system are of high quality they need to meet a certain standard.
10+
11+
## What we look for in a proposal
12+
13+
The design system team will review whether a proposal is unique and useful.
14+
15+
### Unique
16+
17+
The component/pattern/other does not already exist in the NICE Design System.
18+
19+
If the proposal is a change to an existing component or pattern, then it should be an improvement on what we currently have.
20+
21+
### Useful
22+
23+
There is evidence the component or pattern meets user or business needs.
24+
25+
## Developing a component or pattern
26+
27+
During development, a component or pattern will be assessed against these criteria to ensure it is suitable to be published into the NICE design system.
28+
29+
### Usable
30+
31+
User research shows the component/pattern is easy to use or solves a usability issue(s).
32+
33+
### Impactful
34+
35+
The component or pattern can add value to the organisation.
36+
37+
### Versatile
38+
39+
The component or pattern can be used for multiple NICE services and products.
40+
41+
### Consistent
42+
43+
Existing styles/foundations can be used to design and develop the component or pattern.
44+
45+
### Feasible
46+
47+
It is technically feasible for the component to be developed in an accessible way to ensure we develop components everybody can use.
48+
49+
export default ({ children }) => <StackedNavLayout meta={meta}>{children}</StackedNavLayout>;

‎docs/pages/community/index.mdx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Link from "next/link";
2+
import { StackedNavLayout } from "components/layouts/StackedNavLayout";
3+
import { CommunityMenu } from "components/menus/CommunityMenu";
4+
5+
export const meta = {
6+
title: "Community",
7+
menu: CommunityMenu
8+
};
9+
10+
The Design System is for everyone. We need people to provide feedback, offer suggestions, and help refine the system to make sure it meets the needs of our users.
11+
12+
## Contact the team
13+
14+
For questions or support with the Design System contact us:
15+
16+
- [In our Teams channel](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) - NICE staff only.
17+
- by email at: [designsystem@nice.org.uk](mailto:designsystem@nice.org.uk)
18+
19+
## Get involved
20+
21+
- [Propose a new component or pattern](/community/proposing-a-component)
22+
- [Submit a pull request](https://github.com/nice-digital/nice-design-system)
23+
- [Take part in discussions on GitHub](https://github.com/nice-digital/nice-design-system/discussions)
24+
- [Raise an issue](https://github.com/nice-digital/nice-design-system/issues)
25+
26+
## How we work
27+
28+
<Link href="/community/component-criteria/">Read our component criteria</Link> to see how we assess new components.
29+
30+
export default ({ children }) => <StackedNavLayout meta={meta}>{children}</StackedNavLayout>;

‎docs/pages/community/proposing-a-component.mdx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import Link from "next/link";
2+
import { CommunityMenu } from "components/menus/CommunityMenu";
3+
import { StackedNavLayout } from "components/layouts/StackedNavLayout";
4+
5+
export const meta = {
6+
title: "Proposing a component or pattern",
7+
menu: CommunityMenu
8+
};
9+
10+
## What you do
11+
12+
### 1. Check the NICE Design System and GitHub discussions.
13+
14+
What problem are you looking to solve? Check to see if anything already exists in the NICE design system that could solve it. The contents of the NICE design system are regularly reviewed to ensure they are useful, usable and adhere to best practise.
15+
16+
### 2. Desk research
17+
18+
If you cannot find a solution in the design system, look at how other organisations address this problem. Look at other websites and consider existing methods, best practice, and evidence. This is called [desk research](https://www.nngroup.com/articles/secondary-research-in-ux/).
19+
20+
### 3. Submit your proposal
21+
22+
<Link className="btn" href="/community/requesting-a-component/">Request a component or pattern</Link>
23+
24+
The <Link href="/community/component-criteria/">component criteria</Link> will help you understand what we look for in a proposal.
25+
26+
## What we do
27+
28+
### 4. Review proposal
29+
30+
The design system team will set up a meeting with you to discuss and review the proposal.
31+
32+
We will check to see if a similar proposal has already been made. The team will decide if the proposal is suitable for the NICE design system.
33+
34+
### 5. User research and design
35+
36+
User experience designers will develop initial prototypes for the component by collaborating with content designers and developers using real content where possible.
37+
38+
The designs will be critiqued by the team to generate assumptions and hypotheses for user research. The team will use the decision and actions log to record next steps.
39+
40+
User research will be carried out to generate more evidence to ensure the proposal meets user's needs.
41+
42+
### 6. Development and technical testing
43+
44+
Developers will write and review the component code by pairing with other developers and technical testers. They use acceptance criteria, which includes accessibility testing.
45+
46+
They will also discuss and review the component with you.
47+
48+
### 7. Publish
49+
50+
The design system team will collaborate on completing component documentation using the component checklist as a guide.
51+
52+
The component will be published into the NICE design system and used where necessary.
53+
54+
### 8. Share
55+
56+
The design system team will give updates on what's changed at the NICE design system show and tell.
57+
58+
Updates will also be posted on the <Link href="/">Design System homepage</Link>, on [GitHub](https://github.com/nice-digital/nice-design-system) and via our [Teams channel](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).
59+
60+
export default ({ children }) => <StackedNavLayout meta={meta}>{children}</StackedNavLayout>;

‎docs/pages/community/requesting-a-component.mdx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { StackedNavLayout } from "components/layouts/StackedNavLayout";
2+
import { CommunityMenu } from "components/menus/CommunityMenu";
3+
4+
export const meta = {
5+
title: "Requesting a component or pattern",
6+
menu: CommunityMenu
7+
};
8+
9+
Send proposals to: [design-system@nice.org.uk](mailto:design-system@nice.org.uk)
10+
11+
Please answer the following in your email:
12+
13+
- Does the component or pattern already exist? (If yes please tell us the name).
14+
- Briefly describe the problem you are trying to solve with this new proposal.
15+
- Briefly describe any user needs or business needs you have identified and how you went about identifying them.
16+
- Why would it be valuable to make this change on the NICE website?
17+
18+
Attach any relevant files to your email that could support your proposal.
19+
20+
You can use our [component criteria](/community/component-criteria) as a guide to help you think about the things we will consider when reviewing your proposal.
21+
22+
Our [How to propose a component or pattern page](/community/proposing-a-component) details the process used.
23+
24+
The design system team will respond as soon as possible.
25+
26+
export default ({ children }) => <StackedNavLayout meta={meta}>{children}</StackedNavLayout>;

‎docs/pages/index.tsx‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Head from "next/head";
22
import Link from "next/link";
3+
import { ActionBanner } from "@nice-digital/nds-action-banner";
34
import { Hero } from "@nice-digital/nds-hero";
45
import { Breadcrumb, Breadcrumbs } from "@nice-digital/nds-breadcrumbs";
56
import { Grid, GridItem } from "@nice-digital/nds-grid";
@@ -105,6 +106,49 @@ export default function Home() {
105106

106107
<hr />
107108

109+
<Grid className="mb--e">
110+
<GridItem sm={6}>
111+
<h2>Community</h2>
112+
<p>
113+
The Design System is for everyone. We need people to provide
114+
feedback, offer suggestions, and help refine the system to ensure it
115+
meets the needs of our users.
116+
</p>
117+
<p>
118+
Visit our <Link href="/community">community page</Link> to see how
119+
you can contribute and understand how we work.
120+
</p>
121+
</GridItem>
122+
<GridItem sm={6}>
123+
<h2>Prototyping</h2>
124+
<p>
125+
Our design components and settings are available as Adobe XD and
126+
Axure RP files.
127+
</p>
128+
<p>
129+
Our <Link href="/prototyping">prototyping page</Link> has
130+
information on how and when to create prototypes.
131+
</p>
132+
</GridItem>
133+
</Grid>
134+
135+
<ActionBanner
136+
title="Propose a new component"
137+
cta={
138+
<Link
139+
className="btn btn--inverse"
140+
href="/community/proposing-a-component"
141+
>
142+
Propose a component
143+
</Link>
144+
}
145+
>
146+
Submit a proposal for a new component or request a change to an existing
147+
component.
148+
</ActionBanner>
149+
150+
<hr />
151+
108152
<Grid>
109153
<GridItem sm={6}>
110154
<h2>Contact the team</h2>
@@ -124,17 +168,6 @@ export default function Home() {
124168
</li>
125169
</ul>
126170
</GridItem>
127-
<GridItem sm={6}>
128-
<h2>Prototyping</h2>
129-
<p>
130-
Our design components and settings are available as Adobe XD and
131-
Axure RP files.
132-
</p>
133-
<p>
134-
Our <Link href="/prototyping">prototyping page</Link> has
135-
information on how and when to create prototypes.
136-
</p>
137-
</GridItem>
138171
</Grid>
139172
</>
140173
);

‎docs/types/PageMeta.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export interface PageMeta {
44
npmUrl: string;
55
gitHubUrl: string;
66
component?: React.FC;
7+
menu?: React.FC;
78
}

0 commit comments

Comments
 (0)