patternfly_yew/components/
title.rs

1//! Title
2use crate::ouia;
3use crate::prelude::{ExtendClasses, OuiaComponentType, Size};
4use crate::utils::{Ouia, OuiaSafe};
5use yew::prelude::*;
6
7const OUIA: Ouia = ouia!("Title");
8
9/// Title level
10#[derive(Clone, Default, PartialEq, Eq, Ord, PartialOrd, Copy, Debug)]
11pub enum Level {
12    #[default]
13    H1,
14    H2,
15    H3,
16    H4,
17    H5,
18    H6,
19}
20
21/// Properties for [`Title`]
22#[derive(Clone, Debug, PartialEq, Properties)]
23pub struct TitleProperties {
24    #[prop_or_default]
25    pub children: Html,
26    #[prop_or_default]
27    pub level: Level,
28    #[prop_or_default]
29    pub size: Option<Size>,
30
31    /// OUIA Component id
32    #[prop_or_default]
33    pub ouia_id: Option<String>,
34    /// OUIA Component Type
35    #[prop_or(OUIA.component_type())]
36    pub ouia_type: OuiaComponentType,
37    /// OUIA Component Safe
38    #[prop_or(OuiaSafe::TRUE)]
39    pub ouia_safe: OuiaSafe,
40}
41
42/// Title component
43///
44/// > A **title** component applies top and bottom margins, font-weight, font-size, and line-height to titles. The most common usage for a title is to define headings within a page. For more information about the relationship between title component sizes and HTML heading levels, see the [Typography guidelines](https://www.patternfly.org/v4/guidelines/typography#customizing-heading-levels).
45///
46/// See: <https://www.patternfly.org/components/title>
47///
48/// ## Properties
49///
50/// Defined by [`TitleProperties`].
51#[function_component(Title)]
52pub fn title(props: &TitleProperties) -> Html {
53    let ouia_id = use_memo(props.ouia_id.clone(), |id| {
54        id.clone().unwrap_or(OUIA.generated_id())
55    });
56    let mut class = Classes::from("pf-v5-c-title");
57
58    class.extend_from(&props.size.unwrap_or(match props.level {
59        Level::H1 => Size::XXLarge,
60        Level::H2 => Size::XLarge,
61        Level::H3 => Size::Large,
62        Level::H4 => Size::Medium,
63        Level::H5 => Size::Medium,
64        Level::H6 => Size::Medium,
65    }));
66
67    let element = match props.level {
68        Level::H1 => "h1",
69        Level::H2 => "h2",
70        Level::H3 => "h3",
71        Level::H4 => "h4",
72        Level::H5 => "h5",
73        Level::H6 => "h6",
74    };
75
76    html! {
77        <@{element}
78            {class}
79            data-ouia-component-id={(*ouia_id).clone()}
80            data-ouia-component-type={props.ouia_type}
81            data-ouia-safe={props.ouia_safe}
82        >
83            { props.children.clone() }
84        </@>
85    }
86}
patternfly_yew/components/title.rs

patternfly_yew/components/
title.rs
