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)
Embed a Label and try adding markup to the "content" value.
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,
});
};Needs work
1.7
Code
Noting full refactoring of form elements happening in release 1.8. Requirements in this ticket may not be part of the 1.8 release. Will postpone for now, but may be reactivated after 1.8 release.
Confirming that this is a valid case and that it will be tackled in 1.8