add brand theme

.storybook/preview.js

@@ -29,11 +29,11 @@ const GlobalStyle = createGlobalStyle`
       cursor: pointer;
       border-radius: 0.5rem;
       padding: 0 1.5rem;
-      background-color: #095d25;
-      color: #fff;
+      background-color: #580B9E;
+      color: #FFFFFF;
       height: 3.5rem;
       &:hover {
-        background-color: #126e2f;
+        background-color: #9552D4;
       }
     }
     

.storybook/theme.js

@@ -3,5 +3,35 @@ import { create } from '@storybook/theming/create';
 export default create({
   base: 'light',
 
-  brandTitle: 'react-popover',
+  colorPrimary: '#580B9E',
+  colorSecondary: '#14B9E4',
+
+  // UI
+  appBg: '#F9F2FF',
+  appContentBg: '#F9F2FF',
+  appBorderColor: '#B4B4B4',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Roboto", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#14113C',
+  textInverseColor: '#FFFFFF',
+
+  // Toolbar default and active colors
+  barTextColor: '#FFFFFF',
+  barSelectedColor: '#F9F2FF',
+  barBg: '#580B9E',
+
+  // Form colors
+  inputBg: '#FFFFFF',
+  inputBorder: '#B4B4B4',
+  inputTextColor: '#313131',
+  inputBorderRadius: 5,
+
+  brandTitle: 'IDUI',
+  brandUrl: 'https://github.com/id-ui',
+  brandImage: 'https://avatars0.githubusercontent.com/u/75687767?s=200&v=4',
 });

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 id-ui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,10 @@
 # Popover React Component
 
-[![NPM](https://img.shields.io/npm/v/@idui/react-popover.svg)](https://www.npmjs.com/package/@idui/react-popover) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Coverage Status](https://coveralls.io/repos/github/id-ui/react-popover/badge.svg?branch=main)](https://coveralls.io/github/id-ui/react-popover?branch=main)
+[![NPM](https://img.shields.io/npm/v/@idui/react-popover.svg)](https://www.npmjs.com/package/@idui/react-popover/)
+[![Size](https://img.shields.io/bundlephobia/min/@idui/react-popover)](https://www.npmjs.com/package/@idui/react-popover)
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![Coverage Status](https://coveralls.io/repos/github/id-ui/react-popover/badge.svg?branch=main)](https://coveralls.io/github/id-ui/react-popover?branch=main)
+[![LICENSE](https://img.shields.io/github/license/id-ui/react-popover)](https://github.com/id-ui/react-popover/blob/main/LICENSE)
 
 - [Docs](https://id-ui.github.io/react-popover/?path=/docs/popover--playground)
 - [Playground](https://id-ui.github.io/react-popover/?path=/story/popover--playground)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idui/react-popover",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "React Popover Component",
   "author": "kaprisa57@gmail.com",
   "license": "MIT",
@@ -54,12 +54,12 @@
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
-    "@storybook/addon-essentials": "^6.1.10",
-    "@storybook/addon-storysource": "^6.1.10",
-    "@storybook/addons": "^6.1.10",
-    "@storybook/react": "^6.1.10",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-storysource": "^6.1.11",
+    "@storybook/addons": "^6.1.11",
+    "@storybook/react": "^6.1.11",
     "@storybook/storybook-deployer": "^2.8.7",
-    "@storybook/theming": "^6.1.10",
+    "@storybook/theming": "^6.1.11",
     "@testing-library/dom": "^7.26.6",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.1.2",

src/components/Popover/Popover.jsx

@@ -1,23 +1,23 @@
 import React, {
+  Fragment,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
-  Fragment,
-  useEffect,
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import { AnimatePresence } from 'framer-motion';
 import {
-  useOpen,
-  usePosition,
-  useHandlers,
+  useArrow,
   useContentDimensions,
   useElementMotion,
   useGlobalListener,
-  useArrow,
+  useHandlers,
+  useOpen,
+  usePosition,
 } from './hooks';
 import { Container, Inner } from './styled';
 import placementPropsGetters from './placementsConfig';

src/components/Popover/popover.stories.js

@@ -401,7 +401,7 @@ export function draggable(props) {
         height: 300,
         padding: 10,
         borderRadius: 30,
-        backgroundColor: '#eaeaea',
+        backgroundColor: '#14B9E4',
       }}
       id={dragContainerId}
     >
@@ -416,8 +416,8 @@ export function draggable(props) {
             width: 100,
             height: 100,
             borderRadius: 30,
-            backgroundColor: '#247c79',
-            color: '#fff',
+            backgroundColor: '#580B9E',
+            color: '#FFFFFF',
             cursor: 'grab',
             display: 'flex',
             alignItems: 'center',
@@ -567,14 +567,14 @@ export function popoverWithCustomSimpleAnimation(props) {
 }
 
 const CustomPopover = styled(Popover)`
-  background-color: aquamarine;
+  background-color: #14b9e4;
   border-radius: 30px;
-  border: 2px solid black;
+  border: 2px solid #14113c;
   box-shadow: none;
   &:before {
     // arrow
-    border-left-color: black;
-    border-bottom-color: black;
+    border-left-color: #14113c;
+    border-bottom-color: #14113c;
     box-shadow: none;
   }
 `;