Skip to content

feat: style the component using css variables #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: style the component using css variables #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ window.TS_BANNERS = {
<body>
<topsort-banner
topsort-api-key="<your api key>"
width="600"
height="400"
slot-id="<your slot id>"
></topsort-banner>
</body>
Expand All @@ -45,8 +43,6 @@ window.TS_BANNERS = {
| Name | Type | Description |
|-----------------|-----------------|--------------------------------------|
| topsort-api-key | String | Your Topsort API key |
| width | Number | Banner width |
| height | Number | Banner height |
| slot-id | String | The slot ID for this banner |
| category-id | Optional String | The category ID of the current page |
| search-query | Optional String | The search query of the current page |
Expand All @@ -71,6 +67,18 @@ window.TS_BANNERS = {
| `asset` | `[{ url: string }]` | An array of url linking to the assets of the banner. |


# Styling

The component will inherit all styles from its parent elements, but you add
custom styling to the banner itself.
To add custom styling to the banner, you can use the following CSS variables:

- `--ts-banner-width`: The width of the banner. Defaults to `100%`.
- `--ts-banner-height`: The height of the banner. Defaults to `100%`.
- `--ts-banner-padding`: The padding of the banner. Defaults to `0`.
- `--ts-banner-margin`: The margin of the banner. Defaults to `0`.


# Running the example

You can play around with the provided index.html file. To run it, you'll need to
Expand All @@ -79,8 +87,8 @@ install the dependencies and start a local server.
```bash
git clone https://github.com/Topsort/banners.js.git
cd banners.js
npm install
npm run dev
pnpm install
pnpm run dev
```

Remember to also replace the `topsort-api-key` and `slot-id` attributes with your
Expand Down
8 changes: 7 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,15 @@
justify-content: center;
padding: 20px;
}
topsort-banner {
--ts-banner-width: 50%;
--ts-banner-height: 50%;
--ts-banner-padding: 10px;
--ts-banner-margin: 10px;
}
</style>
<body>
<div style="outline 1px solid black">
<div style="outline: 2px solid black">
<topsort-banner
topsort-api-key="<your-topsort-api-key>"
slot-id="<your-slot-id>"
Expand Down
26 changes: 13 additions & 13 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,6 @@ export class TopsortBanner extends LitElement {
@property({ attribute: "topsort-api-key", type: String })
readonly apiKey?: string;

@property({ type: Number })
readonly width = 0;

@property({ type: Number })
readonly height = 0;

@property({ attribute: "slot-id", type: String })
readonly slotId?: string;

Expand Down Expand Up @@ -216,21 +210,27 @@ export class TopsortBanner extends LitElement {
this.runAuction();
}

static styles = css`
:host img {
width: var(--ts-banner-width, 100%);
height: var(--ts-banner-height, 100%);
}
:host {
display: block;
padding: var(--ts-banner-padding, 0);
margin: var(--ts-banner-margin, 0);
}
`;

protected render() {
if (!this.apiKey || !this.slotId) {
return this.getErrorElement(new TopsortConfigurationError(this.apiKey, this.slotId));
}
switch (this.state.status) {
case "ready": {
const src = this.state.asset[0].url;
const style = css`
img {
width: ${this.width}px;
height: ${this.height}px;
}
`;
return html`
<div style="${style}" data-ts-clickable data-ts-resolved-bid-id=${this.state.resolvedBidId}>
<div data-ts-clickable data-ts-resolved-bid-id=${this.state.resolvedBidId}>
<a href="${this.state.href}">
<img src="${src}" alt="Topsort banner"></img>
</a>
Expand Down