updates the css branch with the latest changes

src/common/css/components.css

@@ -2,6 +2,7 @@
 @import '../../components/Accordion/Accordion.css';
 @import '../../components/Button/Button.css';
 @import '../../components/ButtonGroup/ButtonGroup.css';
+@import '../../components/Card/Card.css';
 @import '../../components/Chart/Chart.css';
 @import '../../components/Collapsible/Collapsible.css';
 @import '../../components/CopyToClipboard/CopyToClipboard.css';

src/common/css/fonts.css

@@ -1,3 +1,43 @@
+@font-face {
+  font-family: Inter-Bold;
+  src: url('../fonts/inter/Inter-Bold.woff2') format('woff2'),
+       url('../fonts/inter/Inter-Bold.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Inter-Light;
+  src: url('../fonts/inter/Inter-Light.woff2') format('woff2'),
+       url('../fonts/inter/Inter-Light.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Inter-Medium;
+  src: url('../fonts/inter/Inter-Medium.woff2') format('woff2'),
+       url('../fonts/inter/Inter-Medium.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Inter-Regular;
+  src: url('../fonts/inter/Inter-Regular.woff2') format('woff2'),
+       url('../fonts/inter/Inter-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Inter-SemiBold;
+  src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2'),
+       url('../fonts/inter/Inter-SemiBold.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
 @font-face {
   font-family: OpenSans-Bold;
   src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),

src/common/css/variables.css

@@ -41,10 +41,10 @@
   --xl-line-height: 24px;
   --xxl-line-height: 30px;
 
-  --xs-font-size: 12px;
+  --xs-font-size: 13px;
   --sm-font-size: 14px;
   --md-font-size: 16px;
-  --lg-font-size: 17px;
+  --lg-font-size: 18px;
   --xl-font-size: 20px;
   --xxl-font-size: 25px;
 
@@ -67,6 +67,11 @@
   --breakpoint-md: 1024px;
   --breakpoint-lg: 1248px;
 
+  --font-inter-light: 'Inter-Light';
+  --font-inter-medium: 'Inter-Medium';
+  --font-inter-regular: 'Inter-Regular';
+  --font-inter-bold: 'Inter-Bold';
+
   --font-family-regular: 'OpenSans-regular';
   --font-family-medium: 'OpenSans-SemiBold';
   --font-family-bold: 'OpenSans-Bold';

src/components/Card/Card.css

@@ -0,0 +1,125 @@
+.tyk-card {
+  background-color: white;
+  border: 1px solid var(--color-background-base);
+  border-radius: 8px;
+  box-shadow: 2px 2px 3px var(--color-background-base);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.tyk-card__header {
+  align-items: center;
+  display: flex;
+  font-family: var(--font-inter-regular);
+  font-size: var(--sm-font-size);
+  padding-block: var(--spacing-base) 0;
+  padding-inline: var(--spacing-base);
+}
+
+.tyk-card__header-right {
+  margin-inline-start: auto;
+}
+
+.tyk-card__title-group {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+
+  .tyk-card__title-icon {
+    align-items: center;
+    display: flex;
+    inline-size: 42px;
+    block-size: 42px;
+    justify-content: center;
+    margin-inline-end: 10px;
+    grid-row: span 2;
+  }
+}
+
+.tyk-card__title {
+  font-family: var(--font-inter-bold);
+  font-size: var(--lg-font-size);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 0;
+  text-overflow: ellipsis;
+}
+
+.tyk-card__title--max-1-lines {
+  -webkit-line-clamp: 1;
+}
+
+.tyk-card__title--max-2-lines {
+  -webkit-line-clamp: 2;
+}
+
+.tyk-card__sub-title {
+  font-family: var(--font-inter-medium);
+  font-size: var(--xs-font-size);
+  margin: 0;
+}
+
+.tyk-card__title-group + .tyk-card__summary,
+.tyk-card__sub-title + .tyk-card__summary,
+.tyk-card__title + .tyk-card__summary {
+  margin-block-start: var(--spacing-sm);
+}
+
+.tyk-card__summary {
+  color: var(--text-color);
+  font-family: var(--font-inter-regular);
+  font-size: var(--sm-font-size);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 0;
+  text-overflow: ellipsis;
+}
+
+.tyk-card__summary--max-1-lines {
+  -webkit-line-clamp: 1;
+}
+
+.tyk-card__summary--max-2-lines {
+  -webkit-line-clamp: 2;
+}
+
+.tyk-card__summary--max-3-lines {
+  -webkit-line-clamp: 3;
+}
+
+.tyk-card__summary--max-4-lines {
+  -webkit-line-clamp: 4;
+}
+
+.tyk-card__summary--max-5-lines {
+  -webkit-line-clamp: 5;
+}
+
+.tyk-card__body {
+  display: flex;
+  flex: 1 0 auto;
+  flex-grow: 1;
+  padding: var(--spacing-base);
+}
+
+.tyk-card__body--align-top {
+  align-items: flex-start;
+}
+
+.tyk-card__body--align-center {
+  align-items: center;
+}
+
+.tyk-card__body--align-bottom {
+  align-items: flex-end;
+}
+
+.tyk-card__footer {
+  display: flex;
+  justify-content: end;
+  border-block-start: 1px solid var(--color-background-base);
+  padding: var(--spacing-base);
+}

src/components/Card/Card.test.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import Card from './index';
+
+describe('Card', () => {
+  const cssClasses = {
+    card: 'tyk-card',
+    header: 'tyk-card__header',
+    body: 'tyk-card__body',
+    footer: 'tyk-card__footer',
+    title: 'tyk-card__title',
+    titleGroup: 'tyk-card__title-group',
+    subtitle: 'tyk-card__sub-title',
+    icon: 'tyk-card__title-icon',
+    summary: 'tyk-card__summary',
+  };
+
+  const selectors = {
+    card: `.${cssClasses.card}`,
+    header: `.${cssClasses.header}`,
+    body: `.${cssClasses.body}`,
+    footer: `.${cssClasses.footer}`,
+    title: `.${cssClasses.title}`,
+    titleGroup: `.${cssClasses.titleGroup}`,
+    subtitle: `.${cssClasses.subtitle}`,
+    icon: `.${cssClasses.icon}`,
+    summary: `.${cssClasses.summary}`,
+  };
+
+  it('should render the card', () => {
+    cy.mount(
+      <Card>
+        <Card.Header>
+          prct
+        </Card.Header>
+        <Card.Body>
+          <Card.Title>prct title</Card.Title>
+          <Card.SubTitle>prct subTitle</Card.SubTitle>
+          <Card.Summary>prct description</Card.Summary>
+        </Card.Body>
+        <Card.Footer>
+          prct Footer
+        </Card.Footer>
+      </Card>,
+    )
+      .get(selectors.card)
+      .should('exist')
+      .and('have.class', cssClasses.card)
+      .as('card');
+
+    cy.get('@card')
+      .find(selectors.header)
+      .should('exist');
+
+    cy.get('@card')
+      .find(selectors.body)
+      .should('exist');
+
+    cy.get('@card')
+      .find(selectors.title)
+      .should('exist');
+
+    cy.get('@card')
+      .find(selectors.subtitle)
+      .should('exist');
+
+    cy.get('@card')
+      .find(selectors.summary)
+      .should('exist');
+
+    cy.get('@card')
+      .find(selectors.footer)
+      .should('exist');
+  });
+
+  it('should display just one line of the tile, when the title is too long', () => {
+    cy.mount(
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            prct title prct title prct title prct title prct title prct title prct title
+          </Card.Title>
+        </Card.Body>
+      </Card>,
+    )
+      .get(selectors.title)
+      .should('have.css', 'display', '-webkit-box')
+      .and('have.css', '-webkit-line-clamp', '1')
+      .and('have.css', '-webkit-box-orient', 'vertical');
+  });
+
+  it('Title can be configured to be displayed on 2 lines', () => {
+    cy.mount(
+      <Card>
+        <Card.Body>
+          <Card.Title maxLines={2}>
+            prct title prct title prct title prct title prct title prct title prct title
+          </Card.Title>
+        </Card.Body>
+      </Card>,
+    )
+      .get(selectors.title)
+      .should('have.css', 'display', '-webkit-box')
+      .and('have.css', '-webkit-line-clamp', '2')
+      .and('have.css', '-webkit-box-orient', 'vertical');
+  });
+
+  it('should display just two lines of the summary, when the summary is too long', () => {
+    cy.mount(
+      <Card>
+        <Card.Body>
+          <Card.Summary>
+            prct title prct title prct title prct title prct title prct title prct title
+          </Card.Summary>
+        </Card.Body>
+      </Card>,
+    )
+      .get(selectors.summary)
+      .should('have.css', 'display', '-webkit-box')
+      .and('have.css', '-webkit-line-clamp', '2')
+      .and('have.css', '-webkit-box-orient', 'vertical');
+  });
+
+  it('Summary can be configured to be displayed up to 5 lines', () => {
+    cy.mount(
+      <Card>
+        <Card.Body>
+          <Card.Summary maxLines={3}>
+            prct title prct title prct title prct title prct title prct title prct title
+            prct title prct title prct title prct title prct title prct title prct title
+            prct title prct title prct title prct title prct title prct title prct title
+            prct title prct title prct title prct title prct title prct title prct title
+          </Card.Summary>
+        </Card.Body>
+      </Card>,
+    )
+      .get(selectors.summary)
+      .should('have.css', 'display', '-webkit-box')
+      .and('have.css', '-webkit-line-clamp', '3')
+      .and('have.css', '-webkit-box-orient', 'vertical');
+  });
+
+  it('Displays content on the right hand side of the header', () => {
+    cy.mount(
+      <Card>
+        <Card.Header right={<div className="custom-content">prct</div>} />
+      </Card>,
+    )
+      .get(selectors.header)
+      .find('.custom-content')
+      .should('exist');
+  });
+
+  it('should render with customClassName', () => {
+    const customClass = 'card-custom-class';
+    cy.mount(<Card className={customClass} />)
+      .get(selectors.card)
+      .should('exist')
+      .and('have.class', cssClasses.card)
+      .and('have.class', customClass);
+  });
+});

src/components/Card/CardBody.js

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