mirror of
https://github.com/dzeiocom/components.git
synced 2025-06-07 16:49:55 +00:00
Removed Tag element + Global Update
Signed-off-by: Florian BOUILLON <florian.bouillon@delta-wings.net>
This commit is contained in:
parent
6ff39ff3a7
commit
07dd430ffa
@ -3,19 +3,11 @@
|
||||
.header
|
||||
padding 16px
|
||||
|
||||
.delimiter
|
||||
border-bottom 2px solid grey
|
||||
padding-bottom 2px
|
||||
|
||||
.img
|
||||
border-top-left-radius 4px
|
||||
border-top-right-radius 4px
|
||||
|
||||
.title
|
||||
font-weight bold
|
||||
font-size rem(20)
|
||||
font-size rem(18)
|
||||
margin 0 0 8px
|
||||
|
||||
.subtitle
|
||||
font-size rem(14)
|
||||
font-size rem(16)
|
||||
margin 0
|
||||
|
||||
@ -11,21 +11,15 @@ export interface Props {
|
||||
title?: string
|
||||
titleColSize?: number
|
||||
subtitle?: string
|
||||
delimiter?: boolean
|
||||
titleClassName?: string
|
||||
// image?: ImageProps
|
||||
}
|
||||
|
||||
export default class BoxHeader extends React.Component<Props> {
|
||||
|
||||
public render = () => (
|
||||
<>
|
||||
{/* {this.props.image && (
|
||||
<Image {...this.props.image} />
|
||||
)} */}
|
||||
<div className={buildClassName(
|
||||
[css.header],
|
||||
[css.delimiter, this.props.delimiter]
|
||||
css.header
|
||||
)}>
|
||||
<Row>
|
||||
<Col size={this.props.titleColSize as 1 || 8}>
|
||||
|
||||
@ -1,21 +1,12 @@
|
||||
@import "../../config"
|
||||
|
||||
.box
|
||||
background white
|
||||
background $foregroundLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $foregroundDark
|
||||
border-radius 8px
|
||||
box-shadow 0px 2px 4px 0px rgba(black, .33)
|
||||
transition all $transition
|
||||
|
||||
.outline
|
||||
border 2px solid #E0E0E0
|
||||
box-shadow none
|
||||
transition border-color $transition
|
||||
|
||||
&:hover
|
||||
border-color darken(@border[2], 20%)
|
||||
|
||||
@media (prefers-color-scheme dark)
|
||||
.box
|
||||
background #202020
|
||||
.outline
|
||||
border-color #1F1F1F
|
||||
border 2px solid $grayDark
|
||||
@media (prefers-color-scheme dark)
|
||||
border-color $grayLight
|
||||
|
||||
@ -32,7 +32,6 @@ export default class Box extends React.Component<Props> {
|
||||
title={this.props.title}
|
||||
titleColSize={this.props.titleColSize}
|
||||
subtitle={this.props.subtitle}
|
||||
delimiter={this.props.delimiter}
|
||||
titleClassName={this.props.titleClassName}
|
||||
>
|
||||
{this.props.headerButtons}
|
||||
|
||||
@ -3,3 +3,11 @@
|
||||
background #E8EAF6
|
||||
padding 4px 8px
|
||||
border-radius 8px
|
||||
|
||||
.pre
|
||||
border-radius 8px
|
||||
padding 4px 8px
|
||||
background #E8EAF6
|
||||
display block
|
||||
.code
|
||||
padding 0
|
||||
|
||||
@ -19,7 +19,7 @@ export default class Code extends React.Component<Props> {
|
||||
}
|
||||
|
||||
return (
|
||||
<pre>
|
||||
<pre className={css.pre}>
|
||||
{code}
|
||||
</pre>
|
||||
)
|
||||
|
||||
@ -2,22 +2,27 @@
|
||||
|
||||
.footer
|
||||
padding 24px 16px
|
||||
background $foregroundLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $foregroundDark
|
||||
|
||||
ul
|
||||
list-type none
|
||||
li
|
||||
display inline-block
|
||||
|
||||
.animation
|
||||
animation grow 1s linear infinite
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
margin 0 2px
|
||||
|
||||
@keyframes grow
|
||||
0%
|
||||
transform scale(1)
|
||||
|
||||
40%
|
||||
transform scale(1)
|
||||
50%
|
||||
transform scale(1.2)
|
||||
60%
|
||||
transform scale(1)
|
||||
70%
|
||||
transform scale(1.2)
|
||||
95%
|
||||
transform scale(1)
|
||||
50%
|
||||
70%
|
||||
transform scale(1.2)
|
||||
|
||||
15
src/dzeio/Footer/Footer.stories.tsx
Normal file
15
src/dzeio/Footer/Footer.stories.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { Meta, Story } from '@storybook/react/types-6-0'
|
||||
import React from 'react'
|
||||
import Component from '.'
|
||||
|
||||
export default {
|
||||
title: 'DZEIO/Footer',
|
||||
component: Component,
|
||||
} as Meta
|
||||
|
||||
export const Basic: Story<any> = (args: any) => <Component {...args} />
|
||||
|
||||
let tmp = Basic.bind({})
|
||||
tmp.args = {links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}]}
|
||||
|
||||
export const Normal = tmp
|
||||
@ -1,13 +1,32 @@
|
||||
import React from 'react'
|
||||
import { Heart } from 'react-feather'
|
||||
import Link from '../Link'
|
||||
|
||||
import Text from '../Text'
|
||||
import css from './Footer.module.styl'
|
||||
|
||||
export default class Footer extends React.Component {
|
||||
interface Props {
|
||||
text?: string
|
||||
company?: string
|
||||
links?: Array<{
|
||||
path: string
|
||||
name: string
|
||||
}>
|
||||
}
|
||||
|
||||
export default class Footer extends React.Component<Props> {
|
||||
public render = () => (
|
||||
<footer className={css.footer}>
|
||||
<Text align="center">Made with <span className={css.animation}>💗</span> by Dzeio</Text>
|
||||
<Text align="center">Copyright © 2020 Dzeio. All rights reserved.</Text>
|
||||
{this.props.text ? (
|
||||
<Text align="center">{this.props.text}</Text>
|
||||
) : (
|
||||
<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
|
||||
)}
|
||||
{this.props.links && (
|
||||
<ul>{this.props.links.map((l, index) => (
|
||||
<li key={l.path}><Text>{index !== 0 && (<> - </>)}<Link href={l.path}>{l.name}</Link></Text></li>
|
||||
))}</ul>
|
||||
)}
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@ -1,3 +1,12 @@
|
||||
@import '../config'
|
||||
|
||||
.link
|
||||
color $infoLight
|
||||
@media (prefers-color-scheme dark)
|
||||
color $infoDark
|
||||
&:hover
|
||||
text-decoration underline
|
||||
|
||||
.icon
|
||||
vertical-align sub
|
||||
margin 2px
|
||||
|
||||
@ -3,22 +3,27 @@ import NextLink from 'next/link'
|
||||
import { ExternalLink } from 'react-feather'
|
||||
|
||||
import css from './Link.module.styl'
|
||||
import { buildClassName } from '../Util'
|
||||
|
||||
interface Props {
|
||||
href: string
|
||||
children?: React.ReactNode
|
||||
className?: string
|
||||
forceNewTab?: boolean
|
||||
/**
|
||||
* Override external detection system
|
||||
*/
|
||||
external?: boolean
|
||||
}
|
||||
|
||||
export default class Link extends React.Component<Props> {
|
||||
|
||||
public render() {
|
||||
if (!this.props.href.startsWith('/')) {
|
||||
const external = this.props.external ?? !this.props.href.startsWith('/')
|
||||
if (external) {
|
||||
// external link
|
||||
return (
|
||||
<a
|
||||
className={this.props.className}
|
||||
className={buildClassName(this.props.className, css.link)}
|
||||
href={this.props.href}
|
||||
rel="noreferrer nofollow"
|
||||
target="_blank"
|
||||
@ -30,9 +35,7 @@ export default class Link extends React.Component<Props> {
|
||||
return (
|
||||
<NextLink href={this.props.href}>
|
||||
<a
|
||||
className={this.props.className}
|
||||
target={this.props.forceNewTab ? '_blank' : undefined}
|
||||
rel={this.props.forceNewTab ? 'noreferrer nofollow' : undefined}
|
||||
className={buildClassName(this.props.className, css.link)}
|
||||
>{this.props.children}</a>
|
||||
</NextLink>
|
||||
)
|
||||
|
||||
@ -6,22 +6,38 @@
|
||||
width 100%
|
||||
top 0
|
||||
left 0
|
||||
background rgba(black, .3)
|
||||
background rgba($backgroundLight, .7)
|
||||
@media (prefers-color-scheme dark)
|
||||
background rgba($backgroundDark, .7)
|
||||
cursor pointer
|
||||
z-index 1000
|
||||
z-index 200
|
||||
animation fadeIn .3s ease-in-out 1 forwards
|
||||
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity 0
|
||||
to
|
||||
opacity 1
|
||||
|
||||
|
||||
.popupChild
|
||||
cursor initial
|
||||
z-index 1001
|
||||
z-index 201
|
||||
|
||||
min-width 50%
|
||||
animation popin .3s ease-in-out 1
|
||||
|
||||
@media (max-width $tablet)
|
||||
min-width 70%
|
||||
|
||||
@media (max-width $mobile)
|
||||
min-width 90%
|
||||
// min-height 50vh
|
||||
|
||||
@keyframes popin
|
||||
from
|
||||
margin-top 50px
|
||||
to
|
||||
margin-top 0
|
||||
|
||||
.exit
|
||||
cursor pointer
|
||||
|
||||
@ -1,139 +0,0 @@
|
||||
@import '../config'
|
||||
|
||||
.tag
|
||||
padding 8px 12px
|
||||
border-radius 8px
|
||||
margin-left 8px
|
||||
height 32px
|
||||
line-height 1
|
||||
display inline-block
|
||||
color white
|
||||
|
||||
background $default
|
||||
outline none
|
||||
&:hover
|
||||
background darken($default, 10%)
|
||||
&:focus
|
||||
background darken($default, 20%)
|
||||
|
||||
&.outline
|
||||
border 2px solid $default
|
||||
padding 6px 10px
|
||||
background transparent
|
||||
&:hover
|
||||
background rgba($default, .5)
|
||||
&:focus
|
||||
background rgba($default, .7)
|
||||
|
||||
.primary
|
||||
$color = $primary
|
||||
color white
|
||||
background $color
|
||||
&:hover
|
||||
background lighten($color, 30%)
|
||||
&:focus
|
||||
background lighten($color, 15%)
|
||||
|
||||
&.outline
|
||||
color black
|
||||
border 2px solid $color
|
||||
background transparent
|
||||
&:hover
|
||||
color white
|
||||
background rgba($color, .5)
|
||||
&:focus
|
||||
color white
|
||||
background rgba($color, .7)
|
||||
.secondary
|
||||
$color = $secondary
|
||||
background $color
|
||||
&:hover
|
||||
background lighten($color, 30%)
|
||||
&:focus
|
||||
background lighten($color, 15%)
|
||||
&.outline
|
||||
color white
|
||||
border 2px solid $color
|
||||
background transparent
|
||||
&:hover
|
||||
color black
|
||||
background rgba($color, .5)
|
||||
&:focus
|
||||
color black
|
||||
background rgba($color, .7)
|
||||
|
||||
.info
|
||||
$color = $info
|
||||
color white
|
||||
background $color
|
||||
&:hover
|
||||
background lighten($color, 30%)
|
||||
&:focus
|
||||
background lighten($color, 15%)
|
||||
&.outline
|
||||
color black
|
||||
border 2px solid $color
|
||||
background transparent
|
||||
&:hover
|
||||
color white
|
||||
background rgba($color, .5)
|
||||
&:focus
|
||||
color white
|
||||
background rgba($color, .7)
|
||||
|
||||
.success
|
||||
$color = $success
|
||||
color white
|
||||
background $color
|
||||
&:hover
|
||||
background lighten($color, 30%)
|
||||
&:focus
|
||||
background lighten($color, 15%)
|
||||
&.outline
|
||||
color black
|
||||
border 2px solid $color
|
||||
background transparent
|
||||
&:hover
|
||||
color white
|
||||
background rgba($color, .5)
|
||||
&:focus
|
||||
color white
|
||||
background rgba($color, .7)
|
||||
|
||||
.danger
|
||||
$color = $danger
|
||||
color white
|
||||
background $color
|
||||
&:hover
|
||||
background lighten($color, 30%)
|
||||
&:focus
|
||||
background lighten($color, 15%)
|
||||
&.outline
|
||||
color black
|
||||
border 2px solid $color
|
||||
background transparent
|
||||
&:hover
|
||||
color white
|
||||
background rgba($color, .5)
|
||||
&:focus
|
||||
color white
|
||||
background rgba($color, .7)
|
||||
|
||||
.warning
|
||||
$color = $warning
|
||||
color white
|
||||
background $color
|
||||
&:hover
|
||||
background lighten($color, 30%)
|
||||
&:focus
|
||||
background lighten($color, 15%)
|
||||
&.outline
|
||||
color black
|
||||
border 2px solid $color
|
||||
background transparent
|
||||
&:hover
|
||||
color white
|
||||
background rgba($color, .5)
|
||||
&:focus
|
||||
color white
|
||||
background rgba($color, .7)
|
||||
@ -1,17 +0,0 @@
|
||||
import { Meta } from '@storybook/react/types-6-0'
|
||||
import React from 'react'
|
||||
import Component from '.'
|
||||
|
||||
export default {
|
||||
title: 'DZEIO/Tag',
|
||||
component: Component
|
||||
} as Meta
|
||||
|
||||
export const Basic = (args: any) => {
|
||||
const content = args.content
|
||||
delete args.content
|
||||
|
||||
return (
|
||||
<Component {...args}>{content}</Component>
|
||||
)
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
import { ColorType } from '../interfaces'
|
||||
import { buildClassName } from '../Util'
|
||||
import Link from '../Link'
|
||||
|
||||
import css from './Tag.module.styl'
|
||||
import Text from '../Text'
|
||||
|
||||
interface Props {
|
||||
text: string
|
||||
color?: ColorType
|
||||
href?: string
|
||||
outline?: boolean
|
||||
}
|
||||
|
||||
export default class Tag extends React.Component<Props> {
|
||||
|
||||
public render() {
|
||||
const classes = buildClassName(
|
||||
css.tag,
|
||||
[css[this.props.color as string], this.props.color],
|
||||
[css.outline, this.props.outline]
|
||||
)
|
||||
if (!this.props.href) {
|
||||
return (
|
||||
<Text
|
||||
className={classes}
|
||||
>{this.props.text}</Text>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
href={this.props.href}
|
||||
className={classes}
|
||||
>
|
||||
{this.props.text}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@ -19,7 +19,6 @@ import Popup from './dzeio/Popup'
|
||||
import Row from './dzeio/Row'
|
||||
import SidebarContainer from './dzeio/SidebarContainer'
|
||||
import Table from './dzeio/Table'
|
||||
import Tag from './dzeio/Tag'
|
||||
import Text from './dzeio/Text'
|
||||
import * as Util from './dzeio/Util'
|
||||
|
||||
@ -50,7 +49,6 @@ export {
|
||||
Row,
|
||||
SidebarContainer,
|
||||
Table,
|
||||
Tag,
|
||||
Text,
|
||||
Util
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user