diff --git a/packages/components/package.json b/packages/components/package.json index f7439060f..9cbf1bf15 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -11,7 +11,6 @@ "./Button": "./dist/Button.js", "./Checkbox": "./dist/Checkbox.js", "./Content": "./dist/Content.js", - "./LayoutCard": "./dist/LayoutCard.js", "./CopyToClipboardButton": "./dist/CopyToClipboardButton.js", "./FieldDescription": "./dist/FieldDescription.js", "./FieldError": "./dist/FieldError.js", @@ -23,6 +22,7 @@ "./InlineAlert": "./dist/InlineAlert.js", "./Label": "./dist/Label.js", "./LabeledValue": "./dist/LabeledValue.js", + "./LayoutCard": "./dist/LayoutCard.js", "./Link": "./dist/Link.js", "./Navigation": "./dist/Navigation.js", "./NumberField": "./dist/NumberField.js", diff --git a/packages/components/src/components/Badge/Badge.module.scss b/packages/components/src/components/Badge/Badge.module.scss index 6148b2dc1..70dd44334 100644 --- a/packages/components/src/components/Badge/Badge.module.scss +++ b/packages/components/src/components/Badge/Badge.module.scss @@ -4,7 +4,6 @@ padding-block: var(--badge--padding-y); padding-inline: var(--badge--padding-x); height: var(--badge--height); - line-height: var(--size-rem--m); display: inline-grid; grid-template-areas: "icon content"; grid-template-columns: auto 1fr; diff --git a/packages/components/src/components/Button/Button.module.scss b/packages/components/src/components/Button/Button.module.scss index e0a3f7cff..5dc68d83f 100644 --- a/packages/components/src/components/Button/Button.module.scss +++ b/packages/components/src/components/Button/Button.module.scss @@ -47,12 +47,12 @@ } .size-s { - font-size: var(--button--font-size-small); - padding-block: var(--button--padding-small-squished-y); - padding-inline: var(--button--padding-small-squished-x); + font-size: var(--button--font-size-s); + padding-block: var(--button--padding-s-squished-y); + padding-inline: var(--button--padding-s-squished-x); &:has(.icon) { - padding: var(--button--padding-small); + padding: var(--button--padding-s); } } diff --git a/packages/components/src/components/Button/stories/Default.stories.tsx b/packages/components/src/components/Button/stories/Default.stories.tsx index c7ed3bd0e..9d58ed061 100644 --- a/packages/components/src/components/Button/stories/Default.stories.tsx +++ b/packages/components/src/components/Button/stories/Default.stories.tsx @@ -5,7 +5,7 @@ import { IconPlus } from "@/components/Icon/components/icons"; import { action } from "@storybook/addon-actions"; const meta: Meta = { - title: "Buttons/Button", + title: "Actions/Button", component: Button, args: { onPress: action("onPress"), diff --git a/packages/components/src/components/Button/stories/EdgeCases.stories.tsx b/packages/components/src/components/Button/stories/EdgeCases.stories.tsx index f78a2a371..3dc36d967 100644 --- a/packages/components/src/components/Button/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Button/stories/EdgeCases.stories.tsx @@ -6,7 +6,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Buttons/Button/Edge Cases", + title: "Actions/Button/Edge Cases", }; export default meta; diff --git a/packages/components/src/components/Button/stories/States.stories.tsx b/packages/components/src/components/Button/stories/States.stories.tsx index b06ad3cbf..494249fe1 100644 --- a/packages/components/src/components/Button/stories/States.stories.tsx +++ b/packages/components/src/components/Button/stories/States.stories.tsx @@ -6,7 +6,7 @@ import React from "react"; const meta: Meta = { ...defaultMeta, - title: "Buttons/Button/States", + title: "Actions/Button/States", }; export default meta; diff --git a/packages/components/src/components/Button/stories/Variants.stories.tsx b/packages/components/src/components/Button/stories/Variants.stories.tsx index b80a19d05..199c0ff23 100644 --- a/packages/components/src/components/Button/stories/Variants.stories.tsx +++ b/packages/components/src/components/Button/stories/Variants.stories.tsx @@ -5,7 +5,7 @@ import React from "react"; const meta: Meta = { ...defaultMeta, - title: "Buttons/Button/Variants", + title: "Actions/Button/Variants", }; export default meta; diff --git a/packages/components/src/components/Checkbox/stories/Default.stories.tsx b/packages/components/src/components/Checkbox/stories/Default.stories.tsx index f167a2ccf..33d247921 100644 --- a/packages/components/src/components/Checkbox/stories/Default.stories.tsx +++ b/packages/components/src/components/Checkbox/stories/Default.stories.tsx @@ -4,7 +4,7 @@ import React from "react"; import { action } from "@storybook/addon-actions"; const meta: Meta = { - title: "Forms/Checkbox", + title: "Form Controls/Checkbox", component: Checkbox, args: { onChange: action("onChange"), diff --git a/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx b/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx index aaf64cc12..5d980a434 100644 --- a/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx @@ -5,7 +5,7 @@ import defaultMeta from "./Default.stories"; import { dummyText } from "@/lib/dev/dummyText"; const meta: Meta = { - title: "Forms/Checkbox/Edge Cases", + title: "Form Controls/Checkbox/Edge Cases", ...defaultMeta, }; diff --git a/packages/components/src/components/CopyToClipboardButton/stories/Default.stories.tsx b/packages/components/src/components/CopyToClipboardButton/stories/Default.stories.tsx index f91a2e2df..b05e285f3 100644 --- a/packages/components/src/components/CopyToClipboardButton/stories/Default.stories.tsx +++ b/packages/components/src/components/CopyToClipboardButton/stories/Default.stories.tsx @@ -3,7 +3,7 @@ import React from "react"; import { CopyToClipboardButton } from "../CopyToClipboardButton"; const meta: Meta = { - title: "Buttons/CopyToClipboardButton", + title: "Actions/CopyToClipboardButton", component: CopyToClipboardButton, render: (props) => , args: { diff --git a/packages/components/src/components/Heading/Heading.module.scss b/packages/components/src/components/Heading/Heading.module.scss index 08b3e3d59..e59230d53 100644 --- a/packages/components/src/components/Heading/Heading.module.scss +++ b/packages/components/src/components/Heading/Heading.module.scss @@ -15,3 +15,9 @@ @include level(4); @include level(5); @include level(6); + +@media (max-width: 550px) { + h1 { + font-size: var(--heading--h1-font-size-mobile); + } +} diff --git a/packages/components/src/components/InlineAlert/InlineAlert.module.scss b/packages/components/src/components/InlineAlert/InlineAlert.module.scss index e9cb732b9..b9ec741f4 100644 --- a/packages/components/src/components/InlineAlert/InlineAlert.module.scss +++ b/packages/components/src/components/InlineAlert/InlineAlert.module.scss @@ -32,7 +32,6 @@ .heading { grid-area: heading; - font-size: var(--inline-alert--heading-font-size); } .content { diff --git a/packages/components/src/components/Label/Label.module.scss b/packages/components/src/components/Label/Label.module.scss index 6ab06a6ef..f491b19e6 100644 --- a/packages/components/src/components/Label/Label.module.scss +++ b/packages/components/src/components/Label/Label.module.scss @@ -1,5 +1,5 @@ .label { - color: var(--label--color); + color: var(--label--color--default); font-size: var(--label--font-size); font-weight: var(--label--font-weight); } diff --git a/packages/components/src/components/Link/Link.module.scss b/packages/components/src/components/Link/Link.module.scss index c005ed2c1..3cbb72a2e 100644 --- a/packages/components/src/components/Link/Link.module.scss +++ b/packages/components/src/components/Link/Link.module.scss @@ -1,5 +1,6 @@ .link { font-size: var(--link--font-size); + line-height: var(--link--line-height); font-weight: var(--link--font-weight); transition-property: color; transition-duration: var(--transition--duration--default); diff --git a/packages/components/src/components/NumberField/stories/Default.stories.tsx b/packages/components/src/components/NumberField/stories/Default.stories.tsx index 1fc9b3b13..03d93e5d4 100644 --- a/packages/components/src/components/NumberField/stories/Default.stories.tsx +++ b/packages/components/src/components/NumberField/stories/Default.stories.tsx @@ -7,7 +7,7 @@ import FieldDescription from "@/components/FieldDescription/FieldDescription"; import { FieldError } from "@/components/FieldError"; const meta: Meta = { - title: "Forms/NumberField", + title: "Form Controls/NumberField", component: NumberField, render: (props) => ( diff --git a/packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx b/packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx index 90b388098..e3310d0dc 100644 --- a/packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx @@ -5,7 +5,7 @@ import { Label } from "@/components/Label"; import { action } from "@storybook/addon-actions"; const meta: Meta = { - title: "Forms/NumberField/Edge Cases", + title: "Form Controls/NumberField/Edge Cases", component: NumberField, render: (props) => ( diff --git a/packages/components/src/components/RadioGroup/stories/Default.stories.tsx b/packages/components/src/components/RadioGroup/stories/Default.stories.tsx index 14b0f0080..e9e4d4af6 100644 --- a/packages/components/src/components/RadioGroup/stories/Default.stories.tsx +++ b/packages/components/src/components/RadioGroup/stories/Default.stories.tsx @@ -9,7 +9,7 @@ import { action } from "@storybook/addon-actions"; import { FieldError } from "@/components/FieldError"; const meta: Meta = { - title: "Forms/RadioGroup", + title: "Form Controls/RadioGroup", component: RadioGroup, args: { onChange: action("onChange"), diff --git a/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx b/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx index dec0a82e4..e2bb6ff76 100644 --- a/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx @@ -8,7 +8,7 @@ import { dummyText } from "@/lib/dev/dummyText"; import defaultMeta from "./Default.stories"; const meta: Meta = { - title: "Forms/RadioGroup/Edge Cases", + title: "Form Controls/RadioGroup/Edge Cases", ...defaultMeta, }; diff --git a/packages/components/src/components/Switch/stories/Default.stories.tsx b/packages/components/src/components/Switch/stories/Default.stories.tsx index 49888f6d4..1308b952f 100644 --- a/packages/components/src/components/Switch/stories/Default.stories.tsx +++ b/packages/components/src/components/Switch/stories/Default.stories.tsx @@ -4,7 +4,7 @@ import React from "react"; import { action } from "@storybook/addon-actions"; const meta: Meta = { - title: "Forms/Switch", + title: "Form Controls/Switch", component: Switch, args: { onChange: action("onChange"), diff --git a/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx b/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx index a0855c2c6..e32fdbaf2 100644 --- a/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx @@ -6,7 +6,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Forms/Switch/Edge Cases", + title: "Form Controls/Switch/Edge Cases", }; export default meta; diff --git a/packages/components/src/components/Switch/stories/Variants.stories.tsx b/packages/components/src/components/Switch/stories/Variants.stories.tsx index b491c1893..737cab669 100644 --- a/packages/components/src/components/Switch/stories/Variants.stories.tsx +++ b/packages/components/src/components/Switch/stories/Variants.stories.tsx @@ -4,7 +4,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Forms/Switch/Variants", + title: "Form Controls/Switch/Variants", args: { defaultSelected: true }, }; diff --git a/packages/components/src/components/TextArea/stories/Default.stories.tsx b/packages/components/src/components/TextArea/stories/Default.stories.tsx index 86fe837a7..9b40134c7 100644 --- a/packages/components/src/components/TextArea/stories/Default.stories.tsx +++ b/packages/components/src/components/TextArea/stories/Default.stories.tsx @@ -7,7 +7,7 @@ import FieldDescription from "@/components/FieldDescription/FieldDescription"; import { FieldError } from "@/components/FieldError"; const meta: Meta = { - title: "Forms/TextArea", + title: "Form Controls/TextArea", component: TextArea, render: (props) => (