WIP components

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { colors } from 'ts/style/colors';
+
+export interface FilterProps {
+    name: string;
+    value: string;
+    label: string;
+}
+
+export const Filter: React.FunctionComponent<FilterProps> = ({ value, name, label }: FilterProps) => (
+    <Wrapper>
+        <Checkbox name={name} />
+        <CheckboxBox />
+        <Label>{label}</Label>
+    </Wrapper>
+);
+
+const Wrapper = styled.label`
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.833333333rem;
+`;
+
+const Checkbox = styled.input.attrs({ type: 'checkbox' })`
+    position: absolute;
+    opacity: 0;
+    opacity: 0;
+`;
+
+const CheckboxBox = styled.div`
+border: 1px solid #CBCBCB;
+width: 22px;
+height: 22px;
+margin-right: 0.666rem;
+
+${Checkbox}:checked ~ & {
+    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.983 12.522c-.21 0-.4-.07-.557-.226l-3.46-3.461a.777.777 0 0 1 0-1.113.777.777 0 0 1 1.112 0L6 10.626l6.94-6.922a.777.777 0 0 1 1.112 0c.313.313.313.8 0 1.113l-7.495 7.479a.83.83 0 0 1-.574.226z' fill='currentColor'/%3E%3C/svg%3E") no-repeat center;
+}
+`;
+
+const Label = styled.span`
+    font-size: 0.833rem;
+    color: ${colors.textDarkPrimary};
+    font-weight: 300;
+`;

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

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+
+import { Button } from 'ts/components/button';
+import { Heading } from 'ts/components/text';
+import { Container } from 'ts/components/ui/container';
+import { Filter } from 'ts/components/docs/sidebar/filter';
+import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
+import { zIndex } from 'ts/style/z_index';
+
+export interface FiltersProps {
+}
+
+export interface FiltersState {
+}
+
+interface Group {
+    heading: string;
+    name: string;
+    filters: FilterProps[];
+}
+
+interface FilterProps {
+value: string;
+label: string;
+}
+
+const groups: Group[] = [
+    {
+        heading: 'Topic',
+        name: 'topic',
+        filters: [
+            {
+                value: 'mesh',
+                label: 'Mesh'
+            },
+            {
+                value: 'testing',
+                label: 'Testing'
+            },
+            {
+                value: 'mesh',
+                label: 'Mesh'
+            },
+            {
+                value: 'testing',
+                label: 'Testing'
+            },
+        ]
+    },
+    {
+        heading: 'Level',
+        name: 'level',
+        filters: [
+            {
+                value: 'beginner',
+                label: 'Beginner'
+            },
+            {
+                value: 'intermediate',
+                label: 'Intermediate'
+            },
+            {
+                value: 'advanced',
+                label: 'Advanced'
+            },
+        ]
+    },
+]
+
+export class Filters extends React.Component<FiltersProps, FiltersState> {
+    public static defaultProps = {
+    };
+    public state: FiltersState = {
+    };
+    public render(): React.ReactNode {
+        return (
+            <Wrapper>
+                {groups.map(({ heading, name, filters }: Group, index) => (
+                    <GroupWrapper key={`filter-group-${index}`}>
+                        <GroupHeading asElement="h3">{heading}</GroupHeading>
+                        {filters.map(({ value, label }: FilterProps, index) => (
+                        <Filter key={`filter-${name}-${index}`} name={name} value={value} label={label} />
+                ))}
+                    </GroupWrapper>
+                ))}
+            </Wrapper>
+        );
+    }
+    /*private readonly _handleCopyClick = () => {
+        this.setState({ didCopyFilters: true });
+    };*/
+}
+
+const Wrapper = styled.div`
+    position: relative;
+    max-width: 702px;
+`;
+
+const GroupWrapper = styled.div`
+    margin-bottom: 2.22em;
+`;
+
+const GroupHeading = styled(Heading)`
+color: ${colors.textDarkPrimary};
+    font-size: 1rem !important;
+    font-weight: 400 !important;
+    margin-bottom: 1em !important;
+`;