Skip to content

feat(openStackblitz): about modal and export Modal #7479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
3 changes: 2 additions & 1 deletion cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@
"uuidv",
"webfonts",
"useravatar",
"rendericon"
"rendericon",
"csvg"
]
}
4 changes: 1 addition & 3 deletions e2e/components/AboutModal/AboutModal-test.avt.e2e.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,7 @@ test.describe('AboutModal @avt', () => {
);

// Reopening modal from trigger button to check if focus trap is working
const openButton = page.getByText(
'Reopen the About modal with all props set'
);
const openButton = page.getByText('Open Modal');
await openButton.click();
await modalElement.evaluate((element) =>
Promise.all(
Expand Down
56 changes: 56 additions & 0 deletions packages/ibm-products/src/components/AboutModal/AboutModal.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { Story, Controls, Source, Canvas } from '@storybook/addon-docs';
import { CodesandboxLink } from '../../global/js/utils/story-helper';
import { AboutModal } from '.';
import * as stories from './AboutModal.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

# About Modal

[AboutModal usage guidelines](https://pages.github.ibm.com/carbon/ibm-products/components/about-modal/usage/) | [Carbon Modal usage guidelines](https://www.carbondesignsystem.com/components/modal/usage) | [Carbon Modal documentation](https://react.carbondesignsystem.com/?path=/docs/components-modal)

## Table of Contents

- [Overview](#overview)
- [Example usage](#example-usage)
- [Component API](#component-api)

## Overview

The About modal component conveys product information, including the version number, copyright information, and license details.
The About modal is triggered by a user’s action which appears on top of the main page content and is persistent until dismissed.
The purpose of this modal should be immediately apparent to the user, with a clear and obvious path to completion.

### About Modal

<Canvas
of={stories.aboutModal}
additionalActions={[
{
title: 'Open in Stackblitz',
onClick: () => stackblitzPrefillConfig({
'story': stories.aboutModal,
'styles': stories.default.parameters.styles
}),
},
]}>
</Canvas>


### About Modal With All Props Set

<Canvas
of={stories.aboutModalWithAllPropsSet}
additionalActions={[
{
title: 'Open in Stackblitz',
onClick: () => stackblitzPrefillConfig({
'story': stories.aboutModalWithAllPropsSet,
'styles': stories.default.parameters.styles
}),
},
]}>
</Canvas>

## Component API

<Controls />
Loading
Loading