@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/Preview/styles/style.scss

@@ -0,0 +1,340 @@
+@use "../../../styles/tokens/color" as *;
+
+@layer components {
+  // ===== PREVIEW GRID STYLES =====
+  .preview-grid {
+    .grid {
+      position: relative;
+      z-index: 0;
+      padding: 0.5em 0;
+      background-color: rgba(0, 0, 0, 0.08);
+      border: 1px solid rgba(0, 0, 0, 0.15);
+    }
+
+    .grid__col,
+    *[class*="grid__col\-\-"] {
+      position: relative;
+      min-height: 1em;
+      line-height: 1.5;
+      background-color: rgba(0, 0, 0, 0.1);
+      background-clip: content-box;
+    }
+  }
+
+  // ===== PREVIEW COMPONENT STYLES =====
+  .previewWrapper {
+    display: flex;
+    flex-flow: column;
+    margin-bottom: 2rem;
+
+    &.isFullscreen {
+      background-color: white;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100vh;
+      z-index: 9999;
+    }
+  }
+  .preview {
+    padding: 24px;
+    border-radius: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .previewLive {
+    transition: all 200ms ease-in-out;
+  }
+
+  .selectWrapper {
+    position: relative;
+    font-family: inherit;
+    font-size: 14px;
+
+    .select {
+      .select__control {
+        cursor: pointer;
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        min-width: 130px;
+      }
+
+      .select__value-container {
+        display: inline-flex;
+        justify-content: flex-end;
+      }
+
+      .select__single-value,
+      .select__option {
+        text-transform: uppercase;
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .select__menu {
+        border-radius: 0 !important;
+        text-align: center;
+      }
+    }
+  }
+
+  .codeExample {
+    margin-bottom: 0;
+    border-radius: 0 !important;
+    padding: 24px;
+
+    .isFullscreen & {
+      flex: 1 1 auto;
+      margin-bottom: 0;
+      padding: 0;
+    }
+  }
+
+  // ===== CODE EXAMPLE STYLES =====
+  .wrapper {
+    position: relative;
+  }
+
+  .copyButton {
+    position: absolute;
+    bottom: -3px;
+    right: 0;
+    transform: translateY(100%);
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    margin-bottom: 0;
+    background: var(--color-fill-contrast);
+
+    &:hover {
+      background: var(--color-fill-disabled);
+    }
+
+    &.success {
+      background: var(--color-fill-positive);
+    }
+
+    &.error {
+      background: var(--color-fill-negative);
+    }
+  }
+
+  .codeTypeToggle {
+    margin-bottom: 0 !important;
+    border-radius: 0 !important;
+    border-bottom: none !important;
+    background-color: var(--color-background-primary);
+
+    &:hover {
+      background-color: var(--color-background-primary);
+    }
+
+    &.isActive {
+      background-color: var(--color-background-contrast);
+      color: var(--color-text-inverse);
+    }
+  }
+
+  // ===== PREVIEW TITLE BAR STYLES =====
+  .bar {
+    margin-top: 1rem !important;
+    margin-bottom: 0.5rem;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    align-items: center;
+    .btn {
+      margin: 0 !important;
+    }
+  }
+
+  // ===== INTERACT COMPONENT STYLES =====
+  .interact {
+    position: relative;
+  }
+
+  .interactContainer {
+    position: relative;
+  }
+
+  // ===== PROPS GROUP STYLES =====
+  .group {
+    width: 90%;
+    box-sizing: border-box;
+    position: relative;
+    margin-bottom: 1em;
+
+    & > * + * {
+      margin-top: 1em;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: -20px;
+      left: -1px;
+      height: 20px;
+      width: 0;
+    }
+  }
+
+  // ===== TOOLTIP STYLES =====
+  .tooltip {
+    position: relative;
+    color: #fff;
+
+    .tooltipTitle {
+      pointer-events: none;
+      position: absolute;
+      width: 200px;
+      text-align: center;
+      padding: 0.5rem;
+      background: black;
+      border-radius: 0.25rem;
+      left: 0;
+      top: 50%;
+      transform: translate(-105%, -50%);
+      opacity: 0;
+      transition: opacity 0.3s ease-in 0.1s;
+
+      &::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translate(100%, -50%);
+        border-style: solid;
+        border-width: 6px 0 6px 8px;
+        border-color: transparent transparent transparent #000;
+      }
+    }
+
+    .tooltipTrigger:hover + .tooltipTitle {
+      opacity: 1;
+    }
+
+    .tooltipTrigger {
+      background: #8b5cf6;
+      color: #fff;
+      font-weight: bold;
+      text-align: center;
+      font-size: 14px;
+      line-height: 16px;
+      height: 16px;
+      width: 16px;
+      margin: 0;
+      border-radius: 50%;
+    }
+  }
+
+  // ===== PROP INPUT STYLES =====
+  .input {
+    display: block;
+    font-size: 16px;
+    color: #000;
+    line-height: 1.3;
+    padding: 0.3em 1.4em 0.2em 0.5em;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #666;
+    border-radius: 0.3em;
+    appearance: none;
+    background-color: #fff;
+
+    &:focus,
+    &:hover {
+      border-color: #666;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  // ===== PROP SELECT STYLES =====
+  .select {
+    display: block;
+    font-size: 16px;
+    color: #000;
+    line-height: 1.3;
+    padding: 0.3em 1.4em 0.2em 0.5em;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #666;
+    border-radius: 0.3em;
+    appearance: none;
+    background-color: #fff;
+    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat, repeat;
+    background-position:
+      right 0.7em top 50%,
+      0 0;
+    background-size:
+      0.65em auto,
+      100%;
+
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:hover {
+      border-color: #666;
+    }
+
+    option {
+      font-weight: normal;
+    }
+  }
+
+  // ===== PROP LABEL WITH TOOLTIP STYLES =====
+  .label {
+    display: inline-block;
+    margin-bottom: 0.25rem;
+  }
+
+  // ===== PROP CHECKBOX STYLES =====
+  .checkbox {
+    margin-right: 0.5rem;
+  }
+
+  // ===== PROP FORM FIELD STYLES =====
+  .field {
+    margin-bottom: 1rem;
+  }
+
+  .defaultValue {
+    color: grey;
+    margin-top: 0.25rem;
+  }
+
+  // ===== BUTTON SHOW PROPS GROUP STYLES =====
+  .button {
+    padding-left: 0;
+  }
+
+  .text {
+    font-size: 20px;
+  }
+
+  .triangle {
+    font-size: 18px;
+    display: inline-block;
+    transition: transform 0.3s;
+
+    &.up {
+      transform: rotate(180deg);
+    }
+
+    &.down {
+      transform: none;
+    }
+  }
+}

package/src/components/Progress/Progress.mdx

@@ -0,0 +1,119 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import Preview from '../../styleguide/Preview';
+
+import Progress from './';
+import Bar, { BarItem } from '../Bar';
+import Icon from '../Icon';
+import { InfoTooltip } from '../Tooltip';
+
+# Progress
+
+Horizontal indicator of a task progress or scalar value.
+
+## Label and value
+
+Authors are required to provide a clear, explanatory Label and textual Value to ensure all users can access the displayed information.
+
+<Preview>
+  <Progress
+    label="Zdieľanie dát: zostavajuce predplatené"
+    value="4.1 GB / 7.9 GB"
+    width={0.8}
+  />
+</Preview>
+
+## Variants
+
+<Preview>
+  {['orange', 'green', 'red', 'blue', 'yellow'].map(color => {
+    const randomWidth = Math.round(Math.random() * 10000) / 10000;
+    return (
+      <Progress
+        label="Example label"
+        key={color}
+        color={color}
+        width={randomWidth}
+        value={`${randomWidth} / 1`}
+      />
+    );
+  })}
+</Preview>
+
+## Complex description of Progress bar
+
+<Preview>
+  <Progress
+    label={
+      <Bar className="justify-content-space-between mb-none" space="small">
+        <BarItem canShrink>
+          <Bar align="start" className="mb-none" space="small" canWrap={false}>
+            <BarItem>
+              <Icon name="data-traffic" />
+            </BarItem>
+            <BarItem canShrink>
+              <p className="text-nowrap mb-none">
+                <span className="text-wrap">Label with icon and tooltip</span>
+                &nbsp;
+                <InfoTooltip>
+                  Tooltip should always be next to label, so we use combination
+                  of .text-nowrap and .text-wrap classes.
+                </InfoTooltip>
+              </p>
+            </BarItem>
+          </Bar>
+        </BarItem>
+        <BarItem>
+          <Bar className="mb-none" space="small">
+            <BarItem>
+              <p className="reset-font-weight mb-none">breaks to left</p>
+            </BarItem>
+            <BarItem>
+              <Icon color="danger" name="error-severe" size="medium" />
+            </BarItem>
+          </Bar>
+        </BarItem>
+      </Bar>
+    }
+    color="red"
+    width={0.4}
+    value={
+      <>
+        <p className="mb-small">
+          <span className="reset-font-weight">Avaible:</span> 4
+          <span className="reset-font-weight"> / 8 GB</span>
+        </p>
+        <Bar align="start" className="mb-none" space="small" canWrap={false}>
+          <BarItem>
+            <Icon name="info" />
+          </BarItem>
+          <BarItem canShrink>
+            <p className="mb-none">
+              <span className="reset-font-weight">
+                Yes we need to use another bar element in label, so icon and
+                text stays on same line. Also this text in
+              </span>{' '}
+              paragraph{' '}
+              <span className="reset-font-weight">
+                {' '}
+                so it has set max-width. If you have label with longer text, you
+                should also use paragraph in there. And one last last think - yes
+                we need to have that many bars in label, so the text doesnt break
+                to newline without icon.
+              </span>
+            </p>
+          </BarItem>
+        </Bar>
+      </>
+    }
+  />
+</Preview>
+
+## Accessibility
+
+Progress component can be used with `role="progressbar"` when it's needed to "indicate that the user's request has been received and the application is making progress toward completing the requested action." [role="progressbar"](https://www.w3.org/TR/wai-aria-1.1/#progressbar).
+
+It's not recommended to use `role="meter"` when the component should represent a scalar value as it's screenreader support is poor.
+
+Since label and textual value are required when using this component, all relevant infomation is provided in an understandable way, not relying on visual representation only. [Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.](https://www.w3.org/TR/WCAG21/#use-of-color)
+
+<ComponentDocs title="<Progress />" component={Progress} />

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import cx from "classnames";
+
+export interface ProgressProps {
+  /** Color of the indicator */
+  color?: "orange" | "green" | "yellow" | "red" | "blue";
+  /** Provides clear instruction on what the horizontal bar represents */
+  label: React.ReactNode;
+  /** Textual representation of the indicator */
+  value: React.ReactNode;
+  /** Width of the progress indicator where 0 = empty, 1 = full */
+  width?: number;
+  className?: string;
+  children?: React.ReactNode;
+  colorMode?: "light" | "dark";
+}
+
+const defaultProps = {
+  color: "orange" as const,
+};
+
+const CLASS_ROOT = "progress"; // class is defined by boosted
+
+export const Progress: React.FC<ProgressProps> = ({
+  color = defaultProps.color,
+  label,
+  value,
+  width,
+  className,
+  colorMode,
+  ...other
+}) => {
+  return (
+    <div
+      className={cx(
+        CLASS_ROOT,
+        {
+          "is-dark": colorMode === "dark",
+          "is-light": colorMode === "light",
+        },
+        className,
+      )}
+      {...other}
+    >
+      <div className={`${CLASS_ROOT}__label`}>{label}</div>
+      <div className={`${CLASS_ROOT}__bar`}>
+        <div
+          className={cx(`${CLASS_ROOT}__indicator`, {
+            [`${CLASS_ROOT}__indicator--${color}`]:
+              color !== defaultProps.color,
+          })}
+          style={{ width: `${width ? width * 100 : 0}%` }}
+        />
+      </div>
+      <div className={`${CLASS_ROOT}__value`}>{value}</div>
+    </div>
+  );
+};
+
+Progress.displayName = "Progress";

package/src/components/Progress/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { Progress } from "./Progress";

package/src/components/Progress/styles/config.scss

@@ -0,0 +1,19 @@
+@use '../../../styles/tokens/color';
+@use '../../../styles/tokens/space';
+
+$layout: (
+  margin-bottom: space.get(),
+);
+
+$bar: (
+  height: space.get('small'),
+  background-color: var(--color-fill-moderate),
+);
+
+$colors: (
+  default: var(--color-surface-secondary),
+  green: var(--color-fill-accent2),
+  red: var(--color-border-negative),
+  blue: var(--color-border-information),
+  yellow: var(--color-border-warning),
+);

package/src/components/Progress/styles/mixins.scss

@@ -0,0 +1,40 @@
+@use "sass:map";
+@use '../../../styles/tokens/space';
+@use '../../../styles/tools/generate';
+@use '../../../styles/typography/config' as typography;
+@use './config';
+
+@mixin base {
+  @include generate.css-map(config.$layout);
+}
+
+@mixin bar {
+  position: relative;
+  margin-bottom: space.get('xsmall');
+
+  @include generate.css-map(config.$bar);
+}
+
+@mixin label {
+  margin-bottom: space.get('xsmall');
+  font-weight: bold;
+}
+
+@mixin value {
+  font-weight: bold;
+
+  @include generate.css-map(typography.$body-text, 'small');
+}
+
+@mixin indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  max-width: 100%;
+  height: 100%;
+}
+
+@mixin indicator-color($color) {
+  background-color: map.get(config.$colors, $color);
+}

package/src/components/Progress/styles/style.scss

@@ -0,0 +1,31 @@
+@use "../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .progress {
+    @include mixins.base;
+
+    &__bar {
+      @include mixins.bar;
+    }
+
+    &__label {
+      @include mixins.label;
+    }
+
+    &__value {
+      @include mixins.value;
+    }
+
+    &__indicator {
+      @include mixins.indicator;
+
+      @each $name, $value in config.$colors {
+        &#{generate.variant-name($name)} {
+          @include mixins.indicator-color($name);
+        }
+      }
+    }
+  }
+}

package/src/components/Progress/tests/Progress.conformance.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Progress } from '../';
+
+const example = (
+  <>
+    <Progress
+      label="Zdieľanie dát: zostavajuce predplatené"
+      value="4.1 GB / 7.9 GB"
+      width={0.8}
+    />
+  </>
+);
+
+it('is valid html', () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: { 'no-inline-style': 'off' },
+  });
+});
+
+it('is accessible', async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});