@edvisor/product-language 0.10.8 → 0.10.9

package/src/lib/components/alert-banner/alert-banner.test.tsx

@@ -0,0 +1,93 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { AlertBanner } from './alert-banner'
+
+
+describe('Alert banner tests', () => {
+  it('should render the alert banner when attribute open is true', async () => {
+    render (
+      <AlertBanner
+        open={true}
+        onClose={() => { return }}
+      >
+        Alert Banner
+      </AlertBanner>
+    )
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+  })
+  it('should not render the close button by default', async () => {
+    const handleClose = jest.fn()
+
+    render (
+      <AlertBanner
+        open={true}
+        onClose={handleClose}
+      >
+        Alert Banner
+      </AlertBanner>
+    )
+
+    expect(handleClose).not.toHaveBeenCalled()
+    const closeButton = screen.queryByLabelText('Close')
+    expect(closeButton).not.toBeInTheDocument()
+
+  })
+  it('should render the close button and handle the close function', async () => {
+    const handleClose = jest.fn()
+
+    render (
+      <AlertBanner
+        open={true}
+        onClose={handleClose}
+        dismissible={true}
+      >
+        Alert Banner
+      </AlertBanner>
+    )
+
+    expect(handleClose).not.toHaveBeenCalled()
+    const closeButton = screen.getByLabelText('Close')
+    expect(closeButton).toBeInTheDocument()
+    await userEvent.click(closeButton)
+    expect(handleClose).toHaveBeenCalled()
+
+  })
+  it('should render the primary action button and handle event after click', async () => {
+    const handlePrimaryButtonClick = jest.fn()
+
+    render (
+      <AlertBanner
+        primaryButtonLabel="Do thing!"
+        onPrimaryAction={handlePrimaryButtonClick}
+      >
+        Alert Banner
+      </AlertBanner>
+    )
+
+    expect(handlePrimaryButtonClick).not.toHaveBeenCalled()
+    const primaryButton = screen.getByText('Do thing!')
+    expect(primaryButton).toBeInTheDocument()
+    await userEvent.click(primaryButton)
+    expect(handlePrimaryButtonClick).toHaveBeenCalled()
+
+  })
+  it('should render the secondary action button and handle event after click', async () => {
+    const handleSecondaryButtonClick = jest.fn()
+
+    render (
+      <AlertBanner
+        secondaryButtonLabel="Do other thing!"
+        onSecondaryAction={handleSecondaryButtonClick}
+      >
+        Alert Banner
+      </AlertBanner>
+    )
+
+    expect(handleSecondaryButtonClick).not.toHaveBeenCalled()
+    const primaryButton = screen.getByText('Do other thing!')
+    expect(primaryButton).toBeInTheDocument()
+    await userEvent.click(primaryButton)
+    expect(handleSecondaryButtonClick).toHaveBeenCalled()
+
+  })
+})

package/src/lib/components/alert-banner/alert-banner.tsx

@@ -0,0 +1,117 @@
+import styled from 'styled-components'
+import { FC, Hex, is, isDefined, Nothing, PropsWithChildren, safeCallback } from '@helpers'
+import { AlertLevelProps, getBackgroundColor, getBorderColor, getIcon } from './alert-level-flags'
+import { Gap, Padding } from '@foundations'
+import { CardFrame } from 'components/card/atoms'
+import { IconMinor } from 'components/icon'
+import { Button } from 'components/molecules/button'
+import { Body} from 'components/typography'
+interface IAlertBannerProps extends PropsWithChildren {
+  dismissible?: boolean
+  className?: string
+  open?: boolean
+  primaryButtonLabel?: string
+  secondaryButtonLabel?: string
+  onPrimaryAction?: () => void
+  onSecondaryAction?: () => void
+  onClose?: () => void
+}
+
+export type AlertBannerProps = IAlertBannerProps & AlertLevelProps
+
+const InCardFrame = styled(CardFrame).attrs({ as: 'div' })<{ background: Hex, border: Hex}>`
+  display: flex;
+  padding: ${Padding.m};
+  width: fill-available;
+  position: relative;
+  flex-wrap: wrap;
+  background: ${({ background }) => background};
+  border: 1px solid ${({ border }) => border};
+`
+
+const IconContainer = styled.div<{ iconColor: Hex }>`
+  width: fit-content;
+  svg[role='icon'] {
+    position: initial;
+    path {
+      fill: ${(props) => props.iconColor};
+    }
+  }
+`
+
+const AlertFooter = styled.footer`
+  width: 100%;
+  padding: ${Padding.m} ${Padding.xl} ${Padding.none} ;
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  gap: ${Gap.xs};
+`
+
+const Content = styled(Body)`
+  padding-left: ${Padding.m};
+  flex: 1;
+  overflow: auto;
+`
+
+const CloseButton = styled(IconMinor.Xmark)`
+  cursor: pointer;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  border-radius: 3px;
+`
+
+export const AlertBanner: FC<AlertBannerProps> = (props) => {
+  const {
+    open = true,
+    dismissible = false,
+    primaryButtonLabel,
+    secondaryButtonLabel,
+    onPrimaryAction,
+    onSecondaryAction,
+    onClose,
+  } = props
+
+  const background = getBackgroundColor(props)
+  const border = getBorderColor(props)
+
+  const { icon: LevelIcon, color: iconColor }  = getIcon(props)
+
+  const handleClose = () => {
+    safeCallback(onClose)
+  }
+
+  if(!is(open)) {
+    return <Nothing />
+  }
+
+  return (
+    <InCardFrame role="alert" background={background} border={border}  className={props.className}>
+      <IconContainer iconColor={iconColor}>
+        <LevelIcon></LevelIcon>
+      </IconContainer>
+      <Content>
+        {props.children}
+      </Content>
+      { is(dismissible)
+        ? <CloseButton aria-label="Close" onClick={handleClose}></CloseButton>
+        : <Nothing></Nothing>
+      }
+
+      { isDefined(primaryButtonLabel) || isDefined(secondaryButtonLabel)
+        ? <AlertFooter>
+          { isDefined(primaryButtonLabel)
+            ? <Button outline onClick={onPrimaryAction} name="alert-banner-primary-button">{primaryButtonLabel}</Button>
+            : <Nothing />
+          }
+          { isDefined(secondaryButtonLabel)
+            ? <Button plain subtle onClick={onSecondaryAction} name="alert-banner-secondary-button">{secondaryButtonLabel}</Button>
+            : <Nothing />
+          }
+        </AlertFooter>
+        : <Nothing />
+      }
+    </InCardFrame>
+  )
+}

package/src/lib/components/alert-banner/alert-level-flags.ts

@@ -0,0 +1,101 @@
+// this file was generated, but it is safe to modify
+import { Borders, Surface, Icons } from '@foundations'
+import { bitwiseOr, Hex, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+import { ComponentType } from 'react'
+import { Icon } from '../icon'
+
+const enum AlertLevel {
+  neutral = 1,
+  info = 2,
+  success = 4,
+  warning = 8,
+  critical = 16,
+}
+
+type AlertLevels<T> = MappedEnum<typeof AlertLevel, T>
+
+function toAlertLevel(n: number): AlertLevel {
+  switch (n) {
+    case AlertLevel.neutral:
+      return AlertLevel.neutral
+    case AlertLevel.info:
+      return AlertLevel.info
+    case AlertLevel.success:
+      return AlertLevel.success
+    case AlertLevel.warning:
+      return AlertLevel.warning
+    case AlertLevel.critical:
+      return AlertLevel.critical
+    default:
+      return AlertLevel.neutral
+  }
+}
+
+export type AlertLevelProps = Partial<RequireOnlyOne<AlertLevels<boolean>>> &
+  PropsWithChildren
+
+const AlertLevelBackgroundColors = {
+  [AlertLevel.neutral]: Surface.Neutral.Subdued,
+  [AlertLevel.info]: Surface.Highlight.Subdued,
+  [AlertLevel.success]: Surface.Success.Subdued,
+  [AlertLevel.warning]: Surface.Warning.Subdued,
+  [AlertLevel.critical]: Surface.Critical.Subdued,
+}
+
+const AlertLevelBorderColors = {
+  [AlertLevel.neutral]: Borders.Default.Default,
+  [AlertLevel.info]: Borders.Highlight.Subdued,
+  [AlertLevel.success]: Borders.Success.Subdued,
+  [AlertLevel.warning]: Borders.Warning.Subdued,
+  [AlertLevel.critical]: Borders.Critical.Subdued,
+}
+
+const AlertLevelIcons = {
+  [AlertLevel.neutral]: { icon: Icon.CircleInfo, color: Icons.Default },
+  [AlertLevel.info]: { icon: Icon.CircleInfo, color: Icons.Highlight },
+  [AlertLevel.success]: { icon: Icon.CircleCheck, color: Icons.Success },
+  [AlertLevel.warning]: { icon: Icon.TriangleExclamation, color: Icons.Warning },
+  [AlertLevel.critical]: { icon: Icon.DiamondExclamation, color: Icons.Critical },
+}
+
+export function getBackgroundColor(props: AlertLevelProps): Hex {
+  return AlertLevelBackgroundColors[
+    toAlertLevel(
+      bitwiseOr([
+        props.neutral,
+        props.info,
+        props.success,
+        props.warning,
+        props.critical,
+      ])
+    )
+  ]
+}
+
+export function getBorderColor(props: AlertLevelProps): Hex {
+  return AlertLevelBorderColors[
+    toAlertLevel(
+      bitwiseOr([
+        props.neutral,
+        props.info,
+        props.success,
+        props.warning,
+        props.critical,
+      ])
+    )
+  ]
+}
+
+export function getIcon(props: AlertLevelProps): { icon: ComponentType, color: Hex } {
+  return AlertLevelIcons[
+    toAlertLevel(
+      bitwiseOr([
+        props.neutral,
+        props.info,
+        props.success,
+        props.warning,
+        props.critical,
+      ])
+    )
+  ]
+}

package/src/lib/components/alert-banner/index.ts

@@ -0,0 +1 @@
+export * from './alert-banner'

package/src/lib/components/alert-banner/storybook/alert-banner.stories.mdx

@@ -0,0 +1,67 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Card, SpaceBetween } from '@components'
+import {
+  SimpleAlertBanner,
+  TypeVariantAlertBanner,
+  DismissibleAlertBanner,
+  ActionsAlertBanner
+} from './components'
+
+import { AlertBanner } from '../alert-banner'
+import { Heading3, Body } from '../../typography'
+
+<Meta title="Components/AlertBanner" component={AlertBanner}/>
+
+
+# Alert Banner
+• Alert Banners informs user about important changes or persistent conditions.
+Use this component if you need to communicate to users in a prominent way.
+
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1082%3A1049&t=lBbNjmK8G41XPGz9-0)
+
+
+## How to use
+
+```javascript
+// Import the component
+import { AlertBanner } from './index'
+
+
+// Render the component sending the parameters
+<AlertBanner default>
+  <div> Content </div>
+</AlertBanner>
+
+```
+
+### Simple Alert Banner
+<SimpleAlertBanner />
+
+
+
+### Alert Banner with different type
+The possible values are `neutral` \| `info` \| `success` \| `warning` \| `critical`
+<TypeVariantAlertBanner />
+
+
+### Dismissible alert banner
+
+<DismissibleAlertBanner/>
+
+### Alert banner with action buttons
+<ActionsAlertBanner />
+
+
+## API
+
+| Name                                                        | Type         | Description                                               |
+| ----------------------------------------------------- ----- | ------------ | --------------------------------------------------------- |
+| `dismissible?`                                              | `boolean`    | Defines if the user can dismiss alert                     |
+| `className?`                                                | `string`     | Class to be attached to the Container                     |
+| `open?`                                                     | `boolean`    | Defines if the alert is visible on screen                 |
+| `primaryButtonLabel?`                                       | `boolean`    | Text on the primary button                                |
+| `secondaryButtonLabel?`                                     | `boolean`    | Text on the secondary button                              |
+| `onPrimaryAction?`                                          | `() => void` | Primary button event handler function                     |
+| `onSecondaryAction?`                                        | `() => void` | Secondary button event handler function                   |
+| `onClose?`                                                  | `() => void` | Callback function invoked to close the alert banner       |
+| `neutral` \| `info` \| `success` \| `warning` \| `critical` | boolean      | Define the color and icons of the alert                   |

package/src/lib/components/alert-banner/storybook/components.tsx

@@ -0,0 +1,124 @@
+
+import { AlertBanner } from '../alert-banner'
+import { Button, Body, Heading3 } from '@components'
+import { Margin } from '@foundations'
+import styled from 'styled-components'
+import { CardPlayground } from '@stories'
+
+const ToggleButton = styled(Button)`
+  margin-bottom: ${Margin.s};
+`
+
+const AlertBannerHeading = styled(Heading3)`
+  margin-bottom: ${Margin.xs};
+`
+
+export const SimpleAlertBanner = () => (
+  <CardPlayground
+    code={`
+const [isOpen, setIsOpen] = useState(true);
+
+<>
+  <AlertBanner>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </AlertBanner>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        AlertBanner,
+      },
+    }}
+  />
+)
+
+
+export const TypeVariantAlertBanner = () => (
+  <CardPlayground
+    code={`
+const [isOpen, setIsOpen] = useState(true);
+
+<>
+  <AlertBanner warning>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </AlertBanner>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        AlertBanner,
+      },
+    }}
+  />
+)
+
+export const DismissibleAlertBanner = () => (
+  <CardPlayground
+    code={`
+const [isOpen, setIsOpen] = useState(true);
+
+<>
+  <ToggleButton onClick={() => setIsOpen(!isOpen)}>{isOpen ? 'Close' : 'Open'}  the alert banner!</ToggleButton>
+  <AlertBanner
+    info
+    dismissible={true}
+    open={isOpen}
+    onClose={() => setIsOpen(false)}
+  >
+    <AlertBannerHeading>Info</AlertBannerHeading>
+    <Body>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Arcu mollis viverra duis in scelerisque condimentum aenean sit
+      turpis. Donec dictum bibendum non tristique placerat aliquet massa, odi.
+    </Body>
+  </AlertBanner>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        AlertBannerHeading,
+        AlertBanner,
+        Body,
+        ToggleButton
+      },
+    }}
+  />
+)
+
+
+export const ActionsAlertBanner = () => (
+  <CardPlayground
+    code={`
+const [isOpen, setIsOpen] = useState(true);
+
+<>
+  <AlertBanner
+    success
+    primaryButtonLabel="Take the blue pill"
+    secondaryButtonLabel="Take the red pill"
+    onPrimaryAction={() => alert("Nice choice")}
+    onSecondaryAction={() => alert("Wrong choice")}
+  >
+    <AlertBannerHeading>Success</AlertBannerHeading>
+    <Body>
+    Bacon ipsum dolor amet tongue turducken frankfurter biltong meatloaf
+    andouille bresaola jowl. Ham pastrami tongue capicola kielbasa prosciutto short ribs flank beef.
+    Pastrami shank venison tri-tip, bresaola landjaeger chicken capicola swine kielbasa.
+    </Body>
+  </AlertBanner>
+</>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        AlertBannerHeading,
+        AlertBanner,
+        Body,
+        ToggleButton
+      },
+    }}
+  />
+)

package/src/lib/components/badge/badge-type-flags.ts

@@ -0,0 +1,72 @@
+// this file was generated, but it is safe to modify
+import { Hex, PropsWithChildren } from '@helpers'
+import { Surface } from '@foundations'
+
+const enum BadgeType {
+  neutral = 1,
+  info = 2,
+  success = 4,
+  warning = 8,
+  critical = 16,
+}
+
+export type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Pick<
+T,
+Exclude<keyof T, Keys>
+> &
+{
+  [K in Keys]-?: Required<Pick<T, K>> &
+    Partial<Record<Exclude<Keys, K>, undefined>>;
+}[Keys];
+
+export type MappedEnum<E, T> = {
+  [key in keyof E]: T;
+}
+
+type BadgeTypes<T> = MappedEnum<typeof BadgeType, T>
+
+function toBadgeType(n: number): BadgeType {
+  switch (n) {
+    case BadgeType.neutral:
+      return BadgeType.neutral
+    case BadgeType.info:
+      return BadgeType.info
+    case BadgeType.success:
+      return BadgeType.success
+    case BadgeType.warning:
+      return BadgeType.warning
+    case BadgeType.critical:
+      return BadgeType.critical
+    default:
+      return BadgeType.neutral
+  }
+}
+
+const BadgeTypeColors = {
+  [BadgeType.neutral]: Surface.Neutral.Default,
+  [BadgeType.info]: Surface.Highlight.Default,
+  [BadgeType.success]: Surface.Success.Default,
+  [BadgeType.warning]: Surface.Warning.Default,
+  [BadgeType.critical]: Surface.Critical.Default,
+}
+
+export type BadgeTypeProps = Partial<RequireOnlyOne<BadgeTypes<boolean>>> &
+  PropsWithChildren
+
+function bitwiseOr(flags: unknown[]): number {
+  return flags.reduce((mask: number, flag, i) => mask | (Number(flag) << i), 0)
+}
+
+export function getColor(props: BadgeTypeProps): Hex {
+  return BadgeTypeColors[
+    toBadgeType(
+      bitwiseOr([
+        props.neutral,
+        props.info,
+        props.success,
+        props.warning,
+        props.critical,
+      ])
+    )
+  ]
+}

package/src/lib/components/badge/badge.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react'
+import { Badge } from './badge'
+
+describe('Badge', () => {
+  it('should render Neutral Badge successfully', () => {
+    const { baseElement } = render(<Badge neutral>Neutral</Badge>)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should render Informational Badge successfully', () => {
+    const { baseElement } = render(<Badge info>Informational</Badge>)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should render Warning Badge successfully', () => {
+    const { baseElement } = render(<Badge warning>Warning</Badge>)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should render Success Badge successfully', () => {
+    const { baseElement } = render(<Badge success>Success</Badge>)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should render Critical Badge successfully', () => {
+    const { baseElement } = render(<Badge critical>Critical</Badge>)
+    expect(baseElement).toBeTruthy()
+  })
+})

package/src/lib/components/badge/badge.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import { Padding } from '@foundations'
+import { BadgeTypeProps, getColor } from './badge-type-flags'
+import { FC, PropsWithChildren } from '@helpers'
+import { Label } from 'components/typography'
+
+const BadgeFrame = styled(Label)<{color: string}>`
+  background: ${props => props.color};
+  display: flex;
+  align-items:center;
+  padding: ${Padding.xxxs} ${Padding.xs};
+  border-radius:10px;
+  height: fit-content;
+`
+
+type IBadgeProps = BadgeTypeProps & PropsWithChildren
+
+export const Badge: FC<IBadgeProps> = (props) => {
+  const color = getColor(props)
+
+  return <BadgeFrame color={color}>{props.children}</BadgeFrame>
+}

package/src/lib/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge'

package/src/lib/components/badge/stories/badge.stories.mdx

@@ -0,0 +1,44 @@
+import { Badge } from '../badge'
+import { Meta } from '@storybook/addon-docs'
+import { BadgeExample } from './components'
+
+<Meta
+  title="Components/Badge"
+  component={Badge}
+/>
+
+# Badge
+
+This is an atom.
+
+For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1008%3A1257)
+
+## How to use
+
+```tsx
+import { Badge } from '@edvisor/product-language'
+
+<Badge>Contents</Badge>
+```
+
+### Attitudes
+
+The badge can be rendered with various attitudes.
+
+<BadgeExample />
+
+## API
+
+| Name        | Type      | Description               |
+| ----------- | --------- | ------------------------- |
+| `neutral?`  | `boolean` | renders the neutral badge |
+| `info?`     | `boolean` | renders the info badge    |
+| `warning?`  | `boolean` | renders the info warning  |
+| `success?`  | `boolean` | renders the info success  |
+| `critical?` | `boolean` | renders the info critical |
+
+## Changelog
+
+### [0.0.0]
+ - adopt the preferred storybook style
+ - removed a containing div, adjusted styles to match figma