Pills tabs theme #3974

Author: kkartunov

src/shared/components/Contentful/Tabs/Tabs.jsx

@@ -23,6 +23,7 @@ import tabsGroup from './themes/tabsGroup.scss';
 import tabsGroupChildren from './themes/tabsGroupChildren.scss';
 import underlineTheme from './themes/underline.scss';
 import verticalTheme from './themes/vertical.scss';
+import pillsTheme from './themes/pills.scss';
 
 export const TAB_THEMES = {
   Default: defaultTheme,
@@ -31,6 +32,7 @@ export const TAB_THEMES = {
   'Tabs Group Children': tabsGroupChildren,
   Underline: underlineTheme,
   Vertical: verticalTheme,
+  Pills: pillsTheme,
 };
 
 export default class TabsItemsLoader extends Component {

src/shared/components/Contentful/Tabs/themes/pills.scss

@@ -0,0 +1,69 @@
+@import '~styles/mixins';
+
+$text-color-black: #262628;
+
+.container {
+  @include roboto-regular;
+
+  max-width: $screen-lg;
+  margin: auto;
+}
+
+.tablist {
+  @include roboto-regular;
+
+  display: -webkit-flex; /* Safari */
+  display: flex;
+  -webkit-flex-direction: row; /* Safari */
+  flex-direction: row;
+  -webkit-justify-content: center; /* Safari */
+  justify-content: center;
+  list-style-type: none;
+  border-bottom: none;
+
+  @include xs-to-sm {
+    -webkit-flex-direction: column; /* Safari */
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.tab {
+  text-align: center;
+  margin: 0 10px;
+  color: $text-color-black;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 30px;
+  cursor: pointer;
+  border-radius: 15px;
+  padding: 0 15px;
+
+  @include xs-to-sm {
+    margin: 2px;
+  }
+
+  &:hover {
+    background: #d4d4d4;
+  }
+
+  &.selected {
+    background-color: #7f7f7f;
+    box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25);
+    color: $tc-white;
+  }
+
+  p {
+    strong {
+      font-weight: bold;
+    }
+  }
+}
+
+.tabpannel {
+  display: none;
+}
+
+.selectedTabPanel {
+  display: block;
+}

src/shared/components/Contentful/Tabs/themes/vertical.scss

@@ -9,6 +9,8 @@ $gray-border-color: #e9e9e9;
 
   display: -webkit-flex; /* Safari */
   display: flex;
+  max-width: $screen-lg;
+  margin: auto;
 }
 
 .tablist {