wingsuit-designsystem / wingsuit

Twig for Storybook
GNU General Public License v2.0
92 stars 16 forks source link

Allow custom path to icons for spritemaps #111

Closed iuscare closed 3 years ago

iuscare commented 3 years ago

Is your feature request related to a problem? Please describe. In the storybook preset a specific path to the icons for spritemap generation is expected, which follows the atomic design methodology. Currently the generation of the svgs.json fails, if there is no atoms path defined within the namespace.

Describe the solution you'd like It would be handy, if we can modify this part in case, we do not want to follow the methodology

Describe alternatives you've considered Up to now I can avoid the interruption by defining an additional atom path within the namespace, but this feels a little bit of hacky. It looks like this:

/**
 * Global namespaces
 */

const path = require('path');

const patterns = path.resolve(__dirname, 'patterns');

module.exports = {
  tokens: path.resolve(__dirname, 'tokens'),
  clientside: path.resolve(__dirname, 'clientside'),
  protons: path.resolve(patterns, '00-misc'),
  macros: path.resolve(patterns, '01-macros'),
  embeds: path.resolve(patterns, '02-embeds'),
  atoms: path.resolve(patterns, '03-components'),
  components: path.resolve(patterns, '03-components'),
  pages: path.resolve(patterns, '04-layouts'),
};
christianwiedemann commented 3 years ago

Hi Pascal,

I know that issue and we also had this problem with the workaround "atomic" namespace. The problem with the svg path is that we need to solve two issues before:

  1. How to configure presets. Internal and external presets.
  2. How to handle svg spritemaps more generic. Right now we can only handle one spritemap which is not enough from my point of view. It often make sense to group images in several spritemap. (For example a spritemap with country flags)

So my Ideas to 1. A preset has method defaultConfig which returns the defaultConfig. :) In your wingsuit.config.js you have a parameters entry where you can overwrite this. (A bit storybook is don't that with addons) So the wingsuit.config.js would look like:


...
parameters: {
   svg: {svgSourceFolder: 'path'}
}
...
For multiple spritemaps I will open another issue later. 
iuscare commented 3 years ago

That would be awesome. The file is the most sensible place for such configuration parameters

christianwiedemann commented 3 years ago

I update the svg preset. I also updated the svg preset https://wingsuit-designsystem.github.io/assets/svg/

christianwiedemann commented 3 years ago

Will close this for now. If you have any issues let me know.