-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #932 from hmrc/SDT-813_messages-pattern
Documentation for the messages pattern
- Loading branch information
Showing
8 changed files
with
119 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // HMRC Design System - patterns | ||
| @import "messages/messages"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| # Messages | ||
|
|
||
| This pattern is used to display messages sent to a user from an HMRC service. | ||
|
|
||
| ## When to use this pattern | ||
|
|
||
| Use this pattern when a service needs to send messages to users. The messages are not deleted and can be referred back to at any time. | ||
|
|
||
| ### When not to use this pattern | ||
|
|
||
| Do not use this as the only way of sharing important or time-sensitive information with a user. Only display messages when users are signed in to a service. | ||
|
|
||
| ## How it works | ||
|
|
||
| This patterns has 2 views: | ||
|
|
||
| * message list | ||
| * message details | ||
|
|
||
| ### Message list | ||
|
|
||
| Display a summary of messages the user has received. The list has: | ||
|
|
||
| - subject of the message | ||
| - date the message was sent | ||
| - a link to the full message | ||
| - a read and unread state | ||
|
|
||
| #### Unread messages | ||
|
|
||
| {{ example("messages-unread.html") }} | ||
| {{ markup("messages-unread.html") }} | ||
|
|
||
| #### Read messages | ||
|
|
||
| {{ example("messages-read.html") }} | ||
| {{ markup("messages-read.html") }} | ||
|
|
||
| ### Message details | ||
|
|
||
| Display a complete message. Include: | ||
|
|
||
| - subject of the message | ||
| - date the message was sent | ||
| - message content | ||
| - back link that takes you to the message list | ||
|
|
||
| ## Research on this pattern | ||
|
|
||
| {{ research(44) }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| .message-inbox__list { | ||
| display: table; | ||
| width: 100%; | ||
| border-top: 1px solid #a1acb2; | ||
|
|
||
| .message-inbox__list-item { | ||
| font-weight: bold; | ||
| a:link{ | ||
| text-decoration: none; | ||
| } | ||
| &.message-inbox__list-item--read { | ||
| background-color: #f8f8f8; | ||
| font-weight: normal; | ||
| } | ||
| } | ||
|
|
||
| .message-inbox__block { | ||
| display: table-cell; | ||
| padding: 20px 10px; | ||
| border-bottom: 1px solid #a1acb2; | ||
| &.no-wrap { | ||
| white-space: nowrap; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <div class="message-inbox"> | ||
| <h2 class="heading-medium">Messages</h2> | ||
| <div class="message-inbox__list" role="list"> | ||
| <div class="message-inbox__list-item message-inbox__list-item--read" role="listitem"><span | ||
| class="visually-hidden">read</span> <a class="message-inbox__block" href="/">Pub Moon under the water 5 - 7a Temple Place, Brighton BN3 7JB - Client: Mr A Client</a> | ||
| <span class="message-inbox__block no-wrap">29 March 2018</span> | ||
| </div> | ||
| <div class="message-inbox__list-item message-inbox__list-item--read" role="listitem"><span | ||
| class="visually-hidden">read</span> <a class="message-inbox__block" href="/">Pub Moon under the water 5 - 7a Temple Place, Brighton BN3 7JB - Client: Mr A Client</a> | ||
| <span class="message-inbox__block no-wrap">24 February 2018</span> | ||
| </div> | ||
| <div class="message-inbox__list-item message-inbox__list-item--read" role="listitem"><span | ||
| class="visually-hidden">read</span> <a class="message-inbox__block" href="/">Pub Moon under the water 5 - 7a Temple Place, Brighton BN3 7JB - Client: Mr A Client</a> | ||
| <span class="message-inbox__block no-wrap">04 Janurary 2018</span> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <div class="message-inbox"> | ||
| <h2 class="heading-medium">Messages</h2> | ||
| <div class="message-inbox__list" role="list"> | ||
| <div class="message-inbox__list-item" role="listitem"><span | ||
| class="visually-hidden">unread</span> <a class="message-inbox__block" href="/">Pub Moon under the water 5 - 7a Temple Place, Brighton BN3 7JB - Client: Mr A Client</a> | ||
| <span class="message-inbox__block no-wrap">29 March 2018</span> | ||
| </div> | ||
| <div class="message-inbox__list-item" role="listitem"><span | ||
| class="visually-hidden">unread</span> <a class="message-inbox__block" href="/">Pub Moon under the water 5 - 7a Temple Place, Brighton BN3 7JB - Client: Mr A Client</a> | ||
| <span class="message-inbox__block no-wrap">24 February 2018</span> | ||
| </div> | ||
| <div class="message-inbox__list-item" role="listitem"><span | ||
| class="visually-hidden">unread</span> <a class="message-inbox__block" href="/">Pub Moon under the water 5 - 7a Temple Place, Brighton BN3 7JB - Client: Mr A Client</a> | ||
| <span class="message-inbox__block no-wrap">04 Janurary 2018</span> | ||
| </div> | ||
| </div> | ||
| </div> |
Submodule component-library-template
added at
e359f0