@laerdal/life-react-components 6.0.0-dev.1 → 6.0.0-dev.10.full

package/dist/utils/color-tokens.js

@@ -0,0 +1,82 @@
+export function generateSemanticColorTokenName(token) {
+  return `--life-color-${token.componentType}${(token.isOnFill && '-on-fill') ?? ''}${(token.variant && '-' + token.variant) ?? ''}${(token.state && '-' + token.state) ?? ''}`;
+}
+export function getFirstTokenFullNameOrDefault(tokens, filter) {
+  let firstMatch = tokens.find(token => token.componentType === filter.componentType && token.state === filter.state && !!token.isOnFill === !!filter.isOnFill);
+  if (!firstMatch) {
+    firstMatch = getColorToken(filter.isOnFill, filter.componentType, filter.state, filter.defaultVariant);
+  }
+  return generateSemanticColorTokenName(firstMatch);
+}
+export function getColorToken(isOnFill, componentType, state, variant) {
+  return {
+    name: '',
+    componentType: componentType ?? 'text',
+    variant: state && (!variant || variant == 'default') ? undefined : variant ?? 'default',
+    isOnFill: isOnFill,
+    state: state
+  };
+}
+export function parseSemanticColorTokenName(name) {
+  // Remove the prefix
+  const withoutPrefix = name.replace('--life-color-', '');
+
+  // Split the remaining parts
+  const parts = withoutPrefix.split('-');
+
+  // Determine component type
+  let componentType;
+  if (parts[0] === 'bg') {
+    if (parts.includes('fill')) {
+      componentType = 'bg-fill';
+    } else if (parts.includes('surface')) {
+      componentType = 'bg-surface';
+    } else if (parts.includes('overlay')) {
+      componentType = 'bg-overlay';
+    } else {
+      componentType = 'bg-fill'; // Default for bg
+    }
+  } else if (parts[0] === 'text' && parts.includes('link')) {
+    componentType = 'text-link';
+  } else {
+    componentType = parts[0];
+  }
+  const token = {
+    name,
+    componentType
+  };
+
+  // Handle "on-fill" cases
+  if (parts.includes('on') && parts.includes('fill')) {
+    token.isOnFill = true;
+  }
+
+  // Extract state
+  const states = ['hover', 'active', 'disabled'];
+  for (const state of states) {
+    if (parts.includes(state)) {
+      token.state = state;
+      break;
+    }
+  }
+
+  // Extract variant
+  const variants = ['accent1', 'accent2', 'primary', 'critical', 'positive', 'warning', 'samaritan', 'inverse', 'neutral', 'subtle', 'default', 'selected'];
+  for (const variant of variants) {
+    if (parts.includes(variant)) {
+      token.variant = variant;
+      break;
+    }
+  }
+  return token;
+}
+
+// Example usage:
+// const token = parseColorTokenName('--life-color-bg-fill-accent1-hover');
+// Result: {
+//   name: '--life-color-bg-fill-accent1-hover',
+//   componentType: 'bg-fill',
+//   state: 'hover',
+//   variant: 'accent1'
+// }
+//# sourceMappingURL=color-tokens.js.map

package/dist/utils/color-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-tokens.js","names":["generateSemanticColorTokenName","token","componentType","isOnFill","variant","state","getFirstTokenFullNameOrDefault","tokens","filter","firstMatch","find","getColorToken","defaultVariant","name","undefined","parseSemanticColorTokenName","withoutPrefix","replace","parts","split","includes","states","variants"],"sources":["../../src/utils/color-tokens.ts"],"sourcesContent":["export type ColorComponentType = \r\n  | 'bg-fill' \r\n  | 'bg-surface' \r\n  | 'bg-overlay'\r\n  | 'text' \r\n  | 'text-link'\r\n  | 'icon' \r\n  | 'border';\r\n\r\nexport type ColorState = 'default' | 'hover' | 'active' | 'disabled';\r\nexport type ColorVariant = \r\n  | 'accent1' \r\n  | 'accent2' \r\n  | 'primary' \r\n  | 'critical' \r\n  | 'positive' \r\n  | 'warning' \r\n  | 'samaritan' \r\n  | 'inverse' \r\n  | 'neutral' \r\n  | 'subtle'\r\n  | 'default'\r\n  | 'selected' \r\n  | 'high';\r\n\r\nexport interface ColorToken {\r\n  name: string;\r\n  componentType: ColorComponentType;\r\n  state?: ColorState;\r\n  variant?: ColorVariant;\r\n  isOnFill?: boolean;\r\n}\r\n\r\nexport function generateSemanticColorTokenName(token: ColorToken) : string {\r\n  return `--life-color-${token.componentType}${(token.isOnFill && '-on-fill') ?? ''}${(token.variant && ('-' + token.variant)) ?? ''}${(token.state && ('-' + token.state)) ?? ''}`;\r\n}\r\n\r\nexport function getFirstTokenFullNameOrDefault(tokens: ColorToken[], filter: { isOnFill?: boolean, componentType?: ColorComponentType, state?: ColorState, defaultVariant?: ColorVariant }) : string  {\r\n  let firstMatch = tokens.find(token => \r\n    token.componentType === filter.componentType && \r\n    token.state === filter.state &&\r\n    !!token.isOnFill === !!filter.isOnFill\r\n  );\r\n  \r\n  if (!firstMatch) {\r\n    firstMatch = getColorToken(filter.isOnFill, filter.componentType, filter.state, filter.defaultVariant);\r\n  }\r\n  return generateSemanticColorTokenName(firstMatch);\r\n}\r\n\r\n\r\nexport function getColorToken(isOnFill?: boolean, componentType?: ColorComponentType, state?: ColorState, variant?: ColorVariant): ColorToken {\r\n  return {\r\n    name: '',\r\n    componentType: componentType ?? 'text',\r\n    variant: state && (!variant || variant == 'default') ? undefined : (variant ?? 'default'),\r\n    isOnFill: isOnFill,\r\n    state: state\r\n  };\r\n}\r\n\r\nexport function parseSemanticColorTokenName(name: string): ColorToken {\r\n  // Remove the prefix\r\n  const withoutPrefix = name.replace('--life-color-', '');\r\n  \r\n  // Split the remaining parts\r\n  const parts = withoutPrefix.split('-');\r\n  \r\n  // Determine component type\r\n  let componentType: ColorComponentType;\r\n  if (parts[0] === 'bg') {\r\n    if (parts.includes('fill')) {\r\n      componentType = 'bg-fill';\r\n    } else if (parts.includes('surface')) {\r\n      componentType = 'bg-surface';\r\n    } else if (parts.includes('overlay')) {\r\n      componentType = 'bg-overlay';\r\n    } else {\r\n      componentType = 'bg-fill'; // Default for bg\r\n    }\r\n  } else if (parts[0] === 'text' && parts.includes('link')) {\r\n    componentType = 'text-link';\r\n  } else {\r\n    componentType = parts[0] as ColorComponentType;\r\n  }\r\n\r\n  const token: ColorToken = {\r\n    name,\r\n    componentType,\r\n  };\r\n\r\n  // Handle \"on-fill\" cases\r\n  if (parts.includes('on') && parts.includes('fill')) {\r\n    token.isOnFill = true;\r\n  }\r\n\r\n  // Extract state\r\n  const states: ColorState[] = ['hover', 'active', 'disabled'];\r\n  for (const state of states) {\r\n    if (parts.includes(state)) {\r\n      token.state = state;\r\n      break;\r\n    }\r\n  }\r\n\r\n  // Extract variant\r\n  const variants: ColorVariant[] = [\r\n    'accent1',\r\n    'accent2',\r\n    'primary',\r\n    'critical',\r\n    'positive',\r\n    'warning',\r\n    'samaritan',\r\n    'inverse',\r\n    'neutral',\r\n    'subtle',\r\n    'default',\r\n    'selected'\r\n  ];\r\n\r\n  for (const variant of variants) {\r\n    if (parts.includes(variant)) {\r\n      token.variant = variant;\r\n      break;\r\n    }\r\n  }\r\n\r\n  return token;\r\n}\r\n\r\n// Example usage:\r\n// const token = parseColorTokenName('--life-color-bg-fill-accent1-hover');\r\n// Result: {\r\n//   name: '--life-color-bg-fill-accent1-hover',\r\n//   componentType: 'bg-fill',\r\n//   state: 'hover',\r\n//   variant: 'accent1'\r\n// } "],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "6.0.0-dev.1",
+  "version": "6.0.0-dev.10.full",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],
@@ -62,13 +62,14 @@
     }
   },
   "dependencies": {
+    "@laerdal-medical/life-design-tokens": "^1.2.0-beta",
     "@laerdal/figma-svg": "^5.2.2",
     "@types/node": "^18.0.6",
     "animated-scroll-to": "^2.3.0",
     "dayjs": "^1.11.5",
     "nanoid": "3.3.11",
     "react": "^19.0.0",
-    "react-datepicker": "^8.2.1",
+    "react-datepicker": "^8.4.0",
     "react-dom": "^19.0.0",
     "react-inlinesvg": "^4.2.0",
     "react-modal": "^3.16.0",
@@ -114,6 +115,7 @@
     "babel-plugin-typescript-to-proptypes": "^2.0.0",
     "concurrently": "^5.2.0",
     "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
     "eslint-plugin-storybook": "^0.8.0",
     "history": "^5.3.0",
     "jest": "^29.7.0",
@@ -124,7 +126,11 @@
     "react-share": "^5.1.0",
     "regenerator-runtime": "^0.13.9",
     "storybook": "^8.1.3",
-    "ts-jest": "^29.2.5"
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",