Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(sketch): update icon command with new metadata structure #5566

Merged
merged 5 commits into from
Mar 9, 2020
Merged

fix(sketch): update icon command with new metadata structure #5566

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3e9827f
chore: check-in work
joshblack Mar 4, 2020
fd490d8
Merge branch 'master' of github.com:carbon-design-system/carbon into …
joshblack Mar 5, 2020
f86dd20
fix(sketch): update icon command with new metadata structure
joshblack Mar 6, 2020
cd07ac2
Merge branch 'master' into fix/update-sketch-icon-command
joshblack Mar 6, 2020
3be39bb
Merge branch 'master' into fix/update-sketch-icon-command
Mar 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 16 additions & 39 deletions packages/sketch/src/commands/icons/generate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export function generate() {

for (const category of categories) {
const categoryText = new Text({
frame: new Rectangle(0, 0),
text: category.name,
style: {
fontFamily: 'IBM Plex Sans',
Expand All @@ -42,9 +41,7 @@ export function generate() {
let GROUP_Y_OFFSET = categoryText.frame.height + 32;

for (const subcategory of category.subcategories) {
const iconsGroupedByBase = getIconsGroupedByBase(subcategory.members);
const subcategoryText = new Text({
frame: new Rectangle(0, 0),
text: subcategory.name,
style: {
fontFamily: 'IBM Plex Sans',
Expand All @@ -65,26 +62,24 @@ export function generate() {
let ICON_Y_OFFSET = subcategoryText.frame.height + 8;
let COLUMN_COUNT = 0;

for (const icons of iconsGroupedByBase) {
for (const icon of icons) {
const symbol = symbols.find(symbol => {
const parts = symbol.name.split('/').map(string => string.trim());
const [_type, _category, _subcategory, name, size] = parts;
return name === icon && size === '32';
});
const instance = symbol.createNewInstance();
instance.frame.offset(ICON_X_OFFSET, ICON_Y_OFFSET);
for (const icon of subcategory.members) {
const symbol = symbols.find(symbol => {
const parts = symbol.name.split('/').map(string => string.trim());
const [_type, _category, _subcategory, name, size] = parts;
return name === icon && size === '32';
});
const instance = symbol.createNewInstance();
instance.frame.offset(ICON_X_OFFSET, ICON_Y_OFFSET);

layers.push(instance);
ICON_X_OFFSET = ICON_X_OFFSET + 32 + MARGIN;
COLUMN_COUNT = COLUMN_COUNT + 1;
layers.push(instance);
ICON_X_OFFSET = ICON_X_OFFSET + 32 + MARGIN;
COLUMN_COUNT = COLUMN_COUNT + 1;

// 8 column layout
if (COLUMN_COUNT > 7) {
ICON_X_OFFSET = 0;
COLUMN_COUNT = 0;
ICON_Y_OFFSET = ICON_Y_OFFSET + 32 + MARGIN;
}
// 8 column layout
if (COLUMN_COUNT > 7) {
ICON_X_OFFSET = 0;
COLUMN_COUNT = 0;
ICON_Y_OFFSET = ICON_Y_OFFSET + 32 + MARGIN;
}
}

Expand All @@ -104,21 +99,3 @@ export function generate() {
page.layers.push(...groups);
});
}

function getIconsGroupedByBase(members) {
return Object.values(
members.reduce((acc, member) => {
const [type] = member.split('--');
if (acc[type]) {
return {
...acc,
[type]: acc[type].concat(member),
};
}
return {
...acc,
[type]: [member],
};
}, {})
);
}
35 changes: 5 additions & 30 deletions packages/sketch/src/commands/icons/shared.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { syncSymbol } from '../../tools/symbols';

const meta = require('@carbon/icons/build-info.json');
const metadata = require('@carbon/icons/metadata.json');
const { icons } = metadata;

export function syncIconSymbols(
document,
Expand Down Expand Up @@ -107,17 +106,17 @@ export function syncIconSymbols(
},
};

const info = findIconByName(name);
const categories = info.categories;
const info = metadata.icons.find(icon => {
return icon.name === name;
});
let symbolName = name;

if (sizes.length !== 1) {
symbolName = `${name} / ${icon.size}`;
}

if (Array.isArray(categories) && categories.length > 0) {
const [category] = categories;
symbolName = `${category.name} / ${category.subcategory} / ${symbolName}`;
if (info.category && info.subcategory) {
symbolName = `${info.category} / ${info.subcategory} / ${symbolName}`;
}

symbolName = `icon / ${symbolName}`;
Expand Down Expand Up @@ -248,27 +247,3 @@ function createSVGLayer(svg) {

return svgLayer;
}

function findIconByName(name) {
const [basename, ...variants] = name.split('--');
const iconEntry = icons.find(icon => {
return icon.name === basename;
});

if (!iconEntry) {
console.log(`Unable to find the following icon by name ${name}`);
return iconEntry;
}

if (variants.length > 0) {
const icon = iconEntry.variants.find(variant => {
return variant.name === name;
});
return {
...iconEntry,
...icon,
};
}

return iconEntry;
}