optimizely-oui
Version:
Optimizely's Component Library.
108 lines • 4.33 kB
JavaScript
import React from "react";
import { storiesOf } from "@storybook/react";
import Fieldset from "./index";
import Form from "../Form";
import Input from "../Input";
import DatePicker from "../DatePicker/DatePicker.js";
import Col from "../Layout/Col";
var stories = storiesOf("Experimental|Fieldset", module);
stories.addDecorator(function (story) {
return React.createElement("div", {
className: "soft-quad--sides"
}, story());
});
stories.add("In a form", function () {
return React.createElement("div", {
className: "push-double--top"
}, React.createElement(Col, {
small: 8,
large: 5
}, React.createElement(Form, null, React.createElement(Fieldset, {
isRequired: true,
title: "Location",
description: "The title of the fieldset will be considered the legend of the fieldset. The default of a Fieldset (titleSize='large') is visually comparable to a Form.Section. Fieldset should only be used if there are multiple inputs in the section that are linked (think address or credit card fields). If they are not closely linked, Form.Section is more appropriate."
}, React.createElement(Fieldset.Row, {
isFullWidth: true
}, React.createElement(Fieldset.Item, null, React.createElement(Input, {
label: "Longitude",
note: "A short description or note about this field.",
placeholder: "Just a placeholder",
type: "text",
id: "input-01"
})), React.createElement(Fieldset.Item, null, React.createElement(Input, {
label: "Latitude",
note: "A short description or note about this field.",
placeholder: "Just a placeholder",
type: "text",
id: "input-02"
})))), React.createElement(Form.Section, {
title: "Form section",
description: "All of the options to customize a Form.Section are also available on Fieldset."
}, React.createElement(Form.Item, null, React.createElement(Input, {
label: "Input label",
note: "A short description or note about this field.",
placeholder: "Just a placeholder",
type: "text",
id: "input-03"
})), React.createElement(Fieldset, {
titleSize: "small",
title: "Location",
bottomSpacing: false,
description: "We're using a small title because this fieldset belongs in this section."
}, React.createElement(Fieldset.Item, null, React.createElement(Input, {
label: "Latitude",
note: "A short description or note about this field.",
placeholder: "Just a placeholder",
type: "text",
id: "input-04"
})), React.createElement(Fieldset.Item, null, React.createElement(Input, {
label: "Longitude",
note: "A short description or note about this field.",
placeholder: "Just a placeholder",
type: "text",
id: "input-05"
})))))));
}).add("Standalone", function () {
return React.createElement("div", {
className: "push-double--top"
}, React.createElement(Col, {
small: 8,
large: 5
}, React.createElement(Fieldset, {
isRequired: true,
title: "Fieldset section",
description: "Fieldsets can also be used separately from Forms. However do consider using them in Forms for good practice."
}, React.createElement(Fieldset.Item, null, React.createElement(Input, {
label: "Input label",
note: "A short description or note about this field.",
placeholder: "Just a placeholder",
type: "text",
id: "input-01"
})), React.createElement(Fieldset.Row, {
isFullWidth: true
}, React.createElement(Fieldset.Item, null, React.createElement(DatePicker, {
inputId: "date-picker-id",
initialDate: null,
isFocused: false,
isAbsolutelyPositioned: true
})), React.createElement(Fieldset.Item, null, React.createElement(DatePicker, {
inputId: "date-picker-id",
initialDate: null,
isFocused: false,
isAbsolutelyPositioned: true
}))), React.createElement(Fieldset.Row, {
isFullWidth: true
}, React.createElement(Fieldset.Item, null, React.createElement(Input, {
label: "Input label",
note: "A short description or note about this field.",
placeholder: "Just a placeholder",
type: "text",
id: "input-02"
})), React.createElement(Fieldset.Item, null, React.createElement(Input, {
label: "Input label",
note: "A short description or note about this field.",
placeholder: "Just a placeholder",
type: "text",
id: "input-03"
}))))));
});