[WIP] new tools

packages/website/ts/components/docs/sidebar/select.tsx

@@ -55,12 +55,17 @@ const Wrapper = styled.div`
 `;
 
 const Container = styled.div`
-    border: 1px solid ${colors.brandDark};
+    border: 1px solid #e3e3e3;
     border-radius: 4px;
     display: inline-block;
     margin-left: 12px;
     position: relative;
 
+    transition: all 250ms ease-in-out;
+    &:hover {
+        border-color: ${colors.brandDark};
+    }
+
     svg {
         pointer-events: none;
         position: absolute;
@@ -72,7 +77,7 @@ const Container = styled.div`
 
 const StyledSelect = styled.select`
     appearance: none;
-    background-color: #fff;
+    background-color: transparent;
     border: none;
     cursor: pointer;
     outline: none;

packages/website/ts/components/docs/sidebar/sidebar_wrapper.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { Collapse } from 'ts/components/docs/sidebar/collapse';
 
+import { colors } from 'ts/style/colors';
 import { docs } from 'ts/style/docs';
 
 interface ISidebarWrapperProps {
@@ -31,9 +32,22 @@ const SidebarAside = styled.aside`
 const SidebarContent = styled.div`
     position: sticky;
     top: ${docs.headerOffset}px; /* To make space for the header (react-headroom) when clicking on links */
-    max-height: 60vh;
+    max-height: 85vh;
     overflow-y: auto;
 
+    /* Slim scroll bar */
+    scrollbar-color: ${colors.grey500};
+    scrollbar-width: 1px; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    &::-webkit-scrollbar {
+        height: 1px;
+        width: 1px;
+        background: transparent; /* Chrome / Safari / Webkit */
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: ${colors.grey350};
+    }
+
     @media (max-width: 900px) {
         max-height: 100%;
     }

packages/website/ts/components/docs/sidebar/table_of_contents.tsx

@@ -8,6 +8,8 @@ import { docs } from 'ts/style/docs';
 
 import { SidebarWrapper } from 'ts/components/docs/sidebar/sidebar_wrapper';
 
+import { Select } from 'ts/components/docs/sidebar/select';
+
 interface ITableOfContentsProps {
     contents: IContents[];
 }
@@ -19,9 +21,35 @@ export interface IContents {
     title: string;
 }
 
+export interface ISelectItemConfig {
+    label: string;
+    value?: string;
+    onClick?: () => void;
+}
+
+const items: ISelectItemConfig[] = [
+    {
+        label: 'v6.1.10',
+        onClick: () => {
+            console.log('YEAH 10');
+        },
+    },
+    {
+        label: 'v6.1.11',
+        onClick: () => {
+            console.log('YEAH 11');
+        },
+    },
+];
+
+const onChange = () => {
+    console.log('ON CHANGE!');
+};
+
 export const TableOfContents: React.FC<ITableOfContentsProps> = ({ contents }) => {
     return (
         <SidebarWrapper>
+            <Select emptyText="6.1.11" id="select-versions" items={items} value="6.1.11" onChange={onChange} />
             <Contents contents={contents} />
         </SidebarWrapper>
     );
@@ -63,19 +91,26 @@ const ContentLink = styled(Link)<{ level: number }>`
     display: inline-block;
 
     span {
-        color: ${colors.textDarkSecondary};
+        color: #999;
+        font-weight: 300;
         transition: all 250ms ease-in-out;
     }
 
+    &:hover span,
     &.active span {
         color: ${colors.brandDark};
     }
 
+    &.active span {
+        font-weight: 500;
+    }
+
     ${({ level }) =>
         level === 1 &&
         `
         font-size: 0.8333rem;
-        margin-bottom: 1rem;
+        line-height: 1.5;
+        margin-bottom: .5rem;
 
     `}
 
@@ -83,10 +118,12 @@ const ContentLink = styled(Link)<{ level: number }>`
         level === 2 &&
         `
         font-size: 0.7222rem;
-        line-height: 1.45;
-        padding: 0.25rem 0 0.25rem 0.7rem;
+        line-height: 2;
+        padding-left: 0.7rem;
         border-left: 1px solid #e3e3e3;
+        transition: all 250ms ease-in-out;
 
+        &:hover,
         &.active {
             border-color: ${colors.brandDark};
         }

packages/website/ts/components/text.tsx

@@ -24,6 +24,7 @@ interface HeadingProps extends BaseTextInterface {
 
 interface ParagraphProps extends BaseTextInterface {
     isNoMargin?: boolean;
+    lineHeight?: number | string;
     marginBottom?: string; // maybe we should remove isNoMargin
     isMuted?: boolean | number;
     fontWeight?: string | number;
@@ -71,9 +72,10 @@ export const Paragraph = styled.p<ParagraphProps>`
     color: ${props => props.color || props.theme.paragraphColor};
     opacity: ${props => (typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted)};
     text-align: ${props => (props.textAlign ? props.textAlign : props.isCentered && 'center')};
-    line-height: 1.4;
+    line-height: ${props => props.lineHeight};
 `;
 
 Paragraph.defaultProps = {
     isMuted: true,
+    lineHeight: 1.4,
 };