Detail Row

Row used to show different options for customized Products

How to use

Detail Row is used with its different inputs, the inputs available are:

  • Check Box
  • Radio Button
  • Counter
import {
  DetailRowWithCheckBox,
  DetailRowWithRadioButton,
  DetailRowWithCounter,
} from '@engyalo/storefront-components'
<DetailRowWithCheckBox
          title="Crispy"
          subTitle="hey!"
          value="value "
          onChange={clicked}
          checked={checked}
        />
            
<DetailRowWithRadioButton
          title="Crispy"
          name="food"
          value="crispy"
          checked={true}
          onChangeEvent={onChangeRadioValue}
        />         
            
<DetailRowWithCounter
          title="Crispy"
          value={value}
          addAction={add}
          minusAction={minus}
        />

Props

Check Box

export interface Props extends CheckboxProps {
  title: string;
  subTitle?: string;
  disabled?: boolean;
  checked: boolean;
  value: string;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
}

Radio Button

export interface Props extends RadioProps {
  title: string;
  subTitle?: string;
  checked? : boolean;
  value: string;
  name: string,
  onChangeEvent: (event: ChangeEvent<HTMLInputElement>) => void
}

Considerations

When using a DetailRow with a Radio Button, you must contain the components inside a RadioGroup
example:

<RadioGroup>
        <DetailRowWithRadioButton
          title="Crispy"
          name="food"
          value="crispy"
          checked={true}
          onChangeEvent={onChangeRadioValue}
        />
        <DetailRowWithRadioButton
          title="A la plancha"
          name="food"
          value="plancha"
          onChangeEvent={onChangeRadioValue}
        />
        <DetailRowWithRadioButton
          title="Tradicional"
          name="food"
          value="tradicional"
          onChangeEvent={onChangeRadioValue}
        />
</RadioGroup>

The value is handled by every <DetailRowWithRadioButton> component and not by the Radio Group

Counter

export interface Props extends BoxProps {
  title: string;
  subTitle?: string;
  addAction: (event: MouseEvent<HTMLButtonElement>) => void;
  minusAction: (event: MouseEvent<HTMLButtonElement>) => void;
  value: number;
}

Visual Example


Did this page help you?