Merge branch 'develop' into feat/DES-1113-remove-spotlight-from-footer

# Conflicts: # packages/css/src/components/index.scss
Amsterdam · Dec 20, 2024 · 93f8a28 · 93f8a28
2 parents 6935295 + 122d15b
commit 93f8a28
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 96 deletions.
diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
@@ -4,68 +4,68 @@
  */
 
 /* Append here */
-@use "footer/footer";
-@use "file-list/file-list";
-@use "action-group/action-group";
-@use "breakout/breakout";
-@use "hint/hint";
-@use "password-input/password-input";
-@use "form-error-list/form-error-list";
-@use "image-slider/image-slider";
-@use "table-of-contents/table-of-contents";
-@use "error-message/error-message";
-@use "file-input/file-input";
-@use "field/field";
-@use "select/select";
-@use "time-input/time-input";
-@use "date-input/date-input";
-@use "document/document";
-@use "avatar/avatar";
-@use "character-count/character-count";
-@use "description-list/description-list";
-@use "row/row";
-@use "radio/radio";
-@use "tabs/tabs";
-@use "text-area/text-area";
-@use "column/column";
-@use "margin/margin";
-@use "gap/gap";
-@use "field-set/field-set";
-@use "link-list/link-list";
-@use "badge/badge";
-@use "table/table";
-@use "mega-menu/mega-menu";
-@use "icon-button/icon-button";
-@use "skip-link/skip-link";
-@use "overlap/overlap";
-@use "header/header";
-@use "mark/mark";
-@use "text-input/text-input";
-@use "search-field/search-field";
-@use "logo/logo";
-@use "dialog/dialog";
-@use "image/image";
-@use "pagination/pagination";
 @use "accordion/accordion";
+@use "action-group/action-group";
 @use "alert/alert";
 @use "aspect-ratio/aspect-ratio";
+@use "avatar/avatar";
+@use "badge/badge";
 @use "blockquote/blockquote";
 @use "breadcrumb/breadcrumb";
+@use "breakout/breakout";
 @use "button/button";
 @use "card/card";
+@use "character-count/character-count";
 @use "checkbox/checkbox";
-@use "label/label";
+@use "column/column";
+@use "date-input/date-input";
+@use "description-list/description-list";
+@use "dialog/dialog";
+@use "document/document";
+@use "error-message/error-message";
+@use "field-set/field-set";
+@use "field/field";
+@use "file-input/file-input";
+@use "file-list/file-list";
+@use "footer/footer";
+@use "form-error-list/form-error-list";
+@use "gap/gap";
 @use "grid/grid";
+@use "header/header";
 @use "heading/heading";
-@use "spotlight/spotlight";
+@use "hint/hint";
+@use "icon-button/icon-button";
 @use "icon/icon";
+@use "image-slider/image-slider";
+@use "image/image";
+@use "label/label";
+@use "link-list/link-list";
 @use "link/link";
+@use "logo/logo";
+@use "margin/margin";
+@use "mark/mark";
+@use "mega-menu/mega-menu";
 @use "ordered-list/ordered-list";
+@use "overlap/overlap";
 @use "page-heading/page-heading";
 @use "page-menu/page-menu";
+@use "pagination/pagination";
 @use "paragraph/paragraph";
+@use "password-input/password-input";
+@use "radio/radio";
+@use "row/row";
 @use "screen/screen";
+@use "search-field/search-field";
+@use "select/select";
+@use "skip-link/skip-link";
+@use "spotlight/spotlight";
 @use "switch/switch";
+@use "table-of-contents/table-of-contents";
+@use "table/table";
+@use "tabs/tabs";
+@use "text-area/text-area";
+@use "text-input/text-input";
+@use "time-input/time-input";
 @use "top-task-link/top-task-link";
 @use "unordered-list/unordered-list";
 @use "visually-hidden/visually-hidden";
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -4,63 +4,63 @@
  */
 
 /* Append here */
-export * from './FileList'
+export * from './Accordion'
 export * from './ActionGroup'
-export * from './Breakout'
-export * from './Hint'
-export * from './ImageSlider'
-export * from './PasswordInput'
-export * from './FormErrorList'
-export * from './TableOfContents'
-export * from './ErrorMessage'
-export * from './FileInput'
-export * from './Field'
-export * from './Select'
-export * from './TimeInput'
-export * from './DateInput'
+export * from './Alert'
 export * from './Avatar'
+export * from './Badge'
+export * from './Blockquote'
+export * from './Breadcrumb'
+export * from './Breakout'
+export * from './Button'
+export * from './Card'
 export * from './CharacterCount'
-export * from './DescriptionList'
-export * from './Row'
-export * from './Radio'
-export * from './Tabs'
-export * from './TextArea'
+export * from './Checkbox'
 export * from './Column'
+export * from './DateInput'
+export * from './DescriptionList'
+export * from './Dialog'
+export * from './ErrorMessage'
+export * from './Field'
 export * from './FieldSet'
+export * from './FileInput'
+export * from './FileList'
+export * from './Footer'
+export * from './FormErrorList'
+export * from './Grid'
+export * from './Header'
+export * from './Heading'
+export * from './Hint'
+export * from './Icon'
+export * from './IconButton'
+export * from './Image'
+export * from './ImageSlider'
+export * from './Label'
+export * from './Link'
 export * from './LinkList'
-export * from './Badge'
-export * from './Table'
+export * from './Logo'
+export * from './Mark'
 export * from './MegaMenu'
-export * from './IconButton'
-export * from './SkipLink'
+export * from './OrderedList'
 export * from './Overlap'
-export * from './Header'
-export * from './Mark'
-export * from './TextInput'
-export * from './SearchField'
-export * from './Logo'
-export * from './Dialog'
-export * from './Image'
+export * from './PageHeading'
+export * from './PageMenu'
 export * from './Pagination'
+export * from './Paragraph'
+export * from './PasswordInput'
+export * from './Radio'
+export * from './Row'
 export * from './Screen'
-export * from './Switch'
+export * from './SearchField'
+export * from './Select'
+export * from './SkipLink'
 export * from './Spotlight'
-export * from './Card'
-export * from './Alert'
-export * from './Footer'
-export * from './PageMenu'
+export * from './Switch'
+export * from './Table'
+export * from './TableOfContents'
+export * from './Tabs'
+export * from './TextArea'
+export * from './TextInput'
+export * from './TimeInput'
 export * from './TopTaskLink'
-export * from './Blockquote'
-export * from './Checkbox'
-export * from './PageHeading'
-export * from './OrderedList'
-export * from './Heading'
-export * from './Breadcrumb'
-export * from './Link'
-export * from './Button'
-export * from './Paragraph'
-export * from './Label'
 export * from './UnorderedList'
-export * from './Icon'
-export * from './Accordion'
-export * from './Grid'
diff --git a/plopfile.mjs b/plopfile.mjs
@@ -52,7 +52,7 @@ export default function (plop) {
         type: 'append',
         path: 'packages/css/src/components/index.scss',
         pattern: `/* Append here */`,
-        template: `@import "./{{kebabCase name}}/{{kebabCase name}}";`,
+        template: `@use "./{{kebabCase name}}/{{kebabCase name}}";`,
       },
       {
         type: 'add',

diff --git a/proprietary/tokens/README.md b/proprietary/tokens/README.md
@@ -146,16 +146,22 @@ Note that redefining the value of a token is a much better approach than redecla
 ## Usage in Sass
 
 The tokens can be imported as Sass variables as well.
+As they are already prefixed, the namespace that Sass would assign isn’t necessary.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/index.scss"
+@use "@amsterdam/design-system-tokens/dist/index.scss" as *;
 ```
 
-Import the compact tokens if you need them.
-Sass will override spacious values automatically.
+Import the compact tokens if needed.
+Note that Sass doesn't allow importing them alongside the default set due to naming conflicts.
+Address these tokens through the `compact` namespace and do not use the spacious tokens they replace.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/compact.scss"
+@use "@amsterdam/design-system-tokens/dist/compact.scss";
+
+.class {
+  padding-block: compact.$ams-space-md;
+}
 ```
 
 ## Usage in JavaScript