diff --git a/web/themes/contrib/civictheme/civictheme_library/components/03-organisms/webform/webform.scss b/web/themes/contrib/civictheme/civictheme_library/components/03-organisms/webform/webform.scss index 3c56166d6..bd6ef4e9f 100644 --- a/web/themes/contrib/civictheme/civictheme_library/components/03-organisms/webform/webform.scss +++ b/web/themes/contrib/civictheme/civictheme_library/components/03-organisms/webform/webform.scss @@ -5,6 +5,19 @@ .ct-webform { $root: &; + .form-checkboxes, + .form-radios { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + + .ct-form-element { + margin-bottom: 0; + display: flex; + } + } + @include ct-component-theme($root) using($root, $theme) { &#{$root}--with-background { @include ct-component-property($root, $theme, background-color); diff --git a/web/themes/contrib/civictheme/civictheme_starter_kit/templates/form/input--submit.html.twig b/web/themes/contrib/civictheme/civictheme_starter_kit/templates/form/input--submit.html.twig index 245b0db22..8e0b774cb 100644 --- a/web/themes/contrib/civictheme/civictheme_starter_kit/templates/form/input--submit.html.twig +++ b/web/themes/contrib/civictheme/civictheme_starter_kit/templates/form/input--submit.html.twig @@ -1,12 +1,24 @@ +{# +/** + * @file + * CivicTheme implementation to display a 'submit' form element. + * + * Variables: + * - value: [string] value. + * - attributes: [string] Additional attributes. + * - modifier_class: [string] Additional classes. + */ +#} + {% if 'secondary' in modifier_class %} - {% set type = 'secondary' %} + {% set type = 'secondary' %} {% else %} - {% set type = 'primary' %} + {% set type = 'primary' %} {% endif %} {% set children %} - {% include "@atoms/button/button.twig" with { +{% include "@atoms/button/button.twig" with { type: type, - text: attributes.value, + text: value, modifier_class: modifier_class, attributes: attributes, kind: 'submit' @@ -16,3 +28,4 @@ type: 'submit', children: children, } only %} + diff --git a/web/themes/contrib/civictheme/includes/form.inc b/web/themes/contrib/civictheme/includes/form.inc index d09321153..0e68cd758 100644 --- a/web/themes/contrib/civictheme/includes/form.inc +++ b/web/themes/contrib/civictheme/includes/form.inc @@ -45,6 +45,13 @@ function civictheme_preprocess_input(array &$variables): void { if (isset($variables['attributes']['#civictheme_theme'])) { unset($variables['attributes']['#civictheme_theme']); } + + // Fix htmlentity in submit button text. + $element = $variables['element']; + + if (isset($element['#type']) && $element['#type'] == 'submit' && !empty($variables['attributes']['value'])) { + $variables['value'] = $variables['attributes']['value']; + } } /** diff --git a/web/themes/contrib/civictheme/templates/block/block.html.twig b/web/themes/contrib/civictheme/templates/block/block.html.twig index c55bec835..da0d25bc3 100644 --- a/web/themes/contrib/civictheme/templates/block/block.html.twig +++ b/web/themes/contrib/civictheme/templates/block/block.html.twig @@ -8,6 +8,7 @@ 'block', 'block-' ~ configuration.provider|clean_class, 'block-' ~ plugin_id|clean_class, + modifier_class ? modifier_class : '', ] %} {{ title_prefix }} diff --git a/web/themes/contrib/civictheme/templates/form/container.html.twig b/web/themes/contrib/civictheme/templates/form/container.html.twig new file mode 100644 index 000000000..67c9edfc8 --- /dev/null +++ b/web/themes/contrib/civictheme/templates/form/container.html.twig @@ -0,0 +1,31 @@ +{# +/** + * @file + * Default theme implementation of a container used to wrap child elements. + * + * Used for grouped form items. Can also be used as a theme wrapper for any + * renderable element, to surround it with a
and HTML attributes. + * See \Drupal\Core\Render\Element\RenderElement for more + * information on the #theme_wrappers render array property, and + * \Drupal\Core\Render\Element\container for usage of the container render + * element. + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - children: The rendered child elements of the container. + * - has_parent: A flag to indicate that the container has one or more parent + containers. + * + * @see template_preprocess_container() + * + * @ingroup themeable + */ +#} +{% set classes = [ + has_parent ? 'js-form-wrapper form-wrapper', + modifier_class ? modifier_class, + 'ct-contianer', + ] %} +
+ {{ children }} +
diff --git a/web/themes/contrib/civictheme/templates/form/fieldset.html.twig b/web/themes/contrib/civictheme/templates/form/fieldset.html.twig new file mode 100644 index 000000000..fefc117c7 --- /dev/null +++ b/web/themes/contrib/civictheme/templates/form/fieldset.html.twig @@ -0,0 +1,8 @@ +{# +/** + * @file + * CivicTheme theme implementation to display a fieldset. + */ +#} +{% include '@atoms/fieldset/fieldset.twig' %} + diff --git a/web/themes/contrib/civictheme/templates/form/input--submit.html.twig b/web/themes/contrib/civictheme/templates/form/input--submit.html.twig index bc43e8459..8e0b774cb 100644 --- a/web/themes/contrib/civictheme/templates/form/input--submit.html.twig +++ b/web/themes/contrib/civictheme/templates/form/input--submit.html.twig @@ -2,24 +2,30 @@ /** * @file * CivicTheme implementation to display a 'submit' form element. + * + * Variables: + * - value: [string] value. + * - attributes: [string] Additional attributes. + * - modifier_class: [string] Additional classes. */ #} + {% if 'secondary' in modifier_class %} - {% set type = 'secondary' %} + {% set type = 'secondary' %} {% else %} - {% set type = 'primary' %} + {% set type = 'primary' %} {% endif %} {% set children %} - {% include "@atoms/button/button.twig" with { +{% include "@atoms/button/button.twig" with { type: type, - text: attributes.value, + text: value, modifier_class: modifier_class, attributes: attributes, - kind: 'submit', - theme: theme + kind: 'submit' } only %} {% endset %} {% include "@molecules/form-element/form-element.twig" with { type: 'submit', children: children, } only %} + diff --git a/web/themes/contrib/civictheme/templates/webform/webform.html.twig b/web/themes/contrib/civictheme/templates/webform/webform.html.twig new file mode 100644 index 000000000..e08c8e7e1 --- /dev/null +++ b/web/themes/contrib/civictheme/templates/webform/webform.html.twig @@ -0,0 +1,19 @@ +{# +/** + * @file + * Webform component. + * + * Variables: + * - attributes: [string] Additional attributes. + * - modifier_class: [string] Additional classes. + */ +#} + +{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %} +{% set modifier_class = '%s %s'|format(theme_class, modifier_class) %} + +
+ {{ title_prefix }} + {{ children }} + {{ title_suffix }} +