@bitrise/bitkit 10.3.0 → 10.4.0-alpha-ribbon.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.3.0",
+  "version": "10.4.0-alpha-ribbon.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/ColorButton/ColorButton.tsx

@@ -1,8 +1,9 @@
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
+import { ColorScheme } from '@/Foundations/Colors/Colors';
 
 export interface ColorButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';
-  colorScheme?: 'blue' | 'red' | 'green' | 'yellow' | 'purple';
+  colorScheme?: ColorScheme;
 }
 
 /**

package/src/Components/Notification/Notification.stories.tsx

@@ -10,7 +10,6 @@ export default {
     description: { type: 'string', defaultValue: 'description' },
     action: {
       control: 'inline-radio',
-      defaultValue: 'unset',
       options: ['unset', 'link', 'action'],
       mapping: {
         unset: undefined,
@@ -38,3 +37,6 @@ export const Default: ComponentStoryFn<typeof Notification> = ({ title, descript
     <NotificationText>{description}</NotificationText>
   </Notification>
 );
+Default.args = {
+  action: undefined,
+};

package/src/Components/Notification/Notification.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, ReactNode, useContext, useMemo } from 'react';
 import {
   Alert as ChakraAlert,
   AlertTitle as NotificationTitle,
@@ -9,12 +9,13 @@ import {
   chakra,
 } from '@chakra-ui/react';
 
+import { ColorScheme } from '@/Foundations/Colors/Colors';
 import Box from '../Box/Box';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Icon from '../Icon/Icon';
 
-const STATUSES = {
+const STATUSES: Record<string, { colorScheme: ColorScheme; icon: ReactNode }> = {
   info: { colorScheme: 'blue', icon: <Icon flexShrink={0} name="Info" /> },
   error: { colorScheme: 'red', icon: <Icon flexShrink={0} name="ErrorGeneral" /> },
   success: { colorScheme: 'green', icon: <Icon flexShrink={0} name="Tick" /> },
@@ -39,14 +40,14 @@ export interface NotificationProps extends Omit<AlertProps, 'status' | 'colorSch
   action?: ActionProps;
 }
 
-const ActionContext = createContext<{ colorScheme: ColorButtonProps['colorScheme'] }>({ colorScheme: 'blue' });
+const ActionContext = createContext<{ colorScheme: ColorScheme }>({ colorScheme: 'blue' });
 
 const NotificationAction = ({ label, href, ...rest }: ActionProps) => {
   const actionContext = useContext(ActionContext);
   return (
     <ColorButton
       flexGrow={0}
-      flexShrink={1}
+      flexShrink={0}
       as={(href ? 'a' : 'button') as any}
       href={href}
       {...actionContext}

package/src/Components/Ribbon/Ribbon.stories.tsx

@@ -0,0 +1,35 @@
+import { ComponentMeta, ComponentStoryFn } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Ribbon from './Ribbon';
+
+export default {
+  title: 'Components/Ribbon',
+  component: Ribbon,
+  argTypes: {
+    children: { type: 'string' },
+    action: {
+      control: 'inline-radio',
+      options: ['unset', 'link', 'action'],
+      mapping: {
+        unset: undefined,
+        link: { label: 'link', href: '#' },
+        action: { label: 'action', onClick: action('action') },
+      },
+    },
+    onClose: {
+      control: 'inline-radio',
+      options: ['unset', 'action'],
+      mapping: {
+        unset: undefined,
+        action: action('onClose'),
+      },
+    },
+  },
+  args: {
+    children: 'text',
+    colorScheme: 'blue',
+    action: undefined,
+  },
+} as ComponentMeta<typeof Ribbon>;
+
+export const Default: ComponentStoryFn<typeof Ribbon> = (args) => <Ribbon {...args} />;

package/src/Components/Ribbon/Ribbon.tsx

@@ -0,0 +1,77 @@
+import { createContext, useContext, useMemo } from 'react';
+import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
+
+import { ColorScheme } from '@/Foundations/Colors/Colors';
+import CloseButton from '../CloseButton/CloseButton';
+import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
+import Icon from '../Icon/Icon';
+import Box from '../Box/Box';
+
+export type ActionProps = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+} & Omit<ColorButtonProps, 'as' | 'onClick' | 'colorScheme'>;
+
+export interface RibbonProps extends Omit<AlertProps, 'status' | 'colorScheme' | 'onClose'> {
+  colorScheme: ColorScheme;
+  onClose?: () => void;
+  action?: ActionProps;
+}
+
+const ActionContext = createContext<{
+  colorScheme: ColorButtonProps['colorScheme'];
+}>({ colorScheme: 'blue' });
+
+const RibbonAction = ({ label, href, ...rest }: ActionProps) => {
+  const actionContext = useContext(ActionContext);
+  return (
+    <ColorButton
+      flexGrow={0}
+      flexShrink={0}
+      as={(href ? 'a' : 'button') as any}
+      marginY={-4}
+      href={href}
+      {...actionContext}
+      {...rest}
+    >
+      {label}
+    </ColorButton>
+  );
+};
+
+const Ribbon = forwardRef<RibbonProps, 'div'>((props, ref) => {
+  const { action, children, onClose, colorScheme, ...rest } = props;
+  const actionContext = useMemo(() => ({ colorScheme }), [colorScheme]);
+  let actionButton;
+  if (action) {
+    actionButton = <RibbonAction {...action} />;
+  }
+
+  return (
+    <ChakraAlert
+      ref={ref}
+      colorScheme={colorScheme}
+      justifyContent="center"
+      alignItems="center"
+      gap={16}
+      borderRadius={0}
+      borderLeftWidth={0}
+      borderRightWidth={0}
+      {...rest}
+    >
+      <ActionContext.Provider value={actionContext}>
+        {onClose && <Box width={24} height={24} marginRight="auto" />}
+        {children}
+        {actionButton}
+        {onClose && (
+          <CloseButton flexShrink={0} colorScheme={colorScheme} marginStart="auto" onClick={onClose}>
+            <Icon name="CloseSmall" />
+          </CloseButton>
+        )}
+      </ActionContext.Provider>
+    </ChakraAlert>
+  );
+});
+
+export default Ribbon;

package/src/Foundations/Colors/Colors.ts

@@ -126,4 +126,7 @@ const colors = {
 };
 
 export type Colors = typeof colors;
+
+export type ColorScheme = 'blue' | 'red' | 'green' | 'yellow' | 'purple';
+
 export default colors;

package/src/{Components/Notification/Notification.theme.ts → Foundations/Themes/Alert.theme.ts}

@@ -1,6 +1,8 @@
+import { ColorScheme } from '../Colors/Colors';
+
 const AlertTheme = {
   parts: ['container', 'title', 'icon', 'body'],
-  baseStyle({ colorScheme }: { colorScheme: 'blue' | 'red' | 'green' | 'yellow' | 'purple' }) {
+  baseStyle({ colorScheme }: { colorScheme: ColorScheme }) {
     return {
       container: {
         display: 'flex',

package/src/index.ts

@@ -136,4 +136,7 @@ export { default as Breadcrumb } from './Components/Breadcrumb/Breadcrumb';
 export type { BreadcrumbLinkProps } from './Components/Breadcrumb/BreadcrumbLink';
 export { default as BreadcrumbLink } from './Components/Breadcrumb/BreadcrumbLink';
 
+export type { RibbonProps } from './Components/Ribbon/Ribbon';
+export { default as Ribbon } from './Components/Ribbon/Ribbon';
+
 export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';

package/src/old.ts

@@ -66,9 +66,6 @@ export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
 export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
 export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';
 
-export type { Props as RibbonProps } from './Old/Ribbon/Ribbon';
-export { default as Ribbon } from './Old/Ribbon/Ribbon';
-
 export type { Props as SkeletonProps } from './Old/Skeleton/Skeleton';
 export { default as Skeleton } from './Old/Skeleton/Skeleton';
 

package/src/theme.ts

@@ -15,7 +15,7 @@ import Radio from './Components/Form/Radio/Radio.theme';
 import Select from './Components/Select/Select.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
-import Notification from './Components/Notification/Notification.theme';
+import Alert from './Foundations/Themes/Alert.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
 import Popover from './Components/Popover/Popover.theme';
@@ -82,7 +82,7 @@ const theme = {
     Tabs,
     Text,
     Tooltip,
-    Alert: Notification,
+    Alert,
     CloseButton,
     Popover,
   },