feat(Getting-started): visual improvements on getting-started

catho · Apr 11, 2019 · dad88d1 · dad88d1
1 parent c4fdbe1
commit dad88d1
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/.storybook/static/getting-started-bg.png b/.storybook/static/getting-started-bg.png
diff --git a/package.json b/package.json
@@ -98,7 +98,7 @@
     "styled-components": "^4.1.3"
   },
   "dependencies": {
-    "@catho/quantum-storybook-ui": "^1.0.4",
+    "@catho/quantum-storybook-ui": "^1.0.5",
     "@material-ui/core": "^3.8.2",
     "@material-ui/icons": "^3.0.2",
     "babel-polyfill": "^6.26.0",

diff --git a/stories/Introduction/Introduction.story.jsx b/stories/Introduction/Introduction.story.jsx
@@ -1,15 +1,29 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Heading } from '@catho/quantum-storybook-ui';
-import Logo from '../../.storybook/static/logo.svg';
+import styled from 'styled-components';
 import Introduction from './Introduction';
+import Background from '../../.storybook/static/getting-started-bg.png';
+
+const StyledHeading = styled(Heading)`
+  background-color: red;
+  position: relative;
+  background-image: url(${Background});
+  background-color: #f3f3f5;
+  padding: 45px 0 !important;
+  background-repeat: no-repeat;
+
+  h1 {
+    font-size: 50px;
+  }
+`;
 
 storiesOf('Introduction', module).add('Getting started', () => (
   <>
-    <Heading title="Quantum" image={Logo}>
+    <StyledHeading title="Quantum">
       CSS in JS based reusable components, are the core of Quantum
       design-system: a library for developing consistent UI/UX at Catho.
-    </Heading>
+    </StyledHeading>
 
     <Introduction />
   </>

diff --git a/yarn.lock b/yarn.lock
@@ -857,21 +857,21 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
-"@catho/quantum-storybook-ui@^1.0.3", "@catho/quantum-storybook-ui@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@catho/quantum-storybook-ui/-/quantum-storybook-ui-1.0.4.tgz#01139e3d8fe048916e9fc226d8fee9d2b9021a49"
-  integrity sha512-uEa0qh0yip/upUWgjNCjmlXZnEjHUKceTtGaPAhW8OuJpE4UsPcjns8h5h8Ss0yPWfFjcZdY5u/12rbVKr7dgw==
+"@catho/quantum-storybook-ui@^1.0.4", "@catho/quantum-storybook-ui@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@catho/quantum-storybook-ui/-/quantum-storybook-ui-1.0.5.tgz#a572595274914fa4c94a0d6f64fd396957308e65"
+  integrity sha512-7x7LZJWKfb2t+K1136mV6VTFsZPeaGJcmlC+YMlryRgsc/pW/mfmSxMFHupXb1k/VqDU60ahRRiL44pCom0yPQ==
   dependencies:
     "@catho/quantum" "^1.8.0"
     commitizen "^3.0.7"
     react-markdown "^4.0.6"
 
 "@catho/quantum@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@catho/quantum/-/quantum-1.8.0.tgz#e051c9b06213eefd980e1a60bd235b3a2ac348d4"
-  integrity sha512-Huw810Ep00dAp1bARXmIvYZ8cFxHCRmFFJCKwcht2rLsSBiQ83cNDcJACJrElg9Df7G0PaJ99LPFeHr9KiQNUg==
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/@catho/quantum/-/quantum-1.10.2.tgz#aa38b589759a2b3a7de2b8264f45ccac7fbecbf8"
+  integrity sha512-mPEyPWBMfoapfvT+5jLMijUNMItXB/QADUyepgPTu6bGNCL7ps6B3HjzgXxdQ4lyDgy2E41XMrIqFfch6Xb2jg==
   dependencies:
-    "@catho/quantum-storybook-ui" "^1.0.3"
+    "@catho/quantum-storybook-ui" "^1.0.4"
     "@material-ui/core" "^3.8.2"
     "@material-ui/icons" "^3.0.2"
     babel-polyfill "^6.26.0"