Skip to content

Commit

Permalink
feat(#1670): rename and reorganize the design system section (#1701)
Browse files Browse the repository at this point in the history
* setting new designing structure

* designing

* Update _index.md

* Update user-interviews.md

* Update focus-group-discussions.md

* Update focus-group-discussions.md

* Update usability-testing.md

* Update ces-surveys.md

* Update technical-working-sessions.md

* moving icons to interface

* Fix colors.md images

* Remove UI Kit folder

* Remove redundant typography folder

* Remove redundant components folder

* Remove redundant ux folders

* Update content/en/design/Interface/typography.md

* content update under interface

* adding mockups and mapping hierarchy

* fixing link

* fix: add missing aliases and fix urls

* fix: add missing aliases and organize folders

* Update content/en/design/_index.md

* Update content/en/design/_index.md

* Update content/en/design/Interface/colors.md

* Update content/en/design/Interface/components.md

* Update content/en/design/Interface/ui-kit.md

* Update content/en/design/Interface/_index.md

* Update content/en/design/user-experience-research/user-interviews.md

* Update content/en/design/Interface/typography.md

* Update content/en/design/Interface/ui-kit.md

* Update content/en/design/Interface/ui-kit.md

* Update content/en/design/user-experience-research/_index.md

* Update content/en/design/Interface/ui-kit.md

* Update content/en/design/Interface/ui-kit.md

* Update content/en/design/user-experience-research/_index.md

* Update content/en/design/user-experience-research/ces-surveys.md

* Update content/en/design/user-experience-research/focus-group-discussions.md

* Update content/en/design/user-experience-research/focus-group-discussions.md

* Update content/en/design/user-experience-research/technical-working-sessions.md

* Update content/en/design/user-experience-research/technical-working-sessions.md

* Update content/en/design/user-experience-research/usability-testing.md

* Update content/en/design/user-experience-research/usability-testing.md

* Update content/en/design/user-experience-research/user-interviews.md

* fix CI

* Remove mentions of Medic

* chore: simplify persona pages

* chore: clean up ui kit

* chore: add missing alias

---------

Co-authored-by: Ziithe <[email protected]>
Co-authored-by: Nicole Orlowski <[email protected]>
Co-authored-by: esthermmoturi <[email protected]>
Co-authored-by: Andra Blaj <[email protected]>
  • Loading branch information
5 people authored Jan 24, 2025
1 parent 12f7ff5 commit 79146a7
Show file tree
Hide file tree
Showing 311 changed files with 527 additions and 460 deletions.
2 changes: 1 addition & 1 deletion content/en/building/forms/form-properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ Create a `resources.json` *file* in your project folder and add key/value pairs
}
```

{{< see-also page="design/icons" title="Icon Library" >}}
{{< see-also page="design/interface" title="Interface" >}}

Add an `icon` key in the `assessment.properties.json` file. Pick the key of the icon you require from the `resources.json` file and add it as the `icon` value.

Expand Down
2 changes: 1 addition & 1 deletion content/en/building/reference/resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Add icons to the `resources` folder, and include them by name in the `resources.
}
```

{{< see-also page="design/icons" title="Icon Library" >}}
{{< see-also page="design/interface" title="Interface" >}}

The folder and files structure would look like this:

Expand Down
4 changes: 2 additions & 2 deletions content/en/building/targets/target-widgets.md
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@ The image on the right-hand side shows the updated target titles. Your image may
{{% alert title="Note" %}} Be sure to have the correct translation key in your target widget's `translation_key` property. {{% /alert %}}

### 10. Target icons
You may add `icons` to your target widgets to enhance their appearance and to help users locate specific widgets more quickly. Use the icons in the *[targets icon library]({{< ref "design/icons/forms_tasks_targets" >}})*, or icons of your choice for the target widgets. Add your selected icons to the `resources` folder in your project folder. In your `resources.json` *file*, add key/value pairs for your icon resources.
You may add `icons` to your target widgets to enhance their appearance and to help users locate specific widgets more quickly. Use the icons in the *[targets icon library]({{< ref "design/interface/icons/forms_tasks_targets" >}})*, or icons of your choice for the target widgets. Add your selected icons to the `resources` folder in your project folder. In your `resources.json` *file*, add key/value pairs for your icon resources.

```json
{
Expand All @@ -399,7 +399,7 @@ You may add `icons` to your target widgets to enhance their appearance and to he
```
{{% alert title="Note" %}} The `key` in the `resources.json` file is the value of the `icon` property in the target widget configuration. {{% /alert %}}

{{< see-also page="design/icons" title="Icon Library" >}}
{{< see-also page="design/interface/icons" title="Icon Library" >}}

To upload *[resources]({{< ref "building/reference/resources#icons" >}})* to your local instance, run the following command:

Expand Down
4 changes: 2 additions & 2 deletions content/en/building/tutorials/application-graphics.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: >
Configuring CHT Application Graphics
relatedContent: >
building/features/admin
design/icons
design/interface/icons
aliases:
- /apps/tutorials/application-graphics
Expand Down Expand Up @@ -180,7 +180,7 @@ Add icons to the `resources` folder, and include them by name in the `resources.
}
```

{{< see-also page="design/icons" title="Icon Library" >}}
{{< see-also page="design/interface/icons" title="Icon Library" >}}

The folder and files structure would look like this:

Expand Down
10 changes: 5 additions & 5 deletions content/en/contribute/docs/style-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,11 +130,11 @@ Connecting readers to related content in different pages is an important aspect

1. **See Also**: the `see-also` shortcode is available to connect to an important concept within the documentation site. The link will be more prominent to the reader by having a common prefix and shown on a separate line.

For example, `{{</* see-also page="design/icons" */>}}` will show as seen here: {{< see-also page="design/icons" >}}
For example, `{{</* see-also page="design/interface/icons" */>}}` will show as seen here: {{< see-also page="design/interface/icons" >}}

You can also make the callout say "Read More" with the `prefix` tag: `{{</* see-also prefix="Read More" page="design/icons" */>}}`. This will show as seen here: {{< see-also page="design/icons" prefix="Read More" >}}
You can also make the callout say "Read More" with the `prefix` tag: `{{</* see-also prefix="Read More" page="design/interface/icons" */>}}`. This will show as seen here: {{< see-also page="design/interface/icons" prefix="Read More" >}}

A custom title and anchor can be provided as well. For example, `{{</* see-also page="design/icons" title="Learn about the Icon Library" anchor="about-the-icon-library" */>}}`, will show as: {{< see-also page="design/icons" title="Learn about the Icon Library" anchor="about-the-icon-library" >}}
A custom title and anchor can be provided as well. For example, `{{</* see-also page="design/interface/icons" title="Learn about the Icon Library" anchor="about-the-icon-library" */>}}`, will show as: {{< see-also page="design/interface/icons" title="Learn about the Icon Library" anchor="about-the-icon-library" >}}

Please use `see-also` when referencing _related topics_ , as seen in [Workflows]({{< ref "building/workflows/workflows-overview" >}}), and use `read-more` when referencing the _same topic_ in more depth, as in the [Home Page]({{< ref "/" >}}).

Expand All @@ -151,7 +151,7 @@ Connecting readers to related content in different pages is an important aspect
### Avoid broken links
To avoid broken links always use `ref` or `relref` shortcodes for internal references with the full path for the page. Check out the [Hugo documentation for cross-references](https://gohugo.io/content-management/cross-references/) for more details.

For example, `[Icon Library]({{</* relref "design/icons" */>}})` yields "[Icon Library]({{% relref "design/icons" %}})". Using the full path will avoid ambiguous references if a new page of the same is created.
For example, `[Icon Library]({{</* relref "design/interface/icons" */>}})` yields "[Icon Library]({{% relref "design/interface/icons" %}})". Using the full path will avoid ambiguous references if a new page of the same is created.

### Link paragraphs, not titles

Expand All @@ -160,7 +160,7 @@ Whether using `ref` ,`relref` or inline links, do not link a title:
| Do | Don't |
|---|---|
| ` Read more about [InnoDB here](https://en.wikipedia.org/wiki/InnoDB).` | `## [InnoDB here](https://en.wikipedia.org/wiki/InnoDB)` |
| `The [Icon Library]({{</* relref "design/icons" */>}}) has many great icons.` | `## [Icon Library]({{</* relref "design/icons" */>}})` |
| `The [Icon Library]({{</* relref "design/interface/icons" */>}}) has many great icons.` | `## [Icon Library]({{</* relref "design/interface/icons" */>}})` |

## Formatting standards

Expand Down
9 changes: 9 additions & 0 deletions content/en/design/Interface/_index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: "Interface"
linkTitle: "Interface"
weight: 2
description: >
Interface principles to help shaping the design of the CHT and providing support in effective implementation
---

The purpose of this guide is to document the standard aspects of the core framework and allow designers and developers to focus on solving challenges, rather than reinventing interface elements that are already in use.
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
title: "Component Library"
linkTitle: "Component Library"
weight: 3
title: "Colors"
linkTitle: "Colors"
weight: 1
description: >
The standard aspects of our core framework for reuse to encourage consistency when building new pages or components
Color helps users interpret and interact with app content by establishing a hierarchy of information, highlighting actions, indicating states, and conveying meaning.
aliases:
- /design/components/
---

The purpose of this guide is to document the standard aspects of our core framework and allow designers and developers to focus on solving challenges, rather than reinventing interface elements that are already in use. Changes to the styles in this document should go through product design and be implemented throughout the app before this document is updated.

## Colors
Color helps users interpret and interact with app content by establishing a hierarchy of information, highlighting actions, indicating states, and conveying meaning.

### Primary colors
These are the primary colors of the navigation tabs. When necessary, use white `#FFFFFF` text over these colors.


| ![#63A2C6](img/blue.png) Blue | ![#7193EE](img/periwinkle.png) Periwinkle | ![#F47B63](img/pink.png) Pink | ![#76B0B0](img/teal.png) Teal | ![#E9AA22](img/yellow.png) Yellow |
| ![#63A2C6](blue.png) Blue | ![#7193EE](periwinkle.png) Periwinkle | ![#F47B63](pink.png) Pink | ![#76B0B0](teal.png) Teal | ![#E9AA22](yellow.png) Yellow |
|:------------------------------------------------------------- |:------------------------------------------------------------------- |:------------------------------------------------------------- |:------------------------------------------------------------- |:--------------------------------------------------------------- |
| `#63A2C6` | `#7193EE` | `#F47B63` | `#76B0B0` | `#E9AA22` |
| `rgb(99, 162, 198)` | `rgb(113, 147, 238)` | `rgb(244, 123, 99)` | `rgb(118, 176, 176)` | `rgb(233, 170, 34)` |
Expand All @@ -26,7 +26,7 @@ These are the primary colors of the navigation tabs. When necessary, use white `

These are the secondary (highlight) colors of the navigation tabs.

| ![#EEF5F9](img/blue-highlight.png) Blue Highlight | ![#F0F4FD](img/periwinkle-highlight.png) Periwinkle Highlight | ![#FDF1EF](img/pink-highlight.png) Pink Highlight | ![#DFEAEA](img/teal-highlight.png) Teal Highlight | ![#FCF6E7](img/yellow-highlight.png) Yellow Highlight |
| ![#EEF5F9](blue-highlight.png) Blue Highlight | ![#F0F4FD](periwinkle-highlight.png) Periwinkle Highlight | ![#FDF1EF](pink-highlight.png) Pink Highlight | ![#DFEAEA](teal-highlight.png) Teal Highlight | ![#FCF6E7](yellow-highlight.png) Yellow Highlight |
|:------------------------------------------------------------------------- |:------------------------------------------------------------------------------ |:------------------------------------------------------------------------- |:------------------------------------------------------------------------- |:--------------------------------------------------------------------------- |
| `#EEF5F9` | `#F0F4FD` | `#FDF1EF` | `#DFEAEA` | `#FCF6E7` |
| `rgb(238, 245, 249)` | `rgb(240, 244, 253)` | `rgb(253, 241, 239)` | `rgb(223, 234, 234)` | `rgb(252, 246, 231)` |
Expand All @@ -36,7 +36,7 @@ These are the secondary (highlight) colors of the navigation tabs.

These are the status indication colors of the system. When necessary, use white `#FFFFFF` text over these colors.

| ![#218E7F](img/teal-dark.png) Teal Dark | ![#007AC0](img/blue-dark.png) Blue Dark | ![#C78330](img/yellow-dark.png) Yellow Dark | ![#E33030](img/red.png) Red |
| ![#218E7F](teal-dark.png) Teal Dark | ![#007AC0](blue-dark.png) Blue Dark | ![#C78330](yellow-dark.png) Yellow Dark | ![#E33030](red.png) Red |
|:------------------------------------------------------------------- |:------------------------------------------------------------------ |:--------------------------------------------------------------------- |:------------------------------------------------------------- |
| `#218E7F` | `#007AC0` | `#C78330` | `#E33030` |
| `rgb(33, 142, 127)` | `rgb(0, 122, 192)` | `rgb(199, 131, 48)` | `rgb(227, 48, 48)` |
Expand All @@ -45,73 +45,12 @@ These are the status indication colors of the system. When necessary, use white

### Backgrounds

| ![#777777](img/gray-dark.png) Gray Dark | ![#E0E0E0](img/gray-light.png) Gray Light | ![#A0A0A0](img/gray-medium.png) Gray Medium | ![#333333](img/gray-ultra-dark.png) Gray Ultra Dark | ![#F2F2F2](img/gray-ultra-light.png) Gray Ultra Light | ![#FFFFFF](img/white.png) White |
| ![#777777](gray-dark.png) Gray Dark | ![#E0E0E0](gray-light.png) Gray Light | ![#A0A0A0](gray-medium.png) Gray Medium | ![#333333](gray-ultra-dark.png) Gray Ultra Dark | ![#F2F2F2](gray-ultra-light.png) Gray Ultra Light | ![#FFFFFF](white.png) White |
|:------------------------------------------------------------------- |:-------------------------------------------------------------------- |:--------------------------------------------------------------------- |:------------------------------------------------------------------------- |:-------------------------------------------------------------------------- |:--------------------------------------------------------------- |
| `#777777` | `#E0E0E0` | `#A0A0A0` | `#333333` | `#F2F2F2` | `#FFFFFF` |
| `rgb(119, 119, 119)` | `rgb(224, 224, 224)` | `rgb(160, 160, 160)` | `rgb(51, 51, 51)` | `rgb(242, 242, 242)` | `rgb(255, 255, 255)` |
| Disabled statuses, secondary body text | 1px line borders, action bar icons | Muted or deceased contacts, cleared messages | Overdue, unmet, error, delete, failed, denied actions | App background, list and dropdown highlights | Form background |

<br>

For more information on how these colors are applied in the app, see our [color variables file](https://github.com/medic/cht-core/blob/master/webapp/src/css/variables.less).


## Typography

The default app font is <a href="https://www.google.com/get/noto/">Noto Sans</a>. It is free, ocodepen source, supports 800 languages and was specifically designed for good web legibility. It is bundled with the app so that all users see the same font regardless of their particular device, language, browser, etc. This ensures a consistent experience for all users.

Most text in the app should be the `@text-normal-color: @gray-ultra-dark color`.
The lighter text color `@text-secondary-color: @gray-dark)` is used for labels and condition card filters.
Hyperlinked text color is `@text-hyperlink-color: @blue-dark)`.

H1 is the highest hierarchical level of text, and should be used sparingly. It is used for the large text underneath percentage bars.

H2 is used as a header style for main content sections on the right-hand side, such as a task title, the name of a person/place on their profile, or the title of a targets widget.

H3 is used for titles of condition cards and section titles on the form summary page.

H4 is the default type size, and should be used for all normal body text throughout the app. Most text should be H4 in size. When in doubt, use H4.

H5 is a smaller body text size that we use sparingly in places where space is tight, such as timestamps in the upper right of content rows, condition card filter text, “belongs to” breadcrumbs, and targets goal labels.

{{< codepen PoZObmY >}}

## Buttons
Primary buttons are used for actions, such as “Next” and “Submit”. Secondary buttons are the alternative to the primary action, such as "Previous". Text links are used for less important or less commonly used actions, such as “Cancel”.
{{< codepen WNrZKoz >}}

## Checkboxes
Use checkboxes to select multiple items within a form. When necessary, use a descriptive error state.
{{< codepen YzwrRRV >}}

## Radios
Use radio buttons to select a single item within a form. When necessary, use a descriptive error state.
{{< codepen RwrLqqZ >}}

## Inputs
Use an input field as a basic text control to enable the user to type a small amount of text. The input size should reflect the amount of text a user is expected to enter. When necessary, use a descriptive error state.
{{< codepen KKVXrYE >}}

## Dropdowns
Dropdowns are used within forms that have 7 or more options and as filters within tabs.
{{< codepen xxZXJgK >}}

## Modals
Use modals when a user is exiting a flow where information may be lost or for experiences outside the main user flows.
{{< codepen MWKEzbP >}}

## Condition Cards
Use these cards in contact summary pages to display an overview of tasks, people, reports, etc
{{< codepen MWKEzyq >}}

## Content Rows
Content rows are used for tasks, messages, reports and people as an overview of the content name, description, date and/or priority.
{{< codepen zYrEMqX >}}

## Targets
Targets include counts and percentages with and without goals.
{{< codepen wvMrxOx >}}

## Action Bars
Use action bars to prompt new actions or workflows on relative pages.
{{< codepen YzwEqpB >}}
For more information on how these colors are applied in the app, see the [color variables file](https://github.com/medic/cht-core/blob/master/webapp/src/css/variables.less).
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
47 changes: 47 additions & 0 deletions content/en/design/Interface/components.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
title: "Components"
linkTitle: "Components"
weight: 4
description: >
The standard aspects of the core framework for reuse to encourage consistency when building new pages or components
---

### Buttons
Primary buttons are used for actions, such as “Next” and “Submit”. Secondary buttons are the alternative to the primary action, such as "Previous". Text links are used for less important or less commonly used actions, such as “Cancel”.
{{< codepen WNrZKoz >}}

### Checkboxes
Use checkboxes to select multiple items within a form. When necessary, use a descriptive error state.
{{< codepen YzwrRRV >}}

### Radios
Use radio buttons to select a single item within a form. When necessary, use a descriptive error state.
{{< codepen RwrLqqZ >}}

### Inputs
Use an input field as a basic text control to enable the user to type a small amount of text. The input size should reflect the amount of text a user is expected to enter. When necessary, use a descriptive error state.
{{< codepen KKVXrYE >}}

### Dropdowns
Dropdowns are used within forms that have 7 or more options and as filters within tabs.
{{< codepen xxZXJgK >}}

### Modals
Use modals when a user is exiting a flow where information may be lost or for experiences outside the main user flows.
{{< codepen MWKEzbP >}}

### Condition Cards
Use these cards in contact summary pages to display an overview of tasks, people, reports, etc
{{< codepen MWKEzyq >}}

### Content Rows
Content rows are used for tasks, messages, reports and people as an overview of the content name, description, date and/or priority.
{{< codepen zYrEMqX >}}

### Targets
Targets include counts and percentages with and without goals.
{{< codepen wvMrxOx >}}

### Action Bars
Use action bars to prompt new actions or workflows on relative pages.
{{< codepen YzwEqpB >}}
Loading

0 comments on commit 79146a7

Please sign in to comment.