@gv-tech/design-system 0.8.0

package/src/index.ts

@@ -0,0 +1,13 @@
+import * as styles from './shared/styles';
+import * as global from './shared/global';
+import * as animation from './shared/animation';
+import * as icons from './shared/icons';
+
+export { styles, global, animation, icons };
+
+export * from './types';
+export * from './Avatar';
+export * from './Badge';
+export * from './Button';
+export * from './Icon';
+export * from './Link';

package/src/mdx.d.ts

@@ -0,0 +1,5 @@
+declare module '*.mdx' {
+  import * as React from 'react';
+  const MDXComponent: (props: Record<string, unknown>) => React.JSX.Element;
+  export default MDXComponent;
+}

package/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/shared/animation.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Type declarations for shared/animation.js
+ */
+
+import { Keyframes, FlattenSimpleInterpolation } from 'styled-components';
+
+export interface Easing {
+  rubber: string;
+}
+
+export declare const easing: Easing;
+
+export declare const rotate360: Keyframes;
+export declare const glow: Keyframes;
+export declare const float: Keyframes;
+export declare const jiggle: Keyframes;
+export declare const shake: Keyframes;
+export declare const inlineGlow: FlattenSimpleInterpolation;

package/src/shared/animation.js

@@ -0,0 +1,60 @@
+// Handy CSS animations for micro-interactions
+import { css, keyframes } from 'styled-components';
+import { color } from './styles';
+
+export const easing = {
+  rubber: 'cubic-bezier(0.175, 0.885, 0.335, 1.05)',
+};
+
+export const rotate360 = keyframes`
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+`;
+
+export const glow = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: .4; }
+`;
+
+export const float = keyframes`
+  0% { transform: translateY(1px); }
+  25% { transform: translateY(0px); }
+  50% { transform: translateY(-3px); }
+  100% { transform: translateY(1px); }
+`;
+
+export const jiggle = keyframes`
+  0%, 100% { transform:translate3d(0,0,0); }
+  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
+  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
+`;
+
+export const shake = keyframes`
+  0% { transform:rotate(-3deg) }
+  1.68421% { transform:rotate(3deg) }
+  2.10526% { transform:rotate(6deg) }
+  3.78947% { transform:rotate(-6deg) }
+  4.21053% { transform:rotate(-6deg) }
+  5.89474% { transform:rotate(6deg) }
+  6.31579% { transform:rotate(6deg) }
+  8% { transform:rotate(-6deg) }
+  8.42105% { transform:rotate(-6deg) }
+  10.10526% { transform:rotate(6deg) }
+  10.52632% { transform:rotate(6deg) }
+  12.21053% { transform:rotate(-6deg) }
+  12.63158% { transform:rotate(-6deg) }
+  14.31579% { transform:rotate(6deg) }
+  15.78947% { transform:rotate(0deg) }
+  100% { transform:rotate(0deg) }
+`;
+
+export const inlineGlow = css`
+  animation: ${glow} 1.5s ease-in-out infinite;
+  background: ${color.mediumlight};
+  color: transparent;
+  cursor: progress;
+`;

package/src/shared/global.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Type declarations for shared/global.js
+ */
+
+import { FlattenSimpleInterpolation } from 'styled-components';
+
+export declare const fontUrl: string;
+export declare const bodyStyles: FlattenSimpleInterpolation;
+export declare const GlobalStyle: import('styled-components').GlobalStyleComponent<
+  object,
+  import('styled-components').DefaultTheme
+>;

package/src/shared/global.js

@@ -0,0 +1,120 @@
+import { createGlobalStyle, css } from 'styled-components';
+import { color, typography } from './styles';
+
+export const fontUrl = 'https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900';
+
+export const bodyStyles = css`
+  font-family: ${typography.type.primary};
+  font-size: ${typography.size.s3}px;
+  color: ${color.darkest};
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-overflow-scrolling: touch;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: ${typography.weight.regular};
+    margin: 0;
+    padding: 0;
+  }
+
+  button,
+  input,
+  textarea,
+  select {
+    outline: none;
+    font-family: ${typography.type.primary};
+  }
+
+  sub,
+  sup {
+    font-size: 0.8em;
+  }
+
+  sub {
+    bottom: -0.2em;
+  }
+
+  sup {
+    top: -0.2em;
+  }
+
+  b,
+  em {
+    font-weight: ${typography.weight.bold};
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid ${color.border};
+    clear: both;
+    margin-bottom: 1.25rem;
+  }
+
+  code,
+  pre {
+    font-family: ${typography.type.code};
+    font-size: ${typography.size.s2 - 1}px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    display: inline-block;
+    padding-left: 2px;
+    padding-right: 2px;
+    vertical-align: baseline;
+
+    color: ${color.secondary};
+  }
+
+  pre {
+    line-height: 18px;
+    padding: 11px 1rem;
+    white-space: pre-wrap;
+
+    background: rgba(0, 0, 0, 0.05);
+    color: ${color.darkest};
+    border-radius: 3px;
+    margin: 1rem 0;
+  }
+
+  &.ReactModal__Body--open {
+    overflow: hidden;
+    &.hide-intercom #intercom-container {
+      display: none;
+    }
+  }
+
+  .ReactModalPortal > div {
+    opacity: 0;
+  }
+
+  .ReactModalPortal .ReactModal__Overlay {
+    transition: all 200ms ease-in;
+
+    &--after-open {
+      opacity: 1;
+    }
+    &--before-close {
+      opacity: 0;
+    }
+  }
+`;
+
+export const GlobalStyle = createGlobalStyle`
+ body {
+   ${bodyStyles}
+ }
+`;

package/src/shared/icons.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Type declarations for shared/icons.js
+ */
+
+export interface Icons {
+  mobile: string;
+  watch: string;
+  tablet: string;
+  browser: string;
+  sidebar: string;
+  sidebaralt: string;
+  bottombar: string;
+  useralt: string;
+  user: string;
+  useradd: string;
+  users: string;
+  profile: string;
+  bookmark: string;
+  bookmarkhollow: string;
+  book: string;
+  star: string;
+  starhollow: string;
+  circle: string;
+  circlehollow: string;
+  heart: string;
+  hearthollow: string;
+  facehappy: string;
+  facesad: string;
+  faceneutral: string;
+  lock: string;
+  [key: string]: string; // Allow for additional icons
+}
+
+export declare const icons: Icons;