diff --git a/ui/components/component-library/banner-tip/README.mdx b/ui/components/component-library/banner-tip/README.mdx index 051cd6f4d..eb1b8b35c 100644 --- a/ui/components/component-library/banner-tip/README.mdx +++ b/ui/components/component-library/banner-tip/README.mdx @@ -12,14 +12,8 @@ import { BannerBase } from '..'; ## Props -The `BannerTip` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props - -The `BannerTip` accepts all `BannerBase` component props below - - - ### Logo Type Use the `logoType` prop with the `BannerTipLogoType` enum from `../../component-library` to change the context of `BannerTip`. @@ -87,12 +81,15 @@ The `children` prop is an alternative to `description` for `BannerTip` when more ```jsx -import { Size } from '../../../helpers/constants/design-system'; -import { BannerTip } from '../../component-library'; +import { BannerTip, ButtonLinkSize } from '../../component-library'; Description shouldn't repeat title. 1-3 lines. Can contain a - + hyperlink. ; @@ -113,8 +110,7 @@ import { BannerTip, IconName } from '../../component-library'; title="Action prop demo" actionButtonLabel="Action" actionButtonProps={{ - icon: IconName.Arrow2Right, // TODO: change to iconName - iconPositionRight: true, + endIconName: IconName.Arrow2Right, }} actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')} > diff --git a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.tsx.snap similarity index 84% rename from ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap rename to ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.tsx.snap index b44382369..2cde6a2c4 100644 --- a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap +++ b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.tsx.snap @@ -7,11 +7,11 @@ exports[`BannerTip should render BannerTip element correctly 1`] = ` data-testid="bannerTip" >
diff --git a/ui/components/component-library/banner-tip/banner-tip.constants.ts b/ui/components/component-library/banner-tip/banner-tip.constants.ts deleted file mode 100644 index 088c6fcdf..000000000 --- a/ui/components/component-library/banner-tip/banner-tip.constants.ts +++ /dev/null @@ -1,4 +0,0 @@ -export enum BannerTipLogoType { - Greeting = 'greeting', - Chat = 'chat', -} diff --git a/ui/components/component-library/banner-tip/banner-tip.js b/ui/components/component-library/banner-tip/banner-tip.js deleted file mode 100644 index d6ccd0a78..000000000 --- a/ui/components/component-library/banner-tip/banner-tip.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import { - AlignItems, - BorderColor, - DISPLAY, -} from '../../../helpers/constants/design-system'; -import Box from '../../ui/box'; -import { BannerBase } from '..'; -import { BannerTipLogoType } from './banner-tip.constants'; - -export const BannerTip = ({ - children, - className, - logoType = BannerTipLogoType.Greeting, - logoWrapperProps, - logoProps, - startAccessory, - ...props -}) => { - return ( - - - - ) - } - borderColor={BorderColor.borderDefault} - className={classnames('mm-banner-tip', className)} - {...props} - > - {children} - - ); -}; - -BannerTip.propTypes = { - /** - * An additional className to apply to the Banner - */ - className: PropTypes.string, - /** - * Use the `logoType` prop with the `BannerTipLogoType` enum from `../../component-library` to change the logo image of `BannerTip`. - * Possible options: `BannerTipLogoType.Greeting`(Default), `BannerTipLogoType.Chat`, - */ - logoType: PropTypes.oneOf(Object.values(BannerTipLogoType)), - /** - * logoProps accepts all the props from Box - */ - logoProps: PropTypes.object, - /** - * logoWrapperProps accepts all the props from Box - */ - logoWrapperProps: PropTypes.object, - /** - * The start(defualt left) content area of BannerBase - */ - startAccessory: PropTypes.node, - /** - * BannerTip accepts all the props from BannerBase - */ - ...BannerBase.propTypes, -}; diff --git a/ui/components/component-library/banner-tip/banner-tip.stories.js b/ui/components/component-library/banner-tip/banner-tip.stories.tsx similarity index 67% rename from ui/components/component-library/banner-tip/banner-tip.stories.js rename to ui/components/component-library/banner-tip/banner-tip.stories.tsx index 117a9e1b0..0af4306b7 100644 --- a/ui/components/component-library/banner-tip/banner-tip.stories.js +++ b/ui/components/component-library/banner-tip/banner-tip.stories.tsx @@ -1,32 +1,20 @@ import React, { useState } from 'react'; +import { Meta, StoryFn } from '@storybook/react'; import { - DISPLAY, - FLEX_DIRECTION, - Size, + Display, + FlexDirection, } from '../../../helpers/constants/design-system'; -import Box from '../../ui/box/box'; -import { ButtonLink, ButtonPrimary, Icon, IconName } from '..'; +import { + ButtonLink, + ButtonLinkSize, + ButtonPrimary, + Box, + Icon, + IconName, +} from '..'; import README from './README.mdx'; import { BannerTip, BannerTipLogoType } from '.'; -const marginSizeControlOptions = [ - undefined, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 'auto', -]; - export default { title: 'Components/ComponentLibrary/BannerTip', component: BannerTip, @@ -44,30 +32,12 @@ export default { className: { control: 'text', }, - marginTop: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - marginRight: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - marginBottom: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - marginLeft: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, }, -}; +} as Meta; -export const DefaultStory = (args) => { +const Template: StoryFn = (args) => ; + +export const DefaultStory: StoryFn = (args) => { const onClose = () => console.log('BannerTip onClose trigger'); return ; }; @@ -80,9 +50,9 @@ DefaultStory.args = { DefaultStory.storyName = 'Default'; -export const LogoType = (args) => { +export const LogoType: StoryFn = (args) => { return ( - + { ); }; -export const Title = (args) => { - return ; -}; +export const Title = Template.bind({}); Title.args = { title: 'Title is sentence case no period', children: 'Pass only a string through the title prop', }; -export const Description = (args) => { - return ; -}; +export const Description = Template.bind({}); Description.args = { title: 'Description vs children', @@ -116,14 +82,14 @@ Description.args = { 'Pass only a string through the description prop or you can use children if the contents require more', }; -export const Children = (args) => { +export const Children: StoryFn = (args) => { return ( Description shouldn't repeat title. 1-3 lines. Can contain a{' '} hyperlink. @@ -131,23 +97,20 @@ export const Children = (args) => { ); }; -export const ActionButton = (args) => { - return ; -}; +export const ActionButton = Template.bind({}); ActionButton.args = { title: 'Action prop demo', actionButtonLabel: 'Action', actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'), actionButtonProps: { - iconName: IconName.Arrow2Right, - iconPositionRight: true, + endIconName: IconName.Arrow2Right, }, children: 'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName', }; -export const OnClose = (args) => { +export const OnClose: StoryFn = (args) => { const [isShown, setShown] = useState(true); const bannerTipToggle = () => { if (isShown) { @@ -171,7 +134,7 @@ OnClose.args = { children: 'Click the close button icon to hide this notifcation', }; -export const StartAccessory = (args) => { +export const StartAccessory: StoryFn = (args) => { return ( { <> should render BannerTip element correctly should render BannerTip element correctly @@ -39,7 +45,9 @@ describe('BannerTip', () => { expect(getByTestId('banner-tip-greeting')).toHaveClass( 'mm-banner-tip--logo', ); + expect(getByTestId('banner-tip-greeting')).toHaveClass('custom-logo-class'); expect(getByTestId('banner-tip-chat')).toHaveClass('mm-banner-tip--logo'); + expect(getByTestId('banner-tip-chat')).toHaveClass('custom-logo-class'); }); it('should render with added classname', () => { diff --git a/ui/components/component-library/banner-tip/banner-tip.tsx b/ui/components/component-library/banner-tip/banner-tip.tsx new file mode 100644 index 000000000..e7d67e60c --- /dev/null +++ b/ui/components/component-library/banner-tip/banner-tip.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import classnames from 'classnames'; +import { + AlignItems, + BorderColor, + Display, +} from '../../../helpers/constants/design-system'; +import { BannerBase, Box } from '..'; +import { BoxProps, PolymorphicRef } from '../box'; +import { BannerBaseProps } from '../banner-base'; +import { + BannerTipComponent, + BannerTipLogoType, + BannerTipProps, +} from './banner-tip.types'; + +export const BannerTip: BannerTipComponent = React.forwardRef( + ( + { + children, + className = '', + logoType = BannerTipLogoType.Greeting, + logoWrapperProps, + logoProps, + startAccessory, + ...props + }: BannerTipProps, + ref?: PolymorphicRef, + ) => ( + + )} + className={classnames( + 'mm-banner-tip--logo', + logoProps?.className ?? '', + )} + /> + + ) + } + borderColor={BorderColor.borderDefault} + className={classnames('mm-banner-tip', className)} + {...(props as BannerBaseProps)} + > + {children} + + ), +); diff --git a/ui/components/component-library/banner-tip/banner-tip.types.ts b/ui/components/component-library/banner-tip/banner-tip.types.ts new file mode 100644 index 000000000..fd7e8d837 --- /dev/null +++ b/ui/components/component-library/banner-tip/banner-tip.types.ts @@ -0,0 +1,40 @@ +import React from 'react'; +import type { BannerBaseStyleUtilityProps } from '../banner-base/banner-base.types'; +import type { PolymorphicComponentPropWithRef, BoxProps } from '../box'; + +export enum BannerTipLogoType { + Greeting = 'greeting', + Chat = 'chat', +} + +export interface BannerTipStyleUtilityProps + extends BannerBaseStyleUtilityProps { + /** + * An additional className to apply to the Banner + */ + className?: string; + /** + * Use the `logoType` prop with the `BannerTipLogoType` enum from `../../component-library` to change the logo image of `BannerTip`. + * Possible options: `BannerTipLogoType.Greeting`(Default), `BannerTipLogoType.Chat`, + */ + logoType?: BannerTipLogoType; + /** + * logoProps accepts all the props from Box + */ + logoProps?: BoxProps<'span'>; + /** + * logoWrapperProps accepts all the props from Box + */ + logoWrapperProps?: BoxProps<'span'>; + /** + * The start(default left) content area of BannerBase + */ + startAccessory?: React.ReactNode; +} + +export type BannerTipProps = + PolymorphicComponentPropWithRef; + +export type BannerTipComponent = ( + props: BannerTipProps, +) => React.ReactElement | null; diff --git a/ui/components/component-library/banner-tip/index.js b/ui/components/component-library/banner-tip/index.js deleted file mode 100644 index d49ed487c..000000000 --- a/ui/components/component-library/banner-tip/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { BannerTip } from './banner-tip'; -export { BannerTipLogoType } from './banner-tip.constants'; diff --git a/ui/components/component-library/banner-tip/index.ts b/ui/components/component-library/banner-tip/index.ts new file mode 100644 index 000000000..1503a86ae --- /dev/null +++ b/ui/components/component-library/banner-tip/index.ts @@ -0,0 +1,3 @@ +export { BannerTip } from './banner-tip'; +export { BannerTipLogoType } from './banner-tip.types'; +export type { BannerTipProps } from './banner-tip.types';