@edvisor/product-language 0.8.6 → 0.9.0

package/index.js

@@ -6683,11 +6683,11 @@ const IconContainer = /*#__PURE__*/styled.div.withConfig({
 const AlertFooter = /*#__PURE__*/styled.footer.withConfig({
   displayName: "alert-banner__AlertFooter",
   componentId: "g6nsx9-2"
-})(["width:100%;padding:", " ", " ", ";bottom:0;box-sizing:border-box;display:flex;gap:", ""], Padding.m, Padding.xl, Padding.none, Gap.xs);
+})(["width:100%;padding:", " ", " ", ";bottom:0;box-sizing:border-box;display:flex;gap:", ";"], Padding.m, Padding.xl, Padding.none, Gap.xs);
 const Content$1 = /*#__PURE__*/styled(Body).withConfig({
   displayName: "alert-banner__Content",
   componentId: "g6nsx9-3"
-})(["padding-left:", ";flex:1;"], Padding.m);
+})(["padding-left:", ";flex:1;overflow:auto;"], Padding.m);
 const CloseButton$2 = /*#__PURE__*/styled(IconMinor.Xmark).withConfig({
   displayName: "alert-banner__CloseButton",
   componentId: "g6nsx9-4"
@@ -7843,7 +7843,7 @@ const Thumbnail = props => {
   }));
 };
 
-const styles = ({
+const getStylesToTypePrimary = ({
   selected
 }) => ({
   display: 'flex',
@@ -7856,13 +7856,40 @@ const styles = ({
   }
 });
 
+const getStylesToTypeSecondary = ({
+  selected
+}) => ({
+  display: 'flex',
+  padding: `${Padding.xs} ${Padding.m}`,
+  border: !selected ? `1px solid ${Surface.Default.Depressed}` : '1px solid transparent',
+  cursor: 'pointer',
+  outline: 'none',
+  boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)',
+  background: selected ? `${Surface.Default.Depressed}` : `${Surface.Default.Default}`,
+  borderRadius: '18px',
+  alignItems: 'center'
+});
+
+const getStylesByType = (secondary, selected) => {
+  if (secondary) {
+    return getStylesToTypeSecondary({
+      selected
+    });
+  }
+
+  return getStylesToTypePrimary({
+    selected
+  });
+};
+
 const Tab$1 = props => {
   const {
     Prefix,
-    selected = false
+    selected = false,
+    secondary = false
   } = props,
         rest = __rest(props // eslint-disable-next-line no-null/no-null
-  , ["Prefix", "selected"]); // eslint-disable-next-line no-null/no-null
+  , ["Prefix", "selected", "secondary"]); // eslint-disable-next-line no-null/no-null
 
 
   const ref = useRef(null);
@@ -7890,9 +7917,7 @@ const Tab$1 = props => {
     role: 'tab',
     "aria-selected": selected,
     ref: ref,
-    style: styles({
-      selected
-    })
+    style: getStylesByType(secondary, selected)
   }, {
     children: [isDefined(Prefix) ? jsx(Prefix, {
       style: {
@@ -7900,7 +7925,7 @@ const Tab$1 = props => {
       }
     }) : jsx(Nothing, {}), jsx(Label$1, Object.assign({
       strong: true,
-      subdued: !selected
+      subdued: !selected && !secondary
     }, {
       children: props.children
     }))]
@@ -7914,7 +7939,15 @@ const Tab = /*#__PURE__*/styled(Tab$1).withConfig({
 const TabList = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "tabs__TabList",
   componentId: "kpjo9y-1"
-})(["padding-left:", ";border-bottom:1px solid ", ";", "{margin-right:", ";margin-bottom:-1px;flex-shrink:0;}"], Padding.m, Borders.Default.Subdued, Tab, Margin.m);
+})(["padding-left:", ";", "{margin-right:", ";margin-bottom:-1px;flex-shrink:0;}"], Padding.m, Tab, Margin.m);
+const TabListSecondary = /*#__PURE__*/styled(TabList).withConfig({
+  displayName: "tabs__TabListSecondary",
+  componentId: "kpjo9y-2"
+})(["", "{margin-right:", ";}"], Tab, Margin.xs);
+const TabListPrimary = /*#__PURE__*/styled(TabList).withConfig({
+  displayName: "tabs__TabListPrimary",
+  componentId: "kpjo9y-3"
+})(["border-bottom:1px solid ", ";"], Borders.Default.Subdued);
 
 class Content extends StylableSlot {}
 
@@ -7936,7 +7969,14 @@ const Tabs = props => {
       const tabs = Children.map(child.props.children, tab => {
         return isTab(tab) ? decorateTab(tab, props, tabCount++) : tab;
       });
-      return jsx(TabList, {
+
+      if (is(props.secondary) && props.secondary === true) {
+        return jsx(TabListSecondary, {
+          children: tabs
+        });
+      }
+
+      return jsx(TabListPrimary, {
         children: tabs
       });
     } else {
@@ -7950,9 +7990,11 @@ const Tabs = props => {
 
 function decorateTab(tab, {
   selected,
+  secondary,
   onChange = () => undefined
 }, index) {
   return jsx(Tab, Object.assign({}, tab.props, {
+    secondary: secondary,
     selected: is(tab.props.selected) ? tab.props.selected : index === selected,
     onFocus: e => {
       safeCallback(tab.props.onFocus, e);

package/lib/components/tabs/components/tab.d.ts

@@ -3,5 +3,6 @@ import { FC, PropsWithChildren } from '@helpers';
 export interface ITabProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
     Prefix?: FC<HTMLAttributes<HTMLElement>>;
     selected?: boolean;
+    secondary?: boolean;
 }
 export declare const Tab: FC<ITabProps>;

package/lib/components/tabs/tabs.d.ts

@@ -8,6 +8,7 @@ declare type SubComponents = {
     TabList: typeof Navigation;
 };
 interface ITabsProps extends PropsWithChildren {
+    secondary?: boolean;
     selected: number;
     onChange?: (selected: number) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.8.6",
+  "version": "0.9.0",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",