Add small screen styles

[MAILPOET-2775]

assets/css/src/components/_tabs.scss

@@ -1,4 +1,5 @@
-.mailpoet-tab {
+.mailpoet-tab,
+.mailpoet-tabs-title {
   align-items: center;
   background: none;
   border: 1px solid transparent;
@@ -50,6 +51,10 @@
   }
 }
 
+.mailpoet-tabs-title {
+  display: none;
+}
+
 .mailpoet-tab-content {
   background: $color-white;
   border: 1px solid $color-tertiary-light;
@@ -59,3 +64,46 @@
   > *:first-child { margin-top: 0; }
   > *:last-child { margin-bottom: 0; }
 }
+
+@include respond-to(small-screen) {
+  .mailpoet-tabs-title {
+    background: $color-white;
+    border: 1px solid $color-tertiary-light;
+    border-bottom: none;
+    border-radius: 0;
+    display: flex;
+    font-weight: bold;
+    justify-content: flex-start;
+    margin-bottom: 0;
+    width: 100%;
+
+    &:after {
+      content: '▾';
+      margin-left: auto;
+    }
+
+    .mailpoet-tabs-is-open > &:after {
+      transform: rotate(180deg);
+    }
+  }
+
+  .mailpoet-tab {
+    background: $color-white;
+    border: 1px solid $color-tertiary-light;
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .mailpoet-tabs-wrapper {
+    display: none;
+
+    .mailpoet-tabs-is-open > & {
+      display: block;
+    }
+  }
+
+  .mailpoet-tab-content {
+    border-radius: 0;
+  }
+}

assets/js/src/common/tabs/tabs.tsx

@@ -50,10 +50,12 @@ const Tabs = ({
   children,
 }: Props) => {
   const [activeTab, setActiveTab] = useState(activeKey);
+  const [isOpen, setIsOpen] = useState(false);
 
   // when activeKey changed by a prop let's reflect that in the state
   useEffect(() => {
     if (activeTab !== activeKey) {
+      setIsOpen(false);
       setActiveTab(activeKey);
       onSwitch(activeKey);
     }
@@ -63,14 +65,27 @@ const Tabs = ({
   const activeChild = getActiveChild(activeTab, validChildren);
 
   const onClick = (tabKey: string) => {
+    setIsOpen(false);
     if (tabKey !== activeTab) {
       setActiveTab(tabKey);
       onSwitch(tabKey);
     }
   };
 
+  const title = (props) => (
+    <>
+      {props.iconStart}
+      {props.title && <span>{props.title}</span>}
+      {props.iconEnd}
+    </>
+  );
+
   return (
-    <div className="mailpoet-tabs">
+    <div className={classnames('mailpoet-tabs', { 'mailpoet-tabs-is-open': isOpen })}>
+      <button type="button" className="mailpoet-tabs-title" onClick={() => setIsOpen(!isOpen)}>
+        {title(activeChild.props)}
+      </button>
+
       <div className="mailpoet-tabs-wrapper">
         {
           validChildren.map((child: React.ReactElement) => (
@@ -81,9 +96,7 @@ const Tabs = ({
               role="tab"
               onClick={() => onClick(child.key.toString())}
             >
-              {child.props.iconStart}
-              {child.props.title && <span>{child.props.title}</span>}
-              {child.props.iconEnd}
+              {title(child.props)}
             </button>
           ))
         }