canonical-web-and-design / vanilla-framework-react Goto Github PK

Currently, tests fail. If I run npm run test and then press a, I get:

 FAIL  src/components/App/App.test.js
  ● Test suite failed to run

    Cannot find module './App.css' from 'App.js'
      
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (src/components/App/App.js:5:76)

 FAIL  src/components/Button/Button.test.js
  ● Test suite failed to run

    Cannot find module './Button.css' from 'Button.js'
      
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (src/components/Button/Button.js:3:1)

 FAIL  src/components/Card/Card.test.js
  ● Test suite failed to run

    Cannot find module './Card.css' from 'Card.js'
      
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (src/components/Card/Card.js:3:1)

Test Suites: 3 failed, 3 total
Tests:       0 total
Snapshots:   0 total
Time:        1.384s
Ran all test suites.

Watch Usage: Press w to show more.

Subtypes:

• Pull Quote

https://reactjs.org/docs/react-api.html#reactpurecomponent

Most of vanillas patterns and components are fairly simple with predictable and repeatable renders so could benefit from PureComponents. If unsure stick with normal components.

Replicate issue

• Clone this repo
• Run npm start
• View http://localhost:3000
• See that buttons are styled but not the switch component

The version of Vanilla Framework being imported is 1.5.4 which includes the Switch component styling - as verified on Codepen

If you inspect the component, no styles seem to be applied to .p-switch

Any ideas @anthonydillon or @Lukewh?

For now, add base Table and Table sortable components. Table expandable and Table mobile card to come later.

Vanilla docs reference

This project has been published to NPM here...

https://www.npmjs.com/package/vanilla-framework-react

This is so that it can be added as a dep to another React project and individual components can then be added as needs be, but that ain't currently working, see:

https://codesandbox.io/s/qz43rrz259

At the moment, all the testing is done via Jest's snapshot comparison tool. This is okay for pure UI components, but it is not adequate for components with internal logic/state (e.g. accordion, table).

Subypes:

• Default
• Caution
• Positive
• Negative
• Information

Can't qyuite figure this out

1. Pull code
2. Run npm run lint
3. The following "fatal" error is thrown:

Why is this not valid? 🤔

In Storybook, components show against the sidebar with no padding.
Matrix stands out as one which has this problem.

One option to tackle this is to import a stylesheet into .storybook/config.js and add padding. This can be done simply by adding `import './storybook.scss'.
I believe the layout of the page can also be tweaked in config.

Screenshot

Vanilla docs reference

To help with packaging components as individual pieces have you considered compiling separately?

There's been talk of making the patterns mix-and-match so why not do the same with the React components.

A component file structure could be like:

components/ 
    Button/
        Button.js
        Button.scss
        Button.css

• Button.js would import './Button.css'.
• Button.css would contain the compiled code for Button.scss.
• Btutton.scss would be @import 'vanilla-framework/scss/_patterns_buttons.scss'.

It seems convoluted, and maybe a better way would be to automate the compilation to each folder (removing the need for Button.scss). Or maybe an even better way would be not to do this at all.

Just an idea, and open to discussion/ being shot down.

• Simple list
• List with icon
• List with dividers
• List with icons and dividers
• Inline list
• Middot-seperated inline list
• Split list

Buttons are looking good. Have you thought of creating a single button component with a prop of type [brand, positive, negative]?

This would make the component more DRY.

Subtypes:

• default
• circular
• large

Vanilla docs reference

I wouldn't expect AccordionItem to manage it's own state as implementing a true single-item-open accordion requires the state of all items to be known.

I'd expect Accordion to pass it's own methods for manipulating it's children to the AccordionItem's for onclick handlers etc. This would make the Accordion component a more generic wrapper.

When I'm back at work next week I'll better explain what I mean in comment.

Subtypes:

• External link
• Strong link
• Soft link
• Inverted link
• Back to top link

Subtypes:

• Stepped list
• Stepped list: detailed

Currently the Accordion.js file is hard-coded with AccordionItems and corresponding text. It should be customisable.

Subtypes:

• Border
• Shadow

Subtypes:

• Strip accent
• Strip image
• Strip is-bordered
• Strip is-deep
• Strip is-shallow

Functional component names get minified with other javascript code when building for production, so they're showing up as Unknown on https://vanilla-framework.github.io/vanilla-framework-react/. It would also help for debugging when using React Developer Tools on production builds.

Docs here: https://percy.io/docs/clients/javascript/react