diff --git a/components/PageBuilder/ContentTypes/ButtonItem/ButtonItem.styled.tsx b/components/PageBuilder/ContentTypes/ButtonItem/ButtonItem.styled.tsx index 0a19edd..34cd385 100644 --- a/components/PageBuilder/ContentTypes/ButtonItem/ButtonItem.styled.tsx +++ b/components/PageBuilder/ContentTypes/ButtonItem/ButtonItem.styled.tsx @@ -3,18 +3,6 @@ import styled from 'styled-components' import { Root as ButtonRoot } from '@storystore/ui/dist/components/Button/Button.styled' export const Root = styled.div<{ $appearance?: string; $secondary?: boolean; $link?: boolean; $maxWidth?: number }>` - &:not(:last-child) { - ${props => - props.$appearance === 'inline' - ? ` - margin-inline-end: 1rem; - margin-bottom: 1rem; - ` - : ` - margin-bottom: 1rem; - `} - } - ${ButtonRoot} { background-color: ${props => (props.$secondary ? props.theme.colors.secondary : props.theme.colors.primary)}; color: ${props => (props.$secondary ? props.theme.colors.onSecondary : props.theme.colors.onPrimary)}; diff --git a/components/PageBuilder/ContentTypes/Buttons/Buttons.styled.tsx b/components/PageBuilder/ContentTypes/Buttons/Buttons.styled.tsx index 794e025..c172870 100644 --- a/components/PageBuilder/ContentTypes/Buttons/Buttons.styled.tsx +++ b/components/PageBuilder/ContentTypes/Buttons/Buttons.styled.tsx @@ -1,6 +1,10 @@ import styled from 'styled-components' export const Root = styled.div<{ $appearance: 'inline' | 'stacked'; $sameWidth: boolean; $alignment?: string }>` + gap: 1rem; + display: inline-flex; + flex-wrap: wrap; + ${props => props.$appearance === 'stacked' && ` diff --git a/components/PageBuilder/ContentTypes/Image/Image.styled.tsx b/components/PageBuilder/ContentTypes/Image/Image.styled.tsx index dbaf435..fada921 100644 --- a/components/PageBuilder/ContentTypes/Image/Image.styled.tsx +++ b/components/PageBuilder/ContentTypes/Image/Image.styled.tsx @@ -1,5 +1,6 @@ import styled from 'styled-components' import Image from '@storystore/ui/dist/components/Image' +import ImageRoot from '@storystore/ui/dist/components/Image/Image.styled' export const Root = styled.div` & img, @@ -7,6 +8,11 @@ export const Root = styled.div` & video { max-height: 100%; max-width: 100%; + height: auto; + } + + & ${ImageRoot} > div { + display: inline-block; } ` diff --git a/components/PageBuilder/ContentTypes/Image/Image.tsx b/components/PageBuilder/ContentTypes/Image/Image.tsx index 24a52f2..763c1a0 100644 --- a/components/PageBuilder/ContentTypes/Image/Image.tsx +++ b/components/PageBuilder/ContentTypes/Image/Image.tsx @@ -14,7 +14,7 @@ export type ImageProps = { export const Image: Component = ({ caption, link, image, ...props }) => { return ( : 'div'} {...props}> - + {caption && {caption}} ) diff --git a/components/PageBuilder/PageBuilder.styled.tsx b/components/PageBuilder/PageBuilder.styled.tsx index 9e0c34f..f183942 100644 --- a/components/PageBuilder/PageBuilder.styled.tsx +++ b/components/PageBuilder/PageBuilder.styled.tsx @@ -31,33 +31,45 @@ export const Root = styled.div` } & h1 { - font-size: 4rem; font-weight: ${props => props.theme.typography.heading.weight.bolder}; + font-size: 2.6rem; + margin-top: 0rem; + margin-bottom: 2rem; } & h2 { - font-size: 3rem; font-weight: ${props => props.theme.typography.heading.weight.bolder}; + font-size: 2.6rem; + margin-top: 2.5rem; + margin-bottom: 2rem; } & h3 { - font-size: 2.6rem; font-weight: ${props => props.theme.typography.heading.weight.bold}; + font-size: 1.8rem; + margin-top: 2rem; + margin-bottom: 1rem; } & h4 { - font-size: 2.4rem; font-weight: ${props => props.theme.typography.heading.weight.bold}; + font-size: 1.4rem; + margin-top: 2rem; + margin-bottom: 2rem; } & h5 { - font-size: 2rem; font-weight: ${props => props.theme.typography.heading.weight.bold}; + font-size: 1.2rem; + margin-top: 2rem; + margin-bottom: 2rem; } & h6 { - font-size: 1.8rem; font-weight: ${props => props.theme.typography.heading.weight.bold}; + font-size: 1rem; + margin-top: 2rem; + margin-bottom: 2rem; } ` diff --git a/lib/apollo/possibleTypes.json b/lib/apollo/possibleTypes.json new file mode 100644 index 0000000..dd5732c --- /dev/null +++ b/lib/apollo/possibleTypes.json @@ -0,0 +1 @@ +{"CartAddressInterface":["BillingCartAddress","ShippingCartAddress"],"CartItemInterface":["SimpleCartItem","VirtualCartItem","DownloadableCartItem","BundleCartItem","ConfigurableCartItem"],"ProductInterface":["VirtualProduct","SimpleProduct","DownloadableProduct","GiftCardProduct","BundleProduct","GroupedProduct","ConfigurableProduct"],"CategoryInterface":["CategoryTree"],"MediaGalleryInterface":["ProductImage","ProductVideo"],"ProductLinksInterface":["ProductLinks"],"AggregationOptionInterface":["AggregationOption"],"LayerFilterItemInterface":["LayerFilterItem","SwatchLayerFilterItem"],"PhysicalProductInterface":["SimpleProduct","GiftCardProduct","BundleProduct","GroupedProduct","ConfigurableProduct"],"CustomizableOptionInterface":["CustomizableAreaOption","CustomizableDateOption","CustomizableDropDownOption","CustomizableMultipleOption","CustomizableFieldOption","CustomizableFileOption","CustomizableRadioOption","CustomizableCheckboxOption"],"CustomizableProductInterface":["VirtualProduct","SimpleProduct","DownloadableProduct","GiftCardProduct","BundleProduct","ConfigurableProduct"],"SwatchDataInterface":["ImageSwatchData","TextSwatchData","ColorSwatchData"],"SwatchLayerFilterItemInterface":["SwatchLayerFilterItem"]} \ No newline at end of file diff --git a/package.json b/package.json index d4c1cab..93e3709 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "dependencies": { "@apollo/client": "^3.0.2", - "@storystore/ui": "1.3.0-beta25", + "@storystore/ui": "1.3.0-beta26", "@types/semver": "^7.2.0", "@types/sharp": "^0.25.1", "apollo-link-queue": "^2.2.0",