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

Add code to auto select tabs

Browse Source
This commit is contained in:
A McIlwraith 2025-01-11 13:03:27 -05:00
parent a8cd90c349
commit b5e0061247
4 changed files with 52 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
Readme.md
View File

@ -3,7 +3,7 @@
## Requirements
The requirements for ds2-core are pretty light. You'll want to be able to process [PugJS](https://pugjs.org/api/getting-started.html) (formerly Jade) and [SCSS](https://sass-lang.com/documentation/) -- and that's about it.
For our own design system, we use ds2-core with [Prepros](https://prepros.io) (which you can use the Free Unlimited Trial for, but why not splurge and spend the $30USD to support the developer). On MacOS, you could also use [CodeKit](https://codekitapp.com/).
For our own design system, we use ds2-core with [Prepros](https://prepros.io) (which you can use the Free Unlimited Trial for, but why not splurge and spend the $30USD to support the developer and skip the nags). On MacOS, you could also use [CodeKit](https://codekitapp.com/).
Alternatively, if you have pre-processor pipelines for Pug and SCSS, which you can install using npm, or any other language you decide to pull in, you can use those to compile if that ends up being easier for you. The framework isn't too picky, so long as things go into the right place.
@ -62,6 +62,37 @@ This will ensure that the .pug file will get processed and the .pp file will be
## Using core code with your own pattern documentation.
Using
---
Creating a new pattern
Begin by creating a folder within your strucutre to hold the pattern. Add the folder to your config file.
Generating css
You've likely created your component's css as an include file beginning with an underscore. create a second file named the same that includes any dependencies (such as breakpoints) that are required to generate your valid css.
You can now include the css in your pattern's index file.
Generating pug
Create a custom tool in prepros, give it a name such as "PP to Pug" set the input extension to .pp and the output extension to .pug and check Process Automatically . The command should be
Mac / Linux
cp {{input}} {{output}}
Windows
copy {{input}} {{output}}
Once you've added the tool, set the output to "relative path" and set the output extension to pug. For each .pp file you may have to check process automatically as it doesn't always identify the new extension.
You will now be able to include the .pp file in your pattern's index file while including the .pug file which will give a compiled version of your component's html.
---
## Troubleshooting

3
public/assets/scaffolding-min.js vendored
View File

@ -3245,6 +3245,9 @@ function init() {
});
});
}
if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") {
document.querySelector(document.location.hash).dispatchEvent(click);
}
});
}

12
public/patterns/core/tabs/index.html
View File

@ -2,6 +2,13 @@
<html>
<head>
<title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
@ -170,6 +177,7 @@ const click = new MouseEvent('click', {
});
export function init(p = document, s = true) {
p.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
if (tabGroup.querySelector("[role=tablist]") === null) {
@ -222,6 +230,10 @@ export function init(p = document, s = true) {
})
});
}
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
document.querySelector(document.location.hash).dispatchEvent(click);
}
});
}
</pre>

5
src/pg/patterns/core/tabs/_tabs.js
View File

@ -10,6 +10,7 @@ const click = new MouseEvent('click', {
});
export function init(p = document, s = true) {
p.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
if (tabGroup.querySelector("[role=tablist]") === null) {
@ -62,5 +63,9 @@ export function init(p = document, s = true) {
})
});
}
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
document.querySelector(document.location.hash).dispatchEvent(click);
}
});
}