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

package/src/components/Carousel/Carousel.static.js

@@ -1,188 +0,0 @@
-import Glider from '@lighting-beetle/glider-js';
-
-import Tooltip from '../Tooltip/Tooltip.static.js'; // Import the Tooltip class
-
-import {
-  SELECTOR_PREV,
-  SELECTOR_NEXT,
-  SELECTOR_DOTS,
-  SELECTOR_VIEWPORT,
-  SELECTOR_TRACK,
-} from './constants';
-
-export const defaultConfig = {
-  arrows: {
-    prev: SELECTOR_PREV,
-    next: SELECTOR_NEXT,
-  },
-  slidesToShow: 1.2,
-  dots: SELECTOR_DOTS,
-  skipTrack: true,
-  classes: {
-    glider: 'carousel__viewport',
-    track: 'carousel__track',
-    slide: 'carousel__slide',
-    drag: 'is-dragging',
-    draggable: 'is-draggable',
-    disabled: 'is-disabled',
-    active: 'is-active',
-    visible: 'is-visible',
-    dots: 'carousel__pagination',
-    dot: 'carousel__pagination-item',
-  },
-};
-
-export default class Carousel {
-  constructor(element, config) {
-    this.element = element;
-    this.config = { ...defaultConfig, ...config };
-    this.element.ODS_Carousel = this;
-
-    this.fixPaginationButtonType = this.fixPaginationButtonType.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.updateTooltipPosition = this.updateTooltipPosition.bind(this);
-
-    this.element.ODS_Carousel = this;
-
-    this.init();
-    return this;
-  }
-
-  init() {
-    this.getElements();
-
-    if (this.element.hasAttribute('data-glider-options')) {
-      this.getCustomOptions();
-    }
-
-    this.element.addEventListener(
-      'glider-loaded',
-      this.fixPaginationButtonType
-    );
-    this.element.addEventListener('glider-loaded', this.handleScroll);
-    this.element.addEventListener(
-      'glider-refresh',
-      this.fixPaginationButtonType
-    );
-
-    this.viewport.addEventListener('scroll', this.handleScroll);
-
-    this.instance = new Glider(this.viewport, this.config);
-  }
-
-  getElements() {
-    this.viewport = this.element.querySelector(SELECTOR_VIEWPORT);
-    this.track = this.viewport.querySelector(SELECTOR_TRACK);
-
-    const elements = {
-      arrows: {
-        prev: this.element.querySelector(SELECTOR_PREV),
-        next: this.element.querySelector(SELECTOR_NEXT),
-      },
-      dots: this.element.querySelector(SELECTOR_DOTS),
-    };
-
-    this.config = {
-      ...this.config,
-      ...elements,
-    };
-  }
-
-  getCustomOptions() {
-    const passedGliderOptions = this.element.getAttribute(
-      'data-glider-options'
-    );
-    const parsedGliderOptions = JSON.parse(passedGliderOptions);
-
-    this.config = {
-      ...this.config,
-      ...parsedGliderOptions,
-    };
-  }
-
-  fixPaginationButtonType() {
-    const dots = Array.from(
-      this.element.querySelectorAll(`${SELECTOR_DOTS} > *`)
-    );
-
-    dots.forEach(dot => dot.setAttribute('type', 'button'));
-  }
-
-  /**
-   * Handles the scroll event on the carousel viewport.
-   * Updates the tooltip position for the active slide and hides tooltips for non-active slides.
-   */
-  handleScroll() {
-    const activeSlide = this.track.querySelector('.active');
-    const nonActiveSlides = this.track.querySelectorAll(
-      '.glider-slide:not(.active)'
-    );
-
-    if (activeSlide) {
-      this.updateTooltipPosition(activeSlide);
-    }
-
-    if (nonActiveSlides.length > 0) {
-      this.hideAllTooltips(nonActiveSlides);
-    }
-  }
-
-  /**
-   * Updates the position of tooltips for the given element.
-   * @param {HTMLElement} element - The element containing tooltip triggers.
-   */
-  updateTooltipPosition(element) {
-    const tooltipTriggers = element.querySelectorAll(
-      '[data-tooltip-trigger="true"]'
-    );
-
-    if (tooltipTriggers.length > 0) {
-      tooltipTriggers.forEach(tooltipElement => {
-        const tooltipId = tooltipElement.getAttribute('aria-describedby');
-        const tooltipDiv = document.getElementById(tooltipId);
-        const tooltipInstance = Tooltip.getInstance(tooltipDiv);
-
-        if (tooltipInstance) {
-          tooltipInstance.update();
-        }
-      });
-    }
-  }
-
-  /**
-   * Hides all tooltips for the given elements.
-   * @param {NodeListOf<HTMLElement>} elements - The elements containing tooltip triggers.
-   */
-  hideAllTooltips(elements) {
-    elements.forEach(element => {
-      const allTooltips = element.querySelectorAll(
-        '[data-tooltip-trigger="true"]'
-      );
-
-      if (allTooltips.length > 0) {
-        allTooltips.forEach(tooltipElement => {
-          const tooltipId = tooltipElement.getAttribute('aria-describedby');
-          const tooltipDiv = document.getElementById(tooltipId);
-          const tooltipInstance = Tooltip.getInstance(tooltipDiv);
-
-          if (tooltipInstance) {
-            tooltipInstance.hide();
-            tooltipElement.blur();
-          }
-        });
-      }
-    });
-  }
-
-  destroy() {
-    this.instance.destroy();
-  }
-
-  update() {
-    this.instance.refresh();
-  }
-
-  static getInstance(el) {
-    return el && el.ODS_Carousel ? el.ODS_Carousel : null;
-  }
-}

package/src/components/Carousel/CarouselItem.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-
-import { CLASS_SLIDE } from './constants';
-
-const CLASS_ROOT = CLASS_SLIDE;
-
-const CarouselItem = ({ className, children, ...other }) => {
-  const classes = cx(CLASS_ROOT, className);
-
-  return (
-    <div className={classes} {...other}>
-      {children}
-    </div>
-  );
-};
-
-CarouselItem.displayName = 'CarouselItem';
-
-export default CarouselItem;

package/src/components/Carousel/constants.js

@@ -1,18 +0,0 @@
-export const CLASS_ROOT = 'carousel';
-
-export const CLASS_WRAPPER = `${CLASS_ROOT}`;
-export const CLASS_VIEWPORT_WRAPPER = `${CLASS_ROOT}__viewport-wrapper`;
-export const CLASS_VIEWPORT = `${CLASS_ROOT}__viewport`;
-export const CLASS_BLINDS = `${CLASS_ROOT}__blinds`;
-export const CLASS_TRACK = `${CLASS_ROOT}__track`;
-export const CLASS_SLIDE = `${CLASS_ROOT}__slide`;
-export const CLASS_PREV = `${CLASS_ROOT}__prev`;
-export const CLASS_NEXT = `${CLASS_ROOT}__next`;
-export const CLASS_DOTS = `${CLASS_ROOT}__pagination`;
-
-export const SELECTOR_WRAPPER = `.${CLASS_WRAPPER}`;
-export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
-export const SELECTOR_TRACK = `.${CLASS_TRACK}`;
-export const SELECTOR_PREV = `.${CLASS_PREV}`;
-export const SELECTOR_NEXT = `.${CLASS_NEXT}`;
-export const SELECTOR_DOTS = `.${CLASS_DOTS}`;

package/src/components/Carousel/index.js

@@ -1,7 +0,0 @@
-import Carousel from './Carousel';
-
-import './styles/style.scss';
-
-export default Carousel;
-
-export { default as CarouselItem } from './CarouselItem';

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

@@ -1,63 +0,0 @@
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
-
-$space: space.get();
-
-$button: (
-  default: (
-    color: color.$white,
-    background-color: color.$black,
-  ),
-  hover: (
-    background-color: color.$orange-dark,
-  ),
-  active: (
-    background-color: color.$black,
-  ),
-);
-
-$button-inverse: (
-  default: (
-    color: color.$black,
-    background-color: color.$white,
-  ),
-  hover: (
-    background-color: color.$orange,
-  ),
-  active: (
-    background-color: color.$white,
-  ),
-);
-
-$dot-layout: (
-  width: space.get('medium'),
-  height: space.get('medium'),
-  margin: space.get('small'),
-);
-
-$dot: (
-  default: color.$black,
-  hover: color.$orange-dark,
-  active: color.$orange-dark,
-);
-
-$dot-inverse: (
-  default: color.$white,
-  hover: color.$orange,
-  active: color.$orange,
-);
-
-$breakout-buttons-breakpoints: (
-  (864px, 991px),
-  (1088px, 1239px),
-  (1340px, 1379px),
-  (1460px)
-);
-
-$viewport-horizontal-spacing: (
-  'default': -#{space.get('small')},
-  // button dimension + space - slide padding,
-  'md': convert.to-rem(50px),
-);

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

@@ -1,241 +0,0 @@
-@use "sass:map" as sass-map;
-@use 'sass:math';
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/map';
-@use '../../../styles/tokens/breakpoint';
-@use '../../Button/styles/config' as button-config;
-@use '../../Button/styles/mixins' as button-mixins;
-@use '../../Grid/styles/mixins' as grid-mixins;
-@use './config';
-
-/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
-
-@mixin base {
-  margin: 0 auto;
-  position: relative;
-  margin-bottom: config.$space;
-}
-
-@mixin viewport-wrapper {
-  // wraps viewport and arrows to center them vertically
-  position: relative;
-}
-
-@mixin viewport {
-  margin: 0 auto;
-  position: relative;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: none;
-  transform: translateZ(0);
-  scrollbar-width: none; // hides scrollbar on FF
-
-  @each $breakpoint, $size in config.$viewport-horizontal-spacing {
-    @include breakpoint.get($breakpoint) {
-      margin-left: $size;
-      margin-right: $size;
-    }
-  }
-
-  @include breakpoint.get('sm', 'down') {
-    padding-bottom: math.div(config.$space, 2);
-    scrollbar-width: auto; // hides scrollbar on FF
-  }
-
-  @include breakpoint.get('md') {
-    margin-bottom: config.$space;
-  }
-
-  &::-webkit-scrollbar {
-    opacity: 0;
-    height: 0;
-
-    @include breakpoint.get('sm', 'down') {
-      opacity: 1;
-      height: space.get('small');
-      -webkit-appearance: none;
-      background-color: color.$gray-400;
-      border-radius: 99px;
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    @include breakpoint.get('sm', 'down') {
-      opacity: 1;
-      border-radius: 99px;
-      background-color: color.$gray-800;
-    }
-  }
-
-  &.is-draggable {
-    user-select: none;
-    cursor: -webkit-grab;
-    cursor: grab;
-  }
-
-  &.is-dragging {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-  }
-}
-
-@mixin viewport-blinds() {
-  $spacing: sass-map.get(config.$viewport-horizontal-spacing, 'md') * 2;
-
-  pointer-events: none;
-
-  @include breakpoint.get('md') {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    height: 100%;
-    box-shadow: 11px 0 0 0 color.$white inset, -11px 0 0 0 color.$white inset;
-    width: calc(100% - #{$spacing} + 2px);
-  }
-}
-
-@mixin viewport-blinds-color($color) {
-  @if ($color == 'black') {
-    box-shadow: 10px 0 0 0 color.$black inset, -10px 0 0 0 color.$black inset;
-  }
-
-  @if ($color == 'gray') {
-    box-shadow:
-      // stylelint-disable 10px 0 0 0 color.$gray-300 inset, -10px 0
-      0 0 color.$gray-300 inset;
-  }
-}
-
-@mixin track {
-  transform: translateZ(0);
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  z-index: 1;
-}
-
-@function get-breakout-media-query($min, $max) {
-  @return if(
-    $max,
-    '(min-width: #{$min}) and (max-width: #{$max})',
-    '(min-width: #{$min})'
-  );
-}
-
-@mixin base-breakout-buttons {
-  @each $min, $max in config.$breakout-buttons-breakpoints {
-    @media only screen and #{get-breakout-media-query($min, $max)} {
-      margin-left: -#{convert.to-rem(60px)};
-      margin-right: -#{convert.to-rem(60px)};
-    }
-  }
-}
-
-@mixin slide-base {
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  flex: 0 0 auto;
-  padding: 0 math.div(config.$space, 2);
-  user-select: none;
-
-  > * {
-    flex-shrink: 1;
-    flex-grow: 0;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  img {
-    user-select: none;
-    pointer-events: none;
-  }
-}
-
-@mixin button-base {
-  @include button-mixins.base(button-config.$base);
-  @include button-mixins.style(config.$button);
-  @include button-mixins.square-base();
-  @include button-mixins.square-size('default');
-  @include base.focusring-round();
-
-  position: absolute;
-  top: 50%;
-  z-index: 10;
-  margin: 0;
-  border-radius: 100%;
-
-  @include breakpoint.get('sm', 'down') {
-    display: none;
-  }
-}
-
-@mixin button-prev {
-  left: 0;
-  transform: translateY(-50%);
-}
-
-@mixin button-next {
-  right: 0;
-  transform: translateY(-50%);
-}
-
-@mixin button-disabled {
-  @include generate.css-map(sass-map.get(button-config.$base, 'disabled'));
-}
-
-@mixin button-inverse {
-  @include button-mixins.style(config.$button-inverse);
-}
-
-@mixin pagination {
-  user-select: none;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin: 0 auto;
-  padding: 0;
-}
-
-@mixin pagination-item {
-  background: none;
-  border: 0;
-  padding: 0;
-  user-select: none;
-  display: block;
-  cursor: pointer;
-  border-radius: 100%;
-
-  @include generate.css-map(config.$dot-layout);
-  @include base.focusring-round();
-
-  background-color: sass-map.get(config.$dot, 'default');
-
-  &:hover {
-    background-color: sass-map.get(config.$dot, 'hover');
-  }
-
-  &.is-active {
-    background-color: sass-map.get(config.$dot, 'active');
-  }
-}
-
-@mixin pagination-item-inverse {
-  background-color: sass-map.get(config.$dot-inverse, 'default');
-
-  &:hover {
-    background-color: sass-map.get(config.$dot-inverse, 'hover');
-  }
-
-  &.is-active {
-    background-color: sass-map.get(config.$dot-inverse, 'active');
-  }
-}

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

@@ -1,71 +0,0 @@
-@use './mixins';
-
-.carousel {
-  @include mixins.base;
-
-  .container > & {
-    @include mixins.base-breakout-buttons;
-  }
-
-  &__viewport-wrapper {
-    @include mixins.viewport-wrapper;
-  }
-
-  &__viewport {
-    @include mixins.viewport;
-  }
-
-  &__blinds {
-    @include mixins.viewport-blinds;
-
-    .bg-black & {
-      @include mixins.viewport-blinds-color('black');
-    }
-
-    .bg-gray & {
-      @include mixins.viewport-blinds-color('gray');
-    }
-  }
-
-  &__track {
-    @include mixins.track;
-  }
-
-  &__slide {
-    @include mixins.slide-base;
-  }
-
-  &__prev,
-  &__next {
-    @include mixins.button-base;
-
-    &.is-disabled {
-      @include mixins.button-disabled;
-    }
-  }
-
-  &__prev {
-    @include mixins.button-prev;
-  }
-
-  &__next {
-    @include mixins.button-next;
-  }
-
-  .bg-black &__prev,
-  .bg-black &__next {
-    @include mixins.button-inverse;
-  }
-
-  &__pagination {
-    @include mixins.pagination;
-  }
-
-  &__pagination-item {
-    @include mixins.pagination-item;
-  }
-
-  .bg-black &__pagination-item {
-    @include mixins.pagination-item-inverse;
-  }
-}

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import Carousel from '..';
-
-const example = (
-  <>
-    <Carousel
-      items={Array(5)
-        .fill()
-        .map((_, index) => (
-          <div key={index.toString()}>slide {index}</div>
-        ))}
-    />
-  </>
-);
-
-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();
-});