Update InputSelect size and border radius values

HedvigInsurance · Jul 7, 2023 · 64d9ac9 · 64d9ac9
1 parent 2358846
commit 64d9ac9
Show file tree

Hide file tree

Showing 20 changed files with 52 additions and 41 deletions.
diff --git a/apps/store/src/components/CartInventory/CampaignsSection.tsx b/apps/store/src/components/CartInventory/CampaignsSection.tsx
@@ -133,7 +133,7 @@ const ChipButton = styled.button({
   display: 'flex',
   alignItems: 'center',
   gap: theme.space.xs,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
   backgroundColor: theme.colors.gray200,
   textTransform: 'uppercase',
   paddingTop: theme.space.xxs,

diff --git a/apps/store/src/components/CartInventory/ReadOnlyCampaignCodeList.tsx b/apps/store/src/components/CartInventory/ReadOnlyCampaignCodeList.tsx
@@ -36,12 +36,11 @@ const SpaceBetween = styled.div({
   gap: theme.space.xs,
 })
 
-
 const Chip = styled.div({
   display: 'flex',
   alignItems: 'center',
   gap: theme.space.xxs,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
   backgroundColor: theme.colors.gray200,
   textTransform: 'uppercase',
   paddingTop: theme.space.xxs,

diff --git a/apps/store/src/components/CheckoutHeader/Breadcrumbs.tsx b/apps/store/src/components/CheckoutHeader/Breadcrumbs.tsx
@@ -44,7 +44,7 @@ const Step = styled.li<{ active: boolean }>(({ active }) => ({
 
   color: theme.colors.textTertiary,
   backgroundColor: theme.colors.opaque1,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
   border: `1px solid ${theme.colors.opaque1}`,
 
   ...(active && {

diff --git a/apps/store/src/components/CheckoutPage/CheckoutPage.tsx b/apps/store/src/components/CheckoutPage/CheckoutPage.tsx
@@ -281,7 +281,7 @@ const TextLink = styled(Link)({
   fontSize: theme.fontSizes.md,
 
   ':focus-visible': {
-    borderRadius: theme.radius.xs,
+    borderRadius: theme.radius.xxs,
     boxShadow: `${theme.colors.light} 0 0 0 3px, ${theme.colors.textPrimary} 0 0 0 4px`,
   },
 })

diff --git a/apps/store/src/components/CheckoutPaymentTrustlyPage/CheckoutPaymentTrustlyPage.tsx b/apps/store/src/components/CheckoutPaymentTrustlyPage/CheckoutPaymentTrustlyPage.tsx
@@ -87,7 +87,7 @@ const TextLink = styled(Link)({
   fontSize: theme.fontSizes.md,
 
   ':focus-visible': {
-    borderRadius: theme.radius.xs,
+    borderRadius: theme.radius.xxs,
     boxShadow: `${theme.colors.light} 0 0 0 3px, ${theme.colors.textPrimary} 0 0 0 4px`,
   },
 })
diff --git a/apps/store/src/components/ComparisonTable/ComparisonTable.tsx b/apps/store/src/components/ComparisonTable/ComparisonTable.tsx
@@ -16,8 +16,8 @@ export const Row = styled.tr({
 
   ':last-child': {
     td: {
-      borderBottomLeftRadius: theme.radius.xs,
-      borderBottomRightRadius: theme.radius.xs,
+      borderBottomLeftRadius: theme.radius.xxs,
+      borderBottomRightRadius: theme.radius.xxs,
     },
   },
 })
@@ -49,8 +49,8 @@ const TableHeader = styled.th({
 
 const ActiveTableHeader = styled(TableHeader)({
   backgroundColor: theme.colors.green100,
-  borderTopLeftRadius: theme.radius.xs,
-  borderTopRightRadius: theme.radius.xs,
+  borderTopLeftRadius: theme.radius.xxs,
+  borderTopRightRadius: theme.radius.xxs,
 })
 
 type TitleDataCellProps = { children: React.ReactNode; className?: string }

diff --git a/apps/store/src/components/ConfirmationPage/CheckList.tsx b/apps/store/src/components/ConfirmationPage/CheckList.tsx
@@ -67,7 +67,7 @@ const PresentationCheckboxChecked = styled.div({
   height: theme.space.lg,
   width: theme.space.lg,
   color: theme.colors.white,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
   display: 'grid  ',
   placeItems: 'center',
   backgroundColor: theme.colors.green600,

diff --git a/apps/store/src/components/ConfirmationPage/ContractCard.tsx b/apps/store/src/components/ConfirmationPage/ContractCard.tsx
@@ -137,7 +137,7 @@ export const CardSkeleton = styled(Card)({
 
 const Pill = styled.div({
   backgroundColor: theme.colors.light,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
   paddingInline: theme.space.xs,
   paddingBlock: theme.space.xxs,
   display: 'inline-flex',

diff --git a/apps/store/src/components/FetchInsuranceSuccess/FetchInsuranceSuccess.tsx b/apps/store/src/components/FetchInsuranceSuccess/FetchInsuranceSuccess.tsx
@@ -27,6 +27,6 @@ export const FetchInsuranceSuccess = ({ company, onClick, children }: Props) =>
 
 const GrayCard = styled.div({
   backgroundColor: theme.colors.gray100,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
   padding: theme.space.md,
 })
diff --git a/apps/store/src/components/InputSelect/InputSelect.stories.tsx b/apps/store/src/components/InputSelect/InputSelect.stories.tsx
@@ -1,8 +1,8 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { InputSelect } from './InputSelect'
 
-export default {
+const meta: Meta<typeof InputSelect> = {
   title: 'Inputs / Select',
   component: InputSelect,
   parameters: {
@@ -11,19 +11,28 @@ export default {
       defaultViewport: 'iphonese2',
     },
   },
-} as Meta<typeof InputSelect>
+}
+
+export default meta
+type Story = StoryObj<typeof InputSelect>
 
-const Template: StoryFn<typeof InputSelect> = (props) => {
-  return <InputSelect {...props} />
+export const Small: Story = {
+  args: {
+    size: 'small',
+    placeholder: 'Byggnadstyp',
+    options: [
+      { name: 'Garage', value: 'garage' },
+      { name: 'Attefallshus', value: 'attefallshus' },
+      { name: 'Växthus', value: 'växthus' },
+      { name: 'Annan', value: 'annan' },
+    ],
+    name: 'Byggnadstyp',
+  },
 }
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: 'Byggnadstyp',
-  options: [
-    { name: 'Garage', value: 'garage' },
-    { name: 'Attefallshus', value: 'attefallshus' },
-    { name: 'Växthus', value: 'växthus' },
-    { name: 'Annan', value: 'annan' },
-  ],
-  name: 'Byggnadstyp',
+
+export const Large: Story = {
+  args: {
+    ...Small.args,
+    size: 'large',
+  },
 }
diff --git a/apps/store/src/components/InputSelect/InputSelect.tsx b/apps/store/src/components/InputSelect/InputSelect.tsx
@@ -89,9 +89,7 @@ const StyledSelect = styled(
   elementConfig,
 )<SelectProps>(({ variantSize }) => ({
   color: theme.colors.textPrimary,
-  borderRadius: theme.radius.sm,
   width: '100%',
-  height: '3rem',
   display: 'flex',
   alignItems: 'center',
   paddingLeft: theme.space.md,
@@ -100,11 +98,15 @@ const StyledSelect = styled(
   backgroundColor: theme.colors.opaque1,
 
   ...(variantSize === 'small' && {
+    height: '2.5rem',
     fontSize: theme.fontSizes.md,
+    borderRadius: theme.radius.xs,
   }),
 
   ...(variantSize === 'large' && {
+    height: '3.5rem',
     fontSize: theme.fontSizes.xl,
+    borderRadius: theme.radius.sm,
   }),
 
   '&:invalid, &:disabled': {

diff --git a/apps/store/src/components/PriceCalculator/FetchInsurance.tsx b/apps/store/src/components/PriceCalculator/FetchInsurance.tsx
@@ -166,7 +166,7 @@ export const FetchInsurance = ({
 const DialogWindow = styled(Dialog.Window)({
   padding: theme.space.md,
   paddingTop: theme.space.lg,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
   width: `calc(100% - ${theme.space.xs} * 2)`,
   maxWidth: '28rem',
   marginInline: 'auto',
@@ -191,5 +191,5 @@ const DialogIframeWindow = styled(Dialog.Window)({
   maxHeight: '100%',
   height: INSURELY_IFRAME_MAX_HEIGHT,
   overflowY: 'auto',
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
 })
diff --git a/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx b/apps/store/src/components/ProductPage/PurchaseForm/OfferPresenter.tsx
@@ -261,7 +261,7 @@ const TextButton = styled.button({
 
   backgroundColor: theme.colors.light,
   ':focus-visible': {
-    borderRadius: theme.radius.xs,
+    borderRadius: theme.radius.xxs,
     boxShadow: `${theme.colors.light} 0 0 0 3px, ${theme.colors.textPrimary} 0 0 0 4px`,
   },
 

diff --git a/apps/store/src/components/ProductPage/PurchaseForm/PurchaseForm.tsx b/apps/store/src/components/ProductPage/PurchaseForm/PurchaseForm.tsx
@@ -403,13 +403,13 @@ const Bar = styled.div({
   maxWidth: '16rem',
   marginInline: 'auto',
   backgroundColor: theme.colors.gray500,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
 })
 
 const ProgressBar = styled(motion.div)({
   height: '100%',
   backgroundColor: theme.colors.gray1000,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
 })
 
 type ShowOfferStateProps = {

diff --git a/apps/store/src/components/RichText/RichText.styles.tsx b/apps/store/src/components/RichText/RichText.styles.tsx
@@ -165,7 +165,7 @@ export const richTextStyles = css(
       maxWidth: `calc(100% + ${theme.space.md})`,
       marginBlock: '4.5rem',
       marginInline: `-${theme.space.xs}`,
-      borderRadius: theme.radius.xs,
+      borderRadius: theme.radius.xxs,
     },
 
     [mq.md]: {

diff --git a/apps/store/src/components/TierSelector/TierLevelRadioGroup.tsx b/apps/store/src/components/TierSelector/TierLevelRadioGroup.tsx
@@ -34,7 +34,7 @@ export const Item = ({ title, price, description, value }: ItemProps) => {
 const RadioGroupItem = styled(RadioGroup.Item)({
   width: '100%',
   padding: theme.space.xs,
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
   cursor: 'pointer',
 
   '&[data-state=checked]': {

diff --git a/apps/store/src/components/TierSelector/TierSelector.tsx b/apps/store/src/components/TierSelector/TierSelector.tsx
@@ -31,7 +31,7 @@ const Trigger = styled(Collapsible.Trigger)({
   alignItems: 'center',
   textAlign: 'center',
   justifyContent: 'space-between',
-  borderRadius: theme.radius.xs,
+  borderRadius: theme.radius.xxs,
   paddingInline: theme.space.md,
 })
 

diff --git a/packages/ui/src/components/Badge/Badge.tsx b/packages/ui/src/components/Badge/Badge.tsx
@@ -30,7 +30,7 @@ export const BadgeBase = styled(
     display: 'inline-block',
     color: theme.colors.dark,
     backgroundColor: getColor(color),
-    borderRadius: theme.radius.xs,
+    borderRadius: theme.radius.xxs,
     ...getBadgeSize(size),
     ...getMargins(props),
   }

diff --git a/packages/ui/src/components/Button/Button.helpers.ts b/packages/ui/src/components/Button/Button.helpers.ts
@@ -36,13 +36,13 @@ const SIZE_STYLES = {
     height: HEIGHT.small,
     paddingInline: theme.space.md,
     fontSize: theme.fontSizes.xs,
-    borderRadius: theme.radius.xs,
+    borderRadius: theme.radius.xxs,
   },
   medium: {
     height: HEIGHT.medium,
     paddingInline: theme.space.md,
     fontSize: theme.fontSizes.md,
-    borderRadius: theme.radius[1],
+    borderRadius: theme.radius.xs,
   },
   large: {
     height: HEIGHT.large,

diff --git a/packages/ui/src/lib/theme/radius.ts b/packages/ui/src/lib/theme/radius.ts
@@ -11,6 +11,7 @@ export const radius = {
   ...base,
 
   // Aliases
+  xxs: base[0],
   xs: base[0],
   sm: base[2],
   md: base[3],