Merge pull request #137 from digital-go-jp/v2

merge v2 into main

Author: johnykei

.storybook/globals.css

@@ -7,13 +7,6 @@
 
 @layer base {
   body {
-    font-family:
-      "Noto Sans JP",
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      sans-serif;
-
-    @apply text-std-17N-170 text-solid-gray-900;
+    @apply font-sans text-std-17N-170 text-solid-gray-900;
   }
 }

package-lock.json

@@ -39,7 +39,7 @@
     "storybook:test": "test-storybook"
   },
   "dependencies": {
-    "@digital-go-jp/tailwind-theme-plugin": "^0.2.0",
+    "@digital-go-jp/tailwind-theme-plugin": "^0.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.15"

package.json

@@ -8,7 +8,7 @@ export const EmergencyBannerButton = (props: Props) => {
   return (
     <div
       className={`
-        flex items-center justify-center mx-auto mt-6 mb-1 w-fit min-w-64 p-4 bg-error-1 text-white text-oln-16B-100 leading-snug rounded-lg
+        flex items-center justify-center mx-auto mt-6 mb-1 w-fit min-w-64 p-4 bg-error-1 text-white text-oln-16B-100 rounded-lg
         outline outline-2 outline-error-1 outline-offset-[calc(2/16*1rem)]
         desktop:outline-4 desktop:outline-offset-[calc(4/16*1rem)] desktop:mt-8 desktop:mb-2
         ${className ?? ''}

src/components/EmergencyBanner/parts/Button.tsx

@@ -43,7 +43,7 @@ type Story = StoryObj<typeof meta>;
 export const Playground: Story = {
   decorators: [
     (Story, context) => (
-      <div className='flex flex-col gap-2'>
+      <div className='flex flex-col items-start gap-2'>
         <Label htmlFor={context.args.id}>
           ラベル<RequirementBadge>※必須</RequirementBadge>
         </Label>
@@ -61,77 +61,67 @@ export const Playground: Story = {
   },
 };
 
-export const Example: Story = {
+export const Errored: Story = {
   render: () => {
     const formId = React.useId();
 
     return (
       <div className='flex flex-col gap-8'>
         <div className='flex flex-col gap-2'>
-          <Label htmlFor={`${formId}-test`}>ラベル</Label>
-          <SupportText id='test-support-text'>サポートテキスト</SupportText>
-          <Input aria-describedby='test-support-text' id={`${formId}-test`} name='test' />
-        </div>
-
-        <div className='flex flex-col gap-2'>
-          <Label htmlFor={`${formId}-test-filled`}>
-            ラベル<RequirementBadge>※必須</RequirementBadge>
-          </Label>
-          <SupportText id='test-filled-support-text'>サポートテキスト</SupportText>
-          <Input
-            aria-describedby='test-filled-support-text'
-            defaultValue='入力済の内容'
-            id={`${formId}-test-filled`}
-            name='test-filled'
-            required
-          />
-        </div>
-
-        <div className='flex flex-col gap-2'>
-          <Label htmlFor={`${formId}-test-error`}>
+          <Label htmlFor={`${formId}-error`}>
             ラベル<RequirementBadge>※必須</RequirementBadge>
           </Label>
-          <SupportText id='test-error-support-text'>サポートテキスト</SupportText>
+          <SupportText id='error-support-text'>サポートテキスト</SupportText>
           <Input
-            aria-describedby='test-error-support-text test-error-text'
+            aria-describedby='error-support-text error-text'
             aria-invalid={true}
-            id={`${formId}-test-error`}
+            id={`${formId}-error`}
             isError={true}
-            name='test-error'
+            name='error'
             required
             defaultValue=''
           />
-          <ErrorText id='test-error-text'>＊エラーテキスト</ErrorText>
+          <ErrorText id='error-text'>＊エラーテキスト</ErrorText>
         </div>
 
         <div className='flex flex-col gap-2'>
-          <Label htmlFor={`${formId}-test-filled-error`}>
+          <Label htmlFor={`${formId}-filled-error`}>
             ラベル<RequirementBadge>※必須</RequirementBadge>
           </Label>
-          <SupportText id='test-filled-error-support-text'>サポートテキスト</SupportText>
+          <SupportText id='filled-error-support-text'>サポートテキスト</SupportText>
           <Input
-            aria-describedby='test-filled-error-support-text test-filled-error-text'
+            aria-describedby='filled-error-support-text filled-error-text'
             aria-invalid={true}
             defaultValue='誤った入力内容'
-            id={`${formId}-test-filled-error`}
+            id={`${formId}-filled-error`}
             isError={true}
-            name='test-filled-error'
+            name='filled-error'
             required
           />
-          <ErrorText id='test-filled-error-text'>＊エラーテキスト</ErrorText>
+          <ErrorText id='filled-error-text'>＊エラーテキスト</ErrorText>
         </div>
+      </div>
+    );
+  },
+};
 
+export const Disabled: Story = {
+  render: () => {
+    const formId = React.useId();
+
+    return (
+      <div className='flex flex-col gap-8'>
         <div className='flex flex-col gap-2'>
-          <Label htmlFor={`${formId}-test-disabled`}>ラベル</Label>
-          <SupportText id='test-disabled-support-text'>
+          <Label htmlFor={`${formId}-disabled`}>ラベル</Label>
+          <SupportText id='disabled-support-text'>
             〜の理由により、この項目は無効化されています。
           </SupportText>
           <Input
-            aria-describedby='test-disabled-support-text'
+            aria-describedby='disabled-support-text'
             aria-disabled={true}
             defaultValue='入力テキスト'
-            id={`${formId}-test-disabled`}
-            name='test-disabled'
+            id={`${formId}-disabled`}
+            name='disabled'
           />
         </div>
       </div>

src/components/Input/Input.stories.tsx

@@ -22,7 +22,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   return (
     <input
       className={`
-        min-w-80 max-w-full rounded-lg border bg-white px-4 py-3 text-oln-16N-100 text-solid-gray-800
+        max-w-full rounded-lg border bg-white px-4 py-3 text-oln-16N-100 text-solid-gray-800
         ${InputBlockSizeStyle[blockSize]}
         ${isError ? 'border-error-1' : 'border-solid-gray-900'}
         focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300