@pareto-engineering/design-system 2.0.0-alpha.50 → 2.0.0-alpha.53

package/src/stories/a/{SiteContext.stories.jsx → AppContext.stories.jsx}

@@ -1,13 +1,13 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 
-import { SiteContextProvider } from 'ui'
+import { AppContextProvider } from 'ui'
 
 export default {
-  title        :'a/SiteContext',
-  component    :SiteContextProvider,
+  title        :'a/AppContext',
+  component    :AppContextProvider,
   subcomponents:{
-    // Item:SiteContext.Item
+    // Item:AppContext.Item
   },
   decorators:[
     // storyfn => <div className="">{ storyfn() }</div>,
@@ -18,9 +18,9 @@ export default {
 }
 
 export const Base = () => (
-  <SiteContextProvider
+  <AppContextProvider
     config={{
-      SITE:{
+      APP:{
         NAME         :'Pareto',
         CANONICAL    :'https://hellopareto.com',
         SUPPORT_EMAIL:'support@hellopareto.com',
@@ -37,6 +37,6 @@ export const Base = () => (
     }}
 
   >
-    Sample SiteContext
-  </SiteContextProvider>
+    Sample AppContext
+  </AppContextProvider>
 )

package/src/stories/b/SocialMediaButton.stories.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { SiteContextProvider, SocialMediaButton } from 'ui'
+import { AppContextProvider, SocialMediaButton } from 'ui'
 
 export default {
   title        :'b/SocialMediaButton',
@@ -18,7 +18,7 @@ export default {
 }
 
 export const Base = () => (
-  <SiteContextProvider
+  <AppContextProvider
     config={{
       SITE:{
         NAME         :'Pareto',
@@ -42,13 +42,13 @@ export const Base = () => (
     <SocialMediaButton type="twitter" />
     <SocialMediaButton type="instagram" />
     <SocialMediaButton type="linkedin" />
-  </SiteContextProvider>
+  </AppContextProvider>
 )
 
 export const Transparent = () => (
-  <SiteContextProvider
+  <AppContextProvider
     config={{
-      SITE:{
+      APP:{
         NAME         :'Pareto',
         CANONICAL    :'https://hellopareto.com',
         SUPPORT_EMAIL:'support@hellopareto.com',
@@ -69,5 +69,5 @@ export const Transparent = () => (
     <SocialMediaButton type="twitter" isTransparent />
     <SocialMediaButton type="instagram" isTransparent />
     <SocialMediaButton type="linkedin" isTransparent />
-  </SiteContextProvider>
+  </AppContextProvider>
 )

package/src/stories/b/ThemeSelector.stories.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useSite, SiteContextProvider, ThemeSelector } from 'ui'
+import { useApp, AppContextProvider, ThemeSelector } from 'ui'
 
 export default {
   title        :'b/ThemeSelector',
@@ -11,15 +11,15 @@ export default {
   },
   decorators:[
     (storyfn) => (
-      <SiteContextProvider config={{
-        SITE:{
+      <AppContextProvider config={{
+        APP:{
           NAME     :'name of my site',
           CANONICAL:'https://mysite.com',
         },
       }}
       >
         { storyfn() }
-      </SiteContextProvider>
+      </AppContextProvider>
     ),
   ],
   argTypes:{
@@ -29,7 +29,7 @@ export default {
 
 export const Base = () => {
   const ChildCo = () => {
-    const { userTheme } = useSite()
+    const { userTheme } = useApp()
     return (
       <div
         className={

package/src/stories/c/ContentSlides.stories.jsx

@@ -3,12 +3,12 @@ import * as React from 'react'
 
 import {
   ContentSlides,
-  SiteContextProvider,
+  AppContextProvider,
   Shapes,
   useContentSlides,
   Title,
   Logo,
-  useSite,
+  useApp,
 } from 'ui'
 
 // import Router from 'stories/utils/Router'
@@ -26,15 +26,15 @@ export default {
   decorators:[
     (storyfn) => <Router>{ storyfn() }</Router>,
     (storyfn) => (
-      <SiteContextProvider config={{
-        SITE:{
+      <AppContextProvider config={{
+        APP:{
           NAME     :'name of my site',
           CANONICAL:'https://mysite.com',
         },
       }}
       >
         { storyfn() }
-      </SiteContextProvider>
+      </AppContextProvider>
     ),
   ],
   argTypes:{
@@ -44,7 +44,7 @@ export default {
 
 export const Base = () => {
   const Main = () => {
-    const { userTheme } = useSite()
+    const { userTheme } = useApp()
 
     const steps = [
       {

package/src/ui/a/{SiteContext → AppContext}/ContextProvider.jsx

@@ -24,7 +24,7 @@ const reducer = (state, action) => {
   }
 }
 
-const SiteContextProvider = ({
+const AppContextProvider = ({
   children,
   initialTheme,
   config,
@@ -48,7 +48,7 @@ const SiteContextProvider = ({
   )
 }
 
-SiteContextProvider.propTypes = {
+AppContextProvider.propTypes = {
   /**
    *  The children JSX
    */
@@ -60,10 +60,10 @@ SiteContextProvider.propTypes = {
   initialTheme:PropTypes.string,
 
   /**
-   * A dictionnary containing settings and preferences to be used site-wide
+   * A dictionnary containing settings and preferences to be used application-wide
    */
   config:PropTypes.shape({
-    SITE:PropTypes.shape({
+    APP:PropTypes.shape({
       NAME         :PropTypes.string.isRequired,
       CANONICAL    :PropTypes.string.isRequired,
       SUPPORT_EMAIL:PropTypes.string,
@@ -74,16 +74,17 @@ SiteContextProvider.propTypes = {
       INSTAGRAM:PropTypes.string,
       YOUTUBE  :PropTypes.string,
     }),
+    CONSTANTS:PropTypes.shape({}),
   }).isRequired,
 
   /**
-   * Site context initial state
+   * Application context initial state
    */
   initialState:PropTypes.objectOf(PropTypes.string),
 }
 
-SiteContextProvider.defaultProps = {
+AppContextProvider.defaultProps = {
   initialState:{},
 }
 
-export default SiteContextProvider
+export default AppContextProvider

package/src/ui/a/AppContext/index.js

@@ -0,0 +1,5 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+export { default as AppContext } from './Context'
+export { default as AppContextProvider } from './ContextProvider'
+export { default as useApp } from './useApp'
+export { default as useTheme } from './useTheme'

package/src/ui/a/index.js

@@ -2,11 +2,11 @@ export { SVG } from './SVG'
 export { DashboardNavbar } from './DashboardNavbar'
 export { IconList } from './IconList'
 export {
-  SiteContext,
-  SiteContextProvider,
-  useSite,
+  AppContext,
+  AppContextProvider,
+  useApp,
   useTheme,
-} from './SiteContext'
+} from './AppContext'
 export { ProgressBar } from './ProgressBar'
 export { TeamInfo } from './TeamInfo'
 export { AnimatedCounter } from './AnimatedCounter'

package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
-import { useSite } from 'ui/a'
+import { useApp } from 'ui/a'
 
 const helmetMap = [
   {
@@ -163,7 +163,7 @@ const PageHelmet = ({
   ...props
 }) => {
   // const intl = useIntl()
-  const context = useSite()
+  const context = useApp()
 
   const HelmetContent = useMemo(() => helmetMap.reduce(
     /* eslint-disable no-unused-vars -- TODO add test or ssr mode */

package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem'
 
-import { useSite } from 'ui/a'
+import { useApp } from 'ui/a'
 
 // Local Definitions
 
@@ -37,7 +37,7 @@ const defaultsMap = {
 /**
  * This is the component description.
  * This component takes `y` as the default color and `x` as the hover color.
- * This components needs to be wrapped within a `SiteContextProvider`.
+ * This components needs to be wrapped within a `AppContextProvider`.
  */
 const SocialMediaButton = ({
   id,
@@ -50,14 +50,14 @@ const SocialMediaButton = ({
   isTransparent,
   ...otherProps
 }) => {
-  const siteContext = useSite()
+  const applicationContext = useApp()
 
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
   const content = type && defaultsMap[type]
-  const href = link || siteContext?.SOCIAL?.[content.link]
+  const href = link || applicationContext?.SOCIAL?.[content.link]
 
   return (
     <a href={href} target="_blank" rel="noreferrer">

package/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -4,7 +4,7 @@ import { useLayoutEffect, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem'
 
-import { useSite } from 'ui/a'
+import { useApp } from 'ui/a'
 
 // Local Definitions
 
@@ -27,7 +27,7 @@ const ThemeSelector = ({
   const {
     userTheme,
     setPreferredTheme,
-  } = useSite()
+  } = useApp()
 
   useLayoutEffect(() => {
     import('./styles.scss')

package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx

@@ -31,17 +31,25 @@ const SocialMediaShareButton = ({
 
   const isServer = typeof window === 'undefined'
 
-  const title = isServer ? '' : document.title
   const link = isServer ? '' : window.location.href
 
+  // We can pass additional text to the social media share buttons such as the title.
+  // See commented code below for an example on how to pass text.
+  // It is important we encode the text with the encodeURIComponent function to pass
+  // special characters (such as |, &, etc.) properly through the URL.
+
+  // const title = isServer ? '' : encodeURIComponent(document.title)
+
   const defaultsMap = {
     facebook:{
       icon:'f',
-      link:`https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
+      link:`https://www.facebook.com/sharer/sharer.php?u=${link}`,
+      // link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
     },
     twitter:{
       icon:'t',
-      link:`https://twitter.com/intent/tweet?text=${title}&url=${link}`,
+      link:`https://twitter.com/intent/tweet?url=${link}`,
+      // link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`,
     },
   }
 

package/dist/cjs/a/GradientBackground/GradientBackground.js

@@ -1,140 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'gradient-background';
-/**
- * This is the component description.
- */
-
-var GradientBackground = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    pin,
-    shape,
-    height,
-    width // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      '--pin': pin,
-      '--height': height,
-      '--width': width
-    }) // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "shapes"
-  }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
-    className: "triangle"
-  }), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "half-ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "up"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "down"
-  })), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipse"
-  }), shape === 'diamonds' && /*#__PURE__*/React.createElement("div", {
-    className: "diamonds"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "top-right"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom-right"
-  })), shape === 'rectangles' && /*#__PURE__*/React.createElement("div", {
-    className: "rectangles"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "top"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "center"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom"
-  })), shape === 'half-ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "half-ellipse"
-  }), shape === 'circle' && /*#__PURE__*/React.createElement("div", {
-    className: "circle"
-  }), shape === 'half-circle' && /*#__PURE__*/React.createElement("div", {
-    className: "half-circle"
-  }), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "first"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "second"
-  })), shape === 'spiral' && /*#__PURE__*/React.createElement("div", {
-    className: "spiral"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-one"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-two"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-three"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-four"
-  }))));
-};
-
-GradientBackground.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   * Where to pin the shapes
-   */
-  pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The options of a shape to use
-   */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles'])
-};
-GradientBackground.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
-};
-var _default = GradientBackground;
-exports.default = _default;

package/dist/cjs/a/GradientBackground/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "GradientBackground", {
-  enumerable: true,
-  get: function get() {
-    return _GradientBackground.default;
-  }
-});
-
-var _GradientBackground = _interopRequireDefault(require("./GradientBackground"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }