Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ds updates #68

Merged
merged 20 commits into from
Dec 17, 2020
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
components update
chr1se committed Dec 9, 2020
commit 84e2be4377a0c23024816eb2804b44e4782987c7
Binary file added .DS_Store
Binary file not shown.
2 changes: 1 addition & 1 deletion docs/components/accordion/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/breadcrumb/index.html

Large diffs are not rendered by default.

66 changes: 1 addition & 65 deletions docs/components/buttons/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/content-card/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/content-tiles/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/details/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/disruption-indicators/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/file-download/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/form-elements/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/in-text-step/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/inset-text/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/links/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/lists/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/loader/index.html

Large diffs are not rendered by default.

16 changes: 1 addition & 15 deletions docs/components/message/index.html

Large diffs are not rendered by default.

17 changes: 2 additions & 15 deletions docs/components/phase-indicator/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/table/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/components/warning-text/index.html

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/css/react-native/wmcads-components.min.js

This file was deleted.

2 changes: 1 addition & 1 deletion docs/css/react-native/wmcads.min.js

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions docs/css/wmcads-components.min.css

This file was deleted.

2 changes: 1 addition & 1 deletion docs/css/wmcads-website.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/css/wmcads.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/img/wmcads-icons.min.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion docs/img/wmcads-sprite.min.svg

This file was deleted.

2 changes: 1 addition & 1 deletion docs/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/js/wmcads-website.min.js.map

Large diffs are not rendered by default.

60 changes: 0 additions & 60 deletions docs/njk/components/accordion/_accordion.njk

This file was deleted.

40 changes: 0 additions & 40 deletions docs/njk/components/breadcrumb/_breadcrumb.njk

This file was deleted.

53 changes: 0 additions & 53 deletions docs/njk/components/button/_button.njk

This file was deleted.

13 changes: 0 additions & 13 deletions docs/njk/components/button/_example.njk

This file was deleted.

25 changes: 0 additions & 25 deletions docs/njk/components/content-card/_content-card.njk

This file was deleted.

52 changes: 0 additions & 52 deletions docs/njk/components/content-tiles/advice-moving/advice-moving.njk

This file was deleted.

65 changes: 0 additions & 65 deletions docs/njk/components/content-tiles/normal/_normal.njk

This file was deleted.

42 changes: 0 additions & 42 deletions docs/njk/components/content-tiles/travel-tips/travel-tips.njk

This file was deleted.

176 changes: 0 additions & 176 deletions docs/njk/components/content-tiles/travel-updates/travel-updates.njk

This file was deleted.

14 changes: 0 additions & 14 deletions docs/njk/components/details/_details.njk

This file was deleted.

50 changes: 0 additions & 50 deletions docs/njk/components/disruption-indicator/large/_large.njk

This file was deleted.

45 changes: 0 additions & 45 deletions docs/njk/components/disruption-indicator/medium/_medium.njk

This file was deleted.

25 changes: 0 additions & 25 deletions docs/njk/components/disruption-indicator/small/_small.njk

This file was deleted.

30 changes: 0 additions & 30 deletions docs/njk/components/file-download/_file-download.njk

This file was deleted.

81 changes: 0 additions & 81 deletions docs/njk/components/form-elements/checkboxes/_checkboxes.njk

This file was deleted.

25 changes: 0 additions & 25 deletions docs/njk/components/form-elements/dropdown/_dropdown.njk

This file was deleted.

This file was deleted.

56 changes: 0 additions & 56 deletions docs/njk/components/form-elements/file-upload/_file-upload.njk

This file was deleted.

30 changes: 0 additions & 30 deletions docs/njk/components/form-elements/input/_input.njk

This file was deleted.

8 changes: 0 additions & 8 deletions docs/njk/components/form-elements/label/_label.njk

This file was deleted.

This file was deleted.

9 changes: 0 additions & 9 deletions docs/njk/components/form-elements/question/_question.njk

This file was deleted.

37 changes: 0 additions & 37 deletions docs/njk/components/form-elements/radios/_radios.njk

This file was deleted.

19 changes: 0 additions & 19 deletions docs/njk/components/form-elements/textarea/_textarea.njk

This file was deleted.

7 changes: 0 additions & 7 deletions docs/njk/components/icon/_icon.njk

This file was deleted.

9 changes: 0 additions & 9 deletions docs/njk/components/in-text-step/_in-text-step.njk

This file was deleted.

11 changes: 0 additions & 11 deletions docs/njk/components/inset-text/_inset-text.njk

This file was deleted.

39 changes: 0 additions & 39 deletions docs/njk/components/link/as-button/_as-button.njk

This file was deleted.

25 changes: 0 additions & 25 deletions docs/njk/components/link/link/_link.njk

This file was deleted.

7 changes: 0 additions & 7 deletions docs/njk/components/lists/ordered-list/_ordered-list.njk

This file was deleted.

7 changes: 0 additions & 7 deletions docs/njk/components/lists/unordered-list/_unordered-list.njk

This file was deleted.

15 changes: 0 additions & 15 deletions docs/njk/components/loader/_loader.njk

This file was deleted.

18 changes: 0 additions & 18 deletions docs/njk/components/message/help/_help.njk

This file was deleted.

51 changes: 0 additions & 51 deletions docs/njk/components/message/summary/_summary.njk

This file was deleted.

27 changes: 0 additions & 27 deletions docs/njk/components/phase-indicator/_phase-indicator-link.njk

This file was deleted.

7 changes: 0 additions & 7 deletions docs/njk/components/phase-indicator/_phase-indicator.njk

This file was deleted.

71 changes: 0 additions & 71 deletions docs/njk/components/table/_table.njk

This file was deleted.

21 changes: 0 additions & 21 deletions docs/njk/components/warning-text/_warning-text.njk

This file was deleted.

73 changes: 0 additions & 73 deletions docs/njk/patterns/autocomplete/_autocomplete.njk

This file was deleted.

83 changes: 0 additions & 83 deletions docs/njk/patterns/banner/_banner.njk

This file was deleted.

21 changes: 0 additions & 21 deletions docs/njk/patterns/contact-details/_contact-details.njk

This file was deleted.

27 changes: 0 additions & 27 deletions docs/njk/patterns/content-cards/buttons/_buttons.njk

This file was deleted.

64 changes: 0 additions & 64 deletions docs/njk/patterns/content-cards/email-sign-up/_email-sign-up.njk

This file was deleted.

13 changes: 0 additions & 13 deletions docs/njk/patterns/content-cards/image/_image.njk

This file was deleted.

This file was deleted.

13 changes: 0 additions & 13 deletions docs/njk/patterns/content-cards/map/_map.njk

This file was deleted.

60 changes: 0 additions & 60 deletions docs/njk/patterns/content-cards/travel-updates/_travel-updates.njk

This file was deleted.

35 changes: 0 additions & 35 deletions docs/njk/patterns/cookies/cookies-banner/_cookies-banner.njk

This file was deleted.

59 changes: 0 additions & 59 deletions docs/njk/patterns/cookies/cookies-manager/_cookies-manager.njk

This file was deleted.

65 changes: 0 additions & 65 deletions docs/njk/patterns/feedback-loop/_feedback-loop.njk

This file was deleted.

75 changes: 0 additions & 75 deletions docs/njk/patterns/footer/_footer.njk

This file was deleted.

208 changes: 0 additions & 208 deletions docs/njk/patterns/header/_header.njk

This file was deleted.

This file was deleted.

16 changes: 0 additions & 16 deletions docs/njk/patterns/question/form-element/_form-element.njk

This file was deleted.

43 changes: 0 additions & 43 deletions docs/njk/patterns/question/reference/_reference.njk

This file was deleted.

68 changes: 0 additions & 68 deletions docs/njk/patterns/question/summary/_summary.njk

This file was deleted.

40 changes: 0 additions & 40 deletions docs/njk/patterns/search/pagination/_pagination.njk

This file was deleted.

9 changes: 0 additions & 9 deletions docs/njk/patterns/search/search-bar/_search-bar.njk

This file was deleted.

67 changes: 0 additions & 67 deletions docs/njk/patterns/search/search-filter/_search-filter.njk

This file was deleted.

19 changes: 0 additions & 19 deletions docs/njk/patterns/search/search-result/_search-result.njk

This file was deleted.

17 changes: 0 additions & 17 deletions docs/njk/patterns/search/sort/_sort.njk

This file was deleted.

2 changes: 1 addition & 1 deletion docs/patterns/autocomplete/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/patterns/banner/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/patterns/contact-details/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/patterns/content-cards/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/patterns/cookies/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/patterns/feedback-loop/index.html

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions docs/patterns/header-and-footer/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/patterns/header-demo/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/patterns/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/patterns/question-form/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/patterns/search/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/styles/a-to-z-content-style-guide/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/styles/colour-palettes/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/styles/icons/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/styles/images/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/styles/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/styles/layout/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/styles/maps/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/styles/typography/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/styles/utility-classes/index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/user-research/index.html

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion src/wmcads/assets/sass/_vars.scss
Original file line number Diff line number Diff line change
@@ -12,10 +12,12 @@ $palettes: (
taxi: #773dbe,
text: #231f20,
cta: #007da8,
cta-active: #003e53,
error: #d4351c,
warning: #b75e00,
help: #f2ddcc,
success: #00703c,
information: #84329b,
information: #c05701,
disable: #676869,
plannedDisruption: #ffdd00,
background: #f3f2f1
37 changes: 0 additions & 37 deletions src/wmcads/components/button/_button.scss
Original file line number Diff line number Diff line change
@@ -176,43 +176,6 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
}
}

// button mode
&--mode {
border: $btn-border-width solid get-color(primary);
color: get-color(primary);
background-color: $white;

.wmcads-btn__icon {
margin-right: $size-xs;
fill: get-color(primary);
}

&:hover {
background-color: get-color(secondary, 70);
}

&:active,
&:target,
&:focus {
background-color: initial;
}

&.wmcads-is--active {
background-color: get-color(secondary, 50);
}

// Modal disabled
&.wmcads-btn--disabled:disabled {
border-color: get-color(disable);
color: get-color(disable);
background: $white;

.wmcads-btn__icon {
fill: get-color(disable);
}
}
}

// Disabled modifier (goes last to override above classes) for default btn
&--disabled:disabled {
background-color: get-color(disable);
2 changes: 1 addition & 1 deletion src/wmcads/components/details/_details.scss
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
&__content {
margin-top: $size-xs;
padding: $size-xsm $size-md;
border-left: 5px solid get-color(secondary, 50);
border-left: 5px solid get-color(secondary);

> :last-child {
margin-bottom: 0;
2 changes: 1 addition & 1 deletion src/wmcads/components/inset-text/_inset-text.scss
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
display: inline-block;
position: relative;
padding: $size-xsm $size-xsm $size-xsm 20px;
border-left: 5px solid get-color(secondary, 50, light);
border-left: 5px solid get-color(secondary);
text-align: left;
white-space: wrap;

4 changes: 2 additions & 2 deletions src/wmcads/components/link/link/_link.scss
Original file line number Diff line number Diff line change
@@ -10,11 +10,11 @@
cursor: pointer;

&:visited {
color: get-color(primary);
color: get-color(cta-active);
}

&:hover {
color: get-color(cta, 40, dark);
color: get-color(cta-active, 40, dark);
}
}

Original file line number Diff line number Diff line change
@@ -28,6 +28,7 @@
content: counters(item, ".") ".";
position: absolute;
left: -1.5rem;
color: get-color(primary);
counter-increment: item;
}
}
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@
content: "";
position: absolute;
left: -1.5rem;
color: get-color(primary);
}
}

@@ -29,6 +30,7 @@

li:before {
content: "";
color: get-color(primary);
}
}
}
2 changes: 1 addition & 1 deletion src/wmcads/components/message/help/_help.scss
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
display: block;
width: 100%;
padding: $size-sm;
background-color: get-color(secondary, 70);
background-color: help;

&__close-btn {
margin-top: $size-xs;
1 change: 1 addition & 0 deletions src/wmcads/components/message/summary/_summary.scss
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ $wmcads-msg-close-btn-width: 5rem;
position: relative;
padding: $size-sm;
border: 1px solid get-color(information);
background: $white;

&__header {
display: block;
2 changes: 2 additions & 0 deletions src/wmcads/components/table/_table.scss
Original file line number Diff line number Diff line change
@@ -4,8 +4,10 @@ $border: #979797;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background: $white;

&__caption {
background: $white;
font-weight: bold;
text-align: left;
}
136 changes: 0 additions & 136 deletions src/www/pages/components/buttons/index.njk
Original file line number Diff line number Diff line change
@@ -26,82 +26,6 @@
<hr>
<br><br>


{# Call to action buttons #}
<h2>Call to action buttons</h2>
{# What #}
<h3>What does it do?</h3>
<ul>
<li>Encourages the most desired action you want visitors to take.</li>
<li>Attracts attention on the page.</li>
</ul>
{# When #}
<h3>When to use it?</h3>
<ul>
<li>When you need a strong visual indicator to help user to complete their journey and do their task.</li>
<li>When you need action oriented button. Think: 'Done', 'Save', 'Next', 'Submit'.</li>
<li>Use the Dark background variant when a Call to action button will be used against a background with a dark colour, such as primary purple.</li>
</ul>
{# When not #}
<h3>When not to use it?</h3>
<ul>
<li>What action you want users to take is not essential in completing their task.</li>
<li>When a button is a destructive action.</li>
<li>When a button starts a process or journey.</li>
</ul>
{%- from "wmcads/components/button/_button.njk" import wmcadsButton as cta %}
{{
compExample(
[
cta({
text: "Call to action button"
}),
cta({
classNames: "wmcads-is--active",
text: "Call to action active button"
}),
cta({
text: "Call to action disabled button",
disabled: true
}),
cta({
text: "Call to action icon button",
iconRight: "general-chevron-right"
}),
cta({
text: "Call to action loading button",
loading: true
}),
cta({
text: "Call to action icon disabled button",
iconRight: "general-chevron-right",
disabled: true
})
],
{
componentPath: "wmcads/components/button/",
njk: true
}
)
}}

{# Dark background variant #}
<h3>Dark background variant</h3>
{{
compExample([
cta({
classNames: "wmcads-btn--dark-bg",
text: "Call to action dark bg button"
}),
cta({
classNames: "wmcads-btn--dark-bg wmcads-is--active",
text: "Call to action dark bg active button"
})
])
}}
{# end: call to action buttons #}
<br><br>

{# primary buttons #}
<h2>Primary buttons</h2>
{# What #}
@@ -332,65 +256,5 @@
})
])
}}
{# end: start buttons #}
<br><br>


{# mode buttons #}
<h2>Mode buttons</h2>
{# What #}
<h3>What does it do?</h3>
<ul>
<li>Lets the user select a mode of transport by which to filter</li>
</ul>
{# When #}
<h3>When to use it?</h3>
<ul>
<li>Filtering results or data by mode</li>
<li>Filtering a map by mode</li>
</ul>
{# When not #}
<h3>When not to use it?</h3>
<ul>
<li>When a button is essential for continuing the user journey</li>
<li>When a button is a destructive action</li>
<li>When a button starts a process or journey</li>
</ul>
{%- from "wmcads/components/button/_button.njk" import wmcadsButton as mode -%}
{{
compExample([
mode({
classNames: "wmcads-btn--mode",
text: "Bus",
iconLeft: "modes-isolated-bus"
}),
mode({
classNames: "wmcads-btn--mode wmcads-is--active",
text: "Bus active",
iconLeft: "modes-isolated-bus"
}),
mode({
classNames: "wmcads-btn--mode",
text: "Train",
iconLeft: "modes-isolated-rail"
}),
mode({
classNames: "wmcads-btn--mode",
text: "Metro",
iconLeft: "modes-isolated-metro"
}),
mode({
classNames: "wmcads-btn--mode",
text: "Roads",
iconLeft: "modes-isolated-roads"
}),
mode({
classNames: "wmcads-btn--mode",
text: "Disabled mode button",
iconLeft: "modes-isolated-bus",
disabled: true
})
])
}}
{# end: mode buttons #}
{% endblock %}
28 changes: 0 additions & 28 deletions src/www/pages/components/message/index.njk
Original file line number Diff line number Diff line change
@@ -107,34 +107,6 @@
}}

{# End error message #}
<br /><br />

{# Close message variant #}
<h2>Close message variant</h2>

<h3>What does it do?</h3>
<ul>
<li>Allows the user to dismiss an Information, Success, Warning or Error message.</li>
</ul>

<h3>When to use it?</h3>
<ul>
<li>
When the information in the message is a response to a users action, or if the information is of low importance and
only applies to a small set of users.
</li>
</ul>
{{
compExample([
wmcadsMsgSummary({
type: 'info',
title: 'Information about XXXXXXXXX was successfully updated!',
dismissable: true,
message: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.'
})
])
}}
{# End close message variant #}

<br /><br />
{# Help message #}
8 changes: 0 additions & 8 deletions src/www/pages/components/phase-indicator/index.njk
Original file line number Diff line number Diff line change
@@ -36,12 +36,4 @@
compExample([wmcadsPhaseIndicator()])

}}
{{
compExample([wmcadsPhaseIndicatorLink({
link:'#',
linkTitle: 'Link title',
text: 'Try our new disruptions page'

})])
}}
{% endblock %}