Fixing the broken internal links (#345)

* Fixing the broken internal links

* Fixing two more broken links, adding ID for anchor target link.

packages/core/src/base/typography.scss

@@ -199,7 +199,7 @@ Style guide: style.typography
 Responsive typography
 
 The `ds-display`, `ds-title`, and `ds-h1` classes are responsive by default.
-To apply responsive typography elsewhere, use the [font size utility class](/utilites/font-size#responsive).
+To apply responsive typography elsewhere, use the [font size utility class](/utilities/font-size/#utilities.font-size.responsive).
 Since the base typography margins and line height is measured in `em` units,
 they'll automatically adjust as you change the font size.
 

packages/core/src/components/Autocomplete/Autocomplete.scss

@@ -56,19 +56,19 @@ Style guide: components.autocomplete.react
 ## When to use
 
 - If you are returning results from a known domain like a database of zip codes or a taxonomy of keywords
-- If you have a list of options that would cause a [select menu]({{root}}/components/select) to be unusually long
+- If you have a list of options that would cause a [select menu](/components/select) to be unusually long
 
 ## When to consider alternatives
 
-- When users are choosing from a specific set of options. Consider [checkboxes, radio buttons]({{root}}/components/choice), or a [select menu]({{root}}/components/select) in these cases.
+- When users are choosing from a specific set of options. Consider [checkboxes, radio buttons](/components/choice), or a [select menu](/components/select) in these cases.
 
 ## Guidance
 
 - `<Autocomplete>` makes use of the `<Downshift>` component, maintained by Paypal: [Downshift docs on Github](https://github.com/paypal/downshift). Currently we are holding to version 1.31.16. This will be changing in the future, but has been held to ensure good compatibility with assistive devices (JAWS, NVDA, VoiceOver). 
 - Don't use placeholder text in autocomplete fields. Try to write a descriptive label that identifies what the user is searching for. People who have cognitive or visual disabilities have additional problems with placeholder text.
 - The length of the text field provides a hint to users as to how much text to write. Do not ask users to write paragraphs of text in this component; use a `textarea` instead.
 
-**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**
+**[View the "Forms" guidelines for additional guidance and best practices.](/guidelines/forms/)**
 
 ## Accessibility
 

packages/core/src/components/ChoiceList/Choice.scss

@@ -334,7 +334,7 @@ Style guide: components.choice.react
 - Avoid using negative language in labels as they can be counterintuitive. For example, “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
 - Use caution if you decide to set a default value. Setting a default value can discourage users from making conscious decisions, seem pushy, or alienate users who don’t fit into your assumptions. In addition, you'll never know if the user explicitly chose that option or just didn't notice the question. If you're unsure, leave nothing selected by default.
 
-**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**
+**[View the "Forms" guidelines for additional guidance and best practices.](/guidelines/forms/)**
 
 ## Checked children and the expose within pattern
 
@@ -369,11 +369,11 @@ The following Sass variables can be overridden to theme choice fields:
 
 ## Related patterns
 
-- [Select menu]({{root}}/components/select)
+- [Select menu](/components/select)
 
 ## Learn more
 
-- [Form Guidelines]({{root}}/guidelines/forms/)
+- [Form Guidelines](/guidelines/forms/)
 - [GOV.UK Checkbox/Radio buttons discussion](https://paper.dropbox.com/doc/Radio-buttons-oIwWoxwBKClt5IXvDbnpF)
 - ["We've updated the radios and checkboxes on GOV.UK"](https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-radios-and-checkboxes-on-gov-uk/)
 - [Four steps for choosing form elements on the Web (PDF)](http://www.formsthatwork.com/files/Articles/dropdown.pdf)

packages/core/src/components/ChoiceList/Select.scss

@@ -79,8 +79,8 @@ Style guide: components.select.react
 
 ### When to consider alternatives
 
-- If the list of options is short. Use [radio buttons or checkboxes]({{root}}/components/choice) instead.
-- If the list of options is very long. Let users type the same information into a [text input]({{root}}/components/text-field) that suggests possible options instead. Long lists can sometimes be broken into multiple shorter lists by asking a few questions up-front to filter out options.
+- If the list of options is short. Use [radio buttons or checkboxes](/components/choice) instead.
+- If the list of options is very long. Let users type the same information into a [text input](/components/text-field) that suggests possible options instead. Long lists can sometimes be broken into multiple shorter lists by asking a few questions up-front to filter out options.
 - If you need to allow users to select more than one option at once. Users often don’t understand how to select multiple items from dropdowns. Use checkboxes instead.
 - If the data is highly familiar to users, such as the day, month, or year of their birth.
 
@@ -92,7 +92,7 @@ Style guide: components.select.react
 - When most users will (or should) pick a particular option, make it the default: `<option selected="selected">Default</option>`
 - Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Offer a “submit” button at the end of the form instead. Users often change their choices multiple times. Auto-submission is also less accessible.
 
-**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**
+**[View the "Forms" guidelines for additional guidance and best practices.](/guidelines/forms/)**
 
 ## Accessibility
 
@@ -102,12 +102,12 @@ Style guide: components.select.react
 
 ## Related patterns
 
-- [Checkbox and Radio]({{root}}/components/choice)
-- [Text field]({{root}}/components/text-field)
+- [Checkbox and Radio](/components/choice)
+- [Text field](/components/text-field)
 
 ## Learn more
 
-- [Form Guidelines]({{root}}/guidelines/forms/)
+- [Form Guidelines](/guidelines/forms/)
 - [Asking for a date of birth](https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/)
 - [Four steps for choosing form elements on the Web (PDF)](http://www.formsthatwork.com/files/Articles/dropdown.pdf)
 - [Dropdowns: Design Guidelines](https://www.nngroup.com/articles/drop-down-menus/)

packages/core/src/components/DateField/DateField.scss

@@ -77,20 +77,20 @@ Style guide: components.date-field.react
 
 ## Guidance
 
-- Ensure you've [installed both the Core package and Layout package]({{root}}/getting-started)
+- Ensure you've [installed both the Core package and Layout package](/startup/installation)
 - Allow users to enter the date as flexibly as possible, for example, allowing `1` as well as `01` for a month input.
 - Be sure each field is properly labeled — some countries enter dates in day, month, year order.
 - It may be tempting to switch all or some of these text fields to drop downs, but these tend to be more difficult to use than text boxes.
 
 ## Accessibility
 
-- These text fields should follow the [accessibility guidelines for all text inputs]({{root}}/components/text-field/#guidance).
+- These text fields should follow the [accessibility guidelines for all text inputs](/components/text-field/#guidance).
 - Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
 
 ## Related patterns
 
-- [Text field]({{root}}/components/text-field/)
-- [Grid]({{root}}/layout/grid/)
+- [Text field](/components/text-field/)
+- [Grid](/layout/grid/)
 
 Style guide: components.date-field.guidance
 */

packages/core/src/components/Dialog/Dialog.scss

@@ -110,7 +110,7 @@ Style guide: components.dialog.react
 
 ## Related patterns
 
-- [Alert]({{root}}/components/alert)
+- [Alert](/components/alert)
 
 ## Learn more
 

packages/core/src/components/FormLabel/FormLabel.scss

@@ -100,7 +100,7 @@ Style guide: components.form-label.react
 
 ## Learn More
 
-- [Form Guidelines]({{root}}/guidelines/forms/)
+- [Form Guidelines](/guidelines/forms/)
 
 Style guide: components.form-label.guidance
 */

packages/core/src/components/Spinner/Spinner.scss

@@ -104,7 +104,7 @@ Style guide: components.spinner
 /*
 Changing the spinner color
 
-To change the color of the spinner, one only has to change the `color` property of the spinner element. This can be done with the standard Design System [utility classes]({{root}}/utilities/color). The color of the spinner also defaults to `inherit`, so it will take on the color of the text in its parent container.
+To change the color of the spinner, one only has to change the `color` property of the spinner element. This can be done with the standard Design System [utility classes](/utilities/color). The color of the spinner also defaults to `inherit`, so it will take on the color of the text in its parent container.
 
 Markup:
 <span class="ds-c-spinner ds-u-color--primary" aria-valuetext="Loading" role="progressbar"></span>

packages/core/src/components/Table/Table.scss

@@ -130,7 +130,7 @@ Style guide: components.table.complex
 
 ## Guidance
 
-- Right-align numerical data in tables. You can use a [text alignment utility class]({{root}}/utilities/text-align) for this. This makes it easier to scan and compare values.
+- Right-align numerical data in tables. You can use a [text alignment utility class](/utilities/text-align) for this. This makes it easier to scan and compare values.
 
 ## Accessibility
 

packages/core/src/components/Tabs/Tabs.scss

@@ -154,7 +154,7 @@ Style guide: components.tabs.react-tab
     border-color: $color-gray-lighter;
     color: $color-gray-dark;
     pointer-events: none;
-  
+
     &:hover,
     &:active,
     &:focus {
@@ -207,7 +207,7 @@ Style guide: components.tabs.react-tab
 
 ## Related patterns
 
-- [Vertical navigation]({{root}}/components/vertical-nav)
+- [Vertical navigation](/components/vertical-nav)
 
 ## Learn more
 

packages/core/src/components/TextField/TextField.scss

@@ -66,7 +66,8 @@ Style guide: components.text-field
   &[type='number'] {
     appearance: textfield;
 
-    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
       appearance: none;
       margin: 0;
     }
@@ -167,7 +168,7 @@ Style guide: components.text-field.react
 
 ## When to consider alternatives
 
-- When users are choosing from a specific set of options. Consider [checkboxes, radio buttons]({{root}}/components/choice), or a [select menu]({{root}}/components/select) in these cases.
+- When users are choosing from a specific set of options. Consider [checkboxes, radio buttons](/components/choice), or a [select menu](/components/select) in these cases.
 
 ## Guidance
 
@@ -176,7 +177,7 @@ Style guide: components.text-field.react
 - Text fields are among the easiest type of input for desktop users but are more difficult for mobile users.
 - Only show error messages or styling after a user has interacted with a particular field.
 
-**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**
+**[View the "Forms" guidelines for additional guidance and best practices.](/guidelines/forms/)**
 
 ## Accessibility
 
@@ -200,12 +201,12 @@ The following Sass variables can be overridden to theme a field:
 
 ## Related patterns
 
-- [Masked field]({{root}}/components/masked-field/)
-- [Date field]({{root}}/components/date-field/)
+- [Masked field](/components/masked-field/)
+- [Date field](/components/date-field/)
 
 ## Learn more
 
-- [Form Guidelines]({{root}}/guidelines/forms/)
+- [Form Guidelines](/guidelines/forms/)
 - ["Placeholders in Form Fields Are Harmful"](https://www.nngroup.com/articles/form-design-placeholders/)
 - [Asking for a date of birth](https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/)
 - [GOV.UK text boxes discussion](https://paper.dropbox.com/doc/Text-boxes-8NLlgz9tjR8OzTz2N9wE3)

packages/core/src/components/VerticalNav/VerticalNav.scss

@@ -175,7 +175,7 @@ if you're using the React components.
 
 ## Related patterns
 
-- [Tabs]({{root}}/components/tabs)
+- [Tabs](/components/tabs)
 
 ## Learn more
 

packages/core/src/utilities/display-visibility.scss

@@ -98,7 +98,7 @@ Toggling visibility by breakpoint
 
 @responsive
 
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to show/hide content at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to show/hide content at specific breakpoints.
 
 A breakpoint prefix is supported on all of the utility classes mentioned above, except for `ds-u-visibility--screen-reader`.
 

packages/core/src/utilities/flexbox.scss

@@ -4,11 +4,11 @@
 /*
 Flexbox
 
-Use the [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) utility classes to control various flexbox properties. These are especially useful when combined with [flexbox grid]({{root}}/layout/grid#layout.grid.alignment) classes.
+Use the [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) utility classes to control various flexbox properties. These are especially useful when combined with [flexbox grid](/layout/grid#layout.grid.alignment) classes.
 
 #### Usage
 
-For these utility classes to work, first create a flex container — you can use the [`ds-u-display--flex`]({{root}}/utilities/display-visibility) utility class — then apply these  utility classes to the container's direct children elements.
+For these utility classes to work, first create a flex container — you can use the [`ds-u-display--flex`](/utilities/display-visibility) utility class — then apply these  utility classes to the container's direct children elements.
 
 Style guide: utilities.flexbox
 */
@@ -20,7 +20,7 @@ Use the `justify-content` utility class on a flexbox container to change the ali
 
 > The CSS `justify-content` property defines how the browser distributes space between and around content items along the main axis of their container. — [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
 
-The classes follow the format: `ds-u-justify-content--{value}` and `ds-u-{breakpoint}-justify-content--{value}` where `breakpoint` is one of the [breakpoint prefixes]({{root}}/guidelines/responsive), and `value` is one of:
+The classes follow the format: `ds-u-justify-content--{value}` and `ds-u-{breakpoint}-justify-content--{value}` where `breakpoint` is one of the [breakpoint prefixes](/guidelines/responsive), and `value` is one of:
 
 - `start` (browser default)
 - `end`
@@ -81,7 +81,7 @@ Use the `align-items` utility class on a flexbox container to change the alignme
 
 > The CSS `align-items` property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like `justify-content` but in the perpendicular direction. — [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
 
-The classes follow the format: `ds-u-align-items--{value}` and `ds-u-{breakpoint}-align-items--{value}` where `breakpoint` is one of the [breakpoint prefixes]({{root}}/guidelines/responsive), and `value` is one of:
+The classes follow the format: `ds-u-align-items--{value}` and `ds-u-{breakpoint}-align-items--{value}` where `breakpoint` is one of the [breakpoint prefixes](/guidelines/responsive), and `value` is one of:
 
 - `start`
 - `end`
@@ -142,7 +142,7 @@ Use the `flex-wrap` utility class on a flexbox container to change how its child
 
 > The CSS `flex-wrap` property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. — [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
 
-The classes follow the format: `ds-u-flex-wrap--{value}` and `ds-u-{breakpoint}-flex-wrap--{value}` where `breakpoint` is one of the [breakpoint prefixes]({{root}}/guidelines/responsive), and `value` is one of:
+The classes follow the format: `ds-u-flex-wrap--{value}` and `ds-u-{breakpoint}-flex-wrap--{value}` where `breakpoint` is one of the [breakpoint prefixes](/guidelines/responsive), and `value` is one of:
 
 - `nowrap` (browser default)
 - `wrap`
@@ -162,7 +162,11 @@ Markup:
 
 Style guide: utilities.flexbox.flex-wrap
 */
-$_flex-wrap-values: (nowrap: nowrap, wrap: wrap, reverse: wrap-reverse);
+$_flex-wrap-values: (
+  nowrap: nowrap,
+  wrap: wrap,
+  reverse: wrap-reverse
+);
 
 @each $name in map-keys($_flex-wrap-values) {
   $value: map-get($_flex-wrap-values, $name);

packages/core/src/utilities/float.scss

@@ -6,7 +6,7 @@ Float
 
 Set an element's `float` property using the float utility.
 
-You can use the [clearfix utility class]({{root}}/utilities/clearfix) to automatically clear your floats.
+You can use the [clearfix utility class](/utilities/clearfix) to automatically clear your floats.
 
 **Format**: `ds-u-float--[VALUE]`
 
@@ -38,7 +38,7 @@ Responsive
 
 @responsive
 
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change how an element is floated at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to change how an element is floated at specific breakpoints.
 
 Markup:
 <div class="ds-u-clearfix">

packages/core/src/utilities/font-size.scss

@@ -61,7 +61,7 @@ Style guide: utilities.font-size
 /*
 Responsive font sizes
 
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the font size at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to change the font size at specific breakpoints.
 
 _Resize your browser to see each breakpoint in action:_
 

packages/core/src/utilities/margin.scss

@@ -8,7 +8,7 @@ Use the margin utility to change an element's margin.
 
 **Format**: `ds-u-margin-[x|y|bottom|left|right|top]--[MULTIPLE]`
 
-[Read more about how the design system approaches spacing here.]({{root}}/layout/spacing)
+[Read more about how the design system approaches spacing here.](/layout/spacing)
 
 @hide-markup
 
@@ -101,7 +101,7 @@ Style guide: utilities.margin
 /*
 Responsive margins
 
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the margin at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to change the margin at specific breakpoints.
 
 _Resize your browser to see each breakpoint in action:_
 

packages/core/src/utilities/padding.scss

@@ -8,7 +8,7 @@ Use the padding utility to change an element's padding.
 
 **Format**: `ds-u-padding-[x|y|bottom|left|right|top]--[MULTIPLE]`
 
-[Read more about how the design system approaches spacing here.]({{root}}/layout/spacing)
+[Read more about how the design system approaches spacing here.](/layout/spacing)
 
 @hide-markup
 
@@ -63,7 +63,7 @@ Style guide: utilities.padding
 /*
 Responsive padding
 
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the padding at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to change the padding at specific breakpoints.
 
 _Resize your browser to see each breakpoint in action:_
 

packages/core/src/utilities/text-align.scss

@@ -41,7 +41,7 @@ Responsive text alignment
 
 @responsive
 
-Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the text alignment at specific breakpoints.
+Use a [breakpoint prefix](/guidelines/responsive) to change the text alignment at specific breakpoints.
 
 Markup:
 <div class="ds-u-sm-text-align--center ds-u-md-text-align--left ds-u-lg-text-align--right">