Merge pull request #66 from Synthetixio/accordion-padding

Bug fixes
Synthetixio · May 4, 2022 · 88281ff · 88281ff
2 parents 326f8d1 + 8bd6c69
commit 88281ff
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 45 deletions.
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
@@ -96,6 +96,7 @@ const AccordionContent = styled.div<{ visible: boolean }>`
 	width: 100%;
 	height: 100%;
 	animation: fade-in 300ms;
+	padding-top: 20px;
 
 	@keyframes fade-in {
 		0% {

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -7,9 +7,9 @@ interface DropdownProps extends HTMLAttributes<HTMLUListElement> {
 	noBackground?: boolean;
 }
 
-export default function Dropdown({ elements, noBackground }: DropdownProps) {
+export default function Dropdown({ elements, noBackground, ...rest }: DropdownProps) {
 	return (
-		<StyledUnorderedList noBackground={noBackground}>
+		<StyledUnorderedList noBackground={noBackground} {...rest}>
 			{elements.map((element, index) => (
 				<StyledListElement isEven={index % 2 === 0} key={index} noBackground={noBackground}>
 					{element}

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -2,9 +2,9 @@ import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import colors from '../styles/colors';
 
-export default function NavBar({ children }: PropsWithChildren<{}>) {
+export default function NavBar({ children, ...rest }: PropsWithChildren<{}>) {
 	return (
-		<StyledNavBar>
+		<StyledNavBar {...rest}>
 			<StyledSynthetixLogo>
 				<svg
 					width="166"

diff --git a/src/components/Selector.tsx b/src/components/Selector.tsx
@@ -9,9 +9,9 @@ interface SelectorProps extends HTMLAttributes<HTMLButtonElement> {
 	onClick: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
-export default function Selector({ text, icon, onClick }: SelectorProps) {
+export default function Selector({ text, icon, onClick, ...rest }: SelectorProps) {
 	return (
-		<SelectorWrapper onClick={onClick} hasIcon={!!icon}>
+		<SelectorWrapper onClick={onClick} hasIcon={!!icon} {...rest}>
 			<SelectorText hasIcon={!!icon}>{text}</SelectorText> {icon}
 		</SelectorWrapper>
 	);

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
@@ -23,9 +23,10 @@ export default function TextInput({
 	size = 'medium',
 	value,
 	name,
+	...rest
 }: TextInputProps) {
 	return (
-		<StyledInputWrapper>
+		<StyledInputWrapper {...rest}>
 			<StyledTextInput
 				id={id}
 				disabled={disabled}

diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
@@ -1,34 +1,6 @@
-import { css } from 'styled-components';
-
 export default {
-	body: css`
-		font-family: Inter;
-		font-size: 1.16rem;
-	`,
-	h1: css`
-		font-family: Inter;
-		font-size: 3.33rem;
-	`,
-	h2: css`
-		font-family: Inter;
-		font-size: 2.66rem;
-	`,
-	h3: css`
-		font-family: Inter;
-		font-size: 2rem;
-	`,
-	h4: css`
-		font-family: Inter;
-		font-size: 1.5rem;
-	`,
-	h5: css`
-		font-family: Inter;
-		font-size: 1.16rem;
-	`,
-	h6: css`
-		font-family: Inter;
-		font-size: 1rem;
-	`,
-	regular: `Inter`,
-	interBold: `Inter Bold`,
+	inter: 'Inter',
+	interBold: 'Inter Bold',
+	gtAmerica: 'GT America',
+	gtAmericaMono: 'GT America Mono',
 };
diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx
@@ -14,12 +14,25 @@ export const WithoutGradient: ComponentStory<typeof Accordion> = (args) => <Acco
 
 WithoutGradient.args = {
 	headerChildren: <div style={{ color: 'white' }}>Test</div>,
-	children: <div style={{ color: 'white' }}>Some nice content</div>,
+	children: (
+		<div style={{ color: 'white' }}>
+			Some nice content blalalalalalalalaalalalSome nice content blalalalalalalalaalalalSome nice
+			content blalalalalalalalaalalalSome nice content blalalalalalalalaalalalSome nice content
+			blalalalalalalalaalalalSome nice content blalalalalalalalaalalal
+		</div>
+	),
 };
 
 Template.args = {
 	headerChildren: <div style={{ color: 'white' }}>Test</div>,
-	children: <div style={{ color: 'white' }}>Some nice content</div>,
+	children: (
+		<div style={{ color: 'white' }}>
+			{' '}
+			Some nice content blalalalalalalalaalalalSome nice content blalalalalalalalaalalalSome nice
+			content blalalalalalalalaalalalSome nice content blalalalalalalalaalalalSome nice content
+			blalalalalalalalaalalalSome nice content blalalalalalalalaalalal
+		</div>
+	),
 };
 
 Template.parameters = {

diff --git a/stories/NavBar.stories.tsx b/stories/NavBar.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import NavBar from '../src/components/NavBar';
+import { SpotlightButton } from '../src';
 
 export default {
 	title: 'Nav Bar',
@@ -11,9 +12,10 @@ export const Template: ComponentStory<typeof NavBar> = (args) => <NavBar {...arg
 
 Template.args = {
 	children: [
-		<div style={{ color: 'white' }}>some buttons</div>,
-		<div style={{ color: 'white' }}>some buttons</div>,
-		<div style={{ color: 'white' }}>some buttons</div>,
-		<div style={{ color: 'white' }}>some buttons</div>,
+		<SpotlightButton onClick={() => {}} active text="test" />,
+		<SpotlightButton onClick={() => {}} active={false} text="test" />,
+		<SpotlightButton onClick={() => {}} active={false} text="test" />,
+		<SpotlightButton onClick={() => {}} active text="test" />,
+		<SpotlightButton onClick={() => {}} active text="test" />,
 	],
 };