SmartHR Design System

FormGroup

StorybookGitHub
別画面で開く
処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import * as React from 'react'
import styled, { css } from 'styled-components'


import { Input } from '../Input'


import { FormGroup } from './FormGroup'


export default {
  title: 'Forms（フォーム）/FormGroup',
  component: FormGroup,
  parameters: {
    withTheming: true,
  },
}


type SampleChildrenProps = {
  id1?: string
  id2?: string
  disabled?: boolean
}


const SampleChildren: React.VFC<SampleChildrenProps> = ({ id1, id2, disabled }) => {
  return (
    <SampleWrapper>
      <SampleFormGroup
        title="first name"
        titleType="subSubBlockTitle"
        innerMargin="XXS"
        htmlFor={id1}
        disabled={disabled}
      >
        <Input name="id1" id={id1} disabled={disabled} />
      </SampleFormGroup>
      <SampleFormGroup
        title="last name"
        titleType="subSubBlockTitle"
        innerMargin="XXS"
        htmlFor={id2}
        disabled={disabled}
      >
        <Input name="id2" id={id2} disabled={disabled} />
      </SampleFormGroup>
    </SampleWrapper>
  )
}


const SampleStatusLabelProps = [
  {
    type: 'red' as const,
    children: 'label 1' as const,
  },
  {
    type: 'blue' as const,
    children: 'label 2' as const,
  },
]


export const All: Story = () => {
  return (
    <Wrapper>
      <Title>default</Title>
      <Body>
        <FormGroup title="Title" titleType="blockTitle" role="group">
          <SampleChildren id1="id_1-1" id2="id_1-2" />
        </FormGroup>
      </Body>
      <Title>with status label</Title>
      <Body>
        <FormGroup
          title="Title"
          titleType="blockTitle"
          statusLabelProps={SampleStatusLabelProps}
          role="group"
        >
          <SampleChildren id1="id_2-1" id2="id_2-2" />
        </FormGroup>
      </Body>
      <Title>with help message</Title>
      <Body>
        <FormGroup
          title="Title"
          titleType="blockTitle"
          helpMessage="help message text"
          role="group"
        >
          <SampleChildren id1="id_3-1" id2="id_3-2" />
        </FormGroup>
      </Body>
      <Title>with error messages</Title>
      <Body>
        <FormGroup
          title="Title"
          titleType="blockTitle"
          statusLabelProps={SampleStatusLabelProps}
          errorMessages={['error message 1', 'error message 2']}
          role="group"
        >
          <SampleChildren id1="id_4-1" id2="id_4-2" />
        </FormGroup>
      </Body>
      <Title>with all options</Title>
      <Body>
        <FormGroup
          title="Title"
          titleType="blockTitle"
          statusLabelProps={SampleStatusLabelProps}
          helpMessage="help message text"
          errorMessages={['error message 1', 'error message 2']}
          role="group"
        >
          <SampleChildren id1="id_5-1" id2="id_5-2" />
        </FormGroup>
      </Body>
      <Title>disabled</Title>
      <Body>
        <FormGroup
          title="Title"
          titleType="blockTitle"
          statusLabelProps={SampleStatusLabelProps}
          helpMessage="help message text"
          errorMessages="error message"
          disabled
          role="group"
        >
          <SampleChildren id1="id_6-1" id2="id_6-2" disabled />
        </FormGroup>
      </Body>
    </Wrapper>
  )
}
All.storyName = 'all'


const Wrapper = styled.dl`
  display: block;
  padding: 24px;
  margin: 0;
`


const Title = styled.dt(
  ({ theme }) => css`
    display: block;
    padding: 0;
    margin: 0 0 16px;
    color: ${theme.color.TEXT_GREY};
    font-style: italic;
  `,
)


const Body = styled.dd`
  display: block;
  padding: 0;
  margin: 0 0 32px;
`


const SampleWrapper = styled.div`
  display: flex;
  align-items: flex-start;
`


const SampleFormGroup = styled(FormGroup)`
  margin-right: 16px;
`
処理中

Props

NameRequiredTypeDescription
titletruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalグループのタイトル名
titleType-"screenTitle", "sectionTitle", "blockTitle", "subBlockTitle", "subSubBlockTitle"タイトルの見出しのタイプ
htmlFor-stringlabel 要素に適用する `htmlFor` 値
labelId-stringlabel 要素に適用する `id` 値
innerMargin-"XXS", "XS", "S"タイトルと子要素の間のマージン
statusLabelProps-(Props & ElementProps)[]タイトルの隣に表示する `StatusLabel` の Props の配列
helpMessage-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalタイトルの下に表示するヘルプメッセージ
errorMessages-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortal, ReactNode[]タイトルの下に表示するエラーメッセージ
disabled-false, true`true` のとき、文字色を `TEXT_DISABLED` にする
className-stringコンポーネントに適用するクラス名