Merge pull request #18 from Synthetixio/feat/banner

feat(banner): added banner component
Synthetixio · Mar 28, 2022 · 2d00182 · 2d00182
2 parents e84903f + 823cc02
commit 2d00182
Show file tree

Hide file tree

Showing 69 changed files with 937 additions and 429 deletions.
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -1,7 +1,6 @@
 <style type="text/css">
 	html {
 		background-color: black;
-		font-size: 12px;
 		font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
@@ -11,6 +10,56 @@
 		position: relative;
 		scroll-behavior: smooth;
 	}
+	* {
+		box-sizing: border-box;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	input[type='number'] {
+		-moz-appearance: textfield;
+	}
+
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+	}
+
+	.darker-20 {
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+
+	.darker-40 {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+
+	.darker-60 {
+		background-color: rgba(0, 0, 0, 0.6);
+	}
+
+	.darker-80 {
+		background-color: rgba(0, 0, 0, 0.8);
+	}
+
+	.lighter-20 {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.lighter-20 {
+		background-color: rgba(255, 255, 255, 0.4);
+	}
+
+	.lighter-20 {
+		background-color: rgba(255, 255, 255, 0.6);
+	}
+
+	.lighter-20 {
+		background-color: rgba(255, 255, 255, 0.8);
+	}
 	@font-face {
 		font-family: 'Inter';
 		font-style: normal;

diff --git a/package.json b/package.json
@@ -5,16 +5,12 @@
 	"repository": "https://github.com/Synthetixio/ui",
 	"license": "MIT",
 	"private": false,
-	"main": "./dist/cjs/index.js",
-	"module": "./dist/esm/index.js",
-	"types": "./dist/esm/index.d.ts",
+	"types": "./dist/types",
 	"files": [
 		"/dist"
 	],
 	"scripts": {
-		"build": "yarn build:esm && yarn build:cjs",
-		"build:esm": "tsc",
-		"build:cjs": "tsc --module commonjs --outDir dist/cjs",
+		"build": "rm -rf .dist/ &&  npx webpack",
 		"storybook": "start-storybook -p 6006 -c .storybook watch-css -s ./src",
 		"build-storybook": "build-storybook",
 		"commit": "cz",
@@ -31,16 +27,22 @@
 		"@types/react": "17.0.39",
 		"@types/styled-components": "5.1.22",
 		"commitizen": "4.2.4",
+		"css-loader": "^6.7.1",
 		"cz-conventional-changelog": "3.3.0",
+		"file-loader": "^6.2.0",
 		"gh-pages": "^3.2.3",
 		"html-webpack-plugin": "5.5.0",
 		"husky": "7.0.4",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
 		"semantic-release": "19.0.2",
 		"storybook-addon-designs": "^6.2.1",
+		"style-loader": "^3.3.1",
 		"styled-components": "5.3.3",
+		"ts-loader": "^9.2.8",
 		"typescript": "4.5.5",
+		"webpack": "^5.70.0",
+		"webpack-cli": "^4.9.2",
 		"yalc": "1.0.0-pre.53"
 	},
 	"peerDependencies": {

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -0,0 +1,32 @@
+import React, { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+import colors from '../styles/colors';
+import spacings from '../styles/spacings';
+
+interface BannerProps {
+	color: keyof typeof colors.gradients;
+}
+
+export default function Banner({
+	color = 'orange',
+	children,
+	...rest
+}: PropsWithChildren<BannerProps>) {
+	return (
+		<StyledBannerWrapper {...rest} color={color}>
+			<StyledBannerInner className="darker-40">{children}</StyledBannerInner>
+		</StyledBannerWrapper>
+	);
+}
+
+const StyledBannerWrapper = styled.div<{ color: BannerProps['color'] }>`
+	width: 100%;
+	border-radius: 5px;
+	padding: 2px;
+	background: ${({ color }) => colors.gradients[color]};
+`;
+
+const StyledBannerInner = styled.div`
+	border-radius: inherit;
+	padding: ${spacings.margin.medium};
+`;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -86,7 +86,7 @@ const determineVariant = (variant: ButtonProps['variant'], disabled?: boolean) =
 	if (disabled) return 'rgba(86, 86, 99, 0.6);';
 	switch (variant) {
 		case 'tertiary':
-			return `${colors.darkBlue.primary}`;
+			return `${colors.darkBlue}`;
 		default:
 			return `${colors.gradients.lightBlue}`;
 	}
@@ -100,6 +100,9 @@ const StyledButtonBorder = styled.div<{
 	justify-content: center;
 	border-radius: 4px;
 	padding: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	background: ${({ variant, disabled }) => determineVariant(variant, disabled)};
 	${({ disabled }) => disabled && `border: 2px solid ${colors.disabled}`};
 `;

diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -231,7 +231,7 @@ const StyledDotsWrapper = styled.div`
 
 const StyledDot = styled.div<{ active?: boolean }>`
 	border-radius: 50%;
-	background-color: ${({ active }) => (active ? colors.lightBlue.primary : colors.grey)};
+	background-color: ${({ active }) => (active ? colors.lightBlue : colors.grey)};
 	width: 8px;
 	height: 8px;
 	margin-right: ${spacings.margin.medium};

diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
@@ -20,7 +20,7 @@ export default function ExternalLink({
 	return (
 		<StyledWrapper {...rest}>
 			<StyledExternalLink href={link} customColor={customColor}>
-				{text}
+				<div className="darker-20">{text}</div>
 			</StyledExternalLink>
 			{!withoutIcon && <ArrowLinkOffIcon active={true} />}
 		</StyledWrapper>
@@ -38,11 +38,11 @@ const StyledExternalLink = styled.a.attrs({
 })<{ customColor?: ExternalLinkProps['customColor'] }>`
 	text-decoration: none;
 	color: ${({ customColor }) =>
-		customColor?.textColor ? customColor.textColor : colors.lightBlue.primary};
+		customColor?.textColor ? customColor.textColor : colors.lightBlue};
 	font-family: Inter;
 
 	:hover {
-		color: ${({ customColor }) =>
-			customColor?.hoverColor ? customColor.hoverColor : colors.lightBlue.dark.darker20};
+		${({ customColor }) =>
+			customColor?.hoverColor ? `color: ${customColor.hoverColor}` : 'filter: brightness(80%)'};
 	}
 `;
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -1,5 +1,6 @@
 import React, { MouseEvent } from 'react';
 import styled from 'styled-components';
+import colors from '../styles/colors';
 import spacings from '../styles/spacings';
 
 interface IconButtonProps {
@@ -56,7 +57,7 @@ const StyledButton = styled.button<{
 `;
 
 const StyledText = styled.span`
-	color: white;
+	color: ${colors.white};
 	font-family: Inter;
 	font-weight: 600;
 	line-height: 20px;

diff --git a/src/components/Icons/ArrowDownIcon.tsx b/src/components/Icons/ArrowDownIcon.tsx
@@ -7,14 +7,14 @@ export default function ArrowDownIcon({ active }: SVGIconProps) {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				d="M16.8354 13.1641L12.8354 17.1641L8.83545 13.1641"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"
 			/>
 			<path
 				d="M12.8354 17.1641L12.8354 6.83496"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"

diff --git a/src/components/Icons/ArrowDropdownDownIcon.tsx b/src/components/Icons/ArrowDropdownDownIcon.tsx
@@ -7,7 +7,7 @@ export default function ArrowDropdownDownIcon({ active }: SVGIconProps) {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				d="M16 10L12 14L8 10"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"

diff --git a/src/components/Icons/ArrowDropdownLeftIcon.tsx b/src/components/Icons/ArrowDropdownLeftIcon.tsx
@@ -7,7 +7,7 @@ export default function ArrowDropdownLeftIcon({ active }: SVGIconProps) {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				d="M14 16L10 12L14 8"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"

diff --git a/src/components/Icons/ArrowDropdownRightIcon.tsx b/src/components/Icons/ArrowDropdownRightIcon.tsx
@@ -7,7 +7,7 @@ export default function ArrowDropdownRightIcon({ active }: SVGIconProps) {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				d="M10 8L14 12L10 16"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"

diff --git a/src/components/Icons/ArrowDropdownUpIcon.tsx b/src/components/Icons/ArrowDropdownUpIcon.tsx
@@ -7,7 +7,7 @@ export default function ArrowDropdownUpIcon({ active }: SVGIconProps) {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				d="M8 14L12 10L16 14"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"

diff --git a/src/components/Icons/ArrowLeftIcon.tsx b/src/components/Icons/ArrowLeftIcon.tsx
@@ -7,14 +7,14 @@ export default function ArrowLeftIcon({ active }: SVGIconProps) {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				d="M11 16L7 12L11 8"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"
 			/>
 			<path
 				d="M7 12H17.3291"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"

diff --git a/src/components/Icons/ArrowLinkOffIcon.tsx b/src/components/Icons/ArrowLinkOffIcon.tsx
@@ -7,14 +7,14 @@ export default function ArrowLinkOffIcon({ active }: SVGIconProps) {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				d="M10.7322 8.11133H16.389V13.7682"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"
 			/>
 			<path
 				d="M16.3891 8.11129L9.08534 15.4151"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"

diff --git a/src/components/Icons/ArrowRightIcon.tsx b/src/components/Icons/ArrowRightIcon.tsx
@@ -7,14 +7,14 @@ export default function ArrowRightIcon({ active }: SVGIconProps) {
 		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path
 				d="M14 8L18 12L14 16"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"
 			/>
 			<path
 				d="M18 12L7.6709 12"
-				stroke={active ? colors.lightBlue.primary : 'white'}
+				stroke={active ? colors.lightBlue : 'white'}
 				strokeWidth="2"
 				strokeLinecap="round"
 				strokeLinejoin="round"

diff --git a/src/components/Icons/ArrowTriangleDownIcon.tsx b/src/components/Icons/ArrowTriangleDownIcon.tsx
@@ -3,18 +3,12 @@ import colors from '../../styles/colors';
 import { SVGIconProps } from './types';
 
 export default function ArrowTriangleDownIcon({ active }: SVGIconProps) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M8.20711 9.5C7.76165 9.5 7.53857 10.0386 7.85355 10.3536L11.6464 14.1464C11.8417 14.3417 12.1583 14.3417 12.3536 14.1464L16.1464 10.3536C16.4614 10.0386 16.2383 9.5 15.7929 9.5H8.20711Z"
-        fill={active ? colors.lightBlue.primary : 'white'}
-      />
-    </svg>
-  );
+	return (
+		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M8.20711 9.5C7.76165 9.5 7.53857 10.0386 7.85355 10.3536L11.6464 14.1464C11.8417 14.3417 12.1583 14.3417 12.3536 14.1464L16.1464 10.3536C16.4614 10.0386 16.2383 9.5 15.7929 9.5H8.20711Z"
+				fill={active ? colors.lightBlue : 'white'}
+			/>
+		</svg>
+	);
 }
diff --git a/src/components/Icons/ArrowTriangleLeftIcon.tsx b/src/components/Icons/ArrowTriangleLeftIcon.tsx
@@ -3,18 +3,12 @@ import colors from '../../styles/colors';
 import { SVGIconProps } from './types';
 
 export default function ArrowTriangleLeftIcon({ active }: SVGIconProps) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M14.5 8.20711C14.5 7.76165 13.9614 7.53857 13.6464 7.85355L9.85355 11.6464C9.65829 11.8417 9.65829 12.1583 9.85355 12.3536L13.6464 16.1464C13.9614 16.4614 14.5 16.2383 14.5 15.7929V8.20711Z"
-        fill={active ? colors.lightBlue.primary : 'white'}
-      />
-    </svg>
-  );
+	return (
+		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M14.5 8.20711C14.5 7.76165 13.9614 7.53857 13.6464 7.85355L9.85355 11.6464C9.65829 11.8417 9.65829 12.1583 9.85355 12.3536L13.6464 16.1464C13.9614 16.4614 14.5 16.2383 14.5 15.7929V8.20711Z"
+				fill={active ? colors.lightBlue : 'white'}
+			/>
+		</svg>
+	);
 }
diff --git a/src/components/Icons/ArrowTriangleRightIcon.tsx b/src/components/Icons/ArrowTriangleRightIcon.tsx
@@ -3,18 +3,12 @@ import colors from '../../styles/colors';
 import { SVGIconProps } from './types';
 
 export default function ArrowTriangleRightIcon({ active }: SVGIconProps) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.5 15.7929C9.5 16.2383 10.0386 16.4614 10.3536 16.1464L14.1464 12.3536C14.3417 12.1583 14.3417 11.8417 14.1464 11.6464L10.3536 7.85355C10.0386 7.53857 9.5 7.76165 9.5 8.20711V15.7929Z"
-        fill={active ? colors.lightBlue.primary : 'white'}
-      />
-    </svg>
-  );
+	return (
+		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M9.5 15.7929C9.5 16.2383 10.0386 16.4614 10.3536 16.1464L14.1464 12.3536C14.3417 12.1583 14.3417 11.8417 14.1464 11.6464L10.3536 7.85355C10.0386 7.53857 9.5 7.76165 9.5 8.20711V15.7929Z"
+				fill={active ? colors.lightBlue : 'white'}
+			/>
+		</svg>
+	);
 }