@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.
177 lines (176 loc) • 7 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
*
* https://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 { FoldableAction } from "../../utils/FoldableAction";
const mockActions = [
new FoldableAction(1, 'Primary Action', 'https://example.com/primary', 'primary'),
new FoldableAction(2, 'Secondary Action', 'https://example.com/secondary', 'secondary'),
new FoldableAction(3, 'Danger Action', 'https://example.com/danger', 'danger'),
new FoldableAction(4, 'Another Primary', 'https://example.com/another', 'primary'),
new FoldableAction(5, 'Another Secondary', 'https://example.com/another-secondary', 'secondary'),
];
const meta = {
title: 'Internal/PID Actions',
component: 'pid-actions',
tags: ['autodocs'],
argTypes: {
actions: {
description: 'Array of actions to display',
control: 'object',
table: {
type: { summary: 'FoldableAction[]' },
},
},
darkMode: {
description: 'The dark mode setting for the component',
control: 'select',
options: ['light', 'dark', 'system'],
table: {
type: { summary: 'string' },
defaultValue: { summary: 'system' },
},
},
},
args: {
actions: mockActions,
darkMode: 'system',
},
};
export default meta;
const createStory = (actions, darkMode = 'system') => {
return {
render: () => {
const container = document.createElement('div');
container.className = 'p-4 border rounded bg-white';
const pidActions = document.createElement('pid-actions');
pidActions.actions = actions.map(action => ({
priority: action.priority,
title: action.title,
link: action.link,
style: action.style,
}));
pidActions.setAttribute('darkMode', darkMode);
container.appendChild(pidActions);
return container;
},
parameters: {
docs: {
source: {
code: `
<pid-actions darkMode="${darkMode}"></pid-actions>
<script>
document.querySelector('pid-actions').actions = ${JSON.stringify(actions.map(a => ({
priority: a.priority,
title: a.title,
link: a.link,
style: a.style,
})), null, 2)};
</script>
`,
},
},
},
};
};
export const Default = Object.assign({ args: {
actions: mockActions,
darkMode: 'system',
} }, createStory(mockActions, 'system'));
export const PrimaryOnly = Object.assign({ args: {
actions: [mockActions[0], mockActions[3]],
darkMode: 'system',
} }, createStory([mockActions[0], mockActions[3]], 'system'));
export const SecondaryOnly = Object.assign({ args: {
actions: [mockActions[1], mockActions[4]],
darkMode: 'system',
} }, createStory([mockActions[1], mockActions[4]], 'system'));
export const DangerOnly = Object.assign({ args: {
actions: [mockActions[2]],
darkMode: 'system',
} }, createStory([mockActions[2]], 'system'));
export const CustomPriorityOrder = Object.assign({ args: {
actions: [
new FoldableAction(3, 'Third Priority', 'https://example.com/3', 'secondary'),
new FoldableAction(1, 'First Priority', 'https://example.com/1', 'primary'),
new FoldableAction(2, 'Second Priority', 'https://example.com/2', 'danger'),
],
darkMode: 'system',
} }, createStory([
new FoldableAction(3, 'Third Priority', 'https://example.com/3', 'secondary'),
new FoldableAction(1, 'First Priority', 'https://example.com/1', 'primary'),
new FoldableAction(2, 'Second Priority', 'https://example.com/2', 'danger'),
], 'system'));
export const LightMode = Object.assign({ args: {
actions: mockActions,
darkMode: 'light',
} }, createStory(mockActions, 'light'));
export const DarkMode = Object.assign({ args: {
actions: mockActions,
darkMode: 'dark',
} }, createStory(mockActions, 'dark'));
export const ManyActions = {
args: {
actions: [
...mockActions,
new FoldableAction(6, 'Extra Action 1', 'https://example.com/extra1', 'primary'),
new FoldableAction(7, 'Extra Action 2', 'https://example.com/extra2', 'secondary'),
new FoldableAction(8, 'Extra Action 3', 'https://example.com/extra3', 'danger'),
new FoldableAction(9, 'Extra Action 4', 'https://example.com/extra4', 'primary'),
],
darkMode: 'system',
},
render: () => {
const container = document.createElement('div');
container.className = 'p-4 border rounded bg-white max-w-md';
const pidActions = document.createElement('pid-actions');
const actions = [
...mockActions,
new FoldableAction(6, 'Extra Action 1', 'https://example.com/extra1', 'primary'),
new FoldableAction(7, 'Extra Action 2', 'https://example.com/extra2', 'secondary'),
new FoldableAction(8, 'Extra Action 3', 'https://example.com/extra3', 'danger'),
new FoldableAction(9, 'Extra Action 4', 'https://example.com/extra4', 'primary'),
];
pidActions.actions = actions.map(action => ({
priority: action.priority,
title: action.title,
link: action.link,
style: action.style,
}));
pidActions.setAttribute('darkMode', 'system');
container.appendChild(pidActions);
return container;
},
parameters: {
docs: {
source: {
code: `
<pid-actions darkMode="system"></pid-actions>
<script>
document.querySelector('pid-actions').actions = [
...mockActions,
{ priority: 6, title: "Extra Action 1", link: "https://example.com/extra1", style: "primary" },
{ priority: 7, title: "Extra Action 2", link: "https://example.com/extra2", style: "secondary" },
{ priority: 8, title: "Extra Action 3", link: "https://example.com/extra3", style: "danger" },
{ priority: 9, title: "Extra Action 4", link: "https://example.com/extra4", style: "primary" }
];
</script>
`,
},
},
},
};
//# sourceMappingURL=pid-actions.stories.js.map