Feat/inline prop

README.md

@@ -68,6 +68,8 @@ All props are optional (as they all have default values).
 [`align`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | `'start'` \| `'center'` \| `'end'` \| `'stretch'` | `'center'`
 [`justify`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | `'start'` \| `'center'` \| `'end'` \| `'around'` \| `'between'` \| `'evenly'`  | `'center'`
 [`reverse`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Result) | `true` \| `false` | `false`
+[`inline`](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) | `true` \| `false` | `false`
+[`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) | `string` | `false`
 
 Check out the [test suite](https://github.com/himynameisdave/svelte-flex/blob/master/src/__tests__/Flex.spec.js#L11) if you're unsure what CSS styles are applied by these props.
 

src/Flex.d.ts

@@ -17,6 +17,8 @@ export interface FlexProps {
   justify?: Justify;
   direction?: Direction;
   reverse?: boolean;
+  gap?: string;
+  inline?: boolean;
 }
 
 export default class Flex extends SvelteComponentTyped<FlexProps> {}

src/Flex.svelte

@@ -3,6 +3,8 @@
   export let align = 'center';
   export let justify = 'center';
   export let reverse = false;
+  export let gap = undefined;
+  export let inline = false;
 
   //  'start' | 'center' | 'end' | 'stretch'
   const alignMap = {
@@ -22,16 +24,19 @@
     evenly: 'space-evenly',
   };
 
+
   $: directionWithReverse = reverse ? `${direction}-reverse` : direction;
+  $: diplayProp = inline === true ? 'inline-flex' : 'flex';
 </script>
 
 <div
   {...$$restProps}
   class={$$restProps.class}
-  style:display="flex"
+  style:display={diplayProp}
   style:flex-direction={directionWithReverse}
   style:align-items={alignMap[align]}
   style:justify-content={justifyMap[justify]}
+  style:gap={gap}
 >
   <slot />
 </div>

src/__tests__/Flex.spec.js

@@ -140,4 +140,44 @@ describe('<Flex /> component', () => {
       expect(container).not.toHaveStyle('flex-direction: column'); // default/fallback
     });
   });
+
+  describe('gap prop', () => {
+    test('has gap prop set to 1 rem', () => {
+      const container = renderFlex({ gap: '1rem' });
+      expect(container).toHaveStyle('gap: 1rem');
+      expect(container).not.toHaveStyle('gap: 0rem');
+    });
+
+    test('bad value', () => {
+      const container = renderFlex({ gap: 'oops' });
+      expect(container).not.toHaveStyle('gap: 1rem');
+      expect(container).not.toHaveStyle('gap: 0');
+    });
+  })
+
+  describe('inline prop', () => {
+    test('has inline prop set to true', () => {
+      const container = renderFlex({ inline: true });
+      expect(container).toHaveStyle('display: inline-flex');
+      expect(container).not.toHaveStyle('display: flex');
+    });
+
+    test('has inline prop set to false', () => {
+      const container = renderFlex({ inline: false });
+      expect(container).toHaveStyle('display: flex');
+      expect(container).not.toHaveStyle('display: inline-flex');
+    });
+
+    test('does not has inline prop', () => {
+      const container = renderFlex();
+      expect(container).toHaveStyle('display: flex');
+      expect(container).not.toHaveStyle('display: inline-flex');
+    });
+
+    test('bad value', () => {
+      const container = renderFlex({ inline: 'oops' });
+      expect(container).toHaveStyle('display: flex');
+      expect(container).not.toHaveStyle('display: inline-flex');
+    });
+  })
 });