fleet/frontend/components/DataSet/DataSet.stories.tsx
Gabriel Hernandez 76e16f0ec2
UI for certificate details on host details and my device pages (#26380)
For #25464

Implements the UI for viewing certification details on the host details
and my device pages.

This includes:

**Certs card and table on host details and my device page**


![image](https://github.com/user-attachments/assets/e685e55f-d982-43a7-91ff-e6d033b758f5)

**Cert details modal**


![image](https://github.com/user-attachments/assets/4a1d7421-85b8-4b3e-a010-ea752e7c6bdf)

- includes some work around normalising the details section card header
styles on these pages.
- includes extending DataSet component to add a `horizontal` orientation
when rendering the data


> NOTE: We still need to integrate with the API endpoints when they are
ready.

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [ ] Added/updated automated tests
- [x] Manual QA for all new/changed functionality
2025-02-21 11:52:41 +00:00

24 lines
446 B
TypeScript

import { Meta, StoryObj } from "@storybook/react";
import DataSet from "./DataSet";
const meta: Meta<typeof DataSet> = {
title: "Components/DataSet",
component: DataSet,
args: {
title: "Data set title",
value: "This is the value",
},
};
export default meta;
type Story = StoryObj<typeof DataSet>;
export const Basic: Story = {};
export const HorizontalOrientation: Story = {
args: {
orientation: "horizontal",
},
};