open-index/open-npm huggingface dataset:
npm package: @perplex-digital/athlon-button
Description: ## Installation
Latest version: 0.1.3

# athlon-button

## Installation

### ES imports

```zsh
npm i @perplex-web-components/athlon-button
```

Import the registration of `<athlon-button>` via:

```javascript
import '@perplex-digital/athlon-button';
```

## Usage

### Demo
[view demo HTML/JS](https://stackblitz.com/edit/vitejs-vite-wj9voo?file=index.html,main.js)

[view demo Angular](https://stackblitz.com/edit/angular-lqupfb?file=src/app/app.component.html)

### Primary button
```html
<athlon-button>
    Basic button
</athlon-button>
```

### Examples
```html
<div
  style="display: flex; flex-direction: column; gap: 10px; margin-inline: 20px;"
>
  <h2>Default</h2>
  <athlon-button> Default button </athlon-button>

  <h2>Looks</h2>
  <athlon-button look="primary"> Primary button </athlon-button>
  <athlon-button look="secondary"> Secondary button </athlon-button>
  <athlon-button look="tertiary"> Tertiary button </athlon-button>
  <athlon-button look="conversion"> Conversion button </athlon-button>
  <athlon-button look="destructive"> Destructive button </athlon-button>
  <athlon-button look="light"> Light button </athlon-button>

  <h2>States</h2>
  <h3>Anchor with href</h3>
  <athlon-button look="primary" href="/testurl" target="_blank">
    Anchor button
  </athlon-button>

  <h3>Disabled</h3>
  <athlon-button look="secondary" disabled href="/testurl">
    Disabled button
  </athlon-button>
</div>
```
npm package: @perplex-digital/athlon-cookie-settings
Description: ## Installation
Latest version: 2.0.0

# athlon-cookie-settings

## Installation

### ES imports

```zsh
npm i @perplex-digital/athlon-cookie-settings
```

Import the registration of `<athlon-cookie-settings>` via:

```javascript
import '@perplex-digital/athlon-cookie-settings';
```

## Usage
### Arguments
The component takes two arguments: umbraconodeid and culture
Option | Type | Default | Description
------ | ---- | ------- | ----
umbraconodeid | string | null | Umbraco node id (GUID)
culture | string | null | Umbraco culture
<br>
```html
<athlon-cookie-settings umbraconodeid="xxxxxxxxxx" culture="en"></athlon-cookie-settings>
```

## Interaction with cookies
There are several objects/methods exported from package [@perplex-digital/athlon-cookie-bar](https://www.npmjs.com/package/@perplex-digital/athlon-cookie-bar) which you can import anytime and use to interact with the cookies or the choices that the user made.<br>
See [documentation](https://www.npmjs.com/package/@perplex-digital/athlon-cookie-bar).
<br>
<br>

## Styling

Styling can be overriden by using CSS custom properties. For example you can do this in you CSS:

```css
athlon-cookie-settings {
  --plx-cookie-bar-bg: #ececec;
  --plx-cookie-bar-max-width: 2200px;
  --plx-cookie-bar-layout-padding: 4rem;
}

@media screen and (min-width: 48em) {
  athlon-cookie-settings {
    --plx-cookie-bar-layout-padding: 8rem;
  }
}
```

### REM values

The main Athlon sites have their root(html) font-size scaled down to make 1rem equal to 10px. This cookie component uses mainly REM-values. If you would like to change that to pixels, we would advise you to override the following CSS custom properties.

```css
athlon-cookie-settings {
  /* Button */
  --plx-button-font-size: 1.6rem;
  --plx-button-icon-size: 1.8rem;
  --plx-button-padding: 1.7rem 3rem;
  --plx-button-min-width: 20rem;

  /* Cookie bar */
  --plx-cookie-bar-layout-padding: 4rem;

  /* Cookie settings */
  --plx-overlay-margin: 8rem auto 6rem;
  --plx-overlay-close-spacing: 2rem;
  --plx-overlay-close-size: 3rem;
  --plx-overlay-close-icon-size: 2rem;
  --plx-cookie-settings-panel-width: 64rem;
  --plx-cookie-settings-panel-padding: 8rem 4rem 4rem;
  --plx-cookie-settings-tab-font-size: 1.8rem;
  --plx-cookie-settings-tab-font-weight: 600;
  --plx-cookie-settings-tab-padding: 1.4rem 0;
  --plx-cookie-settings-category-font-size: 2.4rem;
  --plx-cookie-settings-font-size: 18px;
  --plx-cookie-settings-supplier-gap: 0.5rem 0;
  --plx-cookie-settings-button-icon-size: 1.8rem;
  --plx-cookie-form-toggle-height: 3rem;
  --plx-cookie-form-toggle-border-width: 1px;
}
@media screen and (min-width: 80em) {
  :host {
    --plx-cookie-bar-layout-padding: 4rem 8rem;
    --plx-cookie-settings-panel-padding: 8rem;
  }
}
@media screen and (min-width: 120em) {
  :host {
    --plx-cookie-bar-layout-padding: 4rem 16rem;
  }
}
```