@kit-data-manager/pid-component
Version:
The PID-Component is a web component that can be used to evaluate and display FAIR Digital Objects, PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.
434 lines (433 loc) • 17.2 kB
JavaScript
/*!
*
* Copyright 2024 Karlsruhe Institute of Technology.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
import { html } from "lit";
const meta = {
title: 'pid-component',
component: 'pid-component',
argTypes: {
value: {
description: 'The text to display (required)',
control: {
required: true,
type: 'text',
},
},
settings: {
description: 'The settings to use for the component',
control: {
type: 'text',
},
},
openByDefault: {
name: 'open-by-default',
description: 'Determines whether the component is opened by default',
defaultValue: false,
control: {
type: 'boolean',
},
table: {
defaultValue: {
summary: 'false',
},
type: {
summary: 'boolean',
},
},
},
amountOfItems: {
name: 'amount-of-items',
description: 'The amount of items to show in the table',
defaultValue: 10,
control: {
type: 'number',
},
table: {
defaultValue: {
summary: '10',
},
type: {
summary: 'number',
},
},
},
hideSubcomponents: {
name: 'hide-subcomponents',
description: "Determines whether subcomponents should generally be shown or not. If set to true, the component won't show any subcomponents. If not set, the component will show subcomponents, if the current level of subcomponents is not the total level of subcomponents or greater.",
defaultValue: false,
control: {
type: 'boolean',
},
table: {
defaultValue: {
summary: 'false',
},
type: {
summary: 'boolean',
},
},
},
emphasizeComponent: {
name: 'emphasize-component',
description: 'Determines whether components should be emphasized towards their surrounding by border and shadow.',
defaultValue: true,
control: {
type: 'boolean',
},
table: {
defaultValue: {
summary: 'true',
},
type: {
summary: 'boolean',
},
},
},
showTopLevelCopy: {
name: 'show-top-level-copy',
description: ' Determines whether on the top level the copy button is shown.',
defaultValue: true,
control: {
type: 'boolean',
},
table: {
defaultValue: {
summary: 'true',
},
type: {
summary: 'boolean',
},
},
},
levelOfSubcomponents: {
name: 'level-of-subcomponents',
description: 'The maximum level of subcomponents to show. ',
defaultValue: 1,
control: {
type: 'number',
},
table: {
defaultValue: {
summary: '1',
},
type: {
summary: 'number',
},
},
},
currentLevelOfSubcomponents: {
name: 'current-level-of-subcomponents',
description: 'The current elevation level of the subcomponents.',
defaultValue: 0,
control: {
type: 'number',
},
table: {
defaultValue: {
summary: '0',
},
type: {
summary: 'number',
},
},
},
defaultTTL: {
name: 'default-TTL',
description: 'The default TTL for entries in the IndexedDB. Is used if no TTL is set in the settings.',
defaultValue: 24 * 60 * 60 * 1000,
control: {
type: 'number',
},
table: {
defaultValue: {
summary: '24*60*60*1000',
},
type: {
summary: 'number',
},
},
},
},
args: {
value: '21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343',
settings: '[]',
openByDefault: false,
amountOfItems: 10,
hideSubcomponents: false,
emphasizeComponent: true,
levelOfSubcomponents: 1,
currentLevelOfSubcomponents: 0,
defaultTTL: 24 * 60 * 60 * 1000,
},
};
const textDecorator = (story) => html `<p class="items-center align-middle">
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. ${story()} 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 ${story()} 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 default meta;
export const Default = {
args: {
value: '21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343',
},
parameters: {
docs: {
source: {
code: `
<pid-component value='21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343'></pid-component>
`,
},
},
},
};
export const Handle = {
args: {
value: '21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343',
},
parameters: {
docs: {
source: {
code: `
<pid-component value='21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343'></pid-component>
`,
},
},
},
};
export const HandleWithoutSubcomponent = {
args: {
value: '21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343',
hideSubcomponents: true,
},
parameters: {
docs: {
source: {
code: `
<pid-component value='21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343' hide-subcomponents='true'></pid-component>
`,
},
},
},
};
export const ORCID = {
args: {
value: '0009-0005-2800-4833',
openByDefault: true,
},
parameters: {
docs: {
source: {
code: `
<pid-component value='0009-0005-2800-4833'></pid-component>
`,
},
},
},
};
export const Date = {
args: {
value: '2022-11-11T08:01:20.557+00:00',
},
parameters: {
docs: {
source: {
code: `<pid-component value='2022-11-11T08:01:20.557+00:00'></pid-component>`,
},
},
},
};
export const URL = {
args: {
value: 'https://scc.kit.edu',
},
parameters: {
docs: {
source: {
code: `<pid-component value='https://scc.kit.edu'></pid-component>`,
},
},
},
};
export const Email = {
args: {
value: 'someone@example.com',
},
parameters: {
docs: {
source: {
code: `<pid-component value='someone@example.com'></pid-component>`,
},
},
},
};
export const CommaSeperatedMails = {
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 = {
args: {
value: 'This is a fallback test',
},
parameters: {
docs: {
source: {
code: `<pid-component value='This is a fallback test'></pid-component>`,
},
},
},
};
export const ORCIDInRecord = {
args: {
value: '21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6',
openStatus: true,
},
parameters: {
docs: {
source: {
code: `<pid-component value='This is a fallback test'></pid-component>`,
},
},
},
};
export const ORCIDInRecordWithoutLimit = {
args: {
value: '21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6',
amountOfItems: 100,
openStatus: true,
},
parameters: {
docs: {
source: {
code: `<pid-component value='21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6' amount-of-items='100' open-by-default='true'></pid-component>`,
},
},
},
};
export const ORCIDInRecordWithSettings = {
args: {
value: '21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6',
settings: '[{"type":"ORCIDType","values":[{"name":"affiliationAt","value":949363200000},{"name":"showAffiliation","value":true}]}]',
},
parameters: {
docs: {
source: {
code: `
<pid-component value='21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343' settings='[{"type":"ORCIDConfig","values":[{"name":"affiliationAt","value":949363200000},{"name":"showAffiliation","value":true}]}]'></pid-component>
`,
},
},
},
};
export const HandleInText = {
args: {
value: '21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6',
},
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'></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'></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 HandleInTextNotEmphasized = {
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 = {
args: {
value: '0009-0005-2800-4833',
},
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='0009-0005-2800-4833'></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='0009-0005-2800-4833'></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 HandleWithoutSubcomponentInText = {
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' 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>
`,
},
},
},
};
export const TypedPIDMakerExampleText = {
args: {
value: '21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6',
},
decorators: [
(story) => html `
<p class="align-middle items-center w-1/3">
The Typed PID Maker is an entry point to integrate digital resources into the FAIR Digital Object (FAIR DO) ecosystem. It allows creating PIDs for resources and to provide
them with the necessary metadata to ensure that the resources can be found and understood. <br />
As a result, a machine-readable representation of all kinds of research artifacts allows act on such FAIR Digital Objects which present themselves as PID, e.g., ${story()},
but carry much more than just a pointer to a landing page.
</p>
`,
],
};
//# sourceMappingURL=pid-component.stories.js.map