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

package/src/components/Grid/Grid.mdx

@@ -1,16 +1,16 @@
-import { ComponentDocs, Note, md } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-import { Grid, GridCol } from './index';
-import Table from '../Table';
-import Section from '../Section';
-import Image from '../Image';
-import { breakpointsTableData } from '../../docs/breakpoints.mdx';
+import { ComponentDocs, Note, md } from "@lighting-beetle/lighter-styleguide";
+import { Preview } from "../../styleguide/";
+import { Grid, GridCol } from "./index";
+import Table from "../Table";
+import Section from "../Section";
+import { Image } from "../Image";
+import { breakpointsTableData } from "../../docs/breakpoints.mdx";
 import {
   ContainerHorizontal,
   ContainerVertical,
   ColumnVertical,
-} from '../../docs/utils.flexalignment.mdx';
-import spaces from '../../styles/export/space.scss';
+} from "../../docs/utils.flexalignment.mdx";
+import spaces from "../../styles/export/space.scss";
 
 # Grid
 
@@ -109,8 +109,9 @@ There are two ways of resizing a column.
     </GridCol>
     <GridCol size="auto">
       <code>auto</code>
-      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis
-      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum
+      sociis natoque penatibus et magnis dis parturient montes, nascetur
+      ridiculus mus.
     </GridCol>
   </Grid>
 </Preview>
@@ -122,10 +123,10 @@ Available types are `[1-12/shrink/fill/auto]` for every breakpoint.
 
 <Preview className="preview-grid">
   <Grid>
-    <GridCol size={{ sm: 9, md: 6, lg: 'fill' }}>
+    <GridCol size={{ sm: 9, md: 6, lg: "fill" }}>
       <code>(default) 12, sm-9, md-6, lg-fill</code>
     </GridCol>
-    <GridCol size={{ sm: 3, md: 6, lg: 'fill' }}>
+    <GridCol size={{ sm: 3, md: 6, lg: "fill" }}>
       <code>(default) 12, sm-3, md-6, lg-fill</code>
     </GridCol>
   </Grid>
@@ -223,15 +224,15 @@ Grid with justified content height uses flexbox with an attempt to equalize heig
 Add larger space between grid columns or remove them completely
 
 <Preview>
-  {['default', 'none'].map((size, index) => (
+  {["default", "none"].map((size, index) => (
     <>
       <h3>Column gap size {JSON.stringify(size)}</h3>
       <Grid
         key={index.toString()}
-        columnGapSize={size === 'default' ? null : size}
+        columnGapSize={size === "default" ? null : size}
         className="mb-large"
       >
-        {[1, 2, 3].map(key => (
+        {[1, 2, 3].map((key) => (
           <GridCol key={key.toString()} size={{ md: 4 }}>
             <code> </code>
           </GridCol>
@@ -253,19 +254,19 @@ There are two ways of adding a row gap.
    **minimum display width** to change the gap size
 
 <Preview>
-  {['medium', 'large', { xs: 'large', md: 'xlarge' }].map(
+  {["medium", "large", { xs: "large", md: "xlarge" }].map(
     (size, index, array) => (
       <Section key={index.toString()} className="pb-none">
         <h3 className="mb-2">Row gap size {JSON.stringify(size)}</h3>
         <Grid key={index.toString()} rowGapSize={size}>
-          {[1, 2, 3, 4, 5, 6].map(key => (
+          {[1, 2, 3, 4, 5, 6].map((key) => (
             <GridCol key={key.toString()} size={{ md: 6 }}>
               <code>6</code>
             </GridCol>
           ))}
         </Grid>
       </Section>
-    )
+    ),
   )}
 </Preview>
 

package/src/components/Grid/Grid.tsx

@@ -22,30 +22,35 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement> {
 
 const CLASS_ROOT = "grid";
 
-export const Grid = ({
-  className,
-  hAlign,
-  vAlign,
-  tag = "div",
-  justifyHeight,
-  rowGapSize,
-  columnGapSize,
-  ...other
-}: GridProps) => {
-  const classes = cx(
-    CLASS_ROOT,
+export const Grid = React.forwardRef<HTMLElement, GridProps>(
+  (
     {
-      [`align-items-${vAlign}`]: vAlign,
-      [`justify-content-${hAlign}`]: hAlign,
-      [`${CLASS_ROOT}--justify-height`]: justifyHeight,
-      [`${CLASS_ROOT}--column-gap-${columnGapSize}`]: columnGapSize,
+      className,
+      hAlign,
+      vAlign,
+      tag = "div",
+      justifyHeight,
+      rowGapSize,
+      columnGapSize,
+      ...other
     },
-    ...genResponsiveClasses(`${CLASS_ROOT}-row-gap`, rowGapSize),
-    className,
-  );
-  const TagName = tag;
+    ref,
+  ) => {
+    const classes = cx(
+      CLASS_ROOT,
+      {
+        [`align-items-${vAlign}`]: vAlign,
+        [`justify-content-${hAlign}`]: hAlign,
+        [`${CLASS_ROOT}--justify-height`]: justifyHeight,
+        [`${CLASS_ROOT}--column-gap-${columnGapSize}`]: columnGapSize,
+      },
+      ...genResponsiveClasses(`${CLASS_ROOT}-row-gap`, rowGapSize),
+      className,
+    );
+    const TagName = tag;
 
-  return <TagName className={classes} {...other} />;
-};
+    return <TagName className={classes} ref={ref} {...other} />;
+  },
+);
 
 Grid.displayName = "Grid";

package/src/components/Grid/index.ts

@@ -1,6 +1,4 @@
-/* import React from 'react'; */
+import "./styles/style.scss";
 
-export * from './Grid';
-export * from './GridCol';
-
-import './styles/style.scss';
+export { Grid } from "./Grid";
+export { GridCol } from "./GridCol";

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

@@ -1,41 +1,43 @@
 @use "sass:string";
-@use './config';
-@use './mixins';
-@use '../../../styles/tools/layout';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tools/generate';
+@use "./config";
+@use "./mixins";
+@use "../../../styles/tools/layout";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
 
-.grid {
-  @include mixins.grid-base;
+@layer components {
+  .grid {
+    @include mixins.grid-base;
 
-  &--justify-height {
-    @include mixins.grid-with-equal-height-content;
-  }
+    &--justify-height {
+      @include mixins.grid-with-equal-height-content;
+    }
 
-  &-row-gap {
-    @each $name in config.$grid-row-gap-sizes {
-      @include breakpoint.each using ($breakpoint) {
-        &-#{generate.variant-name($breakpoint, '-')}-#{string.unquote($name)} {
-          @include mixins.grid-row-gap($name);
+    &-row-gap {
+      @each $name in config.$grid-row-gap-sizes {
+        @include breakpoint.each using ($breakpoint) {
+          &-#{generate.variant-name($breakpoint, "-")}-#{string.unquote($name)} {
+            @include mixins.grid-row-gap($name);
+          }
         }
       }
     }
-  }
 
-  @each $name, $value in config.$column-gap {
-    &#{generate.variant-name($name, '--column-gap-',)} {
-      @include mixins.grid-column-gap($name);
+    @each $name, $value in config.$column-gap {
+      &#{generate.variant-name($name, "--column-gap-",)} {
+        @include mixins.grid-column-gap($name);
 
-      > [class*='grid__col'] {
-        @include mixins.grid-col-column-gap($name);
+        > [class*="grid__col"] {
+          @include mixins.grid-col-column-gap($name);
+        }
       }
     }
-  }
 
-  &[class*='grid--row-gap'] > *[class*='grid__col'] {
-    @include layout.reset-last-child-margin-bottom;
+    &[class*="grid--row-gap"] > *[class*="grid__col"] {
+      @include layout.reset-last-child-margin-bottom;
+    }
   }
-}
 
-@include mixins.column-classes;
+  @include mixins.column-classes;
+}

package/src/components/Icon/Icon.tsx

@@ -4,7 +4,7 @@ import React, { useContext } from "react";
 import cx from "classnames";
 import { SpritePathContext } from "./SpritePathContext";
 
-export type IconColor = "info" | "success" | "warning" | "danger";
+export type IconColor = "info" | "success" | "warning" | "danger" | "orange";
 export type IconSize =
   | "small"
   | "medium"
@@ -13,7 +13,7 @@ export type IconSize =
   | "xxlarge"
   | "huge";
 
-interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
   /** Accessible label for the icon. */
   alt?: string;
   /** Icon color. */

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

@@ -19,9 +19,9 @@ $sizes: (
 );
 
 $colors: (
-  info: sass-map.get(color.$colors-light, icon-information),
-  success: sass-map.get(color.$colors-light, icon-positive),
-  warning: sass-map.get(color.$colors-light, icon-warning),
-  danger: sass-map.get(color.$colors-light, icon-negative),
-  "orange": sass-map.get(color.$colors-light, icon-brand),
+  info: var(--color-icon-information),
+  success: var(--color-icon-positive),
+  warning: var(--color-icon-warning),
+  danger: var(--color-icon-negative),
+  "orange": var(--color-icon-brand),
 );

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

@@ -1,13 +1,15 @@
-@use './mixins';
-@use '../../../styles/tools/convert';
-@use '../../../styles/tokens/space';
+@use "./mixins";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/space";
 
-.icon {
-  @include mixins.base;
-  @include mixins.sizes;
-  @include mixins.colors;
-}
+@layer components {
+  .icon {
+    @include mixins.base;
+    @include mixins.sizes;
+    @include mixins.colors;
+  }
 
-use {
-  pointer-events: none;
+  use {
+    pointer-events: none;
+  }
 }

package/src/components/Image/Image.mdx

@@ -1,10 +1,10 @@
-import { Code, Preview } from '../../styleguide/';
-import { ComponentDocs, Note, md } from '@lighting-beetle/lighter-styleguide';
-import Grid, { GridCol } from '../Grid/';
-import Image from './index';
-import Icon from '../Icon/index';
+import { Code, Preview } from "../../styleguide/";
+import { ComponentDocs, Note, md } from "@lighting-beetle/lighter-styleguide";
+import Grid, { GridCol } from "../Grid/";
+import { Image } from "./index";
+import Icon from "../Icon/index";
 
-import handsImage from '../../assets/images/developers/hands-with-phones.svg';
+import handsImage from "../../assets/images/developers/hands-with-phones.svg";
 
 # Image
 
@@ -39,13 +39,13 @@ Rôzne obrázky pre rôzne veľkosti displeja.
 <Preview>
   <Image
     src={{
-      default: 'https://placehold.co/150x150?text=150x150+on+XS',
-      xxxl: 'https://placehold.co/450x450?text=450x450+on+XXXL',
-      xxl: 'https://placehold.co/400x400?text=400x400+on+XXL',
-      xl: 'https://placehold.co/350x350?text=350x350+on+XL',
-      lg: 'https://placehold.co/300x300?text=300x300+on+LG',
-      md: 'https://placehold.co/250x250?text=250x250+on+MD',
-      sm: 'https://placehold.co/200x200?text=200x200+on+SM',
+      default: "https://placehold.co/150x150?text=150x150+on+XS",
+      xxxl: "https://placehold.co/450x450?text=450x450+on+XXXL",
+      xxl: "https://placehold.co/400x400?text=400x400+on+XXL",
+      xl: "https://placehold.co/350x350?text=350x350+on+XL",
+      lg: "https://placehold.co/300x300?text=300x300+on+LG",
+      md: "https://placehold.co/250x250?text=250x250+on+MD",
+      sm: "https://placehold.co/200x200?text=200x200+on+SM",
     }}
     alt="Gray square with dimensions"
   />
@@ -56,9 +56,9 @@ Rôzne obrázky pre rôzne veľkosti displeja.
 <Preview>
   <Image
     src={{
-      default: 'https://placehold.co/150x150?text=default',
-      custom: 'https://placehold.co/200x200?text=custom',
-      another: 'https://placehold.co/250x250?text=another',
+      default: "https://placehold.co/150x150?text=default",
+      custom: "https://placehold.co/200x200?text=custom",
+      another: "https://placehold.co/250x250?text=another",
     }}
     alt="Obrázok s vlastnými breakpointami"
   />
@@ -82,13 +82,22 @@ Rôzne obrázky pre rôzne veľkosti displeja.
 - **Len default:**
 
   <Preview>
-    <Image src={{ default: 'https://placehold.co/150x150?text=default-only' }} alt="Len default" />
+    <Image
+      src={{ default: "https://placehold.co/150x150?text=default-only" }}
+      alt="Len default"
+    />
   </Preview>
 
 - **Chýbajúci default:**
 
   <Preview>
-    <Image src={{ xl: 'https://placehold.co/350x350?text=xl', lg: 'https://placehold.co/300x300?text=lg' }} alt="Chýba default" />
+    <Image
+      src={{
+        xl: "https://placehold.co/350x350?text=xl",
+        lg: "https://placehold.co/300x300?text=lg",
+      }}
+      alt="Chýba default"
+    />
   </Preview>
 
 - **Prázdny objekt:**
@@ -131,8 +140,8 @@ largest to smallest** v tomto prípade, pretože sa používajú na renderovanie
 <Preview>
   <Image
     src={{
-      default: 'https://placehold.co/300x300?text=1x-pixel-density',
-      xs: 'https://placehold.co/300x300?text=1x-pixel-density, https://placehold.co/600x600?text=2x-pixel-density 2x',
+      default: "https://placehold.co/300x300?text=1x-pixel-density",
+      xs: "https://placehold.co/300x300?text=1x-pixel-density, https://placehold.co/600x600?text=2x-pixel-density 2x",
     }}
     alt="Gray square with dimensions"
     isRounded

package/src/components/Image/Image.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
-import cx from 'classnames';
-
-import breakpoints from '../../styles/export/breakpoint';
+import React from "react";
+import cx from "classnames";
 
+import breakpoints from "../../styles/export/breakpoint";
 
 const overlayBreakpoints: { [key: string]: string } = {
   ...breakpoints,
-  xxxl: '1920px',
+  xxxl: "1920px",
 };
 
 interface ImageSrcObject {
@@ -28,29 +27,29 @@ interface ImageProps {
   [key: string]: any;
 }
 
-const CLASS_ROOT = 'img';
+const CLASS_ROOT = "img";
 
 const Image: React.FC<ImageProps> = ({ className, src, alt, ...other }) => {
   const classes = cx(CLASS_ROOT, className);
 
-  if (typeof src === 'object') {
+  if (typeof src === "object") {
     // autocorrect to descending keys
     const descendingSrcKeys = Object.keys(src).sort(
       (a, b) =>
-        parseInt(overlayBreakpoints[b]) - parseInt(overlayBreakpoints[a])
+        parseInt(overlayBreakpoints[b]) - parseInt(overlayBreakpoints[a]),
     );
     // this could be done via conditional rendering, but that breaks <ComponentDocs /> ¯\_(ツ)_/¯
     return (
       <picture className={classes}>
         {descendingSrcKeys.map(
-          breakpoint =>
-            breakpoint !== 'default' && (
+          (breakpoint) =>
+            breakpoint !== "default" && (
               <source
                 key={breakpoint}
                 srcSet={src[breakpoint]}
                 media={`(min-width: ${overlayBreakpoints[breakpoint]})`}
               />
-            )
+            ),
         )}
         <img src={src.default} alt={alt} {...other} />
       </picture>
@@ -60,6 +59,6 @@ const Image: React.FC<ImageProps> = ({ className, src, alt, ...other }) => {
   return <img className={classes} src={src} alt={alt} {...other} />;
 };
 
-Image.displayName = 'Image';
+Image.displayName = "Image";
 
-export default Image;
+export { Image };

package/src/components/Image/index.ts

@@ -1,7 +1,3 @@
-// import React from 'react';
+import "./styles/style.scss";
 
-import Image from './Image';
-
-import './styles/style.scss';
-
-export default Image;
+export { Image } from "./Image";

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

@@ -1,9 +1,12 @@
-@use './mixins';
+@use "./mixins";
 
-img, picture {
-  @include mixins.base();
-}
+@layer components {
+  img,
+  picture {
+    @include mixins.base();
+  }
 
-.img {
-  @include mixins.spacing();
+  .img {
+    @include mixins.spacing();
+  }
 }

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

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 import { axe } from "jest-axe";
 
-import Image from "../";
+import { Image } from "../";
 
 /**
  * Conformance testy pre Image komponentu