Skip to content
Open
54 changes: 26 additions & 28 deletions components/accordion.d.ts
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
declare module '@salesforce/design-system-react/components/accordion' {
import React from 'react';
type Props = {
/**
* CSS class names to be added to the accordion component. _Tested with snapshot testing._
*/
className?: any[] | Record<string, any> | string;
/**
* HTML id for accordion component. _Tested with snapshot testing._
*/
id?: number | string;
/**
* The panel content for the Accordion component. Accordion panels should be added as <AccordionPanel />. Event handler for the accordion panels should be added to `<AccordionPanel />`. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._
*
* Example:
* ```
* <SLDSAccordion>
* <SLDSAccordionpanel />
* <SLDSAccordionpanel />
* <SLDSAccordionpanel />
* </SLDSAccordion>
* ```
*/
children: React.ReactNode /*.isRequired*/;
};
import React from 'react';
type Props = {
/**
* CSS class names to be added to the accordion component. _Tested with snapshot testing._
*/
className?: any[] | Record<string, any> | string;
/**
* HTML id for accordion component. _Tested with snapshot testing._
*/
id?: number | string;
/**
* The panel content for the Accordion component. Accordion panels should be added as <AccordionPanel />. Event handler for the accordion panels should be added to `<AccordionPanel />`. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._
*
* Example:
* ```
* <SLDSAccordion>
* <SLDSAccordionpanel />
* <SLDSAccordionpanel />
* <SLDSAccordionpanel />
* </SLDSAccordion>
* ```
*/
children: React.ReactNode /*.isRequired*/;
};

function Component(props: Props): JSX.Element;
export default Component;
}
declare function Component(props: Props): React.JSX.Element;
export default Component;
88 changes: 43 additions & 45 deletions components/accordion/panel.d.ts
Original file line number Diff line number Diff line change
@@ -1,46 +1,44 @@
declare module '@salesforce/design-system-react/components/accordion/panel' {
import React from 'react';
type Props = {
/**
* The panel content for the Accordion component. Accordion panels should be added as <AccordionPanel />. Event handler for the accordion panels should be added to `<AccordionPanel />`. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._
*/
children?: React.ReactNode;
/**
* Indicates whether item is expanded or not, which should be handled by `onTogglePanel`. _Tested with Mocha framework and snapshot testing._
*/
expanded: boolean /*.isRequired*/;
/**
* Id of the item belonging to this panel. _Tested with snapshot testing._
*/
id: number | string /*.isRequired*/;
/**
* Component that can be passed as prop to `<Panel />`. As an example, a menu dropdown could be used here to handle additional actions for each accordion panel. _Tested with Mocha framework._
*/
panelContentActions?: React.ReactNode;
/**
* Callback that will run whenever there is a keydown on the panel button. Function doesn't change the state of the component.
*/
onKeyDownSummary?: (v: any) => any;
/**
* Callback that will run whenever a panel is toggled. Function should handle state to toggle `expanded` prop. _Tested with Mocha framework._
*/
onTogglePanel: (v: any) => any /*.isRequired*/;
/**
* Ref callback that will pass in panel's `input` tag
*/
refs?: Partial<{
summaryButton?: (v: any) => any;
}>;
/**
* Summary in the span element in the header of this panel. The summary is truncated and so the title element should contain the full text so that it is accessible on hover. _Tested with snapshot testing._
*/
summary: string | React.ReactNode /*.isRequired*/;
/**
* HTML title attribute. _Tested with snapshot testing._
*/
title?: string;
};
import React from 'react';
type Props = {
/**
* The panel content for the Accordion component. Accordion panels should be added as <AccordionPanel />. Event handler for the accordion panels should be added to `<AccordionPanel />`. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._
*/
children?: React.ReactNode;
/**
* Indicates whether item is expanded or not, which should be handled by `onTogglePanel`. _Tested with Mocha framework and snapshot testing._
*/
expanded: boolean /*.isRequired*/;
/**
* Id of the item belonging to this panel. _Tested with snapshot testing._
*/
id: number | string /*.isRequired*/;
/**
* Component that can be passed as prop to `<Panel />`. As an example, a menu dropdown could be used here to handle additional actions for each accordion panel. _Tested with Mocha framework._
*/
panelContentActions?: React.ReactNode;
/**
* Callback that will run whenever there is a keydown on the panel button. Function doesn't change the state of the component.
*/
onKeyDownSummary?: (v: any) => any;
/**
* Callback that will run whenever a panel is toggled. Function should handle state to toggle `expanded` prop. _Tested with Mocha framework._
*/
onTogglePanel: (v: any) => any /*.isRequired*/;
/**
* Ref callback that will pass in panel's `input` tag
*/
refs?: Partial<{
summaryButton?: (v: any) => any;
}>;
/**
* Summary in the span element in the header of this panel. The summary is truncated and so the title element should contain the full text so that it is accessible on hover. _Tested with snapshot testing._
*/
summary: string | React.ReactNode /*.isRequired*/;
/**
* HTML title attribute. _Tested with snapshot testing._
*/
title?: string;
};

function Component(props: Props): JSX.Element;
export default Component;
}
declare function Component(props: Props): React.JSX.Element;
export default Component;
128 changes: 63 additions & 65 deletions components/alert.d.ts
Original file line number Diff line number Diff line change
@@ -1,67 +1,65 @@
declare module '@salesforce/design-system-react/components/alert' {
import React from 'react';
type Props = {
/**
* **Assistive text for accessibility**
* This object is merged with the default props object on every render.
* * `closeButton`: This is a visually hidden label for the close button.
* _Tested with snapshot testing._
*/
assistiveText?: Partial<{
closeButton?: string | React.ReactNode;
}>;
/**
* CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames).
* _Tested with snapshot testing._
*/
className?: any[] | Record<string, any> | string;
/**
* Allows user to click a close button. Banners should be dismissible only if they communicate future impact to the system,
* _Tested with snapshot testing._
*/
dismissible?: boolean;
/**
* Icon of type `~/components/icon`. This icon will be cloned and additional props appended. The default icons are:
* * info variant: `utility:info`
* * error variant: `utility:error`
* * offline variant: `utility:offline`
* * warning variant: `utility:warning`
*
* _Tested with snapshot testing._
*/
icon?: React.ReactNode;
/**
* **Text labels for internationalization**
* This object is merged with the default props object on every render.
* * `heading`: text within heading tag
* * `headingLink`: Text of link that triggers `onClickHeadingLink`. Inline links should pass a keyed array of React components into `labels.heading`.
*
* _Tested with snapshot testing._
*/
labels?: Partial<{
heading?: string | React.ReactNode;
headingLink?: string | React.ReactNode;
}>;
/**
* Triggered by link. _Tested with Mocha testing._
*/
onClickHeadingLink?: (v: any) => any;
/**
* Triggered by close button. This is a controlled component. _Tested with Mocha testing._
*/
onRequestClose?: (v: any) => any;
/**
* Custom styles to be passed to the component. _Tested with Mocha testing._
*/
style?: Record<string, any>;
/**
* The type of alert. _Tested with snapshot testing._
*/
variant: 'error' | 'info' | 'offline' | 'warning' /*.isRequired*/;
};
import React from 'react';
type Props = {
/**
* Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action. View [banner guidelines](https://www.lightningdesignsystem.com/guidelines/messaging/components/banners/).
* **Assistive text for accessibility**
* This object is merged with the default props object on every render.
* * `closeButton`: This is a visually hidden label for the close button.
* _Tested with snapshot testing._
*/
function Component(props: Props): JSX.Element;
export default Component;
}
assistiveText?: Partial<{
closeButton?: string | React.ReactNode;
}>;
/**
* CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames).
* _Tested with snapshot testing._
*/
className?: any[] | Record<string, any> | string;
/**
* Allows user to click a close button. Banners should be dismissible only if they communicate future impact to the system,
* _Tested with snapshot testing._
*/
dismissible?: boolean;
/**
* Icon of type `~/components/icon`. This icon will be cloned and additional props appended. The default icons are:
* * info variant: `utility:info`
* * error variant: `utility:error`
* * offline variant: `utility:offline`
* * warning variant: `utility:warning`
*
* _Tested with snapshot testing._
*/
icon?: React.ReactNode;
/**
* **Text labels for internationalization**
* This object is merged with the default props object on every render.
* * `heading`: text within heading tag
* * `headingLink`: Text of link that triggers `onClickHeadingLink`. Inline links should pass a keyed array of React components into `labels.heading`.
*
* _Tested with snapshot testing._
*/
labels?: Partial<{
heading?: string | React.ReactNode;
headingLink?: string | React.ReactNode;
}>;
/**
* Triggered by link. _Tested with Mocha testing._
*/
onClickHeadingLink?: (v: any) => any;
/**
* Triggered by close button. This is a controlled component. _Tested with Mocha testing._
*/
onRequestClose?: (v: any) => any;
/**
* Custom styles to be passed to the component. _Tested with Mocha testing._
*/
style?: Record<string, any>;
/**
* The type of alert. _Tested with snapshot testing._
*/
variant: 'error' | 'info' | 'offline' | 'warning' /*.isRequired*/;
};
/**
* Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action. View [banner guidelines](https://www.lightningdesignsystem.com/guidelines/messaging/components/banners/).
*/
declare function Component(props: Props): React.JSX.Element;
export default Component;
30 changes: 14 additions & 16 deletions components/alert/container.d.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
declare module '@salesforce/design-system-react/components/alert/container' {
import React from 'react';
type Props = {
/**
* CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames).
*/
className?: any[] | Record<string, any> | string;
/**
* Alert components
*/
children?: React.ReactNode;
};
import React from 'react';
type Props = {
/**
* A fixed container for alert banners.
* CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames).
*/
function Component(props: Props): JSX.Element;
export default Component;
}
className?: any[] | Record<string, any> | string;
/**
* Alert components
*/
children?: React.ReactNode;
};
/**
* A fixed container for alert banners.
*/
declare function Component(props: Props): React.JSX.Element;
export default Component;
Loading