Skip to content

Commit

Permalink
merge main
Browse files Browse the repository at this point in the history
  • Loading branch information
@nlopin
nlopin committed Aug 1, 2023
2 parents 96270cd + 567af48 commit ddb80d7
Show file tree
Hide file tree
Showing 29 changed files with 566 additions and 359 deletions.
5 changes: 2 additions & 3 deletions .storybook/FreenowTheme.ts
View file
Original file line number Diff line number Diff line change
@@ -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',

//
Expand Down
7 changes: 7 additions & 0 deletions .storybook/preview-head.html
View file
Original file line number Diff line number Diff line change
@@ -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" />
251 changes: 117 additions & 134 deletions docs/changelog.mdx
View file

Large diffs are not rendered by default.

109 changes: 68 additions & 41 deletions docs/index.storybook.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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'>
Expand Down
Loading

0 comments on commit ddb80d7

Please sign in to comment.