feat(alert): v1

CHANGELOG.md

@@ -23,6 +23,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Add aria posinset and setsize, hide menu indicator from narration @jurokapsiar ([#1066](https://github.com/stardust-ui/react/pull/1066))
 
+### Features
+- Add `Alert` component @Bugaa92 ([#1063](https://github.com/stardust-ui/react/pull/1063))
+
 <!--------------------------------[ v0.23.1 ]------------------------------- -->
 ## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.23.0...v0.23.1)

docs/src/examples/components/Alert/Rtl/AlertExample.rtl.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleRtl = () => <Alert content="مرحبا العالم" />
+
+export default AlertExampleRtl

docs/src/examples/components/Alert/Rtl/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
+
+const Rtl = () => (
+  <NonPublicSection title="Rtl">
+    <ComponentExample examplePath="components/Alert/Rtl/AlertExample.rtl" />
+  </NonPublicSection>
+)
+
+export default Rtl

docs/src/examples/components/Alert/Types/AlertExample.shorthand.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExample = () => <Alert content="This is a default alert" />
+
+export default AlertExample

docs/src/examples/components/Alert/Types/AlertExample.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExample = () => <Alert>This is a default alert</Alert>
+
+export default AlertExample

docs/src/examples/components/Alert/Types/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Alert."
+      examplePath="components/Alert/Types/AlertExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Alert/Variations/AlertExampleAction.shorthand.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+class AlertExampleClosable extends React.Component<{}, { open: boolean }> {
+  state = { open: true }
+
+  render() {
+    return (
+      this.state.open && (
+        <Alert
+          content="This is a closable alert"
+          action={{ icon: 'close', onClick: () => this.setState({ open: false }) }}
+        />
+      )
+    )
+  }
+}
+
+export default AlertExampleClosable

docs/src/examples/components/Alert/Variations/AlertExampleAttached.shorthand.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Alert, Input } from '@stardust-ui/react'
+
+const AlertExampleShorthand = () => (
+  <>
+    <Alert attached content="This is a top attached alert" />
+    <Input fluid placeholder="Name..." />
+    <br /> <br />
+    <Input fluid placeholder="Surname..." />
+    <Alert attached="bottom" content="This is a bottom attached alert" />
+  </>
+)
+
+export default AlertExampleShorthand

docs/src/examples/components/Alert/Variations/AlertExampleAttached.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Alert, Input } from '@stardust-ui/react'
+
+const AlertExampleShorthand = () => (
+  <>
+    <Alert attached>This is a top attached alert</Alert>
+    <Input fluid placeholder="Name..." />
+    <br /> <br />
+    <Input fluid placeholder="Surname..." />
+    <Alert attached="bottom">This is a bottom attached alert</Alert>
+  </>
+)
+
+export default AlertExampleShorthand

docs/src/examples/components/Alert/Variations/AlertExampleDanger.shorthand.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleDanger = () => <Alert danger content="This is a danger alert" />
+
+export default AlertExampleDanger

docs/src/examples/components/Alert/Variations/AlertExampleDanger.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleDanger = () => <Alert danger>This is a danger alert</Alert>
+
+export default AlertExampleDanger

docs/src/examples/components/Alert/Variations/AlertExampleInfo.shorthand.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleInfo = () => <Alert info content="This is an informational alert" />
+
+export default AlertExampleInfo

docs/src/examples/components/Alert/Variations/AlertExampleInfo.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleInfo = () => <Alert info>This is an informational alert</Alert>
+
+export default AlertExampleInfo

docs/src/examples/components/Alert/Variations/AlertExampleSuccess.shorthand.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleSuccess = () => <Alert success content="This is a success alert" />
+
+export default AlertExampleSuccess

docs/src/examples/components/Alert/Variations/AlertExampleSuccess.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleSuccess = () => <Alert success>This is a success alert</Alert>
+
+export default AlertExampleSuccess

docs/src/examples/components/Alert/Variations/AlertExampleWarning.shorthand.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleWarning = () => <Alert warning content="This is a warning alert" />
+
+export default AlertExampleWarning

docs/src/examples/components/Alert/Variations/AlertExampleWarning.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Alert } from '@stardust-ui/react'
+
+const AlertExampleWarning = () => <Alert warning>This is a warning alert</Alert>
+
+export default AlertExampleWarning

docs/src/examples/components/Alert/Variations/index.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title="Variations">
+    <ComponentExample
+      title="Info"
+      description="An alert may be formatted to display information."
+      examplePath="components/Alert/Variations/AlertExampleInfo"
+    />
+    <ComponentExample
+      title="Warning"
+      description="An alert may be formatted to display a warning message."
+      examplePath="components/Alert/Variations/AlertExampleWarning"
+    />
+    <ComponentExample
+      title="Success"
+      description="An alert may be formatted to display a successful message."
+      examplePath="components/Alert/Variations/AlertExampleSuccess"
+    />
+    <ComponentExample
+      title="Danger"
+      description="An alert may be formatted to display a danger message."
+      examplePath="components/Alert/Variations/AlertExampleDanger"
+    />
+    <ComponentExample
+      title="Attached"
+      description="An Alert can be can be formatted to attach itself to other content."
+      examplePath="components/Alert/Variations/AlertExampleAttached"
+    />
+    <ComponentExample
+      title="Action"
+      description="An Alert can provide the user with an action. Click on the icon to see the effect."
+      examplePath="components/Alert/Variations/AlertExampleAction"
+    />
+  </ExampleSection>
+)
+
+export default Variations

docs/src/examples/components/Alert/index.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import Rtl from './Rtl'
+import Types from './Types'
+import Variations from './Variations'
+
+const AlertExamples = () => (
+  <>
+    <Types />
+    <Variations />
+    <Rtl />
+  </>
+)
+
+export default AlertExamples

packages/react/src/components/Alert/Alert.tsx

@@ -0,0 +1,119 @@
+import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+import {
+  UIComponent,
+  UIComponentProps,
+  ContentComponentProps,
+  commonPropTypes,
+  customPropTypes,
+  childrenExist,
+  rtlTextContainer,
+} from '../../lib'
+import { RenderResultConfig } from 'src/lib/renderComponent'
+import { defaultBehavior } from '../../lib/accessibility'
+import { Accessibility } from '../../lib/accessibility/types'
+import { ReactProps, ShorthandValue } from '../../types'
+import Box from '../Box/Box'
+import Button, { ButtonProps } from '../Button/Button'
+
+export interface AlertSlotClassNames {
+  content: string
+  action: string
+}
+
+export interface AlertProps extends UIComponentProps, ContentComponentProps<ShorthandValue> {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
+  /** Button shorthand for the action slot. */
+  action?: ShorthandValue<ButtonProps>
+
+  /** Controls Alert's relation to neighboring items. */
+  attached?: boolean | 'top' | 'bottom'
+
+  /** An alert may be formatted to display a danger message. */
+  danger?: boolean
+
+  /** An alert may be formatted to display information. */
+  info?: boolean
+
+  /** An alert may be formatted to display a successful message. */
+  success?: boolean
+
+  /** An alert may be formatted to display a warning message. */
+  warning?: boolean
+}
+
+/**
+ * A Alert displays information that explains nearby content.
+ * @accessibility
+ * Other considerations:
+ *  - if Alert contains action slot, textual representation needs to be provided by using 'title', 'aria-label' or 'aria-labelledby' attributes
+ */
+class Alert extends UIComponent<ReactProps<AlertProps>> {
+  static displayName = 'Alert'
+  static className = 'ui-alert'
+
+  static slotClassNames: AlertSlotClassNames = {
+    content: `${Alert.className}__content`,
+    action: `${Alert.className}__action`,
+  }
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({ content: 'shorthand' }),
+    action: customPropTypes.itemShorthand,
+    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
+    danger: PropTypes.bool,
+    info: PropTypes.bool,
+    success: PropTypes.bool,
+    warning: PropTypes.bool,
+  }
+
+  static defaultProps = { accessibility: defaultBehavior }
+
+  renderContent = ({ styles }: RenderResultConfig<AlertProps>) => {
+    const { action, content } = this.props
+
+    return (
+      <>
+        {Box.create(content, {
+          defaultProps: {
+            className: Alert.slotClassNames.content,
+            styles: styles.content,
+          },
+        })}
+        {Button.create(action, {
+          defaultProps: {
+            iconOnly: true,
+            text: true,
+            className: Alert.slotClassNames.action,
+            styles: styles.action,
+          },
+        })}
+      </>
+    )
+  }
+
+  renderComponent(config: RenderResultConfig<AlertProps>) {
+    const { accessibility, classes, ElementType, unhandledProps } = config
+    const { children, content } = this.props
+
+    return (
+      <ElementType
+        className={classes.root}
+        {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+      >
+        {childrenExist(children) ? children : this.renderContent(config)}
+      </ElementType>
+    )
+  }
+}
+
+export default Alert

packages/react/src/components/Button/Button.tsx

@@ -82,7 +82,7 @@ export interface ButtonState {
  * @accessibility
  * Other considerations:
  *  - for disabled buttons, add 'disabled' attribute so that the state is properly recognized by the screen reader
- *  - if button includes icon only, textual representation needs to be provided by using 'title', 'aria-label', or 'aria-labelledby' attributes
+ *  - if button includes icon only, textual representation needs to be provided by using 'title', 'aria-label' or 'aria-labelledby' attributes
  */
 class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
   static create: Function

packages/react/src/index.ts

@@ -12,6 +12,8 @@ export * from './themes/types'
 
 export { default as Accordion, AccordionProps } from './components/Accordion/Accordion'
 
+export { default as Alert, AlertProps } from './components/Alert/Alert'
+
 export { default as Attachment, AttachmentProps } from './components/Attachment/Attachment'
 
 export { default as Avatar, AvatarProps } from './components/Avatar/Avatar'

packages/react/src/themes/teams/componentStyles.ts

@@ -2,6 +2,8 @@ export { default as Accordion } from './components/Accordion/accordionStyles'
 export { default as AccordionContent } from './components/Accordion/accordionContentStyles'
 export { default as AccordionTitle } from './components/Accordion/accordionTitleStyles'
 
+export { default as Alert } from './components/Alert/alertStyles'
+
 export { default as Attachment } from './components/Attachment/attachmentStyles'
 
 export { default as Avatar } from './components/Avatar/avatarStyles'

packages/react/src/themes/teams/componentVariables.ts

@@ -2,6 +2,8 @@ export { default as AccordionContent } from './components/Accordion/accordionCon
 
 export { default as Attachment } from './components/Attachment/attachmentVariables'
 
+export { default as Alert } from './components/Alert/alertVariables'
+
 export { default as Avatar } from './components/Avatar/avatarVariables'
 
 export { default as Button } from './components/Button/buttonVariables'