) {
- const { color, icon } = styleMap[type];
-
- return (
-
-
-
- );
-}
-
-const styleMap: {
- [key in AlertProps['type']]: { color: String; icon: ReactElement };
-} = {
- negative: {
- color: 'red',
- icon: (
-
- ),
- },
- positive: {
- color: 'green',
- icon: (
-
- ),
- },
- warning: {
- color: 'yellow',
- icon: (
-
- ),
- },
- info: {
- color: 'aqua',
- icon: (
-
- ),
- },
-};
diff --git a/packages/alert/src/index.ts b/packages/alert/src/index.ts
deleted file mode 100644
index 8c4450cf..00000000
--- a/packages/alert/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Alert } from './component';
-export type { AlertProps } from './props';
diff --git a/packages/alert/src/props.tsx b/packages/alert/src/props.tsx
deleted file mode 100644
index 12b62dd2..00000000
--- a/packages/alert/src/props.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export type AlertProps = {
- /**
- * Determines whether the alert should be visible
- */
- show?: Boolean;
- /**
- * Type of alert
- */
- type: 'negative' | 'positive' | 'warning' | 'info';
- /**
- * Additional classes to include
- */
- className?: string;
- /** Additional CSS styles for the container. */
- style?: React.CSSProperties;
-};
diff --git a/packages/alert/stories/Alert.stories.tsx b/packages/alert/stories/Alert.stories.tsx
deleted file mode 100644
index 9dbf0bb3..00000000
--- a/packages/alert/stories/Alert.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import { Button } from '../../button/src';
-import { Alert } from '../src';
-
-const metadata = { title: 'FeedbackIndicators/Alert' };
-export default metadata;
-
-export const Default = () => {
- const [show, setShow] = React.useState(true);
-
- return (
-
-
-
Negative
-
- This is a message that you've done something really wrong.
-
-
-
-
-
Positive
-
- This is a message that gives you positive feedback.
-
-
-
-
Warning
-
- This is a message that shows a warning, might be nothing serious.
-
-
-
-
Info
-
- This is a message that enlightens you with some new cool information.
-
-
-
This text attracts your attention right away
- This is the message text that can be short or a little bit long
- Link to more information
-
-
-
-
-
-);
-
-export const WithInteractiveContent = () => {
- const [show, setShow] = React.useState(true);
-
- return (
-
-
-
Negative
-
-
-
-
-
-
-
-
-
- {children}
+
);
}
diff --git a/packages/index.ts b/packages/index.ts
index 8216fbda..492f3f6d 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -1,5 +1,4 @@
export * from './_helpers';
-export * from './alert/src';
export * from './box/src';
export * from './breadcrumbs/src';
export * from './attention/src';
diff --git a/packages/modal/docs/Modal.mdx b/packages/modal/docs/Modal.mdx
index 5e843a4a..cb32adde 100644
--- a/packages/modal/docs/Modal.mdx
+++ b/packages/modal/docs/Modal.mdx
@@ -110,17 +110,9 @@ respond to `esc` keypresses and/or clicking outside the modal.
```jsx example
function Example() {
const [open, setOpen] = React.useState(false);
- const [mustAgree, setMustAgree] = React.useState(false);
const [hasAgreed, setHasAgreed] = React.useState(false);
- const toggleModal = () => {
- if (open && !hasAgreed) {
- setMustAgree(true);
- return;
- }
- setMustAgree(false);
- setOpen(!open);
- }
+ const toggleModal = () => setOpen(!open);
return (
<>
@@ -133,12 +125,9 @@ function Example() {
onDismiss={hasAgreed ? toggleModal : undefined}
title="Non dismissable"
footer={
- <>
- {mustAgree && You must agree first!
}
-
-
+
}
>
To go further, you need to agree to these bogus terms
diff --git a/packages/modal/src/component.tsx b/packages/modal/src/component.tsx
index 18fc46ea..616737ae 100644
--- a/packages/modal/src/component.tsx
+++ b/packages/modal/src/component.tsx
@@ -1,5 +1,5 @@
import { classNames } from '@chbphone55/classnames';
-import { modal as c } from '@fabric-ds/css/component-classes';
+import { modal as c } from '@fabric-ds/component-classes';
import React, { useEffect, useRef } from 'react';
import { useId } from '../../utils/src';
import FocusLock from 'react-focus-lock';
diff --git a/packages/steps/src/step.tsx b/packages/steps/src/step.tsx
index ab7140e6..6169a9eb 100644
--- a/packages/steps/src/step.tsx
+++ b/packages/steps/src/step.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { classNames } from '@chbphone55/classnames';
-import { step as c } from '@fabric-ds/css/component-classes';
+import { step as c } from '@fabric-ds/component-classes';
import { useContext } from 'react';
import { StepsContext } from './component';
diff --git a/packages/switch/src/component.tsx b/packages/switch/src/component.tsx
index b893994d..b17f07a8 100644
--- a/packages/switch/src/component.tsx
+++ b/packages/switch/src/component.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { SwitchProps } from './props';
import { classNames } from '@chbphone55/classnames';
-import { switchToggle as c } from '@fabric-ds/css/component-classes';
+import { switchToggle as c } from '@fabric-ds/component-classes';
export function Switch({
id,
diff --git a/packages/tabs/src/component-tab-panel.tsx b/packages/tabs/src/component-tab-panel.tsx
index 33706071..8a0561e0 100644
--- a/packages/tabs/src/component-tab-panel.tsx
+++ b/packages/tabs/src/component-tab-panel.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { tab as c } from '@fabric-ds/css/component-classes';
+import { tab as c } from '@fabric-ds/component-classes';
import type { TabPanelProps } from './props';
export function TabPanel(props: TabPanelProps) {
diff --git a/packages/tabs/src/component-tab.tsx b/packages/tabs/src/component-tab.tsx
index 3343a492..b5273f91 100644
--- a/packages/tabs/src/component-tab.tsx
+++ b/packages/tabs/src/component-tab.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { classNames as cn } from '@chbphone55/classnames';
-import { tab as c } from '@fabric-ds/css/component-classes';
+import { tab as c } from '@fabric-ds/component-classes';
import type { TabProps } from './props';
const setup = ({
diff --git a/packages/tabs/src/component-tabs.tsx b/packages/tabs/src/component-tabs.tsx
index 0920881e..b9d86d58 100644
--- a/packages/tabs/src/component-tabs.tsx
+++ b/packages/tabs/src/component-tabs.tsx
@@ -6,7 +6,7 @@ import React, {
Children,
} from 'react';
import { classNames as cn } from '@chbphone55/classnames';
-import { tabs as c } from '@fabric-ds/css/component-classes';
+import { tabs as c } from '@fabric-ds/component-classes';
import { debounce } from './utils';
import type { TabsProps } from './props';