feat(SelectButtonsGroup): new components

src/components/SelectButtonGroup/SelectButton/SelectButton.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+interface Props {
+    /** the label to be displayed on this button */
+    children: string;
+    /** the value associated with this button */
+    value: string;
+    /**
+     * A function to be called if a button is pressed.
+     * This prop, if defined on the parent SelectButtonGroup will overwrite this one
+     */
+    onSelect?: (value: string) => void;
+    /** if this button should be in a selected state */
+    isSelected?: boolean;
+    /** the color context to be applied in the selected state */
+    selectedContext?: 'neutral' | 'brand';
+    /**
+     * is this button part of a multiselect group
+     * when yes will render as checkbox otherwise as radioButton
+     * This prop will be overwritten by the parent <SelectButtonGroup>
+     */
+    isMultiselect?: boolean;
+    /**
+     * is this button has same width as its siblings
+     * This prop will be overwritten by the parent <SelectButtonGroup>
+     */
+    isEqualWidth?: boolean;
+}
+
+const SelectButton: React.FC<Props> = props => <div></div>;
+
+SelectButton.displayName = 'SelectButton';
+
+SelectButton.defaultProps = {
+    isSelected: false,
+    selectedContext: 'brand',
+    isMultiselect: false,
+    isEqualWidth: false,
+};
+
+export default SelectButton;

src/components/SelectButtonGroup/SelectButton/index.ts

@@ -0,0 +1 @@
+export { default } from './SelectButton';

src/components/SelectButtonGroup/SelectButtonGroup/SelectButtonGroup.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+interface Props {
+    /** SelectButton components */
+    children: NotEmptyReactNode;
+    /**
+     * A function to be called if a button is pressed.
+     * This prop, if defined will overwrite the onSelect on children
+     */
+    onSelect?: (value: string) => void;
+    /** is this button part of a multiselect group - when yes will render as checkbox otherwise as radioButton */
+    isMultiselect?: boolean;
+    /** should the component take up all the width available */
+    isBlock?: boolean;
+    /** should children have equal width */
+    isEqualWidth?: boolean;
+}
+
+const SelectButtonGroup: React.FC<Props> = props => <div></div>;
+
+SelectButtonGroup.displayName = 'SelectButtonGroup';
+
+SelectButtonGroup.defaultProps = {
+    isMultiselect: false,
+    isBlock: false,
+};
+
+export default SelectButtonGroup;

src/components/SelectButtonGroup/SelectButtonGroup/index.ts

@@ -0,0 +1 @@
+export { default } from './SelectButtonGroup';

src/components/SelectButtonGroup/index.ts

@@ -0,0 +1,2 @@
+export { default as SelectButton } from './SelectButton';
+export { default as SelectButtonGroup } from './SelectButtonGroup';

src/index.ts

@@ -13,6 +13,7 @@ export { List, ListItem, ListActions } from './components/List';
 export { default as Modal } from './components/Modal';
 export { MapWithGoogleLoader, Map } from './components/Map';
 export { default as ProgressBar } from './components/ProgressBar';
+export { SelectButton, SelectButtonGroup } from './components/SelectButtonGroup';
 export { default as SelectedOption } from './components/SelectedOption';
 export { default as Slider } from './components/Slider';
 export { default as Drawer } from './components/Drawer';

stories/SelectButtonGroup.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, boolean, select, withKnobs } from '@storybook/addon-knobs';
+import { SelectButtonGroup, SelectButton } from '@textkernel/oneui';
+
+storiesOf('Atoms|SelectButtonGroup', module)
+    .addDecorator(withKnobs)
+    .add('SelectButtonGroup', () => (
+        <SelectButtonGroup
+            isMultiselect={boolean('Multiselect group', false)}
+            isBlock={boolean('Display as block', false)}
+            isEqualWidth={boolean('Make all buttons the same width', false)}
+            onSelect={value => {
+                const msg = `onSelect was called with value ${value}`;
+                console.log(msg);
+            }}
+        >
+            <SelectButton
+                value="button 1"
+                isSelected={boolean('Button 1 is selected', true)}
+                selectedContext={select(
+                    'Selected color context for button 1',
+                    ['brand', 'neutral'],
+                    'brand'
+                )}
+            >
+                {text('Option label 1', 'Option 1')}
+            </SelectButton>
+            <SelectButton
+                value="button 2"
+                isSelected={boolean('Button 2 is selected', false)}
+                selectedContext={select(
+                    'Selected color context for button 2',
+                    ['brand', 'neutral'],
+                    'brand'
+                )}
+            >
+                {text('Option label 2', 'Option 2')}
+            </SelectButton>
+        </SelectButtonGroup>
+    ));

stories/index.ts

@@ -16,6 +16,7 @@ import './Map';
 import './Modal';
 import './PopupBase';
 import './ProgressBar';
+import './SelectButtonGroup';
 import './SelectedOption';
 import './Slider';
 import './Tabs';