@broxus/react-uikit 0.1.0

package/dist/cjs/components/Grid/index.scss

@@ -0,0 +1,656 @@
+// Name:            Grid
+// Description:     Component to create responsive, fluid and nestable grids
+//
+// Component:       `uk-grid`
+//
+// Modifiers:       `uk-grid-xsmall`
+//                  `uk-grid-small`
+//                  `uk-grid-medium`
+//                  `uk-grid-large`
+//                  `uk-grid-collapse`
+//                  `uk-grid-divider`
+//                  `uk-grid-match`
+//                  `uk-grid-stack`
+//                  `uk-grid-margin`
+//                  `uk-grid-margin-small`
+//                  `uk-grid-margin-medium`
+//                  `uk-grid-margin-large`
+//                  `uk-grid-margin-collapse`
+//
+// Sub-modifier:    `uk-grid-item-match`
+//
+// States:          `uk-first-column`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Grid
+ ========================================================================== */
+
+/*
+ * 1. Allow cells to wrap into the next line
+ * 2. Reset list
+ * 3. Horizontal gutter
+ * 4. Vertical gutter
+ */
+
+.uk-grid {
+    display: flex;
+
+    /* 1 */
+    flex-wrap: wrap;
+
+    /* 2 */
+    list-style: none;
+
+    /* 3 */
+    margin: 0 0 0 calc(var(--grid-gutter-horizontal) * -1);
+    padding: 0;
+
+    /* 4 */
+    row-gap: var(--grid-gutter-vertical);
+}
+
+/*
+ * Grid cell
+ * 1. Horizontal gutter
+ * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
+ * Reset margin for e.g. paragraphs
+ */
+
+.uk-grid > * {
+    margin: 0;
+
+    /* 1 */
+    padding-left: var(--grid-gutter-horizontal);
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-grid > * > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Gutter
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+/* Vertical */
+.uk-grid + .uk-grid,
+* + .uk-grid-margin {
+    margin-top: var(--grid-gutter-vertical);
+}
+
+.uk-grid > .uk-grid-margin {
+    margin-top: 0;
+}
+
+
+/* Phones portrait and smaller */
+@media (max-width: $breakpoint-xsmall-max) {
+    /* Horizontal */
+    .uk-grid {
+        margin-left: calc(var(--grid-gutter-horizontal-s) * -1);
+        row-gap: var(--grid-gutter-vertical-s);
+    }
+
+    .uk-grid > * {
+        padding-left: var(--grid-gutter-horizontal-s);
+    }
+
+    /* Vertical */
+    .uk-grid + .uk-grid,
+    * + .uk-grid-margin {
+        margin-top: var(--grid-gutter-vertical-s);
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    /* Horizontal */
+    .uk-grid {
+        margin-left: calc(var(--grid-gutter-horizontal-m) * -1);
+        row-gap: var(--grid-gutter-vertical-m);
+    }
+
+    .uk-grid > * {
+        padding-left: var(--grid-gutter-horizontal-m);
+    }
+
+    /* Vertical */
+    .uk-grid + .uk-grid,
+    * + .uk-grid-margin {
+        margin-top: var(--grid-gutter-vertical-m);
+    }
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    /* Horizontal */
+    .uk-grid {
+        margin-left: calc(var(--grid-gutter-horizontal-l) * -1);
+        row-gap: var(--grid-gutter-vertical-l);
+    }
+
+    .uk-grid > * {
+        padding-left: var(--grid-gutter-horizontal-l);
+    }
+
+    /* Vertical */
+    .uk-grid + .uk-grid,
+    * + .uk-grid-margin {
+        margin-top: var(--grid-gutter-vertical-l);
+    }
+}
+
+/*
+ * XSmall
+ */
+
+/* Horizontal */
+.uk-grid-xsmall,
+.uk-grid-column-xsmall {
+    margin-left: calc(var(--grid-xsmall-gutter-horizontal) * -1);
+}
+
+.uk-grid-xsmall,
+.uk-grid-row-xsmall {
+    row-gap: var(--grid-xsmall-gutter-vertical);
+}
+
+.uk-grid-xsmall > *,
+.uk-grid-column-xsmall > * {
+    padding-left: var(--grid-xsmall-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-xsmall,
+.uk-grid + .uk-grid-row-xsmall,
+* + .uk-grid-margin-xsmall {
+    margin-top: var(--grid-xsmall-gutter-vertical);
+}
+
+/*
+ * Small
+ */
+
+/* Horizontal */
+.uk-grid-small,
+.uk-grid-column-small {
+    margin-left: calc(var(--grid-small-gutter-horizontal) * -1);
+}
+
+.uk-grid-small,
+.uk-grid-row-small {
+    row-gap: var(--grid-small-gutter-vertical);
+}
+
+.uk-grid-small > *,
+.uk-grid-column-small > * {
+    padding-left: var(--grid-small-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-small,
+.uk-grid + .uk-grid-row-small,
+* + .uk-grid-margin-small {
+    margin-top: var(--grid-small-gutter-vertical);
+}
+
+/*
+ * Medium
+ */
+
+/* Horizontal */
+.uk-grid-medium,
+.uk-grid-column-medium {
+    margin-left: calc(var(--grid-medium-gutter-horizontal) * -1);
+}
+
+.uk-grid-medium,
+.uk-grid-row-medium {
+    row-gap: var(--grid-medium-gutter-vertical);
+}
+
+.uk-grid-medium > *,
+.uk-grid-column-medium > * {
+    padding-left: var(--grid-medium-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-medium,
+.uk-grid + .uk-grid-row-medium,
+* + .uk-grid-margin-medium {
+    margin-top: var(--grid-medium-gutter-vertical);
+}
+
+/*
+ * Large
+ */
+
+/* Horizontal */
+.uk-grid-large,
+.uk-grid-column-large {
+    margin-left: calc(var(--grid-large-gutter-horizontal) * -1);
+}
+
+.uk-grid-large,
+.uk-grid-row-large {
+    row-gap: var(--grid-large-gutter-vertical);
+}
+
+.uk-grid-large > *,
+.uk-grid-column-large > * {
+    padding-left: var(--grid-large-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-large,
+.uk-grid + .uk-grid-row-large,
+* + .uk-grid-margin-large {
+    margin-top: var(--grid-large-gutter-vertical);
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    /* Horizontal */
+    .uk-grid-large,
+    .uk-grid-column-large {
+        margin-left: calc(var(--grid-large-gutter-horizontal-l) * -1);
+    }
+
+    .uk-grid-large,
+    .uk-grid-row-large {
+        row-gap: var(--grid-large-gutter-vertical-l);
+    }
+
+    .uk-grid-large > *,
+    .uk-grid-column-large > * {
+        padding-left: var(--grid-large-gutter-horizontal-l);
+    }
+
+    /* Vertical */
+    .uk-grid + .uk-grid-large,
+    .uk-grid + .uk-grid-row-large,
+    * + .uk-grid-margin-large {
+        margin-top: var(--grid-large-gutter-vertical-l);
+    }
+}
+
+/*
+ * Collapse
+ */
+
+/* Horizontal */
+.uk-grid-collapse,
+.uk-grid-column-collapse {
+    margin-left: 0;
+}
+
+.uk-grid-collapse,
+.uk-grid-row-collapse {
+    row-gap: 0;
+}
+
+.uk-grid-collapse > *,
+.uk-grid-column-collapse > * {
+    padding-left: 0;
+}
+
+/* Vertical */
+.uk-grid + .uk-grid-collapse,
+.uk-grid + .uk-grid-row-collapse {
+    margin-top: 0;
+}
+
+
+/* Match child of a grid cell
+ ========================================================================== */
+
+/*
+ * Behave like a block element
+ * 1. Wrap into the next line
+ * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
+ * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
+ */
+
+.uk-grid-match > *,
+.uk-grid-item-match {
+    display: flex;
+
+    /* 1 */
+    flex-wrap: wrap;
+}
+
+.uk-grid-match > * > :not([class*='uk-width']),
+.uk-grid-item-match > :not([class*='uk-width']) {
+    /* 2 */
+    box-sizing: border-box;
+
+    /* 3 */
+    flex: auto;
+    width: 100%;
+}
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-grid-divider > * {
+    padding-left: calc(var(--grid-gutter-horizontal) * 2);
+    position: relative;
+}
+
+.uk-grid-divider > :not(.uk-first-column)::before {
+    border-left: var(--grid-divider-border-width) solid var(--grid-divider-border);
+    bottom: 0;
+    content: '';
+    left: var(--grid-gutter-horizontal);
+    position: absolute;
+    top: 0;
+    @if mixin-exists(hook-grid-divider-horizontal) {
+        @include hook-grid-divider-horizontal
+    };
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+    border-top: var(--grid-divider-border-width) solid var(--grid-divider-border);
+    content: '';
+    left: calc(var(--grid-gutter-horizontal) * 2);
+    position: absolute;
+    right: 0;
+    top: calc(var(--grid-gutter-vertical) * -1);
+    @if mixin-exists(hook-grid-divider-vertical) {
+        @include hook-grid-divider-vertical
+    };
+}
+
+/*
+ * Default
+ */
+
+.uk-grid-divider.uk-grid-stack {
+    row-gap: unset;
+}
+
+/* Horizontal */
+.uk-grid-divider {
+    margin-left: calc(var(--grid-gutter-horizontal) * -2);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-stack > .uk-grid-margin {
+    margin-top: calc(var(--grid-gutter-vertical) * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    /* Horizontal */
+    .uk-grid-divider {
+        margin-left: calc(var(--grid-gutter-horizontal-l) * -2);
+    }
+
+    .uk-grid-divider > * {
+        padding-left: calc(var(--grid-gutter-horizontal-l) * 2);
+    }
+
+    .uk-grid-divider > :not(.uk-first-column)::before {
+        left: var(--grid-gutter-horizontal-l);
+    }
+
+    /* Vertical */
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin {
+        margin-top: calc(var(--grid-gutter-vertical-l) * 2);
+    }
+
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+        left: calc(var(--grid-gutter-horizontal-l) * 2);
+        top: calc(var(--grid-gutter-vertical-l) * -1);
+    }
+}
+
+/*
+ * Xsmall
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-xsmall,
+.uk-grid-divider.uk-grid-column-xsmall {
+    margin-left: calc(var(--grid-xsmall-gutter-horizontal) * -2);
+}
+
+.uk-grid-divider.uk-grid-xsmall > *,
+.uk-grid-divider.uk-grid-column-xsmall > * {
+    padding-left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
+}
+
+.uk-grid-divider.uk-grid-xsmall > :not(.uk-first-column)::before,
+.uk-grid-divider.uk-grid-column-xsmall > :not(.uk-first-column)::before {
+    left: var(--grid-xsmall-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-xsmall.uk-grid-stack > .uk-grid-margin,
+.uk-grid-divider.uk-grid-row-xsmall.uk-grid-stack > .uk-grid-margin {
+    margin-top: calc(var(--grid-xsmall-gutter-vertical) * 2);
+}
+
+.uk-grid-divider.uk-grid-xsmall.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
+    top: calc(var(--grid-xsmall-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-row-xsmall.uk-grid-stack > .uk-grid-margin::before {
+    top: calc(var(--grid-xsmall-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-column-xsmall.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-xsmall-gutter-horizontal) * 2);
+}
+
+/*
+ * Small
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-small,
+.uk-grid-divider.uk-grid-column-small {
+    margin-left: calc(var(--grid-small-gutter-horizontal) * -2);
+}
+
+.uk-grid-divider.uk-grid-small > *,
+.uk-grid-divider.uk-grid-column-small > * {
+    padding-left: calc(var(--grid-small-gutter-horizontal) * 2);
+}
+
+.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before,
+.uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before {
+    left: var(--grid-small-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
+.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin {
+    margin-top: calc(var(--grid-small-gutter-vertical) * 2);
+}
+
+.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-small-gutter-horizontal) * 2);
+    top: calc(var(--grid-small-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before {
+    top: calc(var(--grid-small-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-small-gutter-horizontal) * 2);
+}
+
+/*
+ * Medium
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-medium,
+.uk-grid-divider.uk-grid-column-medium {
+    margin-left: calc(var(--grid-medium-gutter-horizontal) * -2);
+}
+
+.uk-grid-divider.uk-grid-medium > *,
+.uk-grid-divider.uk-grid-column-medium > * {
+    padding-left: calc(var(--grid-medium-gutter-horizontal) * 2);
+}
+
+.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before,
+.uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before {
+    left: var(--grid-medium-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
+.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin {
+    margin-top: calc(var(--grid-medium-gutter-vertical) * 2);
+}
+
+.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-medium-gutter-horizontal) * 2);
+    top: calc(var(--grid-medium-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before {
+    top: calc(var(--grid-medium-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-medium-gutter-horizontal) * 2);
+}
+
+/*
+ * Large
+ */
+
+/* Horizontal */
+.uk-grid-divider.uk-grid-large,
+.uk-grid-divider.uk-grid-column-large {
+    margin-left: calc(var(--grid-large-gutter-horizontal) * -2);
+}
+
+.uk-grid-divider.uk-grid-large > *,
+.uk-grid-divider.uk-grid-column-large > * {
+    padding-left: calc(var(--grid-large-gutter-horizontal) * 2);
+}
+
+.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
+.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
+    left: var(--grid-large-gutter-horizontal);
+}
+
+/* Vertical */
+.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
+.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
+    margin-top: calc(var(--grid-large-gutter-vertical) * 2);
+}
+
+.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-large-gutter-horizontal) * 2);
+    top: calc(var(--grid-large-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
+    top: calc(var(--grid-large-gutter-vertical) * -1);
+}
+
+.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
+    left: calc(var(--grid-large-gutter-horizontal) * 2);
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    /* Horizontal */
+    .uk-grid-divider.uk-grid-large,
+    .uk-grid-divider.uk-grid-column-large {
+        margin-left: calc(var(--grid-large-gutter-horizontal-l) * -2);
+    }
+
+    .uk-grid-divider.uk-grid-large > *,
+    .uk-grid-divider.uk-grid-column-large > * {
+        padding-left: calc(var(--grid-large-gutter-horizontal-l) * 2);
+    }
+
+    .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
+    .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
+        left: var(--grid-large-gutter-horizontal-l);
+    }
+
+    /* Vertical */
+    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
+    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
+        margin-top: calc(var(--grid-large-gutter-vertical-l) * 2);
+    }
+
+    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+        left: calc(var(--grid-large-gutter-horizontal-l) * 2);
+        top: calc(var(--grid-large-gutter-vertical-l) * -1);
+    }
+
+    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
+        top: calc(var(--grid-large-gutter-vertical-l) * -1);
+    }
+
+    .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
+        left: calc(var(--grid-large-gutter-horizontal-l) * 2);
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-grid-misc) {
+    @include hook-grid-misc
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --grid-gutter-horizontal: var(--global-gutter);
+    --grid-gutter-vertical: var(--grid-gutter-horizontal);
+    --grid-gutter-horizontal-s: var(--global-small-gutter);
+    --grid-gutter-vertical-s: var(--grid-gutter-horizontal-s);
+    --grid-gutter-horizontal-m: var(--global-medium-gutter);
+    --grid-gutter-vertical-m: var(--grid-gutter-horizontal-m);
+    --grid-gutter-horizontal-l: var(--global-large-gutter);
+    --grid-gutter-vertical-l: var(--grid-gutter-horizontal-l);
+    --grid-xsmall-gutter-horizontal: var(--global-xsmall-gutter);
+    --grid-xsmall-gutter-vertical: var(--grid-xsmall-gutter-horizontal);
+    --grid-small-gutter-horizontal: var(--global-small-gutter);
+    --grid-small-gutter-vertical: var(--grid-small-gutter-horizontal);
+    --grid-medium-gutter-horizontal: var(--global-medium-gutter);
+    --grid-medium-gutter-vertical: var(--grid-medium-gutter-horizontal);
+    --grid-large-gutter-horizontal: var(--global-large-gutter);
+    --grid-large-gutter-vertical: var(--grid-large-gutter-horizontal);
+    --grid-large-gutter-horizontal-l: var(--global-xlarge-gutter);
+    --grid-large-gutter-vertical-l: var(--grid-large-gutter-horizontal-l);
+    --grid-divider-border-width: var(--global-border-width);
+    --grid-divider-border: var(--global-border);
+
+    // Inverse
+    --inverse-grid-divider-border: var(--inverse-global-border);
+}

package/dist/cjs/components/Heading/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export declare type HeadingOwnProps = {
+    decoration?: 'bullet' | 'divider' | 'line';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
+};
+export declare type HeadingProps<E extends React.ElementType> = PolymorphicComponentProps<E, HeadingOwnProps>;
+declare const defaultElement = "div";
+export declare function Heading<E extends React.ElementType = typeof defaultElement>(props: HeadingProps<E>): JSX.Element;
+export {};

package/dist/cjs/components/Heading/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+require("./index.scss");
+const defaultElement = 'div';
+function Heading(props) {
+    const { children, className, size, decoration, ...restProps } = props;
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)({
+            [`uk-heading-${decoration}`]: decoration !== undefined,
+            [`uk-heading-${size}`]: size !== undefined,
+        }, className), component: defaultElement, ...restProps }, decoration === 'line' ? (React.createElement("span", null, children)) : children));
+}
+exports.Heading = Heading;