gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(tools): add Alert component (#43835)

Browse Source 
* feat(alert): initialize component

* feat(alert): add children prop

* feat(alert): add className prop

* feat(alert): add variant prop

* feat(alert): add close button and handle onDismiss click

* feat(alert): place all alert related css in alert.css

* feat: define state color variables and use them instead of bootstrap ones

* chore: remove unused classes

* feat: replace base alert styles with tailwind classes

* feat: extract close button to separate component

* chore: remove unused css

* test: add close button tests

* refactor: use more tailwind-like approach for adding colors to theme

* refactor: use more expressive prop name for close button label

* refactor: use semantic color names

* feat: add stories with/without close button

* chore: add missing variants
This commit is contained in:
Maciek Sitkowski
2021-11-27 10:28:40 +01:00
committed by GitHub
parent 32dbf3d57c
commit 58701d511b
11 changed files with 324 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
tools/ui-components/tailwind.config.js
View File

@ -3,6 +3,7 @@ module.exports = {
darkMode: 'class',
theme: {
colors: {
transparent: 'transparent',
'dark-theme-background': 'var(--gray90)',
'light-theme-background': 'var(--gray00)',
'default-foreground-primary': 'var(--default-foreground-primary)',
@ -12,11 +13,46 @@ module.exports = {
'default-background-primary': 'var(--default-background-primary)',
'default-background-secondary': 'var(--default-background-secondary)',
'default-background-tertiary': 'var(--default-background-tertiary)',
'default-background-quaternary': 'var(--default-background-quaternary)'
'default-background-quaternary': 'var(--default-background-quaternary)',
green: {
50: 'var(--green05)',
100: 'var(--green10)',
400: 'var(--green40)',
700: 'var(--green70)',
900: 'var(--green90)'
},
blue: {
50: 'var(--blue05)',
100: 'var(--blue10)',
300: 'var(--blue30)',
500: 'var(--blue50)',
700: 'var(--blue70)',
900: 'var(--blue90)'
},
yellow: {
50: 'var(--yellow05)',
100: 'var(--yellow10)',
400: 'var(--yellow40)',
450: 'var(--yellow45)',
500: 'var(--yellow50)',
700: 'var(--yellow70)',
900: 'var(--yellow90)'
},
red: {
50: 'var(--red05)',
100: 'var(--red10)',
150: 'var(--red15)',
300: 'var(--red30)',
700: 'var(--red70)',
800: 'var(--red80)',
900: 'var(--red90)'
}
}
},
variants: {
extend: {}
extend: {
opacity: ['hover', 'focus']
}
},
plugins: []
};