z e p h yr
play

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

Jan 26, 2024 •25 likes •205 views

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

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

  2. 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

  3. 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

  4. 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" />

  5. 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 />

  6. 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

  7. 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 .

  8. 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> ); };

  9. 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;

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

  11. 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']}

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

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

  14. 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 .

  15. 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

  16. 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 .

  17. T e st ing

  18. 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

Recommend

More recommend