From 5b3ad18c1a725898db0304bfdf14042436354ba7 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Mon, 15 Mar 2021 17:21:26 +0000 Subject: [PATCH 1/8] new remad more button --- src/wmcads/components/link/_example.js | 110 ++++++++++++++ src/wmcads/components/link/link/_link.njk | 13 +- src/wmcads/components/link/link/_link.scss | 161 ++++++++++++++++++++- 3 files changed, 279 insertions(+), 5 deletions(-) create mode 100644 src/wmcads/components/link/_example.js diff --git a/src/wmcads/components/link/_example.js b/src/wmcads/components/link/_example.js new file mode 100644 index 00000000..5b30e28b --- /dev/null +++ b/src/wmcads/components/link/_example.js @@ -0,0 +1,110 @@ +const linkJS = () => { +// get all the 'trigger' elements on the page +const triggers = Array.from(document.querySelectorAll('[data-toggle="collapse"]')); + +// listen to click events that occuor +// only on our triggers +window.addEventListener( + 'click', + ev => { + const elm = ev.target; + if (triggers.includes(elm)) { + ev.preventDefault(); + const selector = elm.getAttribute('data-target'); + collapse(selector, 'toggle'); + if (elm.getAttribute('aria-expanded') === 'false') { + elm.setAttribute('aria-expanded', 'true'); + } else { + elm.setAttribute('aria-expanded', 'false'); + } + } + }, + false +); + +// map commands to the classList methods +const fnmap = { + toggle: 'toggle', + show: 'add', + hide: 'remove' +}; +const collapse = (selector, cmd) => { + const targets = Array.from(document.querySelectorAll(selector)); + targets.forEach(target => { + target.classList[fnmap[cmd]]('show'); + }); +}; + + + +const tabs = document.querySelectorAll('ul.wdgt-tab-labels > li'); +const panelQuestions = document.querySelectorAll('.wdgt-panel-question'); + +const onTabClick = e => { + e.preventDefault(); + + tabs.forEach(tab => { + tab.classList.remove('active'); + }); + + const clickedTab = e.currentTarget; + clickedTab.classList.add('active'); + + const tabsPanel = document.querySelectorAll('.wdgt-single-panel'); + + tabsPanel.forEach(panel => { + panel.classList.remove('active'); + }); + + const anchorRef = e.target; + const activePanelId = anchorRef.getAttribute('href'); + const activePanel = document.querySelector(activePanelId); + + activePanel.classList.add('active'); +}; + +const onQuestionClick = e => { + e.preventDefault(); + + tabs.forEach(tab => { + tab.classList.remove('active'); + }); + + tabs[1].classList.add('active'); + + const tabsPanel = document.querySelectorAll('.wdgt-single-panel'); + const tab2 = document.querySelector('#tab-2'); + + tabsPanel.forEach(panel => { + panel.classList.remove('active'); + }); + + tab2.classList.add('active'); + + const tabQuestion = document.querySelectorAll('.wdgt-panel-content'); + + tabQuestion.forEach(question => { + question.classList.remove('active'); + }); + + const questionAnchor = e.target; + const activeQuestion = questionAnchor.getAttribute('href'); + const AnswerPanel = document.querySelector(activeQuestion); + + AnswerPanel.classList.add('active'); +}; + +for (const tab of tabs) { + tab.addEventListener('click', onTabClick); +} + +for (const question of panelQuestions) { + question.addEventListener('click', onQuestionClick); +} + + +}; + +export default linkJS; + + diff --git a/src/wmcads/components/link/link/_link.njk b/src/wmcads/components/link/link/_link.njk index 8dd9c203..a99bef79 100755 --- a/src/wmcads/components/link/link/_link.njk +++ b/src/wmcads/components/link/link/_link.njk @@ -3,6 +3,8 @@ {% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %} {# Set vars #} {% set text = params.text if params.text else "link text" %} {# set link text #} +{% set copy = params.copy if params.copy else "

Reveal some hidden content

" %} {# set link copy #} +{% set copyName = params.copyName if params.copyName else "example" %} {# set link copy id #} {% set link = params.link if params.link else "#" %} {# set link url #} {% set linkTitle = params.linkTitle if params.linkTitle else "link title" %} {# set link title #} {% set linkTarget = params.linkTarget if params.linkTarget else "_self" %} {# set link target #} @@ -12,11 +14,18 @@ {% set class = ' ' + params.classModifiers if params.classModifiers %} {% set class = class + " wmcads-link--with-chevron" if params.withChevronLeft or params.withChevronRight else class %} - +
+ {{copy | safe}} +
+ +
+ +
+
+
+
+ +

Name Surname 1

+ +

+ Powder ice cream jujubes jelly beans. Cotton candy chocolate cake dragée ice cream jelly + beans lemon drops sweet. Jujubes candy canes jujubes liquorice croissant pie liquorice + liquorice. Cookie marzipan lollipop tiramisu cake cake. Wafer cupcake jelly muffin cupcake + tart sweet. +

+

+ Donut candy canes carrot cake. Jelly-o wafer lemon drops cookie icing cheesecake. Tiramisu + chocolate donut chocolate cake liquorice. Liquorice pudding gingerbread halvah topping + chocolate bar topping pastry sweet. +

+ + {{ + wmcadsLink({ + text: "View more", + withReadMore: true, + btnSeeMoreRevealClass: "example", + copyName: "exampleone", + copy: '

+ Cupcake halvah wafer chocolate bar jujubes chocolate bar muffin. Gummi bears soufflé + bear claw. Chocolate cake muffin toffee toffee. Croissant dragée pastry. Caramels cookie + jelly beans danish. +

+

+ Croissant danish gingerbread sugar plum icing biscuit tiramisu icing chocolate bar. + Gummies candy candy canes powder gummies. Jelly carrot cake chocolate carrot cake + liquorice sugar plum oat cake. Ice cream ice cream jelly. +

+

+ Candy halvah gummi bears cheesecake jelly pudding bear claw. Jelly cookie jelly icing + jelly-o. Cake ice cream caramels wafer fruitcake oat cake. +

' + }) + }} + +
+
+ +
+
+
+
+
+ +
+ +

Name Surname 2

+ +

+ Powder ice cream jujubes jelly beans. Cotton candy chocolate cake dragée ice cream jelly + beans lemon drops sweet. Jujubes candy canes jujubes liquorice croissant pie liquorice + liquorice. Cookie marzipan lollipop tiramisu cake cake. Wafer cupcake jelly muffin cupcake + tart sweet. +

+

+ Donut candy canes carrot cake. Jelly-o wafer lemon drops cookie icing cheesecake. Tiramisu + chocolate donut chocolate cake liquorice. Liquorice pudding gingerbread halvah topping + chocolate bar topping pastry sweet. +

+
+

+ Cupcake halvah wafer chocolate bar jujubes chocolate bar muffin. Gummi bears soufflé + bear claw. Chocolate cake muffin toffee toffee. Croissant dragée pastry. Caramels cookie + jelly beans danish. +

+

+ Croissant danish gingerbread sugar plum icing biscuit tiramisu icing chocolate bar. + Gummies candy candy canes powder gummies. Jelly carrot cake chocolate carrot cake + liquorice sugar plum oat cake. Ice cream ice cream jelly. +

+

+ Candy halvah gummi bears cheesecake jelly pudding bear claw. Jelly cookie jelly icing + jelly-o. Cake ice cream caramels wafer fruitcake oat cake. +

+
+ + + + + + + + +
+
+ +
+
+
+
+
+ +
+ +

Name Surname 3

+ +

+ Powder ice cream jujubes jelly beans. Cotton candy chocolate cake dragée ice cream jelly + beans lemon drops sweet. Jujubes candy canes jujubes liquorice croissant pie liquorice + liquorice. Cookie marzipan lollipop tiramisu cake cake. Wafer cupcake jelly muffin cupcake + tart sweet. +

+

+ Donut candy canes carrot cake. Jelly-o wafer lemon drops cookie icing cheesecake. Tiramisu + chocolate donut chocolate cake liquorice. Liquorice pudding gingerbread halvah topping + chocolate bar topping pastry sweet. +

+
+
+ +
+
+
+
+
+ +
+ +

Name Surname 4

+ +

+ Powder ice cream jujubes jelly beans. Cotton candy chocolate cake dragée ice cream jelly + beans lemon drops sweet. Jujubes candy canes jujubes liquorice croissant pie liquorice + liquorice. Cookie marzipan lollipop tiramisu cake cake. Wafer cupcake jelly muffin cupcake + tart sweet. +

+

+ Donut candy canes carrot cake. Jelly-o wafer lemon drops cookie icing cheesecake. Tiramisu + chocolate donut chocolate cake liquorice. Liquorice pudding gingerbread halvah topping + chocolate bar topping pastry sweet. +

+
+
+ +
+
+
+
+ + +
+ +{% endmacro %} diff --git a/src/wmcads/patterns/board-members/_board-members.scss b/src/wmcads/patterns/board-members/_board-members.scss new file mode 100755 index 00000000..b6b8ccd7 --- /dev/null +++ b/src/wmcads/patterns/board-members/_board-members.scss @@ -0,0 +1,3 @@ +.wmcads-board-members { + +} diff --git a/src/www/assets/json/merged.njk.json b/src/www/assets/json/merged.njk.json index 6cc6d8f3..a3bd5e7e 100755 --- a/src/www/assets/json/merged.njk.json +++ b/src/www/assets/json/merged.njk.json @@ -115,6 +115,9 @@ { "name": "Banner" }, + { + "name": "Board Members" + }, { "name": "Cookies" }, diff --git a/src/www/data.njk.json b/src/www/data.njk.json index c096ad75..55429d31 100644 --- a/src/www/data.njk.json +++ b/src/www/data.njk.json @@ -115,6 +115,9 @@ { "name": "Banner" }, + { + "name": "Board Members" + }, { "name": "Cookies" }, diff --git a/src/www/pages/patterns/board-members/index.njk b/src/www/pages/patterns/board-members/index.njk new file mode 100755 index 00000000..d30bf450 --- /dev/null +++ b/src/www/pages/patterns/board-members/index.njk @@ -0,0 +1,49 @@ +{% extends "www/_layouts/layout-left-pane.njk" %} +{% set pageTitle = "Board Members" %} +{% set section="Patterns" %} +{# Imports #} +{% from "wmcads/patterns/board-members/_board-members.njk" import wmcadsBoardMembers %} +{% from "www/_partials/component-example/component-example.njk" import compExample %} + +{% block content %} +{# About #} +

About

+{# What #} +

What does it do?

+

+ The autocomplete component is an input field that offers the user text suggestions as they type.
+ This is often done by hitting an API endpoint with the users query when the user has finished typing. +

+

+ The autocomplete pattern is a combination of the input and loader components. +

+{# When #} +

When to use it?

+ +{# When not #} +

When not to use it?

+ + +


+{# Default #} +

Default state

+

In its default state, the autcomplete component is made up of a text input with a search icon.

+

For best practice, ensure that the placeholder and aria-label describes what the autocompletes intended purpose is.

+

Notice that there is also a wmcads-loader component nested within the autocomplete, more on that in the next section.

+ +{{ + compExample([ + wmcadsBoardMembers({ + + }) + ]) +}} + +{% endblock %} \ No newline at end of file diff --git a/src/www/wmcads-website.js b/src/www/wmcads-website.js index 81df6aeb..12509efb 100755 --- a/src/www/wmcads-website.js +++ b/src/www/wmcads-website.js @@ -5,6 +5,7 @@ import cookies from '../wmcads/patterns/cookies/_example'; import headerJs from '../wmcads/patterns/header/_example'; import footerJs from '../wmcads/patterns/footer/_example'; import accordionsJS from '../wmcads/components/accordion/_example'; +import linkJS from '../wmcads/components/link/_example'; import searchFilterJs from '../wmcads/patterns/search/search-filter/_example'; import { @@ -35,6 +36,7 @@ window.addEventListener( headerJs(), footerJs(), accordionsJS(), + linkJS(), cookies(), searchFilterJs(), componentExampleIframe(), From 0accb75f972252bf90f6b9040e1dae24ab3a9b7e Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Fri, 19 Mar 2021 11:46:47 +0000 Subject: [PATCH 3/8] new - bare list style --- src/wmcads/components/_components.scss | 1 + .../components/lists/bare-list/_bare-list.njk | 7 ++++ .../lists/bare-list/_bare-list.scss | 10 ++++++ src/www/pages/components/lists/index.njk | 36 +++++++++++++++++++ 4 files changed, 54 insertions(+) create mode 100755 src/wmcads/components/lists/bare-list/_bare-list.njk create mode 100755 src/wmcads/components/lists/bare-list/_bare-list.scss diff --git a/src/wmcads/components/_components.scss b/src/wmcads/components/_components.scss index eb0fb1c4..0d193363 100755 --- a/src/wmcads/components/_components.scss +++ b/src/wmcads/components/_components.scss @@ -13,6 +13,7 @@ @import "inset-text/inset-text"; // Inset text @import "in-text-step/in-text-step"; // In-text step @import "link/link"; // Link elements +@import "lists/bare-list/bare-list"; // Bare list elements @import "lists/ordered-list/ordered-list"; // Ordered list elements @import "lists/unordered-list/unordered-list"; // Unordered list elements @import "loader/loader"; // Loader diff --git a/src/wmcads/components/lists/bare-list/_bare-list.njk b/src/wmcads/components/lists/bare-list/_bare-list.njk new file mode 100755 index 00000000..1d4c790b --- /dev/null +++ b/src/wmcads/components/lists/bare-list/_bare-list.njk @@ -0,0 +1,7 @@ +{% macro wmcadsBareList(params) %} + + + +{% endmacro %} diff --git a/src/wmcads/components/lists/bare-list/_bare-list.scss b/src/wmcads/components/lists/bare-list/_bare-list.scss new file mode 100755 index 00000000..063bc0fd --- /dev/null +++ b/src/wmcads/components/lists/bare-list/_bare-list.scss @@ -0,0 +1,10 @@ +.wmcads-bare-list { + list-style: none; + padding-inline-start: $size-xs; + + a, + .wmcads-link { + display: inline; + } + +} diff --git a/src/www/pages/components/lists/index.njk b/src/www/pages/components/lists/index.njk index dcdc1eee..da9d7ed6 100755 --- a/src/www/pages/components/lists/index.njk +++ b/src/www/pages/components/lists/index.njk @@ -102,6 +102,42 @@ ]) }} +{# Bare list #} +

Bare List

+{# What #} +

What does it do?

+ +{# When #} +

When to use it?

+ +{# When not #} +

When not to use it?

+ +{# How to #} +

How to use it?

+ +{% from "wmcads/components/lists/bare-list/_bare-list.njk" import wmcadsBareList %} +{{ + compExample([ + wmcadsBareList( + { + html: + "
  • Text
  • +
  • Text
  • +
  • Link
  • " + } + ) | trim + ]) +}} {% endblock %} From 0b9a3b22d17413e8471991ea5fcb7b22fd317ed9 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Fri, 19 Mar 2021 15:05:25 +0000 Subject: [PATCH 4/8] add read more example --- src/www/pages/components/buttons/index.njk | 35 +++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/www/pages/components/buttons/index.njk b/src/www/pages/components/buttons/index.njk index f8d26a01..97d2397a 100755 --- a/src/www/pages/components/buttons/index.njk +++ b/src/www/pages/components/buttons/index.njk @@ -256,5 +256,38 @@ }) ]) }} -{# end: mode buttons #} +{# end: start buttons #} + +{# read more buttons #} +

    Read more button

    +{# What #} +

    What does it do?

    +
      +
    • Shows that the button starts a process or journey
    • +
    +{# When #} +

    When to use it?

    +
      +
    • When a button starts a process or journey
    • +
    +{# When not #} +

    When not to use it?

    +
      +
    • When a button is a destructive action
    • +
    • When a button is trying to attract the user's attention
    • +
    • When the button is inessential for continuing the user journey
    • +
    + +{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %} +{{ + compExample([ + wmcadsLink({ + text: "View more", + withReadMore: true, + btnSeeMoreRevealClass: "example" + }) + ]) +}} +{# end: read more buttons #} + {% endblock %} \ No newline at end of file From d6fcf71660f4ecdd4d4423a9e8f99f4d1ce237cc Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Fri, 19 Mar 2021 15:06:31 +0000 Subject: [PATCH 5/8] new: board members pattern --- .../patterns/board-members/_board-members.njk | 62 +++++----- .../board-members/_board-members.scss | 36 +++++- src/wmcads/patterns/board-members/_example.js | 110 ++++++++++++++++++ .../component-example/_component-example.scss | 2 +- .../pages/patterns/board-members/index.njk | 33 +----- src/www/wmcads-website.js | 4 +- 6 files changed, 181 insertions(+), 66 deletions(-) create mode 100644 src/wmcads/patterns/board-members/_example.js diff --git a/src/wmcads/patterns/board-members/_board-members.njk b/src/wmcads/patterns/board-members/_board-members.njk index cac7d3d1..4b28d397 100755 --- a/src/wmcads/patterns/board-members/_board-members.njk +++ b/src/wmcads/patterns/board-members/_board-members.njk @@ -2,23 +2,23 @@ {% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}

    Meet the board members

    -
    -