Merge branch 'develop'

PMET-public · Dec 11, 2019 · d2acee4 · d2acee4
2 parents 98f2166 + 3895705
commit d2acee4
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pmet-public/luma-ui",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "description": "Luma React UI LIbrary",
   "repository": "https://github.com/PMET-public/luma-ui.git",
   "author": "Carlos A. Cabrera @fnhhipster",

diff --git a/src/components/Form/ThumbSwatches/ThumbSwatches.tsx b/src/components/Form/ThumbSwatches/ThumbSwatches.tsx
@@ -42,6 +42,7 @@ export const ThumbSwatches: Component<ThumbSwatchesProps> = React.forwardRef(
                                         ref={ref as any}
                                         type={type}
                                         name={name}
+                                        defaultChecked={items.length === 1}
                                         {...item}
                                     />
                                     <label htmlFor={`swatch-group__${name}__${index}`}>

diff --git a/src/templates/Product/Product.styled.tsx b/src/templates/Product/Product.styled.tsx
@@ -14,13 +14,13 @@ export const Wrapper = styled.div`
     grid-auto-rows: minmax(max-content, max-content);
     grid-gap: 1rem;
 
-    @media ${props => props.theme.breakpoints.untilMedium} {
+    @media ${props => props.theme.breakpoints.smallOnly} {
         display: grid;
         grid-auto-rows: max-content;
         grid-template-columns: 1fr;
     }
 
-    @media ${props => props.theme.breakpoints.large} {
+    @media ${props => props.theme.breakpoints.medium} {
         display: grid;
         grid-auto-rows: max-content;
         grid-gap: 2rem;
@@ -32,17 +32,18 @@ export const Images = styled.div`
     display: grid;
     align-items: center;
 
-    @media ${props => props.theme.breakpoints.untilMedium} {
+    @media ${props => props.theme.breakpoints.smallOnly} {
         position: sticky;
         top: 6rem;
         z-index: 0;
+        max-height: calc(100vh - 20rem);
     }
 `
 
 export const CarouselWrapper = styled.div`
     padding: 0;
 
-    @media ${props => props.theme.breakpoints.large} {
+    @media ${props => props.theme.breakpoints.medium} {
         max-width: 120rem;
         grid-auto-flow: row;
         grid-gap: 0.5rem;
@@ -64,7 +65,7 @@ export const CarouselItem = styled.div`
         height: 100%;
     }
 
-    @media ${props => props.theme.breakpoints.large} {
+    @media ${props => props.theme.breakpoints.medium} {
         grid-column-end: span 2;
     }
 
@@ -78,7 +79,7 @@ export const CarouselItem = styled.div`
 `
 
 export const InfoWrapper = styled.div`
-    @media ${props => props.theme.breakpoints.untilMedium} {
+    @media ${props => props.theme.breakpoints.smallOnly} {
         background-color: ${props => props.theme.colors.surface};
         border-radius: 1rem 1rem 0 0;
         box-shadow: 0 -0.5rem 0.3rem rgba(0, 0, 0, 0.05);
@@ -99,7 +100,7 @@ export const InfoWrapper = styled.div`
 `
 
 export const InfoInnerWrapper = styled.div`
-    @media ${props => props.theme.breakpoints.large} {
+    @media ${props => props.theme.breakpoints.medium} {
         align-items: center;
         display: flex;
         justify-content: center;
@@ -139,7 +140,7 @@ export const ThumbSwatchesWrapper = styled.div`
     ${ThumbSwatchesItems} {
         grid-template-columns: repeat(3, 1fr);
 
-        @media ${props => props.theme.breakpoints.large} {
+        @media ${props => props.theme.breakpoints.medium} {
             grid-template-columns: repeat(4, 1fr);
         }
     }

diff --git a/src/templates/Product/Product.tsx b/src/templates/Product/Product.tsx
@@ -179,6 +179,7 @@ export const Product: Component<ProductProps> = ({
                                                                 {type === 'thumb' && (
                                                                     <ThumbSwatchesWrapper>
                                                                         <ThumbSwatches
+                                                                            ref={register({ required })}
                                                                             {...(swatches as ThumbSwatchesProps)}
                                                                         />
                                                                     </ThumbSwatchesWrapper>