Add List to kitchen sink and fix website build

LatitudeFinancialOSS · Feb 1, 2020 · c47d2ea · c47d2ea · vercel · Feb 1, 2020
1 parent 19addfa
commit c47d2ea
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 1 deletion.
diff --git a/website/src/components/kitchen-sink/List.js b/website/src/components/kitchen-sink/List.js
@@ -0,0 +1,62 @@
+import React from "react";
+import { Container, List, Text, Link } from "basis";
+import Layout from "./Layout";
+
+function KitchenSinkList() {
+  return (
+    <Layout name="List">
+      <Container padding="4" width="20">
+        <Text textStyle="heading4" margin="0 0 4 0">
+          Unordered list:
+        </Text>
+        <List>
+          <List.Item>
+            <Text>Short item</Text>
+          </List.Item>
+          <List.Item>
+            <Text>
+              Very long item with a{" "}
+              <Link href="#" newTab={false}>
+                link
+              </Link>{" "}
+              and a <b>bold text</b> that demonstrates a multi-line paragraph.
+            </Text>
+            <Text textStyle="legal" margin="4 0 0 0">
+              {`Note that you can override List's textStyle.`}
+            </Text>
+          </List.Item>
+          <List.Item>
+            <Text>
+              <strong>Nested list</strong>
+            </Text>
+            <List textStyle="body2" margin="3 0 0 0">
+              <List.Item>First</List.Item>
+              <List.Item>Second</List.Item>
+              <List.Item>Third</List.Item>
+            </List>
+          </List.Item>
+        </List>
+      </Container>
+      <Container padding="4" width="20" bg="grey.t05">
+        <Text textStyle="heading4" margin="0 0 4 0">
+          Ordered list:
+        </Text>
+        <List type="ordered" textStyle="subtitle2">
+          <List.Item>First item</List.Item>
+          <List.Item>Second item</List.Item>
+          <List.Item>
+            <Text>
+              <b>Nested list</b>
+            </Text>
+            <List type="ordered" textStyle="body2" margin="3 0 0 0">
+              <List.Item>Hello</List.Item>
+              <List.Item>World</List.Item>
+            </List>
+          </List.Item>
+        </List>
+      </Container>
+    </Layout>
+  );
+}
+
+export default KitchenSinkList;
diff --git a/website/src/pages/kitchen-sink/index.js b/website/src/pages/kitchen-sink/index.js
@@ -11,6 +11,7 @@ import Grid from "../../components/kitchen-sink/Grid";
 import Header from "../../components/kitchen-sink/Header";
 import Input from "../../components/kitchen-sink/Input";
 import Link from "../../components/kitchen-sink/Link";
+import List from "../../components/kitchen-sink/List";
 import RadioGroup from "../../components/kitchen-sink/RadioGroup";
 import Section from "../../components/kitchen-sink/Section";
 import Select from "../../components/kitchen-sink/Select";
@@ -34,6 +35,7 @@ function KitchenSink() {
       <Header />
       <Input />
       <Link />
+      <List />
       <RadioGroup />
       <Section />
       <Select />

diff --git a/website/src/pages/playground/index.js b/website/src/pages/playground/index.js
@@ -23,7 +23,7 @@ import useLocalStorage from "../../hooks/useLocalStorage";
 import useCanary from "../../hooks/useCanary";
 import ComponentPreview from "../../components/ComponentPreview";
 import DemoBlock from "../../components/DemoBlock";
-import InspectIcon from "../../components/icons/Inspect";
+import InspectIcon from "../../components/icons/inspect";
 
 import "../../utils/meta";