@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 4.51 kB
Source Map (JSON)
{"version":3,"sources":["../src/step-indicator/step-indicator.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype TitleProps =\n | {\n /**\n * Optional title of the active step to be shown underneath the step indicator\n *\n * Use `titleAs` to set the correct heading level\n */\n title: React.ReactNode;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n }\n | {\n title?: undefined;\n titleAs?: undefined;\n };\n\ninterface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n * 1-indexed number of the active step\n */\n activeStep: number;\n\n /**\n * 1-indexed number of steps\n */\n totalSteps: number;\n\n /**\n * Label on the left side above the steps\n */\n label: React.ReactNode;\n\n /**\n * Language for the \"step x of y\" label, default is \"en\"\n */\n lang?: \"no\" | \"en\" | \"da\" | \"sv\";\n}\n\n/**\n * Indicate a step in a process.\n *\n * It does not handle step content or navigation, only the visual indication of the active step.\n */\nexport const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps & TitleProps>(\n (\n {\n activeStep,\n totalSteps,\n className,\n label,\n lang = \"en\",\n title,\n titleAs: TitleComponent,\n ...rest\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\"hds-step-indicator\", className as undefined)}\n lang={lang}\n {...rest}\n >\n <div className={clsx(\"hds-step-indicator__header\")}>\n <span className={clsx(\"hds-step-indicator__left-label\")}>{label}</span>\n <span>{stepLabelTranslations[lang](activeStep, totalSteps)}</span>\n </div>\n\n <div className={clsx(\"hds-step-indicator__steps\")}>\n {Array.from({ length: totalSteps }, (_, i) => (\n <div\n className={clsx(\"hds-step-indicator__step\")}\n data-state={getStepState(i + 1, activeStep)}\n key={i}\n />\n ))}\n </div>\n\n {title ? (\n <TitleComponent className={clsx(\"hds-step-indicator__title\")}>{title}</TitleComponent>\n ) : null}\n </div>\n );\n },\n);\nStepIndicator.displayName = \"StepIndicator\";\n\n/**\n * Translated texts for the `step x of y` label.\n */\nconst stepLabelTranslations: Record<\n \"no\" | \"en\" | \"da\" | \"sv\",\n (activeStep: number, totalSteps: number) => string\n> = {\n no: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n en: (activeStep: number, totalSteps: number) => `step ${activeStep} of ${totalSteps}`,\n da: (activeStep: number, totalSteps: number) => `trin ${activeStep} af ${totalSteps}`,\n sv: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n};\n\n/**\n * Determine the state of a step.\n * 1-indexed\n */\nfunction getStepState(renderedStep: number, activeStep: number) {\n if (renderedStep < activeStep) {\n return \"previous\";\n }\n if (renderedStep === activeStep) {\n return \"active\";\n }\n return \"next\";\n}\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAiEnB,SACE,KADF;AArBD,IAAM,gBAAgB;AAAA,EAC3B,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,SAAS;AAAA,IAtDf,IA+CI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI,OAJL;AAAA,QAMC;AAAA,+BAAC,SAAI,WAAW,KAAK,4BAA4B,GAC/C;AAAA,gCAAC,UAAK,WAAW,KAAK,gCAAgC,GAAI,iBAAM;AAAA,YAChE,oBAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,aAC7D;AAAA,UAEA,oBAAC,SAAI,WAAW,KAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,KAAK,0BAA0B;AAAA,cAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,YACrC;AAAA,UACP,CACD,GACH;AAAA,UAEC,QACC,oBAAC,kBAAe,WAAW,KAAK,2BAA2B,GAAI,iBAAM,IACnE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAK5B,IAAM,wBAGF;AAAA,EACF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AACrF;AAMA,SAAS,aAAa,cAAsB,YAAoB;AAC9D,MAAI,eAAe,YAAY;AAC7B,WAAO;AAAA,EACT;AACA,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}