@broxus/react-uikit 0.4.8 → 0.5.1

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

@@ -0,0 +1,278 @@
+// Name:            List
+// Description:     Styles for lists
+//
+// Component:       `uk-list`
+//
+// Modifiers:       `uk-list-disc`
+//                  `uk-list-circle`
+//                  `uk-list-square`
+//                  `uk-list-decimal`
+//                  `uk-list-hyphen`
+//                  `uk-list-muted`
+//                  `uk-list-emphasis`
+//                  `uk-list-primary`
+//                  `uk-list-secondary`
+//                  `uk-list-bullet`
+//                  `uk-list-divider`
+//                  `uk-list-striped`
+//                  `uk-list-large`
+//                  `uk-list-collapse`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: List
+ ========================================================================== */
+
+.uk-list {
+    list-style: none;
+    padding: 0;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-list > * > :last-child {
+    margin-bottom: 0;
+}
+
+/*
+ * Style
+ */
+
+.uk-list > :nth-child(n+2),
+.uk-list > * > ul {
+    margin-top: var(--list-margin-top);
+}
+
+
+/* Marker modifiers
+ * Moving `::marker` inside `::before` to style it differently
+ * To style the `::marker` is currently only supported in Firefox and Safari
+ ========================================================================== */
+
+.uk-list-disc > *,
+.uk-list-circle > *,
+.uk-list-square > *,
+.uk-list-decimal > *,
+.uk-list-hyphen > * {
+    padding-left: var(--list-padding-left);
+}
+
+/*
+ * Type modifiers
+ */
+
+.uk-list-decimal {
+    counter-reset: decimal;
+}
+
+.uk-list-decimal > * {
+    counter-increment: decimal;
+}
+
+[class*='uk-list'] > ::before {
+    content: '';
+    display: list-item;
+    height: var(--list-marker-height);
+    left: calc(var(--list-padding-left) * -1);
+    list-style-position: inside;
+    margin-bottom: calc(var(--list-marker-height) * -1);
+    position: relative;
+    text-align: right;
+    width: var(--list-padding-left);
+}
+
+.uk-list-disc > ::before {
+    list-style-type: disc;
+}
+
+.uk-list-circle > ::before {
+    list-style-type: circle;
+}
+
+.uk-list-square > ::before {
+    list-style-type: square;
+}
+
+.uk-list-decimal > ::before {
+    content: counter(decimal, decimal) '\200A.\00A0';
+}
+
+.uk-list-hyphen > ::before {
+    content: '–\00A0\00A0';
+}
+
+/*
+ * Color modifiers
+ */
+
+.uk-list-muted > ::before {
+    color: var(--list-muted-color) !important;
+}
+
+.uk-list-emphasis > ::before {
+    color: var(--list-emphasis-color) !important;
+}
+
+.uk-list-primary > ::before {
+    color: var(--list-primary-color) !important;
+}
+
+.uk-list-secondary > ::before {
+    color: var(--list-secondary-color) !important;
+}
+
+
+/* Image bullet modifier
+ ========================================================================== */
+
+.uk-list-bullet > * {
+    padding-left: var(--list-padding-left);
+}
+
+.uk-list-bullet > ::before {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    content: '';
+    height: var(--list-marker-height);
+    left: calc(var(--list-padding-left) * -1);
+    margin-bottom: calc(var(--list-marker-height) * -1);
+    position: relative;
+    width: var(--list-padding-left);
+    @if mixin-exists(svg-fill) {
+        @include svg-fill($list-bullet-icon-image-path, '#000', $list-bullet-icon-color);
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Divider
+ */
+
+.uk-list-divider > :nth-child(n+2) {
+    border-top: var(--list-divider-border-width) solid var(--list-divider-border);
+    margin-top: var(--list-divider-margin-top);
+    padding-top: var(--list-divider-margin-top);
+    @if mixin-exists(hook-list-divider) {
+        @include hook-list-divider;
+    }
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-striped > * {
+    padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
+    @if mixin-exists(hook-list-striped) {
+        @include hook-list-striped;
+    }
+}
+
+.uk-list-striped > :nth-of-type(odd) {
+    background: var(--list-striped-background);
+}
+
+.uk-list-striped > :nth-child(n+2) {
+    margin-top: 0;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-list-large > :nth-child(n+2),
+.uk-list-large > * > ul {
+    margin-top: var(--list-large-margin-top);
+}
+
+.uk-list-collapse > :nth-child(n+2),
+.uk-list-collapse > * > ul {
+    margin-top: 0;
+}
+
+/*
+ * Divider
+ */
+
+.uk-list-large.uk-list-divider > :nth-child(n+2) {
+    margin-top: var(--list-large-divider-margin-top);
+    padding-top: var(--list-large-divider-margin-top);
+}
+
+.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-large.uk-list-striped > * {
+    padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal);
+}
+
+.uk-list-collapse.uk-list-striped > * {
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+.uk-list-large.uk-list-striped > :nth-child(n+2),
+.uk-list-collapse.uk-list-striped > :nth-child(n+2) {
+    margin-top: 0;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-list-misc) {
+    @include hook-list-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --list-margin-top: var(--global-small-margin);
+    --list-padding-left: #{$list-padding-left};
+    --list-marker-height: calc(var(--global-line-height) * 1em);
+    --list-muted-color: var(--global-muted-color);
+    --list-emphasis-color: var(--global-emphasis-color);
+    --list-primary-color: var(--global-primary-background);
+    --list-secondary-color: var(--global-secondary-background);
+    --list-bullet-icon-color: var(--global-color);
+    --list-divider-margin-top: var(--global-small-margin);
+    --list-divider-border-width: var(--global-border-width);
+    --list-divider-border: var(--global-border);
+    --list-striped-padding-vertical: var(--global-small-margin);
+    --list-striped-padding-horizontal: var(--global-small-margin);
+    --list-striped-background: var(--global-muted-background);
+    --list-large-margin-top: var(--global-margin);
+    --list-large-divider-margin-top: var(--global-margin);
+    --list-large-striped-padding-vertical: var(--global-margin);
+    --list-large-striped-padding-horizontal: var(--global-small-margin);
+
+    // Inverse
+    --inverse-list-muted-color: var(--inverse-global-muted-color);
+    --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
+    --inverse-list-primary-color: var(--inverse-global-primary-background);
+    --inverse-list-secondary-color: var(--inverse-global-primary-background);
+    --inverse-list-divider-border: var(--inverse-global-border);
+    --inverse-list-striped-background: var(--inverse-global-muted-background);
+    --inverse-list-bullet-icon-color: var(--inverse-global-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';
@@ -32,7 +33,6 @@ export * from './components/Dropdown';
 export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
-export * from './components/ComponentProvider';
 export * from './components/ConfigProvider';
 export * from './components/Width';
 export * from './components/Text';

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';
@@ -32,7 +33,6 @@ export * from './components/Dropdown';
 export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
-export * from './components/ComponentProvider';
 export * from './components/ConfigProvider';
 export * from './components/Width';
 export * from './components/Text';

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/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';