Skip to content

Commit 4eace90

Browse files
committed
Minor UI improvements
Updated dependencies
1 parent b35879c commit 4eace90

File tree

7 files changed

+989
-1233
lines changed

7 files changed

+989
-1233
lines changed

package-lock.json

Lines changed: 799 additions & 1104 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kit-data-manager/pid-component",
3-
"version": "0.0.9",
3+
"version": "0.0.10",
44
"license": "Apache-2.0",
55
"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.",
66
"author": "Maximilian Inckmann <maximilian.inckmann@kit.edu> (https://orcid.org/0009-0005-2800-4833)",
@@ -53,27 +53,26 @@
5353
"storybook-docs": "storybook dev --docs"
5454
},
5555
"dependencies": {
56-
"@kit-data-manager/pid-component": "^0.0.8",
57-
"@stencil/core": "^4.9.1"
56+
"@stencil/core": "^4.12.2"
5857
},
5958
"devDependencies": {
60-
"@storybook/addon-essentials": "^7.6.8",
61-
"@storybook/addon-links": "^7.6.8",
62-
"@storybook/blocks": "^7.6.8",
63-
"@storybook/web-components": "^7.6.8",
64-
"@storybook/web-components-vite": "^7.6.8",
59+
"@storybook/addon-essentials": "^7.6.16",
60+
"@storybook/addon-links": "^7.6.16",
61+
"@storybook/blocks": "^7.6.16",
62+
"@storybook/web-components": "^7.6.16",
63+
"@storybook/web-components-vite": "^7.6.16",
6564
"@types/jest": "^29.5.4",
66-
"@types/node": "^20.11.2",
65+
"@types/node": "^20.11.19",
6766
"jest": "^29.6.4",
6867
"jest-cli": "^29.7.0",
69-
"lit": "^3.1.0",
70-
"prettier": "^3.2.2",
68+
"lit": "^3.1.2",
69+
"prettier": "^3.2.5",
7170
"prettier-plugin-tailwindcss": "^0.5.11",
72-
"puppeteer": "^21.0.3",
71+
"puppeteer": "^22.0.0",
7372
"react": "^18.2.0",
7473
"react-dom": "^18.2.0",
7574
"stencil-tailwind-plugin": "^1.8.0",
76-
"storybook": "^7.6.8",
75+
"storybook": "^7.6.16",
7776
"tailwindcss": "^3.4.1",
7877
"typescript": "^5.1.6"
7978
}

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,13 @@ You can easily add a new type by simply implementing the abstract class `Generic
104104

105105
<Canvas of={PIDComponentStories.URL} />
106106

107-
### Email
107+
### E-Mail addresses
108108

109109
<Canvas of={PIDComponentStories.Email} />
110110

111+
You can also render multiple e-mail addresses separated by a comma.
112+
<Canvas of={PIDComponentStories.commaSeperatedMails} />
113+
111114
### Date
112115

113116
<Canvas of={PIDComponentStories.Date} />
@@ -123,7 +126,10 @@ It will be rendered in line while folded and will take up the whole width of the
123126

124127
<Canvas of={PIDComponentStories.HandleInText} />
125128

126-
This is an example where the subcomponents are hidden.
129+
You can make the component even smaller by setting the `emphasize-component` attribute to `false`.
130+
<Canvas of={PIDComponentStories.HandleInTextNotEmphasized} />
131+
132+
This is an example where the subcomponents are hidden and the component is not emphasized.
127133

128134
<Canvas of={PIDComponentStories.HandleWithoutSubcomponentInText} />
129135

src/components/pid-component/pid-component.stories.ts

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,19 @@ export const Email: Story = {
280280
},
281281
};
282282

283+
export const commaSeperatedMails: Story = {
284+
args: {
285+
value: 'someone@example.com, john.doe@demo.example',
286+
},
287+
parameters: {
288+
docs: {
289+
source: {
290+
code: `<pid-component value='someone@example.com, john.doe@demo.example'></pid-component>`,
291+
},
292+
},
293+
},
294+
};
295+
283296
export const Fallback: Story = {
284297
args: {
285298
value: 'This is a fallback test',
@@ -356,6 +369,25 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
356369
},
357370
};
358371

372+
export const HandleInTextNotEmphasized: Story = {
373+
args: {
374+
value: '21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6',
375+
emphasizeComponent: false,
376+
},
377+
decorators: [textDecorator],
378+
parameters: {
379+
docs: {
380+
source: {
381+
code: `
382+
<p class='align-middle items-center'>
383+
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>
384+
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.
385+
</p>`,
386+
},
387+
},
388+
},
389+
};
390+
359391
export const ORCIDInText: Story = {
360392
args: {
361393
value: '0009-0005-2800-4833',
@@ -378,15 +410,16 @@ export const HandleWithoutSubcomponentInText: Story = {
378410
args: {
379411
value: '21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343',
380412
hideSubcomponents: true,
413+
emphasizeComponent: false,
381414
},
382415
decorators: [textDecorator],
383416
parameters: {
384417
docs: {
385418
source: {
386419
code: `
387420
<p class='align-middle items-center'>
388-
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>
389-
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.
421+
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>
422+
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.
390423
</p>
391424
`,
392425
},

0 commit comments

Comments
 (0)