Skip to content

Commit

Permalink
feat: create shadow theme (#1004)
Browse files Browse the repository at this point in the history 
* feat: add createShadow

* fix: change Base and DialogBase shadows

* chore: update snapshots
  • Loading branch information
@ouji-miyahara
ouji-miyahara committed Oct 8, 2020
1 parent 29bde4c commit e194e01
Show file tree
Hide file tree
Showing 8 changed files with 105 additions and 8 deletions.
12 changes: 8 additions & 4 deletions src/components/Base/Base.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { ReactNode, forwardRef } from 'react'
import styled, { css } from 'styled-components'
import { Theme, useTheme } from '../../hooks/useTheme'

type Props = {
children: ReactNode
Expand All @@ -8,18 +9,21 @@ type Props = {
}

export const Base = forwardRef<HTMLDivElement, Props>(({ radius = 'm', ...props }, ref) => {
const themes = useTheme()
const radiusMap = {
s: '6px',
m: '8px',
}
return <Wrapper radius={radiusMap[radius]} ref={ref} {...props} />
return <Wrapper themes={themes} radius={radiusMap[radius]} ref={ref} {...props} />
})

const Wrapper = styled.div<{ radius: string }>`
${({ radius }) => {
const Wrapper = styled.div<{ themes: Theme; radius: string }>`
${({ themes, radius }) => {
const { shadow } = themes
return css`
border-radius: ${radius};
box-shadow: rgba(51, 51, 51, 0.3) 1px 1px 4px 0;
box-shadow: ${shadow.BASE};
background-color: #fff;
`
}}
Expand Down
11 changes: 7 additions & 4 deletions src/components/Base/DialogBase.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { ReactNode, forwardRef } from 'react'
import styled, { css } from 'styled-components'
import { Theme, useTheme } from '../../hooks/useTheme'

type Props = {
children: ReactNode
Expand All @@ -8,18 +9,20 @@ type Props = {
}

export const DialogBase = forwardRef<HTMLDivElement, Props>(({ radius = 'm', ...props }, ref) => {
const themes = useTheme()
const radiusMap = {
s: '6px',
m: '8px',
}
return <Wrapper radius={radiusMap[radius]} ref={ref} {...props} />
return <Wrapper themes={themes} radius={radiusMap[radius]} ref={ref} {...props} />
})

const Wrapper = styled.div<{ radius: string }>`
${({ radius }) => {
const Wrapper = styled.div<{ themes: Theme; radius: string }>`
${({ themes, radius }) => {
const { shadow } = themes
return css`
border-radius: ${radius};
box-shadow: rgba(51, 51, 51, 0.3) 0px 1px 10px 0;
box-shadow: ${shadow.DIALOG};
background-color: #fff;
`
}}
Expand Down
16 changes: 16 additions & 0 deletions src/components/CheckBox/__snapshots__/CheckBox.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ exports[`CheckBox should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -126,6 +130,10 @@ exports[`CheckBox should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -209,6 +217,10 @@ exports[`CheckBox should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -286,6 +298,10 @@ exports[`CheckBox should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down
24 changes: 24 additions & 0 deletions src/components/CheckBoxLabel/__snapshots__/CheckBoxLabel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -137,6 +141,10 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -217,6 +225,10 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -301,6 +313,10 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -378,6 +394,10 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -512,6 +532,10 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down
4 changes: 4 additions & 0 deletions src/components/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ exports[`StatusLabel should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down
16 changes: 16 additions & 0 deletions src/components/TabBar/__snapshots__/TabBar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ exports[`TabBar should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -132,6 +136,10 @@ exports[`TabBar should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -226,6 +234,10 @@ exports[`TabBar should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down Expand Up @@ -320,6 +332,10 @@ exports[`TabBar should be match snapshot 1`] = `
"disableColor": [Function],
"hoverColor": [Function],
},
"shadow": Object {
"BASE": "rgba(51, 51, 51, 0.15) 0 0 4px 0",
"DIALOG": "rgba(51, 51, 51, 0.3) 0 4px 10px 0",
},
"size": Object {
"font": Object {
"GRANDE": 18,
Expand Down
26 changes: 26 additions & 0 deletions src/themes/createShadow.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { merge } from '../libs/lodash'

export interface ShadowProperty {
BASE?: string
DIALOG?: string
}

export interface CreatedShadowTheme {
BASE: string
DIALOG: string
}

export const defaultShadow = {
BASE: 'rgba(51, 51, 51, 0.15) 0 0 4px 0',
DIALOG: 'rgba(51, 51, 51, 0.3) 0 4px 10px 0',
}

export const createShadow = (userShadow: ShadowProperty = {}) => {
const created: CreatedShadowTheme = merge(
{
...defaultShadow,
},
userShadow,
)
return created
}
4 changes: 4 additions & 0 deletions src/themes/createTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ import {
} from './createInteraction'
import { CreatedPaletteTheme, PaletteProperty, createPalette } from './createPalette'
import { CreatedSizeTheme, SizeProperty, createSize } from './createSize'
import { CreatedShadowTheme, ShadowProperty, createShadow } from './createShadow'
import { CreatedZindexTheme, ZIndexProperty, createZIndex } from './createZIndex'

interface ThemeProperty {
palette?: PaletteProperty
size?: SizeProperty
frame?: FrameProperty
interaction?: InteractionProperty
shadow?: ShadowProperty
zIndex?: ZIndexProperty
}

Expand All @@ -21,6 +23,7 @@ export interface CreatedTheme {
size: CreatedSizeTheme
frame: CreatedFrameTheme
interaction: CreatedInteractionTheme
shadow: CreatedShadowTheme
zIndex: CreatedZindexTheme
}

Expand All @@ -30,6 +33,7 @@ export const createTheme = (theme: ThemeProperty = {}) => {
size: createSize(theme.size || {}),
frame: createFrame(theme.frame || {}, theme.palette || {}),
interaction: createInteraction(theme.interaction || {}),
shadow: createShadow(theme.shadow || {}),
zIndex: createZIndex(theme.zIndex || {}),
}
return created
Expand Down

0 comments on commit e194e01

Please sign in to comment.