Add warning banner

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/docs/Home.mdx

@@ -1,5 +1,5 @@
 import { Unstyled } from '@storybook/blocks';
-import { Columns, Text, ComponentStatus } from './components';
+import { Columns, Text, ComponentStatus, Banner } from './components';
 
 <Unstyled>
 
@@ -13,6 +13,11 @@ import { Columns, Text, ComponentStatus } from './components';
   building it incrementally with not conflict with the existing theming system.
 </Text>
 
+<Banner variant="warning">
+  This library is still under heavy construction. Please be aware that the API
+  will change until we reach a stable release.
+</Banner>
+
 <Columns style={{ marginTop: '64px' }}>
   <ComponentStatus
     name="Theming system"

packages/canon/docs/components/banner/banner.css.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { recipe } from '@vanilla-extract/recipes';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const bannerStyles = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    fontFamily: '"Geist", sans-serif',
+    fontSize: '16px',
+    lineHeight: '28px',
+    padding: '16px',
+    borderRadius: '6px',
+    marginBottom: '16px',
+    border: '1px solid #e0e0e0',
+  },
+  variants: {
+    variant: {
+      info: {
+        backgroundColor: '#F2F2F2',
+        borderColor: '#CDCDCD',
+        color: '#888888',
+      },
+      warning: {
+        backgroundColor: '#FFF2B9',
+        borderColor: '#FFD000',
+        color: '#D79927',
+      },
+    },
+  },
+});
+
+globalStyle(`${bannerStyles.classNames.base} p`, {
+  margin: '0',
+});
+
+export const bannerIconStyles = style({
+  width: '32px',
+  height: '32px',
+  backgroundColor: 'rgba(215, 153, 39, 0.2)',
+  borderRadius: '6px',
+  marginRight: '16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

packages/canon/docs/components/banner/index.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { bannerIconStyles, bannerStyles } from './banner.css';
+
+export const Banner = ({
+  children,
+  variant = 'info',
+}: {
+  children: React.ReactNode;
+  variant?: 'info' | 'warning';
+}) => {
+  return (
+    <div className={bannerStyles({ variant })}>
+      <div className={bannerIconStyles}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="18"
+          height="18"
+          fill="currentColor"
+        >
+          <path d="M4.00001 20V14C4.00001 9.58172 7.58173 6 12 6C16.4183 6 20 9.58172 20 14V20H21V22H3.00001V20H4.00001ZM6.00001 20H18V14C18 10.6863 15.3137 8 12 8C8.6863 8 6.00001 10.6863 6.00001 14V20ZM11 2H13V5H11V2ZM19.7782 4.80761L21.1924 6.22183L19.0711 8.34315L17.6569 6.92893L19.7782 4.80761ZM2.80762 6.22183L4.22183 4.80761L6.34315 6.92893L4.92894 8.34315L2.80762 6.22183ZM7.00001 14C7.00001 11.2386 9.23858 9 12 9V11C10.3432 11 9.00001 12.3431 9.00001 14H7.00001Z"></path>
+        </svg>
+      </div>
+      {children}
+    </div>
+  );
+};

packages/canon/docs/components/index.ts

@@ -21,3 +21,4 @@ export * from './text';
 export * from './columns';
 export * from './component-status';
 export * from './layout-components';
+export * from './banner';