Skip to content

Commit 65e6fb0

Browse files
nmergetmfranzke
nmerget
and
mfranzke
authored
Feat typo scale (#85)
* feat: add _db.ui.scss * feat: add spacing and sizing Co-authored-by: Maximilian Franzke <[email protected]>
1 parent 88ba1c4 commit 65e6fb0

28 files changed

+2843
-1622
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
**/build
22
**/public
33
**/out
4+
**/helpers

‎.stylelintrc.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
{
2-
"extends": ["stylelint-config-sass-guidelines", "stylelint-config-prettier"]
2+
"extends": [
3+
"stylelint-config-sass-guidelines",
4+
"stylelint-config-prettier"
5+
],
6+
"rules": {
7+
"max-nesting-depth": null,
8+
"order/order": null
9+
}
310
}

‎helpers/context-sort.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const sort = (arr) => {
2+
return arr.sort((a, b) => {
3+
const numberA = Number(a.key);
4+
const numberB = Number(b.key);
5+
if (numberA < numberB) {
6+
return -1;
7+
}
8+
9+
if (numberA > numberB) {
10+
return 1;
11+
}
12+
13+
return 0;
14+
});
15+
};
16+
17+
const getValueRecursive = (initData, results, fullKeyString) => {
18+
if (initData instanceof Object) {
19+
try {
20+
const dataKeys = Object.keys(initData);
21+
if (dataKeys.some((sKey) => sKey.includes('value'))) {
22+
results.push({ key: fullKeyString, value: initData['value'] });
23+
} else {
24+
for (const topLvlKey of dataKeys) {
25+
getValueRecursive(
26+
initData[topLvlKey],
27+
results,
28+
`${fullKeyString}-${topLvlKey}`
29+
);
30+
}
31+
}
32+
} catch (error) {
33+
console.error(error);
34+
}
35+
}
36+
37+
return results;
38+
};
39+
40+
module.exports = (context) => {
41+
if (!context.spacing || !context.sizing) {
42+
return undefined;
43+
}
44+
let spacings = getValueRecursive(context.spacing, [], '').map(
45+
(spacing) => ({ ...spacing, key: `db-spacing${spacing.key}` })
46+
);
47+
let sizings = getValueRecursive(context.sizing, [], '').map((sizing) => ({
48+
...sizing,
49+
key: `db-sizing${sizing.key}`
50+
}));
51+
52+
spacings = sort(spacings);
53+
sizings = sort(sizings);
54+
return { spacings, sizings };
55+
};

‎helpers/spacing-examples.js‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
11
module.exports = function (Handlebars) {
2-
Handlebars.registerHelper('spacing-examples', function (context) {
3-
const spacingSort = require('./spacing-sort');
4-
const spacings = spacingSort(context);
5-
const result = spacings
6-
.map(
7-
(spacing) =>
8-
`
9-
<div>
2+
Handlebars.registerHelper(
3+
'spacing-examples',
4+
function (context, contextObjName, tableHeader, filterKey) {
5+
const contextSort = require('./context-sort');
6+
const cSort = contextSort(context);
7+
8+
if (!cSort) {
9+
return 'Error';
10+
}
11+
12+
const result = `
13+
<div style="display: flex; gap:8px; flex-direction: column">
14+
<strong>${tableHeader}</strong>
15+
${cSort[contextObjName]
16+
.filter((s) => s.key.includes(filterKey))
17+
.map(
18+
(spacing) =>
19+
`<div>
1020
<span>spacing-${spacing.key}:</span>
11-
<div style="width: ${spacing.value};" class="DO-NOT-COPY-THIS-CLASS-example-spacing"></div>
12-
</div>
13-
`
14-
)
15-
.join('</br>');
16-
return new Handlebars.SafeString(result);
17-
});
21+
<div style="width: ${
22+
Number(spacing.value) / 16
23+
}rem;" class="DO-NOT-COPY-THIS-CLASS-example-spacing"></div>
24+
</div>`
25+
)
26+
.join('')}</div>`;
27+
return new Handlebars.SafeString(result);
28+
}
29+
);
1830
};

‎helpers/spacing-into-table.js‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,33 @@
11
module.exports = function (Handlebars) {
2-
Handlebars.registerHelper('spacing-into-table', function (context) {
3-
const spacingSort = require('./spacing-sort');
4-
const spacings = spacingSort(context);
2+
Handlebars.registerHelper(
3+
'spacing-into-table',
4+
function (context, contextObjName, tableHeader, filterKey) {
5+
const contextSort = require('./context-sort');
6+
const cSort = contextSort(context);
57

6-
const tableObject = {
7-
caption: 'Spacing overview',
8-
headers: ['Token', 'Value', 'Ratio'],
9-
rows: spacings.map((spacing) => ({
10-
Token: [null, `spacing-${spacing.key}`],
11-
Value: [null, spacing.value],
12-
Ratio: [null, spacing.key]
13-
}))
14-
};
8+
if (!cSort) {
9+
return 'Error';
10+
}
1511

16-
const tableStringify = JSON.stringify(tableObject).replace(
17-
/"/g,
18-
'&quot;'
19-
);
20-
const table = `<db-table border="around" stripes="zebra" tabledata="${tableStringify}"></db-table>`;
12+
const tableObject = {
13+
caption: tableHeader,
14+
headers: ['Token', 'Value', 'Ratio'],
15+
rows: cSort[contextObjName]
16+
.filter((s) => s.key.includes(filterKey))
17+
.map((spacing) => ({
18+
Token: [null, `${spacing.key}`],
19+
Value: [null, `${Number(spacing.value) / 16} rem`],
20+
Ratio: [null, Number(spacing.value) / 8]
21+
}))
22+
};
2123

22-
return new Handlebars.SafeString(table);
23-
});
24+
const tableStringify = JSON.stringify(tableObject).replace(
25+
/"/g,
26+
'&quot;'
27+
);
28+
const table = `<db-table border="around" stripes="zebra" tabledata="${tableStringify}"></db-table>`;
29+
30+
return new Handlebars.SafeString(table);
31+
}
32+
);
2433
};

‎helpers/spacing-sort.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@
1313
"scripts": {
1414
"prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
1515
"copy:assets": "cpr assets build/assets -d",
16-
"copy:font-faces": "cpr scss build/scss -o",
17-
"build:style-dictionary": "node style-dictionary.js && npm run copy:font-faces",
18-
"build:css": "sass source/css/db-ui-base.scss:out/css/db-ui-base.css --style=compressed --embed-sources --load-path=node_modules",
16+
"copy:scss": "cpr scss build/scss -o",
17+
"build:style-dictionary": "node style-dictionary.js && npm run copy:scss",
18+
"build:patternlab-css": "sass source/css/db-ui-base.scss:out/css/db-ui-base.css --style=compressed --embed-sources --load-path=node_modules",
1919
"build:tailwind": "node scripts/tailwind-config-generator.mjs false true && cpr scripts/tailwind-config-generator.mjs build/tailwind/tailwind-config-generator.mjs -o",
20+
"build-test:css": "sass build/scss/_db-ui.scss:build/css/db-ui.css --load-path=node_modules",
2021
"build": "npm-run-all copy:assets build:* pl:build",
2122
"clean": "rm -rf build",
2223
"lint": "npm-run-all -p lint:*",
@@ -26,7 +27,7 @@
2627
"start": "npm-run-all build:style-dictionary --parallel pl:serve watch:tokens watch:scss",
2728
"test": "exit 0",
2829
"watch:tokens": "nodemon --watch tokens/ -e json -x \"npm run build:style-dictionary\"",
29-
"watch:scss": "nodemon --watch source/_patterns/ -e scss -x \"npm run build:css\"",
30+
"watch:scss": "nodemon --watch source/_patterns/ -e scss -x \"npm run build:patternlab-css\"",
3031
"pl:build": "patternlab build --config ./patternlab-config.json",
3132
"pl:help": "patternlab --help",
3233
"pl:install": "patternlab install --config ./patternlab-config.json",

‎scripts/scss-scaling-generator.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const fileHeader =
2+
'\n' +
3+
'// Do not edit directly\n' +
4+
'// Generated on ' +
5+
new Date().toString() +
6+
'\n';
7+
8+
const generateSpacings = (utility) => {
9+
let allClasses = fileHeader;
10+
11+
const scaleTypeKey = ['normal', 'functional', 'expressive'];
12+
13+
for (const scale of scaleTypeKey) {
14+
allClasses += `
15+
${utility ? '.' : '%'}db-scaling-${scale}{
16+
\t--db-sizing-xs: #{$db-sizing-${scale}-xs};
17+
\t--db-sizing-sm: #{$db-sizing-${scale}-s};
18+
\t--db-sizing-md: #{$db-sizing-${scale}-m};
19+
\t--db-sizing-lg: #{$db-sizing-${scale}-l};
20+
21+
\t--db-spacing-fixed-3xs: #{$db-spacing-fixed-${scale}-3xs};
22+
\t--db-spacing-fixed-2xs: #{$db-spacing-fixed-${scale}-2xs};
23+
\t--db-spacing-fixed-xs: #{$db-spacing-fixed-${scale}-xs};
24+
\t--db-spacing-fixed-sm: #{$db-spacing-fixed-${scale}-s};
25+
\t--db-spacing-fixed-md: #{$db-spacing-fixed-${scale}-m};
26+
\t--db-spacing-fixed-lg: #{$db-spacing-fixed-${scale}-l};
27+
\t--db-spacing-fixed-xl: #{$db-spacing-fixed-${scale}-xl};
28+
29+
\t--db-spacing-responsive-xs: #{$db-spacing-responsive-${scale}-mobile-xs};
30+
\t--db-spacing-responsive-sm: #{$db-spacing-responsive-${scale}-mobile-s};
31+
\t--db-spacing-responsive-md: #{$db-spacing-responsive-${scale}-mobile-m};
32+
\t--db-spacing-responsive-lg: #{$db-spacing-responsive-${scale}-mobile-l};
33+
\t--db-spacing-responsive-xl: #{$db-spacing-responsive-${scale}-mobile-xl};
34+
35+
\t@media only screen and (min-width: $db-screens-md) {
36+
\t\t--db-spacing-responsive-xs: #{$db-spacing-responsive-${scale}-tablet-xs};
37+
\t\t--db-spacing-responsive-sm: #{$db-spacing-responsive-${scale}-tablet-s};
38+
\t\t--db-spacing-responsive-md: #{$db-spacing-responsive-${scale}-tablet-m};
39+
\t\t--db-spacing-responsive-lg: #{$db-spacing-responsive-${scale}-tablet-l};
40+
\t\t--db-spacing-responsive-xl: #{$db-spacing-responsive-${scale}-tablet-xl};
41+
\t}
42+
43+
\t@media only screen and (min-width: $db-screens-lg) {
44+
\t\t--db-spacing-responsive-xs: #{$db-spacing-responsive-${scale}-desktop-xs};
45+
\t\t--db-spacing-responsive-sm: #{$db-spacing-responsive-${scale}-desktop-s};
46+
\t\t--db-spacing-responsive-md: #{$db-spacing-responsive-${scale}-desktop-m};
47+
\t\t--db-spacing-responsive-lg: #{$db-spacing-responsive-${scale}-desktop-l};
48+
\t\t--db-spacing-responsive-xl: #{$db-spacing-responsive-${scale}-desktop-xl};
49+
\t}
50+
}
51+
`;
52+
}
53+
54+
return allClasses;
55+
};
56+
57+
module.exports = generateSpacings;

0 commit comments

Comments
 (0)