@woosmap/ui 2.39.0 → 2.43.0

package/src/components/Tab/Tab.js

@@ -40,7 +40,7 @@ export default class Tab extends Component {
     renderHeader(childrenOfTab) {
         return Children.toArray(childrenOfTab).map((childTab, index) => {
             const { title, icon, iconSize, className } = childTab.props;
-            const { type } = this.props;
+            const { type, testId } = this.props;
             const btnType = !type || undefined ? 'tab' : `tab--${type}`;
             return (
                 <li key={`header_${title}`}>
@@ -52,6 +52,7 @@ export default class Tab extends Component {
                         label={title}
                         icon={icon}
                         iconSize={iconSize}
+                        testId={`${testId}-header-button`}
                     />
                 </li>
             );
@@ -86,10 +87,10 @@ export default class Tab extends Component {
     }
 
     render() {
-        const { children, type, separator } = this.props;
+        const { children, type, separator, testId } = this.props;
         const classes = cl('tab', `tab--${type}`);
         return (
-            <div className={classes}>
+            <div className={classes} data-testid={testId}>
                 <div className={cl('tab__header', { 'tab__header--separator': separator })}>
                     <ul className="tab__header__buttons">{this.renderHeader(children)}</ul>
                     <div>{this.renderActions(children)}</div>
@@ -101,6 +102,7 @@ export default class Tab extends Component {
 }
 
 Tab.defaultProps = {
+    testId: 'tab',
     actions: [],
     type: undefined,
     selectCb: null,
@@ -113,6 +115,7 @@ Tab.defaultProps = {
 Tab.propTypes = {
     selectCb: PropTypes.func,
     defaultSelect: PropTypes.string,
+    testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     actions: PropTypes.array,
     type: PropTypes.oneOf(['pills', undefined]),

package/src/components/Tab/Tab.test.js

@@ -8,24 +8,24 @@ import Tab from './Tab';
 it('renders a tab component with no tab', () => {
     const { container } = render(
         <Tab>
-            <div title="tab 1">My first tab</div>
+            <div title="tab 1">First</div>
         </Tab>
     );
     expect(container.firstChild).toHaveClass('tab');
 });
 
 it('renders a tab component with 2 tabs and content', () => {
-    const { container } = render(
+    const { getByTestId, container } = render(
         <Tab>
-            <div title="tab 1">My first tab</div>
-            <div title="tab 2">My second tab</div>
+            <div title="tab 1">First</div>
+            <div title="tab 2">Second</div>
         </Tab>
     );
-    expect(container.firstChild).toHaveClass('tab');
+    expect(getByTestId('tab')).toHaveClass('tab');
     expect(container.firstChild.firstChild).toHaveClass('tab__header');
     expect(container.firstChild.firstChild.firstChild.firstChild.firstChild).toHaveClass('btn');
     expect(container.firstChild.firstChild.firstChild.firstChild.firstChild).toHaveClass('active');
-    const firstTab = screen.getByText('My first tab');
+    const firstTab = screen.getByText('First');
     expect(firstTab).toHaveClass('active');
 
     userEvent.click(screen.getByText('tab 2'));
@@ -34,12 +34,12 @@ it('renders a tab component with 2 tabs and content', () => {
 it('changes active tab after click', () => {
     render(
         <Tab>
-            <div title="tab 1">My first tab</div>
-            <div title="tab 2">My second tab</div>
+            <div title="tab 1">First</div>
+            <div title="tab 2">Second</div>
         </Tab>
     );
 
     userEvent.click(screen.getByText('tab 2'));
-    const secondTab = screen.getByText('My second tab');
+    const secondTab = screen.getByText('Second');
     expect(secondTab).toHaveClass('active');
 });

package/src/components/Tooltip/Tooltip.js

@@ -4,7 +4,7 @@ import cl from 'classnames';
 
 export default class Tooltip extends Component {
     render() {
-        const { product, className, text, direction, align, noDelay, wrap, children, ...rest } = this.props;
+        const { product, className, text, direction, align, noDelay, wrap, children, testId, ...rest } = this.props;
         const classes = cl(
             'tooltip',
             className,
@@ -15,7 +15,7 @@ export default class Tooltip extends Component {
             wrap && 'tooltipped-multiline'
         );
         return (
-            <div aria-label={text} {...rest} className={classes}>
+            <div aria-label={text} data-testid={testId} {...rest} className={classes}>
                 {children}
             </div>
         );
@@ -23,6 +23,7 @@ export default class Tooltip extends Component {
 }
 
 Tooltip.defaultProps = {
+    testId: 'tooltip',
     className: '',
     direction: 'e',
     align: undefined,
@@ -51,6 +52,7 @@ Tooltip.propTypes = {
         undefined,
     ]),
     text: PropTypes.string,
+    testId: PropTypes.string,
     className: PropTypes.string,
     wrap: PropTypes.bool,
 };

package/src/components/Tooltip/Tooltip.test.js

@@ -5,10 +5,10 @@ import '@testing-library/jest-dom/extend-expect';
 import Tooltip from './Tooltip';
 
 it('renders a Tooltip', () => {
-    const { container } = render(<Tooltip>my tip</Tooltip>);
-    expect(container.firstChild).toHaveClass('tooltip');
-    expect(container.firstChild).toHaveClass('tooltipped-e');
-    expect(container.firstChild).toHaveTextContent('my tip');
+    const { getByTestId } = render(<Tooltip>my tip</Tooltip>);
+    expect(getByTestId('tooltip')).toHaveClass('tooltip');
+    expect(getByTestId('tooltip')).toHaveClass('tooltipped-e');
+    expect(getByTestId('tooltip')).toHaveTextContent('my tip');
 });
 
 it('renders a Tooltip direction south', () => {

package/src/components/withFormValidation/withFormValidation.test.js

@@ -27,11 +27,7 @@ class Form extends React.Component {
                         })}
                     />
                     {renderFormError()}
-                    <Button
-                        data-testid="submit"
-                        onClick={this.submit}
-                        label="Submit"
-                    />
+                    <Button testId="submit" onClick={this.submit} label="Submit" />
                 </form>
             </>
         );

package/src/icons/autocomplete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M77.773 33.1H22.227a10.445 10.445 0 1 1 0-20.89h55.546a10.445 10.445 0 1 1 0 20.89ZM22.227 15.213a7.445 7.445 0 1 0 0 14.89h55.546a7.445 7.445 0 1 0 0-14.89Zm56.31 75.574H21.463a9.692 9.692 0 0 1-9.682-9.681V49.253a9.692 9.692 0 0 1 9.682-9.68h57.074a9.692 9.692 0 0 1 9.682 9.68v31.853a9.692 9.692 0 0 1-9.682 9.681ZM21.463 42.573a6.688 6.688 0 0 0-6.682 6.68v31.853a6.689 6.689 0 0 0 6.682 6.681h57.074a6.689 6.689 0 0 0 6.682-6.681V49.253a6.688 6.688 0 0 0-6.682-6.68Z"/><path d="M42.878 24.453H21.307a1.5 1.5 0 0 1 0-3h21.571a1.5 1.5 0 0 1 0 3ZM64.448 54H21.307a1.5 1.5 0 1 1 0-3h43.141a1.5 1.5 0 0 1 0 3Zm11.037 11.68H21.307a1.5 1.5 0 0 1 0-3h54.178a1.5 1.5 0 0 1 0 3ZM50 77.431H21.307a1.5 1.5 0 0 1 0-3H50a1.5 1.5 0 0 1 0 3Z"/></svg>

package/src/icons/buildings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M68.747 37.178h-7.3V25.821a10.4 10.4 0 0 0-10.394-10.393H25.367a10.4 10.4 0 0 0-10.393 10.393v58.751h70.052V53.457a16.3 16.3 0 0 0-16.279-16.279ZM17.974 81.572V25.821a7.4 7.4 0 0 1 7.393-7.393h25.686a7.4 7.4 0 0 1 7.393 7.393v11.385a1.532 1.532 0 0 0-.282-.028H36.62a1.5 1.5 0 0 0 0 3h21.544a1.45 1.45 0 0 0 .282-.029V51.28a1.45 1.45 0 0 0-.282-.029H36.62a1.5 1.5 0 0 0 0 3h21.544a1.532 1.532 0 0 0 .282-.028v11.13a1.532 1.532 0 0 0-.282-.028H36.62a1.5 1.5 0 1 0 0 3h21.544a1.45 1.45 0 0 0 .282-.029v13.276Zm43.472 0V40.178h7.3a13.29 13.29 0 0 1 13.082 11.073H71.3a1.5 1.5 0 0 0 0 3h10.726v11.074H71.3a1.5 1.5 0 0 0 0 3h10.726v13.247Z"/></svg>

package/src/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M82.454 23.158a11.27 11.27 0 1 0-12.77 11.157v6.6a8.777 8.777 0 0 1-8.767 8.767H39.083a11.725 11.725 0 0 0-8.767 3.946V34.315a11.27 11.27 0 1 0-3 0v31.37a11.269 11.269 0 1 0 3 0v-4.234a8.777 8.777 0 0 1 8.767-8.767h21.834a11.779 11.779 0 0 0 11.767-11.767v-6.6a11.277 11.277 0 0 0 9.77-11.159Zm-61.908 0a8.27 8.27 0 1 1 8.27 8.269 8.279 8.279 0 0 1-8.27-8.269Zm16.539 53.684a8.27 8.27 0 1 1-8.269-8.269 8.278 8.278 0 0 1 8.269 8.269Zm34.1-45.415a8.269 8.269 0 1 1 8.27-8.269 8.278 8.278 0 0 1-8.271 8.269Z"/></svg>

package/src/icons/position.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 11.568A38.432 38.432 0 1 0 88.432 50 38.476 38.476 0 0 0 50 11.568Zm34.9 32.373C79.4 39.4 67.541 35.777 50 35.777a1.423 1.423 0 0 0-.208.021 13.279 13.279 0 0 0-8.9-10.128c2.439-6.979 5.8-11.1 9.107-11.1A35.483 35.483 0 0 1 84.9 43.941ZM36.784 48.5a10.246 10.246 0 1 1 10.245-10.245A10.257 10.257 0 0 1 36.784 48.5Zm6.3-33.249a29.678 29.678 0 0 0-5.147 9.817 13.23 13.23 0 0 0-1.149-.059 13.26 13.26 0 0 0-13.249 13.246c0 .433.024.859.065 1.282a1.478 1.478 0 0 0-.207.048 27.537 27.537 0 0 0-8.282 4.255A35.522 35.522 0 0 1 43.08 15.251ZM14.568 50c0-2.611 3.613-5.42 9.67-7.529A13.28 13.28 0 0 0 34.3 51.258c.188 15 3.728 27.578 8.9 33.511A35.487 35.487 0 0 1 14.568 50ZM50 85.432c-6 0-12.4-13.582-12.7-33.958A13.243 13.243 0 0 0 50 38.777c20.879 0 35.429 5.915 35.429 11.223A35.472 35.472 0 0 1 50 85.432Z"/><circle cx="36.784" cy="38.255" r="7.311"/></svg>

package/src/icons/quote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m45.2 32.468-6.1 5.207a11.859 11.859 0 0 0-4.475 9.355q0 3.338 3.986 7.729t3.989 8.055q0 11.96-11.8 11.959-12.612 0-12.611-14.4 0-21.558 21.56-35.146Zm36.61 0-6.1 5.207a11.855 11.855 0 0 0-4.475 9.355q0 3.338 3.986 7.729t3.988 8.055q0 11.96-11.8 11.959-12.611 0-12.61-14.4 0-21.558 21.56-35.146Z"/></svg>

package/src/icons/save-money.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M89.409 19.172a6.953 6.953 0 0 0-5.87 3.238 1.5 1.5 0 0 0-.362-.049 15.089 15.089 0 0 1-10.74-4.449l-2.83-2.829a10.88 10.88 0 0 0-7.743-3.208H42.11a4.649 4.649 0 0 0-3.037 8.186A31.864 31.864 0 0 0 19.356 58.7h-2.709a6.96 6.96 0 0 0-6.056-3.543H4.63v25.671h5.961a6.953 6.953 0 0 0 5.87-3.238 1.5 1.5 0 0 0 .362.049 15.089 15.089 0 0 1 10.74 4.449l2.83 2.829a10.88 10.88 0 0 0 7.743 3.208H57.89a4.649 4.649 0 0 0 3.016-8.2A31.862 31.862 0 0 0 80.651 41.3h2.7a6.96 6.96 0 0 0 6.056 3.543h5.963V19.172ZM14.55 73.869a3.963 3.963 0 0 1-3.959 3.959H7.63V58.155h2.961a3.963 3.963 0 0 1 3.959 3.959ZM74.98 38.3a8.433 8.433 0 0 1-6-2.486l-11.665-11.66a1.76 1.76 0 0 1 0-2.485 1.8 1.8 0 0 1 2.483 0l6.976 6.976a1.5 1.5 0 0 0 2.126-2.122l-6.975-6.975a4.757 4.757 0 0 0-6.727 6.727l11.659 11.663A11.414 11.414 0 0 0 74.98 41.3h2.52a28.8 28.8 0 0 1-25.748 37.487h-2.719a1.5 1.5 0 1 0 0 3h.576a1.484 1.484 0 0 0 .391.058c.623 0 1.24-.023 1.854-.058h6.036a1.669 1.669 0 0 1 0 3.338H38.136a7.9 7.9 0 0 1-5.622-2.325l-2.829-2.829a18.047 18.047 0 0 0-12.185-5.3 7.094 7.094 0 0 0 .05-.8V62.114c0-.141-.013-.278-.021-.416h7.491a8.433 8.433 0 0 1 6 2.486l11.665 11.662a1.76 1.76 0 0 1 0 2.485 1.8 1.8 0 0 1-2.483 0l-6.976-6.976a1.5 1.5 0 1 0-2.126 2.122l6.975 6.975a4.757 4.757 0 0 0 6.727-6.727L33.143 62.062A11.414 11.414 0 0 0 25.02 58.7h-2.513a28.8 28.8 0 0 1 25.415-37.487h3.045a1.5 1.5 0 0 0 0-3h-.495A1.5 1.5 0 0 0 50 18.13c-.734 0-1.459.034-2.181.083H42.11a1.669 1.669 0 1 1 0-3.338h19.754a7.9 7.9 0 0 1 5.622 2.325l2.829 2.829A18.047 18.047 0 0 0 82.5 25.328a7.094 7.094 0 0 0-.05.8v11.758c0 .141.013.278.021.416Zm17.39 3.543h-2.961a3.963 3.963 0 0 1-3.959-3.959V26.131a3.963 3.963 0 0 1 3.959-3.959h2.961Z"/><path d="M51.5 39.3v-3.492a1.5 1.5 0 1 0-3 0V39.3h-.521a5.783 5.783 0 0 0-5.779 5.772 6.349 6.349 0 0 0 6.3 6.342v6.693h-1.4a1.9 1.9 0 0 1-1.9-1.893 1.5 1.5 0 0 0-3 0 4.9 4.9 0 0 0 4.9 4.893h1.4v3.06a1.5 1.5 0 0 0 3 0v-3.06h.521a5.782 5.782 0 0 0 5.779-5.776v-.57a6.35 6.35 0 0 0-6.3-6.342V42.3h1.4a1.9 1.9 0 0 1 1.9 1.889 1.5 1.5 0 0 0 3 0 4.9 4.9 0 0 0-4.9-4.889Zm3.3 15.466v.57a2.779 2.779 0 0 1-2.776 2.776H51.5v-6.691a3.346 3.346 0 0 1 3.3 3.34Zm-6.3-6.349a3.346 3.346 0 0 1-3.3-3.34 2.78 2.78 0 0 1 2.779-2.777h.521Z"/></svg>

package/src/icons/world.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M81.374 72.155a38.3 38.3 0 0 0 0-44.31 1.428 1.428 0 0 0-.1-.143 38.432 38.432 0 1 0 0 44.6 1.428 1.428 0 0 0 .1-.147ZM14.606 51.5h13.823a62.657 62.657 0 0 0 3 18.374H20.682A35.212 35.212 0 0 1 14.606 51.5Zm6.076-21.374h10.746a62.657 62.657 0 0 0-3 18.374H14.606a35.212 35.212 0 0 1 6.076-18.374ZM85.394 48.5H71.571a62.657 62.657 0 0 0-3-18.374h10.747A35.212 35.212 0 0 1 85.394 48.5Zm-16.823 0H51.5V30.126h13.883A59.148 59.148 0 0 1 68.571 48.5ZM51.5 27.126V14.693c5.071.776 9.573 5.442 12.682 12.433Zm-3-12.433v12.433H35.818c3.109-6.991 7.611-11.657 12.682-12.433Zm0 15.433V48.5H31.429a59.148 59.148 0 0 1 3.188-18.374ZM31.429 51.5H48.5v18.374H34.617A59.148 59.148 0 0 1 31.429 51.5ZM48.5 72.874v12.433c-5.071-.776-9.573-5.442-12.682-12.433Zm3 12.433V72.874h12.682c-3.109 6.991-7.611 11.657-12.682 12.433Zm0-15.433V51.5h17.071a59.148 59.148 0 0 1-3.188 18.374ZM71.571 51.5h13.823a35.212 35.212 0 0 1-6.076 18.374H68.572A62.657 62.657 0 0 0 71.571 51.5Zm5.458-24.374h-9.57a31.78 31.78 0 0 0-7.12-11.015 35.527 35.527 0 0 1 16.69 11.015ZM39.661 16.111a31.78 31.78 0 0 0-7.12 11.015h-9.57a35.527 35.527 0 0 1 16.69-11.015Zm-16.69 56.763h9.57a31.78 31.78 0 0 0 7.12 11.015 35.527 35.527 0 0 1-16.69-11.015Zm37.368 11.015a31.78 31.78 0 0 0 7.12-11.015h9.57a35.527 35.527 0 0 1-16.69 11.015Z"/></svg>

package/src/styles/console/button.styl

@@ -5,6 +5,13 @@
 		flex-shrink 0
 	&.active
 		cursor default
+	&:disabled
+		&:not(.btn--group)
+			cursor default
+			opacity .3
+			box-shadow none
+			&:hover
+				opacity .3
 	&--icon
 		&:not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--group):not(.btn--sidebar-link)
 			sq()
@@ -27,14 +34,15 @@
 			&.btn--primary
 				&:disabled
 					&:hover
-						color $primary
 						background-color $primary
 						.icon
 							fill $light
+				&.btn--loading
+					&:hover
+						background-color $primary
 			&.btn--secondary
 				&:disabled
 					&:hover
-						color $secondary
 						background-color transparent
 						border-color $inputBorderColor
 						.icon
@@ -42,7 +50,6 @@
 			&.btn--important
 				&:disabled
 					&:hover
-						color $light
 						background-color $error
 						.icon
 							fill $light
@@ -73,22 +80,18 @@
 			flex-shrink 0
 			.icon
 				flex-shrink 0
-		&:disabled
-			cursor default
-			opacity .3
-			box-shadow none
-			&:hover
-				opacity .3
 	&--primary
 		background-color $primary
-		&:disabled
-			&:hover
-				background-color $primary
+		&:not(.btn--group):not(.btn--switch)
+			&:disabled
+				&:hover
+					background-color $primary
 	&--important
 		background-color $error
-		&:disabled
-			&:hover
-				background-color $error
+		&:not(.btn--group):not(.btn--switch)
+			&:disabled
+				&:hover
+					background-color $error
 	&--secondary
 		btn()
 		color $secondary
@@ -106,23 +109,27 @@
 				flex-shrink 0
 		&:hover
 			border-color $success
-			&.btn--loading
-				background-color transparent
-				color $secondary
-				cursor default
-				border-color $inputBorderColor
-				.icon
-					fill $secondary
+		&.btn--loading
+			&:not(.btn--group):not(.btn--switch)
+				&:hover
+					background-color transparent
+					color $secondary
+					cursor default
+					border-color $inputBorderColor
+					.icon
+						fill $secondary
 		&:disabled
 			opacity .4
 			cursor default
-			&:hover
-				opacity .4
-				background-color transparent
-				color $secondary
-				border-color $inputBorderColor
-				.icon
-					fill $secondary
+			&:not(.btn--group):not(.btn--switch)
+				&:disabled
+					&:hover
+						opacity .4
+						background-color transparent
+						color $secondary
+						border-color $inputBorderColor
+						.icon
+							fill $secondary
 	&--transparent
 		btn()
 		background-color transparent
@@ -339,8 +346,8 @@
 		&:not(.btn--icon):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
 			padding-left $padding - .4
 			&:hover
-			&.btn--important
-				background-color $error
+				&.btn--important
+					background-color $error
 		.icon
 			sq(2.2)
 	&--switch
@@ -378,6 +385,34 @@
 			flex-shrink 0
 			.icon
 				flex-shrink 0
+		&:hover
+			color $secondary
+			background-color $primary10
+		&.active
+			color $light
+			border-color $secondary
+			background-color $secondary
+			.icon
+				fill $light
+			&:hover
+				background-color $secondary
+			&:disabled
+				background-color $secondary60
+				border-color $secondary-medium15
+				color $light70
+				.icon
+					fill $light70
+		&:disabled:not(.active)
+			color $secondary30
+			cursor default
+			.icon
+				fill $secondary30
+			&:hover
+				border-color $inputBorderColor
+				color $secondary30
+				background-color transparent
+				.icon
+					fill $secondary30
 		&-container
 			flexMiddle()
 			.btn
@@ -390,17 +425,6 @@
 				&:last-child
 					border-radius 0 $borderRadius $borderRadius 0
 					border-width .1rem
-				&:hover
-					color $secondary
-					background-color $primary10
-				&.active
-					color $light
-					border-color $secondary
-					background-color $secondary
-					.icon
-						fill $light
-					&:hover
-						background-color $secondary
 			&--light
 				.btn
 					&.active
@@ -422,6 +446,8 @@
 						.btn
 							border-radius 0 $borderRadius $borderRadius 0
 							border-width .1rem .1rem .1rem 0
+
+
 	&--tab
 		fullw()
 		display inline-flex
@@ -487,7 +513,7 @@
 		&--pills
 			br()
 			flexBtn()
-			button()
+			buttonFont()
 			focus()
 			trans()
 			fullw()

package/src/styles/console/mixins.styl

@@ -62,7 +62,7 @@ btn()
 	br()
 	flexBtn()
 	trans()
-	button()
+	buttonFont()
 	hover()
 	focus()
 	white-space nowrap
@@ -73,7 +73,7 @@ flexBtn()
 	align-items center
 	justify-content flex-start
 
-button()
+buttonFont()
 	height $buttonHeight
 	font-size $buttonFontSize
 	line-height $buttonLineHeight

package/src/styles/console/select.styl

@@ -104,7 +104,6 @@
 					font-size $inputFontSizeSmall !important
 					padding 0 0 0 1rem !important
 					line-height 1.2
-					color $light
 			&__option
 				.flag
 					margin 0 1rem 0 0

package/src/styles/style-next-website.styl

@@ -0,0 +1,25 @@
+// Common styles - Don't change order
+@import "./commons/reset.styl"
+
+// Specicif style - Do not change order
+// @import "./next-website/mixins.styl"
+// @import "./next-website/fonts.styl"
+// @import "./next-website/variables.styl"
+// @import "./next-website/colors.styl"
+
+@import "./commons/__all.styl"
+@import "./commons/flags.styl"
+
+// @import "./next-website/button.styl"
+// @import "./next-website/input.styl"
+// @import "./next-website/select.styl"
+// @import "./next-website/tab.sty l"
+
+//demos
+// @import "./next-website/MerchantDemo.styl"
+// @import "./next-website/skeletonDemo.styl"
+
+// @import "./next-website/style.styl"
+
+// Style of all components
+@import "../components/**/*.styl"