🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
@leafygreen-ui/ordered-list
Advanced tools
@leafygreen-ui/ordered-list - npm Package Compare versions
+164
| [ | ||
| { | ||
| "tags": {}, | ||
| "description": "", | ||
| "methods": [], | ||
| "displayName": "OrderedList", | ||
| "props": { | ||
| "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", | ||
| "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", | ||
| "DarkModeProps": { | ||
| "darkMode": { | ||
| "name": "darkMode", | ||
| "defaultValue": { | ||
| "value": "false" | ||
| }, | ||
| "description": "Renders the component with dark mode styles.", | ||
| "required": false, | ||
| "type": { | ||
| "name": "enum", | ||
| "raw": "boolean", | ||
| "value": [ | ||
| { | ||
| "value": "false" | ||
| }, | ||
| { | ||
| "value": "true" | ||
| } | ||
| ] | ||
| }, | ||
| "tags": { | ||
| "default": "false" | ||
| } | ||
| } | ||
| }, | ||
| "OlHTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol", | ||
| "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes" | ||
| } | ||
| }, | ||
| { | ||
| "tags": {}, | ||
| "description": "", | ||
| "methods": [], | ||
| "displayName": "OrderedListItem", | ||
| "props": { | ||
| "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", | ||
| "OrderedListItemProps": { | ||
| "title": { | ||
| "name": "title", | ||
| "defaultValue": null, | ||
| "description": "\nThe title of the list item.", | ||
| "required": false, | ||
| "type": { | ||
| "name": "enum", | ||
| "raw": "ReactNode", | ||
| "value": [ | ||
| { | ||
| "value": "string" | ||
| }, | ||
| { | ||
| "value": "number" | ||
| }, | ||
| { | ||
| "value": "false" | ||
| }, | ||
| { | ||
| "value": "true" | ||
| }, | ||
| { | ||
| "value": "ReactElement<any, string | JSXElementConstructor<any>>", | ||
| "description": "", | ||
| "fullComment": "", | ||
| "tags": {} | ||
| }, | ||
| { | ||
| "value": "Iterable<ReactNode>", | ||
| "description": "", | ||
| "fullComment": "", | ||
| "tags": {} | ||
| }, | ||
| { | ||
| "value": "ReactPortal", | ||
| "description": "", | ||
| "fullComment": "", | ||
| "tags": {} | ||
| } | ||
| ] | ||
| }, | ||
| "tags": {} | ||
| }, | ||
| "description": { | ||
| "name": "description", | ||
| "defaultValue": null, | ||
| "description": "The description of the list item. This will render below the title.", | ||
| "required": false, | ||
| "type": { | ||
| "name": "enum", | ||
| "raw": "ReactNode", | ||
| "value": [ | ||
| { | ||
| "value": "string" | ||
| }, | ||
| { | ||
| "value": "number" | ||
| }, | ||
| { | ||
| "value": "false" | ||
| }, | ||
| { | ||
| "value": "true" | ||
| }, | ||
| { | ||
| "value": "ReactElement<any, string | JSXElementConstructor<any>>", | ||
| "description": "", | ||
| "fullComment": "", | ||
| "tags": {} | ||
| }, | ||
| { | ||
| "value": "Iterable<ReactNode>", | ||
| "description": "", | ||
| "fullComment": "", | ||
| "tags": {} | ||
| }, | ||
| { | ||
| "value": "ReactPortal", | ||
| "description": "", | ||
| "fullComment": "", | ||
| "tags": {} | ||
| } | ||
| ] | ||
| }, | ||
| "tags": {} | ||
| } | ||
| }, | ||
| "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", | ||
| "DarkModeProps": { | ||
| "darkMode": { | ||
| "name": "darkMode", | ||
| "defaultValue": { | ||
| "value": "false" | ||
| }, | ||
| "description": "Renders the component with dark mode styles.", | ||
| "required": false, | ||
| "type": { | ||
| "name": "enum", | ||
| "raw": "boolean", | ||
| "value": [ | ||
| { | ||
| "value": "false" | ||
| }, | ||
| { | ||
| "value": "true" | ||
| } | ||
| ] | ||
| }, | ||
| "tags": { | ||
| "default": "false" | ||
| } | ||
| } | ||
| }, | ||
| "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes", | ||
| "LiHTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li" | ||
| } | ||
| } | ||
| ] |
+11
-0
| # @leafygreen-ui/ordered-list | ||
| ## 3.0.7 | ||
| ### Patch Changes | ||
| - c8559f3: Widens the range of `@leafygreen-ui/leafygreen-provider` peer dependency to `>=3.2.0` | ||
| - Updated dependencies [f3a8bdc] | ||
| - Updated dependencies [c8559f3] | ||
| - @leafygreen-ui/emotion@5.0.4 | ||
| - @leafygreen-ui/descendants@3.0.5 | ||
| - @leafygreen-ui/typography@22.1.4 | ||
| ## 3.0.6 | ||
@@ -4,0 +15,0 @@ |
@@ -1,2 +0,2 @@ | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/descendants"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/lib")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/descendants","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/typography","@leafygreen-ui/lib"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/ordered-list"]={},e.React,e.leafyGreenDescendants,e.leafyGreenEmotion,e.leafyGreenLeafygreenProvider,e.leafyGreenTokens,e.leafyGreenTypography,e.leafyGreenLib)}(this,function(e,n,r,t,a,i,l,s){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=d(n),c=d(a);function f(){return f=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},f.apply(null,arguments)}function u(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(-1!==n.indexOf(t))continue;r[t]=e[t]}return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)r=i[t],-1===n.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function p(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var y,g=r.createDescendantsContext("OrderedListContext");var m,b,x,h,v,O=t.css(y||(y=p(["\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: ","px;\n padding: 0;\n margin: 0;\n"])),i.spacing[400]),N=["children","className","darkMode"],w=o.default.forwardRef(function(e,n){var i=e.children,l=e.className,s=e.darkMode,d=u(e,N),p=r.useInitDescendants(g),y=p.descendants,m=p.dispatch,b=a.useDarkMode(s).darkMode;return o.default.createElement(c.default,{darkMode:b},o.default.createElement(r.DescendantsProvider,{context:g,descendants:y,dispatch:m},o.default.createElement("ol",f({},d,{ref:n,className:t.cx(O,l)}),i)))});w.displayName="OrderedList";var E=s.createUniqueClassName("step"),j=t.css(m||(m=p(["\n display: flex;\n gap: ","px;\n margin-bottom: ","px;\n"])),i.spacing[200],i.spacing[100]),k=t.css(b||(b=p(["\n width: 100%;\n"]))),D=t.css(x||(x=p(["\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n width: ","px;\n height: ","px;\n position: relative;\n font-size: 12px;\n font-weight: 500;\n"])),20,20),L=t.css(h||(h=p(["\n font-weight: bold;\n line-height: unset;\n"]))),q=function(e){return t.css(v||(v=p(["\n color: ",";\n background-color: rgba(255, 255, 255, 0);\n border-color: ",";\n"])),i.color[e].text.primary.default,i.color[e].border.primary.default)},P=["children","className","title","description"],C=o.default.forwardRef(function(e,n){e.children;var i=e.className,s=e.title,d=e.description,c=u(e,P),p=r.useDescendant(g,n),y=p.index,m=p.ref,b=a.useDarkMode().theme;return o.default.createElement("li",f({ref:m,className:t.cx(j,i)},c),o.default.createElement("div",{className:E},o.default.createElement("div",{className:t.cx(D,q(b))},y+1)),o.default.createElement("div",{className:k},o.default.createElement(l.Body,{baseFontSize:16,className:L},s),o.default.createElement(l.Description,null,d)))});C.displayName="OrderedListItem",e.OrderedList=w,e.OrderedListContext=g,e.OrderedListItem=C,e.useOrderedListContext=function(){return r.useDescendantsContext(g)}}); | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/descendants"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/lib")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/descendants","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/typography","@leafygreen-ui/lib"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/ordered-list"]={},e.React,e.leafyGreenDescendants,e.leafyGreenEmotion,e.LeafyGreenProvider,e.leafyGreenTokens,e.leafyGreenTypography,e.leafyGreenLib)}(this,function(e,n,r,t,a,i,l,s){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=d(n),c=d(a);function f(){return f=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},f.apply(null,arguments)}function u(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(-1!==n.indexOf(t))continue;r[t]=e[t]}return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)r=i[t],-1===n.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function p(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var y,g=r.createDescendantsContext("OrderedListContext");var m,b,x,h,v,O=t.css(y||(y=p(["\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: ","px;\n padding: 0;\n margin: 0;\n"])),i.spacing[400]),N=["children","className","darkMode"],w=o.default.forwardRef(function(e,n){var i=e.children,l=e.className,s=e.darkMode,d=u(e,N),p=r.useInitDescendants(g),y=p.descendants,m=p.dispatch,b=a.useDarkMode(s).darkMode;return o.default.createElement(c.default,{darkMode:b},o.default.createElement(r.DescendantsProvider,{context:g,descendants:y,dispatch:m},o.default.createElement("ol",f({},d,{ref:n,className:t.cx(O,l)}),i)))});w.displayName="OrderedList";var E=s.createUniqueClassName("step"),j=t.css(m||(m=p(["\n display: flex;\n gap: ","px;\n margin-bottom: ","px;\n"])),i.spacing[200],i.spacing[100]),k=t.css(b||(b=p(["\n width: 100%;\n"]))),D=t.css(x||(x=p(["\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n width: ","px;\n height: ","px;\n position: relative;\n font-size: 12px;\n font-weight: 500;\n"])),20,20),L=t.css(h||(h=p(["\n font-weight: bold;\n line-height: unset;\n"]))),q=function(e){return t.css(v||(v=p(["\n color: ",";\n background-color: rgba(255, 255, 255, 0);\n border-color: ",";\n"])),i.color[e].text.primary.default,i.color[e].border.primary.default)},P=["children","className","title","description"],C=o.default.forwardRef(function(e,n){e.children;var i=e.className,s=e.title,d=e.description,c=u(e,P),p=r.useDescendant(g,n),y=p.index,m=p.ref,b=a.useDarkMode().theme;return o.default.createElement("li",f({ref:m,className:t.cx(j,i)},c),o.default.createElement("div",{className:E},o.default.createElement("div",{className:t.cx(D,q(b))},y+1)),o.default.createElement("div",{className:k},o.default.createElement(l.Body,{baseFontSize:16,className:L},s),o.default.createElement(l.Description,null,d)))});C.displayName="OrderedListItem",e.OrderedList=w,e.OrderedListContext=g,e.OrderedListItem=C,e.useOrderedListContext=function(){return r.useDescendantsContext(g)}}); | ||
| //# sourceMappingURL=index.js.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"file":"index.js","sources":["../../src/OrderedListContext/OrderedListContext.ts","../../src/OrderedList/OrderedList.styles.ts","../../src/OrderedListItem/OrderedListItem.styles.ts","../../src/OrderedList/OrderedList.tsx","../../src/OrderedListItem/OrderedListItem.tsx"],"sourcesContent":["import {\n createDescendantsContext,\n useDescendantsContext,\n} from '@leafygreen-ui/descendants';\n\nexport const OrderedListContext =\n createDescendantsContext<HTMLLIElement>('OrderedListContext');\n\nexport function useOrderedListContext() {\n return useDescendantsContext(OrderedListContext);\n}\n","import { css } from '@leafygreen-ui/emotion';\nimport { spacing } from '@leafygreen-ui/tokens';\n\nexport const baseStyles = css`\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: ${spacing[400]}px;\n padding: 0;\n margin: 0;\n`;\n","import { css } from '@leafygreen-ui/emotion';\nimport { createUniqueClassName, Theme } from '@leafygreen-ui/lib';\nimport { color, spacing } from '@leafygreen-ui/tokens';\n\nexport const stepIconClassName = createUniqueClassName('step');\n\nconst MARKER_SIZE = 20;\n\nexport const baseStyles = css`\n display: flex;\n gap: ${spacing[200]}px;\n margin-bottom: ${spacing[100]}px;\n`;\n\nexport const contentStyles = css`\n width: 100%;\n`;\n\nexport const markerStyles = css`\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n width: ${MARKER_SIZE}px;\n height: ${MARKER_SIZE}px;\n position: relative;\n font-size: 12px;\n font-weight: 500;\n`;\n\nexport const titleStyles = css`\n font-weight: bold;\n line-height: unset;\n`;\n\nexport const getThemedStateStyles = (theme: Theme) => css`\n color: ${color[theme].text.primary.default};\n background-color: rgba(255, 255, 255, 0);\n border-color: ${color[theme].border.primary.default};\n`;\n","import React from 'react';\n\nimport {\n DescendantsProvider,\n useInitDescendants,\n} from '@leafygreen-ui/descendants';\nimport { cx } from '@leafygreen-ui/emotion';\nimport LeafyGreenProvider, {\n useDarkMode,\n} from '@leafygreen-ui/leafygreen-provider';\n\nimport { OrderedListContext } from '../OrderedListContext';\n\nimport { baseStyles } from './OrderedList.styles';\nimport { OrderedListProps } from './OrderedList.types';\n\nconst OrderedList = React.forwardRef(\n (\n { children, className, darkMode: darkModeProp, ...rest }: OrderedListProps,\n ref: React.ForwardedRef<HTMLOListElement>,\n ) => {\n const { descendants, dispatch } =\n useInitDescendants<HTMLLIElement>(OrderedListContext);\n\n const { darkMode } = useDarkMode(darkModeProp);\n\n return (\n <LeafyGreenProvider darkMode={darkMode}>\n <DescendantsProvider\n context={OrderedListContext}\n descendants={descendants}\n dispatch={dispatch}\n >\n <ol {...rest} ref={ref} className={cx(baseStyles, className)}>\n {children}\n </ol>\n </DescendantsProvider>\n </LeafyGreenProvider>\n );\n },\n);\n\nOrderedList.displayName = 'OrderedList';\n\nexport { OrderedList };\n","import React from 'react';\n\nimport { useDescendant } from '@leafygreen-ui/descendants';\nimport { cx } from '@leafygreen-ui/emotion';\nimport { useDarkMode } from '@leafygreen-ui/leafygreen-provider';\nimport { Body, Description } from '@leafygreen-ui/typography';\n\nimport { OrderedListContext } from '../OrderedListContext/OrderedListContext';\n\nimport {\n baseStyles,\n contentStyles,\n getThemedStateStyles,\n markerStyles,\n stepIconClassName,\n titleStyles,\n} from './OrderedListItem.styles';\nimport { OrderedListItemProps } from './OrderedListItem.types';\n\nconst OrderedListItem = React.forwardRef(\n (\n { children, className, title, description, ...rest }: OrderedListItemProps,\n forwardRef: React.ForwardedRef<HTMLLIElement>,\n ) => {\n const { index, ref } = useDescendant(OrderedListContext, forwardRef);\n const { theme } = useDarkMode();\n\n return (\n <li ref={ref} className={cx(baseStyles, className)} {...rest}>\n <div className={stepIconClassName}>\n <div className={cx(markerStyles, getThemedStateStyles(theme))}>\n {index + 1}\n </div>\n </div>\n\n <div className={contentStyles}>\n <Body baseFontSize={16} className={titleStyles}>\n {title}\n </Body>\n <Description>{description}</Description>\n </div>\n </li>\n );\n },\n);\n\nOrderedListItem.displayName = 'OrderedListItem';\n\nexport { OrderedListItem };\n"],"names":["_templateObject","OrderedListContext","createDescendantsContext","_templateObject2","_templateObject3","_templateObject4","_templateObject5","baseStyles","css","_taggedTemplateLiteral","spacing","_excluded","OrderedList","React","forwardRef","_ref","ref","children","className","darkModeProp","darkMode","rest","_objectWithoutProperties","_useInitDescendants","useInitDescendants","descendants","dispatch","useDarkMode","default","createElement","LeafyGreenProvider","DescendantsProvider","context","_extends","cx","displayName","stepIconClassName","createUniqueClassName","contentStyles","markerStyles","titleStyles","getThemedStateStyles","theme","color","text","primary","border","OrderedListItem","title","description","_useDescendant","useDescendant","index","Body","baseFontSize","Description","useDescendantsContext"],"mappings":"0kDACU,ICANA,EDAOC,EAAqBC,EAAwBA,yBAAC,sBCGlD,ICHHF,EAAiBG,EAAkBC,EAAkBC,EAAkBC,EDGhEC,EAAaC,EAAGA,IAACR,IAAoBA,EAAkBS,EAAuB,CAAC,mFAAoF,wCAAyCC,EAAOA,QAAC,MEH3NC,EAAY,CAAC,WAAY,YAAa,YAOtCC,EAA2BC,EAAAA,QAAMC,WAAW,SAAUC,EAAMC,GAC9D,IAAIC,EAAWF,EAAKE,SAClBC,EAAYH,EAAKG,UACjBC,EAAeJ,EAAKK,SACpBC,EAAOC,EAAyBP,EAAMJ,GACpCY,EAAsBC,EAAkBA,mBAACvB,GAC3CwB,EAAcF,EAAoBE,YAClCC,EAAWH,EAAoBG,SAE/BN,EADiBO,EAAWA,YAACR,GACLC,SAC1B,OAAoBP,EAAKe,QAACC,cAAcC,UAAoB,CAC1DV,SAAUA,GACIP,EAAKe,QAACC,cAAcE,sBAAqB,CACvDC,QAAS/B,EACTwB,YAAaA,EACbC,SAAUA,GACIb,EAAAA,QAAMgB,cAAc,KAAMI,EAAS,CAAA,EAAIZ,EAAM,CAC3DL,IAAKA,EACLE,UAAWgB,EAAAA,GAAG3B,EAAYW,KACxBD,IACN,GACAL,EAAYuB,YAAc,cDxBnB,IAAIC,EAAoBC,EAAAA,sBAAsB,QAE1C9B,EAAaC,EAAGA,IAACR,IAAoBA,EAAkBS,EAAuB,CAAC,8BAA+B,yBAA0B,WAAYC,EAAAA,QAAQ,KAAMA,EAAOA,QAAC,MAC1K4B,EAAgB9B,EAAAA,IAAIL,IAAqBA,EAAmBM,EAAuB,CAAC,yBACpF8B,EAAe/B,EAAAA,IAAIJ,IAAqBA,EAAmBK,EAAuB,CAAC,iIAAkI,kBAAmB,2EAHjO,OAIP+B,EAAchC,EAAAA,IAAIH,IAAqBA,EAAmBI,EAAuB,CAAC,sDAClFgC,EAAuB,SAA8BC,GAC9D,OAAOlC,EAAGA,IAACF,IAAqBA,EAAmBG,EAAuB,CAAC,cAAe,mEAAoE,SAAUkC,EAAAA,MAAMD,GAAOE,KAAKC,QAAQjB,QAASe,EAAAA,MAAMD,GAAOI,OAAOD,QAAQjB,QACzO,EEZIjB,EAAY,CAAC,WAAY,YAAa,QAAS,eAQ/CoC,EAA+BlC,EAAAA,QAAMC,WAAW,SAAUC,EAAMD,GACnDC,EAAKE,SACtB,IAAIC,EAAYH,EAAKG,UACjB8B,EAAQjC,EAAKiC,MACbC,EAAclC,EAAKkC,YACnB5B,EAAOC,EAAyBP,EAAMJ,GACpCuC,EAAiBC,EAAAA,cAAclD,EAAoBa,GACrDsC,EAAQF,EAAeE,MACvBpC,EAAMkC,EAAelC,IAErB0B,EADiBf,EAAAA,cACIe,MACvB,OAAoB7B,UAAMgB,cAAc,KAAMI,EAAS,CACrDjB,IAAKA,EACLE,UAAWgB,EAAAA,GAAG3B,EAAYW,IACzBG,GAAoBR,UAAMgB,cAAc,MAAO,CAChDX,UAAWkB,GACGvB,EAAKe,QAACC,cAAc,MAAO,CACzCX,UAAWgB,EAAAA,GAAGK,EAAcE,EAAqBC,KAChDU,EAAQ,IAAkBvC,EAAAA,QAAMgB,cAAc,MAAO,CACtDX,UAAWoB,GACGzB,EAAKe,QAACC,cAAcwB,OAAM,CACxCC,aAAc,GACdpC,UAAWsB,GACVQ,GAAqBnC,EAAAA,QAAMgB,cAAc0B,EAAWA,YAAE,KAAMN,IACjE,GACAF,EAAgBZ,YAAc,qGJhCvB,WACL,OAAOqB,EAAAA,sBAAsBvD,EAC/B"} | ||
| {"version":3,"file":"index.js","sources":["../../src/OrderedListContext/OrderedListContext.ts","../../src/OrderedList/OrderedList.styles.ts","../../src/OrderedListItem/OrderedListItem.styles.ts","../../src/OrderedList/OrderedList.tsx","../../src/OrderedListItem/OrderedListItem.tsx"],"sourcesContent":["import {\n createDescendantsContext,\n useDescendantsContext,\n} from '@leafygreen-ui/descendants';\n\nexport const OrderedListContext =\n createDescendantsContext<HTMLLIElement>('OrderedListContext');\n\nexport function useOrderedListContext() {\n return useDescendantsContext(OrderedListContext);\n}\n","import { css } from '@leafygreen-ui/emotion';\nimport { spacing } from '@leafygreen-ui/tokens';\n\nexport const baseStyles = css`\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: ${spacing[400]}px;\n padding: 0;\n margin: 0;\n`;\n","import { css } from '@leafygreen-ui/emotion';\nimport { createUniqueClassName, Theme } from '@leafygreen-ui/lib';\nimport { color, spacing } from '@leafygreen-ui/tokens';\n\nexport const stepIconClassName = createUniqueClassName('step');\n\nconst MARKER_SIZE = 20;\n\nexport const baseStyles = css`\n display: flex;\n gap: ${spacing[200]}px;\n margin-bottom: ${spacing[100]}px;\n`;\n\nexport const contentStyles = css`\n width: 100%;\n`;\n\nexport const markerStyles = css`\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n width: ${MARKER_SIZE}px;\n height: ${MARKER_SIZE}px;\n position: relative;\n font-size: 12px;\n font-weight: 500;\n`;\n\nexport const titleStyles = css`\n font-weight: bold;\n line-height: unset;\n`;\n\nexport const getThemedStateStyles = (theme: Theme) => css`\n color: ${color[theme].text.primary.default};\n background-color: rgba(255, 255, 255, 0);\n border-color: ${color[theme].border.primary.default};\n`;\n","import React from 'react';\n\nimport {\n DescendantsProvider,\n useInitDescendants,\n} from '@leafygreen-ui/descendants';\nimport { cx } from '@leafygreen-ui/emotion';\nimport LeafyGreenProvider, {\n useDarkMode,\n} from '@leafygreen-ui/leafygreen-provider';\n\nimport { OrderedListContext } from '../OrderedListContext';\n\nimport { baseStyles } from './OrderedList.styles';\nimport { OrderedListProps } from './OrderedList.types';\n\nconst OrderedList = React.forwardRef(\n (\n { children, className, darkMode: darkModeProp, ...rest }: OrderedListProps,\n ref: React.ForwardedRef<HTMLOListElement>,\n ) => {\n const { descendants, dispatch } =\n useInitDescendants<HTMLLIElement>(OrderedListContext);\n\n const { darkMode } = useDarkMode(darkModeProp);\n\n return (\n <LeafyGreenProvider darkMode={darkMode}>\n <DescendantsProvider\n context={OrderedListContext}\n descendants={descendants}\n dispatch={dispatch}\n >\n <ol {...rest} ref={ref} className={cx(baseStyles, className)}>\n {children}\n </ol>\n </DescendantsProvider>\n </LeafyGreenProvider>\n );\n },\n);\n\nOrderedList.displayName = 'OrderedList';\n\nexport { OrderedList };\n","import React from 'react';\n\nimport { useDescendant } from '@leafygreen-ui/descendants';\nimport { cx } from '@leafygreen-ui/emotion';\nimport { useDarkMode } from '@leafygreen-ui/leafygreen-provider';\nimport { Body, Description } from '@leafygreen-ui/typography';\n\nimport { OrderedListContext } from '../OrderedListContext/OrderedListContext';\n\nimport {\n baseStyles,\n contentStyles,\n getThemedStateStyles,\n markerStyles,\n stepIconClassName,\n titleStyles,\n} from './OrderedListItem.styles';\nimport { OrderedListItemProps } from './OrderedListItem.types';\n\nconst OrderedListItem = React.forwardRef(\n (\n { children, className, title, description, ...rest }: OrderedListItemProps,\n forwardRef: React.ForwardedRef<HTMLLIElement>,\n ) => {\n const { index, ref } = useDescendant(OrderedListContext, forwardRef);\n const { theme } = useDarkMode();\n\n return (\n <li ref={ref} className={cx(baseStyles, className)} {...rest}>\n <div className={stepIconClassName}>\n <div className={cx(markerStyles, getThemedStateStyles(theme))}>\n {index + 1}\n </div>\n </div>\n\n <div className={contentStyles}>\n <Body baseFontSize={16} className={titleStyles}>\n {title}\n </Body>\n <Description>{description}</Description>\n </div>\n </li>\n );\n },\n);\n\nOrderedListItem.displayName = 'OrderedListItem';\n\nexport { OrderedListItem };\n"],"names":["_templateObject","OrderedListContext","createDescendantsContext","_templateObject2","_templateObject3","_templateObject4","_templateObject5","baseStyles","css","_taggedTemplateLiteral","spacing","_excluded","OrderedList","React","forwardRef","_ref","ref","children","className","darkModeProp","darkMode","rest","_objectWithoutProperties","_useInitDescendants","useInitDescendants","descendants","dispatch","useDarkMode","default","createElement","LeafyGreenProvider","DescendantsProvider","context","_extends","cx","displayName","stepIconClassName","createUniqueClassName","contentStyles","markerStyles","titleStyles","getThemedStateStyles","theme","color","text","primary","border","OrderedListItem","title","description","_useDescendant","useDescendant","index","Body","baseFontSize","Description","useDescendantsContext"],"mappings":"gkDACU,ICANA,EDAOC,EAAqBC,EAAwBA,yBAAC,sBCGlD,ICHHF,EAAiBG,EAAkBC,EAAkBC,EAAkBC,EDGhEC,EAAaC,EAAGA,IAACR,IAAoBA,EAAkBS,EAAuB,CAAC,mFAAoF,wCAAyCC,EAAOA,QAAC,MEH3NC,EAAY,CAAC,WAAY,YAAa,YAOtCC,EAA2BC,EAAAA,QAAMC,WAAW,SAAUC,EAAMC,GAC9D,IAAIC,EAAWF,EAAKE,SAClBC,EAAYH,EAAKG,UACjBC,EAAeJ,EAAKK,SACpBC,EAAOC,EAAyBP,EAAMJ,GACpCY,EAAsBC,EAAkBA,mBAACvB,GAC3CwB,EAAcF,EAAoBE,YAClCC,EAAWH,EAAoBG,SAE/BN,EADiBO,EAAWA,YAACR,GACLC,SAC1B,OAAoBP,EAAKe,QAACC,cAAcC,UAAoB,CAC1DV,SAAUA,GACIP,EAAKe,QAACC,cAAcE,sBAAqB,CACvDC,QAAS/B,EACTwB,YAAaA,EACbC,SAAUA,GACIb,EAAAA,QAAMgB,cAAc,KAAMI,EAAS,CAAA,EAAIZ,EAAM,CAC3DL,IAAKA,EACLE,UAAWgB,EAAAA,GAAG3B,EAAYW,KACxBD,IACN,GACAL,EAAYuB,YAAc,cDxBnB,IAAIC,EAAoBC,EAAAA,sBAAsB,QAE1C9B,EAAaC,EAAGA,IAACR,IAAoBA,EAAkBS,EAAuB,CAAC,8BAA+B,yBAA0B,WAAYC,EAAAA,QAAQ,KAAMA,EAAOA,QAAC,MAC1K4B,EAAgB9B,EAAAA,IAAIL,IAAqBA,EAAmBM,EAAuB,CAAC,yBACpF8B,EAAe/B,EAAAA,IAAIJ,IAAqBA,EAAmBK,EAAuB,CAAC,iIAAkI,kBAAmB,2EAHjO,OAIP+B,EAAchC,EAAAA,IAAIH,IAAqBA,EAAmBI,EAAuB,CAAC,sDAClFgC,EAAuB,SAA8BC,GAC9D,OAAOlC,EAAGA,IAACF,IAAqBA,EAAmBG,EAAuB,CAAC,cAAe,mEAAoE,SAAUkC,EAAAA,MAAMD,GAAOE,KAAKC,QAAQjB,QAASe,EAAAA,MAAMD,GAAOI,OAAOD,QAAQjB,QACzO,EEZIjB,EAAY,CAAC,WAAY,YAAa,QAAS,eAQ/CoC,EAA+BlC,EAAAA,QAAMC,WAAW,SAAUC,EAAMD,GACnDC,EAAKE,SACtB,IAAIC,EAAYH,EAAKG,UACjB8B,EAAQjC,EAAKiC,MACbC,EAAclC,EAAKkC,YACnB5B,EAAOC,EAAyBP,EAAMJ,GACpCuC,EAAiBC,EAAAA,cAAclD,EAAoBa,GACrDsC,EAAQF,EAAeE,MACvBpC,EAAMkC,EAAelC,IAErB0B,EADiBf,EAAAA,cACIe,MACvB,OAAoB7B,UAAMgB,cAAc,KAAMI,EAAS,CACrDjB,IAAKA,EACLE,UAAWgB,EAAAA,GAAG3B,EAAYW,IACzBG,GAAoBR,UAAMgB,cAAc,MAAO,CAChDX,UAAWkB,GACGvB,EAAKe,QAACC,cAAc,MAAO,CACzCX,UAAWgB,EAAAA,GAAGK,EAAcE,EAAqBC,KAChDU,EAAQ,IAAkBvC,EAAAA,QAAMgB,cAAc,MAAO,CACtDX,UAAWoB,GACGzB,EAAKe,QAACC,cAAcwB,OAAM,CACxCC,aAAc,GACdpC,UAAWsB,GACVQ,GAAqBnC,EAAAA,QAAMgB,cAAc0B,EAAWA,YAAE,KAAMN,IACjE,GACAF,EAAgBZ,YAAc,qGJhCvB,WACL,OAAOqB,EAAAA,sBAAsBvD,EAC/B"} |
+6
-6
| { | ||
| "name": "@leafygreen-ui/ordered-list", | ||
| "version": "3.0.6", | ||
| "version": "3.0.7", | ||
| "description": "LeafyGreen UI Kit Ordered List", | ||
@@ -13,10 +13,10 @@ "main": "./dist/umd/index.js", | ||
| "dependencies": { | ||
| "@leafygreen-ui/descendants": "^3.0.4", | ||
| "@leafygreen-ui/lib": "^15.4.0", | ||
| "@leafygreen-ui/emotion": "^5.0.3", | ||
| "@leafygreen-ui/descendants": "^3.0.5", | ||
| "@leafygreen-ui/tokens": "^3.2.4", | ||
| "@leafygreen-ui/typography": "^22.1.3" | ||
| "@leafygreen-ui/typography": "^22.1.4", | ||
| "@leafygreen-ui/lib": "^15.6.2", | ||
| "@leafygreen-ui/emotion": "^5.0.4" | ||
| }, | ||
| "peerDependencies": { | ||
| "@leafygreen-ui/leafygreen-provider": "^5.0.4" | ||
| "@leafygreen-ui/leafygreen-provider": ">=3.2.0" | ||
| }, | ||
@@ -23,0 +23,0 @@ "devDependencies": { |
| > @leafygreen-ui/ordered-list@3.0.6 build /Users/stephen.lee/src/leafygreen-ui-c3po/packages/ordered-list | ||
| > lg-build bundle | ||
| > @leafygreen-ui/ordered-list@3.0.6 tsc /Users/stephen.lee/src/leafygreen-ui-c3po/packages/ordered-list | ||
| > lg-build tsc | ||
Sorry, the diff of this file is not supported yet
Fixed alerts
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Improved metrics
- Lines of code
554
41.69%- Number of medium supply chain risk alerts
0
-100%Worsened metrics
- Total package byte prevSize
65537
-60.88%- Number of package files
48
-4%