Merge pull request #147 from kit-data-manager/dev

Added E-Mail renderer

Author: maximiliani

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@kit-data-manager/pid-component",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "license": "Apache-2.0",
   "description": "The PID-Component is a easily extensible web component that can be used to display PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.",
   "author": "Maximilian Inckmann <maximilian.inckmann@kit.edu> (https://orcid.org/0009-0005-2800-4833)",
@@ -53,27 +53,26 @@
     "storybook-docs": "storybook dev --docs"
   },
   "dependencies": {
-    "@kit-data-manager/pid-component": "^0.0.8",
-    "@stencil/core": "^4.9.1"
+    "@stencil/core": "^4.12.2"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.8",
-    "@storybook/addon-links": "^7.6.8",
-    "@storybook/blocks": "^7.6.8",
-    "@storybook/web-components": "^7.6.8",
-    "@storybook/web-components-vite": "^7.6.8",
+    "@storybook/addon-essentials": "^7.6.16",
+    "@storybook/addon-links": "^7.6.16",
+    "@storybook/blocks": "^7.6.16",
+    "@storybook/web-components": "^7.6.16",
+    "@storybook/web-components-vite": "^7.6.16",
     "@types/jest": "^29.5.4",
-    "@types/node": "^20.11.2",
+    "@types/node": "^20.11.19",
     "jest": "^29.6.4",
     "jest-cli": "^29.7.0",
-    "lit": "^3.1.0",
-    "prettier": "^3.2.2",
+    "lit": "^3.1.2",
+    "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
-    "puppeteer": "^21.0.3",
+    "puppeteer": "^22.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "stencil-tailwind-plugin": "^1.8.0",
-    "storybook": "^7.6.8",
+    "storybook": "^7.6.16",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.1.6"
   }

package.json

@@ -86,6 +86,7 @@ The component can render the following types of components:
 - PIDs (resolvable via [handle.net](handle.net))
 - ORCiDs (resolvable via [orcid.org](orcid.org))
 - URLs (starting with http:// or https://)
+- Emails (separated by comma)
 - Dates
 - Everything else is rendered as a simple string (aka. fallback).
 
@@ -103,6 +104,13 @@ You can easily add a new type by simply implementing the abstract class `Generic
 
 <Canvas of={PIDComponentStories.URL} />
 
+### E-Mail addresses
+
+<Canvas of={PIDComponentStories.Email} />
+
+You can also render multiple e-mail addresses separated by a comma.
+<Canvas of={PIDComponentStories.commaSeperatedMails} />
+
 ### Date
 
 <Canvas of={PIDComponentStories.Date} />
@@ -118,7 +126,10 @@ It will be rendered in line while folded and will take up the whole width of the
 
 <Canvas of={PIDComponentStories.HandleInText} />
 
-This is an example where the subcomponents are hidden.
+You can make the component even smaller by setting the `emphasize-component` attribute to `false`.
+<Canvas of={PIDComponentStories.HandleInTextNotEmphasized} />
+
+This is an example where the subcomponents are hidden and the component is not emphasized.
 
 <Canvas of={PIDComponentStories.HandleWithoutSubcomponentInText} />
 

src/components/pid-component/pid-component.mdx

@@ -267,6 +267,32 @@ export const URL: Story = {
   },
 };
 
+export const Email: Story = {
+  args: {
+    value: 'someone@example.com',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<pid-component value='someone@example.com'></pid-component>`,
+      },
+    },
+  },
+};
+
+export const commaSeperatedMails: Story = {
+  args: {
+    value: 'someone@example.com, john.doe@demo.example',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<pid-component value='someone@example.com, john.doe@demo.example'></pid-component>`,
+      },
+    },
+  },
+};
+
 export const Fallback: Story = {
   args: {
     value: 'This is a fallback test',
@@ -343,6 +369,25 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
   },
 };
 
+export const HandleInTextNotEmphasized: Story = {
+  args: {
+    value: '21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6',
+    emphasizeComponent: false,
+  },
+  decorators: [textDecorator],
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<p class='align-middle items-center'>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <pid-component value='21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6' emphasize-component="false"></pid-component>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <pid-component value='21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6' emphasize-component="false"></pid-component> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>`,
+      },
+    },
+  },
+};
+
 export const ORCIDInText: Story = {
   args: {
     value: '0009-0005-2800-4833',
@@ -365,15 +410,16 @@ export const HandleWithoutSubcomponentInText: Story = {
   args: {
     value: '21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343',
     hideSubcomponents: true,
+    emphasizeComponent: false,
   },
   decorators: [textDecorator],
   parameters: {
     docs: {
       source: {
         code: `
 <p class='align-middle items-center'>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<pid-component value='21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343' hide-subcomponents='true'></pid-component>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <pid-component value='21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343' hide-subcomponents='true'></pid-component> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<pid-component value='21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343' hide-subcomponents='true'  emphasize-component='false'></pid-component>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <pid-component value='21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343' hide-subcomponents='true' emphasize-component='false'></pid-component> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
         `,
       },