@edvisor/product-language 0.1.0

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": [["styled-components", { "pure": true, "ssr": true }]]
+}

package/.eslintrc.json

@@ -0,0 +1,139 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "plugins": [
+    "no-null"
+  ],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "semi": ["error", "never"],
+        "quotes": ["error", "single"],
+        "no-console": "warn",
+        "react/jsx-no-useless-fragment": ["warn", { "allowExpressions": true }], 
+        "no-null/no-null": 2,
+        "no-duplicate-case": "warn",
+        "no-restricted-syntax": [
+          "error",
+          {
+            "selector": "ImportDeclaration[source.value=/[^@]foundations/i]",
+            "message": "Import from @foundations instead of using a relative path"
+          },
+          {
+            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/FC/]",
+            "message": "Use `import { FC } from '@helpers'` instead"
+          },
+          {
+            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/PropsWithChildren/]",
+            "message": "Use `import { PropsWithChildren } from '@helpers'` instead"
+          },
+          {
+            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/forwardRef/]",
+            "message": "Use `import { forwardRef } from '@helpers'` instead"
+          },
+          {
+            "selector": "Literal[value=/#[a-zA-Z0-9]{1,6}/i]",
+            "message": "No hex literals, please import constants from @foundations"
+          },
+          {
+            "selector": "Literal[value=/padding.*: ([0-9]|')/i]",
+            "message": "No hex literals, please import constants from @foundations"
+          },
+          {
+            "selector": "TemplateElement[value.cooked=/#[a-zA-Z0-9]{1,6}/i]",
+            "message": "No hex literals, please import constants from @foundations"
+          },
+          {
+            "selector": "TemplateElement[value.cooked=/padding.*: ([0-9]|')/i]",
+            "message": "No ad-hoc padding, please import { Padding } from '@foundations'"
+          },
+          {
+            "selector": "TemplateElement[value.cooked=/margin.*: ([0-9]|')/i]",
+            "message": "No ad-hoc margins, please import { Margin } from '@foundations'"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parserOptions": {
+        "project": ["packages/product-language/tsconfig.*?.json", "packages/product-language/.storybook/tsconfig.json"]
+      },
+      "rules": {
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "warn",
+        "@typescript-eslint/no-explicit-any": "error",
+        "@typescript-eslint/no-invalid-void-type": "error",
+        "@typescript-eslint/ban-types": ["error", {
+          "types": {
+            "null": "Use 'undefined' instead of 'null'",
+            "React.FC": "Use `import { FC } from '@helpers'` instead",
+            "React.PropsWithChildren": "Use `import { PropsWithChildren } from '@helpers'` instead",
+            "React.forwardRef": "Use `import { forwardRef } from '@helpers'` instead"
+          }
+        }],
+        "@typescript-eslint/strict-boolean-expressions": ["error", {
+          "allowString": false,
+          "allowNumber": false,
+          "allowNullableObject": false
+        }]
+      }
+    },
+    {
+      "files": ["*.tsx"],
+      "parserOptions": {
+        "project": ["packages/product-language/tsconfig.*?.json"]
+      },
+      "rules": {
+        "no-restricted-syntax": [
+          "error",
+          {
+            "selector": "FunctionDeclaration[id.name=/^[A-Z]/]",
+            "message": "Components should be declared `const MyComponent: FC<IProps> = (props) => {`"
+          },
+          {
+            "selector": "ImportDeclaration[source.value=/[^@]foundations/i]",
+            "message": "Import from @foundations instead of using a relative path"
+          },
+          {
+            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/FC/]",
+            "message": "Use `import { FC } from '@helpers'` instead"
+          },
+          {
+            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/PropsWithChildren/]",
+            "message": "Use `import { Props } from '@helpers'` instead"
+          },
+          {
+            "selector": "ImportDeclaration[source.value=/react/i] ImportSpecifier[imported.name=/forwardRef/]",
+            "message": "Use `import { forwardRef } from '@helpers'` instead"
+          },
+          {
+            "selector": "Literal[value=/#[a-zA-Z0-9]{1,6}/i]",
+            "message": "No hex literals, please import constants from @foundations"
+          },
+          {
+            "selector": "Literal[value=/padding.*: ([0-9]|')/i]",
+            "message": "No hex literals, please import constants from @foundations"
+          },
+          {
+            "selector": "TemplateElement[value.cooked=/#[a-zA-Z0-9]{1,6}/i]",
+            "message": "No hex literals, please import constants from @foundations"
+          },
+          {
+            "selector": "TemplateElement[value.cooked=/padding.*: ([0-9]|')/i]",
+            "message": "No ad-hoc padding, please import { Padding } from '@foundations'"
+          },
+          {
+            "selector": "TemplateElement[value.cooked=/margin.*: ([0-9]|')/i]",
+            "message": "No ad-hoc margins, please import { Margin } from '@foundations'"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/.storybook/main.js

@@ -0,0 +1,57 @@
+const rootMain = require('../../../.storybook/main')
+const path = require('path')
+const webpack = require('webpack')
+
+// we can't import from our design-system here
+// so I'm replicating the constant
+// eslint-disable-next-line no-restricted-syntax
+const backgroundDefault = '#F3F4F6'
+
+module.exports = {
+  ...rootMain,
+
+  core: { ...rootMain.core, builder: 'webpack5' },
+
+  stories: [
+    ...rootMain.stories,
+    '../src/lib/**/*.stories.mdx',
+    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+  staticDirs: [{from: '../src/assets', to:'/public'}],
+  webpackFinal: async (config, { configType }) => {
+    // apply any global webpack configs that might have been specified in .storybook/main.js
+    if (rootMain.webpackFinal) {
+      config = await rootMain.webpackFinal(config, { configType })
+    }
+
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      }),
+    )
+
+    config.module.rules.push({
+      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+      use: [
+        {
+          loader: require.resolve('file-loader'),
+          options: {
+            name: '[name].[ext]'
+          }
+        }
+      ],
+      include: path.resolve(__dirname, '../')
+    })
+
+    return config
+  },
+  previewHead: (head) => `
+  ${head}
+  <style>
+    html, body {
+      background: ${backgroundDefault};
+    }
+  </style>
+`,
+}

package/.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons'
+
+addons.setConfig({
+  sidebar: {
+    showRoots: true,
+  },
+})

package/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;1,300&display=swap%7CLato:400,700" media="all"></link>

package/.storybook/preview.js

@@ -0,0 +1,15 @@
+import { liveDecorator } from 'storybook-addon-jarle-monaco'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+export const decorators = [
+  liveDecorator
+]

package/.storybook/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": "",
+    "noEmit": true
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts",
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.spec.js",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx"
+  ],
+  "include": [
+    "../src/**/storybook/*",
+    "../src/**/stories/*",
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.js",
+    "../src/**/*.stories.jsx",
+    "../src/**/*.stories.tsx",
+    "../src/**/*.stories.mdx",
+    "*.js"
+  ]
+}

package/README.md

@@ -0,0 +1,33 @@
+# product-language
+
+This library was generated with [Nx](https://nx.dev).
+
+
+
+## Storybook Guidelines
+
+Bellow there are some goals to drive our way to build the design system stories with Storybook
+
+- The structure on Figma and Storybook needs to stay with the same names (consistency is the key). Please tell us if you detect some structure that aren't following that
+
+- Developers from the engineering team shouldn't need to open the code on their editors in order to understand and see how the things is working 
+  - The stories page from each component should be clear with what they have and what they don't have. In that case, use (or add) those information on Changelog (Roadmap)section
+ 
+- Components pages should be small and easy to understand. Don't be afraid to create a lot of pages to same component with their variations
+  - Display only the props that can change the component behavior/display   
+
+- Display best practices thinking on developers usage (if the situation required that)
+
+
+- Incrementally, we should have some pages that can render something nearly the mockups world, in order to make easy to figure out the components working together
+
+### Foundations Pages
+Bellow there are some goals about the Foundations pages
+
+ - Explain the guidelines and the fundamentals from a Design Perspective 
+ - Can teach developers people to learn about how the design works
+ - This kind of pages don't need to show code/how to use
+
+## Running unit tests
+
+Run `nx test product-language` to execute the unit tests via [Jest](https://jestjs.io).

package/jest.config.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+export default {
+  displayName: 'product-language',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleNameMapper: {
+    '^.+\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$': '<rootDir>/fileTransformer.js',
+    '^.+\\.(css)$': 'identity-obj-proxy',//we can remove if we dont have css files
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/packages/product-language',
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+};

package/jest.setup.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom'
+import 'jest-axe/extend-expect'

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@edvisor/product-language",
+  "version": "0.1.0",
+  "description": "Edvisor.io product-language components",
+  "repository": "https://github.com/edvisor-io/front-end/",
+  "scripts": {
+    "release": "release-it --disable-metrics"
+  },
+  "peerDependencies": {
+    "release": "*"
+  },
+  "devDependencies": {
+    "@types/jest-axe": "^3.5.4"
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "github": {
+      "release": true
+    },
+    "npm": {
+      "publish": true
+    },
+    "publishConfig": {
+      "registry": "https://registry.npmjs.org"
+    }
+  }
+}

package/project.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/product-language/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/product-language",
+        "tsConfig": "packages/product-language/tsconfig.lib.json",
+        "project": "packages/product-language/package.json",
+        "entryFile": "packages/product-language/src/index.ts",
+        "external": ["react/jsx-runtime"],
+        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "packages/product-language/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/product-language/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/packages/product-language"],
+      "options": {
+        "jestConfig": "packages/product-language/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "storybook": {
+      "executor": "@nrwl/storybook:storybook",
+      "options": {
+        "uiFramework": "@storybook/react",
+        "tsConfig": "packages/product-language/tsconfig.storybook.json",
+        "port": 4400,
+        "config": {
+          "configFolder": "packages/product-language/.storybook"
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nrwl/storybook:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "uiFramework": "@storybook/react",
+        "outputPath": "dist/storybook/product-language",
+        "config": {
+          "configFolder": "packages/product-language/.storybook"
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    }
+  }
+}

package/src/assets/svg/example_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3751 15.6444H1.62507C1.12228 15.6444 0.714355 16.0527 0.714355 16.5559C0.714355 17.0902 1.12228 17.5 1.62507 17.5H14.3751C14.8779 17.5 15.2858 17.0917 15.2858 16.5885C15.2858 16.0846 14.8798 15.6444 14.3751 15.6444ZM12.1932 7.16719L8.91078 10.6583V1.41451C8.91078 0.908303 8.50476 0.5 8.00007 0.5C7.49538 0.5 7.08936 0.908304 7.08936 1.41147V10.6552L3.80585 7.16719C3.62674 6.97366 3.38503 6.8788 3.14293 6.8788C2.91882 6.8788 2.69478 6.96068 2.51909 7.12681C2.15268 7.47095 2.13507 8.04777 2.47996 8.41433L7.33711 13.5788C7.68098 13.9467 8.31916 13.9467 8.66296 13.5788L13.5201 8.41433C13.8652 8.04766 13.8474 7.47099 13.481 7.12681C13.1152 6.78013 12.5385 6.76496 12.1932 7.16719Z" fill="#6B7280"/>
+</svg>

package/src/assets/svg/example_icon_white.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3751 15.6444H1.62507C1.12228 15.6444 0.714355 16.0527 0.714355 16.5559C0.714355 17.0902 1.12228 17.5 1.62507 17.5H14.3751C14.8779 17.5 15.2858 17.0917 15.2858 16.5885C15.2858 16.0846 14.8798 15.6444 14.3751 15.6444ZM12.1932 7.16719L8.91078 10.6583V1.41451C8.91078 0.908303 8.50476 0.5 8.00007 0.5C7.49538 0.5 7.08936 0.908304 7.08936 1.41147V10.6552L3.80585 7.16719C3.62674 6.97366 3.38503 6.8788 3.14293 6.8788C2.91882 6.8788 2.69478 6.96068 2.51909 7.12681C2.15268 7.47095 2.13507 8.04777 2.47996 8.41433L7.33711 13.5788C7.68098 13.9467 8.31916 13.9467 8.66296 13.5788L13.5201 8.41433C13.8652 8.04766 13.8474 7.47099 13.481 7.12681C13.1152 6.78013 12.5385 6.76496 12.1932 7.16719Z" fill="white"/>
+</svg>

package/src/assets/svg/spinner.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2.09302C5.18538 2.09302 2.09302 5.18538 2.09302 9C2.09302 12.8146 5.18538 15.907 9 15.907C9.57797 15.907 10.0465 16.3755 10.0465 16.9535C10.0465 17.5315 9.57797 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C11.5884 0 13.9229 1.09405 15.5635 2.84196C15.959 3.26339 15.938 3.92567 15.5166 4.3212C15.0951 4.71674 14.4329 4.69575 14.0373 4.27432C12.7759 2.93035 10.9866 2.09302 9 2.09302Z" fill="#6B7280"/>
+</svg>

package/src/assets/svg/spinner_white.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2.09302C5.18538 2.09302 2.09302 5.18538 2.09302 9C2.09302 12.8146 5.18538 15.907 9 15.907C9.57797 15.907 10.0465 16.3755 10.0465 16.9535C10.0465 17.5315 9.57797 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C11.5884 0 13.9229 1.09405 15.5635 2.84196C15.959 3.26339 15.938 3.92567 15.5166 4.3212C15.0951 4.71674 14.4329 4.69575 14.0373 4.27432C12.7759 2.93035 10.9866 2.09302 9 2.09302Z" fill="white"/>
+</svg>

package/src/helpers/index.ts

@@ -0,0 +1,3 @@
+// these are helpers used for development, they are not included in the build
+
+export * from './talesOf'

package/src/helpers/talesOf.tsx

@@ -0,0 +1,42 @@
+import { storiesOf as _storiesOf } from '@storybook/react'
+import { StoryFn } from '@storybook/addons'
+import { isDefined, isNil } from '@helpers'
+import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types'
+
+const DIRECTORY_BASE_PATH = 'packages/product-language/src/lib/'
+
+const getStoryPath = (filepath: string) => {
+  const path = filepath.split('/')
+
+  return isDefined(path)
+    ? path
+        .slice(0, path.length - 1) // remove the filename
+        .join('/')
+        .replace(DIRECTORY_BASE_PATH, '') // remove the base path
+    : 'misc'
+}
+
+function getStoryTitle (filepath: string, storyName? : string): string {
+  const path = filepath.split('/')
+
+  const nameFromPath = isDefined(path) ? path.pop()?.split('.').shift() : undefined
+
+  if (isNil(nameFromPath)) return 'Base'
+
+  if (isDefined(storyName)) return `${nameFromPath}/${storyName}`
+
+  return nameFromPath
+}
+
+export type StoryComponent = StoryFn<StoryFnReactReturnType>
+
+export function talesOf (filepath: string, module: NodeModule, Storybook?: StoryComponent, storyName?: string) {
+  if (isNil(Storybook)) {
+    return _storiesOf(getStoryPath(filepath), module)
+  }
+
+  const title = getStoryTitle(filepath, storyName)
+
+  return _storiesOf(getStoryPath(filepath), module)
+    .add(title, Storybook)
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/components'
+export * from './lib/foundations'

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.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components'
+import { FC, Hex, PropsWithChildren } from '@helpers'
+import { AlertLevelProps, getBackgroundColor, getBorderColor } from './alert-level-flags'
+import { Padding } from '@foundations'
+import { CardFrame } from 'components/card/atoms'
+
+interface IAlertBannerProps extends PropsWithChildren {
+  /** @TODO can we get some examples of alert banner in card from figma? */
+  inCard?: boolean
+  dismissible?: boolean
+  className?: string
+}
+
+export type AlertBannerProps = IAlertBannerProps & AlertLevelProps
+
+const InCardFrame = styled(CardFrame).attrs({ as: 'div' })<{ background: Hex, border: Hex }>`
+  display: inline-block;
+  padding: ${Padding.m};
+  width: fill-available;
+
+  background: ${({ background }) => background};
+  border: 1px solid ${({ border }) => border};
+`
+
+export const AlertBanner: FC<AlertBannerProps> = (props) => {
+  const background = getBackgroundColor(props)
+  const border = getBorderColor(props)
+
+  return (
+    <InCardFrame background={background} border={border} className={props.className}>
+      {props.children}
+    </InCardFrame>
+  )
+}

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

@@ -0,0 +1,77 @@
+// this file was generated, but it is safe to modify
+import { Borders, Surface } from '@foundations'
+import { bitwiseOr, Hex, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+
+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,
+}
+
+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,
+      ])
+    )
+  ]
+}

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

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