Z e p h yr A dee p di v e in to our de s ign syst em a t A i r G o al - PowerPoint PPT Presentation

Z e p h yr A dee p di v e in to our de s ign syst em a t A i r

G o al s Z e p h yr i s a sour ce o f trut h f or all t eam s D e s igne rs wor k cl os e r to im p lemen t a t i o n D e v el op e rs m ov e f a st e r

O r gani z a t i o n Z e p h yr c o n su me s our m o n or e po p ackage s t he s ame w a y our w eb a pp d o e s . packages constants - C ross - p la t f or m f ou nda t i o n s ( c o l ors , typo g r a p h y ) components - S ha r ed c o m po nen ts icons - C ross - p la t f or m ic o n s web - W e p a pp zephyr - D o c u men t a t i o n s i t e

P r imi t i v e s A ll our Z e p h yr c o m po nen ts a r e b u il t o n s malle r , f ou nda t i o nal c o m po nen ts , called pr imi t i v e s . Box i s our m ost pr imi t i v e pr imi t i v e . <Box mx ="auto" bg ="jay9" />

P r imi t i v e s O t he r pr imi t i v e s ( t ha t a r e b u il t w i t h t he Box pr imi t i v e ) incl u de : <Flex /> <Grid /> <NewText />

C o m po nen ts Z e p h yr incl u de s a c o m po nen t lib r a ry t ha t ha s t hing s like : <Avatar /> <Banner /> <Popover /> <NewButton /> <ZeroState /> …and many more

C o m po nen ts L e t ' s t ake a l oo k a t a str i pp ed - d ow n v e rs i o n o f our Banner c o m po nen t t ha t s h ows h ow pr imi t i v e s a r e being us ed .

const flavorMap: { [key in BannerFlavor]: { color: ColorName; bg: ColorName } } = { danger: { color: 'white', bg: 'flamingo6' }, caution: { color: 'black', bg: 'canary3' }, success: { color: 'jay9', bg: 'peacock4' }, }; const Banner: FC<BannerProps> = ({ flavor, message, action }) => { return ( <Box as="section" p={12} {...flavorMap[flavor]}> <NewText>{message}</NewText> <NewButton variant ={14}>{action.label}</NewButton> </Box> ); };

T heme O ur gl o bal t heme incl u de s our sp ecific b r anded and ch os en c o n str ain ts us ed to c o n stru c t our a pps . theme.space[8]; theme.colors.jay5; theme.fontFamilies.display;

T heme T yp e s a r e b u il t in to our t heme !

T heme E v e ry t heme v al u e can be us ed a s a r e spo n s i v e v al u e . A dd t he v al u e s to an a rr a y w he r e t he inde x r e pr e s en ts our m o bile - fi rst b r eak po in ts , st a rt ing w i t h 0px . <Box py ={[16, 20, 32, 64]} /> <NewText variant={['ui-16', 'ui-20']}

P r ops <Box p ={4} /> === <Box padding ={4} />; <Box px ={8} /> === <Box paddingRight ={8} paddingLeftt ={8} /> <Box mt ={16} /> === <Box marginTop ={16} />

P r ops T yp e s a r e b u il t in to our props !

T yp e S c r i pt O ne f ac tor t ha t s e ts our de s ign syst em a p a rt i s t ha t b ot h our props and v al u e s a r e typ ed .

F ou nda t i o n s C o l ors T ypo g r a p h y I c o n o g r a p h y

T e st ing T e sts s h ou ld be wr i tt en us ing T e st ing L ib r a ry . C urr en t l y t e sts a r e wr i tt en us ing E n zy me , b ut w ill be up da t ed .

T e st ing

R e sour ce s Z e p h yr D ow nl o ad t he s e s lide s a s a PDF