Problem/Motivation
Sometimes we need to add markup into the content of the Label component (e.g. a span tag to differentiate the text styling for a portion of the label)
Steps to reproduce
Embed a Label and try adding markup to the "content" value.
Proposed resolution
Modify the Label twig to support raw text (via a flag variable).
{#
/**
* @file
* Label component.
*
* Variables:
* - content: [string] The label's content.
* - is_raw_content: [boolean] Output text as raw value.
* - size: [string] Label size: extra-large, large, regular, small, extra-small.
* - theme: [string] Theme: light, dark.
* - attributes: [string] Additional attributes.
* - modifier_class: [string] Additional classes.
*/
#}
{% set size = size in ['extra-large', 'large', 'regular', 'small', 'extra-small'] ? size : 'regular' %}
{% set size_class = 'ct-label--%s'|format(size) %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s'|format(theme_class, size_class, modifier_class|default('')) %}
{% if content is not empty -%}
<label
class="ct-label {{ modifier_class }}"
{% if attributes is not empty %}{{ attributes|raw }}{% endif %}
>
{{ is_raw_content ? content|raw : content }}
</label>
{%- endif %}
Add the flag variable to the story (label.stories.js) for the Label component:
// phpcs:ignoreFile
import { radios, text } from '@storybook/addon-knobs';
import CivicThemeLabel from './label.twig';
export default {
title: 'Atoms/Label',
parameters: {
layout: 'centered',
},
};
export const Label = (knobTab) => {
const generalKnobTab = typeof knobTab === 'string' ? knobTab : 'General';
const generalKnobs = {
theme: radios(
'Theme',
{
Light: 'light',
Dark: 'dark',
},
'light',
generalKnobTab,
),
size: radios(
'Size',
{
'Extra Large': 'extra-large',
Large: 'large',
Regular: 'regular',
Small: 'small',
'Extra Small': 'extra-small',
None: '',
},
'regular',
generalKnobTab,
),
content: text('Content', 'Label content', generalKnobTab),
is_content_text: boolean('Allow HTML in text', false, generalKnobTab),
modifier_class: text('Additional classes', '', generalKnobTab),
attributes: text('Additional attributes', '', generalKnobTab),
};
return CivicThemeLabel({
...generalKnobs,
});
};
Remaining tasks
User interface changes
API changes
Data model changes