@enhanced-dom/slides 0.0.2 → 0.0.5

package/components/toc.component.js

@@ -1,11 +1,11 @@
 import React from 'react';
 const Heading = ({ heading }) => (React.createElement("h2", null,
     heading,
-    React.createElement("a", { style: { display: 'none' }, id: heading.toLowerCase().replace(/\s/, '-') })));
+    React.createElement("a", { href: `#${heading.toLowerCase().replace(/\s/, '-')}`, style: { display: 'none' }, id: heading.toLowerCase().replace(/\s/, '-') }, '')));
 const TocItem = ({ heading, to, explanation }) => {
     const anchor = to !== null && to !== void 0 ? to : heading;
     return (React.createElement("li", null,
-        React.createElement("a", { href: anchor.toLowerCase().replace(/\s/, '-') },
+        React.createElement("a", { href: `#${anchor.toLowerCase().replace(/\s/, '-')}` },
             React.createElement("em", null, heading)),
         explanation ? ': ' : '',
         explanation));

package/components/wave.component.d.ts

@@ -5,6 +5,6 @@ export declare abstract class Wave extends React.PureComponent<{
     children: React.ReactNode;
 }> {
     protected abstract toColumns: (children: React.ReactElement[]) => [React.ReactElement[], React.ReactElement[]];
-    private childrenToColumns;
+    private _childrenToColumns;
     render(): jsx.JSX.Element;
 }

package/components/wave.component.js

@@ -25,13 +25,13 @@ const Sticker = ({ progress = 0, steps, variant = 'default' }) => {
 export class Wave extends React.PureComponent {
     constructor() {
         super(...arguments);
-        this.childrenToColumns = (children) => {
+        this._childrenToColumns = (children) => {
             const items = React.Children.toArray(children);
             const columns = this.toColumns(items);
             return columns;
         };
     }
     render() {
-        return jsx(BaseWave, Object.assign({ columnComponents: [Sticker, Scroller], childrenToStepColumns: this.childrenToColumns }, this.props));
+        return jsx(BaseWave, Object.assign({ columnComponents: [Sticker, Scroller], childrenToStepColumns: this._childrenToColumns }, this.props));
     }
 }

package/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "@enhanced-dom/slides",
-  "version": "0.0.2",
-  "description": "Basic building blocks for html slides",
-  "keywords": [],
-  "repository": "https://github.com/enhanced-dom/slides.git",
-  "license": "MIT",
-  "author": "CD9B4A105290E17E0948E021DF4105107C88693C59C0B891CCC08366C51AEA990902A6A156AC87D88A2FC41422A5E1C3C4071F251F19441C4516000EC25F87DF",
-  "main": "index.js",
-  "scripts": {
-    "package": "cd dist && npm pack",
-    "prebuild": "rimraf dist/*",
-    "build": "tsc -p ./tsconfig.json",
-    "postbuild": "copyfiles package.json LICENSE.md README.md dist && copyfiles -u 1 src/**/*.scss* dist",
-    "lint": "eslint src/** --fix --config eslint.config.js"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.4.0",
-    "@enhanced-dom/fontawesome": "^0.0.2",
-    "@enhanced-dom/icon": "^0.0.2",
-    "@enhanced-dom/react": "^0.0.2",
-    "@fontsource/montserrat": "^4.4.5",
-    "@fortawesome/free-regular-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@theme-ui/typography": "^0.10.0",
-    "deepmerge": "^4.2.2",
-    "gatsby-theme-blog": "^3.0.0",
-    "gatsby-theme-waves": "^0.1.6",
-    "lodash.pick": "^4.4.0",
-    "react-card-flip": "^1.1.1",
-    "theme-ui": "^0.9.1",
-    "typography-theme-wordpress-2016": "^0.16.19"
-  },
-  "devDependencies": {
-    "@enhanced-dom/lint": "^0.0.3",
-    "@types/lodash.pick": "^4.4.6",
-    "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5",
-    "copyfiles": "2.4.1",
-    "rimraf": "3.0.2",
-    "typescript": "4.2.2"
-  },
-  "engines": {
-    "node": ">=14.17.0",
-    "npm": ">=8.0.0"
-  }
-}
+{
+  "name": "@enhanced-dom/slides",
+  "version": "0.0.5",
+  "description": "Basic building blocks for html slides",
+  "keywords": [],
+  "repository": "https://github.com/enhanced-dom/slides.git",
+  "license": "MIT",
+  "author": "CD9B4A105290E17E0948E021DF4105107C88693C59C0B891CCC08366C51AEA990902A6A156AC87D88A2FC41422A5E1C3C4071F251F19441C4516000EC25F87DF",
+  "main": "index.js",
+  "dependencies": {
+    "@emotion/react": "^11.4.0",
+    "@enhanced-dom/fontawesome": "^0.0.2",
+    "@enhanced-dom/icon": "^0.0.4",
+    "@enhanced-dom/react": "^0.0.6",
+    "@fontsource/montserrat": "^4.4.5",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@theme-ui/typography": "^0.10.0",
+    "deepmerge": "^4.2.2",
+    "gatsby-theme-blog": "^3.0.0",
+    "gatsby-theme-waves": "^0.1.6",
+    "lodash.pick": "^4.4.0",
+    "react-card-flip": "^1.1.1",
+    "theme-ui": "^0.9.1",
+    "typography-theme-wordpress-2016": "^0.16.19"
+  },
+  "devDependencies": {
+    "@enhanced-dom/lint": "^0.0.7",
+    "@enhanced-dom/webpack": "^0.0.6",
+    "@types/lodash.pick": "^4.4.6",
+    "@types/react": "^17.0.8",
+    "@types/react-dom": "^17.0.5",
+    "copyfiles": "2.4.1",
+    "rimraf": "3.0.2",
+    "typescript": "4.2.2"
+  },
+  "overrides": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "theme-ui": "^0.9.1",
+    "gatsby": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=14.17.0",
+    "npm": ">=8.0.0"
+  }
+}

package/shell/scroll-top/icon.component.d.ts

@@ -7,13 +7,6 @@ declare interface IconAttributes extends Omit<React.DetailedHTMLProps<React.HTML
     style?: React.CSSProperties;
     config: IconConfigType;
 }
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            ['enhanced-dom-icon']: IconAttributes;
-        }
-    }
-}
 export declare const Icon: import("react").ComponentType<IconAttributes> & {
     renderer: import("@enhanced-dom/icon").MultiIconRenderer;
 } & Record<string, AnalyserNode>;

package/shell/scroll-top/icon.component.js

@@ -2,7 +2,7 @@ import { withReactAdapter } from '@enhanced-dom/react';
 import { IconWebComponent } from '@enhanced-dom/icon';
 import { FontawesomeIconRenderer } from '@enhanced-dom/fontawesome';
 IconWebComponent.addIconInterpreter('fa5', new FontawesomeIconRenderer());
+IconWebComponent.register();
 export const Icon = withReactAdapter({
     type: IconWebComponent,
-    name: 'enhanced-dom-icon',
 });

package/shell/scroll-top/scroll-top.component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactCardFlip from 'react-card-flip';
 import { faArrowAltCircleUp } from '@fortawesome/free-regular-svg-icons';
-import * as styles from './scroll-top.style.scss';
+import * as styles from './scroll-top.style.pcss';
 import { Icon } from './icon.component';
 const getBodyScroll = () => {
     return document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0;
@@ -12,20 +12,28 @@ const scrollToTop = () => {
         requestAnimationFrame(scrollToTop);
     }
 };
+const scrollOnKey = (e) => {
+    if (e.altKey || e.shiftKey || e.ctrlKey || e.key !== 'Enter') {
+        return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    scrollToTop();
+};
 export const ScrollTop = ({ children }) => {
     const [isFlipped, setFlipped] = React.useState(false);
-    const showButton = () => {
+    const showButton = React.useCallback(() => {
         if (getBodyScroll()) {
             setFlipped(true);
         }
-    };
-    const showFront = () => {
+    }, [setFlipped]);
+    const showFront = React.useCallback(() => {
         setFlipped(false);
-    };
+    }, [setFlipped]);
     const buttonContents = children ? (React.createElement(ReactCardFlip, { isFlipped: isFlipped, flipDirection: "horizontal" },
         React.createElement("div", null, children),
         React.createElement("div", { className: styles.brandingBack },
             React.createElement(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } })))) : (React.createElement("div", { className: styles.brandingBack },
         React.createElement(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } })));
-    return (React.createElement("div", { className: styles.branding, tabIndex: 0, role: "button", onClick: scrollToTop, onFocus: showButton, onBlur: showFront, onMouseEnter: showButton, onMouseLeave: showFront }, buttonContents));
+    return (React.createElement("div", { className: styles.branding, tabIndex: 0, role: "button", onClick: scrollToTop, onFocus: showButton, onBlur: showFront, onMouseEnter: showButton, onMouseLeave: showFront, onKeyPress: scrollOnKey }, buttonContents));
 };

package/shell/scroll-top/scroll-top.style.pcss

@@ -0,0 +1,25 @@
+.branding {
+  width: 3rem;
+  height: 3rem;
+  position: fixed;
+  bottom: 2.5rem;
+  right: 2.5rem;
+  z-index: 1;
+  outline-color: #e2001a;
+  color: #e2001a;
+
+  > div {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  &-back {
+    background-color: transparent;
+    font-size: 2rem;
+    color: #e2001a;
+    cursor: pointer;
+  }
+}

package/theme.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { toTheme } from '@theme-ui/typography';
 import typography from 'typography-theme-wordpress-2016';
 import merge from 'deepmerge';

package/shell/scroll-top/scroll-top.style.scss

@@ -1,26 +0,0 @@
-.branding {
-    width: 3rem;
-    height: 3rem;
-    position: fixed;
-    bottom: 2.5rem;
-    right: 2.5rem;
-    z-index: 1;
-    outline-color: #e2001a;
-    color: #e2001a;
-
-    > div {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-    }
-    
-    &-back {
-        background-color: transparent;
-        font-size: 2rem;
-        color: #e2001a;
-        cursor: pointer;
-    }
-    
-}