Core HTML element atoms #69
Assignees
Labels
Comments
arcticicestudio
added a commit
that referenced
this issue
Dec 6, 2018
The core atom `A` represents the inline text semantic (1) HTML element `<a>`. It is a special dynamic and failsafe component since it internally uses the Gatsby `Link` component to route within the site (internal links) while also being able to link to external targets. The URLs are passed through the `to` and `href` props. References: (1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics (2) https://www.gatsbyjs.org/docs/gatsby-link Associated epic: GH-69 GH-70
This was referenced Dec 6, 2018
arcticicestudio
added a commit
that referenced
this issue
Dec 13, 2018
The currently used version of "Gatsby Link" (1) uses the `innerRef` prop to allow `ref` access to the underlying DOM element (necessary for animations). In order to wrap animated components the `ref` is necessary and is therefore now forwarded. The legacy behavior of "Gatsby Link" is about to change in the future to the `React.forwardRef` API. See gatsbyjs/gatsby#9892 for more details. References: (1) https://www.gatsbyjs.org/docs/gatsby-link Associated epic: GH-69 GH-64
This was referenced Dec 13, 2018
arcticicestudio
added a commit
that referenced
this issue
Dec 16, 2018
This commit implements the core atom `P` that represents the text content (1) HTML element `<p>`. It uses adjusted styles instead of browser defaults to match Nord Docs style. References: (1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content Associated epic: GH-69 GH-79
arcticicestudio
added a commit
that referenced
this issue
Dec 17, 2018
This commit implements the core atom(s) `H1`-`H6` which represent the content sectioning (1) HTML element `<h1>`-`<h6>` (2). It uses custom styles instead of browser defaults and allows to disable the bottom margin via the `noMargin` prop. The font styles like size, modular scale and family adhere to the "Typography" design concept (3). References: (1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning (2) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements (3) #2 Associated epics: GH-69, GH-2 GH-81
9 tasks
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
The `Hr` component represents a `<hr>` (1) base HTML element to render a visual thematic break between paragraph-level elements. References: (1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr Associated epic: GH-69 GH-115
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To achieve a consistent and uniform style and layout, the basic HTML elements, like e.g. a
<h1>or<ul>should be used through a React component. These components render to the base HTML element they represent, but will apply styles, behavior and layout properties to ensure they match the project's design guidelines instead of using default browser configurations that might be even differ for each user agent.This allows to use base HTML elements with all the advantages of React and JS without worrying about different render output.
This collection issue tracks the implementations of all the different individual React components. They are all based on the awesome MDN HTML elements reference documentation and will use the same categorization.
Inline Text Semantics
ARepresents the
<a>HTML element (or anchor element). This is a special dynamic and failsafe component since it'll internally use Gatsby Link to route within the site (internal links) while also being able to link to external data.This will be handled through a utility function to conditionally render based on the passed target URL (internal & external).
The text was updated successfully, but these errors were encountered: