carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 1.1 kB
JavaScript
import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import{Typography as a}from"../../typography/typography.component.js";import r from"../../../hooks/__internal__/useLocale/useLocale.js";import{useStepFlowContext as i}from"../__internal__/step-flow.context.js";import{StyledTitleFocusWrapper as l}from"../step-flow.style.js";const n=({titleString:n,titleVariant:o,screenReaderOnlyTitle:s})=>{const d=r(),{titleRef:p,validatedCurrentStep:m,totalSteps:c,category:f,titleVariant:h}=i();return t(l,{"data-role":"title-text-wrapper","data-element":"title-text-wrapper",tabIndex:-1,ref:p,children:e(a,{variant:o||h||"h1","data-element":"title-text",children:[t(a,{fontWeight:"700",fontSize:"var(--fontSizes600)",lineHeight:"var(--sizing375)",variant:"span","aria-hidden":"true","data-element":"visible-title-text","data-role":"visible-title-text",children:n}),m&&c&&t(a,{variant:"span","data-element":"visually-hidden-title-text","data-role":"visually-hidden-title-text",screenReaderOnly:!0,children:d.stepFlow.screenReaderOnlyTitle(s||n,m,c,f)})]})})};export{n as StepFlowTitle,n as default};