Skip to content

Commit 3a24edf

Browse files
nmergetnmerget
authored
Feat spacing (#108)
* feat: add spacing and sizing
1 parent 7146867 commit 3a24edf

22 files changed

+934
-131
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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"stylelint-config-prettier"
55
],
66
"rules": {
7-
"max-nesting-depth": null
7+
"max-nesting-depth": null,
8+
"order/order": null
89
}
910
}

‎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.

‎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;

‎scripts/zeplin-styleguide.js

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,6 @@ const shortenTypographyRecursive = (data) => {
107107
}
108108

109109
result[topLvlKey] = {
110-
// TODO: Fix values after update in zeplin
111110
lineHeight: {
112111
value:
113112
Number(foundValue.lineHeight) /
@@ -137,7 +136,6 @@ const shortenTypographyRecursive = (data) => {
137136

138137
const convertTextStyles = (data) => {
139138
const keys = Object.keys(data.textStyles);
140-
141139
const newTextStyles = {};
142140
for (const key of keys.filter((key) => {
143141
return (
@@ -162,35 +160,50 @@ const convertTextStyles = (data) => {
162160
};
163161

164162
const convertSpacings = (data) => {
165-
const keys = Object.keys(data.spacing);
166-
const newSpacings = {};
163+
const keys = Object.keys(data.spacing).filter(
164+
(key) => !key.includes('-base')
165+
);
166+
const spacings = {};
167+
const sizes = {};
167168
for (const key of keys) {
168169
const spacing = data.spacing[key];
169-
const containsDot = key.split('-').length === 3;
170-
let cKey = containsDot ? key.replace('-5', '.5') : key;
171-
cKey = cKey.replace('spacing-', '');
172-
newSpacings[cKey] = {
173-
value: `${spacing.value}px`
174-
};
170+
if (key?.includes('sizing')) {
171+
sizes[key.replace('sizing-', '')] = {
172+
value: `${spacing.value}`,
173+
attributes: {
174+
category: 'dynamic-size'
175+
}
176+
};
177+
} else {
178+
spacings[key.replace('spacing-', '')] = {
179+
value: `${spacing.value}`,
180+
attributes: {
181+
category: 'dynamic-size'
182+
}
183+
};
184+
}
175185
}
176186

177-
data.spacing = newSpacings;
187+
data.sizing = mergeData(sizes);
188+
data.spacing = mergeData(spacings);
178189
};
179190

180191
(async () => {
181192
try {
182193
const { data } = await zeplin.designTokens.getStyleguideDesignTokens(
183194
'63037ab49bdcb913c9228718'
184195
);
196+
185197
convertColors(data);
186198
convertTextStyles(data);
187199
convertSpacings(data);
188200

189201
FS.writeFileSync(
190202
'./tokens/zeplin.json',
191203
JSON.stringify({
192-
typography: data.textStyles,
193204
spacing: data.spacing,
205+
sizing: data.sizing,
206+
typography: data.textStyles,
194207
colors: data.colors
195208
})
196209
);

‎scss/_db-ui.scss

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,48 @@
1+
@import "variables";
2+
@import "font-faces";
3+
@import "typography-placeholder";
4+
@import "scaling-placeholder";
5+
6+
:root {
7+
@extend %db-scaling-normal;
8+
9+
$db-sizing-xs: var(--db-sizing-xs);
10+
$db-sizing-sm: var(--db-sizing-sm);
11+
$db-sizing-md: var(--db-sizing-md);
12+
$db-sizing-lg: var(--db-sizing-lg);
13+
14+
$db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);
15+
$db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);
16+
$db-spacing-fixed-xs: var(--db-db-spacing-fixed-xs);
17+
$db-spacing-fixed-sm: var(--db-db-spacing-fixed-sm);
18+
$db-spacing-fixed-md: var(--db-spacing-fixed-md);
19+
$db-spacing-fixed-lg: var(--db-spacing-fixed-lg);
20+
$db-spacing-fixed-xl: var(--db-spacing-fixed-xl);
21+
22+
$db-spacing-responsive-xs: var(--db-spacing-responsive-xs);
23+
$db-spacing-responsive-sm: var(--db-spacing-responsive-sm);
24+
$db-spacing-responsive-md: var(--db-spacing-responsive-md);
25+
$db-spacing-responsive-lg: var(--db-spacing-responsive-lg);
26+
$db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
27+
28+
font-family: $db-font-family-sans;
29+
30+
h1,
31+
h2,
32+
h3,
33+
h4,
34+
h5,
35+
h6 {
36+
font-family: $db-font-family-head;
37+
}
38+
}
39+
140
@mixin styles($styles...) {
241
@for $i from 0 to length($styles) {
3-
%db-ui-#{nth($styles, $i + 1)} {
42+
%db-ui-#{nth($styles, $i + 1)},
43+
.db-ui-#{nth($styles, $i + 1)} {
44+
@extend %db-scaling-#{nth($styles, $i + 1)};
45+
446
@extend %db-#{nth($styles, $i + 1)}-body-md;
547

648
small {

‎source/_patterns/sizings/_examples.demonstration.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DO-NOT-COPY-THIS-CLASS-example-spacing {
2+
height: 8px;
3+
background-color: $db-colors-primary-bg-light-enabled;
4+
}

0 commit comments

Comments
 (0)