feat(Callout): 追加 (#1366)

* feat(Callout): 追加

* Add Default story

* Add change log

* Fix to use outline instead of border

.changeset/cuddly-oranges-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+feat(Callout): 追加

packages/for-ui/src/callout/Callout.stories.tsx

@@ -0,0 +1,59 @@
+import { MdErrorOutline } from 'react-icons/md';
+import { Meta } from '@storybook/react/types-6-0';
+import { Text } from '../text';
+import { Callout } from './Callout';
+
+const sampleIcons = {
+  undefined,
+  MdErrorOutline: <MdErrorOutline />,
+};
+
+export default {
+  title: 'Feedback / Callout',
+  component: Callout,
+  argTypes: {
+    intention: ['subtle', 'positive', 'negative', 'notice', 'informative'],
+    icon: {
+      options: Object.keys(sampleIcons),
+      mapping: sampleIcons,
+    },
+  },
+} as Meta;
+
+export const Playground = {
+  args: {
+    children: 'テキスト',
+    icon: 'MdErrorOutline',
+  },
+};
+
+export const Default = () => (
+  <div className="flex flex-col gap-4">
+    <Text as="h3" size="l">
+      アイコンなし
+    </Text>
+    <Callout intention="subtle">自動診断がオフになっています。</Callout>
+    <Callout intention="positive">自動診断がオフになっています。</Callout>
+    <Callout intention="negative">自動診断がオフになっています。</Callout>
+    <Callout intention="notice">自動診断がオフになっています。</Callout>
+    <Callout intention="informative">自動診断がオフになっています。</Callout>
+    <Text as="h3" size="l">
+      アイコン付き
+    </Text>
+    <Callout icon={<MdErrorOutline />} intention="subtle">
+      自動診断がオフになっています。
+    </Callout>
+    <Callout icon={<MdErrorOutline />} intention="positive">
+      自動診断がオフになっています。
+    </Callout>
+    <Callout icon={<MdErrorOutline />} intention="negative">
+      自動診断がオフになっています。
+    </Callout>
+    <Callout icon={<MdErrorOutline />} intention="notice">
+      自動診断がオフになっています。
+    </Callout>
+    <Callout icon={<MdErrorOutline />} intention="informative">
+      自動診断がオフになっています。
+    </Callout>
+  </div>
+);

packages/for-ui/src/callout/Callout.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import { Callout } from './Callout';
+
+describe('Callout', () => {
+  it('is rendered', () => {
+    render(<Callout>Hello</Callout>);
+    expect(screen.queryByRole('status', { description: 'Hello' })).toBeInTheDocument();
+  });
+  it('of negative intention is rendered', () => {
+    render(<Callout intention="negative">Hello</Callout>);
+    expect(screen.queryByRole('alert', { description: 'Hello' })).toBeInTheDocument();
+  });
+});

packages/for-ui/src/callout/Callout.tsx

@@ -0,0 +1,61 @@
+import { FC, ReactNode, useId } from 'react';
+import { fsx } from '../system/fsx';
+import { Text } from '../text';
+
+export type CalloutProps = {
+  /**
+   * 操作の意図を示す場合に指定
+   *
+   * 例: 通常、コンテンツの削除など取り返しのつかないユーザーの操作を赤色で表示しますが、その場合intentionにnegativeを設定してください。
+   *
+   * @default subtle
+   */
+  intention?: 'subtle' | 'positive' | 'negative' | 'notice' | 'informative';
+
+  /**
+   * iconを表示する場合に設定
+   *
+   * 色や大きさはCallout側から設定するので指定しないでください。例: `icon={<MdErrorOutline />}`
+   */
+  icon?: ReactNode;
+
+  /**
+   * 表示させるテキストを指定
+   *
+   * リンク等を入れられるようReactNodeにしてありますが、通常はstringを指定してください。Button等は含めないでください。
+   */
+  children: ReactNode;
+};
+
+export const Callout: FC<CalloutProps> = ({ icon, children, intention = 'subtle', ...props }) => {
+  const descriptionId = useId();
+  return (
+    <Text
+      role={intention === 'negative' ? 'alert' : 'status'}
+      aria-describedby={descriptionId}
+      {...props}
+      className={fsx([
+        `flex gap-1 rounded px-2 py-1 outline outline-1`,
+        {
+          subtle: `outline-shade-light-default text-shade-medium-default bg-shade-light-default fill-shade-medium-default`,
+          positive: `outline-positive-light-default text-positive-dark-default bg-positive-light-default fill-positive-medium-default`,
+          negative: `outline-negative-light-default text-negative-dark-default bg-negative-light-default fill-negative-medium-default`,
+          notice: `outline-notice-light-default text-notice-dark-default bg-notice-light-default fill-notice-medium-default`,
+          informative: `outline-informative-light-default text-informative-dark-default bg-informative-light-default fill-informative-medium-default`,
+        }[intention],
+      ])}
+    >
+      {icon && (
+        <span
+          className={fsx(`grid h-6 w-4 shrink-0 place-items-center [&_svg]:h-4 [&_svg]:w-4 [&_svg]:fill-inherit`)}
+          aria-hidden
+        >
+          {icon}
+        </span>
+      )}
+      <Text id={descriptionId} size="r" weight="regular" typeface="sansSerif">
+        {children}
+      </Text>
+    </Text>
+  );
+};

packages/for-ui/src/callout/index.ts

@@ -0,0 +1 @@
+export * from './Callout';

packages/for-ui/src/index.ts

@@ -1,5 +1,6 @@
 export * from './badge';
 export * from './button';
+export * from './callout';
 export * from './checkbox';
 export * from './chip';
 export * from './drawer';