@popsure/dirty-swan 0.27.28 → 0.27.29

package/dist/lib/scss/utils/_index.scss

@@ -1,3 +1,15 @@
 @function url-encoded-color($color) {
   @return '%23' + str-slice('#{$color}', 2, -1);
 }
+
+.sr-only {
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.27.28",
+  "version": "0.27.29",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/input/currency/index.stories.mdx

@@ -27,5 +27,7 @@ The following will be done:
     <CurrencyInput className="wmx5 mt8" label="Amount" placeholder="100" />
     <h4 className="p-h4 mt24">With label and no placeholder</h4>
     <CurrencyInput className="wmx5 mt8" label="Amount" />
+    <h4 className="p-h4 mt24">With placeholder and no label</h4>
+    <CurrencyInput className="wmx5 mt8" hideLabel label="Amount" placeholder="0" />
   </>
 </Preview>

package/src/lib/components/input/index.tsx

@@ -40,7 +40,7 @@ export default React.forwardRef(
             htmlFor={uniqueId}
             className={classnames('p-p', styles.label, {
               [styles['label--with-error']]: error,
-              [styles['label--hidden']]: hideLabel,
+              "sr-only": hideLabel,
             })}
           >
             {label}

package/src/lib/components/input/style.module.scss

@@ -101,12 +101,6 @@
   &--with-error {
     color: var(--ds-red-500);
   }
-
-  &--hidden {
-    visibility: hidden;
-    height: 0;
-    margin: 0;
-  }
 }
 
 .error {

package/src/lib/scss/utils/_index.scss

@@ -1,3 +1,15 @@
 @function url-encoded-color($color) {
   @return '%23' + str-slice('#{$color}', 2, -1);
 }
+
+.sr-only {
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}