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

wix-style-react

export const _structure = `
<Radio label="Label" />;
`;

export const _states = `
<StorybookComponents.Stack flexDirection="column">
  <Radio label="Default" />
  <Radio label="Checked" checked />
  <Radio label="Disabled" disabled />
</StorybookComponents.Stack>;
`;

export const _alignment = `
<StorybookComponents.Stack width="300px">
  <Radio
    alignItems="top"
    label="Radio button label that wraps to multiple lines"
  />
</StorybookComponents.Stack>;
`;

export const _customLabel = `() => {
  const [checked, setChecked] = React.useState(false);

  return (
    <Radio
      checked={checked}
      onChange={() => setChecked(true)}
      label={
        <Cell>
          <Heading appearance="H4">Free Plan</Heading>
          <Text size="small" secondary>
            Offer your plan free of charge.
          </Text>
        </Cell>
      }
    />
  );
};
`;

export const _additionalInfo = `() => {
  const [checked, setChecked] = React.useState(false);

  return (
    <Box inline gap="6px">
      <Radio
        label="Add total at checkout"
        checked={checked}
        onChange={() => setChecked(true)}
      />
      <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>
  );
};
`;

export const _customLayout = `
() => {
  const [checkedId, setCheckedId] = React.useState(0);

  return (
    <Layout cols={1} gap="12px">
      <Card>
        <Box padding="18px 24px">
          <Radio
            checked={checkedId === 1}
            onChange={() => setCheckedId(1)}
            label={
              <Box direction="vertical">
                <Heading appearance="H4">Free Plan</Heading>
                <Text size="small" secondary>
                  Offer your plan free of charge
                </Text>
              </Box>
            }
          />
        </Box>
      </Card>
      <Card>
        <Box padding="18px 24px">
          <Radio
            checked={checkedId === 2}
            onChange={() => setCheckedId(2)}
            label={
              <Box direction="vertical">
                <Heading appearance="H4">One Time Payment</Heading>
                <Text size="small" secondary>
                  Charge a single upfront fee
                </Text>
              </Box>
            }
          />
        </Box>
      </Card>
      <Card>
        <Box padding="18px 24px">
          <Radio
            checked={checkedId === 3}
            onChange={() => setCheckedId(3)}
            label={
              <Box direction="vertical">
                <Heading appearance="H4">Recurring Payment</Heading>
                <Text size="small" secondary>
                  Charge a weekly, monthly or yearly fee
                </Text>
              </Box>
            }
          />
        </Box>
      </Card>
    </Layout>
  );
};
`;