Added card component

src/common/sass/components.scss

@@ -3,6 +3,7 @@
 @import '../../components/Tooltip/sass/Tooltip.scss';
 @import '../../components/Button/sass/Button';
 @import '../../components/ButtonGroup/sass/ButtonGroup';
+@import '../../components/Card/sass/Card';
 @import '../../components/Chart/sass/Chart';
 @import '../../components/Collapsible/sass/Collapsible';
 @import '../../components/CopyToClipboard/sass/CopyToClipboard';

src/common/sass/fonts.scss

@@ -1,3 +1,8 @@
+@include font-face('Inter-Bold', $font-path + 'inter/Inter-Bold');
+@include font-face('Inter-Light', $font-path + 'inter/Inter-Light');
+@include font-face('Inter-Medium', $font-path + 'inter/Inter-Medium');
+@include font-face('Inter-Regular', $font-path + 'inter/Inter-Regular');
+@include font-face('Inter-SemiBold', $font-path + 'inter/Inter-SemiBold');
 @include font-face('OpenSans-Bold', $font-path + 'OpenSans-Bold');
 @include font-face('OpenSans-SemiBold', $font-path + 'OpenSans-SemiBold');
 @include font-face('OpenSans-Regular', $font-path + 'OpenSans-Regular');

src/common/sass/variables.scss

@@ -80,7 +80,7 @@ $xxl-line-height: 30px;
 $xs-font-size: 12px;
 $sm-font-size: 14px;
 $md-font-size: 16px;
-$lg-font-size: 17px;
+$lg-font-size: 18px;
 $xl-font-size: 20px;
 $xxl-font-size: 25px;
 
@@ -151,6 +151,11 @@ $grid-breakpoints: (
   'xs' '(max-width: ' + $breakpoint-sm + ')'
 ) !default;
 
+$font-inter-light: 'Inter-Light' !default;
+$font-inter-medium: 'Inter-Medium' !default;
+$font-inter-regular: 'Inter-Regular' !default;
+$font-inter-bold: 'Inter-Bold' !default;
+
 $font-family-regular: 'OpenSans-regular' !default;
 $font-family-medium: 'OpenSans-SemiBold' !default;
 $font-family-bold: 'OpenSans-Bold' !default;

src/components/Card/CardBody.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CardBody({ children }) {
+  return (
+    <div className="tyk-card__body">
+      {children}
+    </div>
+  );
+}
+
+CardBody.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+};
+
+export default CardBody;

src/components/Card/CardFooter.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CardFooter({ children }) {
+  return (
+    <div className="tyk-card__footer">
+      {children}
+    </div>
+  );
+}
+
+CardFooter.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+};
+
+export default CardFooter;

src/components/Card/CardHeader.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CardHeader({
+  right = null,
+  children,
+}) {
+  return (
+    <div className="tyk-card__header">
+      {children && <div className="tyk-card__header-content">{children}</div>}
+      {right && <div className="tyk-card__header-right">{right}</div>}
+    </div>
+  );
+}
+
+CardHeader.propTypes = {
+  right: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+};
+
+export default CardHeader;

src/components/Card/CardSubTitle.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CardSubTitle({
+  children,
+}) {
+  return (
+    <h5 className="tyk-card__sub-title">
+      {children}
+    </h5>
+  );
+}
+
+CardSubTitle.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+};
+
+export default CardSubTitle;

src/components/Card/CardSummary.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CardSummary({
+  maxLines = 2, // accepted values: 1, 2, 3, 4, 5
+  children,
+}) {
+  return (
+    <p className={`tyk-card__summary tyk-card__summary--max-${maxLines}-lines`}>
+      {children}
+    </p>
+  );
+}
+
+CardSummary.propTypes = {
+  maxLines: PropTypes.number,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+};
+
+export default CardSummary;

src/components/Card/CardTitle.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CardTitle({
+  maxLines = 1, // accepted values: 1, 2
+  children,
+}) {
+  return (
+    <h4 className={`tyk-card__title tyk-card__title--max-${maxLines}-lines`}>
+      {children}
+    </h4>
+  );
+}
+
+CardTitle.propTypes = {
+  maxLines: PropTypes.number,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+};
+
+export default CardTitle;

src/components/Card/CardTitleGroup.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CardTitleGroup({
+  children,
+}) {
+  return (
+    <div className="tyk-card__title-group">
+      {children}
+    </div>
+  );
+}
+
+CardTitleGroup.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+};
+
+export default CardTitleGroup;

src/components/Card/CardTitleIcon.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function CardTitleIcon({
+  children,
+}) {
+  return (
+    <div className="tyk-card__title-icon">
+      {children}
+    </div>
+  );
+}
+
+CardTitleIcon.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+};
+
+export default CardTitleIcon;