gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Initial Commit

Browse Source
This commit is contained in:
A McIlwraith
2024-06-13 00:00:00 -04:00
commit b5e421761f
762 changed files with 41771 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
public/patterns/colours-core/index.html Normal file
View File

@@ -0,0 +1,329 @@
<html>
<head>
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<color-samples>
<color-sample data-color="rgb( 46, 81, 161)" style="background-color: rgb( 46, 81, 161); color: #FFF">
<name data-hex="#2e51a1" data-rgb="rgb( 46, 81, 161)" data-token="--colour-blue"><span>Blue</span></name>
<hex>#2e51a1</hex>
<rgb>rgb(46,81,161)</rgb>
<accessibility>
<div class="acchb"> <span>color & black </span><small>2.8:1</small></div>
<div class="acchw"> <span>color & white </span><small>7.5:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaa result"><span style="color: rgb( 46, 81, 161)">&#x2713; </span><span style="color: rgb( 46, 81, 161)">&#x2713;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaaa result"><span style="color: rgb( 46, 81, 161)">&#x2713; </span><span style="color: rgb( 46, 81, 161)">&#x2713;</span>
</div>
</accessibility>
<sample-block>
<color-pill data-hex="#5c7abf" data-rgb="rgb( 92,122,191)" data-token="--colour-blue-l"> <span style="background-color: rgb( 92,122,191)">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>5:1</small></div>
<div class="acchw"> <span>color & white </span><small>4.2:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb( 92,122,191)">&#x2713;</span><span style="color: rgb( 92,122,191)">&#x2713;</span>
</div>
<div class="accwaa result"><span>&#x2717; </span><span style="color: rgb( 92,122,191)">&#x2713;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>&#x2717; </span><span style="color: rgb( 92,122,191)">&#x2713;</span>
</div>
<div class="accwaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
</div></span><span>blue-l</span>
</color-pill>
<color-pill data-hex="#b2c3ec" data-rgb="rgb(178,195,236)" data-token="--colour-blue-xl"> <span style="background-color: rgb(178,195,236)">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>11.9:1</small></div>
<div class="acchw"> <span>color & white </span><small>1.8:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(178,195,236)">&#x2713;</span><span style="color: rgb(178,195,236)">&#x2713;</span>
</div>
<div class="accwaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(178,195,236)">&#x2713; </span><span style="color: rgb(178,195,236)">&#x2713;</span>
</div>
<div class="accwaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
</div></span><span>blue-xl</span>
</color-pill>
</sample-block>
<sample-block>
<color-pill data-hex="#133176" data-rgb="rgb( 19, 49,118)" data-token="--colour-blue-d"> <span style="background-color: rgb( 19, 49,118)">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>1.7:1</small></div>
<div class="acchw"> <span>color & white </span><small>12.1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaa result"><span style="color: rgb( 19, 49,118)">&#x2713; </span><span style="color: rgb( 19, 49,118)">&#x2713;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaaa result"><span style="color: rgb( 19, 49,118)">&#x2713; </span><span style="color: rgb( 19, 49,118)">&#x2713;</span>
</div>
</div></span><span>blue-d</span>
</color-pill>
<color-pill data-hex="#031235" data-rgb="rgb( 3, 18, 53)" data-token="--colour-blue-xd"> <span style="background-color: rgb( 3, 18, 53)">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>1.1:1</small></div>
<div class="acchw"> <span>color & white </span><small>18.4:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaa result"><span style="color: rgb( 3, 18, 53)">&#x2713; </span><span style="color: rgb( 3, 18, 53)">&#x2713;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaaa result"><span style="color: rgb( 3, 18, 53)">&#x2713; </span><span style="color: rgb( 3, 18, 53)">&#x2713;</span>
</div>
</div></span><span>blue-xd</span>
</color-pill>
</sample-block>
</color-sample>
<color-sample data-color="rgb(127, 127, 127)" style="background-color: rgb(127, 127, 127); color: #000">
<name data-hex="#7f7f7f" data-rgb="rgb(127, 127, 127)" data-token="--colour-grey"><span>Grey</span></name>
<hex>#7f7f7f</hex>
<rgb>rgb(127,127,127)</rgb>
<accessibility>
<div class="acchb"> <span>color & black </span><small>5.2:1</small></div>
<div class="acchw"> <span>color & white </span><small>4:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(127, 127, 127)">&#x2713;</span><span style="color: rgb(127, 127, 127)">&#x2713;</span>
</div>
<div class="accwaa result"><span>&#x2717; </span><span style="color: rgb(127, 127, 127)">&#x2713;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>&#x2717; </span><span style="color: rgb(127, 127, 127)">&#x2713;</span>
</div>
<div class="accwaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
</accessibility>
<sample-block>
<color-pill data-hex="#b2b2b2" data-rgb="rgb(178, 178, 178)" data-token="--colour-grey-l"> <span style="background-color: #b2b2b2">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>9.9:1</small></div>
<div class="acchw"> <span>color & white </span><small>2.1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(178, 178, 178)">&#x2713;</span><span style="color: rgb(178, 178, 178)">&#x2713;</span>
</div>
<div class="accwaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(178, 178, 178)">&#x2713; </span><span style="color: rgb(178, 178, 178)">&#x2713;</span>
</div>
<div class="accwaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
</div></span><span>Light</span>
</color-pill>
<color-pill data-hex="#d8d8d8" data-rgb="rgb(216, 216, 216)" data-token="--colour-grey-xl"> <span style="background-color: #d8d8d8">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>14.7:1</small></div>
<div class="acchw"> <span>color & white </span><small>1.4:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(216, 216, 216)">&#x2713;</span><span style="color: rgb(216, 216, 216)">&#x2713;</span>
</div>
<div class="accwaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(216, 216, 216)">&#x2713; </span><span style="color: rgb(216, 216, 216)">&#x2713;</span>
</div>
<div class="accwaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
</div></span><span>Lighter</span>
</color-pill>
<color-pill data-hex="#f0f0f0" data-rgb="rgb(240, 240, 240)" data-token="--colour-grey-xxl"> <span style="background-color: #f0f0f0">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>18.4:1</small></div>
<div class="acchw"> <span>color & white </span><small>1.1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(240, 240, 240)">&#x2713;</span><span style="color: rgb(240, 240, 240)">&#x2713;</span>
</div>
<div class="accwaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(240, 240, 240)">&#x2713; </span><span style="color: rgb(240, 240, 240)">&#x2713;</span>
</div>
<div class="accwaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
</div></span><span>Lightest</span>
</color-pill>
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-white"> <span style="background-color: #FFF">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">&#x2713;</span><span style="color: rgb(255, 255, 255)">&#x2713;</span>
</div>
<div class="accwaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">&#x2713; </span><span style="color: rgb(255, 255, 255)">&#x2713;</span>
</div>
<div class="accwaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
</div></span><span>White</span>
</color-pill>
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-page"> <span style="background-color: #FFF">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">&#x2713;</span><span style="color: rgb(255, 255, 255)">&#x2713;</span>
</div>
<div class="accwaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">&#x2713; </span><span style="color: rgb(255, 255, 255)">&#x2713;</span>
</div>
<div class="accwaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
</div></span><span>Default page</span>
</color-pill>
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-light"> <span style="background-color: #FFF">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">&#x2713;</span><span style="color: rgb(255, 255, 255)">&#x2713;</span>
</div>
<div class="accwaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">&#x2713; </span><span style="color: rgb(255, 255, 255)">&#x2713;</span>
</div>
<div class="accwaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
</div></span><span>Light</span>
</color-pill>
</sample-block>
<sample-block>
<color-pill data-hex="#4c4c4c" data-rgb="rgb(76, 76, 76)" data-token="--colour-grey-d"> <span style="background-color: #4c4c4c">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>2.4:1</small></div>
<div class="acchw"> <span>color & white </span><small>8.6:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaa result"><span style="color: rgb(76, 76, 76)">&#x2713; </span><span style="color: rgb(76, 76, 76)">&#x2713;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaaa result"><span style="color: rgb(76, 76, 76)">&#x2713; </span><span style="color: rgb(76, 76, 76)">&#x2713;</span>
</div>
</div></span><span>Dark</span>
</color-pill>
<color-pill data-hex="#4c4c4c" data-rgb="rgb(76, 76, 76)" data-token="--colour-grey-xd"> <span style="background-color: #4c4c4c">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>2.4:1</small></div>
<div class="acchw"> <span>color & white </span><small>8.6:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaa result"><span style="color: rgb(76, 76, 76)">&#x2713; </span><span style="color: rgb(76, 76, 76)">&#x2713;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaaa result"><span style="color: rgb(76, 76, 76)">&#x2713; </span><span style="color: rgb(76, 76, 76)">&#x2713;</span>
</div>
</div></span><span>Darker</span>
</color-pill>
<color-pill data-hex="#000" data-rgb="rgb(0, 0, 0)" data-token="--colour-black"> <span style="background-color: #000">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>1:1</small></div>
<div class="acchw"> <span>color & white </span><small>21:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaa result"><span style="color: rgb(0, 0, 0)">&#x2713; </span><span style="color: rgb(0, 0, 0)">&#x2713;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaaa result"><span style="color: rgb(0, 0, 0)">&#x2713; </span><span style="color: rgb(0, 0, 0)">&#x2713;</span>
</div>
</div></span><span>Black</span>
</color-pill>
<color-pill data-hex="#000" data-rgb="rgb(0, 0, 0)" data-token="--colour-dark"> <span style="background-color: #000">
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
<div class="acchb"> <span>color & black </span><small>1:1</small></div>
<div class="acchw"> <span>color & white </span><small>21:1</small></div>
<div class="aa">WCAG 2.0 AA </div>
<div class="accbaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaa result"><span style="color: rgb(0, 0, 0)">&#x2713; </span><span style="color: rgb(0, 0, 0)">&#x2713;</span>
</div>
<div class="aaa">WCAG 2.0 AAA </div>
<div class="accbaaa result"><span>&#x2717; </span><span>&#x2717;</span>
</div>
<div class="accwaaa result"><span style="color: rgb(0, 0, 0)">&#x2713; </span><span style="color: rgb(0, 0, 0)">&#x2713;</span>
</div>
</div></span><span>Dark</span>
</color-pill>
</sample-block>
</color-sample>
</color-samples>
<div class="tab-group" id="colours">
<div data-tab="css">
<pre class="language-css">:root {
--colour-blue: #2e51a1;
--colour-blue-l: #5c7abf;
--colour-blue-xl: #b2c3ec;
--colour-blue-d: #133176;
--colour-blue-xd: #031235;
--colour-grey: #7f7f7f;
--colour-grey-l: #b2b2b2;
--colour-grey-xl: #d8d8d8;
--colour-grey-xxl: #f0f0f0;
--colour-white: #FFF;
--colour-page: #FFF;
--colour-light: #FFF;
--colour-grey-d: #4c4c4c;
--colour-grey-xd: #4c4c4c;
--colour-black: #000;
--colour-dark: #000;
}</pre>
</div>
<div data-tab="scss">
<pre class="language-css">$colour: (
colour-blue: #2e51a1,
colour-blue-l: #5c7abf,
colour-blue-xl: #b2c3ec,
colour-blue-d: #133176,
colour-blue-xd: #031235,
colour-grey: #7f7f7f,
colour-grey-l: #b2b2b2,
colour-grey-xl: #d8d8d8,
colour-grey-xxl: #f0f0f0,
colour-white: #FFF,
colour-page: #FFF,
colour-light: #FFF,
colour-grey-d: #4c4c4c,
colour-grey-xd: #4c4c4c,
colour-black: #000,
colour-dark: #000,
);
:root {
@each $name, $color in $colour {
--#{$name}: #{$color};
}
}</pre>
</div>
</div>
</body>
</html>

101
public/patterns/components/switch-core/index.html Normal file
View File

@@ -0,0 +1,101 @@
<html>
<head>
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>Example</h2>
<p class="switch">
<label for="example-switch">Switch label</label><span id="example-switch" role="switch"></span>
</p>
<div class="tab-group" id="switches">
<pre class="language-html" data-tab="html"><span id="example-id" role="switch"></span></pre>
<pre class="language-pug" data-tab="pug">span#example-id(role="switch")</pre>
<pre class="language-css" data-tab="css">[role=switch] {
display: -ms-inline-grid;
display: inline-grid;
border: 1px solid #2e51a1;
background-color: #e9e9ea;
border-radius: 0.75rem;
height: 1.5rem;
width: 3rem;
-webkit-transition: all 500ms;
transition: all 500ms;
}
[role=switch] > span {
display: inline-block;
background-color: white;
border-radius: 50%;
margin: 2%;
width: calc(1.5rem - 2%);
-webkit-transition: all 500ms;
transition: all 500ms;
}
[role=switch][aria-checked=true] {
background-color: #2e51a1;
}
[role=switch][aria-checked=true] > span {
margin-left: calc(1.5rem - 5%);
}</pre>
<pre class="language-css" data-tab="scss">@use "sass:math";
$switch-accent: #2e51a1 !default; // switch background when switched right (on/ true)
$switch-background: #e9e9ea !default; // switch background when switched left (off / false)
$switch-color: #ffffff !default; // the colour of the switch
$switch-height: 1.5rem !default;
@mixin switch {
[role='switch'] {
display: inline-grid;
border: 1px solid $switch-accent;
background-color: $switch-background;
border-radius: math.div($switch-height, 2);
height: $switch-height;
width: #{$switch-height * 2};
transition: all 500ms;
> span {
display: inline-block;
background-color: white;
border-radius: 50%;
margin: 2%;
width: calc(#{$switch-height} - 2%);
transition: all 500ms;
}
&[aria-checked="true"] {
background-color: $switch-accent;
> span {
margin-left: calc(#{$switch-height} - 5%);
}
}
}
}</pre>
<pre class="language-js" data-tab="js">
function flip(e) {
let sw = e.currentTarget;
switch(sw.getAttribute("aria-checked")) {
case "true":
sw.setAttribute("aria-checked", "false");
break;
case "false":
sw.setAttribute("aria-checked", "true");
break;
}
};
function init(callback){
let sw = document.querySelectorAll("[role='switch']");
for (let i=0; i < sw.length; i++) {
sw[i].innerHTML = "<span></span>";
sw[i].setAttribute("aria-checked", "false");
sw[i].setAttribute("tabindex", "0");
sw[i].addEventListener("click", flip, false);
sw[i].addEventListener("keypress", flip, false);
}
}
export {init};</pre>
</div>
</body>
</html>

76
public/patterns/layouts/header-core/index.html Normal file
View File

@@ -0,0 +1,76 @@
<html>
<head>
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<div class="tab-group" id="header">
<pre class="language-html" data-tab="html">
<!-- create temp variables and store the design system values-->
<header>
<!-- The headline banner area -->
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<text>[site name]</text>
</svg>
<div>
<div class="header-title">
<h1> <a href="[site root]">[site name]</a></h1>
</div>
<!-- Other sections can go here, such as search and directory-->
</div>
</header></pre>
<pre class="language-sass" data-tab="scss">$header-bg-color: var(--color-grey-xl) !default;
$font-heading: sans-serif !default;
$font-weight: 700 !default;
@mixin header {
header {
display: grid;
grid-template-rows: 1.75rem 3.5rem;
grid-column: 2 / 4;
overflow: hidden;
svg {
grid-column: 1 / -1;
grid-row: 1 / -1;
place-self: stretch;
text {
transform: translate(-1rem, 7.25rem);
font-size: 10rem;
font-weight: 1000;
font-family: $font-heading;
fill: $header-bg-color;
}
}
> div {
grid-row: 2;
grid-column: 1 / -1;
display: grid;
grid-column-gap: 1rem;
grid-template-columns: auto max-content max-content;
.header-title {
h1 {
margin: 0;
padding: 0 1rem;
a, a:visited {
border-bottom: none;
color: var(--colour-black);
font-family: $font-heading;
font-size: 2.5rem;
font-size: 32px;
font-weight: $font-weight;
margin: 0;
padding: 0;
text-decoration: none;
}
}
}
}
}
}</pre>
<pre class="language-css" data-tab="css">header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--color-grey-xl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}</pre>
</div>
</body>
</html>

161
public/patterns/layouts/tabs-core/index.html Normal file
View File

@@ -0,0 +1,161 @@
<html>
<head>
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<p>The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should </p>
<ul>
<li>be logically chunked and ordered</li>
<li>be arallel in nature</li>
<li>show user's context</li>
<li>obvious where they begin and end </li>
</ul>
<p>Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content. </p>
<p>The tab module is untested, but contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).</p>
<div class="tab-group" id="tabs">
<pre class="language-html" data-tab="html"><div class="tab-group" id="[unique name]">
<div data-tab="[tab title]"></div>
<div data-tab="[tab title]"></div>
...
</div>
</pre>
<pre class="language-css" data-tab="css">.tab-group {
margin: 2rem 0 1rem 0;
}
.tab-group > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
}
.tab-group > ul li.separator {
border-bottom: 1px solid var(--color-grey);
border-left: 1px solid var(--color-grey);
display: inline-block;
margin: 0.45rem 0 0 0;
width: 100%;
}
.tab-group .tab-hidden {
display: none;
}
.tab-group [role=tab] {
background-color: var(--color-white);
border-left: 1px solid var(--color-grey);
border-top: 1px solid var(--color-grey);
border-radius: 0.5rem 0.5rem 0 0;
margin: 0;
display: inline;
padding: 1rem 1.5rem 0.14rem 1.5rem;
z-index: 2;
}
.tab-group [role=tab]:last-of-type {
border-right: 1px solid var(--color-grey);
}
.tab-group [role=tab]:not(.selected) {
background-color: var(--color-grey-xxl);
border-bottom: 1px solid var(--color-grey);
}
.tab-group [role=tab] span {
display: block;
margin: 0 0 0.5rem 0;
}
.tab-group [role=tabpanel] {
background-color: var(--color-white);
border: 1px solid var(--color-grey);
border-top: none;
padding: 1rem;
z-index: 1;
}
.tab-group [role=tabpanel]:not(.open) {
display: none;
}</pre>
<pre class="language-css" data-tab="scss">@mixin tabs {
.tab-group {
margin: 2rem 0 1rem 0;
> ul {
display: flex;
margin: 0;
padding: 0;
li.separator {
border-bottom: 1px solid var(--color-grey);
border-left: 1px solid var(--color-grey);
display: inline-block;
margin: .45rem 0 0 0;
width: 100%;
}
}
.tab-hidden {
display: none;
}
[role="tab"] {
background-color: var(--color-white);
border-left: 1px solid var(--color-grey);
border-top: 1px solid var(--color-grey);
border-radius: .5rem .5rem 0 0;
margin: 0;
display: inline;
padding: 1rem 1.5rem .14rem 1.5rem;
z-index: 2;
&:last-of-type {
border-right: 1px solid var(--color-grey);
}
&:not(.selected) {
background-color: var(--color-grey-xxl);
border-bottom: 1px solid var(--color-grey);
}
span {
display: block;
margin: 0 0 .5rem 0;
}
}
[role="tabpanel"] {
background-color: var(--color-white);
border: 1px solid var(--color-grey);
border-top: none;
padding: 1rem;
z-index: 1;
&:not(.open) {
display: none;
}
@content;
}
}
}</pre>
<pre class="language-css" data-tab="js">export function tabs($) {
$(".tab-group").each(function(){
let tabgroup = $(this).attr("id"),
tablist = "";
$(this).children("*").each(function(){
let tab = $(this).attr("data-tab");
if (typeof tab !== 'undefined' && tab !== false) {
let tabID = tab.replace(/\W+/g,"-").toLowerCase();
$(this).wrap(`<div id="tab-panel-${tabgroup + "-" + tabID }" ${(tablist == "" ? "class='open'" : "")} role="tabpanel" tabindex="0" aria-labeledby="tab-${tabgroup + "-" + tabID }"></div>`);
tablist += `<li tabindex="0" role="tab" ${(tablist == "" ? "class='selected'" : "")} id="tab-${tabgroup + "-" + tab.replace(/\W+/g,"-").toLowerCase()}"><span>${tab}</span></li>`;
} else {
$(this).addClass("tab-hidden");
}
})
$(this).prepend(`<ul role="tablist">${tablist}<li role="separator" class="separator"></li></ul>`);
})
$('[role="tab"]').on("click", function(){
$(this).parent().children('[role="tab"]').removeClass("selected");
$(this).addClass("selected");
$(this).parent().parent().children('[role="tabpanel"]').removeClass("open");
$("#" + $(this).attr("id").replace("tab", "tab-panel")).addClass("open");
})
}</pre>
</div>
</body>
</html>