fix: Styles when lang as '_' or '-' symbols

Author: Proskynete

lib/cjs/components/year-content/index.js

@@ -33,6 +33,7 @@ var YearContent = function (_a) {
     var startDate = _a.startDate, endDate = _a.endDate, _b = _a.currentYear, currentYear = _b === void 0 ? false : _b;
     var _c = (0, react_1.useContext)(config_context_1.ConfigContext), lang = _c.lang, dateFormat = _c.dateFormat;
     var _lang = (0, text_helper_1.clearString)(lang).split(' ')[0];
+    console.log('_lang: ', _lang);
     var d = new Date();
     var _year = d.getFullYear();
     var _currentYear = currentYear && (react_1.default.createElement("time", { dateTime: _year.toString() }, _year));

lib/cjs/styles/main.js

@@ -8,6 +8,7 @@ var YearContent = function (_a) {
     var startDate = _a.startDate, endDate = _a.endDate, _b = _a.currentYear, currentYear = _b === void 0 ? false : _b;
     var _c = useContext(ConfigContext), lang = _c.lang, dateFormat = _c.dateFormat;
     var _lang = clearString(lang).split(' ')[0];
+    console.log('_lang: ', _lang);
     var d = new Date();
     var _year = d.getFullYear();
     var _currentYear = currentYear && (React.createElement("time", { dateTime: _year.toString() }, _year));

lib/esm/components/year-content/index.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { clearString } from '../helpers/text.helper';
 import { DateFormat } from '../interfaces';
 
 export const TimelineWrapper = styled.div`
@@ -25,7 +26,7 @@ interface YearContentProps {
 	readonly format: DateFormat;
 }
 
-const minWidth = () => ({
+const enumWidth = () => ({
 	'only-number_es': '85',
 	'only-number_en': '85',
 	'only-number_de': '85',
@@ -57,8 +58,14 @@ export const YearWrapper = styled.p<YearContentProps>`
 	font-weight: 400;
 	height: max-content;
 	margin: 0;
-	max-width: ${({ format, lang }) => `${minWidth()[`${format}_${lang}`]}px`};
-	min-width: ${({ format, lang }) => `${minWidth()[`${format}_${lang}`]}px`};
+	max-width: ${({ format, lang }) =>
+		`${
+			enumWidth()[`${format}_${clearString(lang as string).split(' ')[0]}`]
+		}px`};
+	min-width: ${({ format, lang }) =>
+		`${
+			enumWidth()[`${format}_${clearString(lang as string).split(' ')[0]}`]
+		}px`};
 	text-align: end;
 `;