@broxus/react-uikit 0.5.0 → 0.5.2

package/dist/esm/components/Tab/index.scss

@@ -0,0 +1,216 @@
+// Name:            Tab
+// Description:     Component to create a tabbed navigation
+//
+// Component:       `uk-tab`
+//
+// Modifiers:       `uk-tab-bottom`
+//                  `uk-tab-left`
+//                  `uk-tab-right`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Tab
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Gutter
+ * 3. Reset list
+ */
+
+.uk-tab {
+    display: flex;
+
+    /* 1 */
+    flex-wrap: wrap;
+    list-style: none;
+
+    /* 2 */
+    margin-left: calc(var(--tab-margin-horizontal) * -1);
+
+    /* 3 */
+    padding: 0;
+    @if mixin-exists(hook-tab) {
+        @include hook-tab;
+    }
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-tab > * {
+    /* 1 */
+    flex: none;
+
+    /* 2 */
+    padding-left: var(--tab-margin-horizontal);
+
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Center content if a width is set
+ * 4. Style
+ */
+
+.uk-tab > * > a {
+    /* 1 */
+    align-items: center;
+
+    /* 4 */
+    color: var(--tab-item-color);
+
+    /* 2 */
+    column-gap: 0.25em;
+
+    /* 4 */
+    display: flex;
+
+    /* 3 */
+    justify-content: center;
+
+    /* 4 */
+    padding: var(--tab-item-padding-vertical) var(--tab-item-padding-horizontal);
+    @if mixin-exists(hook-tab-item) {
+        @include hook-tab-item;
+    }
+}
+
+/* Hover */
+.uk-tab > * > a:hover {
+    color: var(--tab-item-hover-color);
+    text-decoration: var(--tab-item-hover-text-decoration);
+    @if mixin-exists(hook-tab-item-hover) {
+        @include hook-tab-item-hover;
+    }
+}
+
+/* Active */
+.uk-tab > .uk-active > a {
+    color: var(--tab-item-active-color);
+    @if mixin-exists(hook-tab-item-active) {
+        @include hook-tab-item-active;
+    }
+}
+
+/* Disabled */
+.uk-tab > .uk-disabled > a {
+    color: var(--tab-item-disabled-color);
+    @if mixin-exists(hook-tab-item-disabled) {
+        @include hook-tab-item-disabled;
+    }
+}
+
+
+/* Position modifier
+ ========================================================================== */
+
+/*
+ * Bottom
+ */
+
+.uk-tab-bottom {
+    @if mixin-exists(hook-tab-bottom) {
+        @include hook-tab-bottom;
+    }
+}
+
+.uk-tab-bottom > * > a {
+    @if mixin-exists(hook-tab-bottom-item) {
+        @include hook-tab-bottom-item;
+    }
+}
+
+/*
+ * Left + Right
+ * 1. Reset Gutter
+ */
+
+.uk-tab-left,
+.uk-tab-right {
+    flex-direction: column;
+
+    /* 1 */
+    margin-left: 0;
+}
+
+/* 1 */
+.uk-tab-left > *,
+.uk-tab-right > * { padding-left: 0; }
+
+.uk-tab-left {
+    @if mixin-exists(hook-tab-left) {
+        @include hook-tab-left;
+    }
+}
+
+.uk-tab-right {
+    @if mixin-exists(hook-tab-right) {
+        @include hook-tab-right;
+    }
+}
+
+.uk-tab-left > * > a {
+    justify-content: left;
+    @if mixin-exists(hook-tab-left-item) {
+        @include hook-tab-left-item;
+    }
+}
+
+.uk-tab-right > * > a {
+    justify-content: left;
+    @if mixin-exists(hook-tab-right-item) {
+        @include hook-tab-right-item;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-tab-misc) {
+    @include hook-tab-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --tab-margin-horizontal: #{$tab-margin-horizontal};
+    --tab-item-padding-horizontal: #{$tab-item-padding-horizontal};
+    --tab-item-padding-vertical: #{$tab-item-padding-vertical};
+    --tab-item-color: var(--global-muted-color);
+    --tab-item-hover-color: var(--global-color);
+    --tab-item-hover-text-decoration: #{$tab-item-hover-text-decoration};
+    --tab-item-active-color: var(--global-primary-background);
+    --tab-item-disabled-color: var(--global-muted-color);
+
+    // Inverse
+    --inverse-tab-item-color: var(--inverse-global-muted-color);
+    --inverse-tab-item-hover-color: var(--inverse-global-color);
+    --inverse-tab-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-tab-item-disabled-color: var(--inverse-global-muted-color);
+}

package/dist/esm/components/Text/index.d.ts

@@ -18,4 +18,4 @@ export type TextOwnProps = {
     wrap?: 'truncate' | 'break' | 'nowrap';
 };
 export type TextProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TextOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TextOwnProps>;
-export declare const Text: React.MemoExoticComponent<(<E extends React.ElementType<any> = "p">(props: TextProps<E>) => React.JSX.Element)>;
+export declare const Text: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: TextProps<E>) => React.JSX.Element)>;

package/dist/esm/components/Text/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getBreakpointsConfigClasses } from '../../utils';
-const defaultElement = 'p';
+const defaultElement = 'span';
 export const Text = React.memo((props) => {
     const config = useConfig();
     const { align, className, color, column, decoration, dropcap, italic, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;

package/dist/esm/index.d.ts

@@ -22,6 +22,7 @@ export * from './components/Tile';
 export * from './components/Card';
 export * from './components/Nav';
 export * from './components/Navbar';
+export * from './components/Subnav';
 export * from './components/Breadcrumb';
 export * from './components/Tabs';
 export * from './components/Dotnav';

package/dist/esm/index.js

@@ -22,6 +22,7 @@ export * from './components/Tile';
 export * from './components/Card';
 export * from './components/Nav';
 export * from './components/Navbar';
+export * from './components/Subnav';
 export * from './components/Breadcrumb';
 export * from './components/Tabs';
 export * from './components/Dotnav';

package/dist/esm/styles/_import.components.scss

@@ -43,7 +43,7 @@
 // Navs
 @import 'nav.scss';
 @import 'navbar.scss'; // After: Card, Grid, Nav, Icon, Search
-// @import 'subnav.scss';
+@import 'subnav.scss';
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';

package/dist/esm/styles/_import.scss

@@ -59,7 +59,7 @@
 // Navs
 @import 'nav.scss';
 @import 'navbar.scss'; // After: Card, Grid, Nav, Icon, Search
-// @import 'subnav.scss';
+@import 'subnav.scss';
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';

package/dist/esm/styles/mixins.scss

@@ -2073,6 +2073,60 @@
 
 @mixin hook-switcher-misc() {}
 
+@mixin hook-tab() {}
+@mixin hook-tab-item() {}
+@mixin hook-tab-item-hover() {}
+@mixin hook-tab-item-active() {}
+@mixin hook-tab-item-disabled() {}
+@mixin hook-tab-bottom() {}
+@mixin hook-tab-bottom-item() {}
+@mixin hook-tab-left() {}
+@mixin hook-tab-left-item() {}
+@mixin hook-tab-right() {}
+@mixin hook-tab-right-item() {}
+@mixin hook-tab-misc() {}
+@mixin hook-inverse-tab() {}
+@mixin hook-inverse-tab-item() {}
+@mixin hook-inverse-tab-item-hover() {}
+@mixin hook-inverse-tab-item-active() {}
+@mixin hook-inverse-tab-item-disabled() {}
+@mixin hook-inverse-component-tab() {
+    .uk-tab {
+        @if mixin-exists(hook-inverse-tab) {
+            @include hook-inverse-tab;
+        }
+    }
+
+    .uk-tab > * > a {
+        color: var(--inverse-tab-item-color);
+        @if mixin-exists(hook-inverse-tab-item) {
+            @include hook-inverse-tab-item;
+        }
+    }
+
+    .uk-tab > * > a:hover {
+        color: var(--inverse-tab-item-hover-color);
+        @if mixin-exists(hook-inverse-tab-item-hover) {
+            @include hook-inverse-tab-item-hover;
+        }
+    }
+
+    .uk-tab > .uk-active > a {
+        color: var(--inverse-tab-item-active-color);
+        @if mixin-exists(hook-inverse-tab-item-active) {
+            @include hook-inverse-tab-item-active;
+        }
+    }
+
+    .uk-tab > .uk-disabled > a {
+        color: var(--inverse-tab-item-disabled-color);
+        @if mixin-exists(hook-inverse-tab-item-disabled) {
+            @include hook-inverse-tab-item-disabled;
+        }
+    }
+
+}
+
 @mixin hook-tabs() {}
 @mixin hook-tabs-tab() {}
 @mixin hook-tabs-tab-hover() {}
@@ -2353,6 +2407,7 @@
     @include hook-inverse-component-breadcrumb;
 
     @include hook-inverse-component-pagination;
+    @include hook-inverse-component-tab;
     @include hook-inverse-component-tabs;
     @include hook-inverse-component-table;
 

package/dist/esm/styles/subnav.scss

@@ -1,258 +1 @@
-// Name:            Subnav
-// Description:     Component to create a sub navigation
-//
-// Component:       `uk-subnav`
-//
-// Modifiers:       `uk-subnav-divider`
-//                  `uk-subnav-pill`
-//
-// States:          `uk-active`
-//                  `uk-first-column`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Subnav
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Center items vertically if they have a different height
- * 3. Gutter
- * 4. Reset list
- */
-
-.uk-subnav {
-    /* 2 */
-    align-items: center;
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 3 */
-    margin-left: calc(var(--subnav-margin-horizontal) * -1);
-
-    /* 4 */
-    padding: 0;
-    @if mixin-exists(hook-subnav) {
-        @include hook-subnav;
-    }
-}
-
-/*
- * 1. Space is allocated solely based on content dimensions: 0 0 auto
- * 2. Gutter
- * 3. Create position context for dropdowns
- */
-
-.uk-subnav > * {
-    /* 1 */
-    flex: none;
-
-    /* 2 */
-    padding-left: var(--subnav-margin-horizontal);
-
-    /* 3 */
-    position: relative;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items must target `a` elements to exclude other elements (e.g. dropdowns)
- * Using `:first-child` instead of `a` to support `span` elements for text
- * 1. Center content vertically, e.g. an icon
- * 2. Imitate white space gap when using flexbox
- * 3. Style
- */
-
-.uk-subnav > * > :first-child {
-    align-items: center;
-
-    /* 3 */
-    color: var(--subnav-item-color);
-
-    /* 2 */
-    column-gap: 0.25em;
-
-    /* 1 */
-    display: flex;
-    @if mixin-exists(hook-subnav-item) {
-        @include hook-subnav-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav > * > a:hover,
-.uk-subnav > * > a:focus {
-    color: var(--subnav-item-hover-color);
-    outline: none;
-    text-decoration: var(--subnav-item-hover-text-decoration);
-    @if mixin-exists(hook-subnav-item-hover) {
-        @include hook-subnav-item-hover;
-    }
-}
-
-/* Active */
-.uk-subnav > .uk-active > a {
-    color: var(--subnav-item-active-color);
-    @if mixin-exists(hook-subnav-item-active) {
-        @include hook-subnav-item-active;
-    }
-}
-
-
-/* Divider modifier
- ========================================================================== */
-
-/*
- * Set gutter
- */
-
-.uk-subnav-divider {
-    margin-left: calc((var(--subnav-divider-margin-horizontal) * 2 + var(--subnav-divider-border-width)) * -1);
-}
-
-/*
- * Align items and divider vertically
- */
-
-.uk-subnav-divider > * {
-    align-items: center;
-    display: flex;
-}
-
-/*
- * Divider
- * 1. `nth-child` makes it also work without JS if it's only one row
- */
-
-.uk-subnav-divider > ::before {
-    border-left: var(--subnav-divider-border-width) solid transparent;
-    content: '';
-    height: var(--subnav-divider-border-height);
-    margin-left: calc(var(--subnav-divider-margin-horizontal) - var(subnav-margin-horizontal));
-    margin-right: var(--subnav-divider-margin-horizontal);
-}
-
-/* 1 */
-.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
-    border-left-color: var(--subnav-divider-border);
-    @if mixin-exists(hook-subnav-divider) {
-        @include hook-subnav-divider;
-    }
-}
-
-
-/* Pill modifier
- ========================================================================== */
-
-.uk-subnav-pill > * > :first-child {
-    background: var(--subnav-pill-item-background);
-    color: var(--subnav-pill-item-color);
-    padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
-    @if mixin-exists(hook-subnav-pill-item) {
-        @include hook-subnav-pill-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav-pill > * > a:hover,
-.uk-subnav-pill > * > a:focus {
-    background-color: var(--subnav-pill-item-hover-background);
-    color: var(--subnav-pill-item-hover-color);
-    @if mixin-exists(hook-subnav-pill-item-hover) {
-        @include hook-subnav-pill-item-hover;
-    }
-}
-
-/* OnClick */
-.uk-subnav-pill > * > a:active {
-    background-color: var(--subnav-pill-item-onclick-background);
-    color: var(--subnav-pill-item-onclick-color);
-    @if mixin-exists(hook-subnav-pill-item-onclick) {
-        @include hook-subnav-pill-item-onclick;
-    }
-}
-
-/* Active */
-.uk-subnav-pill > .uk-active > a {
-    background-color: var(--subnav-pill-item-active-background);
-    color: var(--subnav-pill-item-active-color);
-    @if mixin-exists(hook-subnav-pill-item-active) {
-        @include hook-subnav-pill-item-active;
-    }
-}
-
-
-/* Disabled
- * The same for all style modifiers
- ========================================================================== */
-
-.uk-subnav > .uk-disabled > a {
-    color: var(--subnav-item-disabled-color);
-    @if mixin-exists(hook-subnav-item-disabled) {
-        @include hook-subnav-item-disabled;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-subnav-misc) {
-    @include hook-subnav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --subnav-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-item-color: var(--global-muted-color);
-    --subnav-item-hover-color: var(--global-color);
-    --subnav-item-hover-text-decoration: #{$subnav-item-hover-text-decoration};
-    --subnav-item-active-color: var(--global-emphasis-color);
-    --subnav-divider-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-divider-border-height: #{$subnav-divider-border-height};
-    --subnav-divider-border-width: var(--global-border-width);
-    --subnav-divider-border: var(--global-border);
-    --subnav-pill-item-padding-vertical: #{$subnav-pill-item-padding-vertical};
-    --subnav-pill-item-padding-horizontal: #{$subnav-pill-item-padding-horizontal};
-    --subnav-pill-item-background: #{$subnav-pill-item-background};
-    --subnav-pill-item-color: #{$subnav-item-color};
-    --subnav-pill-item-hover-background: var(--global-muted-background);
-    --subnav-pill-item-hover-color: var(--global-color);
-    --subnav-pill-item-onclick-background: #{$subnav-pill-item-hover-background};
-    --subnav-pill-item-onclick-color: #{$subnav-pill-item-hover-color};
-    --subnav-pill-item-active-background: var(--global-primary-background);
-    --subnav-pill-item-active-color: var(--global-inverse-color);
-    --subnav-item-disabled-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-subnav-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-subnav-divider-border: var(--inverse-global-border);
-    --inverse-subnav-pill-item-background: #{$inverse-subnav-pill-item-background};
-    --inverse-subnav-pill-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-pill-item-hover-background: var(--inverse-global-muted-background);
-    --inverse-subnav-pill-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-pill-item-onclick-background: #{$inverse-subnav-pill-item-hover-background};
-    --inverse-subnav-pill-item-onclick-color: #{$inverse-subnav-pill-item-hover-color};
-    --inverse-subnav-pill-item-active-background: var(--inverse-global-primary-background);
-    --inverse-subnav-pill-item-active-color: var(--inverse-global-inverse-color);
-    --inverse-subnav-item-disabled-color: var(--inverse-global-muted-color);
-}
+@import '../components/Subnav/index.scss';

package/dist/esm/styles/variables.scss

@@ -1586,7 +1586,7 @@ $inverse-subnav-pill-item-active-color:                         $inverse-global-
 $inverse-subnav-item-disabled-color:                            $inverse-global-muted-color !default;
 
 
-// Tab
+// Switch
 // ========================================================================
 
 $switch-background:                                             darken($global-muted-background, 20%) !default;
@@ -1605,6 +1605,25 @@ $switch-handle-offset:                                          2px !default;
 // Tab
 // ========================================================================
 
+$tab-margin-horizontal:                                         20px !default;
+$tab-item-padding-horizontal:                                   10px !default;
+$tab-item-padding-vertical:                                     5px !default;
+$tab-item-color:                                                $global-muted-color !default;
+$tab-item-hover-color:                                          $global-color !default;
+$tab-item-hover-text-decoration:                                none !default;
+$tab-item-active-color:                                         $global-primary-background !default;
+$tab-item-disabled-color:                                       $global-muted-color !default;
+
+// Inverse
+$inverse-tab-item-color:                                        $inverse-global-muted-color !default;
+$inverse-tab-item-hover-color:                                  $inverse-global-color !default;
+$inverse-tab-item-active-color:                                 $inverse-global-emphasis-color !default;
+$inverse-tab-item-disabled-color:                               $inverse-global-muted-color !default;
+
+
+// Tabs
+// ========================================================================
+
 $tabs-margin-horizontal:                                        20px !default;
 $tabs-margin-vertical:                                          10px !default;
 $tabs-tab-padding-horizontal:                                   15px !default;