add EmptyState stories

2020-09-29 11:10:34 +02:00
parent b0fbdf33c2
commit 6149a3e8b1
1 changed files with 81 additions and 0 deletions
@@ -0,0 +1,81 @@
+import { Button } from '@material-ui/core';
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { EmptyState } from './EmptyState';
+
+export default {
+  title: 'EmptyState',
+  component: EmptyState,
+};
+
+const containerStyle = { width: '100%', height: '100vh' };
+
+export const MissingAnnotation = () => (
+  <div style={containerStyle}>
+    <EmptyState
+      type="missingAnnotation"
+      title="Your plugin is missing an annotation"
+      description="Add a descripton here."
+    />
+  </div>
+);
+
+export const NoInformation = () => (
+  <div style={containerStyle}>
+    <EmptyState
+      type="noInformation"
+      title="No information to display"
+      description="Add a descripton here."
+    />
+  </div>
+);
+
+export const CreateComponent = () => (
+  <div style={containerStyle}>
+    <EmptyState
+      type="createComponent"
+      title="Create a component"
+      description="Add a descripton here."
+    />
+  </div>
+);
+
+export const NoBuild = () => (
+  <div style={containerStyle}>
+    <EmptyState
+      type="noBuild"
+      title="No builds to show"
+      description="Add a descripton here."
+    />
+  </div>
+);
+
+export const WithAction = () => (
+  <div style={containerStyle}>
+    <EmptyState
+      type="missingAnnotation"
+      title="Your plugin is missing an annotation"
+      description="Click the docs to learn more."
+      action={
+        <Button color="primary" href="#" onClick={() => {}} variant="contained">
+          DOCS
+        </Button>
+      }
+    />
+  </div>
+);