sprinkles-library v0.0.5

Komponent-bibliotek

Table of Contents

1. How to use
2. Creating a new component
3. Setting up the new component
4. How to run the components

How to use

Install the packages with yarn, npm will not work correctly

1. yarn install
2. run the validation script //under construction
3. start dev servers

$yarn install       // use yarn over npm for compatability issues
$yarn docs:dev      // docs:dev starts the vitepress documentation page
yarn cypress:dev    // cypress:dev starts the cypress testing view

Creating a new component

this project is following the Atomic Design pattern. The Atomic design pattern consists of:

Atoms

Atoms are the smallest pieces of the components. when you cannot break down a component any more then it is probably mostly suited for being an Atom.

Molecules

Molecules are made of groups of Atoms built together to create something more complex. They are still simple but can be made up by Atoms.

Organisms

Organisms are more complex components made up by both Atoms and Molecules. They are suited for covering a distinct part or feature of a page.

Templates

Templates are complete pages ready for custom data. They can act as a page that just take in data to display the appropriate information and structure it the correct way.

Pages

Pages are fully complete with all data needed and is the final product that will be shown and does not need anything to function completely.

Setting up the new component

Each component should have:

• A vue file for the template

<template>
  <div class="__TEMPLATE__">

  </div>
</template>

<script>
import '@/config.css';

export default {
  name: "__TEMPLATE__"
}
</script>

<style scoped>
@import "./__TEMPLATE__.css";

</style>

• A CSS file for custom css

• A cy.js file for the cypress component testing

import {mount} from 'cypress/vue'
import __TEMPLATE__ from './__TEMPLATE__.vue'

describe('__TEMPLATE__', () => {
    it('', () => {
        mount(__TEMPLATE__)
        cy.get('.__TEMPLATE__')
    })
})

• A documentation file for documenting the component

# __TEMPLATE__

## How to use

this is how you use it

## When and where to use

this is where and when to use it

To more easily create a new component, make a copy of the template-folder that's inside of the components folder.

( This step should be autogenerated later ) \ The documentation file should also be placed inside the root's docs/components/ folder

How to run the components

To run your components during development, use the cypress component test tool. it will test it both visually and functionally.