feat(flex container): new flex container component

src/components/flex-container/flex-container.mdx

@@ -0,0 +1,13 @@
+---
+name: Flex container
+route: /flex-container
+menu: Components
+---
+
+# Flex container
+
+<limel-props name="limel-flex-container" />
+
+## Examples
+
+<limel-example name="limel-example-flex-container" /> 

src/components/flex-container/flex-container.scss

@@ -0,0 +1,51 @@
+:host(limel-flex-container) {
+    display: flex;
+}
+:host(limel-flex-container[hidden]) {
+    display: none;
+}
+
+:host(limel-flex-container[direction="horizontal"]) {
+    flex-direction: row;
+}
+:host(limel-flex-container[direction="horizontal"][reverse]) {
+    flex-direction: row-reverse;
+}
+:host(limel-flex-container[direction='vertical']) {
+    flex-direction: column;
+}
+:host(limel-flex-container[direction='vertical'][reverse]) {
+    flex-direction: column-reverse;
+}
+
+:host(limel-flex-container[align='start']) {
+    align-items: flex-start;
+}
+:host(limel-flex-container[align='end']) {
+    align-items: flex-end;
+}
+:host(limel-flex-container[align='center']) {
+    align-items: center;
+}
+:host(limel-flex-container[align='stretch']) {
+    align-items: stretch;
+}
+
+:host(limel-flex-container[justify='start']) {
+    justify-content: flex-start;
+}
+:host(limel-flex-container[justify='end']) {
+    justify-content: flex-end;
+}
+:host(limel-flex-container[justify='center']) {
+    justify-content: center;
+}
+:host(limel-flex-container[justify='space-between']) {
+    justify-content: space-between;
+}
+:host(limel-flex-container[justify='space-around']) {
+    justify-content: space-around;
+}
+:host(limel-flex-container[justify='space-evenly']) {
+    justify-content: space-evenly;
+}

src/components/flex-container/flex-container.ts

@@ -0,0 +1,9 @@
+export type FlexContainerDirection = 'horizontal' | 'vertical';
+export type FlexContainerAlign = 'start' | 'end' | 'center' | 'stretch';
+export type FlexContainerJustify =
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';

src/components/flex-container/flex-container.tsx

@@ -0,0 +1,41 @@
+import { Component, Prop } from '@stencil/core';
+import {
+    FlexContainerAlign,
+    FlexContainerDirection,
+    FlexContainerJustify,
+} from './flex-container';
+
+@Component({
+    tag: 'limel-flex-container',
+    shadow: true,
+    styleUrl: 'flex-container.scss',
+})
+export class FlexContainer {
+    /**
+     * Direction of the main axis
+     */
+    @Prop({ reflectToAttr: true })
+    public direction: FlexContainerDirection = 'horizontal';
+
+    /**
+     * Specify how items are aligned along the main axis
+     */
+    @Prop({ reflectToAttr: true })
+    public justify: FlexContainerJustify = 'space-between';
+
+    /**
+     * Specify how items are aligned along the cross axis
+     */
+    @Prop({ reflectToAttr: true })
+    public align: FlexContainerAlign = 'center';
+
+    /**
+     * Reverse the order of the items
+     */
+    @Prop({ reflectToAttr: true })
+    public reverse = false;
+
+    public render() {
+        return <slot />;
+    }
+}

src/examples/flex-container/flex-container.scss

@@ -0,0 +1,39 @@
+limel-flex-container {
+    margin-bottom: 2rem;
+
+    &.container {
+        height: 60rem;
+        border: 0.1rem solid var(--lime-dark-grey);
+        border-radius: 0.3rem;
+    }
+
+    div {
+        display: block;
+        padding: 2.5rem 5rem;
+
+        text-align: center;
+        color: white;
+        font-size: 2rem;
+        line-height: 0;
+
+        &:nth-child(1) {
+            background-color: var(--lime-red);
+            padding: 1.25rem 5rem;
+        }
+        &:nth-child(2) {
+            background-color: var(--lime-orange);
+            padding: 5rem;
+        }
+        &:nth-child(3) {
+            background-color: var(--lime-green);
+        }
+        &:nth-child(4) {
+            background-color: var(--lime-blue);
+            padding: 2.5rem 10rem;
+        }
+        &:nth-child(5) {
+            background-color: var(--lime-magenta);
+            padding: 2.5rem;
+        }
+    }
+}

src/examples/flex-container/flex-container.tsx

@@ -0,0 +1,146 @@
+import { Component, State } from '@stencil/core';
+import {
+    FlexContainerAlign,
+    FlexContainerDirection,
+    FlexContainerJustify,
+} from '../../components/flex-container/flex-container';
+import { Option } from '../../components/select/option';
+
+@Component({
+    tag: 'limel-example-flex-container',
+    shadow: true,
+    styleUrl: 'flex-container.scss',
+})
+export class FlexContainerExample {
+    private directionOptions: Array<Option<FlexContainerDirection>> = [
+        {
+            text: 'Horizontal',
+            value: 'horizontal',
+        },
+        {
+            text: 'Vertical',
+            value: 'vertical',
+        },
+    ];
+
+    private alignOptions: Array<Option<FlexContainerAlign>> = [
+        {
+            value: 'start',
+            text: 'Start',
+        },
+        {
+            value: 'center',
+            text: 'Center',
+        },
+        {
+            value: 'end',
+            text: 'End',
+        },
+        {
+            value: 'stretch',
+            text: 'Stretch',
+        },
+    ];
+
+    private justifyOptions: Array<Option<FlexContainerJustify>> = [
+        {
+            value: 'start',
+            text: 'Start',
+        },
+        {
+            value: 'center',
+            text: 'Center',
+        },
+        {
+            value: 'end',
+            text: 'End',
+        },
+        {
+            value: 'space-around',
+            text: 'Space around',
+        },
+        {
+            value: 'space-between',
+            text: 'Space between',
+        },
+        {
+            value: 'space-evenly',
+            text: 'Space evenly',
+        },
+    ];
+
+    @State()
+    private direction: Option<FlexContainerDirection>;
+
+    @State()
+    private align: Option<FlexContainerAlign>;
+
+    @State()
+    private justify: Option<FlexContainerJustify>;
+
+    @State()
+    private reverse = false;
+
+    public componentWillLoad() {
+        this.direction = this.directionOptions[0];
+        this.align = this.alignOptions[0];
+        this.justify = this.justifyOptions[0];
+    }
+
+    public render() {
+        return [
+            <limel-flex-container justify="space-between">
+                <limel-select
+                    label="Direction"
+                    options={this.directionOptions}
+                    value={this.direction}
+                    onChange={(
+                        event: CustomEvent<Option<FlexContainerDirection>>
+                    ) => {
+                        this.direction = event.detail;
+                    }}
+                />
+                <limel-select
+                    label="Align"
+                    options={this.alignOptions}
+                    value={this.align}
+                    onChange={(
+                        event: CustomEvent<Option<FlexContainerAlign>>
+                    ) => {
+                        this.align = event.detail;
+                    }}
+                />
+                <limel-select
+                    label="Justify"
+                    options={this.justifyOptions}
+                    value={this.justify}
+                    onChange={(
+                        event: CustomEvent<Option<FlexContainerJustify>>
+                    ) => {
+                        this.justify = event.detail;
+                    }}
+                />
+                <limel-checkbox
+                    label="Reverse"
+                    checked={this.reverse}
+                    onChange={(event: CustomEvent<boolean>) => {
+                        this.reverse = event.detail;
+                    }}
+                />
+            </limel-flex-container>,
+            <limel-flex-container
+                class="container"
+                direction={this.direction.value}
+                align={this.align.value}
+                justify={this.justify.value}
+                reverse={this.reverse}
+            >
+                <div>1</div>
+                <div>2</div>
+                <div>3</div>
+                <div>4</div>
+                <div>5</div>
+            </limel-flex-container>,
+        ];
+    }
+}

src/interface.d.ts

@@ -5,3 +5,4 @@ export * from './components/select/option';
 export * from './components/picker/searcher';
 export * from './components/icon/icon';
 export * from './components/spinner/spinner';
+export * from './components/flex-container/flex-container';