@orangesk/orange-design-system 2.0.0-beta.44 → 2.0.0-beta.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/Carousel/style.css +1 -1
- package/build/components/Carousel/style.css.map +1 -1
- package/build/components/index.js +1 -1
- package/build/components/index.js.map +1 -1
- package/build/components/tsconfig.tsbuildinfo +1 -1
- package/build/lib/components.css +1 -1
- package/build/lib/components.css.map +1 -1
- package/build/lib/scripts.js +1 -1
- package/build/lib/scripts.js.map +1 -1
- package/build/lib/style.css +1 -1
- package/build/lib/style.css.map +1 -1
- package/build/sprite.svg +1 -1
- package/package.json +2 -2
- package/src/assets/icons/pictogram-internet--dark.svg +15 -0
- package/src/assets/icons/pictogram-internet.svg +15 -0
- package/src/assets/icons/pictogram-my-orange--dark.svg +6 -0
- package/src/assets/icons/pictogram-my-orange.svg +6 -0
- package/src/assets/icons/pictogram-tariffs--dark.svg +9 -0
- package/src/assets/icons/pictogram-tariffs.svg +9 -0
- package/src/components/Carousel/Carousel.static.ts +84 -21
- package/src/components/Carousel/styles/mixins.scss +6 -1
- package/src/components/Carousel/tests/Carousel.static.test.jsx +89 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components{.carousel{display:flex;flex-direction:column;margin:0 auto 1.875rem;position:relative}.carousel--scrollbar{margin-left:0!important;margin-right:0!important}.carousel--bleed-right
|
|
1
|
+
@layer components{.carousel{display:flex;flex-direction:column;margin:0 auto 1.875rem;position:relative}.carousel--scrollbar{margin-left:0!important;margin-right:0!important}.carousel--bleed-right{overflow:visible}.carousel--bleed-right .carousel__viewport-wrapper{margin-left:var(--carousel-bleed-shell-margin-left,0)!important;max-width:var(--carousel-bleed-shell-width,100%);overflow-x:hidden;overflow-x:clip;overflow-y:visible;width:var(--carousel-bleed-shell-width,100%)}.carousel--bleed-right .carousel__viewport{margin-left:var(--carousel-bleed-margin-left,0)!important;margin-right:0;max-width:var(--carousel-bleed-viewport-width,100%);overflow:visible!important;width:var(--carousel-bleed-viewport-width,100%)}@media only screen and (min-width:864px) and (max-width:991px){.container>.carousel{margin-left:-3.75rem;margin-right:-3.75rem}}@media only screen and (min-width:1088px) and (max-width:1239px){.container>.carousel{margin-left:-3.75rem;margin-right:-3.75rem}}@media only screen and (min-width:1340px) and (max-width:1379px){.container>.carousel{margin-left:-3.75rem;margin-right:-3.75rem}}@media only screen and (min-width:1460px){.container>.carousel{margin-left:-3.75rem;margin-right:-3.75rem}}.container>.carousel.carousel--bleed-right{margin-left:0;margin-right:0}.carousel__viewport-wrapper{position:relative}.carousel__viewport{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;margin:0 auto;overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-width:none;transform:translateZ(0)}@media screen and (min-width:768px){.carousel__viewport{margin-left:3.125rem;margin-right:3.125rem}}.carousel--scrollbar .carousel__viewport{margin-left:0;margin-right:0}@media screen and (max-width:767.98px){.carousel__viewport{padding-bottom:.625rem}}@media screen and (min-width:768px){.carousel__viewport{margin-bottom:1.25rem;overflow-x:hidden}}.carousel__viewport.is-draggable{cursor:-webkit-grab;cursor:grab;user-select:none}.carousel__viewport.is-dragging{cursor:-webkit-grabbing;cursor:grabbing}.carousel__track{display:flex;margin:0;padding:0;transform:translateZ(0);width:100%;z-index:1}.carousel__slide{display:flex;flex:0 0 auto;flex-direction:column;max-width:100%;padding:0;user-select:none}.carousel__slide>*{flex-grow:0;flex-shrink:1}.carousel__slide>:last-child{margin-bottom:0}.carousel__slide img{pointer-events:none;user-select:none}.carousel__next,.carousel__prev{border:2px solid transparent;border-radius:.3125rem;cursor:pointer;font-size:1.125rem;font-weight:700;text-align:center;text-decoration:none;vertical-align:super}.carousel__next:focus-visible,.carousel__prev:focus-visible{outline:2px solid var(--color-border-contrast);outline-offset:2px}.carousel__next.is-active,.carousel__next:active,.carousel__prev.is-active,.carousel__prev:active{transition-property:none;z-index:2}.carousel__next[aria-disabled=true],.carousel__next[disabled],.carousel__prev[aria-disabled=true],.carousel__prev[disabled]{cursor:not-allowed}.carousel__next,.carousel__prev{align-items:center;display:inline-flex;flex:0 0 auto;flex-flow:row;height:2.5rem;justify-content:center;line-height:0;padding:0;width:2.5rem}.carousel__next:focus,.carousel__prev:focus{box-shadow:0 0 0 2px var(--color-background-primary),0 0 0 4px var(--color-border-contrast);outline-color:transparent!important;outline-width:0!important}.carousel__next:focus-visible,.carousel__prev:focus-visible{box-shadow:0 0 0 2px var(--color-background-primary),0 0 0 4px var(--color-border-contrast);outline-color:transparent!important;outline-width:0!important}.carousel__next:focus:not(:focus-visible),.carousel__prev:focus:not(:focus-visible){box-shadow:none;outline-color:transparent!important;outline-width:0!important}.carousel__next,.carousel__prev{border-radius:100%;margin:0;position:absolute;top:50%;z-index:10}@media screen and (max-width:767.98px){.carousel__next,.carousel__prev{display:none}}.carousel__prev{left:0;transform:translateY(-50%)}.carousel__next{right:0;transform:translateY(-50%)}.carousel__pagination{display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;padding:0;user-select:none}.carousel__pagination-item{background:none;border:0;border-radius:100%;cursor:pointer;display:block;height:1.25rem;margin:.625rem;padding:0;user-select:none;width:1.25rem}.carousel__pagination-item:focus{box-shadow:0 0 0 2px var(--color-background-primary),0 0 0 4px var(--color-border-contrast);outline-color:transparent!important;outline-width:0!important}.carousel__pagination-item:focus-visible{box-shadow:0 0 0 2px var(--color-background-primary),0 0 0 4px var(--color-border-contrast);outline-color:transparent!important;outline-width:0!important}.carousel__pagination-item:focus:not(:focus-visible){box-shadow:none;outline-color:transparent!important;outline-width:0!important}.carousel__pagination-item{background-color:var(--color-icon-default)}.carousel__pagination-item.is-active,.carousel__pagination-item:hover{background-color:var(--color-icon-brand)}.carousel__scrollbar{position:relative}.carousel__scrollbar-horizontal{appearance:none;background-color:var(--color-surface-moderate);border-radius:99px;height:.375rem}.carousel__scrollbar-drag{background-color:var(--color-fill-contrast);border-radius:99px;height:.375rem;opacity:1}.carousel__scrollbar-drag:hover{background-color:var(--color-fill-secondary)!important}}
|
|
2
2
|
/*# sourceMappingURL=style.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,kBACE,UACE,YAAa,CACb,qBAAsB,CAGtB,sBAAuB,CADvB,iBAEF,CACA,qBACE,uBAAyB,CACzB,wBACF,
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,kBACE,UACE,YAAa,CACb,qBAAsB,CAGtB,sBAAuB,CADvB,iBAEF,CACA,qBACE,uBAAyB,CACzB,wBACF,CACA,uBACE,gBACF,CACA,mDAGE,+DAAkE,CADlE,gDAAkD,CAElD,iBAAkB,CAClB,eAAgB,CAChB,kBAAmB,CALnB,4CAMF,CACA,2CAIE,yDAA4D,CAD5D,cAAe,CADf,mDAAqD,CAGrD,0BAA4B,CAJ5B,+CAKF,CACA,+DACE,qBACE,oBAAqB,CACrB,qBACF,CACF,CACA,iEACE,qBACE,oBAAqB,CACrB,qBACF,CACF,CACA,iEACE,qBACE,oBAAqB,CACrB,qBACF,CACF,CACA,0CACE,qBACE,oBAAqB,CACrB,qBACF,CACF,CACA,2CACE,aAAc,CACd,cACF,CACA,4BACE,iBACF,CACA,oBAKE,gCAAiC,CACjC,uBAAwB,CALxB,aAAc,CAGd,eAAgB,CADhB,iBAAkB,CADlB,iBAAkB,CAMlB,oBAAqB,CADrB,uBAEF,CACA,oCACE,oBACE,oBAAqB,CACrB,qBACF,CACF,CACA,yCACE,aAAc,CACd,cACF,CACA,uCACE,oBACE,sBACF,CACF,CACA,oCACE,oBACE,qBAAsB,CACtB,iBACF,CACF,CACA,iCAEE,mBAAoB,CACpB,WAAY,CAFZ,gBAGF,CACA,gCACE,uBAAwB,CACxB,eACF,CACA,iBAKE,YAAa,CAFb,QAAS,CACT,SAAU,CAHV,uBAAwB,CACxB,UAAW,CAIX,SACF,CACA,iBACE,YAAa,CAGb,aAAc,CAFd,qBAAsB,CACtB,cAAe,CAEf,SAAU,CACV,gBACF,CACA,mBAEE,WAAY,CADZ,aAEF,CACA,6BACE,eACF,CACA,qBAEE,mBAAoB,CADpB,gBAEF,CACA,gCACE,4BAA6B,CAG7B,sBAAwB,CAOxB,cAAe,CATf,kBAAmB,CACnB,eAAiB,CAKjB,iBAAkB,CAClB,oBAAqB,CACrB,oBAEF,CACA,4DACE,8CAA+C,CAC/C,kBACF,CACA,kGACE,wBAAyB,CACzB,SACF,CACA,4HACE,kBACF,CACA,gCAKE,kBAAmB,CAJnB,mBAAoB,CACpB,aAAc,CACd,aAAc,CAMd,aAAc,CALd,sBAAuB,CAGvB,aAAc,CADd,SAAU,CAEV,YAGF,CACA,4CAGE,2FAA6F,CAD7F,mCAAqC,CADrC,yBAGF,CACA,4DAGE,2FAA6F,CAD7F,mCAAqC,CADrC,yBAGF,CACA,oFAGE,eAAgB,CADhB,mCAAqC,CADrC,yBAGF,CACA,gCAKE,kBAAmB,CADnB,QAAS,CAHT,iBAAkB,CAClB,OAAQ,CACR,UAGF,CACA,uCACE,gCACE,YACF,CACF,CACA,gBACE,MAAO,CACP,0BACF,CACA,gBACE,OAAQ,CACR,0BACF,CACA,sBAEE,YAAa,CACb,cAAe,CACf,sBAAuB,CACvB,aAAc,CACd,SAAU,CALV,gBAMF,CACA,2BACE,eAAgB,CAChB,QAAS,CAST,kBAAmB,CALnB,cAAe,CADf,aAAc,CAId,cAAe,CACf,cAAgB,CAPhB,SAAU,CACV,gBAAiB,CAIjB,aAIF,CACA,iCAGE,2FAA6F,CAD7F,mCAAqC,CADrC,yBAGF,CACA,yCAGE,2FAA6F,CAD7F,mCAAqC,CADrC,yBAGF,CACA,qDAGE,eAAgB,CADhB,mCAAqC,CADrC,yBAGF,CACA,2BACE,0CACF,CAIA,sEACE,wCACF,CACA,qBACE,iBACF,CACA,gCAEE,eAAgB,CAChB,8CAA+C,CAC/C,kBAAmB,CAHnB,cAIF,CACA,0BAEE,2CAA4C,CAC5C,kBAAmB,CACnB,cAAgB,CAHhB,SAIF,CACA,gCACE,sDACF,CACF","file":"style.css","sourcesContent":["/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */\n@layer components {\n .carousel {\n display: flex;\n flex-direction: column;\n margin: 0 auto;\n position: relative;\n margin-bottom: 1.875rem;\n }\n .carousel--scrollbar {\n margin-left: 0 !important;\n margin-right: 0 !important;\n }\n .carousel--bleed-right {\n overflow: visible;\n }\n .carousel--bleed-right .carousel__viewport-wrapper {\n width: var(--carousel-bleed-shell-width, 100%);\n max-width: var(--carousel-bleed-shell-width, 100%);\n margin-left: var(--carousel-bleed-shell-margin-left, 0) !important;\n overflow-x: hidden;\n overflow-x: clip;\n overflow-y: visible;\n }\n .carousel--bleed-right .carousel__viewport {\n width: var(--carousel-bleed-viewport-width, 100%);\n max-width: var(--carousel-bleed-viewport-width, 100%);\n margin-right: 0;\n margin-left: var(--carousel-bleed-margin-left, 0) !important;\n overflow: visible !important;\n }\n @media only screen and (min-width: 864px) and (max-width: 991px) {\n .container > .carousel {\n margin-left: -3.75rem;\n margin-right: -3.75rem;\n }\n }\n @media only screen and (min-width: 1088px) and (max-width: 1239px) {\n .container > .carousel {\n margin-left: -3.75rem;\n margin-right: -3.75rem;\n }\n }\n @media only screen and (min-width: 1340px) and (max-width: 1379px) {\n .container > .carousel {\n margin-left: -3.75rem;\n margin-right: -3.75rem;\n }\n }\n @media only screen and (min-width: 1460px) {\n .container > .carousel {\n margin-left: -3.75rem;\n margin-right: -3.75rem;\n }\n }\n .container > .carousel.carousel--bleed-right {\n margin-left: 0;\n margin-right: 0;\n }\n .carousel__viewport-wrapper {\n position: relative;\n }\n .carousel__viewport {\n margin: 0 auto;\n position: relative;\n overflow-y: hidden;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n transform: translateZ(0);\n scrollbar-width: none;\n }\n @media screen and (min-width: 768px) {\n .carousel__viewport {\n margin-left: 3.125rem;\n margin-right: 3.125rem;\n }\n }\n .carousel--scrollbar .carousel__viewport {\n margin-left: 0;\n margin-right: 0;\n }\n @media screen and (max-width: 767.98px) {\n .carousel__viewport {\n padding-bottom: 0.625rem;\n }\n }\n @media screen and (min-width: 768px) {\n .carousel__viewport {\n margin-bottom: 1.25rem;\n overflow-x: hidden;\n }\n }\n .carousel__viewport.is-draggable {\n user-select: none;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .carousel__viewport.is-dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .carousel__track {\n transform: translateZ(0);\n width: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n z-index: 1;\n }\n .carousel__slide {\n display: flex;\n flex-direction: column;\n max-width: 100%;\n flex: 0 0 auto;\n padding: 0;\n user-select: none;\n }\n .carousel__slide > * {\n flex-shrink: 1;\n flex-grow: 0;\n }\n .carousel__slide > *:last-child {\n margin-bottom: 0;\n }\n .carousel__slide img {\n user-select: none;\n pointer-events: none;\n }\n .carousel__prev, .carousel__next {\n border: 2px solid transparent;\n font-size: 1.125rem;\n font-weight: bold;\n border-radius: 0.3125rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n text-decoration: none;\n vertical-align: super;\n cursor: pointer;\n }\n .carousel__prev:focus-visible, .carousel__next:focus-visible {\n outline: 2px solid var(--color-border-contrast);\n outline-offset: 2px;\n }\n .carousel__prev:active, .carousel__prev.is-active, .carousel__next:active, .carousel__next.is-active {\n transition-property: none;\n z-index: 2;\n }\n .carousel__prev[aria-disabled=true], .carousel__prev[disabled], .carousel__next[aria-disabled=true], .carousel__next[disabled] {\n cursor: not-allowed;\n }\n .carousel__prev, .carousel__next {\n display: inline-flex;\n flex: 0 0 auto;\n flex-flow: row;\n justify-content: center;\n align-items: center;\n padding: 0;\n line-height: 0;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 100%;\n }\n .carousel__prev:focus, .carousel__next:focus {\n outline-width: 0 !important;\n outline-color: transparent !important;\n box-shadow: 0 0 0 2px var(--color-background-primary), 0 0 0 4px var(--color-border-contrast);\n }\n .carousel__prev:focus-visible, .carousel__next:focus-visible {\n outline-width: 0 !important;\n outline-color: transparent !important;\n box-shadow: 0 0 0 2px var(--color-background-primary), 0 0 0 4px var(--color-border-contrast);\n }\n .carousel__prev:focus:not(:focus-visible), .carousel__next:focus:not(:focus-visible) {\n outline-width: 0 !important;\n outline-color: transparent !important;\n box-shadow: none;\n }\n .carousel__prev, .carousel__next {\n position: absolute;\n top: 50%;\n z-index: 10;\n margin: 0;\n border-radius: 100%;\n }\n @media screen and (max-width: 767.98px) {\n .carousel__prev, .carousel__next {\n display: none;\n }\n }\n .carousel__prev {\n left: 0;\n transform: translateY(-50%);\n }\n .carousel__next {\n right: 0;\n transform: translateY(-50%);\n }\n .carousel__pagination {\n user-select: none;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0 auto;\n padding: 0;\n }\n .carousel__pagination-item {\n background: none;\n border: 0;\n padding: 0;\n user-select: none;\n display: block;\n cursor: pointer;\n border-radius: 100%;\n width: 1.25rem;\n height: 1.25rem;\n margin: 0.625rem;\n border-radius: 100%;\n }\n .carousel__pagination-item:focus {\n outline-width: 0 !important;\n outline-color: transparent !important;\n box-shadow: 0 0 0 2px var(--color-background-primary), 0 0 0 4px var(--color-border-contrast);\n }\n .carousel__pagination-item:focus-visible {\n outline-width: 0 !important;\n outline-color: transparent !important;\n box-shadow: 0 0 0 2px var(--color-background-primary), 0 0 0 4px var(--color-border-contrast);\n }\n .carousel__pagination-item:focus:not(:focus-visible) {\n outline-width: 0 !important;\n outline-color: transparent !important;\n box-shadow: none;\n }\n .carousel__pagination-item {\n background-color: var(--color-icon-default);\n }\n .carousel__pagination-item:hover {\n background-color: var(--color-icon-brand);\n }\n .carousel__pagination-item.is-active {\n background-color: var(--color-icon-brand);\n }\n .carousel__scrollbar {\n position: relative;\n }\n .carousel__scrollbar-horizontal {\n height: 0.375rem;\n appearance: none;\n background-color: var(--color-surface-moderate);\n border-radius: 99px;\n }\n .carousel__scrollbar-drag {\n opacity: 1;\n background-color: var(--color-fill-contrast);\n border-radius: 99px;\n height: 0.375rem;\n }\n .carousel__scrollbar-drag:hover {\n background-color: var(--color-fill-secondary) !important;\n }\n}"]}
|