feat: alert block component [SV-155]

apps/docs/components/.vuepress/components/Showcase.vue

@@ -9,11 +9,19 @@
         Preview
       </button>
       <button
+        v-if="$slots.usage"
         @click="tab = 2"
         class="px-3 py-2 border-b-2 dark:border-zinc-700"
         :class="[tab === 2 ? 'text-black dark:text-white border-green dark:border-green' : '']"
       >
-        Code
+        Source
+      </button>
+      <button
+        @click="tab = $slots.usage ? 3 : 2"
+        class="px-3 py-2 border-b-2 dark:border-zinc-700 bg-green text-white"
+        :class="[tab === ($slots.usage ? 3 : 2) ? 'border-green dark:border-green' : 'opacity-80']"
+      >
+        Block Code
       </button>
     </div>
     <div ref="wrapperRef" class="relative flex-1 flex flex-col">
@@ -25,12 +33,24 @@
         @touchstart="eventDownListener"
       >
         <div class="absolute inset-0" v-show="isHandlerDragging"></div>
-        <Generate :showcase-path="showcaseName" :allow="allow" class="flex-grow rounded" style="margin-top: 0" :no-paddings="noPaddings" :no-scale="noScale"/>
+        <Generate
+          :showcase-path="showcaseName"
+          :allow="allow"
+          class="flex-grow rounded"
+          style="margin-top: 0"
+          :no-paddings="noPaddings"
+          :no-scale="noScale"
+        />
         <div ref="handlerRef" class="select-none rounded-tr items-center hidden sm:flex" style="cursor: ew-resize">
           <iconify-icon icon="akar-icons:drag-vertical" class="pointer-events-none" />
         </div>
       </div>
-      <div v-show="tab === 2 && showSource" class="relative">
+      <div v-show="tab === 2" class="relative">
+        <SourceCode>
+          <slot name="usage" />
+        </SourceCode>
+      </div>
+      <div v-show="showSource && tab === ($slots.usage ? 3 : 2)" class="relative">
         <SourceCode>
           <slot />
         </SourceCode>
@@ -48,11 +68,11 @@ export default {
     },
     noPaddings: {
       type: Boolean,
-      default: false
+      default: false,
     },
     noScale: {
       type: Boolean,
-      default: false
+      default: false,
     },
     allow: {
       type: String,
@@ -74,7 +94,7 @@ export default {
     document.addEventListener('mousemove', this.eventMoveListener);
     document.addEventListener('touchmove', this.eventMoveListener);
     document.addEventListener('mouseup', this.eventUpListener);
-    document.addEventListener('touchup', this.eventUpListener)
+    document.addEventListener('touchup', this.eventUpListener);
   },
   unmounted() {
     document.removeEventListener('mousemove', this.eventMoveListener);

apps/docs/components/blocks/Alert.md

@@ -1,7 +1,7 @@
 ---
 layout: DefaultLayout
 hideBreadcrumbs: true
-description: Alert is a notification that keeps people informed of the status of the system and which may or not require the user respond.
+description: Alert is a notification that keeps people informed of the status of the system and which may or not require the user response.
 hideToc: true
 ---
 # Alert
@@ -10,71 +10,108 @@ hideToc: true
 
 ## Alert neutral
 
-Simple version of alert that has neutral grey color.
+A simple version of the alert that has a neutral grey color.
 
-<Showcase showcase-name="Alert/AlertNeutral" >
+<Showcase showcase-name="Alert/AlertNeutral" style="min-height:210px">
 
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertNeutral.tsx#source
 <!-- end react -->
+:::
 
-</Showcase>
-
-## Alert positive
-
-Green color indicates that an action went successful.
-
-<Showcase showcase-name="Alert/AlertPositive" >
 <!-- vue -->
-<<<../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
 <!-- end vue -->
 <!-- react -->
-<<<../../preview/next/pages/showcases/Alert/AlertPositive.tsx#source
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
 <!-- end react -->
+
 </Showcase>
 
 ## Alert secondary
 
 This type is informative just like neutral except that its palette is more noticeable.
 
-<Showcase showcase-name="Alert/AlertSecondary" >
+<Showcase showcase-name="Alert/AlertSecondary" style="min-height:210px">
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertSecondary.tsx#source
 <!-- end react -->
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
+<!-- end react -->
 </Showcase>
 
-## Alert warning
+## Alert positive
 
-Alert can be more descriptive and its content can be splitted into title and description.
+A green color indicates that an action was successful.
 
-<Showcase showcase-name="Alert/AlertWarning" >
+<Showcase showcase-name="Alert/AlertPositive" style="min-height:230px">
+::: slot usage
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/AlertPositive.tsx#source
+<!-- end react -->
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
+<!-- end react -->
+</Showcase>
 
+## Alert warning
+
+Alert can be more descriptive and its content can be split into title and description.
+
+<Showcase showcase-name="Alert/AlertWarning" style="min-height:280px">
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertWarning.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertWarning.tsx#source
 <!-- end react -->
-
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
+<!-- end react -->
 </Showcase>
 
 ## Alert error
 
 This type is usually used for information displayed when an important problem occurs.
 
-<Showcase showcase-name="Alert/AlertError" >
-
+<Showcase showcase-name="Alert/AlertError" style="min-height:230px">
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertError.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertError.tsx#source
 <!-- end react -->
-
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
+<!-- end react -->
 </Showcase>

apps/docs/components/react/blocks.md

@@ -13,4 +13,8 @@ hideToc: true
 Fully accessible UI blocks, designed to integrate beautifully with Tailwind CSS and Vue.
 :::
 
+::: tip
+Some blocks contain "Block Code" tab with our proposition of a reusable component code. Copy it over into your project to use the rest of the examples for such a block.
+:::
+
 <ComponentList framework="react" type="blocks" hide-description/>

apps/docs/components/vue/blocks.md

@@ -13,4 +13,8 @@ hideToc: true
 Fully accessible UI blocks, designed to integrate beautifully with Tailwind CSS and Vue.
 :::
 
+::: tip
+Some blocks contain "Block Code" tab with our proposition of a reusable component code. Copy it over into your project to use the rest of the examples for such a block.
+:::
+
 <ComponentList framework="vue"  type="blocks" hide-description/>

apps/preview/next/pages/api/getShowcases.ts

@@ -1,5 +1,6 @@
 import path from 'path';
 import { NextApiRequest, NextApiResponse } from 'next';
+import { showcasesFilter } from '@storefront-ui/preview-shared/utils/showcases.utils';
 
 import { promise as glob } from 'glob-promise';
 
@@ -8,5 +9,5 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     cwd: path.join(process.cwd(), 'pages', 'showcases'),
   });
 
-  res.status(200).json(fileContents);
+  res.status(200).json(showcasesFilter({ files: fileContents, ext: '.tsx' }));
 }

apps/preview/next/pages/showcases/Alert/Alert.tsx

@@ -0,0 +1,45 @@
+// #region source
+import type { PropsWithStyle } from '@storefront-ui/react';
+import { type PropsWithChildren, forwardRef } from 'react';
+import classNames from 'classnames';
+
+const sizeClasses = {
+  sm: 'typography-text-sm',
+  base: 'typography-text-base',
+};
+const variantClasses = {
+  primary: 'border-primary-200 bg-primary-100',
+  secondary: 'border-secondary-200 bg-secondary-100',
+  positive: 'border-positive-200 bg-positive-100',
+  warning: 'border-warning-200 bg-warning-100',
+  negative: 'border-negative-200 bg-negative-100',
+  neutral: 'border-neutral-200 bg-neutral-100',
+};
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithStyle, PropsWithChildren {
+  size?: keyof typeof sizeClasses;
+  variant?: keyof typeof variantClasses;
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const { className, size = 'base', variant = 'neutral', children, ...attributes } = props;
+
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      className={classNames([
+        'border inline-flex items-start py-1 ps-4 pe-2 gap-2 rounded-md shadow-md',
+        sizeClasses[size],
+        variantClasses[variant],
+        className,
+      ])}
+      {...attributes}
+    >
+      {children}
+    </div>
+  );
+});
+
+export default Alert;
+// #endregion source

apps/preview/next/pages/showcases/Alert/AlertError.tsx

@@ -1,28 +1,46 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
-import { SfIconClose } from '@storefront-ui/react';
+import { SfIconError, SfIconClose } from '@storefront-ui/react';
+import Alert from './Alert';
 
 export default function AlertError() {
   return (
-    <div
-      role="alert"
-      className="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <p className="py-2 mr-2">The password change was failed.</p>
-      <button
-        type="button"
-        className="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
-      >
-        Retry
-      </button>
-      <button
-        type="button"
-        className="p-1.5 md:p-2 ml-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
-        aria-label="Close error alert"
-      >
-        <SfIconClose className="hidden md:block" />
-        <SfIconClose size="sm" className="block md:hidden" />
-      </button>
+    <div className="flex flex-col gap-4">
+      <Alert variant="negative" className="w-full max-w-[640px]">
+        <SfIconError className="my-2 text-negative-700 shrink-0" />
+        <p className="py-2">The password change was failed.</p>
+        <button
+          type="button"
+          className="ms-auto py-2 px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Retry
+        </button>
+        <button
+          type="button"
+          className="p-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close error alert"
+        >
+          <SfIconClose />
+        </button>
+      </Alert>
+
+      <Alert variant="negative" size="sm" className="w-full max-w-[320px]">
+        <SfIconError className="my-1.5 text-negative-700 shrink-0" size="sm" />
+        <p className="py-2">The password change was failed.</p>
+        <button
+          type="button"
+          className="ms-auto py-1.5 px-3 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Retry
+        </button>
+        <button
+          type="button"
+          className="p-1.5 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close error alert"
+        >
+          <SfIconClose size="sm" />
+        </button>
+      </Alert>
     </div>
   );
 }

apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx

@@ -1,13 +1,17 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
+import Alert from './Alert';
 
 export default function AlertNeutral() {
   return (
-    <div
-      role="alert"
-      className="bg-neutral-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-neutral-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <p className="py-2">Happy shopping!</p>
+    <div className="flex flex-col gap-4">
+      <Alert variant="neutral" className="w-full max-w-[640px]">
+        <p className="py-2">Happy shopping!</p>
+      </Alert>
+
+      <Alert variant="neutral" size="sm" className="w-full max-w-[320px]">
+        <p className="py-1.5">Happy shopping!</p>
+      </Alert>
     </div>
   );
 }