gamv/ds2-core
1
0
Fork 0
Code Issues 8 Releases 7 Activity

Update switch - set to done

Browse Source
This commit is contained in:
A McIlwraith 2024-07-16 03:11:51 -04:00
parent fa708175b7
commit ce98e0c488
6 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

6
public/index.html
View File

@ -59,9 +59,9 @@
<h1 class="status-complete"><span>Sticky note <h1 class="status-complete"><span>Sticky note
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </article>
<article id="components-switch" data-name="switch" data-status="in-progress" data-template="pug" data-core="true" data-path="components/switch"> <article id="components-switch" data-name="switch" data-status="complete" data-template="pug" data-core="true" data-path="components/switch">
<h1 class="status-in-progress"><span>Switch <h1 class="status-complete"><span>Switch
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </article>
<article id="components-tooltip" data-name="tooltip" data-status="in-progress" data-template="pug" data-core="true" data-path="components/tooltip"> <article id="components-tooltip" data-name="tooltip" data-status="in-progress" data-template="pug" data-core="true" data-path="components/tooltip">
<h1 class="status-in-progress"><span>Tooltip <h1 class="status-in-progress"><span>Tooltip

16
public/patterns/core/status/index.html
View File

@ -34,7 +34,7 @@
</tr> </tr>
<tr> <tr>
<td><a href="./?p=components/switch"> Switch</a></td> <td><a href="./?p=components/switch"> Switch</a></td>
<td><span class="status-in-progress">In progress</span></td> <td><span class="status-complete">Complete</span></td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=components/tooltip"> Tooltip</a></td> <td><a href="./?p=components/tooltip"> Tooltip</a></td>
@ -77,7 +77,7 @@
<td colspan="2"><span class="status-not-started">Not started (0)</span></td> <td colspan="2"><span class="status-not-started">Not started (0)</span></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><span class="status-in-progress">In progress (5)</span></td> <td colspan="2"><span class="status-in-progress">In progress (4)</span></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td> <td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
@ -87,10 +87,6 @@
<td> <a href="./?p=layouts/header">Header</a></td> <td> <a href="./?p=layouts/header">Header</a></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr>
<td> <a href="./?p=components/switch">Switch</a></td>
<td>Components</td>
</tr>
<tr> <tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td> <td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td>Layouts</td> <td>Layouts</td>
@ -100,7 +96,7 @@
<td>Components</td> <td>Components</td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><span class="status-complete">Complete (5)</span></td> <td colspan="2"><span class="status-complete">Complete (6)</span></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=colours">Colours</a></td> <td> <a href="./?p=colours">Colours</a></td>
@ -122,6 +118,10 @@
<td> <a href="./?p=components/sticky-note">Sticky note</a></td> <td> <a href="./?p=components/sticky-note">Sticky note</a></td>
<td>Components</td> <td>Components</td>
</tr> </tr>
<tr>
<td> <a href="./?p=components/switch">Switch</a></td>
<td>Components</td>
</tr>
<tr> <tr>
<td colspan="2"><span class="status-deprecated">Deprecated (1)</span></td> <td colspan="2"><span class="status-deprecated">Deprecated (1)</span></td>
</tr> </tr>
@ -172,7 +172,7 @@
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=components/switch">Switch</a></td> <td> <a href="./?p=components/switch">Switch</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td> <td><span><span class="status-complete">Complete</span></span></td>
<td>Components</td> <td>Components</td>
</tr> </tr>
<tr> <tr>

13
public/patterns/core/switch/index.html
View File

@ -5,12 +5,15 @@
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
<p>Switches are used to toggle application state between two mutually exlusive values. </p> <p>Switches are used to toggle application state between two mutually exclusive values. </p>
<h2>When to use it</h2> <h2>When to use it</h2>
<p>Use a switch when the user will see an immediate visible state change. Do not use a switch when the state change will affect future results. The user should not have to perform another action (search, save, etc) for the result to take affect. If the change in state does not take effect immediately, consider a checkbox. </p>
<h2>How to use it</h2> <h2>How to use it</h2>
<p>The switch label should describe what will happen when the switch is turned to the on state. Frontload labels with keywords. </p>
<p>Include the CSS and JavaScript. An additional handler will need to be created for the actual state change. The CSS implements the visual design of the switch, which is based on the accessibility properties, which are implemented by the JavaScript.</p>
<h2>Example</h2> <h2>Example</h2>
<p class="switch"> <p class="switch">
<label for="example-switch">Switch label</label><span id="example-switch" role="switch"></span> <label for="example-switch">Switch label (states the on state)</label><span id="example-switch" role="switch"></span>
</p> </p>
<div class="tab-group" id="switches"> <div class="tab-group" id="switches">
<pre class="language-html" data-tab="html"><span id="example-id" role="switch"></span></pre> <pre class="language-html" data-tab="html"><span id="example-id" role="switch"></span></pre>
@ -46,9 +49,9 @@
@use "sass:math"; @use "sass:math";
$switch-accent: var(--colour-blue) !default; // switch background when switched right (on/ true) $switch-accent: #2e51a1 !default; // switch background when switched right (on/ true)
$switch-background: var(--colour-grey-xl) !default; // switch background when switched left (off / false) $switch-background: #d8d8d8 !default; // switch background when switched left (off / false)
$switch-color: var(--colour-white) !default; // the colour of the switch $switch-color: white !default; // the colour of the switch
$switch-height: 1.5rem !default; $switch-height: 1.5rem !default;
@mixin switch { @mixin switch {

2
src/pg/_config.pug
View File

@ -27,7 +27,7 @@
}, },
{ {
name: "switch", name: "switch",
status: "in-progress", status: "complete",
core: true, core: true,
}, },
{ {

12
src/pg/patterns/core/switch/index.pug
View File

@ -5,20 +5,26 @@ extends ../../../core/_master-pattern
block content block content
+h(0) +h(0)
p Switches are used to toggle application state between two mutually exlusive values. p Switches are used to toggle application state between two mutually exclusive values.
+h(1) +h(1)
p Use a switch when the user will see an immediate visible state change. Do not use a switch when the state change will affect future results. The user should not have to perform another action (search, save, etc) for the result to take affect. If the change in state does not take effect immediately, consider a checkbox.
+h(2) +h(2)
p The switch label should describe what will happen when the switch is turned to the on state. Frontload labels with keywords.
p Include the CSS and JavaScript. An additional handler will need to be created for the actual state change. The CSS implements the visual design of the switch, which is based on the accessibility properties, which are implemented by the JavaScript.
h2 Example h2 Example
p.switch p.switch
label(for="example-switch") Switch label label(for="example-switch") Switch label (states the on state)
span#example-switch(role="switch") span#example-switch(role="switch")
div#switches.tab-group div#switches.tab-group
pre.language-html(data-tab="html") pre.language-html(data-tab="html")
include _switch.pug include _switch.pug
pre.language-pug(data-tab="pug") pre.language-pug(data-tab="pug")
include switch.pug include _switch.pp
pre.language-css(data-tab="css") pre.language-css(data-tab="css")
include switch.css include switch.css
pre.language-css(data-tab="scss") pre.language-css(data-tab="scss")