feat(oui-tabs): add tabs component

packages/oui-tabs/_normalize.less

@@ -0,0 +1,4 @@
+oui-tabs {
+  &,
+  &-item { display: block; }
+}

packages/oui-tabs/_variables.less

@@ -0,0 +1,32 @@
+@import '../oui/_settings';
+@import "../oui-color/_constants";
+@import '../oui-typography/_constants';
+
+@oui-tabs-tab-height: rem-calc(40);
+@oui-tabs-tab-height_active: rem-calc(45);
+@oui-tabs-tab-padding: 0 rem-calc(30);
+@oui-tabs-tab-padding_active: 0 rem-calc(30) rem-calc(6) rem-calc(30);
+@oui-tabs-tab-padding_mobile: 0 rem-calc(20);
+@oui-tabs-tab-spacing: rem-calc(4);
+@oui-tabs-tab-font-color: @oui-color-sapphire;
+@oui-tabs-tab-font-size: rem-calc(16);
+@oui-tabs-tab-font-weight: @oui-font-semibold;
+@oui-tabs-tab-border: @oui-color-silver 1px solid;
+@oui-tabs-tab-border-radius: @oui-global-base-radius;
+@oui-tabs-tab-box-shadow: inset 0 2px 1px 0 @oui-color-nurse;
+@oui-tabs-tab-box-shadow_hover: none;
+@oui-tabs-tab-box-shadow_active: none;
+@oui-tabs-tab-background-color: #fff;
+@oui-tabs-tab-background-color_hover: @oui-color-concrete;
+@oui-tabs-tab-background-color_active: #fff;
+
+@oui-tabs-icon-size: rem-calc(12);
+@oui-tabs-icon-spacing: rem-calc(10);
+@oui-tabs-icon-color: @oui-color-silver;
+@oui-tabs-icon-color_checked: @oui-color-atlantis;
+
+@oui-tabs-tabpanel-padding: rem-calc(25) rem-calc(30);
+@oui-tabs-tabpanel-padding_mobile: rem-calc(10) rem-calc(20) rem-calc(20) rem-calc(20);
+@oui-tabs-tabpanel-border: @oui-tabs-tab-border;
+@oui-tabs-tabpanel-border-radius: @oui-global-base-radius;
+@oui-tabs-tabpanel-background-color: @oui-tabs-tab-background-color;

packages/oui-tabs/tabs.less

@@ -0,0 +1,149 @@
+@import "./_normalize";
+@import "./_variables";
+
+.oui-tabs {
+  &__tab {
+    height: @oui-tabs-tab-height;
+    margin-right: @oui-tabs-tab-spacing;
+    padding: @oui-tabs-tab-padding;
+    vertical-align: top;
+    font-size: @oui-tabs-tab-font-size;
+    font-weight: @oui-tabs-tab-font-weight;
+    color: @oui-tabs-tab-font-color;
+    border: @oui-tabs-tab-border;
+    border-radius: @oui-tabs-tab-border-radius;
+    box-shadow: @oui-tabs-tab-box-shadow;
+    background: @oui-tabs-tab-background-color;
+    cursor: pointer;
+
+    &:focus,
+    &:hover {
+      box-shadow: @oui-tabs-tab-box-shadow_hover;
+      background: @oui-tabs-tab-background-color_hover;
+    }
+
+    &:focus {
+      outline-width: 1px;
+      outline-style: dotted;
+      outline-color: initial;
+      outline-offset: -2px;
+    }
+
+    &[aria-selected="true"] {
+      height: @oui-tabs-tab-height_active;
+      padding: @oui-tabs-tab-padding_active;
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      box-shadow: @oui-tabs-tab-box-shadow_active;
+      background: @oui-tabs-tab-background-color_active;
+    }
+
+    .oui-icon {
+      margin-right: @oui-tabs-icon-spacing;
+      font-size: @oui-tabs-icon-size;
+      color: @oui-tabs-icon-color;
+    }
+
+    &_checked .oui-icon {
+      color: @oui-tabs-icon-color_checked;
+    }
+  }
+
+  &__tablist {
+    position: relative;
+    display: flex; // Avoid inline spacing
+    margin-bottom: -1px;
+
+    .phone({
+      display: none;
+    });
+  }
+}
+
+.oui-tabs-item {
+  & + & {
+    .phone({
+      margin-top: @oui-tabs-tab-spacing;
+    });
+  }
+
+  &__button {
+    width: 100%;
+    height: @oui-tabs-tab-height;
+    padding: @oui-tabs-tab-padding_mobile;
+    display: none;
+    flex-direction: row;
+    align-items: center;
+    font-size: @oui-tabs-tab-font-size;
+    font-weight: @oui-tabs-tab-font-weight;
+    color: @oui-tabs-tab-font-color;
+    border: @oui-tabs-tabpanel-border;
+    border-radius: @oui-tabs-tabpanel-border-radius;
+    background: @oui-tabs-tabpanel-background-color;
+    cursor: pointer;
+
+    .phone({ display: flex; });
+
+    &:focus {
+      outline-width: 1px;
+      outline-style: dotted;
+      outline-color: initial;
+      outline-offset: -2px;
+    }
+
+    &[aria-expanded="true"] {
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .oui-icon:first-child {
+      margin-right: @oui-tabs-icon-spacing;
+      font-size: @oui-tabs-icon-size;
+      color: @oui-tabs-icon-color;
+    }
+
+    &_checked .oui-icon:first-child {
+      color: @oui-tabs-icon-color_checked;
+    }
+  }
+
+  &__heading {
+    flex: 1;
+    text-align: left;
+  }
+
+  &__toggle-icon {
+    color: inherit;
+    margin-left: @oui-tabs-icon-spacing;
+
+    &::before {
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      font-size: @oui-tabs-icon-size;
+      height: @oui-tabs-icon-size;
+      line-height: @oui-tabs-icon-size;
+    }
+  }
+
+  &__button[aria-expanded="true"] &__toggle-icon::before { transform: rotate(-180deg); }
+
+  &__content {
+    padding: @oui-tabs-tabpanel-padding;
+    border: @oui-tabs-tabpanel-border;
+    border-radius: @oui-tabs-tabpanel-border-radius;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    background: @oui-tabs-tabpanel-background-color;
+
+    .phone({
+      padding: @oui-tabs-tabpanel-padding_mobile;
+      border-top: none;
+    });
+
+    &[aria-hidden="true"] { display: none; }
+
+    > :first-child { margin-top: 0; }
+    > :last-child { margin-bottom: 0; }
+  }
+}

packages/oui/stylekit.less

@@ -21,6 +21,7 @@
 @import '../oui-input-group/input-group';
 @import '../oui-select/select';
 @import '../oui-box/box';
+@import '../oui-tabs/tabs';
 @import '../oui-label/label';
 @import '../oui-formfield/formfield';
 @import '../oui-progress-tracker/progress-tracker';