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

package/src/components/Grid/tests/GridCol.unit.test.tsx

@@ -0,0 +1,199 @@
+/**
+ * GridCol component unit tests
+ *
+ * This test suite verifies the rendering, props, and className logic of the GridCol component.
+ * It checks default rendering, tag rendering, className merging, and all supported props (align, size, etc).
+ * Also includes complex scenarios with various size combinations and responsive behavior.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { GridCol, GridColAlign, GridColSize } from '../GridCol';
+
+describe('GridCol', () => {
+  it('renders with default class grid__col', () => {
+    const { getByTestId } = render(<GridCol data-testid="test-id" />);
+    expect(getByTestId('test-id')).toHaveClass('grid__col');
+  });
+
+  it('renders with default tag div', () => {
+    const { container } = render(<GridCol />);
+    expect(container.querySelector('div')).toBeTruthy();
+  });
+
+  it('renders children', () => {
+    const { getByText } = render(<GridCol>test</GridCol>);
+    expect(getByText('test')).toBeInTheDocument();
+  });
+
+  it('renders with custom tag', () => {
+    const { container } = render(<GridCol tag="span" />);
+    expect(container.querySelector('span')).toBeTruthy();
+  });
+
+  it('merges additional className', () => {
+    const { getByTestId } = render(
+      <GridCol data-testid="test-id" className="test-class" />
+    );
+    expect(getByTestId('test-id')).toHaveClass('test-class');
+  });
+
+  (['shrink', 'fill', 'auto'] as GridColSize[]).forEach(size => {
+    it(`applies grid__col--${size} class when size is ${size}`, () => {
+      const { getByTestId } = render(
+        <GridCol data-testid="test-id" size={size} />
+      );
+      expect(getByTestId('test-id')).toHaveClass(`grid__col--${size}`);
+    });
+  });
+
+  (['top', 'middle', 'bottom', 'stretch'] as GridColAlign[]).forEach(align => {
+    it(`applies align-self-${align} class when align is ${align}`, () => {
+      const { getByTestId } = render(
+        <GridCol data-testid="test-id" align={align} />
+      );
+      expect(getByTestId('test-id')).toHaveClass(`align-self-${align}`);
+    });
+  });
+
+  it('applies grid__col--3 class when size is number 3', () => {
+    const { getByTestId } = render(
+      <GridCol data-testid="test-id" size={3} />
+    );
+    expect(getByTestId('test-id')).toHaveClass('grid__col--3');
+  });
+
+  it('spreads additional props to the rendered element', () => {
+    const { getByTestId } = render(
+      <GridCol data-testid="test-id" id="my-col" data-extra="foo" />
+    );
+    const el = getByTestId('test-id');
+    expect(el).toHaveAttribute('id', 'my-col');
+    expect(el).toHaveAttribute('data-extra', 'foo');
+  });
+});
+
+describe('GridCol complex scenarios', () => {
+  it('renders with all numeric sizes from 1 to 12', () => {
+    for (let size = 1; size <= 12; size++) {
+      const { getByTestId } = render(
+        <GridCol data-testid={`test-${size}`} size={size} />
+      );
+      expect(getByTestId(`test-${size}`)).toHaveClass(`grid__col--${size}`);
+    }
+  });
+
+  it('renders with semantic HTML tags', () => {
+    const semanticTags = ['article', 'aside', 'section', 'header', 'footer', 'main', 'nav'] as const;
+    
+    semanticTags.forEach(tag => {
+      const { container } = render(<GridCol tag={tag} size={6} />);
+      const element = container.querySelector(tag);
+      expect(element).toBeTruthy();
+      expect(element).toHaveClass('grid__col--6');
+    });
+  });
+
+  it('renders with form elements as tags', () => {
+    const { container } = render(<GridCol tag="label" size="auto" />);
+    const label = container.querySelector('label');
+    expect(label).toBeTruthy();
+    expect(label).toHaveClass('grid__col--auto');
+  });
+
+  it('combines size and alignment props correctly', () => {
+    const { getByTestId } = render(
+      <GridCol 
+        data-testid="test-id" 
+        size={8} 
+        align="top" 
+        className="custom-class"
+      />
+    );
+    const el = getByTestId('test-id');
+    expect(el).toHaveClass('grid__col--8', 'align-self-top', 'custom-class');
+  });
+
+  it('renders with complex content and styling', () => {
+    const { getByText } = render(
+      <GridCol size="fill" align="middle" className="content-col">
+        <h2>Title</h2>
+        <p>Paragraph content</p>
+        <button>Click me</button>
+      </GridCol>
+    );
+    
+    expect(getByText('Title')).toBeInTheDocument();
+    expect(getByText('Paragraph content')).toBeInTheDocument();
+    expect(getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('renders multiple GridCols with different configurations', () => {
+    const { container } = render(
+      <div>
+        <GridCol size={4} align="top" className="col-1">Column 1</GridCol>
+        <GridCol size="auto" align="middle" className="col-2">Column 2</GridCol>
+        <GridCol size="fill" align="bottom" className="col-3">Column 3</GridCol>
+        <GridCol size="shrink" align="stretch" className="col-4">Column 4</GridCol>
+      </div>
+    );
+    
+    const cols = container.querySelectorAll('.grid__col');
+    expect(cols).toHaveLength(4);
+    
+    expect(cols[0]).toHaveClass('grid__col--4', 'align-self-top', 'col-1');
+    expect(cols[1]).toHaveClass('grid__col--auto', 'align-self-middle', 'col-2');
+    expect(cols[2]).toHaveClass('grid__col--fill', 'align-self-bottom', 'col-3');
+    expect(cols[3]).toHaveClass('grid__col--shrink', 'align-self-stretch', 'col-4');
+  });
+
+  it('renders with inline styles and data attributes', () => {
+    const { getByTestId } = render(
+      <GridCol 
+        data-testid="test-id"
+        size={6}
+        style={{ backgroundColor: 'red', color: 'white' }}
+        data-component="grid-col"
+        data-size="6"
+      />
+    );
+    
+    const el = getByTestId('test-id');
+    expect(el).toHaveStyle({ backgroundColor: 'red', color: 'white' });
+    expect(el).toHaveAttribute('data-component', 'grid-col');
+    expect(el).toHaveAttribute('data-size', '6');
+  });
+
+  it('renders with event handlers', () => {
+    const handleClick = jest.fn();
+    const { getByTestId } = render(
+      <GridCol 
+        data-testid="test-id"
+        size={3}
+        onClick={handleClick}
+        onMouseEnter={() => {}}
+      />
+    );
+    
+    const el = getByTestId('test-id');
+    el.click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders with aria attributes for accessibility', () => {
+    const { getByTestId } = render(
+      <GridCol 
+        data-testid="test-id"
+        size="auto"
+        role="region"
+        aria-label="Content section"
+        aria-describedby="description"
+      />
+    );
+    
+    const el = getByTestId('test-id');
+    expect(el).toHaveAttribute('role', 'region');
+    expect(el).toHaveAttribute('aria-label', 'Content section');
+    expect(el).toHaveAttribute('aria-describedby', 'description');
+  });
+}); 

package/src/components/Icon/Icon.mdx

@@ -0,0 +1,172 @@
+import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../styleguide/';
+import Icon from './Icon';
+import Grid, { GridCol } from '../Grid';
+import Bar, { BarItem } from './../Bar';
+import Table from './../Table';
+import SpritePathContext from './SpritePathContext';
+import IconSearch, { IconList } from './IconSearch';
+
+import sizes from './styles/export/size.scss';
+import colors from './styles/export/color.scss';
+import base from '../../styles/export/base.scss';
+
+<!-- Used in code examples to only show icons, not layout -->
+
+export const iconCodeExample = icons =>
+  icons.map(({ name, ...other }) => <Icon key={name} name={name} {...other} />);
+
+<!-- Convert rem size back to pixels -->
+
+export const getPixelSize = size =>
+  size ? parseFloat(size) * parseInt(base['font-size']) + 'px' : '';
+
+<!-- Filter out size names without breakpoints -->
+
+export const sizesWithoutBreakpoints = Object.keys(sizes).filter(
+  name => name.indexOf('-') === -1
+);
+
+<!-- Preview wrapper with simplified code example -->
+
+export const IconVariantPreview = ({ icons, ...other }) => (
+  <Preview
+    code={iconCodeExample(icons)}
+    codeJSXOptions={{ filterProps: ['key'] }}
+    {...other}
+  >
+    <IconList icons={icons} isWide={false} />
+  </Preview>
+);
+
+# Icon
+
+ODS uses SVG icons, which load from a sprite file. [How to add new icons?](#icon-contribution).
+
+<Preview>
+  <Icon name="le-vote" alt="done and done" />
+</Preview>
+
+## Sizes
+
+<Table
+  isCompact
+  headers={[
+    { key: 'name', label: 'Name' },
+    { key: 'size', label: 'Size' },
+    { key: 'sizemd', label: 'Breakpoint MD+' },
+  ]}
+  rows={sizesWithoutBreakpoints.map(size => ({
+    name: size,
+    size: getPixelSize(sizes[size]),
+    sizemd: getPixelSize(sizes[`${size}-md`]),
+  }))}
+/>
+
+<IconVariantPreview
+  icons={sizesWithoutBreakpoints.map(size => ({
+    name: 'money-box',
+    description: size,
+    size: size,
+  }))}
+/>
+
+## Colors
+
+Colors should be only used to provide feedback, e.g. in form validation and alerts
+
+<IconVariantPreview
+  icons={Object.keys(colors).map(color => ({
+    name: 'money-box',
+    size: 'large',
+    description: color,
+    color,
+  }))}
+  id="preview-colors"
+/>
+
+## Sprite path
+
+Default path is `/sprite.svg`. You can define different path either by using spritePath prop or by context SpritePathContext. When both are set, path from spritePath is preffered.
+
+<Preview>
+  <Grid>
+    <GridCol size={3}>
+      <Bar>
+        <BarItem>
+          <Icon name="plus" alt="plus" spritePath="/sprite-sg.svg" />
+        </BarItem>
+        <BarItem>path from SpritePath</BarItem>
+      </Bar>
+    </GridCol>
+    <GridCol size={3}>
+      <Bar>
+        <BarItem>
+          <SpritePathContext.Provider value={'/sprite-sg.svg'}>
+            <Icon name="plus" alt="plus" />
+          </SpritePathContext.Provider>
+        </BarItem>
+        <BarItem>path from context</BarItem>
+      </Bar>
+    </GridCol>
+    <GridCol size={6}>
+      <Bar>
+        <BarItem>
+          <SpritePathContext.Provider value={'/sprite.svg'}>
+            <Icon name="plus" alt="plus" spritePath="/sprite-sg.svg" />
+          </SpritePathContext.Provider>
+        </BarItem>
+        <BarItem>path from SpritePath when context is also set</BarItem>
+      </Bar>
+    </GridCol>
+  </Grid>
+</Preview>
+
+## All icons
+
+You can copy svg by clicking on the icon and paste directly into Figma.
+
+<Preview>
+  <IconSearch />
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Icon />" component={Icon} />
+
+## Icon contribution
+
+- **Download** your desired icons from the [Icon Library](https://design.orange.com/libraries/icons-library). You'll get a PSD and a PNG file for each icon. The PSD either contains:
+  - a vector path, which can be directly exported from Photoshop as SVG
+  - a smart object, which you can open in Illustrator and save it as SVG
+  - if you don't have Photoshop, use [Photopea](https://www.photopea.com/) to export the paths to SVG
+- **Rename** the icon file to be lowercase and dash delimited. The library does not employ a naming pattern - there are capitals, dashes, underscores spaces..., but we do! Never change the name of the icon to match the context you're using it in. We need to stay in sync with the file names in the library.
+- **Optimize** the SVGs. Use a tool like [Jake Archibald's SVGOMG](https://jakearchibald.github.io/svgomg/) and use the precision setting to get the smallest file size possible, while still maintaing proper display of the icon.
+- **Drop the files to `src/assets/icons` folder**. They will be built into `build/sprite.svg`.
+- **Open a pull request.** A reviewer will check if all requirements are met. The icons will be included in the next release.
+- **Use them in your project immediately.** You don't need to wait for the next release. When the pull request is closed, you are safe to create your own build with an updated sprite and use it.
+
+### Why such a complicated process?
+
+To make sure we stay in sync with the group icon library, honor a naming pattern and prevent errors.
+
+- We need to stay in sync with the brand icon library, as it is our source of truth. We neeed to check if the icon we want add is not already being used.
+- We need to optimize the icons, so that we can deliver them to the user as fast as possible. The photoshop export is represents the true interpretation of the icon paths. Otimization algorithms can safely remove around 50-80% of the code, just by rounding some numbers, removing unnecesasry attributes and recalculating the shapes. Smaller file size means faster loading time.
+- We need to review newly added icons to eliminate human errrors
+
+### Some of my icons don't work
+
+Just before this process was documented, there was a request for quick addition of several icons. Unfortunatelly, we introduced some duplicates and naming pattern violations. To fix your project, please rename the following icons:
+
+- Collective_class_training -> collective-class-training
+- Love_Logo -> love-logo
+- Social_network -> social-network
+- Team_connect -> team-connect
+- My_Orange -> my-orange
+- Family_Place -> family-place
+- showroom_mobile_pro -> showroom-mobile-pro
+- home-live -> homelive
+- medical-app-phone -> medial-app
+- mobile-data-toggle -> mobile-network-coverage
+- home-new -> home

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import React, { useContext } from "react";
+import cx from "classnames";
+import { SpritePathContext } from "./SpritePathContext";
+
+export type IconColor = "info" | "success" | "warning" | "danger";
+export type IconSize =
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge"
+  | "huge";
+
+interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+  /** Accessible label for the icon. */
+  alt?: string;
+  /** Icon color. */
+  color?: IconColor;
+  /** Icon name (required). */
+  name: string;
+  /** Icon size. */
+  size?: IconSize;
+  /** Path to the SVG sprite. */
+  spritePath?: string;
+  className?: string;
+}
+
+const CLASS_ROOT = "icon";
+
+const Icon: React.FC<IconProps> = ({
+  className,
+  alt,
+  color,
+  name,
+  size,
+  spritePath = "/sprite.svg",
+  ...other
+}) => {
+  const contextPath = useContext(SpritePathContext);
+
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--${size}`]: size,
+      [`${CLASS_ROOT}--${color}`]: color,
+    },
+    className,
+  );
+
+  return (
+    <svg
+      className={classes}
+      aria-hidden={alt !== undefined ? undefined : "true"}
+      role={alt !== undefined ? "img" : undefined}
+      {...other}
+    >
+      {alt !== undefined && alt.length > 0 && <title>{alt}</title>}
+      <use
+        xlinkHref={
+          spritePath !== "/sprite.svg" || typeof contextPath === "undefined"
+            ? `${spritePath}#${name}`
+            : `${contextPath}#${name}`
+        }
+      />
+    </svg>
+  );
+};
+
+Icon.displayName = "Icon";
+
+export { Icon };

package/src/components/Icon/IconSearch.jsx

@@ -0,0 +1,247 @@
+import { useEffect, useState, useRef } from "react";
+import cx from "classnames";
+
+import {
+  Bar,
+  BarItem,
+  Button,
+  Container,
+  Field,
+  Grid,
+  Icon,
+  GridCol,
+  Fieldset,
+  Label,
+} from "..";
+
+import { tags, iconsWithTags } from "./iconSearchTags";
+
+export const iconNames = require
+  .context("../../assets/icons", false, /\.svg$/)
+  .keys()
+  .sort()
+  .map((icon) => icon.substring(2).replace(".svg", ""))
+  .filter((e) => !e.includes("-file"));
+
+const handleClick = async (svgElement) => {
+  const useElement = svgElement.querySelector("use");
+  const href = useElement.getAttribute("xlink:href");
+  const spriteUrl = href.split("#")[0];
+  const iconId = href.split("#")[1];
+
+  const response = await fetch(spriteUrl);
+  const spriteText = await response.text();
+  const parser = new DOMParser();
+  const spriteDoc = parser.parseFromString(spriteText, "image/svg+xml");
+  const iconSymbol = spriteDoc.getElementById(iconId);
+
+  // Create a new SVG element and copy attributes from the symbol
+  const svgElementCopy = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "svg",
+  );
+  Array.from(iconSymbol.attributes).forEach((attr) => {
+    svgElementCopy.setAttribute(attr.name, attr.value);
+  });
+
+  // Copy the inner HTML from the symbol to the new SVG element
+  svgElementCopy.innerHTML = iconSymbol.innerHTML;
+
+  const svgHTML = svgElementCopy.outerHTML;
+  navigator.clipboard.writeText(svgHTML).then(() => {
+    window.alert("Icon copied to clipboard");
+  });
+};
+
+export const IconList = ({ icons, isWide = true }) => (
+  <ul className={cx("sg-icon-list", { "sg-icon-list--wide": isWide })}>
+    {icons.map(
+      ({ name, description, tags = [], size = "medium", ...other }, i) => {
+        return (
+          <li
+            className="sg-icon-list__item"
+            key={i.toString()}
+            id={name + "_" + tags.join("-")}
+          >
+            <Icon
+              name={name}
+              size={size}
+              onClick={(e) => handleClick(e.currentTarget)}
+              {...other}
+            />
+            <br />
+            <abbr title={description || name}>{description || name}</abbr>
+          </li>
+        );
+      },
+    )}
+  </ul>
+);
+
+export const IconSearch = () => {
+  const [searchOption, setSearchOption] = useState("includes");
+  const [searchValue, setSearchValue] = useState("");
+  const [icons, setIcons] = useState([]);
+  const searchTags = useRef([]);
+
+  useEffect(() => {
+    setIcons(document.querySelectorAll(".sg-icon-list__item"));
+  }, []);
+
+  useEffect(() => {
+    searchTags.current.forEach((tag) => {
+      const checkbox = document.getElementById(tag);
+      if (checkbox) {
+        checkbox.setAttribute("checked", "checked");
+      }
+    });
+  }, [searchValue, searchOption]);
+
+  const isIconsTagChecked = (id) => {
+    let isChecked = 0;
+    searchTags.current.forEach((check) => {
+      if (id.includes(check)) {
+        isChecked += 1;
+      }
+    });
+    return isChecked === searchTags.current.length;
+  };
+
+  const handleInputChange = (value) => {
+    setSearchValue(value);
+    if (searchOption === "startswith") {
+      icons.forEach((icon) => {
+        if (icon.id.startsWith(value)) {
+          if (isIconsTagChecked(icon.id)) {
+            icon.classList.remove("hide");
+          }
+        } else {
+          icon.classList.add("hide");
+        }
+      });
+    } else {
+      icons.forEach((icon) => {
+        if (icon.id.substring(0, icon.id.indexOf("_")).includes(value)) {
+          if (isIconsTagChecked(icon.id)) {
+            icon.classList.remove("hide");
+          }
+        } else {
+          icon.classList.add("hide");
+        }
+      });
+    }
+  };
+
+  const handleSearchOptionChange = (id) => {
+    setSearchOption(id);
+    handleInputChange("");
+  };
+
+  const handleTagChange = (e, tag) => {
+    if (e.target.checked) {
+      searchTags.current.push(tag);
+      icons.forEach((icon) => {
+        if (!icon.id.includes(tag)) {
+          icon.classList.add("hide");
+        }
+      });
+    } else {
+      searchTags.current.splice(searchTags.current.indexOf(tag), 1);
+      icons.forEach((icon) => {
+        const showIcon = isIconsTagChecked(icon.id);
+        if (!searchValue) {
+          if (showIcon) {
+            icon.classList.remove("hide");
+          }
+        } else {
+          if (searchOption === "startswith") {
+            if (showIcon && icon.id.startsWith(searchValue)) {
+              icon.classList.remove("hide");
+            }
+          } else {
+            if (
+              showIcon &&
+              icon.id.substring(0, icon.id.indexOf("_")).includes(searchValue)
+            ) {
+              icon.classList.remove("hide");
+            }
+          }
+        }
+      });
+    }
+  };
+
+  return (
+    <Container>
+      <Bar space="small" className="align-items-end">
+        <BarItem>
+          <div className="form-field">
+            <Label htmlFor={"search-input"}>
+              <h3 className="mb-xsmall">Search input</h3>
+            </Label>
+            <input
+              className="text-input"
+              onChange={(e) => handleInputChange(e.target?.value)}
+              id="search-input"
+              value={searchValue}
+            />
+          </div>
+        </BarItem>
+        <BarItem isFilling>
+          <Button
+            type="primary"
+            onClick={() => handleInputChange("")}
+            isDisabled={!searchValue}
+          >
+            Clear
+          </Button>
+        </BarItem>
+      </Bar>
+      <Fieldset legend="Search input options" className="mb-small">
+        {[
+          { label: "show icons that include string", id: "includes" },
+          {
+            label: "show icons that start with string",
+            id: "startswith",
+          },
+        ].map(({ label, id }) => (
+          <Field
+            control={{
+              name: "search",
+              type: "radio",
+              onClick: () => handleSearchOptionChange(id),
+              isChecked: searchOption === id,
+              id: id,
+            }}
+            key={id}
+            label={label}
+          />
+        ))}
+      </Fieldset>
+      <h3>Or search icons using categories</h3>
+      <Grid className="mb-large">
+        {tags.map((tag) => (
+          <GridCol key={tag} size={{ xs: 12, sm: 6, md: 4 }}>
+            <Field
+              control={{
+                type: "checkbox",
+                onClick: (e) => handleTagChange(e, tag),
+                id: tag,
+              }}
+              label={tag}
+            />
+          </GridCol>
+        ))}
+      </Grid>
+      <div className="results">
+        <IconList
+          icons={iconNames.map((name) => ({
+            size: "large",
+            name,
+            tags: iconsWithTags[name],
+          }))}
+        />
+      </div>
+    </Container>
+  );
+};