feat(alert): update alert attributes (#275)

* feat(alert): update alert attributes DSY-2760 Co-authored-by: Design system Natura in behalf of Design System Team <[email protected]>
natura-cosmeticos · May 20, 2022 · 7d71f08 · 7d71f08
1 parent 78f878b
commit 7d71f08
Show file tree

Hide file tree

Showing 8 changed files with 531 additions and 1,307 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@naturacosmeticos/natds-rn",
-  "version": "7.28.0",
+  "version": "7.29.0-DSY-2760.2",
   "license": "ISC",
   "main": "build/lib/index.js",
   "keywords": [

diff --git a/src/components/Alert/Alert.device.tsx b/src/components/Alert/Alert.device.tsx
@@ -1,6 +1,12 @@
 import { storiesOf } from '@storybook/react-native'
-import { All, Interactive } from './Alert.stories'
+import {
+  Default, Variants, Types, Icon, Title, Interactive
+} from './Alert.stories'
 
 storiesOf('Alert', module)
-  .add('Variants', All)
+  .add('Default', Default)
+  .add('Variants', Variants)
+  .add('Icon', Icon)
+  .add('Title', Title)
+  .add('Types', Types)
   .add('Interactive', Interactive)
diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
@@ -1,58 +1,144 @@
 import React from 'react'
-import { select, text as textKnob } from '@storybook/addon-knobs'
+import { select, text } from '@storybook/addon-knobs'
 import { Alert } from './Alert'
 
-import {
-  Variants,
-  Types
-} from './Alert.styles'
 import { StoryContainer, StoryWrapper } from '../../common/HelperComponents/StoryContainer'
+import { Types as TypesProps, Variants as VariantsProps } from './Alert.types'
+
+const description = () => `
+---
+
+**NOTE**: This component is available in the following types:
+
+  - ✅ Standard
+
+With the following attribute status:
+
+- **Type:** (available as variant)
+  - ✅ \`contained\` (available as standard)
+  - ✅ \`outlined\`
+- **Color:** (available as type)
+  - ✅ \`success\`
+  - ✅ \`error\`
+  - ✅ \`warning\`
+  - ✅ \`info\`
+  - ✅ \`custom\`
+- ✅ **Title**
+- ✅ **Icon**
+
+---
+`
 
 const alertDefinition = 'An alert displays a short, important message in a way that attracts the user\'s attention without interrupting the user\'s task.'
 
 export default {
   component: Alert,
   parameters: {
-    componentSubtitle: alertDefinition
+    componentSubtitle: alertDefinition,
+    docs: {
+      extractComponentDescription: description
+    }
   },
   title: 'Components|Alert'
 }
 
-const types = {
+const typesMap = {
   error: 'error',
   info: 'info',
   success: 'success',
-  warning: 'warning'
+  warning: 'warning',
+  custom: 'custom'
 }
 
-const variants = {
-  standard: 'standard'
+const variantsMap = {
+  standard: 'standard',
+  outlined: 'outlined',
+  filled: 'filled'
 }
 
-export const All = () => (
+export const Default = () => (
+  <StoryWrapper title="Default">
+    <StoryContainer title="Standard">
+      <Alert title="Title" message={alertDefinition} />
+    </StoryContainer>
+  </StoryWrapper>
+)
+
+export const Variants = () => (
   <StoryWrapper title="Variants">
+    <StoryContainer title="Standard">
+      <Alert variant="standard" title="Title" message={alertDefinition} />
+    </StoryContainer>
+
+    <StoryContainer title="Outlined">
+      <Alert variant="outlined" title="Title" message={alertDefinition} />
+    </StoryContainer>
+  </StoryWrapper>
+)
+
+export const Icon = () => (
+  <StoryWrapper title="Icon">
+    <StoryContainer title="Without Icon">
+      <Alert icon={false} title="Title" message={alertDefinition} />
+    </StoryContainer>
+
+    <StoryContainer title="With Icon">
+      <Alert title="Title" message={alertDefinition} />
+    </StoryContainer>
+  </StoryWrapper>
+)
+
+export const Title = () => (
+  <StoryWrapper title="Title">
+    <StoryContainer title="Without Title">
+      <Alert message={alertDefinition} />
+    </StoryContainer>
+
+    <StoryContainer title="With Title">
+      <Alert title="Title" message={alertDefinition} />
+    </StoryContainer>
+  </StoryWrapper>
+)
+
+export const Types = () => (
+  <StoryWrapper title="Types">
+    <StoryContainer title="Info">
+      <Alert type="info" title="Title" message={alertDefinition} />
+    </StoryContainer>
+
     <StoryContainer title="Success">
-      <Alert type="success" variant="standard" title="Title" message={alertDefinition} />
+      <Alert type="success" title="Title" message={alertDefinition} />
     </StoryContainer>
 
     <StoryContainer title="Error">
-      <Alert type="error" variant="standard" title="Title" message={alertDefinition} />
+      <Alert type="error" title="Title" message={alertDefinition} />
     </StoryContainer>
 
     <StoryContainer title="Warning">
-      <Alert type="warning" variant="standard" title="Title" message={alertDefinition} />
+      <Alert type="warning" title="Title" message={alertDefinition} />
     </StoryContainer>
 
-    <StoryContainer title="Info">
-      <Alert type="info" variant="standard" title="Title" message={alertDefinition} />
+    <StoryContainer title="Custom">
+      <Alert
+        type="custom"
+        title="Title"
+        message={alertDefinition}
+        variant="outlined"
+        backgroundColorName="secondaryDark"
+        borderColorName="secondaryDark"
+        titleColorName="secondaryDark"
+        messageColorName="secondaryDark"
+        iconColorName="secondaryDark"
+      />
     </StoryContainer>
   </StoryWrapper>
 )
+
 export const Interactive = () => (
   <Alert
-    title={textKnob('Text', 'Title')}
-    variant={select('Variant', variants, 'standard') as Variants}
-    type={select('Type', types, 'success') as Types}
-    message={textKnob('Message', alertDefinition)}
+    title={text('Text', 'Title')}
+    variant={select('Variant', variantsMap, 'standard') as VariantsProps}
+    type={select('Type', typesMap, 'info') as TypesProps}
+    message={text('Message', alertDefinition)}
   />
 )
diff --git a/src/components/Alert/Alert.styles.tsx b/src/components/Alert/Alert.styles.tsx
@@ -1,71 +1,61 @@
 /* eslint-disable max-len */
-import React, { ReactNode } from 'react'
 import styled from 'styled-components/native'
 import {
   getSpacingSmall,
   getSpacingTiny,
   Theme
 } from '../../common/themeSelectors'
-
-export type Variants = 'standard' | 'outlined' | 'filled';
-export type Types = 'success' | 'error' | 'warning' | 'info';
+import {
+  AlertCustomProps, AlertProps, Types, Variants
+} from './Alert.types'
 
 interface BaseAlert {
   theme: Theme;
 }
 
-interface AlertWrapperProp {
-  theme: Theme;
-  type: Types;
-  variant: Variants;
-  testID?: string;
-  children: ReactNode;
-}
+type AlertWrapperProp = BaseAlert & AlertProps
+
+const getAlertStyles = (
+  type: Types = 'info', variant: Variants = 'standard', backgroundColorName = 'link', borderColorName = 'link'
+) => (theme: Theme) => {
+  const alertStylesMap = {
+    info: 'link',
+    error: 'alert',
+    success: 'success',
+    warning: 'warning'
+  }
 
-const getAlertStyles = (type: Types) => {
   const styles = {
-    error: {
-      backgroundColor: '#F7DDD8'
+    standard: {
+      backgroundColor: `${theme.color[alertStylesMap[type]]}29`
     },
-    info: {
-      backgroundColor: '#D7E6F1'
+    filled: {
+      backgroundColor: `${theme.color[alertStylesMap[type]]}29`
     },
-    success: {
-      backgroundColor: '#E0EBDA'
+    outlined: {
+      backgroundColor: `${theme.color[alertStylesMap[type]]}29`,
+      borderColor: theme.color[alertStylesMap[type]]
     },
-    warning: {
-      backgroundColor: '#FBF2DA'
+    custom: {
+      backgroundColor: `${theme.color[backgroundColorName]}29`,
+      borderColor: theme.color[borderColorName]
     }
   }
 
-  return styles[type]
+  return type !== 'custom' ? styles[variant] : styles.custom
 }
 
-const AlertWrapperComponent = styled.View<AlertWrapperProp>(({ theme, type }: AlertWrapperProp) => ({
-  ...getAlertStyles(type),
+export const AlertWrapper = styled.View<AlertWrapperProp>(({
+  theme, type, variant, backgroundColorName, borderColorName
+}: AlertCustomProps & BaseAlert & AlertWrapperProp) => ({
+  ...getAlertStyles(type, variant, backgroundColorName, borderColorName)(theme),
+  borderWidth: variant === 'outlined' ? 1 : 0,
   borderRadius: theme.alert.borderRadius,
   flexDirection: 'row',
   margin: getSpacingSmall(theme),
   padding: getSpacingSmall(theme)
 }))
 
-export const AlertWrapper: React.FC<AlertWrapperProp> = ({
-  theme,
-  type,
-  variant,
-  testID,
-  children
-}: AlertWrapperProp) => (
-  <AlertWrapperComponent
-    theme={theme}
-    type={type}
-    variant={variant}
-    testID={testID}
-  >
-    {children}
-  </AlertWrapperComponent>
-)
-
 export const AlertContent = styled.View<BaseAlert>(() => ({
   flexDirection: 'column',
   flexShrink: 1
@@ -76,8 +66,9 @@ export const IconContent = styled.View<BaseAlert>(({ theme }) => ({
   marginTop: 2
 }))
 
-export const AlertTitle = styled.Text<BaseAlert>(({ theme }) => ({
+export const AlertTitle = styled.Text<AlertWrapperProp>(({ theme, titleColorName = 'neutral900' }: AlertCustomProps & BaseAlert) => ({
   flexWrap: 'wrap',
+  color: theme.color[titleColorName],
   fontFamily: theme.alert.title.primary.fontFamily,
   fontSize: theme.alert.title.fontSize,
   fontWeight: theme.alert.title.primary.fontWeight,
@@ -86,8 +77,8 @@ export const AlertTitle = styled.Text<BaseAlert>(({ theme }) => ({
   marginBottom: getSpacingTiny(theme)
 }))
 
-export const AlertText = styled.Text<BaseAlert>(({ theme }) => ({
-  color: '#333333',
+export const AlertText = styled.Text<AlertWrapperProp>(({ theme, messageColorName = 'neutral900' }: AlertCustomProps & BaseAlert) => ({
+  color: theme.color[messageColorName],
   fontFamily: theme.alert.content.primary.fontFamily,
   fontSize: theme.alert.content.fontSize,
   fontWeight: theme.alert.content.primary.fontWeight,