Skip to content
This repository has been archived by the owner on Nov 1, 2018. It is now read-only.

Commit

Permalink
🔀 Redesign the site
Browse files Browse the repository at this point in the history
Merge pull request #104 from slupjs/refactor/demo
  • Loading branch information
lucat1 authored Apr 11, 2018
2 parents 7b69b73 + b3c159e commit c6bb676
Show file tree
Hide file tree
Showing 79 changed files with 1,061 additions and 455 deletions.
2 changes: 0 additions & 2 deletions README.t.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
<demo gif>

<h1 align='center'>Slup - <package></h1>

This package contains the <package>, a Material Design Component which is part of a bigger ecosystem called [Slup](https://github.com/gejsi/material)
Expand Down
2 changes: 1 addition & 1 deletion build/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default async pkg => {

const bundle = await rollup(inputOptions as any)

await Promise.all(['es', 'cjs', 'amd', 'umd', 'iife'].map(format => {
await Promise.all(['es', 'cjs', 'amd', 'umd'].map(format => {
console.log(pkg, '* Output for', format)
bundle.write(outputOptions(format) as any)
}))
Expand Down
3 changes: 1 addition & 2 deletions build/configuration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,11 @@ export const input = entry => ({
}),
BB({
exclude: 'node_modules/**',
externalHelpers: true,
babelrc: false,
plugins: [
['inferno', { imports: true }],
'transform-object-rest-spread',
'external-helpers'
['external-helpers']
]
})
]
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"scripts": {
"bootstrap": "lerna bootstrap --loglevel=verbose",
"clean": "lerna clean --loglevel=verbose",
"prepare": "tsc build/*.ts --lib es7 --types node",
"prepare": "tsc build/all.ts build/build.ts build/configuration.ts --lib es7 --types node",
"build": "yarn prepare && node build/all && cd packages/Icons && yarn && yarn build && cd .. && yarn bootstrap",
"prepublish": "yarn prepare && node build/all && cd packages/Icons && yarn && yarn build && cd .. && yarn bootstrap"
},
Expand Down
20 changes: 8 additions & 12 deletions packages/Buttons/README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
<demo gif>

<h1 align='center'>Slup - Buttons</h1>

This package contains the Buttons, a Material Design Component which is part of a bigger ecosystem called [Slup](https://github.com/gejsi/material)

## Description
From Google's [Material Design guidelines](https://material.io/guidelines):
<blockquote>
Material buttons trigger an ink reaction on press. They may display text, imagery, or both.
<br />
Flat buttons and raised buttons are the most commonly used types.
<br />
Material buttons trigger an ink reaction on press. They may display text, imagery, or both.<br />
Flat buttons and raised buttons are the most commonly used types.<br />
A floating action button is used for a promoted action.
</blockquote>

Expand Down Expand Up @@ -50,7 +46,7 @@ export const Buttons = () =>

#### Property: 'disabled'
This property will disable the button
```html
```js
<RaisedButton disabled>Button</RaisedButton>
<FlatButton disabled>Button</FlatButton>
<Fab disabled>+</Fab>
Expand All @@ -59,7 +55,7 @@ This property will disable the button

#### Property: 'ripple' [RaisedButton, FlatButton, Fab]
This property if set to false will remove the Ripple effect
```html
```js
<RaisedButton ripple={false}>Button</RaisedButton>
<FlatButton ripple={false}>Button</FlatButton>
<Fab ripple={false}>+</Fab>
Expand All @@ -69,7 +65,7 @@ This property if set to false will remove the Ripple effect
It will set the background to the 'secondary' color of the theme for the `RaisedButton` and the `Fab`.
<br />
It will only change the color for the `IconButton`
```html
```js
<RaisedButton secondary>Button</RaisedButton>
<Fab secondary>+</Fab>
<IconButton secondary>+</IconButton>
Expand All @@ -79,20 +75,20 @@ It will only change the color for the `IconButton`
It will set the background to the 'primary' color of the theme for the `RaisedButton`.
<br />
It will set the color to the 'primary' primary color of the theme for the `FlatButton` and `IconButton`
```html
```js
<RaisedButton primary>Button</RaisedButton>
<FlatButton primary>Button</FlatButton>
<IconButton primary>+</IconButton>
```

#### Property: 'mini' [Fab]
It will reduce its size
```html
```js
<Fab mini>+</Fab>
```

#### Property: 'centerRipple' [IconButton]
This property if set to false will make the ripple appear on the clicked position instead of starting from the center
```html
```js
<IconButton centerRipple={false}>+</IconButton>
```
1 change: 1 addition & 0 deletions packages/Buttons/dist.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion packages/Buttons/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"repository": "https://github.com/slupjs/slup/tree/master/packages/Buttons",
"main": "dist/bundle.cjs.js",
"module": "dist/bundle.es.js",
"browser": "dist/bundle.iife.js",
"source": "src/index.ts",
"author": "Luca <[email protected]>, Gejsi <[email protected]>",
"license": "MIT",
Expand Down
40 changes: 26 additions & 14 deletions packages/Buttons/src/flatButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,45 @@ import { Ripple } from '@slup/ripple'
import styled, { lightTheme, rgba } from '@slup/theming'
import { ButtonBase } from './buttonBase'

const FlatBase = styled(ButtonBase)`
const setColor = (props, alpha: number) =>
props.primary
? rgba(props.theme.primary || lightTheme.primary, alpha)
: props.secondary
? rgba(props.theme.secondary || lightTheme.secondary, alpha)
: rgba(props.theme.text || lightTheme.text, alpha)


const FlatBase = styled(ButtonBase) `
transition: background 150ms linear;
background: transparent;
cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
color: ${props => props.disabled
? rgba(props.theme.text || lightTheme.text, .26)
: props.primary
? props.theme.primary || lightTheme.primary
: props.theme.text || lightTheme.text
};
cursor: pointer;
color: ${props => setColor(props, 1)};
&:disabled {
cursor: not-allowed;
color: ${props => props.theme.dark
? rgba(props.theme.text || lightTheme.text, .3)
: rgba(props.theme.text || lightTheme.text, .26)
};
}
&:hover {
background: ${props => props.disabled ? 'transparent' : 'rgba(158,158,158,0.4)'};
&:hover:not(:disabled), &:focus {
background: ${props => setColor(props, .14)};
}
`

export class FlatButton extends Component<any, any> {
render(props) {
return(
return (
<FlatBase {...props}>
{props.children}
{props.ripple == false || props.disabled
? null
: <Ripple
primary={props.primary}
{...props.rippleOptions}
/>
primary={props.primary}
secondary={props.secondary}
{...props.rippleOptions}
/>
}
</FlatBase>
)
Expand Down
5 changes: 3 additions & 2 deletions packages/Buttons/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Fab } from './fab'
import { RaisedButton } from './raisedButton'
import { IconButton } from './iconButton'
import { FlatButton } from './flatButton'

export { Fab, RaisedButton, FlatButton }
export default { Fab, RaisedButton, FlatButton }
export { Fab, RaisedButton, FlatButton, IconButton }
export default { Fab, RaisedButton, FlatButton, IconButton }
15 changes: 3 additions & 12 deletions packages/Card/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,8 @@ npm install --save @slup/card
```

## Usage
```js
import { Card } from '@slup/card'

export const Test = props =>
<Card>
<YourContent>
</Card>

```
We decided that making children components for this package wasn't needed since they are simple containers with some basic styling: the main problem is that they have too many little variations in styles and they can't be changed based on a solid criterion.
This isn't a big deal though, as shown in this full example, they can be created and used easily.
This isn't a big deal though, as shown in this example, they can be created and used easily.
```js
import styled from '@slup/theming'
import { Card } from '@slup/card'
Expand Down Expand Up @@ -54,7 +45,7 @@ const CardActions = styled.div`
`

export const Test = props =>
<Card style="width: 380px">
<Card style='width: 380px'>
<CardHeader>
<Typography headline>Title goes here</Typography>
<Typography caption>Subtitle here</Typography>
Expand All @@ -79,7 +70,7 @@ This property will increase the shadow of the `Card`
```

#### Property: 'hoverable'
This property will increase the shadow of the `Card` only when the cursor is over it
This property will increase the shadow of the `Card` only when the card is hovered
```js
<Card hoverable />
```
1 change: 1 addition & 0 deletions packages/Card/dist.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion packages/Card/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"repository": "https://github.com/slupjs/slup/tree/master/packages/Card",
"main": "dist/bundle.cjs.js",
"module": "dist/bundle.es.js",
"browser": "dist/bundle.iife.js",
"source": "src/index.ts",
"author": "Luca <[email protected]>, Gejsi <[email protected]>",
"license": "MIT",
Expand Down
1 change: 1 addition & 0 deletions packages/Common/dist.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit c6bb676

Please sign in to comment.