UI Components ICGC Package

version 0.0.6

This package includes two reusable UI components: LogoIcgc and Toggle. These components are designed to be easily integrated into projects using Svelte. Below are the details of each component and how to use them.

Installation

npm install @icgcat/ui

Included Components

1. LogoIcgc

This component displays the logo of the Institut Cartogràfic i Geològic de Catalunya (ICGC). It allows customization of the logo type, size, and associated link.

Props

• width (optional): Width of the image (in pixels). Default value: 125.
• title (optional): Alt text and title for the logo. Default value: "Institut Cartogràfic i Geològic de Catalunya".
• type (optional): Type of logo. Available values are:
  • "color" (default): Colored logo.
  • "white": White logo.
• href (optional): URL to redirect the user when the logo is clicked. Default value: "https://www.icgc.cat".
• src (optional): Custom URL for the logo. If set, it will override type.

Usage Example

<script>
    import { LogoIcgc } from '@icgcat/ui';
</script>

<LogoIcgc width={150} type="white" href="https://example.com" />

2. Toggle

This component is a visually appealing toggle switch with customizable styling. It allows capturing the on/off state and includes a dynamic color option.

Props

• color (optional): Color of the toggle when active. Default value: "red".
• onChange (optional): Callback function triggered when the state changes. Receives a boolean parameter (true or false).

Usage Example

<script>
    import { Toggle } from '@icgcat/ui';

    function handleToggle(state) {
        console.log('Toggle state:', state);
    }
</script>

<Toggle color="blue" onChange={handleToggle} />

Styling

Standard styles are included in the components and applied automatically. You can customize the visual behavior of the Toggle by modifying the --dynamic-color property in the CSS.

Contributions

Contributions are welcome! If you find any bugs or have suggestions to improve this package, please open an issue or submit a pull request to the project repository.

License

This project is licensed under the MIT License.