@pareto-engineering/design-system 2.0.0-alpha.34 → 2.0.0-alpha.37

package/dist/cjs/a/Shapes/styles.scss

@@ -125,7 +125,7 @@ $default-shapes-opacity:.8;
     }
 
     .circle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      background-image: linear-gradient(var(--dark-y), var(--light-y));
       clip-path: circle(50% at 50% 50%);
       height: var(--shape-height, #{$default-circle-height});
       opacity: $default-shapes-opacity;

package/dist/cjs/c/{SiteFooter/SiteFooter.js → SocialMediaShareButton/SocialMediaShareButton.js}

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
-var _common = require("./common");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
@@ -21,31 +19,50 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // Local Definitions
 var baseClassName = _bem.default.base;
-var componentClassName = 'site-footer';
+var componentClassName = 'social-media-share-button';
 /**
  * This is the component description.
  */
 
-var SiteFooter = _ref => {
+var SocialMediaShareButton = _ref => {
   var {
     id,
     className: userClassName,
     style,
-    children // ...otherProps
-
+    icon,
+    // children,
+    type,
+    color
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  return /*#__PURE__*/React.createElement("footer", {
+  var isServer = typeof window === 'undefined';
+  var title = isServer ? '' : document.title;
+  var link = isServer ? '' : window.location.href;
+  var defaultsMap = {
+    facebook: {
+      icon: 'f',
+      link: "https://www.facebook.com/sharer/sharer.php?u=".concat(link, "&quote=").concat(title)
+    },
+    twitter: {
+      icon: 't',
+      link: "https://twitter.com/intent/tweet?text=".concat(title, "&url=").concat(link)
+    }
+  };
+  return /*#__PURE__*/React.createElement("a", {
+    href: defaultsMap[type].link,
+    target: "_blank",
+    rel: "noreferrer",
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, children);
+    className: [baseClassName, componentClassName, "x-".concat(color || type), userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, icon || defaultsMap[type].icon));
 };
 
-SiteFooter.propTypes = {
+SocialMediaShareButton.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -64,10 +81,25 @@ SiteFooter.propTypes = {
   /**
    *  The children JSX
    */
-  children: _propTypes.default.node
+  // children:PropTypes.node,
+
+  /**
+   * The Social Media to Target.
+   * If blank, you need to provide both an icon letter (from glyphter) and a link.
+   */
+  type: _propTypes.default.oneOf(['twitter', 'facebook']),
+
+  /**
+   * The icon of the social media
+   */
+  icon: _propTypes.default.string,
+
+  /**
+   * The button color
+   */
+  color: _propTypes.default.string
 };
-SiteFooter.defaultProps = {// someProp:false
+SocialMediaShareButton.defaultProps = {// someProp:false
 };
-SiteFooter.Section = _common.Section;
-var _default = SiteFooter;
+var _default = SocialMediaShareButton;
 exports.default = _default;

package/dist/cjs/c/SocialMediaShareButton/index.js

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

package/dist/cjs/c/SocialMediaShareButton/styles.scss

@@ -0,0 +1,39 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-dimensions: 2em;
+$mobile-dimensions: 2.75em;
+
+.#{bem.$base}.social-media-share-button{
+
+  > button {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: 3em;
+    color: var(--x);
+    cursor: pointer;
+    font-family: "icons", sans-serif;
+    height: $default-dimensions;
+    transition: all .3s;
+    width: $default-dimensions;
+
+    @include mixins.media($to:$sm-md) {
+      height: $mobile-dimensions;
+      width: $mobile-dimensions;
+    }
+
+    &:hover {
+      background: var(--x);
+      color: var(--on-x);
+    }
+
+    &:focus, &:active {
+      background: var(--light-x);
+      color: var(--on-x);
+    }
+  }
+}

package/dist/cjs/c/index.js

@@ -27,9 +27,17 @@ Object.defineProperty(exports, "Shortener", {
     return _Shortener.Shortener;
   }
 });
+Object.defineProperty(exports, "SocialMediaShareButton", {
+  enumerable: true,
+  get: function get() {
+    return _SocialMediaShareButton.SocialMediaShareButton;
+  }
+});
 
 var _Hero = require("./Hero");
 
 var _ContentSlides = require("./ContentSlides");
 
-var _Shortener = require("./Shortener");
+var _Shortener = require("./Shortener");
+
+var _SocialMediaShareButton = require("./SocialMediaShareButton");

package/dist/es/a/Shapes/styles.scss

@@ -125,7 +125,7 @@ $default-shapes-opacity:.8;
     }
 
     .circle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      background-image: linear-gradient(var(--dark-y), var(--light-y));
       clip-path: circle(50% at 50% 50%);
       height: var(--shape-height, #{$default-circle-height});
       opacity: $default-shapes-opacity;

package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -0,0 +1,89 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'social-media-share-button';
+/**
+ * This is the component description.
+ */
+
+const SocialMediaShareButton = ({
+  id,
+  className: userClassName,
+  style,
+  icon,
+  // children,
+  type,
+  color
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const isServer = typeof window === 'undefined';
+  const title = isServer ? '' : document.title;
+  const link = isServer ? '' : window.location.href;
+  const defaultsMap = {
+    facebook: {
+      icon: 'f',
+      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}`
+    }
+  };
+  return /*#__PURE__*/React.createElement("a", {
+    href: defaultsMap[type].link,
+    target: "_blank",
+    rel: "noreferrer",
+    id: id,
+    className: [baseClassName, componentClassName, `x-${color || type}`, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, icon || defaultsMap[type].icon));
+};
+
+SocialMediaShareButton.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  // children:PropTypes.node,
+
+  /**
+   * The Social Media to Target.
+   * If blank, you need to provide both an icon letter (from glyphter) and a link.
+   */
+  type: PropTypes.oneOf(['twitter', 'facebook']),
+
+  /**
+   * The icon of the social media
+   */
+  icon: PropTypes.string,
+
+  /**
+   * The button color
+   */
+  color: PropTypes.string
+};
+SocialMediaShareButton.defaultProps = {// someProp:false
+};
+export default SocialMediaShareButton;

package/dist/es/c/SocialMediaShareButton/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as SocialMediaShareButton } from "./SocialMediaShareButton";

package/dist/es/c/SocialMediaShareButton/styles.scss

@@ -0,0 +1,39 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-dimensions: 2em;
+$mobile-dimensions: 2.75em;
+
+.#{bem.$base}.social-media-share-button{
+
+  > button {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: 3em;
+    color: var(--x);
+    cursor: pointer;
+    font-family: "icons", sans-serif;
+    height: $default-dimensions;
+    transition: all .3s;
+    width: $default-dimensions;
+
+    @include mixins.media($to:$sm-md) {
+      height: $mobile-dimensions;
+      width: $mobile-dimensions;
+    }
+
+    &:hover {
+      background: var(--x);
+      color: var(--on-x);
+    }
+
+    &:focus, &:active {
+      background: var(--light-x);
+      color: var(--on-x);
+    }
+  }
+}

package/dist/es/c/index.js

@@ -1,3 +1,4 @@
 export { Hero } from "./Hero";
 export { ContentSlides, useContentSlides } from "./ContentSlides";
-export { Shortener } from "./Shortener";
+export { Shortener } from "./Shortener";
+export { SocialMediaShareButton } from "./SocialMediaShareButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.34",
+  "version": "2.0.0-alpha.37",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -9242,6 +9242,35 @@ exports[`Storyshots c/Shortener Base 1`] = `
 </span>
 `;
 
+exports[`Storyshots c/SocialMediaShareButton Base 1`] = `
+<div>
+  <a
+    className="base social-media-share-button x-facebook"
+    href="https://www.facebook.com/sharer/sharer.php?u=http://localhost/#/welcome&quote="
+    rel="noreferrer"
+    target="_blank"
+  >
+    <button
+      type="button"
+    >
+      f
+    </button>
+  </a>
+  <a
+    className="base social-media-share-button x-twitter"
+    href="https://twitter.com/intent/tweet?text=&url=http://localhost/#/welcome"
+    rel="noreferrer"
+    target="_blank"
+  >
+    <button
+      type="button"
+    >
+      t
+    </button>
+  </a>
+</div>
+`;
+
 exports[`Storyshots f/FormInput Base 1`] = `
 <form
   action="#"

package/src/stories/c/SocialMediaShareButton.stories.jsx

@@ -0,0 +1,25 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { SocialMediaShareButton } from 'ui'
+import Router from '../utils/Router'
+
+export default {
+  title        :'c/SocialMediaShareButton',
+  component    :SocialMediaShareButton,
+  subcomponents:{
+    // Item:SocialMediaShareButton.Item
+  },
+  decorators:[
+    (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <div>
+    <SocialMediaShareButton type="facebook" />
+    <SocialMediaShareButton type="twitter" />
+  </div>
+)

package/src/ui/a/Shapes/styles.scss

@@ -125,7 +125,7 @@ $default-shapes-opacity:.8;
     }
 
     .circle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      background-image: linear-gradient(var(--dark-y), var(--light-y));
       clip-path: circle(50% at 50% 50%);
       height: var(--shape-height, #{$default-circle-height});
       opacity: $default-shapes-opacity;

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

@@ -0,0 +1,113 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'social-media-share-button'
+
+/**
+ * This is the component description.
+ */
+const SocialMediaShareButton = ({
+  id,
+  className:userClassName,
+  style,
+  icon,
+  // children,
+  type,
+  color,
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const isServer = typeof window === 'undefined'
+
+  const title = isServer ? '' : document.title
+  const link = isServer ? '' : window.location.href
+
+  const defaultsMap = {
+    facebook:{
+      icon:'f',
+      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}`,
+    },
+  }
+
+  return (
+    <a
+      href={defaultsMap[type].link}
+      target="_blank"
+      rel="noreferrer"
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        `x-${color || type}`,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <button type="button">
+        { icon || defaultsMap[type].icon }
+      </button>
+    </a>
+  )
+}
+
+SocialMediaShareButton.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  // children:PropTypes.node,
+
+  /**
+   * The Social Media to Target.
+   * If blank, you need to provide both an icon letter (from glyphter) and a link.
+   */
+  type:PropTypes.oneOf(['twitter', 'facebook']),
+
+  /**
+   * The icon of the social media
+   */
+  icon:PropTypes.string,
+
+  /**
+   * The button color
+   */
+  color:PropTypes.string,
+}
+
+SocialMediaShareButton.defaultProps = {
+  // someProp:false
+}
+
+export default SocialMediaShareButton

package/src/ui/c/SocialMediaShareButton/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as SocialMediaShareButton } from './SocialMediaShareButton'

package/src/ui/c/SocialMediaShareButton/styles.scss

@@ -0,0 +1,39 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-dimensions: 2em;
+$mobile-dimensions: 2.75em;
+
+.#{bem.$base}.social-media-share-button{
+
+  > button {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: 3em;
+    color: var(--x);
+    cursor: pointer;
+    font-family: "icons", sans-serif;
+    height: $default-dimensions;
+    transition: all .3s;
+    width: $default-dimensions;
+
+    @include mixins.media($to:$sm-md) {
+      height: $mobile-dimensions;
+      width: $mobile-dimensions;
+    }
+
+    &:hover {
+      background: var(--x);
+      color: var(--on-x);
+    }
+
+    &:focus, &:active {
+      background: var(--light-x);
+      color: var(--on-x);
+    }
+  }
+}

package/src/ui/c/index.js

@@ -1,3 +1,4 @@
 export { Hero } from './Hero'
 export { ContentSlides, useContentSlides } from './ContentSlides'
 export { Shortener } from './Shortener'
+export { SocialMediaShareButton } from './SocialMediaShareButton'