Skip to content
Snippets Groups Projects
Commit 8f446a59 authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3357698: Improve the Badge atom component

parent 4669b838
No related branches found
No related tags found
No related merge requests found
# Badge
## Bootstrap Documentation
https://getbootstrap.com/docs/5.2/components/badge/
## Full List Utility Classes
https://github.com/twbs/bootstrap/blob/v5.2.3/dist/css/bootstrap.css#L4630
### CSS Variables
https://getbootstrap.com/docs/5.2/components/badge/#css
### SASS Variables
https://getbootstrap.com/docs/5.2/components/badge/#sass-variables
## Available Properties:
#### color:
Background and Text Color. Set a `background-color` with contrasting
foreground color with our `.text-bg-{color}` helpers. Previously it
was required to manually pair your choice of `.text-{color}`
and `.bg-{color}` utilities for styling, which you still may use if you prefer.
Recommended to use: `text-bg-primary` | `text-bg-secondary` | `text-bg-success` |
`text-bg-info` | `text-bg-warning` | `text-bg-danger` |
`text-bg-light` | `text-bg-dark`
Default value: `text-bg-secondary`
#### html_tag:
The HTML tag to use for the bade.
Recommended to use: `span` | `div` | `a`
Default value: `text-bg-secondary`
#### content:
The content of the badge.
#### url:
The HTML tag will automatically be set to a if an anchor is added to the URL.
#### utility_classes:
This property contains an array of utility classes that can be used to
add extra Bootstrap utility classes or custom classes to this component.
### Examples
**Example #1:** New post badge.
```
{% include 'varbase_components:badge' with {
html_tag: 'a',
color: 'text-bg-primary',
url: forum.new_url,
content: forum.new_text
} %}
```
**Example #2:** Pill badges with success content
```
{% include 'varbase_components:badge' with {
html_tag: 'span',
color: 'text-bg-success'
content: 'Success',
utility_classes: ['rounded-pill']
} %}
```
......@@ -8,27 +8,14 @@ props:
required:
- content
properties:
color:
type: string
title: Color
description: Bootstrap text and background class.
enum:
- text-bg-primary
- text-bg-secondary
- text-bg-success
- text-bg-info
- text-bg-warning
- text-bg-danger
- text-bg-light
- text-bg-dark
tag:
html_tag:
type: string
title: Tag
description: HTML tag for Badge.
title: The HTML tag to use for the bade. Defaults to span.
default: span
enum:
- span
- a
- div
- a
content:
type: string
title: Content
......@@ -37,9 +24,27 @@ props:
type: string
title: URL Link
description: URL link for Badge when the HTML tag is an anchor link.
color:
type: string
title: Background and Text Color
description: Set a background-color with contrasting foreground color with our .text-bg-{color} helpers. Previously it was required to manually pair your choice of .text-{color} and .bg-{color} utilities for styling, which you still may use if you prefer.
default: text-bg-secondary
enum:
- text-bg-primary
- text-bg-secondary
- text-bg-success
- text-bg-info
- text-bg-warning
- text-bg-danger
- text-bg-light
- text-bg-dark
utility_classes:
type: array
title: Utility Classes
description: An array of utility classes. Use this property to add extra Bootstrap utility classes or your custom class over to this to this component.
attributes:
type: Drupal\Core\Template\Attribute
name: Attributes
slots:
content:
title: content
\ No newline at end of file
title: Content
\ No newline at end of file
......@@ -3,12 +3,26 @@
* @file
* Template for a Badge component.
*
* Available config:
* - color: text-bg-primary | text-bg-secondary | text-bg-success | text-bg-info | text-bg-warning | text-bg-danger | text-bg-light | text-bg-dark
* - tag: The HTML tag to use for the bade. Defaults to span.
* Bootstrap Documentation
* https://getbootstrap.com/docs/5.2/components/badge/
*
* Full List Utility Classes
* https://github.com/twbs/bootstrap/blob/v5.2.3/dist/css/bootstrap.css#L4630
*
* Available Properties:
* - color: Background and Text Color.Set a background-color with contrasting
* foreground color with our .text-bg-{color} helpers. Previously it
* was required to manually pair your choice of .text-{color}
* and .bg-{color} utilities for styling,
* which you still may use if you prefer.
* (text-bg-primary | text-bg-secondary | text-bg-success | text-bg-info |
* text-bg-warning | text-bg-danger | text-bg-light | text-bg-dark)
* - html_tag: The HTML tag to use for the bade. Defaults to span.
* - content: The content of the badge.
* - url: if anchor add a url, tag will be set to a automatically.
* - utility_classes: An array of utility classes.
* - url: The HTML tag will automatically be set to a if an anchor is added to the URL.
* - utility_classes: This property contains an array of utility classes that can
* be used to add extra Bootstrap utility classes or custom
* classes to this component.
*/
#}
......@@ -19,19 +33,22 @@
color,
]|merge(utility_classes ? utility_classes : []) %}
{% set tag = tag ?? 'span' %}
{% set html_tag = html_tag ?? 'span' %}
{% set attributes = create_attribute() %}
{% if url %}
{% set tag = 'a' %}
{% set html_tag = 'a' %}
{% set url = url|render %}
{% set attributes = attributes.setAttribute('href', url) %}
{% endif %}
{% if content %}
<{{tag}} {{ url ? 'href=' ~ url }} class="{{ classes|join(' ') }}">
<{{html_tag}}{{ attributes.addClass(classes)}}">
{% block content %}
{{ content }}
{% endblock %}
</{{tag}}>
</{{html_tag}}>
{% endif %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment