@riosst100/pwa-marketplace 1.3.3 → 1.3.4

package/src/overwrites/venia-ui/lib/components/RichContent/richContent.module.css

@@ -0,0 +1,146 @@
+.root h1,
+.root h2,
+.root h3,
+.root h4,
+.root h5,
+.root h6 {
+    margin-bottom: 0.5rem;
+    line-height: 1.25;
+}
+
+.root h1 {
+    margin-top: 0.75rem;
+    font-size: 1.875rem;
+    font-weight: 400;
+}
+
+.root h2 {
+    margin-top: 1rem;
+    font-size: 1.5rem;
+    font-weight: 400;
+}
+
+.root h3 {
+    margin-top: 1rem;
+    font-size: 1.25rem;
+    font-weight: 400;
+}
+
+.root h4 {
+    margin-top: 1rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+}
+
+.root h5 {
+    margin-top: 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.root h6 {
+    margin-top: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.root p {
+    margin-bottom: 1rem;
+    line-height: 1.5;
+}
+
+.root p:last-child {
+    margin-bottom: 0;
+}
+
+.root img {
+    max-width: 100%;
+    margin: 1rem 0;
+}
+
+.root ol,
+.root ul {
+    padding-left: 1.5rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    line-height: 1.5;
+}
+
+.root p + ol,
+.root p + ul {
+    margin-top: 0;
+}
+
+/* TODO @TW: cannot compose */
+.root ol {
+    /* composes: list-decimal from global; */
+    list-style-type: decimal;
+}
+
+/* TODO @TW: cannot compose */
+.root ul {
+    /* composes: list-disc from global; */
+    list-style-type: disc;
+}
+
+.root a {
+    text-decoration: underline;
+}
+
+.root blockquote {
+    margin: 1rem 0;
+    font-size: 1.25rem;
+    font-style: italic;
+}
+
+.root table {
+    width: 100%;
+    text-align: left;
+}
+
+.root pre {
+    padding: 1rem;
+    /* composes: border from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
+    border: 1px solid rgb(var(--venia-global-color-border));
+    /* composes: bg-gray-900 from global; */
+    background: rgb(var(--venia-global-color-gray));
+}
+
+.root :global .cms-content-important {
+    padding: 1rem;
+    /* composes: border from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
+    border: 1px solid rgb(var(--venia-global-color-border));
+    /* composes: bg-gray-900 from global; */
+    background: rgb(var(--venia-global-color-gray));
+    font-size: 1.125rem;
+}
+
+@media (min-width: 800px) {
+    .root h1 {
+        font-size: 3rem;
+    }
+
+    .root h2 {
+        font-size: 2.25rem;
+    }
+
+    .root h3 {
+        font-size: 1.875rem;
+    }
+
+    .root h4 {
+        font-size: 1.5rem;
+    }
+
+    .root h5 {
+        font-size: 1.125rem;
+    }
+
+    .root h6 {
+        font-size: 1rem;
+    }
+}

package/src/overwrites/venia-ui/lib/components/RichContent/richContentRenderers.js

@@ -0,0 +1,7 @@
+/**
+ * This file is augmented at build time using the @magento/venia-ui build
+ * target "richContentRenderers", which allows third-party modules to add
+ * rendering strategies to the RichContent component.
+ */
+
+export default [];

package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.module.css

@@ -2,7 +2,6 @@
     composes: items-center from global;
     composes: justify-items-center from global;
     composes: justify-self-center from global;
-    composes: max-w-site from global;
     composes: px-xs from global;
     composes: py-0 from global;
     composes: w-full from global;
@@ -33,7 +32,7 @@
     composes: inline-flex from global;
     composes: items-center from global;
     composes: justify-center from global;
-    composes: max-w-[24rem] from global;
+    composes: max-w-full from global;
     composes: relative from global;
     composes: w-full from global;
 }

package/src/overwrites/venia-ui/lib/components/SearchBar/searchField.js

@@ -11,7 +11,6 @@ const SearchField = props => {
     const { inputRef, resetForm, value } = useSearchField({ isSearchOpen });
 
     const handleSearch = () => {
-        console.log('search');
     }
     const searchButton =
         <Trigger action={handleSearch} addLabel={addLabel}>
@@ -27,7 +26,9 @@ const SearchField = props => {
             onFocus={onFocus}
             onValueChange={onChange}
             forwardedRef={inputRef}
-            // classes={cn('search input')}
+            className={{
+                inputClassName: cn('rounded-full border-[1px] border-gray-100')
+            }}
         />
     );
 };

package/src/overwrites/venia-ui/lib/components/TextInput/field.module.css

@@ -0,0 +1,50 @@
+.root {
+    composes: content-start from global;
+    composes: grid from global;
+    composes: text-colorDefault from global;
+}
+
+.label {
+    composes: flex from global;
+    composes: font-semibold from global;
+    composes: items-center from global;
+    composes: justify-between from global;
+    composes: leading-none from global;
+    composes: px-0.5 from global;
+    composes: py-2.5 from global;
+    composes: text-colorDefault from global;
+    min-height: 2.125rem;
+}
+
+.input {
+    composes: appearance-none from global;
+    composes: bg-white from global;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-input from global;
+    composes: flex-textInput from global;
+    composes: h-[2.5rem] from global;
+    composes: inline-flex from global;
+    composes: m-0 from global;
+    composes: max-w-full from global;
+    composes: rounded-md from global;
+    composes: text-colorDefault from global;
+    composes: text-colorDefault from global;
+    composes: w-full from global;
+    padding: calc(0.375rem - 1px) calc(0.625rem - 1px); /* TODO @TW: review */
+
+    composes: focus_outline-none from global;
+    composes: focus_shadow-inputFocus from global;
+}
+
+.input:disabled {
+    background: rgb(var(--venia-global-color-gray-100));
+    border-color: rgb(var(--venia-global-color-gray-400));
+    color: rgb(var(--venia-global-color-gray-darker));
+}
+
+.optional {
+    composes: font-normal from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
+}

package/src/overwrites/venia-ui/lib/components/TextInput/index.js

@@ -0,0 +1 @@
+export { default } from './textInput';

package/src/overwrites/venia-ui/lib/components/TextInput/textInput.js

@@ -0,0 +1,48 @@
+import React, { Fragment } from 'react';
+import { node, shape, string } from 'prop-types';
+import { Text as InformedText } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
+import defaultClasses from './textInput.module.css';
+import cn from 'classnames';
+
+const TextInput = props => {
+    const {
+        after,
+        before,
+        classes: propClasses,
+        regionError,
+        field,
+        message,
+        className = {},
+        ...rest
+    } = props;
+    const fieldState = useFieldState(field);
+    const classes = useStyle(defaultClasses, propClasses);
+    const { inputClassName = '' } = className;
+    var inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
+
+    return (
+        <Fragment>
+            <FieldIcons after={after} before={before} >
+                <InformedText {...rest} className={cn(inputClass, inputClassName)} field={field} />
+            </FieldIcons>
+            <Message fieldState={fieldState}>{message}</Message>
+        </Fragment>
+    );
+};
+
+export default TextInput;
+
+TextInput.propTypes = {
+    after: node,
+    before: node,
+    classes: shape({
+        input: string
+    }),
+    field: string.isRequired,
+    message: node
+};

package/src/overwrites/venia-ui/lib/components/TextInput/textInput.module.css

@@ -0,0 +1,21 @@
+.input {
+    composes: input from './field.module.css';
+
+    composes: disabled_text-subtle from global;
+}
+
+.input_error {
+    composes: input from './field.module.css';
+
+    composes: border-error from global;
+}
+
+.input_shimmer {
+    composes: h-[2.5rem] from global;
+    composes: m-0 from global;
+    composes: max-w-full from global;
+    composes: rounded-md from global;
+    composes: w-full from global;
+    font-size: 1rem;
+    padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
+}

package/src/talons/FilterOption/useFilterOptionModal.js

@@ -0,0 +1,11 @@
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+export const useFilterOptionModal = () => {
+    const [{ drawer }, { closeDrawer }] = useAppContext();
+    const isOpen = drawer === 'filterOptionModal.show';
+
+    return {
+        handleClose: closeDrawer,
+        isOpen
+    };
+};

package/src/talons/FilterOptionModal/useFilterOptionModal.js

@@ -0,0 +1,11 @@
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+export const useFilterOptionModal = () => {
+    const [{ drawer }, { closeDrawer }] = useAppContext();
+    const isOpen = drawer === 'filterOptionModal.show';
+
+    return {
+        handleClose: closeDrawer,
+        isOpen
+    };
+};

package/src/theme/vars.js

@@ -1,7 +1,19 @@
 export const textPrimary = '#1B1B1B';
 export const lightGray = '#E6E9EA';
+export const darkBlue = '#280135';
+export const blue = '#6243FA';
+export const orange = '#F7C317';
+export const gray100 = '#B9AEC5';
+export const gray600 = '#1BA387';
+export const gray700 = '#999999';
 
 export default {
     textPrimary,
     lightGray,
+    darkBlue,
+    blue,
+    orange,
+    gray100,
+    gray600,
+    gray700,
 }