diff --git a/src/formSection/index.tsx b/src/formSection/index.tsx
index cb21f10..4ccb099 100644
--- a/src/formSection/index.tsx
+++ b/src/formSection/index.tsx
@@ -2,20 +2,30 @@ import { lighten } from 'polished';
import * as React from 'react';
import styled from 'styled-components';
+import Grid from '../grid';
+import { EColumnSpanMode } from '../grid/column';
+import { ERowAlignmentModes } from '../grid/row';
import { ITheme } from '../theme';
+export enum FormSectionLabelPosition {
+ top,
+ side,
+}
+
export interface IFormSection {
children: (inputProps: {
id: string;
'aria-describedby': string | undefined;
'aria-labelledby': string | undefined;
+ 'aria-required': boolean | undefined;
+ 'aria-invalid': boolean | undefined;
}) => React.ReactElement;
- theme: ITheme;
title: string;
error?: string;
info?: string;
className?: string;
required?: boolean;
+ labelPosition?: FormSectionLabelPosition;
}
interface IFormSectionTitle {
@@ -67,6 +77,7 @@ const SectionInfo = styled.div`
SectionInfo.displayName = 'SectionInfo';
class FormSection extends React.PureComponent {
+ public static displayName = 'FormSection';
private static uniqueIdCounter = 0;
private uniqueId: string;
@@ -79,7 +90,17 @@ class FormSection extends React.PureComponent {
}
public render() {
- const { className, children, error, info, title, required } = this.props;
+ const { labelPosition } = this.props;
+
+ if (labelPosition === FormSectionLabelPosition.side) {
+ return this.renderWithLabelOnSide();
+ }
+
+ return this.renderWithLabelOnTop();
+ }
+
+ private renderWithLabelOnTop = () => {
+ const { children, error, info, title, required } = this.props;
// IDs for aria props
const inputId = `${this.uniqueId}__input`;
@@ -88,26 +109,61 @@ class FormSection extends React.PureComponent {
const errorId = `${this.uniqueId}__error`;
return (
-
-
- {title}
-
- {children({
- 'aria-describedby': (error && errorId) || (info && infoId) || undefined,
- 'aria-labelledby': labelId,
- id: inputId,
- })}
- {!error && info && {info}}
- {error && {error}}
-
+
+
+
+
+ {title}
+
+
+
+
+
+ {children({
+ 'aria-describedby': (error && errorId) || (info && infoId) || undefined,
+ 'aria-invalid': !!error || undefined,
+ 'aria-labelledby': labelId,
+ 'aria-required': required,
+ id: inputId,
+ })}
+ {!error && info && {info}}
+ {error && {error}}
+
+
+
);
- }
-}
+ };
-const StyledFormSection = styled(FormSection)`
- margin-bottom: 20px;
-`;
+ private renderWithLabelOnSide = () => {
+ const { children, error, info, title, required } = this.props;
-StyledFormSection.displayName = 'FormSection';
+ // IDs for aria props
+ const inputId = `${this.uniqueId}__input`;
+ const labelId = `${this.uniqueId}__label`;
+ const infoId = `${this.uniqueId}__info`;
+ const errorId = `${this.uniqueId}__error`;
+
+ return (
+
+
+
+ {title}
+
+
+
+ {children({
+ 'aria-describedby': (error && errorId) || (info && infoId) || undefined,
+ 'aria-invalid': !!error || undefined,
+ 'aria-labelledby': labelId,
+ 'aria-required': required,
+ id: inputId,
+ })}
+ {!error && info && {info}}
+ {error && {error}}
+
+
+ );
+ };
+}
-export default StyledFormSection;
+export default FormSection;
diff --git a/stories/formSection.stories.tsx b/stories/formSection.stories.tsx
index 3d542f7..d11413f 100644
--- a/stories/formSection.stories.tsx
+++ b/stories/formSection.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { storiesOf } from '@storybook/react';
-import FormSection from '../src/formSection';
+import FormSection, { FormSectionLabelPosition } from '../src/formSection';
import TextInput from '../src/textInput';
import StoryColumn from './storyColumn';
@@ -88,4 +88,39 @@ storiesOf('Components|Molecules (Composite)/FormSection', module)
)}
+ ))
+ .add('Inline Mode', () => (
+
+
+ {''}
Component
+
+ Inline Mode
+
+ labelPosition="side"
+
+
+ {inputProps => (
+ }
+ />
+ )}
+
+
+ {inputProps => (
+ }
+ />
+ )}
+
+
));
diff --git a/stories/panel.stories.tsx b/stories/panel.stories.tsx
index 998e1ba..cc99383 100644
--- a/stories/panel.stories.tsx
+++ b/stories/panel.stories.tsx
@@ -77,7 +77,10 @@ storiesOf('Components|Atoms (Basic)/Panel', module)
sveitarfélagsins Reykjavíkur er Reykjavíkurborg.
- } initialValue={true} />
+ }
+ initialValue={true}
+ />
Sendu mér tölvupóst þegar þetta er í boði