@reni-corp/reni-2c-ui 0.4.11 → 0.4.12

package/src/stories/Banner.stories.ts

@@ -33,7 +33,7 @@ const meta: Meta<typeof Banner> = {
     },
   },
   args: {
-    imageUrl: 'https://placehold.co/800x450',
+    imageUrl: '/placeholder-800x450.svg',
     title: 'Spring Collection',
     description: '新しいスタイルをあなたに',
     linkUrl: '',
@@ -179,7 +179,7 @@ export const リンク付き: Story = {
 export const 正方形: Story = {
   args: {
     aspectRatio: '1/1',
-    imageUrl: 'https://placehold.co/600x600',
+    imageUrl: '/placeholder-600x600.svg',
   },
   render: (args) => ({
     components: { 'rn-banner': Banner },
@@ -200,17 +200,17 @@ export const スライダー内使用例: Story = {
     setup() {
       const banners = [
         {
-          imageUrl: 'https://placehold.co/800x450/e74c3c/fff',
+          imageUrl: '/placeholder-800x450.svg',
           title: 'Sale',
           description: '最大50%OFF',
         },
         {
-          imageUrl: 'https://placehold.co/800x450/3498db/fff',
+          imageUrl: '/placeholder-800x450.svg',
           title: 'New Arrival',
           description: '新作入荷',
         },
         {
-          imageUrl: 'https://placehold.co/800x450/2ecc71/fff',
+          imageUrl: '/placeholder-800x450.svg',
           title: 'Limited',
           description: '期間限定',
         },

package/src/stories/Callout.stories.ts

@@ -0,0 +1,286 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Callout, { type CalloutProps } from '@/components/elements/Callout.vue'
+import Card from '@/components/layouts/Card.vue'
+import Button from '@/components/elements/Button.vue'
+import { StatusColorOptions } from '@/constants'
+import { type StatusColor } from '@/types'
+
+const meta: Meta<typeof Callout> = {
+  title: 'Elements/Callout',
+  component: Callout,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: Object.keys(StatusColorOptions) as StatusColor[],
+    },
+    variant: {
+      control: 'select',
+      options: ['outline', 'tonal'],
+    },
+    title: { control: 'text' },
+    message: { control: 'text' },
+    dense: { control: 'boolean' },
+    elevation: { control: 'boolean' },
+    icon: { control: 'text' },
+    actionPlacement: {
+      control: 'select',
+      options: ['bottom', 'inline'],
+    },
+  },
+  args: {
+    color: 'default',
+    variant: 'outline',
+    title: 'Callout important message',
+    message:
+      'First you need import component to your code. To use the component, copy and paste an example from the CODE tab',
+    dense: false,
+    elevation: false,
+    actionPlacement: 'bottom',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const 基本: Story = {
+  args: {},
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <rn-callout v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const コンパクト: Story = {
+  args: {
+    dense: true,
+    title: 'Callout dense message',
+    message:
+      'First you need import component to your code. To use the component, copy and paste an example from the CODE tab.',
+  },
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <rn-callout v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const カラーバリエーション: Story = {
+  args: {},
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout },
+    setup() {
+      const colors: StatusColor[] = ['default', 'info', 'success', 'warning', 'danger']
+      return { args, colors }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="display: flex; flex-direction: column; gap: 16px;">
+        <rn-callout
+          v-for="color in colors"
+          :key="color"
+          :color="color"
+          :variant="args.variant"
+          :title="'Callout — ' + color"
+          :message="args.message"
+          :dense="args.dense"
+          :elevation="args.elevation"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const バリアントバリエーション: Story = {
+  args: { color: 'info' },
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout },
+    setup() {
+      const variants = ['outline', 'tonal'] as const
+      return { args, variants }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="display: flex; flex-direction: column; gap: 16px;">
+        <rn-callout
+          v-for="variant in variants"
+          :key="variant"
+          :color="args.color"
+          :variant="variant"
+          :title="'variant: ' + variant"
+          :message="args.message"
+          :dense="args.dense"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 一覧: Story = {
+  args: {},
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout },
+    setup() {
+      const colors: StatusColor[] = ['default', 'info', 'success', 'warning', 'danger']
+      const variants = ['outline', 'tonal'] as const
+      return { args, colors, variants }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+        <template v-for="variant in variants" :key="variant">
+          <rn-callout
+            v-for="color in colors"
+            :key="color"
+            :color="color"
+            :variant="variant"
+            title="Callout important message"
+            message="First you need import component to your code. To use the component, copy and paste an example from the CODE tab"
+          />
+        </template>
+      </div>
+    `,
+  }),
+}
+
+export const Card内での使用: Story = {
+  args: {
+    color: 'info',
+    title: '重要なお知らせ',
+    message: 'Card 内に配置するときは dense を使うと角丸・パディングが Card に馴染みます。',
+  },
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout, 'rn-card': Card },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="display: flex; flex-direction: column; gap: 24px; max-width: 480px;">
+        <div>
+          <p style="font-size: 12px; color: #717171; margin: 0 0 8px;">dense なし（非推奨）</p>
+          <rn-card :elevation="false">
+            <rn-callout
+              :color="args.color"
+              :variant="args.variant"
+              :title="args.title"
+              :message="args.message"
+            />
+          </rn-card>
+        </div>
+        <div>
+          <p style="font-size: 12px; color: #717171; margin: 0 0 8px;">dense あり（推奨）</p>
+          <rn-card :elevation="false">
+            <rn-callout
+              :color="args.color"
+              :variant="args.variant"
+              :title="args.title"
+              :message="args.message"
+              :dense="true"
+            />
+          </rn-card>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const タイトルなし: Story = {
+  args: {
+    color: 'info',
+    title: undefined,
+    message:
+      'title を省略するとタイトル要素自体が描画されず、message のみが詰めて表示される。',
+  },
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <rn-callout v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const アクション付き: Story = {
+  args: {
+    color: 'info',
+    title: 'メンテナンスのお知らせ',
+    message: '本日 22:00 より約30分のメンテナンスを実施します。',
+  },
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout, 'rn-button': Button },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <rn-callout v-bind="args">
+          <template #action>
+            <rn-button variant="text" size="sm">詳細を見る</rn-button>
+          </template>
+        </rn-callout>
+      </div>
+    `,
+  }),
+}
+
+export const アクションインライン: Story = {
+  args: {
+    color: 'success',
+    title: undefined,
+    message: 'クーポンが届きました。',
+    actionPlacement: 'inline',
+  },
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout, 'rn-button': Button },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <rn-callout v-bind="args">
+          <template #action>
+            <rn-button variant="text" size="sm">受け取る</rn-button>
+          </template>
+        </rn-callout>
+      </div>
+    `,
+  }),
+}
+
+export const スロット: Story = {
+  args: {
+    color: 'warning',
+    title: '注意が必要です',
+  },
+  render: (args: CalloutProps) => ({
+    components: { 'rn-callout': Callout },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <rn-callout
+          :color="args.color"
+          :variant="args.variant"
+          :title="args.title"
+        >
+          slot を使って <strong>リッチなコンテンツ</strong> を挿入できます。
+        </rn-callout>
+      </div>
+    `,
+  }),
+}

package/src/stories/Card.stories.ts

@@ -122,8 +122,8 @@ export const 応用1: OverridesStory = {
             <rn-card :elevation="args.elevation" :title="args.title">
               よく使うパターンとして、スロットを使用してヘッダー、ヘッダーアクションをカスタマイズすることができます。この例はheaderActionスロットを使用しています。
               <template #headerAction>
-                <rn-icon icon="ellipsis" />
-                <rn-icon icon="arrow-up-from-bracket" />
+                <rn-icon icon="ellipsis-vertical-outline" />
+                <rn-icon icon="arrow-up-right-from-square-outline" />
               </template>
             </rn-card>      
             <rn-card :elevation="args.elevation" :title="args.title">
@@ -132,7 +132,7 @@ export const 応用1: OverridesStory = {
                 <rn-stack direction="horizontal" horizontal-re-size="fill" horizontal-align="between">
                   <rn-stack direction="vertical" gap="xs">
                     <rn-stack gap="sm" vertical-align="center">
-                      <rn-icon color="subtle" size="sm" icon="tag" />
+                      <rn-icon color="subtle" size="sm" icon="tag-outline" />
                       <rn-text :size="body" :color="subtle" :weight="normal">Category</rn-text>
                     </rn-stack>
                     <rn-stack>
@@ -140,8 +140,8 @@ export const 応用1: OverridesStory = {
                     </rn-stack>
                   </rn-stack>              
                   <rn-stack direction="vertical">
-                    <rn-icon icon="ellipsis" />
-                  </rn-stack>              
+                    <rn-icon icon="ellipsis-vertical-outline" />
+                  </rn-stack>
                 </rn-stack>              
               </template>
             </rn-card>    

package/src/stories/ComboBox.stories.ts

@@ -314,7 +314,7 @@ export const アイコン付き: OverridesStory = {
           :noResultsText="args.noResultsText"
         >
           <template #append-inner>
-            <rn-icon icon="chevron-down" />
+            <rn-icon icon="chevron-down-outline" />
           </template>
         </rn-comboBox>
         <div style="margin-top: 16px;">

package/src/stories/Disclosure.stories.ts

@@ -211,7 +211,7 @@ export const Cardとのコンポジション: Story = {
           <rn-disclosure :open="true">
             <template #trigger>
               <rn-stack direction="horizontal" gap="sm" vertical-align="center">
-                <rn-icon icon="circle-info" color="info" />
+                <rn-icon icon="circle-info-outline" color="info" />
                 <rn-text size="subtitle" color="info" weight="bold">Information</rn-text>
               </rn-stack>
             </template>

package/src/stories/Drawer.stories.ts

@@ -99,7 +99,7 @@ export const 応用1: OverridesStory = {
             <template #header>
               <div class="RN-al-horizontal RN-al-gap-md RN-al-fill-width RN-al-width-align-between">
                 <div class="RN-al-horizontal RN-al-gap-md">
-                  <rn-icon color="subtle" size="xl" icon="circle-user" />
+                  <rn-icon color="subtle" size="xl" icon="user-outline" />
                   <div class="RN-al-vertical">
                     <div><span class="RN-text--weight-bold">User Name</span></div>
                     <div>
@@ -110,7 +110,7 @@ export const 応用1: OverridesStory = {
                   </div>
                 </div>
                 <div class="RN-al-horizontal RN-al-gap-md">
-                  <rn-icon icon="ellipsis" />
+                  <rn-icon icon="ellipsis-vertical-outline" />
                 </div>
               </div>                
             </template>

package/src/stories/Hero.stories.ts

@@ -46,7 +46,7 @@ const meta: Meta<typeof Hero> = {
   args: {
     layout: 'horizontal-sprit',
     reverse: false,
-    media: 'https://placehold.co/800x600',
+    media: '/placeholder-800x600.svg',
     eyebrow: 'NEW COLLECTION',
     title: 'Spring 2025',
     subtitle: '新しいスタイルをあなたに',
@@ -111,7 +111,7 @@ export const 横並び_逆順: Story = {
 export const オーバーレイ: Story = {
   args: {
     layout: 'overlay',
-    media: 'https://placehold.co/1200x600',
+    media: '/placeholder-800x600.svg',
   },
   render: (args) => ({
     components: { 'rn-hero': Hero },
@@ -127,7 +127,7 @@ export const オーバーレイ: Story = {
 export const オーバーレイ_中央揃え: Story = {
   args: {
     layout: 'overlay',
-    media: 'https://placehold.co/1200x600',
+    media: '/placeholder-800x600.svg',
     contentAlign: 'center',
     contentVerticalAlign: 'center',
     overlayColor: 'rgba(0, 0, 0, 0.6)',
@@ -212,7 +212,7 @@ export const アスペクト比_横並び: Story = {
 export const オーバーレイ_シネマ比率: Story = {
   args: {
     layout: 'overlay',
-    media: 'https://placehold.co/1200x600',
+    media: '/placeholder-800x600.svg',
     aspectRatio: '21/9',
     contentAlign: 'center',
     contentVerticalAlign: 'center',
@@ -232,7 +232,7 @@ export const オーバーレイ_シネマ比率: Story = {
 export const フォントファミリー選択: Story = {
   args: {
     layout: 'horizontal-sprit',
-    media: 'https://placehold.co/800x600',
+    media: '/placeholder-800x600.svg',
     eyebrow: 'CUSTOM FONT',
     title: 'Brand Font Title',
     subtitle: 'モノスペースサブタイトル',

package/src/stories/Icon.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Icon, { IconProps } from '@/components/elements/Icon.vue'
 import { LimitedSizeOptions, ColorOptions } from '@/constants'
 import { LimitedSize, Color } from '@/types'
+import iconJson from '@reni-corp/reni-icon/dist/reni-icon.json'
 
 const meta: Meta<typeof Icon> = {
   title: 'Elements/Icon',
@@ -21,7 +22,7 @@ const meta: Meta<typeof Icon> = {
     },
   },
   args: {
-    icon: 'circle-exclamation',
+    icon: 'home-outline',
     size: 'md',
     color: 'default',
   },
@@ -65,92 +66,17 @@ export const 一覧: OverridesStory = {
   render: (args: StoryArgs) => ({
     components: { 'rn-icon': Icon },
     setup() {
-      // 利用可能な全てのアイコン名を定義（Icon.vueのlibraryに登録されている順序に合わせて）
-      const availableIcons = [
-        // Free Solid SVG Icons
-        'circle-exclamation',
-        'chevron-circle-down',
-        'info-circle',
-        'check',
-        'check-circle',
-        'times-circle',
-        'xmark',
-        'shopping-cart',
-        'chevron-left',
-        'chevron-right',
-        'chevron-up',
-        'chevron-down',
-        'bell',
-        'person-walking',
-        // Awesome.me Kit Regular Icons（farプレフィックス付き）
-        ['far', 'circle-plus'],
-        ['far', 'circle-minus'],
-        ['far', 'clock'],
-        ['far', 'circle-info'],
-        ['far', 'calendar'],
-        ['far', 'minus'],
-        ['far', 'hand-holding-box'],
-        ['far', 'circle-arrow-right'],
-        ['far', 'circle-arrow-left'],
-        ['far', 'circle-arrow-up'],
-        ['far', 'circle-arrow-down'],
-        ['far', 'arrow-right'],
-        ['far', 'arrow-left'],
-        ['far', 'arrow-up'],
-        ['far', 'arrow-down'],
-        ['far', 'calendar-lines'],
-        ['far', 'bars'],
-        ['far', 'cart-shopping'],
-        ['far', 'user'],
-        ['far', 'magnifying-glass'],
-        ['far', 'eye'],
-        ['far', 'eye-slash'],
-        ['far', 'trash'],
-        ['far', 'bag-shopping'],
-        ['far', 'pen-to-square'],
-        ['far', 'house-user'],
-        ['far', 'clipboard'],
-        ['far', 'gift'],
-        ['far', 'credit-card'],
-        ['far', 'truck'],
-        ['far', 'arrow-left-from-bracket'],
-        ['far', 'location-dot'],
-        ['far', 'plus'],
-        ['far', 'gifts'],
-        ['far', 'pen'],
-        ['far', 'ellipsis-vertical'],
-        ['far', 'star'],
-        // Awesome.me Kit Solid Icons（fasプレフィックス付き）
-        ['fas', 'circle-xmark'],
-        ['fas', 'triangle-exclamation'],
-        // Free Brands SVG Icons
-        ['fab', 'youtube'],
-        ['fab', 'x-twitter'],
-        ['fab', 'instagram'],
-        ['fab', 'tiktok'],
-        ['fab', 'facebook'],
-        ['fab', 'line'],
-        ['fab', 'pixiv'],
-        ['fab', 'twitch'],
-        ['fab', 'spotify'],
-        // Awesome.me Kit Custom Icons（fakプレフィックス付き）
-        ['fak', 'apple-music'],
-        ['fak', 'line-music'],
-        ['fak', 'nico-video'],
-      ]
-
+      const availableIcons = Object.keys(iconJson)
       return { args, availableIcons }
     },
     template: /* html */ `
       <div class='sb-canvas'>
         <h3 style='margin: 0 0 16px 0; font-size: 18px; font-weight: 600;'>利用可能なアイコン一覧（{{ availableIcons.length }}個）</h3>
-        <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; max-height: 600px; overflow-y: auto; padding: 8px; border: 1px solid #e1e5e9; border-radius: 4px; background: #fafbfc;'>
-          <div 
-            v-for='(iconName, index) in availableIcons' 
-            :key='index'
-            style='display: flex; flex-direction: column; align-items: center; padding: 12px 8px; background: white; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s ease;'
-            @mouseenter='(e) => e.target.style.transform = "translateY(-2px)"'
-            @mouseleave='(e) => e.target.style.transform = "translateY(0)"'
+        <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; padding: 8px; border: 1px solid #e1e5e9; border-radius: 4px; background: #fafbfc;'>
+          <div
+            v-for='iconName in availableIcons'
+            :key='iconName'
+            style='display: flex; flex-direction: column; align-items: center; padding: 12px 8px; background: white; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);'
           >
             <rn-icon
               :icon='iconName'
@@ -159,16 +85,12 @@ export const 一覧: OverridesStory = {
               style='margin-bottom: 8px;'
             />
             <span style='font-size: 11px; color: #586069; text-align: center; word-break: break-word; line-height: 1.3;'>
-              {{ Array.isArray(iconName) ? iconName[1] : iconName }}
+              {{ iconName }}
             </span>
           </div>
         </div>
         <p style='margin-top: 16px; font-size: 12px; color: #586069; line-height: 1.4;'>
-          ※ アイコンの指定方法:<br>
-          • Free Solid Icons: 文字列 例：'circle-exclamation'<br>
-          • Regular Icons: 配列 例：['far', 'circle-plus']<br>
-          • Brand Icons: 配列 例：['fab', 'youtube']<br>
-          • Custom Icons: 配列 例：['fak', 'apple-music']
+          ※ アイコンの指定方法: 文字列でアイコン名を渡す（例：'home-outline'）
         </p>
       </div>
     `,

package/src/stories/Image.stories.ts

@@ -17,7 +17,7 @@ const meta: Meta<typeof Image> = {
     },
     size: {
       control: 'select',
-      options: ['sm', 'md', 'lg', 'xl', 'auto'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'auto'],
       description: '画像のサイズ',
     },
     loading: {
@@ -137,6 +137,10 @@ export const サイズ設定: OverridesStory = {
       <div class='sb-canvas'>
         <rn-stack direction="vertical" gap="md">
           <rn-stack direction="horizontal" gap="md" horizontal-align="start">
+            <rn-stack direction="vertical" gap="xs">
+              <div>Size: xs</div>
+              <rn-image src="https://picsum.photos/400/300" alt="サンプル画像" size="xs" />
+            </rn-stack>
             <rn-stack direction="vertical" gap="xs">
               <div>Size: sm</div>
               <rn-image src="https://picsum.photos/400/300" alt="サンプル画像" size="sm" />

package/src/stories/Label.stories.ts

@@ -24,7 +24,7 @@ const meta: Meta<typeof Label> = {
     },
     size: {
       control: 'select',
-      options: ['sm', 'md'],
+      options: ['sm', 'md', 'lg'],
     },
     variant: {
       control: 'select',
@@ -140,6 +140,7 @@ export const サイズ比較: OverridesStory = {
         <rn-stack direction="horizontal" gap="sm" vertical-align="center">
           <rn-label size="sm" color="primary">sm</rn-label>
           <rn-label size="md" color="primary">md</rn-label>
+          <rn-label size="lg" color="primary">lg</rn-label>
         </rn-stack>
       </div>
     `,

package/src/stories/List.stories.ts

@@ -119,22 +119,22 @@ export const アイコンと矢印: OverridesStory = {
     items: [
       {
         name: 'マイページ',
-        icon: ['far', 'user'],
+        icon: 'user-outline',
         withArrow: true,
       },
       {
         name: 'お気に入り',
-        icon: 'check',
+        icon: 'star-outline',
         withArrow: true,
       },
       {
         name: '設定',
-        icon: ['far', 'pen-to-square'],
+        icon: 'pen-outline',
         withArrow: true,
       },
       {
         name: 'ショッピングカート',
-        icon: ['far', 'cart-shopping'],
+        icon: 'cart-shopping-outline',
         withArrow: false,
       },
     ],

package/src/stories/Modal.stories.ts

@@ -96,11 +96,11 @@ export const 応用1: OverridesStory = {
               :title=args.title
             >
               <template #headerLeftItem>
-                <rn-icon icon="arrow-left" @click="handleVisible" />
+                <rn-icon icon="arrow-left-outline" @click="handleVisible" />
               </template>
               <template #headerRightItem>
-                <rn-icon icon="copy" />
-                <rn-icon icon="ellipsis" />
+                <rn-icon icon="clipboard-outline" />
+                <rn-icon icon="ellipsis-vertical-outline" />
               </template>
               <template #body>
                 <div class="RN-al-vertical RN-al-fill-width RN-al-gap-md">