simplify

Signed-off-by: sirugh <rugh@adobe.com>
magento · Nov 5, 2020 · 93f1c46 · 93f1c46
1 parent 456a831
commit 93f1c46
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/packages/venia-concept/local-intercept.js b/packages/venia-concept/local-intercept.js
@@ -30,7 +30,7 @@ function localIntercept(targets) {
     );
     button.replaceJSX(
         'button',
-        `<${CustomButton} className={rootClassName} type={type} disabled={disabled} {...restProps}>{children}</${CustomButton}>`
+        `<${CustomButton} {...props}>{children}</${CustomButton}>`
     );
 
     // etc for all other things you might want to customize with your theme...

diff --git a/packages/venia-concept/src/CustomButton/CustomButton.js b/packages/venia-concept/src/CustomButton/CustomButton.js
@@ -18,12 +18,12 @@ const CustomButton = props => {
         type,
         negative,
         disabled,
-        className,
         ...restProps
     } = props;
 
     const storeCode = storage.getItem('store_view_code');
     const [css, setCss] = useState(defaultClasses);
+
     useEffect(() => {
         if (storeCode === 'fr') {
             loadCss();
@@ -35,12 +35,13 @@ const CustomButton = props => {
         }
     }, [storeCode]);
 
-    const classes = mergeClasses(css, propClasses);
+    // Inverted from usual syntax to overwrite with dynamic css.
+    const classes = mergeClasses(propClasses, css);
     const rootClassName = classes[getRootClassName(priority, negative)];
 
     return (
         <button
-            className={`${className} ${rootClassName}`}
+            className={rootClassName}
             type={type}
             disabled={disabled}
             {...restProps}

diff --git a/packages/venia-concept/src/CustomButton/frenchButton.css b/packages/venia-concept/src/CustomButton/frenchButton.css
@@ -1,4 +1,34 @@
 .root {
+    /* clickable.css */
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    line-height: 1;
+    pointer-events: auto;
+    text-align: center;
+
+    --stroke: var(--venia-brand-color-1-700);
+    background: none;
+    border-color: rgb(var(--stroke));
+    border-radius: 10rem;
+    border-style: solid;
+    border-width: 2px;
+    color: rgb(var(--stroke));
+    font-size: var(--venia-global-fontSize-100);
+    font-weight: var(--venia-global-fontWeight-bold);
+    line-height: 1.25rem;
+    max-width: 100%;
+    min-width: 10rem;
+    min-height: 2.5rem;
+    outline: none;
+    padding: calc(0.5rem + 1px) 1.5rem calc(0.5rem - 1px);
+    text-transform: uppercase;
+    transition-duration: 256ms;
+    transition-property: background-color, border-color, color;
+    transition-timing-function: var(--venia-global-anim-standard);
+
+    /* custom css  */
     color: red;
     border-color: red;
 }