@entur/tab 0.5.4 → 0.5.5-beta.0

package/dist/index.d.ts

@@ -1,6 +1,63 @@
-import './index.scss';
-export * from './Tab';
-export * from './Tabs';
-export * from './TabPanel';
-export * from './TabPanels';
-export * from './TabList';
+import { default as default_2 } from 'react';
+
+export declare const Tab: default_2.FC<TabProps>;
+
+export declare const TabList: default_2.FC<TabListProps>;
+
+export declare type TabListProps = {
+    /** Tab-komponenter */
+    children: default_2.ReactNode;
+    /** HTML-elementet eller React-komponenten som lager komponenten */
+    as?: keyof JSX.IntrinsicElements | any;
+    width?: 'fluid';
+    [key: string]: any;
+};
+
+export declare const TabPanel: default_2.FC<TabPanelProps>;
+
+export declare type TabPanelProps = {
+    /** Overskriften til taben */
+    children: default_2.ReactNode;
+    /** HTML-elementet eller React-komponenten som lager komponenten */
+    as?: keyof JSX.IntrinsicElements | any;
+    [key: string]: any;
+};
+
+export declare const TabPanels: default_2.FC<TabPanelsProps>;
+
+export declare type TabPanelsProps = {
+    /** Tab-panelene */
+    children: default_2.ReactNode;
+    /** HTML-elementet eller React-komponenten som lager komponenten */
+    as?: keyof JSX.IntrinsicElements | any;
+    [key: string]: any;
+};
+
+export declare type TabProps = {
+    /** Overskriften til taben */
+    children: default_2.ReactNode;
+    /** Om taben er disabled eller ikke */
+    disabled?: boolean;
+    /** HTML-elementet eller React-komponenten som lager komponenten */
+    as?: keyof JSX.IntrinsicElements | any;
+    removeActiveLine?: boolean;
+    [key: string]: any;
+};
+
+export declare const Tabs: default_2.FC<TabsProps>;
+
+export declare type TabsProps = {
+    /** Overskriften til taben */
+    children: default_2.ReactNode;
+    /** Kalles når taben endres */
+    onChange?: (index: number) => void;
+    /** Hvilken tab som skal være åpen by default */
+    defaultIndex?: number;
+    /** Den åpne indexen */
+    index?: number;
+    /** HTML-elementet eller React-komponenten som lager komponenten */
+    as?: keyof JSX.IntrinsicElements | any;
+    [key: string]: any;
+};
+
+export { }

package/dist/styles.css

@@ -211,7 +211,6 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: #e3e6e8;
   background-color: var(--components-tab-standard-border);
   display: block;
   height: 0.125rem;
@@ -219,7 +218,6 @@
   z-index: -1;
 }
 .eds-contrast .eds-tab-list::after {
-  background-color: #aeb7e2;
   background-color: var(--components-tab-contrast-border);
 }
 .eds-tab-list::-webkit-scrollbar {
@@ -227,14 +225,10 @@
 }
 
 .eds-tab {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: #edf0f2;
+  appearance: none;
   background: var(--components-tab-standard-fill-unselected);
   border: 0.125rem solid transparent;
   border-radius: 0.25rem 0.25rem 0 0;
-  color: #181c56;
   color: var(--components-tab-standard-text);
   cursor: pointer;
   font-family: inherit;
@@ -251,20 +245,15 @@
   min-width: 0;
 }
 .eds-contrast .eds-tab {
-  background-color: #393d79;
   background-color: var(--components-tab-contrast-fill-unselected);
-  color: #ffffff;
   color: var(--components-tab-contrast-text);
 }
 .eds-tab:hover {
-  background-color: #e3e6e8;
   background-color: var(--components-tab-standard-fill-hover);
   color: var(--components-menu-tableofcontent-standard-text-selected);
 }
 .eds-contrast .eds-tab:hover {
-  background-color: #626493;
   background-color: var(--components-tab-contrast-fill-hover);
-  color: #ffffff;
   color: var(--components-tab-contrast-text);
 }
 .eds-tab + .eds-tab {
@@ -276,40 +265,30 @@
   bottom: -0.125rem;
   left: -0.125rem;
   right: -0.125rem;
-  background-color: #e3e6e8;
   background-color: var(--components-tab-standard-border);
   display: block;
   height: 0.125rem;
 }
 .eds-contrast .eds-tab::after {
-  background-color: #aeb7e2;
   background-color: var(--components-tab-contrast-border);
 }
 .eds-tab[aria-selected=true] {
-  background-color: #ffffff;
   background-color: var(--components-tab-standard-fill-selected);
-  border-color: #e3e6e8;
   border-color: var(--components-tab-standard-border);
-  color: #181c56;
   color: var(--components-tab-standard-text);
   font-weight: 600;
 }
 .eds-contrast .eds-tab[aria-selected=true] {
-  background-color: #181c56;
   background-color: var(--components-tab-contrast-fill-selected);
-  color: #ffffff;
   color: var(--components-tab-contrast-text);
-  border-color: #aeb7e2;
   border-color: var(--components-tab-contrast-border);
 }
 .eds-tab[aria-selected=true]::after {
-  background-color: #ffffff;
   background-color: var(--components-tab-standard-fill-selected);
   left: 0;
   right: 0;
 }
 .eds-contrast .eds-tab[aria-selected=true]::after {
-  background-color: #181c56;
   background-color: var(--components-tab-contrast-fill-selected);
 }
 .eds-tab[aria-selected=true]::before {
@@ -318,7 +297,6 @@
   margin: 0 auto;
   width: 2rem;
   height: 3px;
-  background: #ff5959;
   background: var(--components-tab-standard-underline-selected);
   position: absolute;
   bottom: 0.25rem;
@@ -329,28 +307,22 @@
   background: transparent;
 }
 .eds-tab[disabled] {
-  background: #cfd2d4;
   background: var(--components-tab-standard-fill-disabled);
   border-color: none;
-  color: #515254;
   color: var(--components-tab-standard-text-disabled);
   cursor: not-allowed;
 }
 .eds-contrast .eds-tab[disabled] {
-  background: rgba(84, 86, 140, 0.4);
   background: var(--components-tab-contrast-fill-disabled);
   border-color: none;
-  color: #b6b8ba;
   color: var(--components-tab-contrast-text-disabled);
 }
 .eds-tab:focus-visible {
   outline: 2px solid #181c56;
-  outline-color: #181c56;
   outline-color: var(--basecolors-stroke-focus-standard);
   outline-offset: 0.125rem;
 }
 .eds-contrast .eds-tab:focus-visible {
-  outline-color: #aeb7e2;
   outline-color: var(--basecolors-stroke-focus-contrast);
 }
 
@@ -360,11 +332,9 @@
 
 .eds-tab-panel:focus-visible {
   outline: 2px solid #181c56;
-  outline-color: #181c56;
   outline-color: var(--basecolors-stroke-focus-standard);
   outline-offset: 0.125rem;
 }
 .eds-contrast .eds-tab-panel:focus-visible {
-  outline-color: #aeb7e2;
   outline-color: var(--basecolors-stroke-focus-contrast);
-}
+}