@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,654 @@
+// Name:            Navbar
+// Description:     Component to create horizontal navigation bars
+//
+// Component:       `uk-navbar`
+//
+// Sub-objects:     `uk-navbar-container`
+//                  `uk-navbar-left`
+//                  `uk-navbar-right`
+//                  `uk-navbar-center`
+//                  `uk-navbar-center-left`
+//                  `uk-navbar-center-right`
+//                  `uk-navbar-nav`
+//                  `uk-navbar-item`
+//                  `uk-navbar-item-rest`
+//                  `uk-navbar-toggle`
+//                  `uk-navbar-subtitle`
+//                  `uk-navbar-dropbar`
+//
+// Adopted:         `uk-navbar-dropdown` + Modifiers
+//                  `uk-navbar-dropdown-nav`
+//                  `uk-navbar-dropdown-grid`
+//                  `uk-navbar-toggle-icon`
+//
+// Modifiers:       `uk-navbar-primary`
+//                  `uk-navbar-transparent`
+//                  `uk-navbar-sticky`
+//                  `uk-navbar-dropdown-stack`
+//
+// States:          `uk-active`
+//                  `uk-parent`
+//                  `uk-open`
+//
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Navbar
+ ========================================================================== */
+
+/*
+ * 1. Create position context to center navbar group
+ */
+
+.uk-navbar {
+    display: flex;
+
+    /* 1 */
+    position: relative;
+    @if mixin-exists(hook-navbar) {
+        @include hook-navbar;
+    }
+}
+
+
+/* Container
+ ========================================================================== */
+
+.uk-navbar-container:not(.uk-navbar-transparent) {
+    background: var(--navbar-background);
+    @if mixin-exists(hook-navbar-container) {
+        @include hook-navbar-container;
+    }
+}
+
+// Color Mode
+@if $navbar-color-mode == light {
+    .uk-navbar-container:not(.uk-navbar-transparent) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $navbar-color-mode == dark {
+    .uk-navbar-container:not(.uk-navbar-transparent) {
+        @extend .uk-dark !optional;
+    }
+}
+
+/*
+ * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
+ */
+
+.uk-navbar-container > ::before,
+.uk-navbar-container > ::after {
+    display: none !important;
+}
+
+
+/* Groups
+ ========================================================================== */
+
+/*
+ * 1. Align navs and items vertically if they have a different height
+ * 2. Note: IE 11 requires an extra `div` which affects the center selector
+ */
+
+.uk-navbar-left,
+.uk-navbar-right,
+/* 2. [class*='uk-navbar-center'], */
+.uk-navbar-center,
+.uk-navbar-center-left > *,
+.uk-navbar-center-right > * {
+    /* 1 */
+    align-items: center;
+    display: flex;
+}
+
+/*
+ * Horizontal alignment
+ * 1. Create position context for centered navbar with sub groups (left/right)
+ * 2. Fix text wrapping if content is larger than 50% of the container.
+ * 3. Needed for dropdowns because a new position context is created
+ *    `z-index` must be smaller than off-canvas
+ * 4. Align sub groups for centered navbar
+ */
+
+.uk-navbar-right {
+    margin-left: auto;
+}
+
+.uk-navbar-center:only-child {
+    margin-left: auto;
+    margin-right: auto;
+
+    /* 1 */
+    position: relative;
+}
+
+.uk-navbar-center:not(:only-child) {
+    box-sizing: border-box;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    /* 2 */
+    width: max-content;
+
+    /* 3 */
+    z-index: calc(var(--global-z-index) + 10);
+}
+
+/* 4 */
+.uk-navbar-center-left,
+.uk-navbar-center-right {
+    position: absolute;
+    top: 0;
+}
+
+.uk-navbar-center-left {
+    right: 100%;
+}
+
+.uk-navbar-center-right {
+    left: 100%;
+}
+
+[class*='uk-navbar-center-'] {
+    box-sizing: border-box;
+    width: max-content;
+}
+
+
+/* Nav
+ ========================================================================== */
+
+/*
+ * 1. Reset list
+ */
+
+.uk-navbar-nav {
+    display: flex;
+    list-style: none;
+
+    /* 1 */
+    margin: 0;
+    padding: 0;
+}
+
+.uk-navbar-nav .uk-nav-item {
+    display: inline-block;
+    flex: none;
+}
+
+/*
+ * Allow items to wrap into the next line
+ * Only not `absolute` positioned groups
+ */
+
+.uk-navbar-left,
+.uk-navbar-right,
+.uk-navbar-center:only-child {
+    flex-wrap: wrap;
+}
+
+/*
+ * Items
+ * 1. Center content vertically and horizontally
+ * 2. Dimensions
+ * 3. Style
+ * 4. Required for `a`
+ */
+
+.uk-navbar-nav > li > a, /* Nav item */
+.uk-navbar-nav .uk-nav-item-rest,
+.uk-navbar-item, /* Content item */
+.uk-navbar-toggle { /* Clickable item */
+    align-items: center;
+
+    /* 2 */
+    box-sizing: border-box;
+
+    /* 1 */
+    display: flex;
+    font-family: var(--navbar-nav-item-font-family);
+
+    /* 3 */
+    font-size: var(--navbar-nav-item-font-size);
+    justify-content: center;
+    min-height: var(--navbar-nav-item-height);
+    padding: 0 var(--navbar-nav-item-padding-horizontal);
+
+    /* 4 */
+    text-decoration: none;
+}
+
+/*
+ * Nav items
+ */
+
+.uk-navbar-nav > li > a {
+    color: var(--navbar-nav-item-color);
+    @if mixin-exists(hook-navbar-nav-item) {
+        @include hook-navbar-nav-item;
+    }
+}
+
+/*
+ * Hover
+ * Apply hover style also to focus state and if dropdown is opened
+ */
+
+.uk-navbar-nav > li:hover > a,
+.uk-navbar-nav > li > a:focus,
+.uk-navbar-nav > li > a.uk-open {
+    color: var(--navbar-nav-item-hover-color);
+    outline: none;
+    @if mixin-exists(hook-navbar-nav-item-hover) {
+        @include hook-navbar-nav-item-hover;
+    }
+}
+
+/* OnClick */
+.uk-navbar-nav > li > a:active {
+    color: var(--navbar-nav-item-onclick-color);
+    @if mixin-exists(hook-navbar-nav-item-onclick) {
+        @include hook-navbar-nav-item-onclick;
+    }
+}
+
+/* Active */
+.uk-navbar-nav > li.uk-active > a {
+    color: var(--navbar-nav-item-active-color);
+    @if mixin-exists(hook-navbar-nav-item-active) {
+        @include hook-navbar-nav-item-active;
+    }
+}
+
+
+/* Item
+ ========================================================================== */
+
+.uk-navbar-item {
+    color: var(--navbar-item-color);
+    @if mixin-exists(hook-navbar-item) {
+        @include hook-navbar-item;
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-navbar-item > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Toggle
+ ========================================================================== */
+
+.uk-navbar-toggle {
+    color: var(--navbar-toggle-color);
+    @if mixin-exists(hook-navbar-toggle) {
+        @include hook-navbar-toggle;
+    }
+}
+
+.uk-navbar-toggle:hover,
+.uk-navbar-toggle:focus,
+.uk-navbar-toggle.uk-open {
+    color: var(--navbar-toggle-hover-color);
+    outline: none;
+    text-decoration: none;
+    @if mixin-exists(hook-navbar-toggle-hover) {
+        @include hook-navbar-toggle-hover;
+    }
+}
+
+/*
+ * Icon
+ * Adopts `uk-icon`
+ */
+
+.uk-navbar-toggle-icon {
+    @if mixin-exists(hook-navbar-toggle-icon) {
+        @include hook-navbar-toggle-icon;
+    }
+}
+
+/* Hover + Focus */
+:hover > .uk-navbar-toggle-icon,
+:focus > .uk-navbar-toggle-icon {
+    @if mixin-exists(hook-navbar-toggle-icon-hover) {
+        @include hook-navbar-toggle-icon-hover;
+    }
+}
+
+
+/* Subtitle
+ ========================================================================== */
+
+.uk-navbar-subtitle {
+    font-size: var(--navbar-subtitle-font-size);
+    @if mixin-exists(hook-navbar-subtitle) {
+        @include hook-navbar-subtitle;
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+.uk-navbar-primary {
+    @if mixin-exists(hook-navbar-primary) {
+        @include hook-navbar-primary;
+    }
+}
+
+.uk-navbar-transparent {
+    @if mixin-exists(hook-navbar-transparent) {
+        @include hook-navbar-transparent;
+    }
+}
+
+.uk-navbar-sticky {
+    @if mixin-exists(hook-navbar-sticky) {
+        @include hook-navbar-sticky;
+    }
+}
+
+
+/* Dropdown
+ ========================================================================== */
+
+/*
+ * Adopts `uk-dropdown`
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Set a default width
+ * 4. Style
+ */
+
+.uk-navbar-dropdown {
+    background: var(--navbar-dropdown-background);
+
+    /* 3 */
+    box-sizing: border-box;
+    color: var(--navbar-dropdown-color);
+
+    /* 1 */
+    display: block;
+
+    /* 4 */
+    padding: var(--navbar-dropdown-padding);
+
+    /* 2 */
+    position: absolute;
+    width: var(--navbar-dropdown-width);
+    z-index: var(--navbar-dropdown-z-index);
+    @if mixin-exists(hook-navbar-dropdown) {
+        @include hook-navbar-dropdown;
+    }
+}
+
+/* Hide */
+.uk-navbar-dropdown.uk-hidden {
+    display: none;
+}
+
+/*
+ * Transform origin
+ */
+
+[class*='uk-navbar-dropdown-left-top'] {
+    transform-origin: 100% 0;
+}
+
+[class*='uk-navbar-dropdown-bottom'] {
+
+}
+
+[class*='uk-navbar-dropdown-left'] {
+
+}
+
+[class*='uk-navbar-dropdown-right-top'] {
+    transform-origin: 0 0;
+}
+
+/*
+ * Grid
+ * Adopts `uk-grid`
+ */
+
+/* Gutter Horizontal */
+.uk-navbar-dropdown-grid {
+    margin-left: calc(var(--navbar-dropdown-grid-gutter-horizontal) * -1);
+}
+
+.uk-navbar-dropdown-grid > * {
+    padding-left: var(--navbar-dropdown-grid-gutter-horizontal);
+}
+
+/* Gutter Vertical */
+.uk-navbar-dropdown-grid > .uk-grid-margin {
+    margin-top: var(--navbar-dropdown-grid-gutter-vertical);
+}
+
+/* Stack */
+.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * {
+    width: 100% !important;
+}
+
+/*
+ * Width modifier
+ */
+
+.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) {
+    width: calc(var(--navbar-dropdown-width) * 2);
+}
+
+.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) {
+    width: calc(var(--navbar-dropdown-width) * 3);
+}
+
+.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) {
+    width: calc(var(--navbar-dropdown-width) * 4);
+}
+
+.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
+    width: calc(var(--navbar-dropdown-width) * 5);
+}
+
+/*
+ * Dropbar modifier
+ */
+
+.uk-navbar-dropdown-dropbar {
+    margin-bottom: var(--navbar-dropdown-dropbar-margin-bottom);
+    margin-top: var(--navbar-dropdown-dropbar-margin-top);
+    @if mixin-exists(hook-navbar-dropdown-dropbar) {
+        @include hook-navbar-dropdown-dropbar;
+    }
+}
+
+
+/* Dropdown Nav
+ * Adopts `uk-nav`
+ ========================================================================== */
+
+.uk-navbar-dropdown-nav {
+    @if mixin-exists(hook-navbar-dropdown-nav) {
+        @include hook-navbar-dropdown-nav;
+    }
+}
+
+/*
+ * Items
+ */
+
+.uk-navbar-dropdown-nav > li > a {
+    color: var(--navbar-dropdown-nav-item-color);
+    @if mixin-exists(hook-navbar-dropdown-nav-item) {
+        @include hook-navbar-dropdown-nav-item;
+    }
+}
+
+/* Hover + Focus */
+.uk-navbar-dropdown-nav > li > a:hover,
+.uk-navbar-dropdown-nav > li > a:focus {
+    color: var(--navbar-dropdown-nav-item-hover-color);
+    @if mixin-exists(hook-navbar-dropdown-nav-item-hover) {
+        @include hook-navbar-dropdown-nav-item-hover;
+    }
+}
+
+/* Active */
+.uk-navbar-dropdown-nav > li.uk-active > a {
+    color: var(--navbar-dropdown-nav-item-active-color);
+    @if mixin-exists(hook-navbar-dropdown-nav-item-active) {
+        @include hook-navbar-dropdown-nav-item-active;
+    }
+}
+
+/*
+ * Header
+ */
+
+.uk-navbar-dropdown-nav .uk-nav-header {
+    color: var(--navbar-dropdown-nav-header-color);
+    @if mixin-exists(hook-navbar-dropdown-nav-header) {
+        @include hook-navbar-dropdown-nav-header;
+    }
+}
+
+/*
+ * Divider
+ */
+
+.uk-navbar-dropdown-nav .uk-nav-divider {
+    border-top: var(--navbar-dropdown-nav-divider-border-width) solid var(--navbar-dropdown-nav-divider-border);
+    @if mixin-exists(hook-navbar-dropdown-nav-divider) {
+        @include hook-navbar-dropdown-nav-divider;
+    }
+}
+
+/*
+ * Sublists
+ */
+
+.uk-navbar-dropdown-nav .uk-nav-sub a {
+    color: var(--navbar-dropdown-nav-sublist-item-color);
+}
+
+.uk-navbar-dropdown-nav .uk-nav-sub a:hover,
+.uk-navbar-dropdown-nav .uk-nav-sub a:focus {
+    color: var(--navbar-dropdown-nav-sublist-item-hover-color);
+}
+
+.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a {
+    color: var(--navbar-dropdown-nav-sublist-item-active-color);
+}
+
+
+/* Dropbar
+ ========================================================================== */
+
+.uk-navbar-dropbar {
+    background: var(--navbar-dropbar-background);
+    @if mixin-exists(hook-navbar-dropbar) {
+        @include hook-navbar-dropbar;
+    }
+}
+
+/*
+ * Slide modifier
+ */
+
+.uk-navbar-dropbar-slide {
+    left: 0;
+    position: absolute;
+    right: 0;
+    z-index: var(--navbar-dropbar-z-index);
+    @if mixin-exists(hook-navbar-dropbar-slide) {
+        @include hook-navbar-dropbar-slide;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-navbar-misc) {
+    @include hook-navbar-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --navbar-background: var(--global-muted-background);
+    --navbar-nav-item-height: #{$navbar-nav-item-height};
+    --navbar-nav-item-padding-horizontal: #{$navbar-nav-item-padding-horizontal};
+    --navbar-nav-item-color: var(--global-muted-color);
+    --navbar-nav-item-font-size: var(--global-font-size);
+    --navbar-nav-item-font-family: var(--global-font-family);
+    --navbar-nav-item-hover-color: var(--global-color);
+    --navbar-nav-item-onclick-color: var(--global-emphasis-color);
+    --navbar-nav-item-active-color: var(--global-emphasis-color);
+    --navbar-item-color: var(--global-color);
+    --navbar-toggle-color: var(--global-muted-color);
+    --navbar-toggle-hover-color: var(--global-color);
+    --navbar-subtitle-font-size: var(--global-small-font-size);
+    --navbar-dropdown-z-index: #{$global-z-index + 20};
+    --navbar-dropdown-width: #{$navbar-dropdown-width};
+    --navbar-dropdown-margin: #{$navbar-dropdown-margin};
+    --navbar-dropdown-padding: #{$navbar-dropdown-padding};
+    --navbar-dropdown-background: var(--global-muted-background);
+    --navbar-dropdown-color: var(--global-color);
+    --navbar-dropdown-grid-gutter-horizontal: var(--global-gutter);
+    --navbar-dropdown-grid-gutter-vertical: var(--navbar-dropdown-grid-gutter-horizontal);
+    --navbar-dropdown-dropbar-margin-top: #{$navbar-dropdown-dropbar-margin-top};
+    --navbar-dropdown-dropbar-margin-bottom: var(--navbar-dropdown-dropbar-margin-top);
+    --navbar-dropdown-nav-item-color: var(--global-muted-color);
+    --navbar-dropdown-nav-item-hover-color: var(--global-color);
+    --navbar-dropdown-nav-item-active-color: var(--global-emphasis-color);
+    --navbar-dropdown-nav-header-color: var(--global-emphasis-color);
+    --navbar-dropdown-nav-divider-border-width: var(--global-border-width);
+    --navbar-dropdown-nav-divider-border: var(--global-border);
+    --navbar-dropdown-nav-sublist-item-color: var(--global-muted-color);
+    --navbar-dropdown-nav-sublist-item-hover-color: var(--global-color);
+    --navbar-dropdown-nav-sublist-item-active-color: var(--global-emphasis-color);
+    --navbar-dropbar-background: var(--navbar-dropdown-background);
+    --navbar-dropbar-z-index: #{$global-z-index - 20};
+
+    // Inverse
+    --inverse-navbar-background: var(--inverse-global-muted-background);
+    --inverse-navbar-nav-item-color: var(--inverse-global-muted-color);
+    --inverse-navbar-nav-item-hover-color: var(--inverse-global-color);
+    --inverse-navbar-nav-item-onclick-color: var(--inverse-global-emphasis-color);
+    --inverse-navbar-nav-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-navbar-item-color: var(--inverse-global-color);
+    --inverse-navbar-toggle-color: var(--inverse-global-muted-color);
+    --inverse-navbar-toggle-hover-color: var(--inverse-global-color);
+    --inverse-navbar-dropdown-background: var(--inverse-global-muted-background);
+    --inverse-navbar-dropdown-color: var(--inverse-global-muted-color);
+    --inverse-navbar-dropdown-nav-item-color: var(--inverse-global-muted-color);
+    --inverse-navbar-dropdown-nav-item-hover-color: var(--inverse-global-color);
+    --inverse-navbar-dropdown-nav-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-navbar-dropdown-nav-header-color: var(--inverse-global-emphasis-color);
+    --inverse-navbar-dropdown-nav-divider-border: var(--inverse-global-border);
+    --inverse-navbar-dropdown-nav-sublist-item-color: var(--inverse-global-muted-color);
+    --inverse-navbar-dropdown-nav-sublist-item-hover-color: var(--inverse-global-color);
+    --inverse-navbar-dropdown-nav-sublist-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-navbar-dropbar-background: var(--inverse-navbar-dropdown-background);
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export declare type SectionOwnProps = {
+    color?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
+    preserveColor?: boolean;
+    size?: 'xsmall' | 'small' | 'large' | 'xlarge';
+};
+export declare type SectionProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, SectionOwnProps>;
+declare const defaultElement = "section";
+export declare function Section<E extends React.ElementType = typeof defaultElement>(props: SectionProps<E>): JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import './index.scss';
+const defaultElement = 'section';
+export function Section(props) {
+    const { className, color, preserveColor, size, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames('uk-section', {
+            [`uk-section-${size}`]: size !== undefined,
+            [`uk-section-${color}`]: color !== undefined,
+            'uk-preserve-color': preserveColor,
+        }, className), component: defaultElement, ...restProps }));
+}