merge main

freenowtech · Aug 1, 2023 · ddb80d7 · ddb80d7
2 parents 96270cd + 567af48
commit ddb80d7
Show file tree

Hide file tree

Showing 29 changed files with 566 additions and 359 deletions.
diff --git a/.storybook/FreenowTheme.ts b/.storybook/FreenowTheme.ts
@@ -1,17 +1,16 @@
 // .storybook/FreenowTheme.ts
 import { create } from '@storybook/theming/create';
-import logo from '../public/assets/freenow-logo.svg';
 
 export default create({
     base: 'light',
 
     // Typography
-    fontBase: '"Open Sans", sans-serif',   
+    fontBase: '"Open Sans", sans-serif',
     fontCode: 'monospace',
 
     brandTitle: 'FREENOW',
     brandUrl: 'https://wave.free-now.com/',
-    brandImage: logo,
+    brandImage: 'https://wave.free-now.com/freenow-logo.svg',
     brandTarget: '_self',
 
     //

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,7 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+<link rel="manifest" href="/site.webmanifest" />
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+<meta name="msapplication-TileColor" content="#da532c" />
+<meta name="theme-color" content="#ffffff" />
diff --git a/docs/changelog.mdx b/docs/changelog.mdx
diff --git a/docs/index.storybook.mdx b/docs/index.storybook.mdx
@@ -14,21 +14,23 @@ import FigmaLogo from './assets/figma-logo-with-text.svg';
 import GithubLogo from './assets/github-logo.svg';
 import WarningIcon from './assets/warning-icon.svg';
 
-import { ArrowRightIcon, AlertIcon, PenIcon } from '../src/icons/';
+import {
+    ArrowRightIcon,
+    AlertIcon,
+    PenIcon
+} from '../src/icons/';
 import { Box } from '../src/components/Box/Box';
 import { Button } from '../src/components/Button/Button';
 import { Card } from '../src/components/Card/Card';
 import { Headline } from '../src/components/Headline/Headline';
 import { Text } from '../src/components/Text/Text';
-import { H3, CardLink } from './components/MainPage';
 
 <Meta title="Welcome" />
 
 <style>
     {`
     .sbdocs-wrapper {
       position: relative;
-      overflow: hidden;
     }
 
     .wave-bg {
@@ -131,122 +133,147 @@ import { H3, CardLink } from './components/MainPage';
 
     </Card>
 
-    <H3>Foundations</H3>
+<Headline as="h3" mt="80px" mb="30px">
+    Foundations
+</Headline>
 
     <Box display='flex' justifyContent='space-between'>
-      <CardLink href='/?path=/docs/essentials-colors--docs'>
-        <Card level={200} className='card'>
+      <Card level={200} className='card'>
           <Box display='flex' alignItems='center' mb='24px'>
             <Box display='flex' justifyContent='center' alignItems='center' className='icon-wrapper'>
               <img src={ColorIcon} alt='color-icon' />
             </Box>
             <Headline as='h3' m='0' ml='12px'>Colors</Headline>
           </Box>
+
           <Text fontSize='14px' secondary>Convey meaning or structure, highlight various information or elements, display different states through our color palette.</Text>
-          <Button mt='24px' size='small' variant='secondary'>Explore &nbsp; <ArrowRightIcon /></Button>
-        </Card>
-      </CardLink>
+
+          <a href='/?path=/docs/essentials-colors--docs'>
+            <Button mt='24px' size='small' variant='secondary'>Explore &nbsp; <ArrowRightIcon /></Button>
+          </a>
+      </Card>
 
       {/* TODO: Create Typography docs page - Example: https://orbit.kiwi/foundation/typography */}
-      <CardLink href='/?path=/docs/components-text--docs'>
-        <Card level={200} className='card'>
+      <Card level={200} className='card'>
           <Box display='flex' alignItems='center' mb='24px'>
             <Box display='flex' justifyContent='center' alignItems='center' className='icon-wrapper'>
               <img src={TypographyIcon} alt='color-icon' />
             </Box>
             <Headline as='h3' m='0' ml='12px'>Typography</Headline>
           </Box>
+
           <Text fontSize='14px' secondary>Demonstrate the continuity of hierarchy, and importance of content on a page with our typography guidelines and styles.</Text>
-          <Button mt='24px' size='small' variant='secondary'>Explore &nbsp; <ArrowRightIcon /></Button>
-        </Card>
-      </CardLink>
 
-      <CardLink href='/?path=/docs/essentials-spaces--docs'>
-        <Card level={200} className='card'>
+          <a href='/?path=/docs/components-text--docs'>
+            <Button mt='24px' size='small' variant='secondary'>Explore &nbsp; <ArrowRightIcon /></Button>
+          </a>
+      </Card>
+
+      <Card level={200} className='card'>
           <Box display='flex' alignItems='center' mb='24px'>
             <Box display='flex' justifyContent='center' alignItems='center' className='icon-wrapper'>
               <img src={SpacingIcon} alt='color-icon' />
             </Box>
             <Headline as='h3' m='0' ml='12px'>Spacing</Headline>
           </Box>
+
           <Text fontSize='14px' secondary>Indicate hierarchical relation of elements and consistency in layout with the distance of elements using our spacing system.</Text>
-          <Button mt='24px' size='small' variant='secondary'>Explore &nbsp; <ArrowRightIcon /></Button>
-        </Card>
-      </CardLink>
+
+          <a href='/?path=/docs/essentials-spaces--docs'>
+            <Button mt='24px' size='small' variant='secondary'>Explore &nbsp; <ArrowRightIcon /></Button>
+          </a>
+      </Card>
+
     </Box>
 
-    <H3>Building blocks</H3>
+<Headline as="h3" mt="80px" mb="30px">
+    Building blocks
+</Headline>
 
     <Box display='flex' justifyContent='space-between'>
-      <CardLink href='/?path=/docs/components-button-button--docs'>
-        <Card level={200} className='card-half-width'>
+      <Card level={200} className='card-half-width'>
           <Box display='flex' alignItems='center' mb='24px'>
             <Box display='flex' justifyContent='center' alignItems='center' className='icon-wrapper'>
               <img src={ComponentsIcon} alt='color-icon' />
             </Box>
             <Headline as='h3' m='0' ml='12px'>Components</Headline>
           </Box>
+
           <Text fontSize='14px' secondary>A comprehensive collection of our reusable interface components that are ready for use in production out of the box. Utilize these components to swiftly build new experiences and benefit from prebuilt features integrated in these building blocks.</Text>
+
           <Box>
             {/* For now link to Button, in future this could link to page with grid-like preview of components like e.g. https://www.uiguideline.com/components */}
-            <Button mt='24px' size='small' variant='secondary'>Browse components &nbsp; <ArrowRightIcon /></Button>
+            <a href='/?path=/docs/components-button-button--docs'>
+              <Button mt='24px' size='small' variant='secondary'>Browse components &nbsp; <ArrowRightIcon /></Button>
+            </a>
           </Box>
-        </Card>
-      </CardLink>
+      </Card>
 
-      <CardLink href='/?path=/docs/essentials-icons-icons--docs'>
-        <Card level={200} className='card-half-width'>
+      <Card level={200} className='card-half-width'>
           <Box display='flex' alignItems='center' mb='24px'>
             <Box display='flex' justifyContent='center' alignItems='center' className='icon-wrapper'>
               <img src={MenuIcon} alt='color-icon' />
             </Box>
             <Headline as='h3' m='0' ml='12px'>Icons</Headline>
           </Box>
+
           <Text fontSize='14px' secondary>Icons are a crucial part of any design system, as they help indicate semantic meaning, draw an attention to specific actions or can be utilised in conjunction with text content to emphasise the meaning of the content, like in a button component along with label.</Text>
+
           <Box>
-            <Button mt='24px' size='small' variant='secondary'>Browse icons &nbsp; <ArrowRightIcon /></Button>
+            <a href='/?path=/docs/essentials-icons-icons--docs'>
+              <Button mt='24px' size='small' variant='secondary'>Browse icons &nbsp; <ArrowRightIcon /></Button>
+            </a>
           </Box>
-        </Card>
-      </CardLink>
+      </Card>
+
     </Box>
 
-    <H3>Support</H3>
+<Headline as="h3" mt="80px" mb="30px">
+    Support
+</Headline>
 
     <Box display='flex' justifyContent='space-between'>
-      <CardLink href='https://www.figma.com/files/934505907400252834/project/25370412/WAVE-DS' target='_blank'>
-        <Card level={300} className='card-half-width' style={{ background: '#001E3E' }}>
+      <Card level={300} className='card-half-width' style={{ background: '#001E3E' }}>
           <Box display='flex' alignItems='center' mb='24px'>
             <Box display='flex' justifyContent='center' alignItems='center' className='icon-wrapper icon-wrapper-white'>
               <img src={FigmaIcon} alt='color-icon' />
             </Box>
             <Headline as='h3' m='0' ml='12px' style={{ color: '#FFFFFF'}}>Figma Library</Headline>
           </Box>
+
           <Text fontSize='14px' style={{ color: '#F1F2F4'}} secondary>Explore the core resources of our Figma components library including the color palette, design tokens mapping, icons and flags, guidelines for contribution of new components and more.</Text>
+
           <Box mt='24px' display='flex' justifyContent='space-between'>
             {/* This link has limited access only for FREENOW employees at the moment, but could link in the future to a publicly accessible Figma UI Kit (as library itself is open-source as well, it would make sense imo) */}
-            <Button size='small' variant='secondary' inverted><PenIcon size={18} /> &nbsp; Go to Figma library</Button>
+            <a href='https://www.figma.com/files/934505907400252834/project/25370412/WAVE-DS' target='_blank'>
+              <Button size='small' variant='secondary' inverted><PenIcon size={18} /> &nbsp; Go to Figma library</Button>
+            </a>
+
             <img height='32px' src={FigmaLogo} alt='figma-logo-with-text' />
           </Box>
-        </Card>
-      </CardLink>
+      </Card>
 
-      <CardLink href='https://github.com/freenowtech/wave/issues/new/choose' target='_blank'>
-        <Card level={300} className='card-half-width' style={{ background: '#444444' }}>
+      <Card level={300} className='card-half-width' style={{ background: '#444444' }}>
           <Box display='flex' alignItems='center' mb='24px'>
             <Box display='flex' justifyContent='center' alignItems='center' className='icon-wrapper icon-wrapper-white'>
               <img src={WarningIcon} alt='color-icon' />
             </Box>
             <Headline as='h3' m='0' ml='12px' style={{ color: '#FFFFFF'}}>Bug Report</Headline>
           </Box>
+
           <Text fontSize='14px' style={{ color: '#F1F2F4'}} secondary>Did you find a bug in any of our components? No worries! Create an issue for the bug on our Github and we’ll make sure to fix it as soon as possible.</Text>
+
           <Box mt='24px' display='flex' justifyContent='space-between'>
-            <Button size='small' variant='secondary' inverted><AlertIcon size={18} /> &nbsp; Report a bug</Button>
+            <a href='https://github.com/freenowtech/wave/issues/new/choose' target='_blank'>
+              <Button size='small' variant='secondary' inverted><AlertIcon size={18} /> &nbsp; Report a bug</Button>
+            </a>
+
             <a href='https://github.com/freenowtech/wave' target='_blank'>
               <img height='32px' src={GithubLogo} alt='github-logo-with-text' />
             </a>
           </Box>
-        </Card>
-      </CardLink>
+      </Card>
+
     </Box>
 
     <Box display='flex' alignItems='center' justifyContent='center' mt='120px'>