Skip to content

Commit

Permalink
Merge pull request #24 from matheusps/feature/color-theory
Browse files Browse the repository at this point in the history
Feature/color theory
  • Loading branch information
matheusps authored Apr 16, 2019
2 parents 4e84d65 + 7835a30 commit c06a3bb
Show file tree
Hide file tree
Showing 19 changed files with 176 additions and 161 deletions.
2 changes: 1 addition & 1 deletion src/__tests__/Container.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import QuarksTheme from '../components/QuarksTheme'
describe('Container component', () => {
const component = render(
<QuarksTheme>
<Container color="primary" />
<Container />
</QuarksTheme>
)

Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/Loader.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe('Container component', () => {
const component = renderComponent({
gap: 'xl',
size: '3rem',
color: 'primary',
appearance: 'primary',
speed: 'fast',
thickness: 'md',
})
Expand Down
17 changes: 6 additions & 11 deletions src/__tests__/__snapshots__/Buttons.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
exports[`Container component should match snapshot as default 1`] = `
<DocumentFragment>
<button
class="sc-bdVaJa duWJrr"
color="primary"
class="sc-bdVaJa cboeHo"
>
Test
</button>
Expand All @@ -14,8 +13,7 @@ exports[`Container component should match snapshot as default 1`] = `
exports[`Container component should match snapshot with all measures 1`] = `
<DocumentFragment>
<button
class="sc-bdVaJa cPnXVE"
color="primary"
class="sc-bdVaJa crZiJf"
>
Test
</button>
Expand All @@ -25,8 +23,7 @@ exports[`Container component should match snapshot with all measures 1`] = `
exports[`Container component should match snapshot with all measures 2`] = `
<DocumentFragment>
<button
class="sc-bdVaJa duWJrr"
color="primary"
class="sc-bdVaJa cboeHo"
>
Test
</button>
Expand All @@ -36,8 +33,7 @@ exports[`Container component should match snapshot with all measures 2`] = `
exports[`Container component should match snapshot with all measures 3`] = `
<DocumentFragment>
<button
class="sc-bdVaJa feqUcQ"
color="primary"
class="sc-bdVaJa bhWoTL"
>
Test
</button>
Expand All @@ -47,8 +43,7 @@ exports[`Container component should match snapshot with all measures 3`] = `
exports[`Container component should match snapshot with all measures 4`] = `
<DocumentFragment>
<button
class="sc-bdVaJa eCwtkd"
color="primary"
class="sc-bdVaJa fAlvFz"
>
Test
</button>
Expand All @@ -58,7 +53,7 @@ exports[`Container component should match snapshot with all measures 4`] = `
exports[`Container component should match snapshot with all props 1`] = `
<DocumentFragment>
<button
class="sc-bdVaJa feqUcQ"
class="sc-bdVaJa bhWoTL"
color="primary"
>
Test
Expand Down
3 changes: 1 addition & 2 deletions src/__tests__/__snapshots__/Container.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
exports[`Container component should match snapshot 1`] = `
<DocumentFragment>
<div
class="sc-bdVaJa gECytu"
color="primary"
class="sc-bdVaJa iWgDvT"
/>
</DocumentFragment>
`;
27 changes: 9 additions & 18 deletions src/__tests__/__snapshots__/Loader.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ exports[`Container component should match snapshot as default 1`] = `
width="2rem"
>
<circle
class="sc-bwzfXH boYAcf"
color="primary"
class="sc-bwzfXH fUgKDt"
cx="16"
cy="16"
fill="none"
Expand All @@ -37,8 +36,7 @@ exports[`Container component should match snapshot with all measures 1`] = `
width="sm"
>
<circle
class="sc-bwzfXH boYAcf"
color="primary"
class="sc-bwzfXH fUgKDt"
cx="16"
cy="16"
fill="none"
Expand All @@ -63,8 +61,7 @@ exports[`Container component should match snapshot with all measures 2`] = `
width="md"
>
<circle
class="sc-bwzfXH boYAcf"
color="primary"
class="sc-bwzfXH fUgKDt"
cx="16"
cy="16"
fill="none"
Expand All @@ -89,8 +86,7 @@ exports[`Container component should match snapshot with all measures 3`] = `
width="lg"
>
<circle
class="sc-bwzfXH boYAcf"
color="primary"
class="sc-bwzfXH fUgKDt"
cx="16"
cy="16"
fill="none"
Expand All @@ -115,8 +111,7 @@ exports[`Container component should match snapshot with all measures 4`] = `
width="xl"
>
<circle
class="sc-bwzfXH boYAcf"
color="primary"
class="sc-bwzfXH fUgKDt"
cx="16"
cy="16"
fill="none"
Expand All @@ -141,8 +136,7 @@ exports[`Container component should match snapshot with all props 1`] = `
width="3rem"
>
<circle
class="sc-bwzfXH boYAcf"
color="primary"
class="sc-bwzfXH fUgKDt"
cx="16"
cy="16"
fill="none"
Expand All @@ -167,8 +161,7 @@ exports[`Container component should match snapshot with all speeds 1`] = `
width="2rem"
>
<circle
class="sc-bwzfXH boYAcf"
color="primary"
class="sc-bwzfXH fUgKDt"
cx="16"
cy="16"
fill="none"
Expand All @@ -193,8 +186,7 @@ exports[`Container component should match snapshot with all speeds 2`] = `
width="2rem"
>
<circle
class="sc-bwzfXH boYAcf"
color="primary"
class="sc-bwzfXH fUgKDt"
cx="16"
cy="16"
fill="none"
Expand All @@ -219,8 +211,7 @@ exports[`Container component should match snapshot with all speeds 3`] = `
width="2rem"
>
<circle
class="sc-bwzfXH boYAcf"
color="primary"
class="sc-bwzfXH fUgKDt"
cx="16"
cy="16"
fill="none"
Expand Down
18 changes: 12 additions & 6 deletions src/components/Button/Readme.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
Buttons
Sizes

```js
<Button size="sm">Stellar</Button>

<Button size="md" color="secondary">Stellar</Button>
<Button size="sm">Button SM</Button>
<Button size="md">Button MD</Button>
<Button size="lg">Button LG</Button>
<Button size="xl">Button XL</Button>
```

<Button size="lg" color="success">Stellar</Button>
Colors

<Button size="xl">Stellar</Button>
```js
<Button appearance="default">Button</Button>
<Button appearance="primary">Button</Button>
<Button appearance="success">Button</Button>
<Button appearance="warning">Button</Button>
```
16 changes: 8 additions & 8 deletions src/components/Button/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { FunctionComponent } from 'react'
import styled from 'styled-components'

import { selectTheme, getMeasure } from '../../global/helpers'
import { selectUIAppearance, getMeasure } from '../../global/helpers'

interface Props extends EnhancedWithTheme {
size?: Measure
shape?: Shape
}

const getFontSize = (measure: Measure) =>
Expand All @@ -20,8 +21,8 @@ const getPadding = (measure: Measure) =>

const StyledButton = styled.button<Props>`
background-color: ${props =>
selectTheme(props.theme, props.color, props.shade)};
color: ${props => selectTheme(props.theme, props.color, 'contrast')};
selectUIAppearance(props.theme, props.appearance, 'light')};
color: ${props => selectUIAppearance(props.theme, props.appearance, 'basic')};
font-size: ${props => getFontSize(props.size!)};
padding: ${props => getPadding(props.size!)};
Expand All @@ -38,7 +39,7 @@ const StyledButton = styled.button<Props>`
text-transform: none;
white-space: nowrap;
border: 0 none;
border-radius: 4px;
border-radius: 0.5rem;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -71,19 +72,18 @@ const StyledButton = styled.button<Props>`
const Button: FunctionComponent<Props> = ({
children,
size,
color,
appearance,
...props
}) => {
return (
<StyledButton size={size} color={color} {...props}>
<StyledButton size={size} appearance={appearance} {...props}>
{children}
</StyledButton>
)
}

Button.defaultProps = {
color: 'primary',
shade: 'default',
appearance: 'default',
size: 'md',
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Container/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ Simple example

```js
<Container>
<p>React Stellar looks awesome!</p>
<p>This quark looks cool!</p>
</Container>
```
19 changes: 13 additions & 6 deletions src/components/Container/index.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,33 @@
import React, { FunctionComponent } from 'react'
import styled from 'styled-components'
import { selectTheme } from '../../global/helpers'
import { selectTextAppearance, selectUIAppearance } from '../../global/helpers'

interface Props extends EnhancedWithTheme {}

const Div = styled.div<EnhancedWithTheme>`
background-color: ${props =>
selectTheme(props.theme, props.color, props.shade)};
selectUIAppearance(props.theme, props.appearance, props.tone)};
color: ${props => selectTextAppearance(props.theme, props.text, props.tone)};
padding: 1rem;
`

const Container: FunctionComponent<Props> = ({ color, shade, children }) => {
const Container: FunctionComponent<Props> = ({
appearance,
tone,
text,
children,
}) => {
return (
<Div color={color} shade={shade}>
<Div appearance={appearance} tone={tone} text={text}>
{children}
</Div>
)
}

Container.defaultProps = {
color: 'primary',
shade: 'lighten',
appearance: 'base',
tone: 'basic',
text: 'display',
}

export default Container
14 changes: 5 additions & 9 deletions src/components/Loader/Readme.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
Loader colors
Colors

```js

<Loader />
<Loader shade='lighten' />
<Loader shade='darken' />

<Loader color='secondary' />
<Loader color='success' />

<Loader color='primary' tone='light' />
<Loader color='primary' tone='basic' />
<Loader color='primary' tone='dark' />
<Loader color='default' />
```
5 changes: 3 additions & 2 deletions src/components/Loader/helpers/styled.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled, { keyframes } from 'styled-components'

import { selectTheme } from '../../../global/helpers'
import { selectUIAppearance } from '../../../global/helpers'

const infiniteSpin = keyframes`
from {transform: rotate(0deg)}
Expand All @@ -15,7 +15,8 @@ const Svg = styled.svg`
`

const Circle = styled.circle<EnhancedWithTheme>`
stroke: ${props => selectTheme(props.theme, props.color, props.shade)};
stroke: ${props =>
selectUIAppearance(props.theme, props.appearance, props.tone)};
`

/** @component */
Expand Down
12 changes: 6 additions & 6 deletions src/components/Loader/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ const Loader: FunctionComponent<LoaderProps> = ({
thickness,
size,
speed,
color,
shade,
appearance,
tone,
gap,
}) => (
<Svg
Expand All @@ -22,8 +22,8 @@ const Loader: FunctionComponent<LoaderProps> = ({
role="presentation"
cx={16}
cy={16}
color={color}
shade={shade}
appearance={appearance}
tone={tone}
r={14 - getThickness(thickness!) / 2}
fill="none"
strokeWidth={getThickness(thickness!)}
Expand All @@ -34,8 +34,8 @@ const Loader: FunctionComponent<LoaderProps> = ({
)

Loader.defaultProps = {
color: 'primary',
shade: 'default',
appearance: 'primary',
tone: 'basic',
size: '2rem',
thickness: 'md',
speed: 'normal',
Expand Down
12 changes: 10 additions & 2 deletions src/components/QuarksTheme/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,23 @@ import { ThemeProvider } from 'styled-components'

import { light } from './stockThemes'

interface Props {
theme?: ThemeProps
}

/**
* Wraps around Theme-provider from styled-components 💅🏻
*/
const QuarksTheme: FunctionComponent<QuarksThemeProps> = ({ children }) => {
const QuarksTheme: FunctionComponent<Props> = ({ theme, children }) => {
return (
<ThemeProvider theme={light}>
<ThemeProvider theme={theme}>
<>{children}</>
</ThemeProvider>
)
}

QuarksTheme.defaultProps = {
theme: light,
}

export default QuarksTheme
Loading

0 comments on commit c06a3bb

Please sign in to comment.