-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3413 from bcgov/feat/3369
feat(2759): add mantine color theme
- Loading branch information
Showing
3 changed files
with
85 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,75 @@ | ||
| 'use client'; | ||
|
|
||
| import { MantineProvider, Button } from '@mantine/core'; | ||
| import React from 'react'; | ||
| import { theme } from '@/components/buttons/mantine-theme'; | ||
| import { Button } from '@mantine/core'; | ||
| import { IconPhoto, IconDownload, IconArrowRight } from '@tabler/icons-react'; | ||
| import classNames from 'classnames'; | ||
| import createClientPage from '@/core/client-page'; | ||
|
|
||
| const ButtonsPage = () => { | ||
| const buttonConfigurations = [ | ||
| { type: 'primary', label: 'Primary' }, | ||
| { type: 'secondary', label: 'Secondary' }, | ||
| { type: 'success', label: 'Success' }, | ||
| { type: 'danger', label: 'Danger' }, | ||
| { type: 'warning', label: 'Warning' }, | ||
| { type: 'info', label: 'Info' }, | ||
| ]; | ||
| const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark']; | ||
| const variants = ['filled', 'light', 'outline']; | ||
| const sizes = ['xl', 'compact-xl', 'lg', 'compact-lg', 'md', 'compact-md', 'sm', 'compact-sm', 'xs', 'compact-xs']; | ||
|
|
||
| const buttonSizes = [ | ||
| { size: 'xl', label: 'XL' }, | ||
| { size: 'lg', label: 'LG' }, | ||
| { size: 'md', label: 'MD' }, | ||
| { size: 'sm', label: 'SM' }, | ||
| { size: 'xs', label: 'XS' }, | ||
| ]; | ||
| const buttonPage = createClientPage({ | ||
| roles: ['user'], | ||
| }); | ||
| export default buttonPage(() => { | ||
| return ( | ||
| <div className={classNames('grid grid-cols-1 md:gap-4 md:py-2', `md:grid-cols-${colors.length}`)}> | ||
| {colors.map((color) => { | ||
| return ( | ||
| <div className="col-span-1" key={color}> | ||
| {variants.map((variant) => { | ||
| return sizes.map((size) => { | ||
| return ( | ||
| <div className="mb-3" key={color + variant + size}> | ||
| <div className="text-gray-800 text-sm font-bold"> | ||
| {color} - {variant} - {size} | ||
| </div> | ||
| <Button color={color} variant={variant} size={size}> | ||
| {color} | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }); | ||
| })} | ||
|
|
||
| const items = []; | ||
| for (let counter = 0; counter < 10; counter++) { | ||
| items.push( | ||
| <div style={{ padding: '20px', display: 'flex', flexWrap: 'wrap', gap: '50px' }}> | ||
| {buttonConfigurations.map((config) => ( | ||
| <div key={config.type}> | ||
| <h2>{`${config.label} Button, #${counter + 1}:`}</h2> | ||
| <br /> | ||
| {['filled', 'outline'].map((filling) => | ||
| ['button', 'disabled', 'loading'].map((variant) => ( | ||
| <React.Fragment key={variant}> | ||
| <>{`${variant} ${filling}:`}</> | ||
| <br /> | ||
| <Button | ||
| variant={filling} | ||
| color={`${config.type}.${counter}`} | ||
| disabled={variant.includes('disabled')} | ||
| loading={variant.includes('loading')} | ||
| > | ||
| {`${config.label} Button ${variant}`} | ||
| </Button> | ||
| <br /> | ||
| <></> | ||
| <br /> | ||
| </React.Fragment> | ||
| )), | ||
| )} | ||
| <div className="mb-3"> | ||
| <div className="text-gray-800 text-sm font-bold">{color} - full width</div> | ||
| <Button color={color} variant={variants[0]} fullWidth> | ||
| {color} | ||
| </Button> | ||
| </div> | ||
|
|
||
| {['filled', 'outline'].map((filling) => | ||
| buttonSizes.map((size) => ( | ||
| <React.Fragment key={size.size}> | ||
| <Button variant={filling} color={`${config.type}.${counter}`} size={size.size}> | ||
| {`${size.label} Button`} | ||
| </Button> | ||
| <br /> | ||
| <></> | ||
| <br /> | ||
| </React.Fragment> | ||
| )), | ||
| )} | ||
| </div> | ||
| ))} | ||
| </div>, | ||
| ); | ||
| } | ||
| <div className="mb-3"> | ||
| <div className="text-gray-800 text-sm font-bold">{color} - disabled</div> | ||
| <Button color={color} variant={variants[0]} disabled> | ||
| {color} | ||
| </Button> | ||
| </div> | ||
|
|
||
| return ( | ||
| <MantineProvider theme={theme}> | ||
| <h1 style={{ fontWeight: 'bold' }}> | ||
| Suggestions of easier to maintain Mantine buttons from the task description | ||
| </h1> | ||
| {items} | ||
| </MantineProvider> | ||
| ); | ||
| }; | ||
| <div className="mb-3"> | ||
| <div className="text-gray-800 text-sm font-bold">{color} - loading</div> | ||
| <Button color={color} variant={variants[0]} loading> | ||
| {color} | ||
| </Button> | ||
| </div> | ||
|
|
||
| export default ButtonsPage; | ||
| <div className="mb-3"> | ||
| <div className="text-gray-800 text-sm font-bold">{color} - left icon</div> | ||
| <Button color={color} variant={variants[0]} leftSection={<IconPhoto size={14} />}> | ||
| {color} | ||
| </Button> | ||
| </div> | ||
|
|
||
| <div className="mb-3"> | ||
| <div className="text-gray-800 text-sm font-bold">{color} - right icon</div> | ||
| <Button color={color} variant={variants[0]} rightSection={<IconDownload size={14} />}> | ||
| {color} | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters