@ably/ui 14.0.0-dev.75dcb64 → 14.0.0-dev.7ed5089
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/core/.DS_Store +0 -0
- package/core/Code.js +1 -1
- package/core/ContactFooter/component.css +9 -7
- package/core/ContactFooter.js +1 -1
- package/core/CookieMessage/component.css +12 -10
- package/core/CookieMessage.js +1 -1
- package/core/Expander.js +1 -0
- package/core/Flash/component.css +21 -19
- package/core/Flash.js +1 -1
- package/core/Footer/component.css +24 -22
- package/core/Footer.js +1 -1
- package/core/Meganav/component.css +105 -103
- package/core/Meganav/component.js +1 -1
- package/core/Meganav.js +1 -1
- package/core/Notice/component.css +6 -4
- package/core/Notice/component.js +1 -1
- package/core/Notice.js +1 -1
- package/core/Slider/component.css +38 -4
- package/core/Slider/component.js +1 -1
- package/core/Slider.js +1 -1
- package/core/Table/Table.js +1 -1
- package/core/Table/TableCell.js +4 -4
- package/core/Table.js +1 -1
- package/core/Tooltip/.DS_Store +0 -0
- package/core/Tooltip.js +1 -1
- package/core/icons/icon-gui-partial.svg +4 -0
- package/core/scripts.js +1 -1
- package/core/sprites.svg +1 -1
- package/core/styles/buttons.css +123 -121
- package/core/styles/forms.css +51 -49
- package/core/styles/layout.css +16 -14
- package/core/styles/properties.css +252 -250
- package/core/styles/text.css +167 -165
- package/core/styles.components.css +24 -22
- package/core/utils/syntax-highlighter.css +59 -55
- package/package.json +2 -4
- package/src/.DS_Store +0 -0
- package/src/core/.DS_Store +0 -0
- package/src/core/Accordion.tsx +4 -4
- package/src/core/Code.tsx +0 -1
- package/src/core/ContactFooter/component.css +9 -7
- package/src/core/ContactFooter.tsx +0 -1
- package/src/core/CookieMessage/component.css +12 -10
- package/src/core/CookieMessage.tsx +0 -1
- package/src/core/Expander/Expander.stories.tsx +152 -0
- package/src/core/Expander.tsx +54 -0
- package/src/core/Flash/component.css +21 -19
- package/src/core/Flash.tsx +1 -2
- package/src/core/Footer/component.css +24 -22
- package/src/core/Footer.tsx +0 -1
- package/src/core/Icon/Icon.stories.tsx +1 -0
- package/src/core/Meganav/component.css +105 -103
- package/src/core/Meganav/component.js +0 -2
- package/src/core/Meganav.tsx +0 -1
- package/src/core/Notice/component.css +6 -4
- package/src/core/Notice/component.js +0 -1
- package/src/core/Notice.tsx +0 -1
- package/src/core/Slider/Slider.stories.tsx +82 -29
- package/src/core/Slider/component.css +38 -4
- package/src/core/Slider/component.js +0 -2
- package/src/core/Slider.tsx +166 -86
- package/src/core/Table/Table.tsx +38 -9
- package/src/core/Table/TableCell.tsx +31 -6
- package/src/core/Table.tsx +2 -0
- package/src/core/Tooltip/.DS_Store +0 -0
- package/src/core/Tooltip.tsx +34 -5
- package/src/core/icons/icon-gui-partial.svg +4 -0
- package/src/core/scripts.js +0 -2
- package/src/core/styles/buttons.css +123 -121
- package/src/core/styles/forms.css +51 -49
- package/src/core/styles/layout.css +16 -14
- package/src/core/styles/properties.css +252 -250
- package/src/core/styles/text.css +167 -165
- package/src/core/styles.components.css +24 -22
- package/src/core/utils/syntax-highlighter.css +59 -55
|
@@ -1,6 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
@layer components {
|
|
2
|
+
.ui-slider-marker {
|
|
3
|
+
font-size: 0.5rem;
|
|
4
|
+
top: -1px;
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
@apply leading-none px-4 relative;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@keyframes fillAnimation {
|
|
10
|
+
0% {
|
|
11
|
+
width: 0%;
|
|
12
|
+
}
|
|
13
|
+
100% {
|
|
14
|
+
width: 100%;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ui-icon-cta {
|
|
19
|
+
@apply cursor-pointer overflow-hidden;
|
|
20
|
+
@apply rounded border-2 border-mid-grey hover:border-active-orange;
|
|
21
|
+
transition: all 0.4s;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@screen sm {
|
|
25
|
+
.ui-icon-cta-left:hover .ui-icon-cta-holder {
|
|
26
|
+
transform: translateX(-120%);
|
|
27
|
+
}
|
|
28
|
+
.ui-icon-cta-right .ui-icon-cta-holder {
|
|
29
|
+
transform: translateX(-120%);
|
|
30
|
+
}
|
|
31
|
+
.ui-icon-cta-right:hover .ui-icon-cta-holder {
|
|
32
|
+
transform: translateX(0%);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.ui-icon-cta-holder {
|
|
37
|
+
@apply w-full h-full;
|
|
38
|
+
transition: all 0.4s;
|
|
39
|
+
}
|
|
6
40
|
}
|
package/core/Slider/component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";const mdBreakpoint=()=>window.matchMedia("(min-width: 48rem)").matches;const DRAG_BUFFER=20;const init=slidesContainer=>{const transformContainer=queryId("slider-strip",slidesContainer);const slides=Array.from(queryIdAll("slider-slide",slidesContainer));const slideLeftChevron=queryId("slider-previous",slidesContainer);const slideRightChevron=queryId("slider-next",slidesContainer);const slideMarkers=Array.from(queryIdAll("slider-marker",slidesContainer));const sliderControls=queryId("slider-controls",slidesContainer);sliderControls.classList.replace("hidden","flex");const slidesLength=slides.length;const slidesWidth=slidesContainer.getBoundingClientRect().width;const{width:slideWidth,left:slideLeftDistance}=slides[0].getBoundingClientRect();const{left:slideLeftDistanceSecond}=slides[1].getBoundingClientRect();const slideGap=slideLeftDistanceSecond-slideLeftDistance-slideWidth;const adjustment=(slidesWidth-slideWidth)/2;let currentIndex=0;let touchStartX=0;const calculateTransform=index=>index*-slideWidth+adjustment+index*-slideGap;const updateSlide=index=>transformContainer.style.transform=`translateX(${calculateTransform(index)}px)`;const updateMarkers=index=>{slideMarkers.forEach(marker=>marker.classList.remove("text-active-orange"));slideMarkers[index].classList.remove("text-cool-black");slideMarkers[index].classList.add("text-active-orange")};const slideLeft=()=>{currentIndex=currentIndex-1<=0?0:currentIndex-1;updateSlide(currentIndex);updateMarkers(currentIndex)};const slideRight=()=>{currentIndex=currentIndex+1>=slidesLength?currentIndex:currentIndex+1;updateSlide(currentIndex);updateMarkers(currentIndex)};updateSlide(0);updateMarkers(0);slideLeftChevron.addEventListener("click",slideLeft);transformContainer.addEventListener("touchstart",e=>{var _e_touches_;touchStartX=(_e_touches_=e.touches[0])===null||_e_touches_===void 0?void 0:_e_touches_.clientX});transformContainer.addEventListener("touchend",e=>{var _e_changedTouches_;const distance=((_e_changedTouches_=e.changedTouches[0])===null||_e_changedTouches_===void 0?void 0:_e_changedTouches_.clientX)-touchStartX;if(Math.abs(distance)<DRAG_BUFFER)return;const direction=distance>0?slideLeft:slideRight;direction()});slideRightChevron.addEventListener("click",slideRight);return()=>{transformContainer.style.transform=null;sliderControls.classList.replace("flex","hidden")}};const Slider=({container,mqEnableThreshold})=>{if(!container)return;const breakpointCheck=mqEnableThreshold||(()=>!mdBreakpoint());let unmount=()=>{};if(breakpointCheck())unmount=init(container);window.addEventListener("resize",throttle(()=>{if(breakpointCheck()){unmount=init(container)}else{unmount()}},100))};export default Slider;
|
package/core/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useRef}from"react";import Icon from"./Icon";
|
|
1
|
+
import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute -bottom-40 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const timerRef=useRef(null);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{setActiveIndex(prevIndex=>(prevIndex+1)%children.length);resetInterval()};const prev=()=>{setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);resetInterval()};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:"flex items-center transition-transform ease-in-out duration-500",style:{transform:`translateX(-${activeIndex*100}%)`}},children.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60 transition-opacity ease-in delay-500 duration-500",style:{opacity:activeIndex===index?1:.1}},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;
|
package/core/Table/Table.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{cloneElement}from"react";export const Table=({id,children})=>React.createElement("table",{id:id,className
|
|
1
|
+
import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>{var _rest_className;return React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-4 sm:table-fixed ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>{var _rest_className;return React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},cloneElement(children,{isHeader:true}))};export const TableRowHeader=({children,...rest})=>{var _rest_className;return React.createElement("tr",{className:`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`,style:{top:"4rem"}},cloneElement(children,{isRowHeader:true}))};
|
package/core/Table/TableCell.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from"react";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
|
|
2
|
-
ui-text-p1
|
|
1
|
+
import React from"react";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const Partial=()=>React.createElement(Icon,{name:"icon-gui-partial",size:"1.5rem",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"partial-icon"});const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
|
|
2
|
+
ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
|
|
3
3
|
`;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`
|
|
4
4
|
border-light-grey sm:p-24 leading-none flex sm:table-cell
|
|
5
5
|
${isRowHeader?"rounded-l-none rounded-r sm:rounded-lg py-20 px-24":"py-6"}
|
|
6
|
-
${(_rest_className=rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
|
|
7
|
-
`},children)};const HeaderCell=({children,...rest})=>React.createElement("td",{...rest,className
|
|
6
|
+
${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
|
|
7
|
+
`},children)};const HeaderCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`ui-text-h3 px-24 py-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};const CtaCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`pt-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported,Partial};
|
package/core/Table.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Table,TableRowHeader,TableHeader,TableBody}from"./Table/Table";import{TableRow}from"./Table/TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported}from"./Table/TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader,Supported,Unsupported};
|
|
1
|
+
import{Table,TableRowHeader,TableHeader,TableBody}from"./Table/Table";import{TableRow}from"./Table/TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported,Partial}from"./Table/TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader,Supported,Unsupported,Partial};
|
|
Binary file
|
package/core/Tooltip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){var _floating_current,_reference_current;const floatingRect=(_floating_current=floating.current)===null||_floating_current===void 0?void 0:_floating_current.getBoundingClientRect();const referenceRect=(_reference_current=reference.current)===null||_reference_current===void 0?void 0:_reference_current.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);return React.createElement("div",{className
|
|
1
|
+
import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children,triggerProps,tooltipProps,...rest})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){var _floating_current,_reference_current;const floatingRect=(_floating_current=floating.current)===null||_floating_current===void 0?void 0:_floating_current.getBoundingClientRect();const referenceRect=(_reference_current=reference.current)===null||_reference_current===void 0?void 0:_reference_current.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);var _rest_className,_triggerProps_className,_tooltipProps_className;return React.createElement("div",{...rest,className:`relative inline-block align-top h-16 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`ml-8 p-0 relative top-1 focus:outline-none ${(_triggerProps_className=triggerProps===null||triggerProps===void 0?void 0:triggerProps.className)!==null&&_triggerProps_className!==void 0?_triggerProps_className:""}`},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${(_tooltipProps_className=tooltipProps===null||tooltipProps===void 0?void 0:tooltipProps.className)!==null&&_tooltipProps_className!==void 0?_tooltipProps_className:""}`},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12ZM1.2779e-06 12C9.30272e-07 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 -1.95703e-07 12 -4.37114e-07C5.37259 -6.78525e-07 1.62554e-06 5.37258 1.2779e-06 12Z" fill="#03020D"/>
|
|
3
|
+
<path d="M11.5833 23.576C5.37903 23.3566 0.416667 18.2578 0.416667 12C0.416668 5.74218 5.37903 0.643381 11.5833 0.424021L11.5833 23.576Z" fill="#03020D" stroke="#03020D" stroke-width="0.833333"/>
|
|
4
|
+
</svg>
|
package/core/scripts.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"array-flat-polyfill";
|
|
1
|
+
import"array-flat-polyfill";export{default as reactRenderer,renderComponent}from"./react-renderer";export{default as loadSprites}from"./load-sprites";export{default as toggleChatWidget}from"./hubspot-chat-toggle";export*from"./remote-data-store";export*from"./remote-blogs-posts";export*from"./remote-session-data";export*from"./dom-query";
|