@orangesk/orange-design-system 2.0.1 → 2.1.0
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/README.md +4 -2
- package/build/components/Card/style.css +1 -1
- package/build/components/Card/style.css.map +1 -1
- package/build/components/FeatureAccordion/style.css +1 -1
- package/build/components/FeatureAccordion/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/components/types/index.d.ts +3 -3
- package/build/components/types/src/components/Card/CardSection.d.ts +2 -2
- package/build/components/types/src/components/PromoBanner/PromoBanner.d.ts +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/lib/tsconfig.tsbuildinfo +1 -1
- package/build/search-index.json +1 -1
- package/package.json +9 -9
- package/src/components/Button/IconButton.tsx +3 -1
- package/src/components/Button/tests/IconButton.unit.test.jsx +6 -2
- package/src/components/Card/CardSection.tsx +3 -2
- package/src/components/Card/styles/style.scss +7 -0
- package/src/components/Card/tests/CardSection.unit.test.jsx +12 -0
- package/src/components/Carousel/Carousel.static.ts +2 -2
- package/src/components/Carousel/tests/Carousel.static.test.jsx +7 -4
- package/src/components/FeatureAccordion/styles/mixins.scss +3 -3
- package/src/components/Forms/Autocomplete/Autocomplete.tsx +8 -0
- package/src/components/Forms/Autocomplete/tests/Autocomplete.unit.test.jsx +48 -0
- package/src/components/PromoBanner/PromoBanner.tsx +2 -1
- package/src/components/Card/CHANGELOG.md +0 -19
package/README.md
CHANGED
|
@@ -135,7 +135,7 @@ ODS components work perfectly without React:
|
|
|
135
135
|
<head>
|
|
136
136
|
<link
|
|
137
137
|
rel="stylesheet"
|
|
138
|
-
href="node_modules/@orangesk/orange-design-system/build/lib/
|
|
138
|
+
href="node_modules/@orangesk/orange-design-system/build/lib/style.css"
|
|
139
139
|
/>
|
|
140
140
|
</head>
|
|
141
141
|
<body>
|
|
@@ -172,9 +172,11 @@ Many components are CSS-only and don't require JavaScript:
|
|
|
172
172
|
```html
|
|
173
173
|
<link
|
|
174
174
|
rel="stylesheet"
|
|
175
|
-
href="node_modules/@orangesk/orange-design-system/build/lib/
|
|
175
|
+
href="node_modules/@orangesk/orange-design-system/build/lib/style.css"
|
|
176
176
|
/>
|
|
177
177
|
|
|
178
|
+
`components.css` contains component layer only. For standalone HTML usage, load `style.css` so required base tokens and CSS variables are present.
|
|
179
|
+
|
|
178
180
|
<!-- Button -->
|
|
179
181
|
<button class="button button--primary">Click Me</button>
|
|
180
182
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components{.card{display:flex;flex-direction:column;position:relative}.card>:not([class*=mb-]){flex-shrink:0;margin-bottom:0}.card .divider{padding:0}.card{background-color:var(--color-surface-primary);border:1px solid var(--color-border-subtle);border-radius:.625rem;margin-bottom:1.875rem;overflow:hidden}.card__section{flex:0 1 auto;padding:1.25rem}@media screen and (min-width:768px){.card__section{padding:1.875rem}}.card__section>.btn,.card__section>button{width:100%}.card__section>.btn:not(:last-child),.card__section>button:not(:last-child){margin-bottom:.625rem}.card__section>:last-child{margin-bottom:0}.card__section--space-small{flex:0 1 auto;padding:1.25rem}.card__section--space-small>.btn,.card__section--space-small>button{width:100%}.card__section--space-small>.btn:not(:last-child),.card__section--space-small>button:not(:last-child){margin-bottom:.625rem}.card__section--space-small>:last-child{margin-bottom:0}.card__section--fill{flex-grow:1}.card__product-header{display:flex;justify-content:space-between}.card__product-header>img{max-width:7.8125rem;object-fit:cover;object-position:left}.card__product-content{flex:0 1 auto;padding:1.25rem}@media screen and (min-width:768px){.card__product-content{padding:1.875rem}}.card__product-header--space-small .card__product-content{flex:0 1 auto;padding:1.25rem}.card--no-border{border:none}}
|
|
1
|
+
@layer components{.card{display:flex;flex-direction:column;position:relative}.card>:not([class*=mb-]){flex-shrink:0;margin-bottom:0}.card .divider{padding:0}.card{background-color:var(--color-surface-primary);border:1px solid var(--color-border-subtle);border-radius:.625rem;margin-bottom:1.875rem;overflow:hidden}.card__section{flex:0 1 auto;padding:1.25rem}@media screen and (min-width:768px){.card__section{padding:1.875rem}}.card__section>.btn,.card__section>button{width:100%}.card__section>.btn:not(:last-child),.card__section>button:not(:last-child){margin-bottom:.625rem}.card__section>:last-child{margin-bottom:0}.card__section--space-small{flex:0 1 auto;padding:1.25rem}.card__section--space-small>.btn,.card__section--space-small>button{width:100%}.card__section--space-small>.btn:not(:last-child),.card__section--space-small>button:not(:last-child){margin-bottom:.625rem}.card__section--space-small>:last-child{margin-bottom:0}@media screen and (min-width:992px){.card__section--space-large{padding:3.75rem}}.card__section--fill{flex-grow:1}.card__product-header{display:flex;justify-content:space-between}.card__product-header>img{max-width:7.8125rem;object-fit:cover;object-position:left}.card__product-content{flex:0 1 auto;padding:1.25rem}@media screen and (min-width:768px){.card__product-content{padding:1.875rem}}.card__product-header--space-small .card__product-content{flex:0 1 auto;padding:1.25rem}.card--no-border{border:none}}
|
|
2
2
|
/*# sourceMappingURL=style.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,MAEE,YAAa,CACb,qBAAsB,CAFtB,iBAGF,CACA,yBAEE,aAAc,CADd,eAEF,CACA,eACE,SACF,CACA,MACE,6CAA8C,CAG9C,2CAA4C,CAD5C,qBAAuB,CADvB,sBAAuB,CAGvB,eACF,CACA,eACE,aAAc,CACd,eACF,CACA,oCACE,eACE,gBACF,CACF,CACA,0CAEE,UACF,CACA,4EAEE,qBACF,CACA,2BACE,eACF,CACA,4BACE,aAAc,CACd,eACF,CACA,oEAEE,UACF,CACA,sGAEE,qBACF,CACA,wCACE,eACF,CACA,qBACE,WACF,CACA,sBACE,YAAa,CACb,6BACF,CACA,0BAGE,mBAAoB,CAFpB,gBAAiB,CACjB,oBAEF,CACA,uBACE,aAAc,CACd,eACF,CACA,oCACE,uBACE,gBACF,CACF,CACA,0DACE,aAAc,CACd,eACF,CACA,iBACE,WACF,CACF","file":"style.css","sourcesContent":["@layer components {\n .card {\n position: relative;\n display: flex;\n flex-direction: column;\n }\n .card > *:not([class*=mb-]) {\n margin-bottom: 0;\n flex-shrink: 0;\n }\n .card .divider {\n padding: 0;\n }\n .card {\n background-color: var(--color-surface-primary);\n margin-bottom: 1.875rem;\n border-radius: 0.625rem;\n border: 1px solid var(--color-border-subtle);\n overflow: hidden;\n }\n .card__section {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n @media screen and (min-width: 768px) {\n .card__section {\n padding: 1.875rem;\n }\n }\n .card__section > .btn,\n .card__section > button {\n width: 100%;\n }\n .card__section > .btn:not(:last-child),\n .card__section > button:not(:last-child) {\n margin-bottom: 0.625rem;\n }\n .card__section > *:last-child {\n margin-bottom: 0;\n }\n .card__section--space-small {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n .card__section--space-small > .btn,\n .card__section--space-small > button {\n width: 100%;\n }\n .card__section--space-small > .btn:not(:last-child),\n .card__section--space-small > button:not(:last-child) {\n margin-bottom: 0.625rem;\n }\n .card__section--space-small > *:last-child {\n margin-bottom: 0;\n }\n .card__section--fill {\n flex-grow: 1;\n }\n .card__product-header {\n display: flex;\n justify-content: space-between;\n }\n .card__product-header > img {\n object-fit: cover;\n object-position: left;\n max-width: 7.8125rem;\n }\n .card__product-content {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n @media screen and (min-width: 768px) {\n .card__product-content {\n padding: 1.875rem;\n }\n }\n .card__product-header--space-small .card__product-content {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n .card--no-border {\n border: none;\n }\n}"]}
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,MAEE,YAAa,CACb,qBAAsB,CAFtB,iBAGF,CACA,yBAEE,aAAc,CADd,eAEF,CACA,eACE,SACF,CACA,MACE,6CAA8C,CAG9C,2CAA4C,CAD5C,qBAAuB,CADvB,sBAAuB,CAGvB,eACF,CACA,eACE,aAAc,CACd,eACF,CACA,oCACE,eACE,gBACF,CACF,CACA,0CAEE,UACF,CACA,4EAEE,qBACF,CACA,2BACE,eACF,CACA,4BACE,aAAc,CACd,eACF,CACA,oEAEE,UACF,CACA,sGAEE,qBACF,CACA,wCACE,eACF,CACA,oCACE,4BACE,eACF,CACF,CACA,qBACE,WACF,CACA,sBACE,YAAa,CACb,6BACF,CACA,0BAGE,mBAAoB,CAFpB,gBAAiB,CACjB,oBAEF,CACA,uBACE,aAAc,CACd,eACF,CACA,oCACE,uBACE,gBACF,CACF,CACA,0DACE,aAAc,CACd,eACF,CACA,iBACE,WACF,CACF","file":"style.css","sourcesContent":["@layer components {\n .card {\n position: relative;\n display: flex;\n flex-direction: column;\n }\n .card > *:not([class*=mb-]) {\n margin-bottom: 0;\n flex-shrink: 0;\n }\n .card .divider {\n padding: 0;\n }\n .card {\n background-color: var(--color-surface-primary);\n margin-bottom: 1.875rem;\n border-radius: 0.625rem;\n border: 1px solid var(--color-border-subtle);\n overflow: hidden;\n }\n .card__section {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n @media screen and (min-width: 768px) {\n .card__section {\n padding: 1.875rem;\n }\n }\n .card__section > .btn,\n .card__section > button {\n width: 100%;\n }\n .card__section > .btn:not(:last-child),\n .card__section > button:not(:last-child) {\n margin-bottom: 0.625rem;\n }\n .card__section > *:last-child {\n margin-bottom: 0;\n }\n .card__section--space-small {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n .card__section--space-small > .btn,\n .card__section--space-small > button {\n width: 100%;\n }\n .card__section--space-small > .btn:not(:last-child),\n .card__section--space-small > button:not(:last-child) {\n margin-bottom: 0.625rem;\n }\n .card__section--space-small > *:last-child {\n margin-bottom: 0;\n }\n @media screen and (min-width: 992px) {\n .card__section--space-large {\n padding: 3.75rem;\n }\n }\n .card__section--fill {\n flex-grow: 1;\n }\n .card__product-header {\n display: flex;\n justify-content: space-between;\n }\n .card__product-header > img {\n object-fit: cover;\n object-position: left;\n max-width: 7.8125rem;\n }\n .card__product-content {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n @media screen and (min-width: 768px) {\n .card__product-content {\n padding: 1.875rem;\n }\n }\n .card__product-header--space-small .card__product-content {\n flex: 0 1 auto;\n padding: 1.25rem;\n }\n .card--no-border {\n border: none;\n }\n}"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components{.feature-accordion{background-color:var(--color-
|
|
1
|
+
@layer components{.feature-accordion{background-color:var(--color-background-secondary);color:var(--color-text-default);margin-left:0!important;margin-right:0!important}.feature-accordion__accordion{padding-left:0!important;padding-right:0!important}.feature-accordion__accordion .accordion{margin:5.4375rem 3.75rem}@media screen and (max-width:991.98px){.feature-accordion__accordion .accordion{margin:3.75rem 1.875rem}}@media screen and (max-width:767.98px){.feature-accordion__accordion .accordion{margin:0}}.feature-accordion__item{border-bottom:none;border-top:1px solid var(--color-border-strong)}.feature-accordion__item:first-child{border-top:none}.feature-accordion__item:last-child{border-bottom:none}.feature-accordion__item.is-active{border-top:4px solid var(--color-border-accent)}.feature-accordion__item .accordion__body{margin-bottom:0}@media screen and (max-width:767.98px){.feature-accordion__item .accordion__header,.feature-accordion__item .feature-accordion__content{padding-left:.9375rem;padding-right:.9375rem}}.feature-accordion__content{margin-bottom:1.875rem}.feature-accordion__content :last-child{margin-bottom:0}.feature-accordion__preview{display:flex;padding:0!important}.feature-accordion__preview .img{margin-bottom:0;width:100%}.feature-accordion__preview img{height:100%;margin:0!important;object-fit:cover;object-position:left center;width:100%}}
|
|
2
2
|
/*# sourceMappingURL=style.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,mBAEE,
|
|
1
|
+
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,mBAEE,kDAAmD,CADnD,+BAAgC,CAEhC,uBAAyB,CACzB,wBACF,CACA,8BACE,wBAA0B,CAC1B,yBACF,CACA,yCACE,wBACF,CACA,uCACE,yCACE,uBACF,CACF,CACA,uCACE,yCACE,QACF,CACF,CACA,yBACE,kBAAmB,CACnB,+CACF,CACA,qCACE,eACF,CACA,oCACE,kBACF,CACA,mCACE,+CACF,CACA,0CACE,eACF,CACA,uCACE,iGAEE,qBAAuB,CACvB,sBACF,CACF,CACA,4BACE,sBACF,CACA,wCACE,eACF,CACA,4BACE,YAAa,CACb,mBACF,CACA,iCACE,eAAkB,CAClB,UACF,CACA,gCAEE,WAAY,CAGZ,kBAAsB,CAFtB,gBAAiB,CACjB,2BAA4B,CAH5B,UAKF,CACF","file":"style.css","sourcesContent":["@layer components {\n .feature-accordion {\n color: var(--color-text-default);\n background-color: var(--color-background-secondary);\n margin-left: 0 !important;\n margin-right: 0 !important;\n }\n .feature-accordion__accordion {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n .feature-accordion__accordion .accordion {\n margin: 5.4375rem 3.75rem;\n }\n @media screen and (max-width: 991.98px) {\n .feature-accordion__accordion .accordion {\n margin: 3.75rem 1.875rem;\n }\n }\n @media screen and (max-width: 767.98px) {\n .feature-accordion__accordion .accordion {\n margin: 0;\n }\n }\n .feature-accordion__item {\n border-bottom: none;\n border-top: 1px solid var(--color-border-strong);\n }\n .feature-accordion__item:first-child {\n border-top: none;\n }\n .feature-accordion__item:last-child {\n border-bottom: none;\n }\n .feature-accordion__item.is-active {\n border-top: 4px solid var(--color-border-accent);\n }\n .feature-accordion__item .accordion__body {\n margin-bottom: 0;\n }\n @media screen and (max-width: 767.98px) {\n .feature-accordion__item .accordion__header,\n .feature-accordion__item .feature-accordion__content {\n padding-left: 0.9375rem;\n padding-right: 0.9375rem;\n }\n }\n .feature-accordion__content {\n margin-bottom: 1.875rem;\n }\n .feature-accordion__content *:last-child {\n margin-bottom: 0;\n }\n .feature-accordion__preview {\n display: flex;\n padding: 0px !important;\n }\n .feature-accordion__preview .img {\n margin-bottom: 0px;\n width: 100%;\n }\n .feature-accordion__preview img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: left center;\n margin: 0px !important;\n }\n}"]}
|