@edvisor/product-language 0.10.0 → 0.10.2

package/src/lib/components/README.md

@@ -0,0 +1,49 @@
+Components
+==========
+
+This folder contains the components that will be exported from the Product Language and used in the front-end.
+
+```
+/src
+  /lib
+    /components
+      /alert-banner
+      /card
+      index.ts
+```
+
+The index.ts file is a manifest and anything in the manifest will be available the clients.
+
+```
+/src
+  /lib
+    /components
+      /alert-banner
+      /card
+        /components
+        /helpers
+        index.tsx
+        card.tsx
+        card.stories.tsx
+        card.spec.ts
+      index.ts
+```
+
+inside of any component, like `card` you will find another index.ts file. This is a manifest and it should only declare the main file of the component as an export:
+
+```ts
+export * from './card'
+```
+
+None of the specs, stories, sub-components, helpers, or any other kind of thing should appear in the manifest. Using manifests like this allows us to give each component a rich eco-system of helpers and sub-components without needing to move everything to a global scope.
+
+For example, here is a helper in card/helpers.ts
+
+```ts
+// this is not a real helper, just an example
+export function makeCardTitle (title: string) {
+  return `Card: ${title}`
+}
+```
+
+This helper is obviously tightly coupled to the card "concern". It should not be declared in a global helpers file, that wouldn't make sense and it would lower cohesion in the app. In addition, it should not be exported from the manifest, since it is not intended for the client to use it.

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'