Components
Brands
Play around with props, edit and copy code.
Brands
Use configuration to change brand and size.
Brands torn
Used by Svenska Spel Tur for Skrapspel products to combine two brands with a torn edge between.
Partners / Banks
Use configuration to change Bank and size.
Symbols
Use configuration to change Symbol and size.
Properties
Brand
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| className | string | 'brand brand-default' | Custom css class |
| alt | string | Alternative text for image | |
| bgColor | string | Rectangle and square background color | |
| brand | union | Which brand to show | |
| class | string | Custom css class | |
| emblem | bool | Show winner emblem | |
| outline | bool | Adds an outline to the emblem | |
| rectangle | bool | Show product color as background | |
| size | union | Set size of the brand | |
| square | bool | Show brand as a square |
BrandsTorned
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | Brand torned items | |
| className | string | Custom Class |
BrandsTornedItem
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| isTorned | bool | false | Set true to get a left torned item ( defaults to false) |
| bgColor | string | Any svs color i.e grey-100, keno-200 etc. | |
| children | node | Brand | |
| className | string | Custom Class |
Bank
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| className | string | 'bank bank-default' | Custom css class |
| alt | string | Alternative text for image | |
| class | string | Custom css class | |
| height | number | Specify height | |
| name | union | Which svg to show | |
| size | union | Set predefined size of the svg | |
| width | number | Specify width |
Symbols
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| className | string | 'symbols symbols-default' | Custom css class |
| alt | string | Alternative text for image | |
| class | string | Custom css class | |
| height | number | Specify height | |
| name | union | Which svg to show | |
| size | union | Set predefined size of the svg | |
| width | number | Specify width |
Accessibility
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.
Additional information regarding accessibility of this component below.
- Brands is an image with product name as alternative text.
- Symbol and Bank are images with image name as alternative text.
Add new brand
Brands is vectorized utilizing SVG's instead of massive spritesheets. Each logotype is created without emblem, i.e "vinnare" to increase the possibilities of adapting the logo to different needs.
First of you need to checkout trinidad-ui from Svenska Spels internal git repository.
Getting started developing trinidad-ui- Add your new brand to the source folder.
- type npm install then npm start in terminal
- Select Developer Tools -> Asset Generators -> Brands (your component)
- Wait for success message.
- run npm start again, select "Develop both trinidad / storybook".
- Confirm your changes
- Run npm start once more, select "New release".
- Commit and be happy!
Additional knowledge
You are now allowed to add a corresponding .json file next to your brand with the following schema:
JSON Schema
{
"aliases": "lotto onsdag, lotto-onsdag", // Use same brand with different names
"alt": "Lotto" // Alt text to the image element
}
Add new Bank or Symbol
Will take a nicely baked .svg file and compress and add checksum to it to prevent caching when replacing assets.
First of you need to checkout trinidad-ui from Svenska Spels internal git repository.
Getting started developing trinidad-ui- Add your new svg to the source folder.
- type npm install then npm start in terminal
- Select Developer Tools -> Asset Generators -> Generate SVG (your component)
- Wait for success message.
- run npm start again, select "Develop both trinidad / storybook".
- Confirm your changes
- Run npm start once more, select "New release".
- Commit and be happy!
