@faststore/core 22.42.6

package/src/components/ui/Alert/Alert.stories.mdx

@@ -0,0 +1,164 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import Alert from '.'
+import Icon from '../Icon'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+  BestPractices,
+  BestPracticesRule,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Molecules/Alert"
+  argTypes={{
+    icon: { control: { disable: true } },
+  }}
+  component={Alert}
+/>
+
+export const Template = (args) => (
+  <Alert {...args}>Free shipping starts at $300</Alert>
+)
+
+<header>
+
+# Alert
+
+Alerts display short messages related to the behavior of a system, feature or page.
+
+</header>
+
+## Overview
+
+The `Alert` component uses [FastStore UI Alert](https://www.faststore.dev/reference/ui/molecules/Alert) as base.
+
+<Canvas isColumn>
+  <Story
+    name="overview-default"
+    args={{
+      icon: <Icon name="Truck" width={24} height={24} />,
+      link: { text: 'Buy now', to: '/' },
+      dismissible: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story name="overview-clean">{Template.bind({})}</Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import Alert from '../components/ui/Alert'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      icon: <Icon name="Truck" width={24} height={24} />,
+      link: { text: 'Buy now', to: '/' },
+      dismissible: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow token="--fs-alert-height" value="var(--fs-spacing-7)" />
+  <TokenRow token="--fs-alert-padding-left" value="var(--fs-spacing-3)" />
+  <TokenRow
+    token="--fs-alert-padding-right"
+    value="var(--fs-alert-padding-left)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-alert-bkg-color"
+    value="var(--fs-color-highlighted-bkg)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-alert-text-color"
+    value="var(--fs-color-highlighted-text)"
+    isColor
+  />
+  <TokenRow token="--fs-alert-text-size" value="var(--fs-text-size-1)" />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Link
+
+<TokenTable>
+  <TokenRow
+    token="--fs-alert-link-color"
+    value="var(--fs-alert-text-color)"
+    globalValue="var(--fs-color-highlighted-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-alert-link-color-visited"
+    value="var(--fs-alert-text-color)"
+    globalValue="var(--fs-color-highlighted-text)"
+    isColor
+  />
+</TokenTable>
+
+### Button
+
+<TokenTable>
+  <TokenRow
+    token="--fs-alert-button-text-color"
+    value="var(--fs-alert-text-color)"
+    globalValue="var(--fs-color-highlighted-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-alert-button-bkg-color"
+    value="var(--fs-alert-bkg-color)"
+    globalValue="var(--fs-color-highlighted-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-alert-button-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+---
+
+<BestPractices>
+  <BestPracticesRule
+    recommendedUsage={
+      <Alert
+        icon={<Icon name="ShieldCheck" width={24} height={24} />}
+        link={{ text: 'Buy Now', to: '/' }}
+        dismissible
+      >
+        Free shipping starts at $300
+      </Alert>
+    }
+    recommendedDescription="Write short messages to inform about the behavior of a system, feature, or page. Consider using 30 to 40 characters max."
+    discouragedUsage={
+      <Alert
+        icon={<Icon name="ShieldCheck" width={24} height={24} />}
+        link={{ text: 'Really long link to add here', to: '/' }}
+        dismissible
+      >
+        Alert with a veeeery long description lorem ipsum dolor sit amet,
+        consectetur adipiscing elit. Donec sollicitudin erat non felis feugiat
+        porta. Nam vitae turpis metus. Maecenas feugiat justo tristique libero
+        ultricies.
+      </Alert>
+    }
+    discouragedDescription="Don't use long texts. Important information can be lost."
+  />
+</BestPractices>

package/src/components/ui/Alert/Alert.tsx

@@ -0,0 +1,78 @@
+import { Alert as UIAlert, Icon as UIIcon } from '@faststore/ui'
+import { useCallback } from 'react'
+import type { ReactNode, MouseEvent } from 'react'
+import type { AlertProps } from '@faststore/ui'
+
+import Link from 'src/components/ui/Link'
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+
+import styles from './alert.module.scss'
+
+export type Props = AlertProps & {
+  /**
+   * Icon component for additional customization
+   */
+  icon?: ReactNode
+  /**
+   * Enables dismissible feature
+   */
+  dismissible?: boolean
+  /**
+   * The href and label used at the link
+   */
+  link?: {
+    to: string
+    text: string
+  }
+  onClose?: (event: MouseEvent<HTMLElement>) => void
+}
+
+function Alert({
+  children,
+  icon,
+  dismissible,
+  link,
+  onClose,
+  ...otherProps
+}: Props) {
+  const handleClose = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      if (event.defaultPrevented) {
+        return
+      }
+
+      onClose?.(event)
+    },
+    [onClose]
+  )
+
+  return (
+    <UIAlert
+      data-fs-alert
+      data-fs-alert-dismissible={dismissible}
+      className={styles.fsAlert}
+      {...otherProps}
+    >
+      {icon && <UIIcon component={icon} />}
+
+      <p data-fs-alert-content>{children}</p>
+
+      {link && (
+        <Link data-fs-alert-link variant="inline" href={link.to}>
+          {link.text}
+        </Link>
+      )}
+
+      {dismissible && (
+        <Button data-fs-alert-button aria-label="Close" onClick={handleClose}>
+          <span>
+            <Icon name="X" width={18} height={18} weight="bold" />
+          </span>
+        </Button>
+      )}
+    </UIAlert>
+  )
+}
+
+export default Alert

package/src/components/ui/Alert/alert.module.scss

@@ -0,0 +1,93 @@
+.fs-alert {
+  // --------------------------------------------------------
+  // Design Tokens for Toast
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-alert-height                       : var(--fs-spacing-7);
+  --fs-alert-padding-left                 : var(--fs-spacing-3);
+  --fs-alert-padding-right                : var(--fs-alert-padding-left);
+
+  --fs-alert-bkg-color                    : var(--fs-color-highlighted-bkg);
+
+  --fs-alert-text-color                   : var(--fs-color-highlighted-text);
+  --fs-alert-text-size                    : var(--fs-text-size-1);
+
+  // Link
+  --fs-alert-link-color                   : var(--fs-alert-text-color);
+  --fs-alert-link-color-visited           : var(--fs-alert-text-color);
+
+  // Button
+  --fs-alert-button-text-color            : var(--fs-alert-text-color);
+  --fs-alert-button-bkg-color             : var(--fs-alert-bkg-color);
+  --fs-alert-button-border-radius         : var(--fs-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  align-items: center;
+  height: var(--fs-alert-height);
+  padding-right: var(--fs-alert-padding-right);
+  padding-left: var(--fs-alert-padding-left);
+  font-size: var(--fs-alert-text-size);
+  color: var(--fs-alert-text-color);
+  background-color: var(--fs-alert-bkg-color);
+
+  [data-fs-icon] {
+    padding-right: var(--fs-spacing-1);
+    margin: 0;
+  }
+
+  [data-fs-alert-content] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  span { font-weight: var(--fs-text-weight-bold); }
+
+  [data-fs-alert-link] {
+    min-width: 0;
+    height: var(--fs-alert-height);
+    padding: 0 var(--fs-spacing-1);
+    overflow: hidden;
+    font-weight: var(--fs-text-weight-bold);
+    line-height: var(--fs-alert-height);
+    color: var(--fs-alert-link-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:visited { color: var(--fs-alert-link-color-visited); }
+  }
+
+  [data-fs-alert-button] {
+    min-width: var(--fs-control-tap-size);
+    height: 100%;
+    padding: var(--fs-spacing-0);
+    margin-left: auto;
+    color: var(--fs-alert-button-text-color);
+    background-color: var(--fs-alert-button-bkg-color);
+
+    > span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background-color: var(--fs-alert-button-bkg-color);
+      border-radius: var(--fs-alert-button-border-radius);
+    }
+
+    &:hover span { filter: brightness(0.95); }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-alert-dismissible="true"] {
+    padding-right: 0;
+  }
+}

package/src/components/ui/Alert/index.ts

@@ -0,0 +1 @@
+export { default } from './Alert'