diff --git a/.eslintrc.js b/.eslintrc.js index 264876d2..82e9e31d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -8,12 +8,7 @@ module.exports = { ], rules: { 'import/no-unresolved': [2, { ignore: ['minerva-ui', '@docusaurus', '@theme'] }], - "import/no-unused-modules": [ - 1, - { - "unusedExports": true, - } - ], + "import/no-unused-modules": 0, 'react/display-name': 1, 'react/react-in-jsx-scope': 0, }, diff --git a/docs/pages/components/Icon.mdx b/docs/pages/components/Icon.mdx index faff3559..d498ee87 100644 --- a/docs/pages/components/Icon.mdx +++ b/docs/pages/components/Icon.mdx @@ -31,8 +31,8 @@ const customTheme = { icons: { // declare the key and component in your theme, then you can use the key as name in the component warning: Warning, - } -} + }, +}; const App = () => ( diff --git a/docs/pages/components/Menu.mdx b/docs/pages/components/Menu.mdx index bd2d4bc4..f7b108fd 100644 --- a/docs/pages/components/Menu.mdx +++ b/docs/pages/components/Menu.mdx @@ -8,7 +8,9 @@ Built on top of the [Reach UI Menu Button](https://reacttraining.com/reach-ui/me When you need to trigger actions from a dropdown (such as when clicking in the menu of a desktop application). -Do _not_ use this if you need to store a value. Use a `` component + instead. ```js diff --git a/docs/pages/components/Modal.mdx b/docs/pages/components/Modal.mdx index 1f1e3824..d56d31f0 100644 --- a/docs/pages/components/Modal.mdx +++ b/docs/pages/components/Modal.mdx @@ -14,6 +14,8 @@ import { } from 'minerva-ui'; ``` +## Basic Modal + ```jsx live () => { const { isOpen, onOpen, onClose } = useDisclosure(); @@ -22,14 +24,12 @@ import { <> - Hello World! + Modal Title - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco - deserunt aute id consequat veniam incididunt duis in sint irure nisi. - Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor - esse quis. Sunt ad dolore quis aute consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id + ante vitae eros suscipit pulvinar. - + { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + Modal Title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id + ante vitae eros suscipit pulvinar. + + + + + + + + + ); +}; +``` + +## Modal with centered content + +```jsx live +() => { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + + Modal Title + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id + ante vitae eros suscipit pulvinar. + + + + + + + + + + ); +}; +``` + +## Modal with full width button + +```jsx live +() => { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + + Modal Title + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id + ante vitae eros suscipit pulvinar. + + + + + + + + + ); +}; +``` + ## Customize `ModalOverlay` or `ModalContent` ```js @@ -77,12 +189,10 @@ import { maxWidth="80vw" overflow="hidden" > - Hello World! + Modal Title - Sit nulla est ex deserunt exercitation anim occaecat. Nostrud - ullamco deserunt aute id consequat veniam incididunt duis in sint - irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit - officia tempor esse quis. Sunt ad dolore quis aute consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + id ante vitae eros suscipit pulvinar. + diff --git a/docs/pages/examples/Forms.mdx b/docs/pages/examples/Forms.mdx index fa019274..dc6a51bd 100644 --- a/docs/pages/examples/Forms.mdx +++ b/docs/pages/examples/Forms.mdx @@ -181,64 +181,66 @@ Recreated from [Tailwind CSS example](https://tailwindcss.com/components/forms) return ( {items.map(plan => ( - - ))} - - ) + + ))} + + ); }; ``` diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index e3483988..1d7f351e 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -69,8 +69,8 @@ const customTheme = { icons: { // declare the key and component in your theme, then you can use the key as name in the component warning: Warning, - } -} + }, +}; const App = () => ( diff --git a/docs/theme/index.js b/docs/theme/index.js index 105f3772..294bb584 100644 --- a/docs/theme/index.js +++ b/docs/theme/index.js @@ -232,6 +232,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => { className="text-current p-2 -mr-2" href={config.github} target="_blank" + rel="noreferrer" > @@ -304,6 +305,7 @@ const Layout = ({ filename, config: _config, pageMap, children }) => { filepathWithName } target="_blank" + rel="noreferrer" > Edit this page on GitHub diff --git a/src/Accordion/Accordion.stories.tsx b/src/Accordion/Accordion.stories.tsx index bb10cb62..b36a09cc 100644 --- a/src/Accordion/Accordion.stories.tsx +++ b/src/Accordion/Accordion.stories.tsx @@ -1,5 +1,12 @@ import React from 'react'; -import { Accordion, AccordionButton, AccordionItem, AccordionPanel } from '.'; +import { + Accordion, + AccordionButton, + AccordionItem, + AccordionPanel, + AccordionIcon, +} from '.'; +import { Box } from '../layout'; export default { title: 'Accordion', @@ -8,6 +15,7 @@ export default { AccordionButton, AccordionItem, AccordionPanel, + AccordionIcon, }, }; @@ -15,7 +23,10 @@ export const Basic = () => { return ( - Section 1 title + + Section 1 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad @@ -24,7 +35,10 @@ export const Basic = () => { - Section 2 title + + Section 2 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad @@ -33,7 +47,10 @@ export const Basic = () => { - Section 3 (disabled) + + Section 3 (disabled) + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad @@ -48,7 +65,10 @@ export const Basic = () => { export const MultipleAndCollapsible = () => ( - Section 1 title + + Section 1 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim @@ -57,7 +77,10 @@ export const MultipleAndCollapsible = () => ( - Section 2 title + + Section 2 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim @@ -66,7 +89,10 @@ export const MultipleAndCollapsible = () => ( - Section 3 title + + Section 3 title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim diff --git a/src/Accordion/index.tsx b/src/Accordion/index.tsx index b107dd0f..18c7f9fc 100644 --- a/src/Accordion/index.tsx +++ b/src/Accordion/index.tsx @@ -8,9 +8,12 @@ import { AccordionButton as ReachAccordionButton, AccordionPanel as ReachAccordionPanel, AccordionPanelProps as ReachAccordionPanelProps, + useAccordionItemContext, } from '@reach/accordion'; import { MinervaProps, Box } from '../layout'; import Button from '../Button'; +import { ChevronDown } from '../Icon/baseIcons'; +import { useComponentStyles } from '../theme'; export interface AccordionProps extends MinervaProps { children?: React.ReactNode; @@ -26,6 +29,19 @@ export interface AccordionPanelProps extends MinervaProps { export type AllAccordionItemProps = ReachAccordionItemProps & MinervaProps; +export function AccordionIcon() { + const { isExpanded } = useAccordionItemContext(); + + return ( + + ); +} + export const AccordionItem = forwardRef(function AccordionItem( { ...props }: AllAccordionItemProps, ref @@ -37,6 +53,7 @@ export const AccordionButton = forwardRef(function AccordionButton( { children, ...props }: AccordionButtonProps, ref ) { + const componentStyles = useComponentStyles('AccordionButton'); return ( {children} - {/* TODO Need to figure out how to determine if Item is expanded and rotate icon */} - {/* */} ); }); @@ -72,8 +88,11 @@ export const AccordionPanel = forwardRef(function AccordionPanel( @@ -88,7 +107,7 @@ export const Accordion = forwardRef(function Alert( return ( = (args: Omit) => + diff --git a/src/Modal/index.tsx b/src/Modal/index.tsx index d7502b0a..f4ccedef 100644 --- a/src/Modal/index.tsx +++ b/src/Modal/index.tsx @@ -3,10 +3,8 @@ import React, { forwardRef } from 'react'; import styled from 'styled-components'; import { DialogContent, DialogOverlay, DialogProps } from '@reach/dialog'; import { MinervaProps, systemProps, Box } from '../layout'; -import Button from '../Button'; import Text from '../Text'; import { useComponentStyles } from '../theme'; -import { Close } from '../Icon/baseIcons'; type OverlayProps = DialogProps & MinervaProps; export const ModalOverlay = styled(DialogOverlay)( @@ -52,24 +50,12 @@ export const ModalHeader = forwardRef(function ModalHeader( width="100%" justifyContent="space-between" alignItems="center" - padding="1.5rem" + padding="1.375rem" + pb={0} {...componentStyles} {...props} > - - {children} - - + {children} ); }); @@ -83,9 +69,11 @@ export const ModalBody = forwardRef(function ModalBody( @@ -100,7 +88,7 @@ export const ModalFooter = forwardRef(function ModalFooter( ) { const componentStyles = useComponentStyles('ModalFooter'); return ( - + {children} ); @@ -118,13 +106,14 @@ export const ModalContent = forwardRef(function ModalContent( ref={ref} aria-label="modal" padding={0} - borderRadius="5px" + borderRadius="10px" alignItems="center" width="100%" backgroundColor="white" maxWidth="30rem" zIndex={3} margin="10vh auto" + boxShadow="10px 10px 20px rgba(0, 0, 0, 0.12)" {...componentStyles} {...props} /> diff --git a/src/theme.ts b/src/theme.ts index 1bc1aea3..677ab7d8 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -9,26 +9,27 @@ const logoColor = '#551A8B'; export interface ThemeComponent extends React.CSSProperties, PseudoBoxProps {} export interface MinervaTheme extends Theme { - Button?: React.CSSProperties; - Drawer?: React.CSSProperties; - Heading?: React.CSSProperties; - Modal?: React.CSSProperties; - ModalContent?: React.CSSProperties; - ModalBody?: React.CSSProperties; - ModalHeader?: React.CSSProperties; - ModalFooter?: React.CSSProperties; - Text?: React.CSSProperties; + AccordionButton?: ThemeComponent; + Button?: ThemeComponent; + Drawer?: ThemeComponent; + Heading?: ThemeComponent; + Modal?: ThemeComponent; + ModalContent?: ThemeComponent; + ModalBody?: ThemeComponent; + ModalHeader?: ThemeComponent; + ModalFooter?: ThemeComponent; + Text?: ThemeComponent; Input?: ThemeComponent; - Image?: React.CSSProperties; - Tooltip?: React.CSSProperties; - InputField?: React.CSSProperties; - Link?: React.CSSProperties; - Checkbox?: React.CSSProperties; - Switch?: React.CSSProperties; - Select?: React.CSSProperties; - Tag?: React.CSSProperties; - Skeleton?: React.CSSProperties; - Tabs?: React.CSSProperties; + Image?: ThemeComponent; + Tooltip?: ThemeComponent; + InputField?: ThemeComponent; + Link?: ThemeComponent; + Checkbox?: ThemeComponent; + Switch?: ThemeComponent; + Select?: ThemeComponent; + Tag?: ThemeComponent; + Skeleton?: ThemeComponent; + Tabs?: ThemeComponent; icons: any; defaultBorderColor?: string; variants?: any; @@ -43,6 +44,24 @@ breakpoints.lg = breakpoints[2]; breakpoints.xl = breakpoints[3]; const defaultTheme: MinervaTheme = { + AccordionButton: { + _hover: { + backgroundColor: '#EEEEEE', + borderRadius: '5px', + }, + _focus: { + outlineWidth: '2px', + outlineColor: '#651FFF', + borderRadius: '5px', + backgroundColor: '#EEEEEE', + }, + _active: { + outlineWidth: '2px', + outlineColor: '#651FFF', + borderRadius: '5px', + backgroundColor: '#EEEEEE', + }, + }, Button: { backgroundColor: '#fff', borderWidth: '1px', @@ -59,6 +78,7 @@ const defaultTheme: MinervaTheme = { whiteSpace: 'nowrap', verticalAlign: 'middle', fontSize: '14px', + _hover: { backgroundColor: 'red' }, lineHeight: '20px', paddingTop: '8px', paddingBottom: '8px', diff --git a/test/__snapshots__/accordion.test.tsx.snap b/test/__snapshots__/accordion.test.tsx.snap index 479df1b2..19717791 100644 --- a/test/__snapshots__/accordion.test.tsx.snap +++ b/test/__snapshots__/accordion.test.tsx.snap @@ -4,7 +4,7 @@ exports[` should render 1`] = ` .c0 { box-sizing: border-box; min-width: 0; - border-bottom-color: #e5e7eb; + border-bottom-color: #E0E0E0; border-bottom-width: 1px; } @@ -29,10 +29,10 @@ exports[` should render 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; @@ -50,42 +50,46 @@ exports[` should render 1`] = ` padding-bottom: 12px; padding-left: 16px; padding-right: 16px; - border-radius: 5px; + border-radius: 0; border-style: solid; border-color: transparent; width: 100%; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - border-top-color: #e5e7eb; - border-top-width: 1px; + border-top-color: #E0E0E0; } .c4 { box-sizing: border-box; min-width: 0; padding-left: 14px; - padding-right: 14px; + padding-right: 23%; padding-top: 14px; padding-bottom: 14px; - width: 95%; + width: 100%; + border-top-width: 1px; + border-top-color: #E0E0E0; } .c3:hover { - background-color: #f9fafb; + background-color: #EEEEEE; + border-radius: 5px; } .c3:focus { - border-color: #a4cafe; - box-shadow: 0 0 0 3px rgba(118,169,250,.45); - outline: 0; + outline-width: 2px; + outline-color: #651FFF; + border-radius: 5px; + background-color: #EEEEEE; } .c3:active, .c3[data-active=true] { - border-color: #a4cafe; - box-shadow: 0 0 0 3px rgba(118,169,250,.45); - outline: 0; + outline-width: 2px; + outline-color: #651FFF; + border-radius: 5px; + background-color: #EEEEEE; } .c3:disabled, diff --git a/test/__snapshots__/button.test.tsx.snap b/test/__snapshots__/button.test.tsx.snap index d78c0bcf..29e6623a 100644 --- a/test/__snapshots__/button.test.tsx.snap +++ b/test/__snapshots__/button.test.tsx.snap @@ -43,8 +43,17 @@ exports[`