wix-style-react/src/RadioGroup/docs/RadioGroup.examples.js

wix-style-react

export const _structure = `
<RadioGroup value={1}>
  <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
  <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
  <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  <RadioGroup.Radio value={4}>Option 4</RadioGroup.Radio>
</RadioGroup>;
`;

export const _display = `
<StorybookComponents.Stack flexDirection="column">
  <RadioGroup value={1} display="vertical">
    <RadioGroup.Radio value={1}>Vertical 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Vertical 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Vertical 3</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup value={1} display="horizontal">
    <RadioGroup.Radio value={1}>Horizontal 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Horizontal 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Horizontal 3</RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
`;

export const _spacing = `
<StorybookComponents.Stack gap="72px">
  <RadioGroup spacing="12px">
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup spacing="18px">
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup spacing="24px">
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
`;

export const _verticalAlignment = `
<StorybookComponents.Stack flexDirection="column">
  <RadioGroup vAlign="center">
    <RadioGroup.Radio>
      <Heading appearance="H4">Center Aligned Radio</Heading>
      <Text secondary size="small">
        Subtitle
      </Text>
    </RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup vAlign="top">
    <RadioGroup.Radio>
      <Heading appearance="H4">Top Aligned Radio</Heading>
      <Text secondary size="small">
        Subtitle
      </Text>
    </RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
`;

export const _disabled = `
<StorybookComponents.Stack gap="60px">
  <RadioGroup disabled value={1}>
    <RadioGroup.Radio value={1}>All disabled</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>All disabled</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>All disabled</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup disabledRadios={[3]} value={1}>
    <RadioGroup.Radio value={1}>Selected</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Default</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Disabled</RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
`;

export const _selectionArea = `
<StorybookComponents.Stack flexDirection="column">
  <RadioGroup
    value={1}
    selectionArea="always"
    selectionAreaSkin="outlined"
    selectionAreaPadding="12px 18px"
  >
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
  <RadioGroup
    value={1}
    selectionArea="hover"
    selectionAreaSkin="filled"
    selectionAreaPadding="12px 18px"
  >
    <RadioGroup.Radio value={1}>Option 1</RadioGroup.Radio>
    <RadioGroup.Radio value={2}>Option 2</RadioGroup.Radio>
    <RadioGroup.Radio value={3}>Option 3</RadioGroup.Radio>
  </RadioGroup>
</StorybookComponents.Stack>;
`;

export const _content = `
<RadioGroup value={1} selectionArea="always">
  <RadioGroup.Radio
    value={1}
    content={
      <StorybookComponents.Placeholder margin={2}>
        Details about Option 1
      </StorybookComponents.Placeholder>
    }
  >
    Option 1
  </RadioGroup.Radio>
  <RadioGroup.Radio
    value={2}
    content={
      <StorybookComponents.Placeholder margin={2}>
        Details about Option 2
      </StorybookComponents.Placeholder>
    }
  >
    Option 2
  </RadioGroup.Radio>
</RadioGroup>;
`;

export const _neutralOption = `
() => {
  const [selected, setSelected] = React.useState(1);

  return (
    <RadioGroup value={selected} onChange={setSelected}>
      <RadioGroup.Radio value={1}>All</RadioGroup.Radio>
      <RadioGroup.Radio value={2}>In stock</RadioGroup.Radio>
      <RadioGroup.Radio value={3}>Out of stock</RadioGroup.Radio>
    </RadioGroup>
  );
};
`;

export const _additionalInfo = `
() => {
  const [selected, setSelected] = React.useState(2);

  return (
    <FormField label="How would you like to add tax?">
      <RadioGroup value={selected} onChange={setSelected}>
        <RadioGroup.Radio value={1}>Include in the price</RadioGroup.Radio>
        <RadioGroup.Radio value={2}>
          Add total at checkout
          <Box inline>
            <InfoIcon content="Tax is charged to a customer, it won't be included in the price of your plans. They'll see it added to the price at a checkout." />
          </Box>
        </RadioGroup.Radio>
      </RadioGroup>
    </FormField>
  );
};
`;

export const _horizontalDirection = `
() => {
  const [selected, setSelected] = React.useState(2);
  return (
    <CustomModalLayout
      title="Add an area for local delivery"
      subtitle="Set a delivery area using a radius or ZIP/postal codes."
      primaryButtonText="Add Area"
      secondaryButtonText="Cancel"
      onCloseButtonClick={() => {}}
    >
      <Layout cols={1}>
        <FormField label="Area name">
          <Input placeholder="e.g. Lower East Side" />
        </FormField>
        <FormField label="Set area by">
          <RadioGroup
            display="horizontal"
            value={selected}
            onChange={setSelected}
          >
            <RadioGroup.Radio value={1}>Radius</RadioGroup.Radio>
            <RadioGroup.Radio value={2}>ZIP / Postal codes</RadioGroup.Radio>
          </RadioGroup>
        </FormField>
        <FormField label="Add ZIP/postal codes that share the same delivery rate">
          <InputArea placeholder="Separate postal coded with commas, e.g., 10002, 10003, 10009" />
        </FormField>
      </Layout>
    </CustomModalLayout>
  );
};
`;

export const _customLabel = `() => {
  const [selected, setSelected] = React.useState(1);
  return (
    <Card>
      <Card.Header
        title="Business Type"
        subtitle="Tell us what type of business you have"
      />
      <Card.Divider />
      <Card.Content>
        <RadioGroup
          selectionArea="always"
          selectionAreaPadding="18px"
          spacing="12px"
          value={selected}
          onChange={setSelected}
        >
          <RadioGroup.Radio value={1}>
            <Box direction="vertical">
              <Text weight="normal">Individual</Text>
              <Text size="small">
                This means you own and run the business, and use a personal bank
                account.
              </Text>
            </Box>
          </RadioGroup.Radio>
          <RadioGroup.Radio value={2}>
            <Box direction="vertical">
              <Text weight="normal">Partnership / LLC / Corporation</Text>
              <Text size="small">
                You have a business registration number and a business bank
                account.
              </Text>
            </Box>
          </RadioGroup.Radio>
        </RadioGroup>
      </Card.Content>
    </Card>
  );
};
`;