feat: add button group property (#762)

* feat: add button group property * fix: remove dragging overlay * feat: add function to fetch local or feather icons * chore: update styling of button group * fix: make ts happy * chore: rename radio group to button group * fix: align button group label properly * fix: simplify code * feat: add button group property to essentials box * fix: delete duplicate control entries
meetalva · Mar 27, 2019 · 5e3a672 · 5e3a672 · marionebl · Mar 27, 2019
1 parent 023bad2
commit 5e3a672
Show file tree

Hide file tree

Showing 37 changed files with 322 additions and 453 deletions.
diff --git a/packages/analyzer/src/typescript-react-analyzer/property-analyzer/create-enum-property.ts b/packages/analyzer/src/typescript-react-analyzer/property-analyzer/create-enum-property.ts
@@ -38,10 +38,10 @@ export function createEnumProperty(
 	return {
 		model: Types.ModelName.PatternProperty,
 		contextId: args.symbol.name,
+		control: '',
 		description: '',
 		example: '',
 		group: '',
-		control: '',
 		hidden: false,
 		id: enumId,
 		inputType: Types.PatternPropertyInputType.Default,
@@ -58,11 +58,12 @@ export function createEnumProperty(
 
 			const name =
 				TypescriptUtils.getJsDocValueFromNode(enumMember, 'name') || enumMember.name.getText();
+			const icon = TypescriptUtils.getJsDocValueFromNode(enumMember, 'icon') || '';
 
 			const option: Types.SerializedEnumOption = {
 				model: Types.ModelName.PatternEnumPropertyOption,
 				contextId: enumMember.name.getText(),
-				icon: undefined,
+				icon,
 				id: ctx.getEnumOptionId(enumId, name),
 				name,
 				ordinal: optionContextId,

diff --git a/packages/analyzer/src/typescript-react-analyzer/property-analyzer/property-analyzer.ts b/packages/analyzer/src/typescript-react-analyzer/property-analyzer/property-analyzer.ts
@@ -123,6 +123,7 @@ function createUnknownProperty(
 	return {
 		model: Types.ModelName.PatternProperty,
 		contextId: args.symbol.name,
+		control: '',
 		description: '',
 		example: '',
 		group: '',
@@ -133,8 +134,7 @@ function createUnknownProperty(
 		propertyName: args.symbol.name,
 		required: false,
 		type: Types.PatternPropertyType.Unknown,
-		typeText: print(args.symbol.valueDeclaration),
-		control: ''
+		typeText: print(args.symbol.valueDeclaration)
 	};
 }
 
@@ -145,6 +145,7 @@ function createBooleanProperty(
 	return {
 		model: Types.ModelName.PatternProperty,
 		contextId: args.symbol.name,
+		control: '',
 		description: '',
 		example: '',
 		group: '',
@@ -154,8 +155,7 @@ function createBooleanProperty(
 		label: args.symbol.name,
 		propertyName: args.symbol.name,
 		required: false,
-		type: Types.PatternPropertyType.Boolean,
-		control: ''
+		type: Types.PatternPropertyType.Boolean
 	};
 }
 
@@ -166,6 +166,7 @@ function createNumberProperty(
 	return {
 		model: Types.ModelName.PatternProperty,
 		contextId: args.symbol.name,
+		control: '',
 		description: '',
 		example: '',
 		group: '',
@@ -175,8 +176,7 @@ function createNumberProperty(
 		label: args.symbol.name,
 		propertyName: args.symbol.name,
 		required: false,
-		type: Types.PatternPropertyType.Number,
-		control: ''
+		type: Types.PatternPropertyType.Number
 	};
 }
 
@@ -191,6 +191,7 @@ function createStringProperty(
 		return {
 			model: Types.ModelName.PatternProperty,
 			contextId: args.symbol.name,
+			control: '',
 			description: '',
 			example: '',
 			group: '',
@@ -200,15 +201,15 @@ function createStringProperty(
 			label: args.symbol.name,
 			propertyName: args.symbol.name,
 			required: false,
-			type: Types.PatternPropertyType.Asset,
-			control: ''
+			type: Types.PatternPropertyType.Asset
 		};
 	}
 
 	if (TypescriptUtils.hasJsDocTagFromSymbol(args.symbol, 'href')) {
 		return {
 			model: Types.ModelName.PatternProperty,
 			contextId: args.symbol.name,
+			control: '',
 			description: '',
 			example: '',
 			group: '',
@@ -218,14 +219,14 @@ function createStringProperty(
 			label: args.symbol.name,
 			propertyName: args.symbol.name,
 			required: false,
-			type: Types.PatternPropertyType.Href,
-			control: ''
+			type: Types.PatternPropertyType.Href
 		};
 	}
 
 	return {
 		model: Types.ModelName.PatternProperty,
 		contextId: args.symbol.name,
+		control: '',
 		description: '',
 		example: '',
 		group: '',
@@ -235,8 +236,7 @@ function createStringProperty(
 		label: args.symbol.name,
 		propertyName: args.symbol.name,
 		required: false,
-		type: Types.PatternPropertyType.String,
-		control: ''
+		type: Types.PatternPropertyType.String
 	};
 }
 
@@ -249,6 +249,7 @@ function createEventHandlerProperty(
 	return {
 		model: Types.ModelName.PatternProperty,
 		contextId: args.symbol.name,
+		control: '',
 		description: '',
 		example: '',
 		// TODO: Allow TSDoc override
@@ -260,8 +261,7 @@ function createEventHandlerProperty(
 		label: args.symbol.name,
 		propertyName: args.symbol.name,
 		required: false,
-		type: Types.PatternPropertyType.EventHandler,
-		control: ''
+		type: Types.PatternPropertyType.EventHandler
 	};
 }
 
@@ -283,14 +283,16 @@ function setPropertyMetaData(init: {
 	property.group = TypescriptUtils.getJsDocValueFromSymbol(symbol, 'group') || '';
 	property.control = TypescriptUtils.getJsDocValueFromSymbol(symbol, 'control') || '';
 
-	// TODO
-
 	switch (property.type) {
 		case 'enum':
 			const defaultOption = property.options.find(
 				option => option.name === TypescriptUtils.getJsDocValueFromSymbol(symbol, 'default')
 			);
 			property.defaultOptionId = defaultOption ? defaultOption.id : undefined;
+			property.inputType =
+				property.control === 'ButtonGroup'
+					? Types.PatternPropertyInputType.ButtonGroup
+					: Types.PatternPropertyInputType.Select;
 			break;
 		case 'EventHandler':
 			break;

diff --git a/packages/components/src/chrome/demo.tsx b/packages/components/src/chrome/demo.tsx
@@ -1,6 +1,5 @@
 import { CopySize } from '../copy';
 import DemoContainer from '../demo-container';
-import { IconRegistry } from '../icons';
 import { Chrome } from './index';
 import * as React from 'react';
 import { ViewSwitch } from '../view-switch';
@@ -27,7 +26,6 @@ const DemoChrome: React.StatelessComponent<void> = () => (
 				Page Name
 			</ViewSwitch>
 		</Chrome>
-		<IconRegistry />
 	</DemoContainer>
 );
 

diff --git a/packages/components/src/demo-container.tsx b/packages/components/src/demo-container.tsx
@@ -21,7 +21,6 @@ const DemoContainer: React.StatelessComponent<DemoContainerProps> = props => (
 		<GlobalStyle />
 		<Space size={SpaceSize.L}>{props.title && <Headline>{props.title}</Headline>}</Space>
 		{React.Children.map(props.children, child => <Space size={SpaceSize.L}>{child}</Space>)}
-		<Icon.IconRegistry />
 	</StyledDemoContainer>
 );
 

diff --git a/packages/components/src/element-slot/element-slot.tsx b/packages/components/src/element-slot/element-slot.tsx
@@ -1,9 +1,10 @@
 import { Color } from '../colors';
 import { ElementAnchors } from '../element';
-import { Icon, IconName, IconSize } from '../icons';
+import { Icon, IconSize } from '../icons';
 import * as React from 'react';
 import { getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
+import { ChevronRight } from 'react-feather';
 
 export enum ElementSlotState {
 	Default = 'default',
@@ -69,13 +70,19 @@ const StyledElementChildren = styled.div`
 	padding-left: ${getSpace(SpaceSize.L)}px;
 `;
 
-const StyledIcon = styled(Icon)`
+const StyledIconWrapper = styled.div`
 	position: absolute;
-	left: ${getSpace(SpaceSize.XS) + getSpace(SpaceSize.XXS)}px;
+	left: ${getSpace(SpaceSize.S)}px;
+	transition: transform 0.2s;
+	height: 100%;
+	width: ${IconSize.XS}px;
+	display: flex;
+	align-items: center;
+`;
+
+const StyledIcon = styled(ChevronRight)`
+	stroke: none;
 	fill: ${Color.Grey60};
-	width: ${getSpace(SpaceSize.S)}px;
-	height: ${getSpace(SpaceSize.S)}px;
-	padding: ${getSpace(SpaceSize.XS)}px;
 	transition: transform 0.2s;
 	${(props: StyledIconProps) => (props.open ? 'transform: rotate(90deg)' : '')};
 `;
@@ -104,13 +111,9 @@ export class ElementSlot extends React.Component<ElementSlotProps> {
 		return (
 			<StyledElementSlot {...{ [ElementAnchors.content]: props.id }}>
 				<StyledElementSlotLabel state={props.state}>
-					<StyledIcon
-						dataIcon={props.id}
-						name={IconName.ArrowFillRight}
-						size={IconSize.XXS}
-						color={Color.Grey60}
-						open={props.open}
-					/>
+					<StyledIconWrapper>
+						<StyledIcon size={IconSize.XS} open={props.open} />
+					</StyledIconWrapper>
 					<StyledElementSlotLabelContent {...{ [ElementAnchors.label]: true }}>
 						{props.title}
 					</StyledElementSlotLabelContent>

diff --git a/packages/components/src/element/element.tsx b/packages/components/src/element/element.tsx
@@ -1,9 +1,10 @@
 import { Color } from '../colors';
-import { Icon, IconName, IconSize } from '../icons';
+import { IconSize } from '../icons';
 import * as React from 'react';
 import { getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
 import { TargetSignal } from '../drag-area';
+import { ChevronRight } from 'react-feather';
 
 export const ElementAnchors = {
 	element: 'data-id',
@@ -123,15 +124,20 @@ const StyledElementChildren = styled.div`
 	padding-left: ${getSpace(SpaceSize.L)}px;
 `;
 
-const StyledIcon = styled(Icon)`
+const StyledIconWrapper = styled.div`
 	position: absolute;
-	left: ${getSpace(SpaceSize.XS) + getSpace(SpaceSize.XXS)}px;
-	fill: ${Color.Grey60};
-	width: ${getSpace(SpaceSize.S)}px;
-	height: ${getSpace(SpaceSize.S)}px;
-	padding: ${getSpace(SpaceSize.XS)}px;
+	left: ${getSpace(SpaceSize.S)}px;
 	transition: transform 0.2s;
+	height: 100%;
+	width: ${IconSize.XS}px;
+	display: flex;
+	align-items: center;
+`;
 
+const StyledIcon = styled(ChevronRight)`
+	stroke: none;
+	fill: ${Color.Grey60};
+	transition: transform 0.2s;
 	${(props: StyledIconProps) => (props.open ? 'transform: rotate(90deg)' : '')};
 	${(props: StyledIconProps) => (props.active ? `fill: ${Color.Blue20}` : '')};
 `;
@@ -208,14 +214,13 @@ export class Element extends React.Component<ElementProps> {
 					)}
 				<StyledElementLabel state={props.state} {...{ [ElementAnchors.item]: true }}>
 					{props.capabilities.includes(ElementCapability.Openable) && (
-						<StyledIcon
-							dataIcon={props.id}
-							name={IconName.ArrowFillRight}
-							size={IconSize.XXS}
-							color={Color.Grey60}
-							open={props.open}
-							active={props.state === ElementState.Active}
-						/>
+						<StyledIconWrapper {...{ [ElementAnchors.icon]: true }}>
+							<StyledIcon
+								size={IconSize.XS}
+								open={props.open}
+								active={props.state === ElementState.Active}
+							/>
+						</StyledIconWrapper>
 					)}
 					{containered(props.children, Element.ElementTitle)}
 					{props.description && (

diff --git a/packages/components/src/icons/demo.tsx b/packages/components/src/icons/demo.tsx
@@ -1,51 +1,13 @@
-import DemoContainer from '../demo-container';
-import { Icon, IconName, IconSize, reduce } from './index';
+import { Icon, IconSize, getIcon } from './index';
 import * as React from 'react';
-import styled from 'styled-components';
-
-const StyledDemoIconList = styled.ul`
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	margin-top: 20px;
-	margin-bottom: 20px;
-	padding-left: 0;
-	width: 100%;
-	list-style: none;
-`;
-
-const StyledDemoListItem = styled.li`
-	margin-top: 20px;
-	width: 20%;
-	min-width: 51px;
-	text-align: center;
-`;
-
-const StyledIcon = styled(Icon)`
-	margin-bottom: 20px;
-`;
-
-interface DemoIconsProps {
-	names: typeof IconName;
-	size: IconSize;
-}
-
-const DemoIcons = (props: DemoIconsProps) => (
-	<StyledDemoIconList>
-		{reduce(props.names, (name, id) => [
-			<StyledDemoListItem key={name}>
-				<StyledIcon name={id} size={props.size} />
-			</StyledDemoListItem>
-		])}
-	</StyledDemoIconList>
-);
-
-const IconRegistryDemo: React.StatelessComponent<void> = (): JSX.Element => (
-	<DemoContainer title="Icons">
-		<DemoIcons size={IconSize.XS} names={IconName} />
-		<DemoIcons size={IconSize.S} names={IconName} />
-	</DemoContainer>
+import { Color } from '../colors';
+
+const IconDemo: React.SFC = () => (
+	<>
+		<Icon size={IconSize.XS} color={Color.Green} icon="FlexAlignCenter" />
+		{getIcon({ icon: 'Box' })}
+		{getIcon({ icon: 'Hello' })}
+	</>
 );
 
-export default IconRegistryDemo;
+export default IconDemo;