sparknz / set-react Goto Github PK

Currently if you want to see your designs previewed you have too turn CORS off, otherwise fonts are off, icons are squares, other css, images, etc.

We need some way to fix this?

• Local copy?
• Proxy server?
• Running AEM Locally?

Thinking of having the api like this

import { Lock, Icon } from  '@sparknz/set-react';

<div>
  <div style={{ padding:  16, background: "black" }}>
    <Icon icon={Lock} />
    <Icon size={40} icon={Lock}/>
  </div>
  <Icon icon={Lock.base.primary.base} />
  <Icon icon={Lock.base.black} />
</div>

props:

• extends https://reakit.io/docs/box/
• icon: either Just the icon Lock or a color path on the icon Lock.base.primary.base
• size: number of px big the icon is

things to note:

• Because I don't think size on an icon should every be anything but px iv decide to use a number.
• Lock.base.black under the hood is a image uri in this case url("data:image/svg+xml,{SVGHERE});" but could be in the future it could be url("/dam/icons/${iconname}?color=${color}). the users of SET React won't need to know where the svg url goes it if its base64 encode or hosted somewhere.
• Because Lock.base.black is an SVG you can use this svg without using the Icon component, an example would be when you had a div and you wanted the svg to be the background.
  ie

const MyThing = styled.div`
  background-image: ${Lock.base.black};
`

• because the color is declare through properties on an object rather than a string ie:

  <Icon icon="Lock.base.primary.base" />

vs

<Icon icon={Lock.base.primary.base} />

the one that use the object values, gets out of the box support for

• autocomplete
• run time checking of existants
• build time checks through type script

I am unable to run yarn styleguidest-visual. It fails on my local with the following error:

This box changes the colours scheme for the children of it, it extends box https://reakit.io/docs/box/

Whats really cool about it, is if I have a black background, or primary colour it use the light theme colour for things so the buttons look different. if you use a white colored box the children will be the normal theme.

On primary

import {
    backgroundColor,
} from "../SETThemeProvider";
import Button from '../Button';
import Icon, { Lock } from '../Icon';

<Box padding="16px" backgroundColor={backgroundColor.base.primary.base}>
Im A Box
<Box>
<Button margin="8px"><Icon icon={Lock.interationPrimary}/>Primary</Button>
<Button variant="secondary" margin="8px"><Icon margin="8px" icon={Lock}/>Secondary</Button>
<Button variant="tertiary" margin="8px">Tertiary</Button>
</Box>
</Box>

On nothing

import {
    backgroundColor,
} from "../SETThemeProvider";
import Button from '../Button';
<Box padding="16px">
Im A Box
<Button margin="8px">Primary</Button>
<Button variant="secondary" margin="8px">Secondary</Button>
<Button variant="tertiary" margin="8px">Tertiary</Button>
</Box>