Node 16 (This was build with 16.18.1)
/src/components
contains generic components that could be part of a design system/src/components-project
contains components that provide more restrictions and would likely be part of a specific project rather than a general systemstories
contains storybook files for component development & testing
npm i
to install dependenciesnpm run start
to see the appnpm run storybook
to see generic componentsnpm run lint
for lintingnpm run test
for tests (though they only test the button on PromoCard )
-
In an ideal world the card layout would change based on its own width, not the browser's width, but for the sake of time I kept it simple and just used media queries.
-
My spacing variables (using ems), in retrospect, are not appropriate for the project as it is currently structured, because it's not using dedicated title text components that prevent text size from affecting margin or padding that is added. It's just what I was most used to working with and I was too far in when I realized there were some problems.