feat(Banner): new banner design (#2761)

* feat(Banner): new banner design * fix: feedback manu and tom * fix: banner
scaleway · Jul 28, 2023 · b0d21ff · b0d21ff
1 parent b17ea8f
commit b0d21ff
Show file tree

Hide file tree

Showing 16 changed files with 894 additions and 109 deletions.
diff --git a/.changeset/rich-hairs-nail.md b/.changeset/rich-hairs-nail.md
@@ -0,0 +1,5 @@
+---
+'@ultraviolet/ui': minor
+---
+
+Design update on Banner to include pattern and gradient colors
diff --git a/packages/ui/src/components/Banner/__stories__/Directions.stories.tsx b/packages/ui/src/components/Banner/__stories__/Directions.stories.tsx
@@ -1,12 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Banner } from '..'
-import image from './Image.png'
 
 export const Directions: StoryFn = () => (
   <>
     <Banner
       title="Apply to Scaleway Startup programs"
-      image={<img src={image} alt="" />}
       buttonText="Apply now"
       linkText="Learn more"
       direction="row"
@@ -17,7 +15,6 @@ export const Directions: StoryFn = () => (
     </Banner>
     <Banner
       title="Apply to Scaleway Startup programs"
-      image={<img src={image} alt="" />}
       buttonText="Apply now"
       linkText="Learn more"
       direction="column"

diff --git a/packages/ui/src/components/Banner/__stories__/Image.png b/packages/ui/src/components/Banner/__stories__/Image.png
diff --git a/packages/ui/src/components/Banner/__stories__/Playground.stories.tsx b/packages/ui/src/components/Banner/__stories__/Playground.stories.tsx
@@ -1,4 +1,3 @@
-import image from './Image.png'
 import { Template } from './Template'
 
 export const Playground = Template.bind({})
@@ -7,8 +6,7 @@ Playground.args = {
   title: 'Apply to Scaleway Startup programs',
   buttonText: 'Apply now',
   linkText: 'Learn more',
-  image: <img src={image} alt="" />,
   children: [
-    'The Scaleway Startup programs offer the perfect combination of cloud credits, infrastructure advisors and startup experts to develop your business and limit your expenses.',
+    'The Scaleway Startup programs offer the perfect combination of cloud credits, advisors and startup experts to develop your business and limit your expenses.',
   ],
 }
diff --git a/packages/ui/src/components/Banner/__stories__/Sizes.stories.tsx b/packages/ui/src/components/Banner/__stories__/Sizes.stories.tsx
@@ -1,30 +1,51 @@
 import type { StoryFn } from '@storybook/react'
 import { Banner } from '..'
-import image from './Image.png'
 
 export const Sizes: StoryFn = () => (
   <>
     <Banner
       title="Apply to Scaleway Startup programs"
-      image={<img src={image} alt="" />}
       buttonText="Apply now"
       linkText="Learn more"
       size="medium"
     >
       The Scaleway Startup programs offer the perfect combination of cloud
-      credits, infrastructure advisors and startup experts to develop your
-      business and limit your expenses.
+      credits, advisors and startup experts to develop your business and limit
+      your expenses.
     </Banner>
     <Banner
       title="Apply to Scaleway Startup programs"
-      image={<img src={image} alt="" />}
       buttonText="Apply now"
       linkText="Learn more"
       size="small"
+      direction="row"
     >
       The Scaleway Startup programs offer the perfect combination of cloud
-      credits, infrastructure advisors and startup experts to develop your
-      business and limit your expenses.
+      credits, advisors and startup experts to develop your business and limit
+      your expenses.
+    </Banner>
+    <Banner
+      title="Apply to Scaleway Startup programs"
+      buttonText="Apply now"
+      linkText="Learn more"
+      size="medium"
+      variant="promotional"
+    >
+      The Scaleway Startup programs offer the perfect combination of cloud
+      credits, advisors and startup experts to develop your business and limit
+      your expenses.
+    </Banner>
+    <Banner
+      title="Apply to Scaleway Startup programs"
+      buttonText="Apply now"
+      linkText="Learn more"
+      size="small"
+      variant="promotional"
+      direction="row"
+    >
+      The Scaleway Startup programs offer the perfect combination of cloud
+      credits, advisors and startup experts to develop your business and limit
+      your expenses.
     </Banner>
   </>
 )

diff --git a/packages/ui/src/components/Banner/__stories__/Variants.stories.tsx b/packages/ui/src/components/Banner/__stories__/Variants.stories.tsx
@@ -1,12 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Banner } from '..'
-import image from './Image.png'
 
 export const Variants: StoryFn = () => (
   <>
     <Banner
       title="Apply to Scaleway Startup programs"
-      image={<img src={image} alt="" />}
       buttonText="Apply now"
       linkText="Learn more"
       variant="intro"
@@ -17,7 +15,6 @@ export const Variants: StoryFn = () => (
     </Banner>
     <Banner
       title="Apply to Scaleway Startup programs"
-      image={<img src={image} alt="" />}
       buttonText="Apply now"
       linkText="Learn more"
       variant="promotional"