From 98fb97717ddfaf21447cf2d8ee42f92a9dd5a9b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sun, 5 Apr 2020 22:25:54 +0200
Subject: [PATCH] Add Storybook item for HorizontalScrollGrid (#475)

* Add Storybook item for HorizontalScrollGrid

* Add Lifecycle's as well

* Remove value in bool prop

* Update index.ts

* Fixed comments
---
 .../HorizontalScrollGrid.stories.tsx          | 37 +++++++++++++++++++
 .../Lifecycle/LifecycleAlpha.stories.tsx      | 33 +++++++++++++++++
 .../Lifecycle/LifecycleBeta.stories.tsx       | 33 +++++++++++++++++
 packages/core/src/index.ts                    |  1 +
 4 files changed, 104 insertions(+)
 create mode 100644 packages/core/src/components/HorizontalScrollGrid.stories.tsx
 create mode 100644 packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx
 create mode 100644 packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx

diff --git a/packages/core/src/components/HorizontalScrollGrid.stories.tsx b/packages/core/src/components/HorizontalScrollGrid.stories.tsx
new file mode 100644
index 0000000000..7ab3efd524
--- /dev/null
+++ b/packages/core/src/components/HorizontalScrollGrid.stories.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 HorizontalScrollGrid from './HorizontalScrollGrid';
+
+const cardContentStyle = { height: 0, padding: 150, margin: 20 };
+const containerStyle = { width: 800, height: 400, margin: 20 };
+const opacityArray = [0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
+
+export default {
+  title: 'HorizontalScrollGrid',
+  component: HorizontalScrollGrid,
+};
+
+export const Default = () => (
+  <div style={containerStyle}>
+    <HorizontalScrollGrid>
+      {opacityArray.map(element => {
+        const style = { backgroundColor: `rgba(0, 185, 151, ${element})` };
+        return <div style={{ ...style, ...cardContentStyle }} key={element} />;
+      })}
+    </HorizontalScrollGrid>
+  </div>
+);
diff --git a/packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx b/packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx
new file mode 100644
index 0000000000..1b044fcd5f
--- /dev/null
+++ b/packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { AlphaLabel } from './Lifecycle';
+
+export default {
+  title: 'Alpha Lifecycle',
+  component: AlphaLabel,
+};
+
+export const Default = () => (
+  <>
+    This feature is in <AlphaLabel />
+  </>
+);
+export const Shorthand = () => (
+  <>
+    This feature is in <AlphaLabel isShorthand />
+  </>
+);
diff --git a/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx b/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx
new file mode 100644
index 0000000000..b74171b5ea
--- /dev/null
+++ b/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { BetaLabel } from './Lifecycle';
+
+export default {
+  title: 'Beta Lifecycle',
+  component: BetaLabel,
+};
+
+export const Default = () => (
+  <>
+    This feature is in <BetaLabel />
+  </>
+);
+export const Shorthand = () => (
+  <>
+    This feature is in <BetaLabel isShorthand />
+  </>
+);
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 33054ae81c..73b0e33ddd 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -32,6 +32,7 @@ export { default as HorizontalScrollGrid } from './components/HorizontalScrollGr
 export { default as ProgressCard } from './components/ProgressCard';
 export { default as CircleProgress } from './components/CircleProgress';
 export { default as Progress } from './components/Progress';
+export { AlphaLabel, BetaLabel } from './components/Lifecycle';
 export { default as SupportButton } from './components/SupportButton';
 export { default as SortableTable } from './components/SortableTable';
 export { FeatureCalloutCircular } from './components/FeatureDiscovery/FeatureCalloutCircular';