Core/dp 20309 overview documentation (#1284)

* Updated the structure of links and content and the layout of Introduction

* Re-ordered brand pillars to top of principles

* Update packages/core/stories/principles/Accessibility.stories.mdx

Co-authored-by: Minghua Sun <[email protected]>

* Moved sandbox style to end

* Added imports to resolve conflict

* Reverted preview js

* Create _place-holder.scss

-to resolve conflict with core/storybook-integration

* Reverted meta.json

-moved this work to navigation pr

* Fixed wrap of li

* Implemented LinkTo

* Updated the structure of links and content and the layout of Introduction

* Re-ordered brand pillars to top of principles

* Update packages/core/stories/principles/Accessibility.stories.mdx

Co-authored-by: Minghua Sun <[email protected]>

* Moved sandbox style to end

* Reverted preview js

* Reverted meta.json

-moved this work to navigation pr

* Fixed wrap of li

* Implemented LinkTo

* DP-20568-storybook-navigation-update (#1290)

* Added navigation update

* Update meta.json

* Re-organize links

* Deleted some test files

* Updated links

Co-authored-by: Minghua Sun <[email protected]>

* refactor introduction menu story links to use SectionLink component

* update intro

* fix and reorder

* remove unused styles;

Co-authored-by: Minghua Sun <[email protected]>

packages/core/stories/principles/Accessibility.stories.mdx

@@ -3,7 +3,7 @@ import { linkTo } from '@storybook/addon-links';
 import Button from '@massds/mayflower-react/dist/Button';
 import generateTitle from '../util/generateTitle';
 
-<Meta title="Design Principles/Guidelines/Accessibility" />
+<Meta title={generateTitle('Accessibility')} />
 
 
 # Web Accessibility and the Commonwealth

packages/core/stories/styles/index.scss

@@ -1,16 +1,12 @@
-
-
 @forward "00-base/configure" with (
   $assets-path: "~@massds/mayflower-assets/static" !default,
   $fonts-enable-rtl: true !default,
 );
 
 @use "00-base/configure" as *;
 
-@use './bootstrap-grid';
-@use './markdown';
-
 @use '~@massds/mayflower-assets/scss/00-base/fonts';
+@use './bootstrap-grid';
 
 @use '~@massds/mayflower-assets/scss/00-base/elements';
 
@@ -69,6 +65,16 @@
 @use '@massds/mayflower-assets/scss/01-atoms/place-holder';
 
 // Global
+hr {
+	margin: 2rem 0;
+}
+
+// Tables
+table,
+table.sbdocs.sbdocs-table {
+  min-width: 100%;
+}
+
 .sp {
   &--top {
     margin-top: 2rem;
@@ -78,6 +84,10 @@
   }
 }
 
+small {
+	font-size: .9rem;
+}
+
 .sb-block.borderless {
 	margin: 3rem 0 !important;
 	padding: 0 !important;
@@ -109,11 +119,10 @@ ul.sg-colors {
   padding: 0;
 }
 
-// Logo story
+// Button story
 .ma__row {
   display: flex;
   flex-direction: row;
-  align-items: baseline;
   & > *:not(:first-child) {
     margin-left: 1rem;
   }
@@ -170,9 +179,8 @@ p.lang-label {
 	padding: 0 1rem;
 }
 
-.reset-vspace > * {
+.reset-vspace * {
 	line-height: 1.5;
 	margin-block-start: 0;
   margin-block-end: 0;
-  margin: 0 !important;
 }