refactor storybook demo styles; rebuild storybook files

Author: based-ghost

.storybook/global-style/global-style.ts

@@ -11,6 +11,8 @@ export const GlobalStyle = createGlobalStyle`
   html {
     line-height: 1.15;
     text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
     text-rendering: optimizeLegibility;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
@@ -34,23 +36,26 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   em {
+    color: #191919;
     font-weight: 600;
   }
 
   strong {
-    color: black;
+    color: #191919;
     font-weight: 600;
     font-size: 1.025em;
   }
 
   code {
-    color: #262626;
+    color: #191919;
     font-size: 88%;
     border-radius: 3px;
     word-break: break-word;
     padding: .15em .2em .15em;
-    background-color: rgba(30, 167, 253, 0.115);
-    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+    background-color: rgba(187, 239, 253, 0.325);
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
   }
 
   ${ReactToastifyCss}

README.md

@@ -1,7 +1,7 @@
-[![npm version](https://img.shields.io/npm/v/react-functional-select.svg?style=flat-square)](https://www.npmjs.com/package/react-functional-select)
+[![NPM](https://img.shields.io/npm/v/react-functional-select.svg?style=flat-square)](https://www.npmjs.com/package/react-functional-select)
 [![npm downloads](https://img.shields.io/npm/dt/react-functional-select.svg?style=flat-square)](https://www.npmjs.com/package/react-functional-select)
 [![Issues](https://img.shields.io/github/issues/based-ghost/react-functional-select.svg?style=flat-square)](https://github.com/based-ghost/react-functional-select/issues)
-[![License](https://img.shields.io/badge/license-mit-red.svg?style=flat-square)](https://www.npmjs.com/package/react-functional-select)
+[![License](https://img.shields.io/badge/license-mit-red.svg?style=flat-square)](LICENSE)
 [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?style=flat-square)](https://github.com/styled-components/styled-components)
 
 # react-functional-select

__stories__/helpers/styled/index.ts

@@ -134,15 +134,20 @@ export const Li = styled.li`
 `;
 
 export const TextHeader = styled.span`
-  color: black;
-  font-weight: 600;
-  line-height: 1.6;
+  color: #191919;
+  line-height: 1.65;
   font-size: 1.025em;
+  border-radius: 3px;
   word-break: break-word;
-  padding: 3px 0 3px 6.4px;
+  background-color: #eef0f3;
+  padding: .15em .45em .15em;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
 
   ${MEDIA_QUERY_IS_MOBILE_XS} {
-    padding: .1em .25em .1em;
+    line-height: 1.6;
+    padding: .1em .4em .1em;
   }
 `;
 

__stories__/index.stories.tsx

@@ -106,7 +106,7 @@ export const SingleSelect = () => {
         in the dependency arrays of <code>useCallbacks</code>, <code>useEffects</code>,
         and <code>useMemos</code>. When defined in a functional component, wrap in
         a <code>useCallback</code>; when defined in a legacy class component, ensure proper
-        binding to <code>this</code>. Alternatively, if there is no dependency on any state,
+        binding to <em>this</em>. Alternatively, if there is no dependency on any state,
         you can opt to hoist functions outside of the component entirely.
       </Paragraph>
       <Paragraph>
@@ -201,9 +201,9 @@ export const MultiSelect = () => {
         <List>
           <Li>
             <TextHeader>hideSelectedOptions?: boolean</TextHeader> - Hide the
-            selected option from the menu. Default value is false, however, if
-            undefined and <code>isMulti === true</code>, then its value defaults
-            to true.
+            selected option from the menu. Default value is <em>false</em>, however,
+            if undefined and <code>isMulti</code> is <em>true</em>, then its value
+            defaults to <em>true</em>.
           </Li>
           <Li>
             <TextHeader>closeMenuOnSelect?: boolean</TextHeader> - Close the
@@ -295,7 +295,7 @@ export const Styling = () => {
   const [selectedOption, setSelectedOption] = useCallbackState<SelectedOption | null>(null);
 
   const selectWrapperStyle = { marginTop: '1rem' };
-  const noteStyle = { color: '#262626', fontSize: 'inherit', fontWeight: 700 };
+  const noteStyle = { fontSize: 'inherit', fontWeight: 700 };
   const menuItemSize = selectedOption?.value === ThemeEnum.LARGE_TEXT ? 44 : 35;
 
   const memoizedMarkupNode = useMemo(() => (
@@ -642,15 +642,15 @@ export const Filtering = () => {
         <List>
           <Li>
             <TextHeader>filterIgnoreCase?: boolean</TextHeader> - Filter ignores
-            case when matching strings. Default value is <code>true</code>.
+            case when matching strings. Default value is <em>true</em>.
           </Li>
           <Li>
             <TextHeader>filterIgnoreAccents?: boolean</TextHeader> - Filter
-            ignores accents when matching strings. Default value is <code>false</code>.
+            ignores accents when matching strings. Default value is <em>false</em>.
           </Li>
           <Li>
             <TextHeader>filterMatchFrom?: 'any' | 'start'</TextHeader> -
-            Position in source string to perform match. Default value is <code>'any'</code>.
+            Position in source string to perform match. Default value is <em>'any'</em>.
           </Li>
           <Li>
             <TextHeader>getFilterOptionString(option: MenuOption) {'=>'} string</TextHeader> -
@@ -846,7 +846,7 @@ export const Advanced = () => {
             <TextHeader>caretIcon: ReactNode | (...args: any[]) {'=>'} ReactNode</TextHeader> - A custom
             node or a function that returns a node can used for the <code>caretIcon</code> property.
             When using a function, an object containing stateful data is forwarded and can be used to style
-            your custom node accordingly. The state is <code>{'{ menuOpen, isLoading, isInvalid, isDisabled }'}</code> of
+            your custom node accordingly. The state is <em>{'{ menuOpen, isLoading, isInvalid, isDisabled }'}</em> of
             type <code>Record{'<'}string, boolean{'>'}</code>. The <code>clearIcon</code> property has an identical definition.
           </Li>
         </List>

docs/asset-manifest.json

@@ -1,6 +1,6 @@
 {
   "files": {
-    "main.js": "./main.47a09b07.iframe.bundle.js",
+    "main.js": "./main.e191ace7.iframe.bundle.js",
     "runtime~main.js": "./runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.js": "./vendors~main.31a06b8d.iframe.bundle.js",
     "vendors~main.js.map": "./vendors~main.31a06b8d.iframe.bundle.js.map",
@@ -10,6 +10,6 @@
   "entrypoints": [
     "runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.31a06b8d.iframe.bundle.js",
-    "main.47a09b07.iframe.bundle.js"
+    "main.e191ace7.iframe.bundle.js"
   ]
 }

docs/iframe.html

@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.47a09b07.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.e191ace7.iframe.bundle.js"></script></body></html>

docs/main.47a09b07.iframe.bundle.js

@@ -36,7 +36,7 @@ function scrollTo(el: Element, top: number): void {
  * @private
  */
 function isDocumentElement(el: Element | Window): boolean {
-  return el === document.documentElement || el === document.body || el === window;
+  return el === document.body || el === document.documentElement || el === window;
 }
 
 /**