@defense-unicorns/website-commons

Defense Unicorns Common Svelte Components

To use the components, you'll need a Svelte application that uses tailwinds.

npm i @defense-unicorns/website-commons

After installing, update your tailwind.config.js to include the presets and reference the library in the content section. this will ensure the CSS is generated correctly.

import presets from '@defense-unicorns/website-commons/tw-presets'

/** @type {import('tailwindcss').Config} */
export default {
 presets: [presets],
     content: [
  './src/**/*.{html,js,ts,svelte}',
  './node_modules/@defense-unicorns/website-commons/**/*.{html,js,ts,svelte}'
 ],
    ...
}

Then, simply import the components.

<script>
 import { Button } from '@defense-unicorns/website-commons'
</script>

<Button external text="VIEW ON GITHUB" link={links.github.url} color="green" />

tests

npm test

Tests are written in ViTest and as Storybook tests.

• Configuring Storybook tests
• See Working with the Canvas to learn more about using the canvasElement to query the DOM