refa: improve message css and icons (#3167)

marigold-ui · Jul 24, 2023 · bbb452f · bbb452f · vercel · Jul 24, 2023
1 parent 63d4315
commit bbb452f
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 36 deletions.
diff --git a/docs/.registry/index.tsx b/docs/.registry/index.tsx
@@ -0,0 +1,88 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import dynamic from 'next/dynamic';
+
+export const registry = {
+  'button-variant': {
+    name: 'button-variant',
+    demo: dynamic(
+      () => import('@/content/components/button/button-variant.demo')
+    ),
+    file: 'content/components/button/button-variant.demo.tsx',
+  },
+  'full-container': {
+    name: 'full-container',
+    demo: dynamic(
+      () => import('@/content/components/container/full-container.demo')
+    ),
+    file: 'content/components/container/full-container.demo.tsx',
+  },
+  'small-container': {
+    name: 'small-container',
+    demo: dynamic(
+      () => import('@/content/components/container/small-container.demo')
+    ),
+    file: 'content/components/container/small-container.demo.tsx',
+  },
+  'horizontal-breakout': {
+    name: 'horizontal-breakout',
+    demo: dynamic(
+      () => import('@/content/components/breakout/horizontal-breakout.demo')
+    ),
+    file: 'content/components/breakout/horizontal-breakout.demo.tsx',
+  },
+  'iframe-breakout': {
+    name: 'iframe-breakout',
+    demo: dynamic(
+      () => import('@/content/components/breakout/iframe-breakout.demo')
+    ),
+    file: 'content/components/breakout/iframe-breakout.demo.tsx',
+  },
+  'vertical-breakout': {
+    name: 'vertical-breakout',
+    demo: dynamic(
+      () => import('@/content/components/breakout/vertical-breakout.demo')
+    ),
+    file: 'content/components/breakout/vertical-breakout.demo.tsx',
+  },
+  rightside: {
+    name: 'rightside',
+    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
+    file: 'content/components/aside/rightside.demo.tsx',
+  },
+  space: {
+    name: 'space',
+    demo: dynamic(() => import('@/content/components/aside/space.demo')),
+    file: 'content/components/aside/space.demo.tsx',
+  },
+  'accordion-basic': {
+    name: 'accordion-basic',
+    demo: dynamic(
+      () => import('@/content/components/accordion/accordion-basic.demo')
+    ),
+    file: 'content/components/accordion/accordion-basic.demo.tsx',
+  },
+  'basic-accordion': {
+    name: 'basic-accordion',
+    demo: dynamic(
+      () => import('@/content/components/accordion/basic-accordion.demo')
+    ),
+    file: 'content/components/accordion/basic-accordion.demo.tsx',
+  },
+  'multi-select-accordion': {
+    name: 'multi-select-accordion',
+    demo: dynamic(
+      () => import('@/content/components/accordion/multi-select-accordion.demo')
+    ),
+    file: 'content/components/accordion/multi-select-accordion.demo.tsx',
+  },
+  'single-select-accordion': {
+    name: 'single-select-accordion',
+    demo: dynamic(
+      () =>
+        import('@/content/components/accordion/single-select-accordion.demo')
+    ),
+    file: 'content/components/accordion/single-select-accordion.demo.tsx',
+  },
+} as const;
diff --git a/docs/theme/tokens.ts b/docs/theme/tokens.ts
@@ -31,7 +31,7 @@ export const colors = {
     },
 
     // State
-    info: tw.blue[950],
+    info: tw.blue[800],
     warning: tw.amber[800],
   },
 

diff --git a/packages/components/src/Message/Message.stories.tsx b/packages/components/src/Message/Message.stories.tsx
@@ -52,3 +52,19 @@ export const MultiLineTitle: Story = {
     </div>
   ),
 };
+
+export const LongMessage: Story = {
+  render: args => (
+    <Message {...args}>
+      <Text>
+        In up so discovery my middleton eagerness dejection explained.
+        Estimating excellence ye contrasted insensible as. Oh up unsatiable
+        advantages decisively as at interested. Present suppose in esteems in
+        demesne colonel it to. End horrible she landlord screened stanhill.
+        Repeated offended you opinions off dissuade ask packages screened. She
+        alteration everything sympathize impossible his get compliment.
+        Collected few extremity suffering met had sportsman.
+      </Text>
+    </Message>
+  ),
+};
diff --git a/packages/components/src/Message/Message.test.tsx b/packages/components/src/Message/Message.test.tsx
@@ -71,10 +71,12 @@ test('accepts a variant with parts and an icon', () => {
   const icon = container.firstChild;
 
   expect(container.className).toMatchInlineSnapshot(
-    `"grid grid-cols-[min-content_1fr] grid-rows-2 text-orange-700"`
+    `"grid auto-rows-min grid-cols-[min-content_auto] gap-1 text-orange-700"`
+  );
+  expect(content.className).toMatchInlineSnapshot(`"col-start-2 items-end"`);
+  expect(title.className).toMatchInlineSnapshot(
+    `"col-start-2 row-start-1 self-center font-bold"`
   );
-  expect(content.className).toMatchInlineSnapshot(`"col-span-full items-end"`);
-  expect(title.className).toMatchInlineSnapshot(`"font-bold"`);
 
   expect(icon).toBeInTheDocument();
 });

diff --git a/packages/components/src/Message/Message.tsx b/packages/components/src/Message/Message.tsx
@@ -2,11 +2,55 @@ import React, { ReactNode } from 'react';
 import { cn, useClassNames } from '@marigold/system';
 import { HtmlProps } from '@marigold/types';
 
+// Icons
+// ---------------
+const icons = {
+  info: () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+  warning: () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+  error: () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+};
+
 // Props
 // ---------------
 export interface MessageProps extends HtmlProps<'div'> {
   messageTitle: ReactNode;
-  variant?: string;
+  variant?: keyof typeof icons;
   size?: string;
 }
 
@@ -20,37 +64,25 @@ export const Message = ({
   ...props
 }: MessageProps) => {
   const classNames = useClassNames({ component: 'Message', variant, size });
-  var icon = (
-    <svg viewBox="0 0 24 24">
-      <path d="M12 2.85938C6.95437 2.85938 2.85938 6.95437 2.85938 12C2.85938 17.0456 6.95437 21.1406 12 21.1406C17.0456 21.1406 21.1406 17.0456 21.1406 12C21.1406 6.95437 17.0456 2.85938 12 2.85938ZM12.7875 15.9374H11.2125V11.2124H12.7875V15.9374ZM12.7875 9.6375H11.2125V8.0625H12.7875V9.6375Z" />
-    </svg>
-  );
-  if (variant === 'warning') {
-    icon = (
-      <svg viewBox="0 0 24 24">
-        <path d="M19.2 3H4.8C3.81 3 3.009 3.81 3.009 4.8L3 21L6.6 17.4H19.2C20.19 17.4 21 16.59 21 15.6V4.8C21 3.81 20.19 3 19.2 3ZM12.9 13.8H11.1V12H12.9V13.8ZM12.9 10.2001H11.1V6.60008H12.9V10.2001Z" />
-      </svg>
-    );
-  }
-  if (variant === 'error') {
-    icon = (
-      <svg viewBox="0 0 24 24">
-        <path d="M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" />
-      </svg>
-    );
-  }
+  const Icon = icons[variant];
 
   return (
     <div
       className={cn(
-        'grid grid-cols-[min-content_1fr] grid-rows-2',
+        'grid auto-rows-min grid-cols-[min-content_auto] gap-1',
         classNames.container
       )}
       {...props}
     >
-      <div className={cn('hidden', classNames.icon)}>{icon}</div>
-      <div className={classNames.title}>{messageTitle}</div>
-      <div className={cn('col-span-full', classNames.content)}>{children}</div>
+      <div className={cn('col-span-1 h-5 w-5 self-center', classNames.icon)}>
+        <Icon />
+      </div>
+      <div
+        className={cn('col-start-2 row-start-1 self-center', classNames.title)}
+      >
+        {messageTitle}
+      </div>
+      <div className={cn('col-start-2', classNames.content)}>{children}</div>
     </div>
   );
 };
diff --git a/themes/theme-b2b/src/components/Message.styles.ts b/themes/theme-b2b/src/components/Message.styles.ts
@@ -16,15 +16,15 @@ export const Message: ThemeComponent<'Message'> = {
       },
     }
   ),
-  content: cva('pt-1 leading-[1.125]'),
-  icon: cva('flex h-4 w-4', {
+  title: cva('font-bold'),
+  content: cva('col-span-2 col-start-1'),
+  icon: cva('h-4 w-4', {
     variants: {
       variant: {
-        warning: 'fill-fill-warning',
-        info: 'fill-fill-info',
-        error: 'fill-fill-error',
+        warning: 'text-fill-warning',
+        info: 'text-fill-info',
+        error: 'text-fill-error',
       },
     },
   }),
-  title: cva('pl-1 font-bold leading-[1.125]'),
 };
diff --git a/themes/theme-core/src/components/Message.styles.ts b/themes/theme-core/src/components/Message.styles.ts
@@ -10,7 +10,7 @@ export const Message: ThemeComponent<'Message'> = {
       },
     },
   }),
-  title: cva('col-span-full font-bold leading-8', {
+  title: cva('font-bold', {
     variants: {
       variant: {
         warning: 'text-text-warning',
@@ -19,7 +19,7 @@ export const Message: ThemeComponent<'Message'> = {
       },
     },
   }),
-  icon: cva(''),
+  icon: cva('hidden'),
   content: cva('leading-4', {
     variants: {
       variant: {