From 94816f1b64aeca213f0eb59fc1583cbcdc8c303c Mon Sep 17 00:00:00 2001 From: Spicoud Date: Fri, 26 Apr 2024 14:38:07 +0200 Subject: [PATCH 1/5] remove slider and disclaimer components --- .../react-template/screens/Disclaimer.tsx | 23 -- examples/react-template/screens/Slider.tsx | 186 ----------------- examples/react-template/screens/index.ts | 2 - .../disclaimer/Disclaimer.native.tsx | 47 ----- .../disclaimer/Disclaimer.stories.tsx | 23 -- .../components/disclaimer/Disclaimer.tsx | 65 ------ .../components/disclaimer/DisclaimerProps.ts | 15 -- packages/react/components/disclaimer/index.ts | 4 - .../disclaimer/item/DisclaimerItem.native.tsx | 22 -- .../disclaimer/item/DisclaimerItem.tsx | 23 -- .../disclaimer/item/DisclaimerItemProps.ts | 13 -- .../react/components/disclaimer/item/index.ts | 3 - .../disclaimer/test/disclaimer.test.tsx | 23 -- .../react/components/enumsComponentsName.ts | 4 - packages/react/components/index.ts | 2 - .../react/components/slider/Slider.native.tsx | 196 ------------------ .../components/slider/Slider.stories.tsx | 149 ------------- packages/react/components/slider/Slider.tsx | 103 --------- .../react/components/slider/SliderEnum.ts | 9 - .../react/components/slider/SliderProps.ts | 25 --- packages/react/components/slider/index.ts | 6 - .../slider/item/SliderItem.native.tsx | 46 ---- .../components/slider/item/SliderItem.tsx | 34 --- .../components/slider/item/SliderItemProps.ts | 12 -- .../react/components/slider/item/index.ts | 3 - .../components/slider/test/Slider.test.tsx | 37 ---- .../react/components/slider/utils/slider.js | 2 - .../styles/framework/src/components/_all.scss | 2 - .../framework/src/components/_disclaimer.scss | 85 -------- .../framework/src/components/_slider.scss | 92 -------- .../themes/default/trilogy-partials.scss | 2 - 31 files changed, 1258 deletions(-) delete mode 100644 examples/react-template/screens/Disclaimer.tsx delete mode 100644 examples/react-template/screens/Slider.tsx delete mode 100644 packages/react/components/disclaimer/Disclaimer.native.tsx delete mode 100644 packages/react/components/disclaimer/Disclaimer.stories.tsx delete mode 100644 packages/react/components/disclaimer/Disclaimer.tsx delete mode 100644 packages/react/components/disclaimer/DisclaimerProps.ts delete mode 100644 packages/react/components/disclaimer/index.ts delete mode 100644 packages/react/components/disclaimer/item/DisclaimerItem.native.tsx delete mode 100644 packages/react/components/disclaimer/item/DisclaimerItem.tsx delete mode 100644 packages/react/components/disclaimer/item/DisclaimerItemProps.ts delete mode 100644 packages/react/components/disclaimer/item/index.ts delete mode 100644 packages/react/components/disclaimer/test/disclaimer.test.tsx delete mode 100644 packages/react/components/slider/Slider.native.tsx delete mode 100644 packages/react/components/slider/Slider.stories.tsx delete mode 100644 packages/react/components/slider/Slider.tsx delete mode 100644 packages/react/components/slider/SliderEnum.ts delete mode 100644 packages/react/components/slider/SliderProps.ts delete mode 100644 packages/react/components/slider/index.ts delete mode 100644 packages/react/components/slider/item/SliderItem.native.tsx delete mode 100644 packages/react/components/slider/item/SliderItem.tsx delete mode 100644 packages/react/components/slider/item/SliderItemProps.ts delete mode 100644 packages/react/components/slider/item/index.ts delete mode 100644 packages/react/components/slider/test/Slider.test.tsx delete mode 100644 packages/react/components/slider/utils/slider.js delete mode 100644 packages/styles/framework/src/components/_disclaimer.scss delete mode 100644 packages/styles/framework/src/components/_slider.scss diff --git a/examples/react-template/screens/Disclaimer.tsx b/examples/react-template/screens/Disclaimer.tsx deleted file mode 100644 index f77302a9..00000000 --- a/examples/react-template/screens/Disclaimer.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from "react"; -import { - Section, - Title, - TitleLevels, - Divider, - Disclaimer, - DisclaimerItem, -} from "@trilogy-ds/react/components"; - -export const DisclaimerScreen = (): JSX.Element => { - return ( -
- Legal Notice - - - Disclaimer Item 1 - Disclaimer Item 2 - Disclaimer Item 3 - -
- ); -}; diff --git a/examples/react-template/screens/Slider.tsx b/examples/react-template/screens/Slider.tsx deleted file mode 100644 index 2b125ca2..00000000 --- a/examples/react-template/screens/Slider.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import * as React from "react"; -import { - Title, - TitleLevels, - SliderItem, - Card, - CardContent, - Container, - Slider, - IconSize, - Spacer, - SpacerSize, -} from "@trilogy-ds/react/components"; -import { Divider } from "@trilogy-ds/react"; - -export const SliderScreen = (): JSX.Element => { - return ( - - Simple Slider - - - - - - Slider TS - - - - - - - Slider TS - - - - - - - Slider TS - - - - - - - - - - Multiple Cards Slider - - - - - - Card 1 - - - - - - - Card 2 - - - - - - - Card 3 - - - - - - - Card 4 - - - - - - - Card 5 - - - - - - - Card 6 - - - - - - - Card 7 - - - - - - - Card 8 - - - - - - - - - - - - - Multiple Cards Slider without dots - - - - - - - Card 1 - - - - - - - Card 2 - - - - - - - Card 3 - - - - - - - Card 4 - - - - - - - Card 5 - - - - - - - Card 6 - - - - - - - Card 7 - - - - - - - Card 8 - - - - - - ); -}; diff --git a/examples/react-template/screens/index.ts b/examples/react-template/screens/index.ts index d9cedbb8..3aa5fe0d 100644 --- a/examples/react-template/screens/index.ts +++ b/examples/react-template/screens/index.ts @@ -12,7 +12,6 @@ export * from "./Chips"; export * from "./Column"; export * from "./Container"; export * from "./CountDown"; -export * from "./Disclaimer"; export * from "./Divider"; export * from "./Dropdown"; export * from "./Fab"; @@ -35,7 +34,6 @@ export * from "./Radio"; export * from "./Range"; export * from "./SegmentedControl"; export * from "./Select"; -export * from "./Slider"; export * from "./Stepper"; export * from "./Sticker"; export * from "./Switch"; diff --git a/packages/react/components/disclaimer/Disclaimer.native.tsx b/packages/react/components/disclaimer/Disclaimer.native.tsx deleted file mode 100644 index b4f73028..00000000 --- a/packages/react/components/disclaimer/Disclaimer.native.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from "react" -import { DisclaimerWebProps } from "./DisclaimerProps" -import { ComponentName } from "../enumsComponentsName" -import { - Accordion, - AccordionBody, - AccordionHeader, - AccordionItem, -} from "../accordion" -import { Text, TextLevels } from "../text" -import { TypographyBold } from "../../objects" - -/** - * Disclaimer component - * @param children {React.ReactNode|string} Disclaimer Item Children - */ -const Disclaimer = ({ - children, - title, - ...others -}: DisclaimerWebProps): JSX.Element => { - return ( - - - - - {title} - - - - {children && typeof children.valueOf() === "string" ? ( - {String(children)} - ) : ( - children - )} - - - - ) -} - -Disclaimer.displayName = ComponentName.Disclaimer - -export default Disclaimer diff --git a/packages/react/components/disclaimer/Disclaimer.stories.tsx b/packages/react/components/disclaimer/Disclaimer.stories.tsx deleted file mode 100644 index 8a4a23fe..00000000 --- a/packages/react/components/disclaimer/Disclaimer.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from "react"; - -import { Meta, Story } from "@storybook/react"; -import Disclaimer from "./Disclaimer"; -import DisclaimerItem from "./item"; -import { DisclaimerProps } from "./DisclaimerProps"; - -export default { - title: "Components/Disclaimer", - component: Disclaimer, - subcomponents: { DisclaimerItem }, -} as Meta; - -export const Base: Story = (args) => ( - - Disclaimer Item 1 - Disclaimer Item 2 - Disclaimer Item 3 - -); -Base.args = { - title: "Informations sur la Messagerie", -}; diff --git a/packages/react/components/disclaimer/Disclaimer.tsx b/packages/react/components/disclaimer/Disclaimer.tsx deleted file mode 100644 index 8263d7b0..00000000 --- a/packages/react/components/disclaimer/Disclaimer.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from "react" -import { DisclaimerWebProps } from "./DisclaimerProps" -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionBody, -} from "../accordion" -import { is } from "../../services/index" -import { Text, TextLevels } from "../text" -import clsx from "clsx" -import { hashClass } from "../../helpers" -import { TypographyBold } from "../../objects" -import { useTrilogyContext } from "../../context" - -/** - * Disclaimer component - * @param children {React.ReactNode|string} Disclaimer Item Children - * @param className {string} Additionnal css classes - * @param title {string} Disclaimer Title - * @param active {boolean} Active Disclaimer Bar - */ -const Disclaimer = ({ - children, - className, - title, - active, - ...others -}: DisclaimerWebProps): JSX.Element => { - const { styled } = useTrilogyContext() - - const classes = clsx("disclaimer", is("tri"), className) - const wrapperClasses = clsx("disclaimer-header", is("grouped"), is("tri")) - const classesBody = clsx("accordion-body", is("clipped"), is("tri")) - const classesContent = hashClass( - styled, - clsx("disclaimer-content", active && is("active"), "subtitle", is("tri")) - ) - - return ( - - - - - {title} - - - -
- {children && typeof children.valueOf() === "string" ? ( - {String(children)} - ) : ( - children - )} -
- - - - ) -} - -export default Disclaimer diff --git a/packages/react/components/disclaimer/DisclaimerProps.ts b/packages/react/components/disclaimer/DisclaimerProps.ts deleted file mode 100644 index 3eb69ef5..00000000 --- a/packages/react/components/disclaimer/DisclaimerProps.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Disclaimer Interface - */ -export interface DisclaimerProps { - children?: React.ReactNode | string - title?: string - active?: boolean -} - -/** - * Disclaimer Interface - */ -export interface DisclaimerWebProps extends DisclaimerProps { - className?: string -} diff --git a/packages/react/components/disclaimer/index.ts b/packages/react/components/disclaimer/index.ts deleted file mode 100644 index 1581012a..00000000 --- a/packages/react/components/disclaimer/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import Disclaimer from './Disclaimer' -import DisclaimerItem from './item' - -export { Disclaimer, DisclaimerItem } diff --git a/packages/react/components/disclaimer/item/DisclaimerItem.native.tsx b/packages/react/components/disclaimer/item/DisclaimerItem.native.tsx deleted file mode 100644 index 6a69e71e..00000000 --- a/packages/react/components/disclaimer/item/DisclaimerItem.native.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from "react" -import { DisclaimerItemProps } from "./DisclaimerItemProps" -import { ComponentName } from "../../enumsComponentsName" -import { Text } from "../../text" -import { View } from "../../view" - -/** - * Disclaimer component - * @param children {React.ReactNode|string} Disclaimer Item Children - * @param className {string} Additionnal css classes - * @param title {string} Disclaimer Title - * @param active {boolean} Active Disclaimer Bar - */ -const DisclaimerItem = ({ children }: DisclaimerItemProps): JSX.Element => { - if (children && typeof children.valueOf() === "string") - return {children} - return {children} -} - -DisclaimerItem.displayName = ComponentName.DisclaimerItem - -export default DisclaimerItem diff --git a/packages/react/components/disclaimer/item/DisclaimerItem.tsx b/packages/react/components/disclaimer/item/DisclaimerItem.tsx deleted file mode 100644 index 378a39ef..00000000 --- a/packages/react/components/disclaimer/item/DisclaimerItem.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from "react" -import { DisclaimerItemWebProps } from "./DisclaimerItemProps" -import clsx from "clsx" -import { hashClass } from "../../../helpers" -import { useTrilogyContext } from "../../../context" - -/** - * Disclaimer Item component - * @param children {ReactNode} Diclaimer Item Children - * @param className {string} Additionnal css classes - */ -const DisclaimerItem = ({ - className, - ...others -}: DisclaimerItemWebProps): JSX.Element => { - const { styled } = useTrilogyContext() - - const classes = hashClass(styled, clsx("disclaimer-item", className)) - - return
-} - -export default DisclaimerItem diff --git a/packages/react/components/disclaimer/item/DisclaimerItemProps.ts b/packages/react/components/disclaimer/item/DisclaimerItemProps.ts deleted file mode 100644 index 1dea894e..00000000 --- a/packages/react/components/disclaimer/item/DisclaimerItemProps.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Disclaimer Item Interface - */ -export interface DisclaimerItemProps { - children?: React.ReactNode -} - -/** - * Disclaimer Item Interface - */ -export interface DisclaimerItemWebProps extends DisclaimerItemProps { - className?: string -} diff --git a/packages/react/components/disclaimer/item/index.ts b/packages/react/components/disclaimer/item/index.ts deleted file mode 100644 index ab9cdaa0..00000000 --- a/packages/react/components/disclaimer/item/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import DisclaimerItem from './DisclaimerItem' - -export default DisclaimerItem diff --git a/packages/react/components/disclaimer/test/disclaimer.test.tsx b/packages/react/components/disclaimer/test/disclaimer.test.tsx deleted file mode 100644 index 13878719..00000000 --- a/packages/react/components/disclaimer/test/disclaimer.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from "react"; -import { render, screen } from "@testing-library/react"; -import Disclaimer from "../Disclaimer"; -import DisclaimerItem from "../item"; - -describe("Disclaimer", () => { - it("renders disclaimer with title and content", () => { - const title = "Disclaimer Title"; - const content = "Disclaimer Content"; - render({content}); - expect(screen.getByText(title)).toBeInTheDocument(); - expect(screen.getByText(content)).toBeInTheDocument(); - }); - - it("renders with the correct class name", () => { - const { container } = render( - - ); - expect(container.firstChild).toHaveClass( - "disclaimer-item has-text-weight-bold" - ); - }); -}); diff --git a/packages/react/components/enumsComponentsName.ts b/packages/react/components/enumsComponentsName.ts index 6908d30b..9f5e274e 100644 --- a/packages/react/components/enumsComponentsName.ts +++ b/packages/react/components/enumsComponentsName.ts @@ -41,8 +41,6 @@ export enum ComponentName { ContentSize = "ContentSize", Countdown = "Countdown", DeletableNotification = "DeletableNotification", - Disclaimer = "Disclaimer", - DisclaimerItem = "DisclaimerItem", Divider = "Divider", Dropdown = "Dropdown", DropdownDivider = "DropdownDivider", @@ -119,8 +117,6 @@ export enum ComponentName { SelectOption = "SelectOption", Selector = "Selector", SelectorIOtem = "SelectorIOtem", - Slider = "Slider", - SliderItem = "SliderItem", Spacer = "Spacer", SpacerSize = "SpacerSize", StatusIcon = "StatusIcon", diff --git a/packages/react/components/index.ts b/packages/react/components/index.ts index e180ad93..937cb7eb 100644 --- a/packages/react/components/index.ts +++ b/packages/react/components/index.ts @@ -11,7 +11,6 @@ export * from "./checkbox" export * from "./columns" export * from "./container" export * from "./countdown" -export * from "./disclaimer" export * from "./divider" export * from "./dropdown" export * from "./fab" @@ -35,7 +34,6 @@ export * from "./scroll-view" export * from "./section" export * from "./select" export * from "./selector" -export * from "./slider" export * from "./spacer" export * from "./stepper" export * from "./sticker" diff --git a/packages/react/components/slider/Slider.native.tsx b/packages/react/components/slider/Slider.native.tsx deleted file mode 100644 index c4700ec7..00000000 --- a/packages/react/components/slider/Slider.native.tsx +++ /dev/null @@ -1,196 +0,0 @@ -/* eslint-disable indent */ -import React, { useRef, useState } from "react" -import { Dimensions, Platform, ScrollView, StyleSheet, Text, View, } from "react-native" -import { SliderProps } from "./SliderProps" -import { getColorStyle, TrilogyColor } from "../../objects/facets/Color" -import { Spacer, SpacerSize } from "../spacer" -import { ComponentName } from "../enumsComponentsName" - -const { width } = Dimensions.get("screen") - -// const height = (width.width * 100) / 60 // 60% - -/** - * Slider component - * @param children {ReactNode} Slider child - * @param doted {boolean} slide dot - * @param showNextSlide {boolean} show next slide - * @param contentSize {number} size of slide - * @param testId - * @param accessibilityLabel - * @param progressBar - * @param bars - * @param others - */ -const Slider = ({ - children, - doted, - showNextSlide, - contentSize, - testId, - accessibilityLabel, - progressBar, - bars, - ...others -}: SliderProps): JSX.Element => { - const [activeItem, setActiveItem] = useState(0) - const [height, setHeight] = useState(0) - - const contentWidth = contentSize - ? contentSize - : showNextSlide - ? width * 0.85 - : width - const showNextSlideValue = showNextSlide ? 4 : 0 - - const styles = StyleSheet.create({ - content: { - width: contentWidth, - resizeMode: "cover", - padding: showNextSlideValue, - height: "100%", - }, - dots: { - flexDirection: "row", - position: "absolute", - bottom: doted ? -24 : -12, - alignSelf: "center", - fontSize: 30, - justifyContent: "center", - alignItems: "center", - marginLeft: 50, - }, - textDots: { - color: getColorStyle(TrilogyColor.FONT, 1), - fontSize: 30, - }, - activeTextDot: { - color: getColorStyle(TrilogyColor.MAIN), - fontSize: 30, - }, - progressBar: { - backgroundColor: getColorStyle(TrilogyColor.FONT, 1), - fontSize: 30, - width: `${90 / React.Children.count(children)}%`, - height: 6, - borderRadius: 4, - borderWidth: 1, - borderColor: getColorStyle(TrilogyColor.FONT, 1), - overflow: "hidden", - }, - activeProgressBar: { - backgroundColor: getColorStyle(TrilogyColor.MAIN), - fontSize: 30, - width: `${100 / React.Children.count(children)}%`, - height: 6, - borderRadius: 4, - borderWidth: 1, - borderColor: getColorStyle(TrilogyColor.MAIN), - overflow: "hidden", - }, - }) - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const changeHandler = ({ nativeEvent }: any) => { - if (nativeEvent.layoutMeasurement.width === 0) return - const slide = Math.ceil( - nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width - ) - if (slide !== activeItem) { - setActiveItem(slide) - } - } - const scrollViewRef = useRef(null) - - const SPACING_FOR_CARD_INSET = showNextSlide ? 24 : 0 - - const getStyles = ( - dot: boolean | undefined, - progressBar: boolean | undefined, - bar: boolean | undefined, - index: number - ) => { - if (dot) { - if (index === activeItem) return styles.activeTextDot - return styles.textDots - } - if (bar || progressBar) { - if (index === activeItem) - return { ...styles.activeProgressBar, marginRight: 8 } - return { ...styles.progressBar, marginRight: 8 } - } - } - - return ( - - { - scrollViewRef?.current?.scrollTo({ - x: -SPACING_FOR_CARD_INSET, - animated: false, - }) - setHeight(e.nativeEvent.layout.height) - }} - ref={scrollViewRef} - contentInset={{ - // iOS ONLY - top: 0, - left: SPACING_FOR_CARD_INSET, // Left spacing for the very first card - bottom: 0, - right: SPACING_FOR_CARD_INSET, // Right spacing for the very last card - }} - contentContainerStyle={{ - // contentInset alternative for Android - paddingHorizontal: - Platform.OS === "android" ? SPACING_FOR_CARD_INSET : 0, // Horizontal spacing before and after the ScrollView - }} - horizontal - > - {children - ? // eslint-disable-next-line @typescript-eslint/no-explicit-any - React.Children.map(children, (child: any) => - React.cloneElement(child, { - style: [styles.content, child.props.style], - }) - ) - : children} - - {(progressBar || doted || bars) && ( - - {children - ? React.Children.map( - children, - (_child: React.ReactNode, index: number) => ( - - {doted && "•"} - - ) - ) - : children} - - - )} - - ) -} - -Slider.displayName = ComponentName.Slider - -export default Slider diff --git a/packages/react/components/slider/Slider.stories.tsx b/packages/react/components/slider/Slider.stories.tsx deleted file mode 100644 index a102ed3e..00000000 --- a/packages/react/components/slider/Slider.stories.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import * as React from "react"; - -import { Meta, Story } from "@storybook/react"; -import { Slider, SliderItem } from "./index"; -import { SliderProps } from "./SliderProps"; -import { Title } from "../title"; - -export default { - title: "Components/Slider", - component: Slider, - subcomponents: { SliderItem }, -} as Meta; - -export const Base: Story = (args) => ( - - -
- - 1 - -
- - -
- - 2 - -
- - -
- - 3 - -
- - -); -export const PlusieursColonnes: Story = (args) => ( - - -
- - 1 - -
- - -
- - 2 - -
- - -
- - 3 - -
- - -); -export const AvecPreview: Story = (args) => ( - - -
- - 1 - -
- - -
- - 2 - -
- - -
- - 3 - -
- - -); -export const SimpleAvecLesBarsEnDehors: Story = (args) => ( - - -
- - 1 - -
- - -
- - 2 - -
- - -
- - 3 - -
- - -); diff --git a/packages/react/components/slider/Slider.tsx b/packages/react/components/slider/Slider.tsx deleted file mode 100644 index fb98a669..00000000 --- a/packages/react/components/slider/Slider.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import * as React from "react" -import clsx from "clsx" -import { SliderProps } from "./SliderProps" -import { Columns } from "../columns" -import { Icon, IconName, IconSize } from "../icon" -import { has, is } from "../../services" -import { hashClass } from "../../helpers" -import { Spacer, SpacerSize } from "../spacer" -import { useTrilogyContext } from "../../context" - -/** - * Slider component - * @param children {ReactNode} Slider child - * @param doted {boolean} slide dot - * - -------------------------- WEB PROPERTIES ------------------------------- - * @param className {string} Additionnal css classes - * @param iconClassName {string} Additionnal css classes for Icon - * @param motionLess {boolean} Disable behaviour on desktop - * @param autoSlideDelay {number} Auto-slide delay in MS - * @param invertedDoted {boolean} Inverted dots color - * @param progressBar {boolean} Show Progress bars - * @param arrowsOut {boolean} Slider arrows outside - * @param arrowSize {IconSize} Icon Arrows Sizes - * - -------------------------- NATIVE PROPERTIES ------------------------------- - * @param showNextSlide {boolean} show next slide - * @param contentSize {number} size of slide - */ -const Slider = ({ - className, - iconClassName, - children, - motionLess, - doted, - autoSlideDelay, - invertedDoted, - progressBar, - bars, - isBarsOut, - arrowsOut, - arrowSize, - ...others -}: SliderProps): JSX.Element => { - const { styled } = useTrilogyContext() - - const classes = hashClass( - styled, - clsx(motionLess && is("motionless-desktop"), className) - ) - const iconSliderClasses = `${has("background-white")} ${has( - "text-main" - )} ${is("circled")} ${iconClassName && iconClassName}` - - return ( -
-
- - {!motionLess && ( - - )} - {children} - {!motionLess && ( - - )} - - {doted && !progressBar && ( -
- )} - {progressBar && !doted &&
} - {bars && !doted && ( - <> -
- - - )} -
- ) -} - -export default Slider diff --git a/packages/react/components/slider/SliderEnum.ts b/packages/react/components/slider/SliderEnum.ts deleted file mode 100644 index 133c3202..00000000 --- a/packages/react/components/slider/SliderEnum.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * ContentSize - */ -export enum ContentSize { - SMALL = 100, - MEDIUM = 150, - LARGE = 200, - HUGE = 300, -} diff --git a/packages/react/components/slider/SliderProps.ts b/packages/react/components/slider/SliderProps.ts deleted file mode 100644 index bcf4711b..00000000 --- a/packages/react/components/slider/SliderProps.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Small } from '../../objects/facets/Small' -import { Accessibility, AlertProps, VariantProps } from '../../objects/facets' -import { Hat } from '../../objects/facets/Hat' -import { ContentSize } from './SliderEnum' -import { IconSize, IconSizeValues } from '../icon' - -export interface SliderProps extends Small, VariantProps, AlertProps, Hat, Accessibility { - children?: React.ReactNode | number - stretched?: boolean - className?: string - doted?: boolean - invertedDoted?: boolean - iconClassName?: string - motionLess?: boolean - showNextSlide?: boolean - contentSize?: ContentSize - autoSlideDelay?: number - /* @deprecated */ - progressBar?: boolean - bars?: boolean - arrowsOut?: boolean - arrowSize?: IconSize | IconSizeValues - - isBarsOut?: boolean -} diff --git a/packages/react/components/slider/index.ts b/packages/react/components/slider/index.ts deleted file mode 100644 index cc351320..00000000 --- a/packages/react/components/slider/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import Slider from './Slider' -import SliderItem from './item/SliderItem' -import { ContentSize } from './SliderEnum' -export default './utils/slider.js' - -export { Slider, SliderItem, ContentSize } diff --git a/packages/react/components/slider/item/SliderItem.native.tsx b/packages/react/components/slider/item/SliderItem.native.tsx deleted file mode 100644 index ec65389a..00000000 --- a/packages/react/components/slider/item/SliderItem.native.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from "react" -import { View, StyleSheet } from "react-native" -import { SliderItemProps } from "./SliderItemProps" -import { ComponentName } from "../../enumsComponentsName" - -/** - * Slider Item component - * @param children {ReactNode} Slider Item child - * @param testId - * @param accessibilityLabel - * @param others - */ -const SliderItem = ({ - children, - testId, - accessibilityLabel, - ...others -}: SliderItemProps): JSX.Element => { - const styles = StyleSheet.create({ - height: { - height: "100%", - }, - }) - - return ( - - { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - React.Children.map(children, (child: any) => - React.cloneElement(child, { - style: [styles.height, child.props.style], - }) - ) - } - - ) -} - -SliderItem.displayName = ComponentName.SliderItem - -export default SliderItem diff --git a/packages/react/components/slider/item/SliderItem.tsx b/packages/react/components/slider/item/SliderItem.tsx deleted file mode 100644 index 7560970e..00000000 --- a/packages/react/components/slider/item/SliderItem.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from "react" -import clsx from "clsx" -import { ColumnsItem } from "../../columns" -import { SliderItemProps } from "./SliderItemProps" -import { is } from "../../../services" -import { hashClass } from "../../../helpers" -import { useTrilogyContext } from "../../../context" - -/** - * Slider Item component - * @param className {string} Additionnal css classes - * @param children {ReactNode} Slider Item child - * @param active {boolean} Default active item - * @param size {number} Column Item size (1 - 12) - */ -const SliderItem = ({ - children, - active, - className, - size, - ...others -}: SliderItemProps): JSX.Element => { - const { styled } = useTrilogyContext() - - const classes = hashClass(styled, clsx(active && is("active"), className)) - - return ( - - {children} - - ) -} - -export default SliderItem diff --git a/packages/react/components/slider/item/SliderItemProps.ts b/packages/react/components/slider/item/SliderItemProps.ts deleted file mode 100644 index f2b685f8..00000000 --- a/packages/react/components/slider/item/SliderItemProps.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Accessibility } from '../../../objects' -import { ColumnsSize } from '../../columns/ColumnsTypes' - -/** - * Slider Step Interface - */ -export interface SliderItemProps extends Accessibility { - children?: React.ReactNode - active?: boolean - className?: string - size?: ColumnsSize -} diff --git a/packages/react/components/slider/item/index.ts b/packages/react/components/slider/item/index.ts deleted file mode 100644 index f8d02c03..00000000 --- a/packages/react/components/slider/item/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import SliderItem from './SliderItem' - -export default SliderItem diff --git a/packages/react/components/slider/test/Slider.test.tsx b/packages/react/components/slider/test/Slider.test.tsx deleted file mode 100644 index 34906adf..00000000 --- a/packages/react/components/slider/test/Slider.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from "react"; -import { render } from "@testing-library/react"; -import Slider from "../slider"; -import SliderItem from "../item"; - -describe("Slider component", () => { - it("renders correctly", () => { - const { getByTestId } = render(); - expect(getByTestId("slider")).toBeInTheDocument(); - }); -}); -describe("SliderItem component", () => { - it("renders children", () => { - const { getByText } = render(Hello world); - expect(getByText("Hello world")).toBeInTheDocument(); - }); - - it("adds active class if active prop is true", () => { - const { container } = render(); - expect(container.firstChild).toHaveClass("is-active"); - }); - - it("adds custom class name", () => { - const { container } = render(); - expect(container.firstChild).toHaveClass("custom-class"); - }); - - it("adds default column size of 12", () => { - const { container } = render(); - expect(container.firstChild).toHaveClass("is-12"); - }); - - it("adds custom column size", () => { - const { container } = render(); - expect(container.firstChild).toHaveClass("is-6"); - }); -}); diff --git a/packages/react/components/slider/utils/slider.js b/packages/react/components/slider/utils/slider.js deleted file mode 100644 index 2d4a54d9..00000000 --- a/packages/react/components/slider/utils/slider.js +++ /dev/null @@ -1,2 +0,0 @@ -//@ts-nocheck -(()=>{var t={297:(t,e,n)=>{(t.exports=n(252)(!1)).push([t.id,"* {\n padding: 0;\n margin: 0; }\n\n[data-slider] {\n width: 100%;\n box-sizing: border-box;\n position: relative;\n padding: 0;\n margin: 0; }\n [data-slider] img {\n margin: auto; }\n [data-slider] [data-images-container] img {\n object-fit: cover;\n position: relative;\n height: 0;\n opacity: 0;\n transition: opacity 1s; }\n [data-slider] [data-images-container] img.is-active {\n opacity: 1;\n height: auto;\n position: static; }\n [data-slider] [data-slides-container] {\n width: 100%;\n box-sizing: border-box;\n display: flex;\n overflow: hidden;\n position: relative; }\n [data-slider] [data-slides-container].columns {\n margin: 0; }\n [data-slider] [data-slides-container] [data-slide] {\n box-sizing: border-box;\n position: relative;\n left: 0;\n vertical-align: middle; }\n [data-slider] [data-alternate-container] [data-slides-container] {\n border: none; }\n [data-slider] [data-alternate-container] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-content: center; }\n [data-slider] [data-footer] {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n width: 50%; }\n [data-slider] [data-footer] [data-arrows] {\n display: flex;\n justify-content: space-between; }\n [data-slider] [data-footer] [data-arrows] span.icon {\n box-shadow: none;\n align-items: center;\n position: unset;\n transform: unset;\n margin-right: 20px; }\n [data-slider] [data-footer] [data-slide-counter] {\n margin-left: 10px; }\n [data-slider] [data-slider-dots] {\n display: flex;\n justify-content: space-between;\n align-content: center; }\n [data-slider] [data-slider-dots] .slider-dot {\n cursor: pointer; }\n [data-slider] [data-slider-bars] {\n display: flex;\n justify-content: center;\n align-content: center;\n margin: auto;\n position: relative;\n top: -16px; }\n [data-slider] [data-slider-bars].is-outside {\n top: 16px; }\n [data-slider] [data-slider-bars] .slider-bar {\n cursor: pointer;\n width: 64px;\n height: 8px;\n background-color: #E1E1E1;\n border-radius: 8px;\n margin: auto 8px; }\n [data-slider] [data-slider-bars] .slider-bar.is-active {\n background-color: #109DB9; }\n [data-slider] [data-progress-bar-container] {\n display: flex;\n justify-content: center;\n align-items: center;\n width: auto;\n margin: auto;\n margin-top: 16px; }\n [data-slider] [data-progress-bar-container] [data-container-progress] {\n height: 8px;\n margin: 0 7px;\n width: 75px;\n margin-bottom: -1px;\n border-radius: 15px; }\n [data-slider] [data-progress-bar-container] [data-container-progress] [data-progress] {\n transition: all 0.1s ease-out;\n height: 100%;\n width: 0;\n border-radius: 15px; }\n @media screen and (max-width: 1023px) {\n [data-slider] [data-progress-bar-container] .slider-bar, [data-slider] [data-slider-bars] .slider-bar {\n width: 100%; }\n [data-slider] [data-slider-bars].is-outside .slider-bar:first-child {\n margin-left: 0; }\n [data-slider] [data-slider-bars].is-outside .slider-bar:last-child {\n margin-right: 0; }\n [data-slider] [data-slider-prev], [data-slider] [data-slider-next] {\n display: none; } }\n [data-slider].is-slider-mobile [data-progress-bar-container] .slider-bar, [data-slider].is-slider-mobile [data-slider-bars] .slider-bar {\n width: 100%; }\n [data-slider].is-slider-mobile [data-slider-bars].is-outside .slider-bar:first-child {\n margin-left: 0; }\n [data-slider].is-slider-mobile [data-slider-bars].is-outside .slider-bar:last-child {\n margin-right: 0; }\n [data-slider].is-slider-mobile [data-slider-prev], [data-slider].is-slider-mobile [data-slider-next] {\n display: none; }\n",""])},252:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n,r=t[1]||"",i=t[3];if(!i)return r;if(e&&"function"==typeof btoa){var a=(n=i,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),o=i.sources.map((function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"}));return[r].concat(o).concat([a]).join("\n")}return[r].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n})).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},i=0;i{var r=n(297);"string"==typeof r&&(r=[[t.id,r,""]]);n(723)(r,{hmr:!0,transform:void 0,insertInto:void 0}),r.locals&&(t.exports=r.locals)},723:(t,e,n)=>{var r,i,a={},o=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===i&&(i=r.apply(this,arguments)),i}),s=function(t,e){return e?e.querySelector(t):document.querySelector(t)},d=function(t){var e={};return function(t,n){if("function"==typeof t)return t();if(void 0===e[t]){var r=s.call(this,t,n);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[t]=r}return e[t]}}(),l=null,c=0,u=[],f=n(947);function p(t,e){for(var n=0;n=0&&u.splice(e,1)}function b(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=n.nc;r&&(t.attrs.nonce=r)}return m(e,t.attrs),h(t,e),e}function m(t,e){Object.keys(e).forEach((function(n){t.setAttribute(n,e[n])}))}function g(t,e){var n,r,i,a;if(e.transform&&t.css){if(!(a="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=a}if(e.singleton){var o=c++;n=l||(l=b(e)),r=A.bind(null,n,o,!1),i=A.bind(null,n,o,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",m(e,t.attrs),h(t,e),e}(e),r=E.bind(null,n,e),i=function(){y(n),n.href&&URL.revokeObjectURL(n.href)}):(n=b(e),r=S.bind(null,n),i=function(){y(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else i()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=o()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=v(t,e);return p(n,e),function(t){for(var r=[],i=0;i{t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,(function(t,e){var i,a=e.trim().replace(/^"(.*)"$/,(function(t,e){return e})).replace(/^'(.*)'$/,(function(t,e){return e}));return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(a)?t:(i=0===a.indexOf("//")?a:0===a.indexOf("/")?n+a:r+a.replace(/^\.\//,""),"url("+JSON.stringify(i)+")")}))}}},e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={id:r,exports:{}};return t[r](i,i.exports,n),i.exports}(()=>{"use strict";n(914);var t,e=(t={DELTA_X:100,TRANSITION_SPEED:1.5,TRANSITION_SPEED_DRAG:.5,PREVIEW_DURATION:6e3}).DELTA_X,r=t.TRANSITION_SPEED,i=t.TRANSITION_SPEED_DRAG,a=function(t){return null==t?void 0:t.offsetWidth},o=function(t){if(t){var e=t.querySelector("[data-progress]");e.setAttribute("value","0"),e.style.width="0%"}},s=[],d=function(t){for(var e=t.querySelectorAll("[data-slide]"),n=0;nn?0:e},p=function(t){return t.querySelector("[data-slide-counter]")},v=function(t){return Array.prototype.slice.call(t.querySelectorAll(".slider-dot"))},h=function(t){return Array.prototype.slice.call(t.querySelectorAll(".slider-bar"))},y=function(t){return Array.prototype.slice.call(t.querySelectorAll("[data-slide-preview]"))},b=function(t){return Array.prototype.slice.call(t.querySelectorAll("[data-images-container] img"))},m=function(t){return Array.prototype.slice.call(t.querySelectorAll("[data-progress-bar-container] [data-container-progress]"))},g=function(t){return[b(t),v(t),h(t),c(t),m(t),y(t)]},x=function(t,e,n,r){var i=0,a=setInterval((function(){!function(t,e,n){if(e){var r=e.querySelector("[data-progress]");r.setAttribute("value","100"),r.style.width=n+"%"}}(0,e,i),i++>=100&&(i=0,clearInterval(a),o(e))}),r/100);s.push({slider:t,interval:a})},w=function(t){var e=t.querySelector("[data-slider-duration]");return e?parseInt(e.getAttribute("data-slider-duration")):0},A=function(t,e,n){void 0===n&&(n=r),e=f(t,e);var i=m(t);g(t).forEach((function(t){var n;t.forEach((function(t){l(t)})),(n=t[e])&&n.classList.add("is-active")})),i.length>0&&o(i[function(t){for(var e=m(t),n=0;n"+e+" / "+r}(t,e+1),function(t){var e,n,r,i,a,o,s=u(t);switch(d(t)){case 0:null===(e=t.querySelector("[data-slider-prev]"))||void 0===e||e.classList.add("is-hidden"),null===(n=t.querySelector("[data-slider-next]"))||void 0===n||n.classList.remove("is-hidden");break;case s:null===(r=t.querySelector("[data-slider-next]"))||void 0===r||r.classList.add("is-hidden"),null===(i=t.querySelector("[data-slider-prev]"))||void 0===i||i.classList.remove("is-hidden");break;default:null===(a=t.querySelector("[data-slider-prev]"))||void 0===a||a.classList.remove("is-hidden"),null===(o=t.querySelector("[data-slider-next]"))||void 0===o||o.classList.remove("is-hidden")}}(t),function(t,e,n,i,o){void 0===o&&(o=r);var s=function(t,e,n){var r=n.length-1,i=a(n[e]);return e===r?i*e-(t-a(n[e])):i*e}(a(t),n,i);i.forEach((function(t){window.requestAnimationFrame((function(){t.style.transition=o+"s",t.style.left="-"+s+"px"}))}))}(t,d(t),e,c(t),n)},S=function(t,e){if(e>0){var n=m(t),r=f(t,d(t));x(t,n[r],0,e);var i=setInterval((function(){var r=f(t,d(t)+1),i=n[r];x(t,i,0,e),A(t,r)}),e);s.push({slider:t,interval:i})}},E=function(t){var e,n=g(t);!function(t){Array.prototype.slice.call(t.querySelectorAll("[data-container-progress]")).forEach((function(t){var e=t.querySelector("[data-progress]");e.setAttribute("value","0"),e.style.width="0%"}))}(t),n.forEach((function(t){t.forEach((function(t){l(t)}))})),e=t,s.forEach((function(t){if(t.slider===e){var n=s.indexOf(t);s.slice(n,1),clearInterval(t.interval)}}))},L=function(t,e,n,i){void 0===i&&(i=r),E(t),A(t,n,i),S(t,e)},q=function(t){!function(t){!function(t){var n=null==t?void 0:t.querySelector("[data-slides-container]"),r=null==t?void 0:t.querySelectorAll("[data-slide]"),a=null==n?void 0:n.querySelectorAll("img, [data-expand-link]");a&&[].forEach.call(a,(function(t){t.addEventListener("dragstart",(function(t){t.preventDefault(),t.stopPropagation()}))}));var o,s,l,c=function(t){return t.touches&&t.touches[0]?t.touches[0].clientX:t.clientX},u=!1,f=function(e){var n;!function(t,e){for(var n=t.querySelectorAll("[data-slide]"),r=function(t){window.requestAnimationFrame((function(){n[t].style.transition="0s"}))},i=0;i=e?a+1:a,i),u=!1,o=null,l=0}};n&&(n.addEventListener("mousedown",f),n.addEventListener("touchstart",f,{passive:!0}),n.addEventListener("mousemove",p),n.addEventListener("touchmove",p,{passive:!0}),n.addEventListener("mouseup",v),n.addEventListener("touchend",v,{passive:!0}))}(t)}(t),function(t){!function(t){var e=t.querySelector("[data-slider-dots]");if(e){var n=u(t);e.innerHTML="";for(var r=function(n){var r=document.createElement("div");r.classList.add("slider-dot"),r.addEventListener("click",(function(){L(t,w(t),n)})),e.appendChild(r)},i=0;i<=n;i++)r(i)}}(t)}(t),function(t){!function(t){var e=t.querySelector("[data-slider-bars]");if(e){var n=u(t);e.innerHTML="";for(var r=function(n){var r=document.createElement("div");r.classList.add("slider-bar"),r.addEventListener("click",(function(){L(t,w(t),n)})),e.appendChild(r)},i=0;i<=n;i++)r(i)}}(t)}(t),function(t){!function(t){var e,n;null===(e=t.querySelector("[data-slider-prev]"))||void 0===e||e.addEventListener("click",(function(){L(t,w(t),d(t)-1)})),null===(n=t.querySelector("[data-slider-next]"))||void 0===n||n.addEventListener("click",(function(){L(t,w(t),d(t)+1)})),A(t,0)}(t)}(t),function(t){!function(t){for(var e=t.querySelectorAll("[data-slide-preview]"),n=function(n){e[n].addEventListener("click",(function(){L(t,w(t),n)}))},r=0;r0&&Array.prototype.slice.call(t.querySelectorAll("[data-progress]"))&&(S(t,n),document.addEventListener("visibilitychange",(function(){document.hidden?E(t):L(t,n,0)}))),t.offsetWidth<768&&t.classList.add("is-slider-mobile"),t.setAttribute("data-slider-initialized","true")},I=function(){Array.prototype.slice.call(document.querySelectorAll("[data-slider]:not([data-slider-initialized=true])")).forEach((function(t){q(t)}));var t=document;new MutationObserver((function(t,e){t.forEach((function(t){if(t.target){var e=t.target.querySelectorAll("[data-slider]:not([data-slider-initialized=true])");e.length&&e.forEach((function(t){q(t)}))}}))})).observe(t,{attributes:!0,childList:!0,subtree:!0})};"loading"!==document.readyState?I():document.addEventListener("DOMContentLoaded",(function(){I()}))})()})(); diff --git a/packages/styles/framework/src/components/_all.scss b/packages/styles/framework/src/components/_all.scss index 5ead68f8..99694769 100644 --- a/packages/styles/framework/src/components/_all.scss +++ b/packages/styles/framework/src/components/_all.scss @@ -1,7 +1,6 @@ @charset "utf-8"; @import '../utilities/spacing'; -@import 'disclaimer'; @import 'divider'; @import 'breadcrumb'; @import 'card'; @@ -17,7 +16,6 @@ @import 'countdown'; @import 'timeline'; @import 'stepper'; -@import 'slider'; @import 'plus-symbol'; @import 'otp'; @import 'segmented-control'; diff --git a/packages/styles/framework/src/components/_disclaimer.scss b/packages/styles/framework/src/components/_disclaimer.scss deleted file mode 100644 index fcdd9530..00000000 --- a/packages/styles/framework/src/components/_disclaimer.scss +++ /dev/null @@ -1,85 +0,0 @@ -.disclaimer.accordions { - .accordion { - .disclaimer-header { - margin-left: 0; - justify-content: flex-start; - - .toggle.button { - max-height: 20px; - max-width: 20px; - min-height: 20px; - min-width: 20px; - height: 20px; - width: 20px; - margin: 0 10px 0 0; - top: -1px; - - &.is-bordered { - min-height: 32px; - min-width: 32px; - } - } - - .title { - margin: 0 0 0 15px; - } - } - - .disclaimer-content { - padding-left: 20px; - margin-left: $spacing-6; - position: relative; - color: getColor('font'); - - .disclaimer-marker { - margin-left: 30px; - } - - .disclaimer-item { - margin-left: 20px; - - .heading { - font-weight: $weight-normal; - } - - a { - font-weight: $weight-semibold; - text-decoration: underline; - } - - p { - &:not(.heading) { - margin-bottom: 0; - } - } - } - - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - background-color: getColor('font'); - display: block; - width: 0.1em; - height: 100%; - } - } - - #{$hoverSelector} { - border-color: getColor('main'); - } - - &.is-active { - color: getColor('main'); - } - - /* @todo : deprecated ? remove ? add doc ? */ - .heading { - font-size: $text-13; - color: getColor('neutral'); - margin-bottom: 0.75em; - text-transform: inherit; - } - } -} diff --git a/packages/styles/framework/src/components/_slider.scss b/packages/styles/framework/src/components/_slider.scss deleted file mode 100644 index 0751db38..00000000 --- a/packages/styles/framework/src/components/_slider.scss +++ /dev/null @@ -1,92 +0,0 @@ -[data-slider] { - position: relative; - - [data-slider-pages] { - overflow: hidden; - } - - [data-slider-page] { - &.column:not(.is-12-mobile) { - min-width: 0; - } - } - - [data-slides-container] { - display: flex; - } - - [data-slide] { - flex: 0 0 100%; - } - - [data-slider-dots] { - position: absolute; - left: 50%; - bottom: -20px; - transform: translateX(-50%); - - &:not(.is-inverted) { - .slider-dot { - background-color: getColor('background'); - } - } - - .slider-dot { - width: 7px; - height: 7px; - background-color: getColor('neutral'); - border-radius: 100%; - margin: 4px; - padding: 0; - opacity: 1; - - &.is-active { - background-color: getColor('main'); - } - } - } - - [data-slider-prev], - [data-slider-next] { - display: none; - - @include desktop { - box-shadow: 0 2px 4px 0 rgba(#000, 0.1); - display: flex; - position: absolute; - z-index: zindex("tiny"); - top: 50%; - left: 30px; - transform: translateY(-50%); - cursor: pointer; - } - } - - [data-slider-next] { - left: auto; - right: 30px; - } - - &.is-motionless-desktop { - @include desktop { - pointer-events: none; - - a, - .link, - .button { - pointer-events: auto; - } - - [data-slider-page] { - min-width: auto; - } - } - } - - > .pricing-table { - @include mobile { - flex-direction: row; - flex-wrap: nowrap; - } - } -} diff --git a/packages/styles/themes/default/trilogy-partials.scss b/packages/styles/themes/default/trilogy-partials.scss index 91f48e82..c469b5e8 100644 --- a/packages/styles/themes/default/trilogy-partials.scss +++ b/packages/styles/themes/default/trilogy-partials.scss @@ -28,7 +28,6 @@ $body-line-height: 1.5 !default; @import "./framework/src/elements/all"; -@import './framework/src/components/disclaimer'; @import './framework/src/components/divider'; @import './framework/src/components/breadcrumb'; @import './framework/src/components/card'; @@ -44,7 +43,6 @@ $body-line-height: 1.5 !default; @import './framework/src/components/countdown'; @import './framework/src/components/timeline'; @import './framework/src/components/stepper'; -//@import './framework/lib/components/slider'; @import './framework/src/components/plus-symbol'; @import './framework/src/components/otp'; @import './framework/src/components/segmented-control'; From f7ba988264f518856427f6425b6b677470a30f19 Mon Sep 17 00:00:00 2001 From: Spicoud Date: Fri, 26 Apr 2024 14:44:55 +0200 Subject: [PATCH 2/5] fix old router react --- examples/react-template/index.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/examples/react-template/index.tsx b/examples/react-template/index.tsx index 5702a492..44b0343a 100644 --- a/examples/react-template/index.tsx +++ b/examples/react-template/index.tsx @@ -1,16 +1,18 @@ -import * as React from 'react' -import * as ReactDOM from 'react-dom' -import { Router } from './router' -import { HashRouter } from 'react-router-dom' +import * as React from "react"; +import * as ReactDOM from "react-dom/client"; +import { HashRouter } from "react-router-dom"; import { TrilogyProviderStyled } from "@trilogy-ds/react/context/providerStyled"; +import { Router } from "./router"; -ReactDOM.render( +const rootElement = document.getElementById("root"); +const root = ReactDOM.createRoot(rootElement); // Créez une racine + +root.render( - + - , - document.getElementById('root'), -) + +); From 10e3d1aa12e09d106a825afd807fb3f0a2522d17 Mon Sep 17 00:00:00 2001 From: Spicoud Date: Fri, 26 Apr 2024 14:46:47 +0200 Subject: [PATCH 3/5] update package.json --- package-lock.json | 8 ++++---- packages/assets/package.json | 2 +- packages/react/package.json | 2 +- packages/react/version.ts | 2 +- packages/styles/package.json | 2 +- packages/vanilla/package.json | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2cba37f7..fe4729d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42600,7 +42600,7 @@ }, "packages/assets": { "name": "@trilogy-ds/assets", - "version": "0.0.1-beta.11", + "version": "0.0.1-beta.12", "license": "ISC", "devDependencies": { "@types/node": "^20.11.26", @@ -42757,7 +42757,7 @@ }, "packages/react": { "name": "@trilogy-ds/react", - "version": "0.0.1-beta.11", + "version": "0.0.1-beta.12", "license": "UNLICENSED", "dependencies": { "@ptomasroos/react-native-multi-slider": "^2.2.2", @@ -42776,12 +42776,12 @@ }, "packages/styles": { "name": "@trilogy-ds/styles", - "version": "0.0.1-beta.11", + "version": "0.0.1-beta.12", "license": "UNLICENSED" }, "packages/vanilla": { "name": "@trilogy-ds/vanilla", - "version": "0.0.1-beta.11", + "version": "0.0.1-beta.12", "license": "ISC", "dependencies": { "eslint": "4.19.1", diff --git a/packages/assets/package.json b/packages/assets/package.json index 893d18e9..13ef4f5d 100644 --- a/packages/assets/package.json +++ b/packages/assets/package.json @@ -1,6 +1,6 @@ { "name": "@trilogy-ds/assets", - "version": "0.0.1-beta.11", + "version": "0.0.1-beta.12", "description": "Trilogy assets include all Open Source Fonts & Icons", "author": "Bouygues Telecom", "type": "module", diff --git a/packages/react/package.json b/packages/react/package.json index 8161b756..ab11e1b5 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@trilogy-ds/react", - "version": "0.0.1-beta.11", + "version": "0.0.1-beta.12", "type": "module", "author": "Bouygues Telecom", "files": [ diff --git a/packages/react/version.ts b/packages/react/version.ts index 0a85d0b3..327b6a5e 100644 --- a/packages/react/version.ts +++ b/packages/react/version.ts @@ -1 +1 @@ -export const version = "0.0.1-beta.11" +export const version = "0.0.1-beta.12" diff --git a/packages/styles/package.json b/packages/styles/package.json index ca5df9a4..2a9c0e65 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,6 +1,6 @@ { "name": "@trilogy-ds/styles", - "version": "0.0.1-beta.11", + "version": "0.0.1-beta.12", "author": "Bouygues Telecom", "license": "UNLICENSED", "files": [ diff --git a/packages/vanilla/package.json b/packages/vanilla/package.json index a54318c8..8526bfb5 100644 --- a/packages/vanilla/package.json +++ b/packages/vanilla/package.json @@ -1,6 +1,6 @@ { "name": "@trilogy-ds/vanilla", - "version": "0.0.1-beta.11", + "version": "0.0.1-beta.12", "author": "Bouygues Telecom", "main": "lib/trilogy-ds-vanilla.js", "scripts": { From 0d870df09b10db4834ae1f2d1f299348af70fca6 Mon Sep 17 00:00:00 2001 From: Spicoud Date: Fri, 26 Apr 2024 14:50:55 +0200 Subject: [PATCH 4/5] remove comment --- examples/react-template/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/react-template/index.tsx b/examples/react-template/index.tsx index 44b0343a..73a32c1f 100644 --- a/examples/react-template/index.tsx +++ b/examples/react-template/index.tsx @@ -5,7 +5,7 @@ import { TrilogyProviderStyled } from "@trilogy-ds/react/context/providerStyled" import { Router } from "./router"; const rootElement = document.getElementById("root"); -const root = ReactDOM.createRoot(rootElement); // Créez une racine +const root = ReactDOM.createRoot(rootElement); root.render( From f967627eeaee99dc2fc9d41ab0ef7d7b5868316e Mon Sep 17 00:00:00 2001 From: Spicoud Date: Fri, 26 Apr 2024 15:10:38 +0200 Subject: [PATCH 5/5] fix range --- packages/react/components/range/Range.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/components/range/Range.tsx b/packages/react/components/range/Range.tsx index d6611180..5da8978f 100644 --- a/packages/react/components/range/Range.tsx +++ b/packages/react/components/range/Range.tsx @@ -55,11 +55,11 @@ const Range = ({ track.style.background = `linear-gradient(to right, ${getColorStyle( TrilogyColor.NEUTRAL_DARK, 1 - )} ${(cursorMin / max) * 100}% , ${getColorStyle(TrilogyColor.MAIN)} ${ + )} ${(cursorMin / max) * 100}% , ${getColorStyle(TrilogyColor.MAIN, 1)} ${ (cursorMin / max) * 100 - }% , ${getColorStyle(TrilogyColor.MAIN)} ${ + }% , ${getColorStyle(TrilogyColor.MAIN, 1)} ${ (cursorMax / max) * 100 - }%, ${getColorStyle(TrilogyColor.NEUTRAL_DARK, 1)} ${ + }%, ${getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 1)} ${ (cursorMax / max) * 100 }%) ` }